dashing-rails 1.0.0

data/app/controllers/dashing/events_controller.rb

@@ -0,0 +1,25 @@
+module Dashing
+  class EventsController < ApplicationController
+    include ActionController::Live
+
+    respond_to :html
+
+    def index
+      response.headers['Content-Type']      = 'text/event-stream'
+      response.headers['X-Accel-Buffering'] = 'no'
+
+      redis = Redis.new
+      redis.psubscribe("#{Dashing.config.redis_namespace}.*") do |on|
+        on.pmessage do |pattern, event, data|
+          response.stream.write("data: #{data}\n\n")
+        end
+      end
+    rescue IOError
+      logger.info "[Dashing][#{Time.now.utc.to_s}] Stream closed"
+    ensure
+      redis.quit
+      response.stream.close
+    end
+
+  end
+end

data/app/controllers/dashing/widgets_controller.rb

@@ -0,0 +1,50 @@
+module Dashing
+  class WidgetsController < ApplicationController
+
+    before_filter :check_accessibility, only: :update
+    before_filter :check_widget_name,   only: [:show, :update]
+    before_filter :prepend_view_paths,  only: :show
+
+    rescue_from ActionView::MissingTemplate, with: :template_not_found
+
+    def show
+      render file: withdet_path
+    end
+
+    def update
+      data = params[:widget] || {}
+      hash = data.merge(id: params[:name], updatedAt: Time.now.utc.to_i)
+      Dashing.redis.publish("#{Dashing.config.redis_namespace}.create", hash.to_json)
+
+      render nothing: true
+    end
+
+    private
+
+    def check_widget_name
+      raise 'bad widget name' unless params[:name] =~ /\A[a-zA-z0-9_\-]+\z/
+    end
+
+    def withdet_path
+      "#{params[:name]}/#{params[:name]}"
+    end
+
+    def prepend_view_paths
+      prepend_view_path engine_view_path
+      prepend_view_path main_app_view_path
+    end
+
+    def engine_view_path
+      Dashing::Engine.root.join('app', 'views', 'dashing', 'default_widgets')
+    end
+
+    def main_app_view_path
+      Rails.root.join(Dashing.config.widgets_path)
+    end
+
+    def template_not_found
+      raise "Count not find template for widget #{params[:name]}. Define your widget in #{main_app_view_path}"
+    end
+
+  end
+end

data/app/helpers/dashing/application_helper.rb

@@ -0,0 +1,4 @@
+module Dashing
+  module ApplicationHelper
+  end
+end

data/app/views/dashing/default_widgets/clock/clock.coffee

@@ -0,0 +1,18 @@
+class Dashing.Clock extends Dashing.Widget
+
+  ready: ->
+    setInterval(@startTime, 500)
+
+  startTime: =>
+    today = new Date()
+
+    h = today.getHours()
+    m = today.getMinutes()
+    s = today.getSeconds()
+    m = @formatTime(m)
+    s = @formatTime(s)
+    @set('time', h + ":" + m + ":" + s)
+    @set('date', today.toDateString())
+
+  formatTime: (i) ->
+    if i < 10 then "0" + i else i

data/app/views/dashing/default_widgets/clock/clock.html

@@ -0,0 +1,2 @@
+<h1 data-bind="date"></h1>
+<h2 data-bind="time"></h2>

data/app/views/dashing/default_widgets/clock/clock.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+// ----------------------------------------------------------------------------
+// Widget-clock styles
+// ----------------------------------------------------------------------------
+.widget-clock {
+
+  background-color: $background-color;
+
+}

data/app/views/dashing/default_widgets/comments/comments.coffee

@@ -0,0 +1,24 @@
+class Dashing.Comments extends Dashing.Widget
+
+  @accessor 'quote', ->
+    "“#{@get('current_comment')?.body}”"
+
+  ready: ->
+    @currentIndex = 0
+    @commentElem = $(@node).find('.comment-container')
+    @nextComment()
+    @startCarousel()
+
+  onData: (data) ->
+    @currentIndex = 0
+
+  startCarousel: ->
+    setInterval(@nextComment, 8000)
+
+  nextComment: =>
+    comments = @get('comments')
+    if comments
+      @commentElem.fadeOut =>
+        @currentIndex = (@currentIndex + 1) % comments.length
+        @set 'current_comment', comments[@currentIndex]
+        @commentElem.fadeIn()

data/app/views/dashing/default_widgets/comments/comments.html

@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+<div class="comment-container">
+  <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
+  <p class="comment" data-bind='quote'></p>
+</div>
+
+<p class="more-info" data-bind="moreinfo | raw"></p>

data/app/views/dashing/default_widgets/comments/comments.scss

@@ -0,0 +1,33 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #eb9c3c;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-comment styles
+// ----------------------------------------------------------------------------
+.widget-comments {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+    margin-bottom: 15px;
+  }
+
+  .name {
+    padding-left: 5px;
+  }
+
+  .comment-container {
+    display: none;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}

data/app/views/dashing/default_widgets/graph/graph.coffee

@@ -0,0 +1,35 @@
+class Dashing.Graph extends Dashing.Widget
+
+  @accessor 'current', ->
+    return @get('displayedValue') if @get('displayedValue')
+    points = @get('points')
+    if points
+      points[points.length - 1].y
+
+  ready: ->
+    container = $(@node).parent()
+    # Gross hacks. Let's fix this.
+    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
+    @graph = new Rickshaw.Graph(
+      element: @node
+      width: width
+      height: height
+      series: [
+        {
+        color: "#fff",
+        data: [{x:0, y:0}]
+        }
+      ]
+    )
+
+    @graph.series[0].data = @get('points') if @get('points')
+
+    x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
+    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
+    @graph.render()
+
+  onData: (data) ->
+    if @graph
+      @graph.series[0].data = data.points
+      @graph.render()

data/app/views/dashing/default_widgets/graph/graph.html

@@ -0,0 +1,5 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
+
+<p class="more-info" data-bind="moreinfo"></p>

data/app/views/dashing/default_widgets/graph/graph.scss

@@ -0,0 +1,65 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
+$tick-color:        rgba(0, 0, 0, 0.4);
+
+
+// ----------------------------------------------------------------------------
+// Widget-graph styles
+// ----------------------------------------------------------------------------
+.widget-graph {
+
+  background-color: $background-color;
+  position: relative;
+
+
+  svg {
+    position: absolute;
+    opacity: 0.4;
+    fill-opacity: 0.4;
+    left: 0px;
+    top: 0px;
+  }
+
+  .title, .value {
+    position: relative;
+    z-index: 99;
+  }
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 0;
+  }
+
+  .x_tick {
+    position: absolute;
+    bottom: 0;
+    .title {
+      font-size: 20px;
+      color: $tick-color;
+      opacity: 0.5;
+      padding-bottom: 3px;
+    }
+  }
+
+  .y_ticks {
+    font-size: 20px;
+    fill: $tick-color;
+    fill-opacity: 1;
+  }
+
+  .domain {
+    display: none;
+  }
+
+}

data/app/views/dashing/default_widgets/iframe/iframe.coffee

@@ -0,0 +1,9 @@
+class Dashing.Iframe extends Dashing.Widget
+
+  ready: ->
+    # This is fired when the widget is done being rendered
+
+  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.

data/app/views/dashing/default_widgets/iframe/iframe.html

@@ -0,0 +1 @@
+<iframe data-bind-src="url" frameborder=0></iframe>

data/app/views/dashing/default_widgets/iframe/iframe.scss

@@ -0,0 +1,8 @@
+.widget-iframe {
+  padding: 3px 0px 0px 0px !important;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

data/app/views/dashing/default_widgets/image/image.coffee

@@ -0,0 +1,9 @@
+class Dashing.Image extends Dashing.Widget
+
+  ready: ->
+    # This is fired when the widget is done being rendered
+
+  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.

data/app/views/dashing/default_widgets/image/image.html

@@ -0,0 +1 @@
+<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>

data/app/views/dashing/default_widgets/image/image.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+// ----------------------------------------------------------------------------
+// Widget-image styles
+// ----------------------------------------------------------------------------
+.widget-image {
+
+  background-color: $background-color;
+
+}

data/app/views/dashing/default_widgets/index.css

@@ -0,0 +1,12 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ */

data/app/views/dashing/default_widgets/index.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require_tree .

data/app/views/dashing/default_widgets/list/list.coffee

@@ -0,0 +1,6 @@
+class Dashing.List extends Dashing.Widget
+  ready: ->
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()

data/app/views/dashing/default_widgets/list/list.html

@@ -0,0 +1,18 @@
+<h1 class="title" data-bind="title"></h1>
+
+<ol>
+  <li data-foreach-item="items">
+    <span class="label" data-bind="item.label"></span>
+    <span class="value" data-bind="item.value"></span>
+  </li>
+</ol>
+
+<ul class="list-nostyle">
+  <li data-foreach-item="items">
+    <span class="label" data-bind="item.label"></span>
+    <span class="value" data-bind="item.value"></span>
+  </li>
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/app/views/dashing/default_widgets/list/list.scss

@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #12b0c5;
+$value-color:       #fff;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$label-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-list styles
+// ----------------------------------------------------------------------------
+.widget-list {
+
+  background-color: $background-color;
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: $label-color;
+  }
+
+  ol {
+    list-style-position: inside;
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+
+  .list-nostyle {
+    list-style: none;
+  }
+
+  .label {
+    color: $label-color;
+  }
+
+  .value {
+    float: right;
+    margin-left: 12px;
+    font-weight: 600;
+    color: $value-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}