App nav redesign phase 1

app/components/nav-menu.js

@@ -0,0 +1,34 @@
+import Ember from 'ember';
+import UserSession from "hospitalrun/mixins/user-session";
+
+export default Ember.Component.extend(UserSession, {
+    tagName: "div",
+    classNames: ["primary-nav-item"],
+    nav: null, 
+
+    show: function() {
+        return this.currentUserCan(this.get("nav").capability);        
+    }.property("nav"),
+
+    isShowing: false,
+
+    _setup: function() {
+        let nav = this.get("nav");
+        nav.closeSubnav = function() {
+            this.set('isShowing', false);
+        }.bind(this);
+        nav.subnav.forEach(function(item) { 
+            item.show = this.currentUserCan(item.capability);
+        }.bind(this));        
+    }.on('init'),
+
+    callNavAction: "navAction",
+
+    actions: {
+        toggleContent: function() {
+            //debugger;
+            this.set('isShowing', !this.get('isShowing'));
+            this.sendAction('callNavAction', this.nav);
+        }
+    }
+});

app/controllers/navigation.js

@@ -1,40 +1,43 @@
 import Ember from "ember";
 import ProgressDialog from "hospitalrun/mixins/progress-dialog";
 import UserSession from "hospitalrun/mixins/user-session";
-export default Ember.Controller.extend(ProgressDialog, UserSession,{
+import Navigation from "hospitalrun/mixins/navigation";
+export default Ember.Controller.extend(ProgressDialog, UserSession, Navigation, {
+
     needs: 'application',
     allowSearch: false,
     currentSearchText: null,
     currentRouteName: Ember.computed.alias('controllers.application.currentRouteName'),
     progressTitle: 'Searching',
     searchRoute: null,
     syncStatus: '',
+    currentOpenNav: null,
 
-    showInventory: function() {
-        return this.currentUserCan('inventory');
-    }.property('session.isAuthenticated'),
-
-    showPatients: function() {
-        return this.currentUserCan('patients');
-    }.property('session.isAuthenticated'),
-
-    showUsers: function() {
-        return this.currentUserCan('users');
-    }.property('session.isAuthenticated'),
-
     actions: {
         search: function() {
             if (this.allowSearch && this.searchRoute) {
                 var currentRouteName = this.get('currentRouteName'),
                     currentSearchText = this.get('currentSearchText'),
                     textToFind = this.get('searchText');
                 if (currentSearchText !== textToFind || currentRouteName.indexOf('.search') === -1) {
-                    this.set('searchText','');                
+                    this.set('searchText','');
                     this.set('progressMessage','Searching for '+textToFind+'.  Please wait...');
                     this.showProgressModal();
                     this.transitionToRoute(this.searchRoute+"/"+textToFind);
                 }
             }
+        },
+
+        navAction: function(nav) {
+            if (this.currentOpenNav) {
+                this.currentOpenNav.closeSubnav();
+            }
+            this.currentOpenNav = nav;
+            this.transitionToRoute(nav.route);
+        },
+
+        toggleSettings: function() {
+            this.toggleProperty('isShowingSettings');
         }
     }
 });

app/imaging/completed/template.hbs

@@ -6,7 +6,7 @@
             <th>Patient</th>
             <th>Imaging Type</th>
             <th>Results</th>
-            <th>Notes</th>            
+            <th>Notes</th>
         </tr>
             {{#each}}
                 <tr>
@@ -17,10 +17,10 @@
                     <td>{{result}}</td>
                     <td>{{notes}}</td>
                 </tr>
-            {{/each}}        
+            {{/each}}
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No completed items found.</em>
+        <p>No completed items found.</p>
     </div>
 {{/if}}

app/imaging/index/template.hbs

@@ -29,10 +29,6 @@
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No items found.</em>
-        {{#if canAdd}}
-            <em>Create a new record?</em>
-            <button class="btn btn-primary" {{action 'newItem'}}>New Imaging</button>
-        {{/if}}
+        <p>No items found. {{#if canAdd}} <a href="#" {{action 'newItem'}}>Create a new record?</a>{{/if}}</p>
     </div>
 {{/if}}

app/index.html

@@ -15,36 +15,18 @@
     {{content-for 'head-footer'}}
   </head>
   <body>
-    <div class="jumbotron" id="apploading">
-        <div class="alert alert-warning" role="alert">
-            <h1><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>HospitalRun is Initializing... </h1>
-            <p>Did You Know: <span id="apploadingmsg"></span></p>
+    <div class="loading-notice apploading" id="apploading" role="alert">
+        <div class="wrapper">
+            <div class="spinner">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <div class="rect4"></div>
+                <div class="rect5"></div>
+            </div>
+            <p class="loading-text">Loading</p>
         </div>
     </div>
-    <script>
-        var messages = [
-            'The Brimstone butterfly (Gonepteryx rhamni) has the longest lifetime of the adult butterflies: 9-10 months.',
-            'Apples are more efficient than caffeine in keeping people awake in the mornings.',
-            'The human heart creates enough pressure when it pumps out to the body to squirt blood 30 feet.',
-            'Starfish have no brains.',
-            'A dinomaniac is someone with the compulsive urge to dance.',
-            'There is no leading cause of death for people who live past the age of 100.',
-            'Nepal is the only country that doesn’t have a rectangular flag.',
-            'The international telephone dialing code for Antarctica is 672.',
-            'Camels chew in a figure 8 pattern.',
-            'A shark is the only fish that can blink with both eyes.'
-        ]
-        function randomMsg() {
-            var apploading = document.getElementById('apploading');
-            if (apploading) {
-                var idx = Math.floor(Math.random()*10),
-                    message = document.getElementById('apploadingmsg');
-                message.innerHTML = messages[idx];
-                setTimeout(randomMsg, 300);
-            }
-        }
-        randomMsg();
-    </script>
     <script>
         window.addEventListener('load',function(e){window.applicationCache.addEventListener('updateready', function(e){if (window.applicationCache.status==window.applicationCache.UPDATEREADY){window.applicationCache.swapCache();window.location.reload();}},false);},false);
     </script>

app/inventory/index/template.hbs

@@ -27,10 +27,6 @@
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No requests found.</em> 
-        {{#if canAdd}}
-            <em>Create a new request?</em> 
-            <button class="btn btn-primary" {{action 'newRequest'}}>New Request</button>
-        {{/if}}
+        <p>No requests found. {{#if canAdd}}<a href="#" {{action 'newRequest'}}>Create a new request?</a>{{/if}}</p>
     </div>
 {{/if}}

app/inventory/listing/template.hbs

@@ -38,10 +38,6 @@
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No items found.</em>  
-        {{#if canAddItem}}
-            <em>Create a new record?</em>
-            <button class="btn btn-primary" {{action 'newItem'}}>New Item</button>
-        {{/if}}
+        <p>No items found. {{#if canAddItem}} <a href="#" {{action 'newItem'}}>Create a new record?</a>{{/if}}</p>
     </div>
 {{/if}}

app/invoices/index/template.hbs

@@ -6,7 +6,7 @@
             <th>Status</th>
             <th>Patient</th>
             <th>Total</th>
-            <th>Balance Due</th>            
+            <th>Balance Due</th>
             {{#if showActions}}
                 <th>Actions</th>
             {{/if}}
@@ -20,7 +20,7 @@
                 <td>{{total}}</td>
                 <td>{{remainingBalance}}</td>
                 <td>
-                    {{#if showActions}} 
+                    {{#if showActions}}
                         {{#if parentController.canAddPayment}}
                             <button class="btn btn-default neutral" {{action 'showAddPayment' this  bubbles=false }}>
                                 <span class="octicon octicon-plus"></span> Add Payment
@@ -34,11 +34,11 @@
                         {{/if}}
                     {{/if}}
                 </td>
-            </tr>            
+            </tr>
         {{/each}}
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No invoices found.  Create an invoice?</em> <button class="btn btn-primary" {{action 'newItem'}}>New Invoice</button>
+        <p>No invoices found. <a href="#" {{action 'newItem'}}>Create an invoice?</a></p>
     </div>
 {{/if}}

app/labs/completed/template.hbs

@@ -6,7 +6,7 @@
             <th>Patient</th>
             <th>Lab Type</th>
             <th>Results</th>
-            <th>Notes</th>            
+            <th>Notes</th>
         </tr>
             {{#each}}
                 <tr>
@@ -17,10 +17,10 @@
                     <td>{{result}}</td>
                     <td>{{notes}}</td>
                 </tr>
-            {{/each}}        
+            {{/each}}
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No completed items found.</em>
+        <p>No completed items found.</p>
     </div>
 {{/if}}

app/labs/index/template.hbs

@@ -29,10 +29,6 @@
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No labs found.</em>
-        {{#if canAdd}}
-            <em>Create a new record?</em>
-            <button class="btn btn-primary" {{action 'newItem'}}>New Lab</button>
-        {{/if}}
+        <p>No labs found. {{#if canAdd}}<a href="#" {{action 'newItem'}}>Create a new record?</a>{{/if}}</p>
     </div>
 {{/if}}

app/medication/index/template.hbs

@@ -4,7 +4,7 @@
             <th>Date</th>
             <th>Patient</th>
             <th>Medication</th>
-            <th>Quantity</th>        
+            <th>Quantity</th>
             <th>Status</th>
             {{#if showActions}}
                 <th>Actions</th>
@@ -29,10 +29,6 @@
     </table>
 {{else}}
     <div class="alert alert-info">
-        <em>No items found.</em> 
-        {{#if canAdd}}
-            <em>Create a new medication request?</em> 
-            <button class="btn btn-primary" {{action 'newItem'}}>New Medication Request</button>
-        {{/if}}
+        <p>No items found. {{#if canAdd}}<a href="#" {{action 'newItem'}}>Create a new medication request?</a>{{/if}}</p>
     </div>
 {{/if}}