Dashing - "text status" widget

Readme.md

Dashing Text Status Widget

This widget is based on the standard Dashing Text widget. It adds a status management between three basic states : OK, ERROR and INFORMATION. The widget background, image and color, changes with the state.

What it does

With this widget, you can display the status of a single system. It can be used for servers, sites, etc. It lets you build status dashboards with a single system per tile. The widget will fade to green if the status is OK, red if ERROR, blue if INFORMATION. You can customize the text displayed and change it dynamically.

If you refer to the thumbnail, you'll see an example.

How to add to Dashing

Copy

• textstatus.coffee
• textstatus.html
• textstatus.scss

in a "textstatus" folder in your dashing widget directory.

How to use it

Its use is very close to the standard Text widget, with the added management of the status.

In the dashboard UI

Add the declaration of the widget.

Examples :

For Dashing-js

  li(data-row='1', data-col='2', data-sizex='1', data-sizey='1')
    div(data-id='myid', data-view='Textstatus', data-title='A system', data-text='OK', data-moreinfo='Status')

For regular Dashing

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="myid" data-view="Textstatus" data-title="A system", data-text="OK", data-moreinfo="Status"></div>
</li>

In your job

You have to send an event with two attributes :

• value : will hold the text displayed
• status : a boolean representing the status you want to display. True if OK (green status), false for error (red status), null for info (blue status).

Example for dashing-js :

send_event('myid', {value:text, status:statusBool});

Licence

Licenced under the Creative Commons Attribution 4.0

textstatus.coffee

class Dashing.Textstatus extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  @accessor 'bckicon', ->
    statut = @get 'status'
    if statut == true
      return "fa fa-check-circle-o icon-background"    
    else
      if statut == null
        return "fa fa-info-circle icon-background"
      else
        return "fa fa-times-circle-o icon-background"

  onData: (data) ->
    @set 'text', data.value
    node = $(@node)
    statusbool = @get 'status'
    backgroundClass = 'state-' + statusbool
    if @get 'lastClass'
      lastClassVar = @get('lastClass')
      node.toggleClass lastClassVar + ' ' + backgroundClass
      @set 'lastClass', backgroundClass
    else 
      @set 'lastClass', backgroundClass
      node.addClass backgroundClass

textstatus.html

<p>
	<i data-bind-class="bckicon"></i>
	<h1 class="title" data-bind="title"></h1>
</p>

<h3 data-bind="text"></h3>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

textstatus.scss

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #4b4b4b;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-dynamictext styles
// ----------------------------------------------------------------------------
.widget-textstatus {

  background-color: $background-color;
  @include transition(background-color, 0.5s, linear);

  .title {
    color: $title-color;
  }

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

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


  &.large h3 {
    font-size: 65px;
  }
}
.state-true {background-color: #03A868;}
.state-false {background-color: #D52F56;}
.state-null {background-color: #007A80;}

thumbnail.png