Dashing-rails: как изменить цвет фона виджета, чтобы отразить логическое значение данных?

Я использую dashing-rails и пытаюсь изменить цвет фона виджета на зеленый/красный. в зависимости от логического значения, которое я получаю от API. У меня есть работа с:

Dashing.scheduler.every '1m', first_in: 8 do
  Dashing.send_event('all_good', status: MixpanelHelper.all_good?)
end

виджет, чей coffeescript включает в себя:

onData: (data) ->
  if data.status
    $(@node).css('background-color', '#42b2aa')
  else
    $(@node).css('background-color', '#e85c28')

и панель инструментов, в которую входят:

    <div data-id="all_good" data-view="Mywidget" data-title="All good" data-goal="95%" data-suffix="%"></div>

Но изменение цвета не происходит. Я неправильно передаю свои данные?


ruby-on-rails dashing
person ivan    schedule 24.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я только начал использовать Dashing несколько дней назад, и у меня была такая же проблема. То, как я решил это, состоит в том, чтобы поместить его в 2 места, как ready:, так и onData: такие события.

  ready: ->
    # This is fired when the widget is done being rendered
    @setColor(@get('status'))

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
    @setColor(@get('status'))
    $(@node).fadeOut().fadeIn()

  setColor: (status) ->
    if status
      switch status
          when 'RUN' then $(@node).css("background-color", "#29a334") #green
          when 'FAIL' then $(@node).css("background-color", "#b80028") #red
          when 'PEND' then $(@node).css("background-color", "#ec663c") #orange
          when 'HOLD' then $(@node).css("background-color", "#4096ee") #blue

Я думаю, что это не лучшее решение, может быть другое событие, которое можно использовать, о котором я еще не знаю, я обновлю этот ответ, если найду его, но тем временем вы можете использовать это.

person sammydc    schedule 28.02.2014

arrow_upward
0
arrow_downward

Ответ sammydc правильный.. добавление дополнительной информации, основанной на моем опыте (сегодня я впервые использую тире) при создании нового виджета (имя = xzryryrk):

Запустите эту команду, чтобы создать новый виджет:

dashing generate widget xzryryrk

Выход:

widgets/xzryryrk/xzryryrk.html
widgets/xzryryrk/xzryryrk.scss
widgets/xzryryrk/xzryryrk.coffee

  1. Отредактируйте «xzryryrk.coffee», чтобы добавить код, упомянутый sammydc в сообщении выше, но помните о пробелах и вкладках. Тире основан на языке, который чувствителен к пробелам и табуляциям.

  2. Отредактируйте «xzryryrk.scss»: по умолчанию новый виджет не имеет конфигурации css. Вам необходимо добавить следующий css (измените имя в соответствии с вашими требованиями):

    $background-color:  #47bbb3;
$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-xzryryrk {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(255, 255, 255, 0.7);
  }


  &.large h3 {
    font-size: 65px;
  }
}

  3. Отредактируйте xzryryrk.html: по умолчанию он также пуст. Добавьте следующее:

    <h1 class="title" data-bind="title"></h1> <h3 data-bind="text"></h3> <p class="more-info" data-bind="moreinfo"></p> <p class="updated-at" data-bind="updatedAtMessage"></p>

И, наконец, отредактируйте файл erb в (вероятно, /dashing/dashboards/sample.erb)

    `<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div data-id="xzryryrk" data-view="Xzryryrk" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
    </li>`

Теперь вы можете использовать CURL следующим образом:

`curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "title":"XXX" ,"status": "FAIL" ,"text":"FAIL"}' http://X.X.X.X:8082/widgets/xzryryrk`
person rinkush sharda    schedule 15.12.2019