Dashboard Nav Test

components.deep-link.js

import Ember from 'ember';

export default Ember.Component.extend({
  
	attributeBindings: ['href'],
  href: '#',
  tagName: 'a',  
  text: '',
  
  click: function(e) {
    
    var anchor = this.get('href');
    
   	e.preventDefault();
    
    console.log('targeting', anchor, ('#'+ anchor), $('#'+ anchor).offset());
    
  	$('html, body').animate({
        scrollTop: $('#'+ anchor).offset().top
    }, 0);
  }
});

components.grid-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // properteez
  classNameBindings: ['isHovering:hover'],
  classNames: 'block-grid-item',
  isHovering: false,
    
  // actions
  click: function() {
  	this.set('itemData.panel.isExpanded', true);
  },
  mouseEnter: function() {
     this.set('isHovering', true);
  },
  mouseLeave: function() {
     this.set('isHovering', false);
  }
});

components.panel-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'panel panel-default',
  isExpanded: Ember.computed.alias('itemData.panel.isExpanded'),
  
  actions: {
  	togglePanel: function() {
    
    	this.toggleProperty('isExpanded');
    }
  }
});

components.panel-nav-link.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  
  click: function() {
    this.set('itemData.panel.isExpanded', true);
  }
});

components.vis-graph.js

import Ember from 'ember';
//import vis from 'visjs';

export default Ember.Component.extend({
  graphData: [
    {
        id: 1,
        content: '<i class="fa fa-hourglass-half" aria-hidden="true"></i>',
        start: '2016-08-01',
        group: 1
    }, {
        id: 2,
        content: '<i class="fa fa-hourglass-end" aria-hidden="true"></i>',
        start: '2016-08-08',
        group: 1
    }, {
        id: 3,
        content: '',
        start: '2016-08-01',
        end: '2016-08-20',
        className: 'gray',
        group: 2
    }, {
        id: 4,
        content: '',
        start: '2016-08-20',
        end: '2016-08-25',
        className: 'orange',
        group: 2
    }, {
      id: 5,
      content: '',
      start: '2016-08-25',
      end: '2016-09-25',
      className: 'green',
      group: 2

    }, {
        id: 6,
        content: '',
        start: '2016-09-25',
        end: '2016-09-28',
        className: 'orange',
        group: 2
    }, {
        id: 7,
        content: '<i class="fa fa-hourglass-end" aria-hidden="true"></i>',
        start: '2016-10-05',
        group: 1
    }
	],
  
  graphGroups: [
    {
      id: 1,
      content: 'events'
    },{
      id: 2,
      content: 'work status'
    }
  ],
  
  graphOptions: {
    height: 250,
    width: '100%',
    editable: false, /* this option means you can add or remove items by clicking on the timeline */
    margin: {
      item : {
        horizontal : 0,
        vertical: 50
      }
    }
	},
  
  didInsertElement: function() {
  	this._super();
    
    var timeline = new vis.Timeline(this.get('element'), new vis.DataSet(this.get('graphData')), this.get('graphOptions'));
    
    timeline.setGroups(this.get('graphGroups'));
    
    this.set('timeline', timeline);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  panelGroups: Ember.computed('panels', function() {
    var groupLimit = 4;
  	var panelGroups = [];
    var panels = this.get('panels');
    
    panels.forEach(function(panel, z) {
      let groupNum = Math.floor(z / groupLimit);
      if (!panelGroups[groupNum]) { panelGroups[groupNum] = []; }
    	panelGroups[groupNum].push(panel);
    });
    
    return panelGroups;
  }),
  panels: [{
      title: 'Work Status',
    	widget: {
				valueText: 'Mod. Duty',
  			detailText: 'since 07/07/2016',
  			linkText: 'view or modify statuses'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Work Restrictions',
    	widget: {
				valueText: '0 Active',
  			detailText: '1 expired',
  			linkText: 'manage restrictions'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Claim Duration',
    	widget: {
				valueText: '95 Days',
  			detailText: '7 days until est. RTW',
  			linkText: 'more information'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Appointments',
    	widget: {
				valueText: '0 Upcoming',
  			detailText: '1 past',
  			linkText: 'view calendar'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Employment Status',
    	widget: {
				valueText: 'Full-time',
  			detailText: 'Starbucks / Seattle Airport',
  			linkText: 'modify status'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Benefit Barriers',
    	widget: {
				valueText: 'Dispute',
  			detailText: 'benefits not owed',
  			linkText: 'view or modify barriers'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Body Parts',
    	widget: {
				valueText: 'MULTIPLE',
  			detailText: 'no detail text yet',
  			linkText: 'view body parts'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
    }, {
      title: 'Outcome',
    	widget: {
				valueText: 'Return to Full',
  			detailText: 'estimated 09/01/2016',
  			linkText: 'view or modify outcome'
      },
      panel: {
        canClose: false,
        canToggle: true,
        isExpanded: false
      }
   }]
});

helpers.slugify.js

import Ember from 'ember';

export function slugify(params/*, hash*/) {
  var text = params[0] || 'SLUG_TEXT';
  
	return text.toString().toLowerCase().trim()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/&/g, '-and-')         // Replace & with 'and'
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-');        // Replace multiple - with single -
}

export default Ember.Helper.helper(slugify);

styles.app.css

body,
html {
  background-color: #e6e7e7;
}

.row { 
  margin-bottom: 30px;
}

.panel {
  margin: 0;
}

/*
 * basic layout and srtucture
 * * * * * * * * * * * * * * * * */
.block-grid-item {
  cursor: pointer;
}
  
/*
 * colorization and theming
 * * * * * * * * * * * * * * * * */
.block-grid-item .content,
.block-grid-item .footer,
.block-grid-item .header {
  padding: 0.5rem;
}
.block-grid-item .content,
.block-grid-item .header {
  text-align: center;
}
.block-grid-item .header {
  text-transform: uppercase;
}
.block-grid-item .content small,
.block-grid-item .content strong {
  clear: both;
  display: block;
}
.block-grid-item .content strong {
  font-size: 2rem;
}
.block-grid-item,
.block-grid-item a {
  color: #FFFFFF;
}
.block-grid-item .header {
  background-color: #00A9F4;
}
.block-grid-item .footer {
  background-color: #0086C1;
}
.block-grid-item .content {
  background-color: #008EDD;
}
.block-grid-item.hover .header {
  background-color: #FFA300;
}
.block-grid-item.hover .footer {
  background-color: #E57D00;
}
.block-grid-item.hover .content {
  background-color: #FF9100;
}

.panel .panel-heading {
  cursor: pointer;
}

/*
 * fontawesome
 * * * * * * * * * * * * * * * * */

.fa.inactive {
  opacity: 0.5;
}

.vis-item.gray {
  color: white;
  background-color: gray;
  border-color: darkgray;
}

/*
 * visjs
 * * * * * * * * * * * * * * * * */

.vis-item.vis-range {
  border-radius: 0;
}

.vis-item.orange {
  color: white;
  background-color: orange;
  border-color: darkorange;
}

.vis-item.green {
  color: white;
  background-color: green;
  border-color: darkgreen;
}

.vis-time-axis {
  background: white;
}

.vis-item.vis-box {
  background-color: transparent;
  border-radius: 50px;
  width: 2.5em;
  height: 2.5em;
}

.vis-item.vis-box,
.vis-item.vis-dot,
.vis-item.vis-line {
  border-color: #C400BB;
  color: #C400BB;
}

/*
 * junkyard
 * * * * * * * * * * * * * * * * */

.junk.junk-timeline .inner-wrap, .junk.junk-action-items .inner-wrap {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 250px;
  justify-content: center;
}

.junk.junk-navbar {
  margin: 0;
}

templates.application.hbs

<a name="top" id="top"></a>

  <div class="container">
  
  	<div class="row">
    	<div class="col-sm-8 junk junk-timeline">
      	{{vis-graph}}
      </div>
    	<div class="col-sm-4 junk junk-action-items">
      	<div class="inner-wrap">
        	ACTION ITEMS
        </div>
      </div>
    </div><!-- .row -->
    
    <div class="row">
    	<div class="col-sm-12">
      	<nav class="navbar navbar-inverse junk junk-navbar">
          <div class="container-fluid">
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entities <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    {{#each panels as |panel z|}}
                    	{{panel-nav-link itemData=panel}}
                    {{/each}}
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">External Apps <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
     				  </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    	</div>
    </div><!-- .row -->
    
   {{#each panelGroups as |panelGroup|}}
    	<div class="row">
      {{#each panelGroup as |panel z|}}
      	<div class="col-sm-3">
        	{{grid-item itemData=panel}}
      	</div>
      {{/each}}
      </div>
    {{/each}}
    
    {{!-- expanded panels --}}
    {{#each panels as |panel z|}}
    	{{!#if panel.panel.isExpanded}}
        <div class="row">
          <div class="col-sm-12">
            {{panel-item itemData=panel}}
          </div>
        </div>
    	{{!/if}}
    {{/each}}
    
    {{!-- collapsed panels --}}
    {{!--#each panels as |panel z|}}
    	{{#unless panel.panel.isExpanded}}
        <div class="row">
          <div class="col-sm-12">
            {{panel-item itemData=panel}}
          </div>
        </div>
    	{{/unless}}
    {{/each--}}
    
    {{deep-link href="top" text="back to top"}}
  </div>

templates.components.deep-link.hbs

{{#if hasBlock}}
	{{yield}}
{{else}}
  {{if text text "LINK_TEXT"}}
{{/if}}

templates.components.grid-item.hbs

{{#deep-link href=(slugify itemData.title)}}
<div class="header">{{if itemData.title itemData.title "ITEM_TITLE_TEXT"}}</div>
<div class="content">
  <strong>{{if itemData.widget.valueText itemData.widget.valueText "ITEM_VALUE_TEXT"}}</strong>
  <small>{{if itemData.widget.detailText itemData.widget.detailText "ITEM_DETAIL_TEXT"}}</small>
</div>
<div class="footer">
	{{itemData.widget.linkText}}
</div>
{{/deep-link}}

templates.components.panel-item.hbs

<a name="{{slugify itemData.title}}" id="{{slugify itemData.title}}"></a>
<div {{action "togglePanel"}} class="panel-heading">
	{{if itemData.title itemData.title "PANEL_TITLE"}}
  {{#if itemData.panel.canToggle}}
  	<i class="fa fa-{{if itemData.panel.isExpanded "close" "plus"}} pull-right"></i>
  {{/if}}
</div>
{{#if itemData.panel.isExpanded}}
  <div class="panel-body">
    <p>{{if itemData.title itemData.title "PANEL_TITLE"}} panel body</p>
    <p>{{if itemData.title itemData.title "PANEL_TITLE"}} panel body</p>
    <p>{{if itemData.title itemData.title "PANEL_TITLE"}} panel body</p>
    <p>{{if itemData.title itemData.title "PANEL_TITLE"}} panel body</p>
    <p>{{if itemData.title itemData.title "PANEL_TITLE"}} panel body</p>
  </div>
{{/if}}

templates.components.panel-nav-link.hbs

{{#deep-link href=(slugify itemData.title)}}
	<i class="fa {{if itemData.panel.isExpanded "fa-eye" "fa-eye-slash inactive"}}"></i>
	{{itemData.title}}
{{/deep-link}}

templates.components.vis-graph.hbs

{{yield}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
  	"visjs": "https://visjs.org/dist/vis.min.js",
    "visjs-css": "https://visjs.org/dist/vis.css",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
  	"bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
    "font-awesome": "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}