LT-162: Add server information modal in user account menu

LesionTracker/client/routes.js

@@ -24,7 +24,8 @@ Router.onBeforeAction('loading');
 var data = {
     additionalTemplates: [
         'associationModal',
-        'optionsModal'
+        'optionsModal',
+        'serverInformationModal'
     ]
 };
 

LesionTracker/defaultSettings.js

@@ -9,6 +9,9 @@ Meteor.startup(function() {
         dicomWeb: {
             endpoints: [{
                 name: 'Orthanc',
+                host: 'localhost',
+                port: '8042',
+                aeTitle: 'Orthanc',
                 wadoUriRootNOTE: 'either this uri is not correct for wado-uri or wado-uri is not configured on orthanc currently',
                 wadoUriRoot: 'http://localhost:8043/wado',
                 qidoRoot: 'http://localhost:8042/dicom-web',

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html

@@ -1,44 +1,6 @@
 <template name="lesionTrackerLayout">
     <div class="logoContainer">
-        <div id="menu" class="row-fluid">
+        {{>userAccountMenu}}
-            {{#if currentUser}}
-            <button type='button' class="btn btn-link dropdown-toggle" data-toggle="dropdown" id="userMenu">
-                {{fullName}} <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
-                {{#if showWorklistMenu}}
-                    <li>
-                        <a href="worklist" id="worklist">
-                            <i class="fa fa-list-ul"></i> Worklist
-                        </a>
-                    </li>
-
-                {{else}}
-                    <li>
-                        <!-- TODO: Move this elsewhere in the Worklist? -->
-                        {{>optionsButton }}
-                    </li>
-                    <li>
-                        <a href="audit" id="audit">
-                            <i class="fa fa-list-ul"></i> View Audit Log
-                        </a>
-                    </li>
-                {{/if}}
-
-                <li>
-                    <a href="changePassword" id="changePassword">
-                        <i class="fa fa-lock"></i> Change Password
-                    </a>
-                </li>
-                <li class="divider"></li>
-                <li>
-                    <a href="#" id="logoutButton">
-                        <i class="fa fa-power-off"></i>Logout
-                    </a>
-                </li>
-            </ul>
-            {{/if}}
-        </div>
         <a class="navbar-brand" href="http://ohif.org">
             <img src="/images/logo.png">
             <h4 class="name">Open Health Imaging Foundation</h4>

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js

@@ -1,19 +1,5 @@
 Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
 
-Template.lesionTrackerLayout.events({
-    'click #logoutButton': function() {
-        Meteor.logout(function() {
-            Router.go('/entrySignIn');
-        });
-    },
-    'click #worklist': function(e, template) {
-        template.showWorklistMenu.set(false);
-    },
-    'click #audit': function(e, template) {
-        template.showWorklistMenu.set(true);
-    }
-});
-
 Template.lesionTrackerLayout.helpers({
     fullName: function() {
         return Meteor.user().profile.fullName;
@@ -44,7 +30,12 @@ Template.lesionTrackerLayout.helpers({
 
 Template.lesionTrackerLayout.onCreated(function() {
     // showViewer to go to viewer from audit
-    this.showWorklistMenu = new ReactiveVar(false);
+    this.showWorklistMenu = new ReactiveVar(true);
+    // Get url and check worklist
+    var currentPath = Router.current().route.path(this);
+    if (currentPath === '/' || currentPath === '/worklist') {
+        this.showWorklistMenu.set(false);
+    }
 
     // Show countdown dialog
     var handle;

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl

@@ -8,31 +8,6 @@
   @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
     width: 15%
 
-  #menu
-    position: relative
-    float: right
-    height: 100%
-    line-height: 40px
-
-    .dropdown-menu > li > a:hover
-      background-color: #eee
-
-    .dropdown-menu > li > a >i
-      margin-right: 5px
-
-    .dropdown-toggle
-      color: white
-      height: 100%
-      font-size: 12pt
-      font-family: "Sanchez"
-
-    .divider
-      height: 2px
-      margin: 9px 2px
-      overflow: hidden
-      background-color: #e5e5e5
-      border-bottom: 1px solid #fff
-
   .navbar-brand
     display: inline-block
     padding: 0

Packages/lesiontracker/client/components/serverInformationModal/serverInformationModal.html

@@ -0,0 +1,49 @@
+<template name="serverInformationModal">
+    <div class="modal" id="serverInformationModal" tabindex="-1" role="dialog" aria-labelledby="serverInformationModalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="serverInformationModalLabel">Server Information</h4>
+                </div>
+                <div class="modal-body">
+                    {{#each serverInformation}}
+                        <table id="tblServer" class="table table-bordered table-hovered">
+                            <tbody>
+                                <tr>
+                                    <th>
+                                        Host
+                                    </th>
+                                    <td>
+                                        {{host}}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        Port
+                                    </th>
+                                    <td>
+                                        {{port}}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        AE Title
+                                    </th>
+                                    <td>
+                                        {{aeTitle}}
+                                    </td>
+                                </tr>
+                            </tbody>
+
+                        </table>
+                    {{/each}}
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/serverInformationModal/serverInformationModal.js

@@ -0,0 +1,10 @@
+Template.serverInformationModal.helpers({
+    serverInformation: function() {
+        var defaultServiceType = Meteor.settings && Meteor.settings.defaultServiceType || 'dicomWeb';
+        var serviceInfo = Meteor.settings[defaultServiceType];
+        if (defaultServiceType === 'dicomWeb') {
+            serviceInfo = serviceInfo["endpoints"];
+        }
+        return serviceInfo;
+    }
+});

Packages/lesiontracker/client/components/serverInformationModal/serverInformationModal.styl

@@ -0,0 +1,13 @@
+#serverInformationModal
+  width: 350px
+  margin: 0 auto
+
+  .modal-dialog
+    width: 100%
+    #tblServer
+      tbody
+        tr
+          th
+            width: 30%
+          td
+            width: 70%

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html

@@ -0,0 +1,33 @@
+<template name="userAccountMenu">
+    {{#if currentUser}}
+        <div id="userAccountMenu" class="row-fluid">
+            <div class="list-group panel">
+                <a href="#userMenu" class="list-group-item" id="userName" data-toggle="collapse" data-parent="#userAccountMenu">{{fullName}} <span class="caret"></span></a>
+                <div class="collapse pos-absolute" id="userMenu">
+                    {{#if showWorklistMenu}}
+                        <a href="worklist" id="worklist" data-toggle="collapse" data-target="#userMenu" class="list-group-item sub-item">
+                            <i class="fa fa-list-ul"></i> Worklist
+                        </a>
+                    {{else}}
+                        <!--TODO: Move this elsewhere in the Worklist? -->
+                        <span data-toggle="collapse" data-target="#userMenu" class="list-group-item sub-item externalItem">{{>optionsButton }}</span>
+                        <a href="audit" id="audit" data-toggle="collapse" data-target="#userMenu" class="list-group-item sub-item">
+                            <i class="fa fa-list-ul"></i> View Audit Log
+                        </a>
+                    {{/if}}
+                    <a href="#itemSettings" class="list-group-item sub-item" data-toggle="collapse" data-parent="#itemSettings"><i class="fa fa-cog fa-lg"></i> Settings <span class="caret"></span></a>
+                    <div class="collapse list-group-submenu" id="itemSettings">
+                        <a href="#" id="serverInformation" class="list-group-item sub-sub-item" data-parent="#itemSettings" data-toggle="collapse" data-target="#userMenu"><i class="fa fa-server fa-lg"></i> Server Information</a>
+                    </div>
+                    <a href="#itemProfile" class="list-group-item sub-item" data-toggle="collapse" data-parent="#itemProfile" ><i class="fa fa-user fa-lg"></i> Profile <span class="caret"></span></a>
+                    <div class="collapse list-group-submenu" id="itemProfile">
+                        <a href="changePassword" id="changePassword" class="list-group-item sub-sub-item" data-parent="#itemProfile" data-toggle="collapse" data-target="#userMenu"><i class="fa fa-lock"></i> Change Password</a>
+                    </div>
+                    <a href="#" id="logoutButton" data-toggle="collapse" data-target="#userMenu" class="list-group-item sub-item">
+                        <i class="fa fa-power-off"></i> Logout
+                    </a>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+</template>

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js

@@ -0,0 +1,54 @@
+Template.userAccountMenu.helpers({
+    fullName: function() {
+        return Meteor.user().profile.fullName;
+    },
+
+    showWorklistMenu: function() {
+        return  Template.instance().showWorklistMenu.get();
+    },
+
+    currentUser: function() {
+        var verifyEmail = Meteor.settings && Meteor.settings.public && Meteor.settings.public.verifyEmail || false;
+
+        if (!Meteor.user() || !Meteor.userId()) {
+            return false;
+        }
+
+        if (!verifyEmail) {
+            return true;
+        }
+
+        if (Meteor.user().emails[0].verified) {
+            return true;
+        }
+
+        return false;
+    }
+});
+
+Template.userAccountMenu.onCreated(function() {
+    // showViewer to go to viewer from audit
+    this.showWorklistMenu = new ReactiveVar(true);
+    // Get url and check worklist
+    var currentPath = Router.current().route.path(this);
+    if (currentPath === '/' || currentPath === '/worklist') {
+        this.showWorklistMenu.set(false);
+    }
+});
+
+Template.userAccountMenu.events({
+    'click #serverInformation': function() {
+        $('#serverInformationModal').modal('show');
+    },
+    'click #logoutButton': function() {
+        Meteor.logout(function() {
+            Router.go('/entrySignIn');
+        });
+    },
+    'click #worklist': function(e, template) {
+        template.showWorklistMenu.set(false);
+    },
+    'click #audit': function(e, template) {
+        template.showWorklistMenu.set(true);
+    }
+});

Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl

@@ -0,0 +1,34 @@
+#userAccountMenu
+  position: relative
+  float: right
+  height: 100%
+  line-height: 40px
+  z-index: 999
+
+  .list-group
+    background-color: transparent
+    color: white
+    line-height: 35px
+    margin-left: 10px
+    .list-group-item
+      padding: 5px 10px
+      width: 200px
+    a#userName
+      padding: 0
+      background-color: transparent
+      color: white
+      border: solid 1px transparent
+      text-align: right
+      display: inline-block
+      width: auto
+    #userMenu
+      position: absolute
+      right: 0
+      .externalItem
+        a
+          color: #555
+
+    .list-group-submenu
+      .sub-sub-item
+        padding-left: 20px
+        padding-right: 20px

Packages/lesiontracker/package.js

@@ -145,6 +145,14 @@ Package.onUse(function(api) {
     api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl', 'client');
     api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.js', 'client');
 
+    api.addFiles('client/components/serverInformationModal/serverInformationModal.html', 'client');
+    api.addFiles('client/components/serverInformationModal/serverInformationModal.styl', 'client');
+    api.addFiles('client/components/serverInformationModal/serverInformationModal.js', 'client');
+
+    api.addFiles('client/components/userAccountMenu/userAccountMenu.html', 'client');
+    api.addFiles('client/components/userAccountMenu/userAccountMenu.styl', 'client');
+    api.addFiles('client/components/userAccountMenu/userAccountMenu.js', 'client');
+
     // Server functions
     api.addFiles('server/collections.js', 'server');
     api.addFiles('server/removeCollections.js', [ 'server' ]);