jsbin.malaxu.coffee

class Request
  constructor: (adr) ->
    this.adr = adr
    
  start: () ->
    alert("start")
    
  results: () ->
    alert("result")
    
  stop: () ->
    alert("stop")
    
    
class Item
  constructor: (name) ->
    this.name = name
    this.values = []
    
  print: ->
    $("#row").append("<div class=\"col-6 col-sm-6 col-lg-4\"><h2>#{ this.name }</h2><ul  class=\"list-group\" id=\"item-#{ this.name }\"></ul></div>")
    sorted = _.sortBy(this.values, (value) -> 
      - value.percent
    )
      
    _.each(_.first(sorted, 4),(value) ->
      value.print()
    )
    
  remove: ->
    this.select().remove()
    
  add_value: (name,percent) ->
    this.values.push(new Value(this.name, name, percent));
   
  del_value: (name) ->
    _.reject(this.values, (value) -> 
      value.name == name          
    )
    
  green: (value) -> 
    this.find_value(value).green()
    
  ungreen: (value) ->
    this.find_value(value).ungreen()
    
  select: -> $("#item-"+this.name).parent()
    
  find_value: (value) ->
    _.find(this.values, (val) ->
        val.name == value
  )
    
    
class Value
  constructor: (item, name, percent) ->
    this.name = name.replace(/\./g,'_')
    this.percent = percent
    this.item = item
    this.selected = false
    
    
  print: ->
    printed = this.select_item().append("<li id=\"item-#{ this.item }-value-#{ this.name }\" class=\"list-group-item\">#{ this.name }<span class=\"badge\">#{ this.percent }%</span></li>")
    this.select().bind("click", value_click)
    this.re_class()
    
  remove: ->
    this.select().remove()   
    
  green: -> 
    this.selected = true
    this.re_class()
    
  ungreen: -> 
    this.selected = false
    this.re_class()
    
  re_class: ->
    this.un_class()
    this.set_class()
  
  un_class: ->
    this.select().removeClass("list-group-item-warning")
    this.select().removeClass("list-group-item-danger")
    this.select().removeClass("list-group-item-success")
  
  set_class: ->
    this.un_class()
    this.select().addClass("list-group-item-warning") if this.percent >= 15 and this.percent < 50 and !this.selected
    this.select().addClass("list-group-item-danger") if this.percent >= 50 and !this.selected
    this.select().addClass("list-group-item-success") if this.selected

  select_item: -> $("#item-#{ this.item }")    
    
  select: -> $("#item-#{ this.item }-value-#{ this.name }")
    
class Criterion
  constructor: (type, name, value) ->
    this.name = name
    this.value = value
    this.type = type
    
  print: ->
    $("#criteria").append("<li id=\"criterion-#{ this.type }-#{ this.name }\" class=\"list-group-item\"><strong>#{ this.type }</strong>: #{ this.name } <span class=\"badge\">#{ this.value }%</span></li>")
    this.select().bind("click",criterion_click)
    
  remove: ->
    this.select().remove()
    
  select: ->
    $("#criterion-#{ this.type }-#{ this.name }")
    
  
Criteria = {}
Items = {}
Button = -1
req = new Request("")
  
criterion_click = -> 
  id = $(this).attr('id')
  criterion = Criteria[id]
  criterion.remove()
  Items["item-#{ criterion.type }"].find_value(criterion.name).ungreen()
  delete Criteria[id]

value_click = ->
  
  id = $(this).attr('id').replace(/-value-\S*/,"")
  value_name = $(this).attr('id').replace(/\S*-value-/,"")
  return if _.some(Criteria,(crit)-> "item-#{crit.type}" == id )
  value = Items[id].find_value(value_name)
  
  criterion = new Criterion(value.item, value.name, value.percent)
  Criteria["criterion-#{ criterion.type }-#{ criterion.name }"] = criterion
  value.green()
  criterion.print()
    
start_click = ->
  if Button < 0
    Button = 0
    $("#start").html("Stop!")
    $("#start").toggleClass("btn-success")
    $("#start").toggleClass("btn-danger")
    req.start()
  else
    Button = -1
    $("#start").html("Start!")
    $("#start").toggleClass("btn-success")
    $("#start").toggleClass("btn-danger")
    req.stop()
    
    
    
start_hover_in = ->
  unless Button < 0
    $("#start").html("Stop!")
    $("#start").removeClass("btn-success")
    $("#start").addClass("btn-danger")
    $("#start").removeClass("btn-warning")

start_hover_out = ->
  unless Button < 0
    $("#start").html(Button)
    $("#start").removeClass("btn-success")
    $("#start").removeClass("btn-danger")
    $("#start").addClass("btn-warning")
    
$('#start').hover(start_hover_in,start_hover_out)
$('#start').click(start_click)

new_item = (name, value_list) ->
  hosts= new Item(name)
  _.each(value_list, (val) -> hosts.add_value(val[0],val[1]))
  Items['item-#{name}'] = hosts
  hosts.print() 

new_item("Host",[["192.168.2.2",62],["192.168.2.1",16],["192.168.2.30",4],["192.168.3.2",2]])
  
new_item("Plan",[["Marketing",80],["Marketing#1",3],["Marketing#2",2],["Marketing#3",1]])

new_item("Author",[["Bob",17],["Remi",13],["Cyril",2],["Sieg",1]])

new_item("OS",[["Windows",30],["Linux",30],["Unix",34]])

new_item("Application",[["Oracle",17],["SAP",13]])

jsbin.malaxu.html

<!DOCTYPE html>
<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Root cause analysis</title>
</head>
<body>
  <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Root cause analysis</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div id="main" class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-6 col-sm-6 col-md-9">
          <div id="row" class="row">
           

          </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-6 col-md-6 sidebar-offcanvas side fill" id="sidebar" role="navigation">
          <div class="btn btn-success btn-block control" id="start">Start!</div>
          <ul id="criteria" class="list-group">        
          </ul>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Orsyp 2014</p>
      </footer>

    </div><!--/.container-->
  
  
  
  
  
  <script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-git2.js"></script>
    <script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
</body>
</html>

jsbin.malaxu.sass

/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body 
  overflow-x: hidden /* Prevent scroll on narrow devices */

body 
  padding-top: 70px

footer 
  padding: 30px 0

.side
  height: 100%

/*
 * Off Canvas
 * --------------------------------------------------
 */

.row-offcanvas 
  position: relative
  -webkit-transition: all .25s ease-out
  -o-transition: all .25s ease-out
  transition: all .25s ease-out
  

.row-offcanvas-right 
  right: 0
  

.row-offcanvas-left 
  left: 0
  
.row-offcanvas-right
  right: -25% /* 3 columns */
    
.sidebar-offcanvas 
  right: -25% /* 3 columns */
  

.row-offcanvas-left
  left: -25% /* 3 columns */
    
.sidebar-offcanvas 
  left: -25% /* 3 columns */
  

.row-offcanvas-right.active 
  right: 25% /* 3 columns */
  

.row-offcanvas-left.active 
  left: 25% /* 3 columns */
  

.sidebar-offcanvas 
  position: absolute
  top: 0
  width: 25% /* 3 columns */  
  
@media screen and (max-width: 991px) 
  .row-offcanvas-right
    right: -50% /* 6 columns */
    
  .sidebar-offcanvas 
    right: -50% /* 6 columns */
  

  .row-offcanvas-left
    left: -50% /* 6 columns */
    
  .sidebar-offcanvas 
    left: -50% /* 6 columns */
  

  .row-offcanvas-right.active 
    right: 50% /* 6 columns */
  

  .row-offcanvas-left.active 
    left: 50% /* 6 columns */
  

  .sidebar-offcanvas 
    position: absolute
    top: 0
    width: 50% /* 6 columns */
    
  #sidebar  
    .control, .list-group
      width: 100%
      margin-left: 3%
    
.side 
  border-right: 1px solid lightgrey
    
#sidebar
  ul
    margin-top: 3%
    
li
  cursor: pointer
    
#row
  min-height: 500px