JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/jzajpt/ember-bootstrap/ember-bootstrap-0.0.1.js"></script>
<script type="text/x-handlebars">
    <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Commanders Dashboard Playground</a>
        <ul class="nav">
            <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-fluid">
      <div class="row-fluid">
          <div class="span8">
            <h3>Entity</h3>
            <hr/>
          </div>
          <div class="span4">
            <h3>Grid</h3>
            <hr/>
          </div>
      </div>
      <div class="row-fluid">
          <div class="span4">
      {{view Bootstrap.Forms.TextField valueBinding="App.entity.lastDayHits" label="Last day hits"}}
      {{view Bootstrap.Forms.TextField valueBinding="App.entity.analyticValue" label="Analytic value"}}
      {{view Bootstrap.Forms.TextField valueBinding="App.entity.averageVolume" label="Average volume"}}
          </div>
          <div class="span4">
      {{view App.TextField valueBinding="App.entity.threatLevel" label="Threat level" disabled="true"}}
      {{view App.TextField valueBinding="App.entity.indicatorValueEquation" label="Indicator Value Equation" disabled="true" dataContentBinding="App.entity.indicatorValueEquationTooltip"}}
      {{view App.TextField valueBinding="App.entity.entityMeterEquation" label="Entity Meter Equation" disabled="true" dataContentBinding="App.entity.entityMeterEquationTooltip"}}
      {{view App.TextField valueBinding="App.entity.indicatorMeterEquation" label="Indicator Meter Equation" disabled="true" dataContentBinding="App.entity.indicatorMeterEquationTooltip"}}
     ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

CoffeeScript

window.App = Em.Application.create
  ready: ->
    Em.run.next this, ->
      $(this.get('rootElement')).find('[rel]').popover()
      
App.TextField = Bootstrap.Forms.TextField.extend
  attributeBindings: 'rel label:title dataContent:data-content placement:data-placement'.w()
  rel: 'tooltip'
  title: ''
  placement: 'bottom'
  titleChanged: (->
    this.$().popover('fixTitle')
  ).observes('title')

App.Entity = Em.Object.extend
  analyticValue: 0
  averageVolume: 0
  indicatorValueEquation: (->
    @get("analyticValue") * @get("averageVolume")
  ).property("analyticValue", "averageVolume")
  indicatorValueEquationTooltip: (->
    html = """
       <strong>
         analyticValue * averageVolume
       </strong>
       <p>#{@get('analyticValue')} * #{@get('averageVolume')} = #{@get('indicatorValueEquation')}</p>
       """
  ).property('indicatorValueEquation')
  entityMeterEquation: (->
    aval = @get "analyticValue" || 0
    vol = @get "averageVolume" || 0
    last_day = @get "lastDayHits" || 0
    val_eq = @get "indicatorValueEquation" || 0

    switch true
      when last_day > (vol + (vol * 2)) then 5
      when last_day > (vol + (vol * 1.5)) && last_day <= (vol + (vol * 2)) then 4
      when last_day > vol + vol && last_day <= (vol + (vol * 1.5)) then 3
      when last_day > (vol + (vol * 0.5)) && last_day <= (vol + vol) then 2
      when last_day > vol && last_day <= (vol + (vol * 0.5)) then 1
      else 0
  ).property("analyticValue", "averageVolume", "indicatorValueEquation", "lastDayHits")
  entityMeterEquationTooltip: (->
    aval = @get "analyticValue" || 0
    vol = @get "averageVolume" || 0
    last_day = @get "lastDayHits" || 0
    val_eq = @get "indicatorValueEquation" || 0
    
    html = """
      <strong>
      <p>when last_day > (vol + (vol * 2)) then 5</p>
      <p>when last_day > (vol + (vol * 1.5)) && last_day <= (vol + (vol * 2)) then 4</p>
      <p>when last_day > vol + vol && last_day <= (vol + (vol * 1.5)) then 3</p>
      <p>when...