Update to tabs. Styling needs work

LesionTracker/.meteor/packages

@@ -33,3 +33,4 @@ promise
 stylus
 fortawesome:fontawesome
 random
+reactive-var

LesionTracker/client/compatibility/tabHelper.js

@@ -1,15 +0,0 @@
-//Holds functions to help managing tabs
-
-//Returns activeTabId
-function activeTabId() {
-    var activeTab = Session.get("activeTabId");
-    return activeTab;
-}
-
-//Returns activeTabContentId
-function activeTabContentId () {
-    var activeTabId = activeTabId();
-    var splitTabId = activeTabId.split("tab");
-    var contentId = "content"+splitTabId[1];
-    return contentId;
-}

LesionTracker/client/components/layout/layout.html

@@ -0,0 +1,23 @@
+<template name="layoutLesionTracker">
+    <nav class="navbar navbar-default" role="navigation">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                  <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="/">Lesion Tracker</a>
+            </div>
+            <div id="navbar" class="navbar-collapse collapse">
+                <ul class="nav navbar-nav navbar-right">
+                    <li>
+                        <a href="www.tumormetrics.org">About</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    {{> yield}}
+</template>

LesionTracker/client/components/layout/layout.styl

@@ -0,0 +1,14 @@
+.navbar
+  margin-bottom: 0
+  border-radius: 0
+  color: #888888
+  background-color: #060606
+  border: none
+    
+.navbar-form
+  margin: 0
+  padding: 15px 3px
+
+@media (min-width: 768px)
+  .navbar
+    border-radius: 0px

LesionTracker/client/components/viewer.css

@@ -1,12 +1,7 @@
 .viewer {
     width: 100%;
-    height: calc(100% - 54px);
+    height: 100%;
     margin: 0;
     padding: 0;
     background-color: black;
-}
-
-.navbar {
-    margin-bottom: 0;
-    border-radius: 0;
 }

LesionTracker/client/components/viewer.html

@@ -1,10 +1,7 @@
 <template name="viewer">
-    <head>
-        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
-    </head>
     <div id="viewer" class="viewer">
-        {{ >hidingPanel }}
-        {{ >viewerMain }}
-        {{ >lesionMeasurementContainer }}
+        {{ >hidingPanel studies=studies activeViewport=activeViewport}}
+        {{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
+        {{ >lesionMeasurementContainer studies=studies activeViewport=activeViewport}}
     </div>
 </template>

LesionTracker/client/components/viewer.js

@@ -58,9 +58,11 @@ function resizeViewports() {
     }, 1);
 }
 
-Session.setDefault('ActiveViewport', 0);
-Session.setDefault('viewportRows', 1);
-Session.setDefault('viewportColumns', 2);
+Template.viewer.onCreated(function() {
+     this.data.activeViewport = new ReactiveVar(0);
+     this.data.viewportRows = new ReactiveVar(1);
+     this.data.viewportColumns = new ReactiveVar(2);
+});
 
 // Avoid doing DOM manipulation during the resize handler
 // because it is fired very often.
@@ -71,19 +73,4 @@ $(window).on('resize', function() {
     resizeTimer = setTimeout(function() {
         resizeViewports();
     }, 100);
-});
-
-Template.viewer.onRendered(function() {
-    var imageViewer = $("#viewer");
-    if (imageViewer) {
-        $('.navbar-default').css({
-            'background-color': '#000000',
-            'border-color': '#101010'
-        });
-        document.body.style.overflow = "hidden";
-        document.body.style.height = '100%';
-        document.body.style.width = '100%';
-        document.body.style.minWidth = 0;
-        document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
-    }
 });

LesionTracker/client/components/viewerMain/viewerMain.html

@@ -1,7 +1,7 @@
 <template name="viewerMain">
     <div class="viewerMain">
-        {{ >toolbar toolbarOptions }}
-        {{ >imageViewerViewports}}
-        {{ >lesionTableContainer}}
+        {{ >toolbar toolbarOptions  activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
+        {{ >imageViewerViewports studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
+        {{ >lesionTableContainer studies=studies activeViewport=activeViewport}}
     </div>
 </template>

LesionTracker/client/components/viewerMain/viewerMain.js

@@ -1,4 +1,7 @@
 Template.viewerMain.helpers({
+    studies : function() {
+        return this.studies;
+    },
     'toolbarOptions': function() {
         var toolbarOptions = {};
 

LesionTracker/client/route.js

@@ -1,33 +1,40 @@
 Router.configure({
-  layoutTemplate: 'lesionTrackerLayout',
-  //loadingTemplate: '',
-  notFoundTemplate: 'notFound'
+    layoutTemplate: 'layoutLesionTracker',
+    //loadingTemplate: '',
+    notFoundTemplate: 'notFound'
 });
 
 
 
 Router.route('/', function () {
-  this.render('worklist', {
-  });
+    this.render('worklist', {});
 });
 
-Router.route('/viewer/:_id', {
-  layoutTemplate: 'lesionTrackerLayout',
-  name: 'viewer',
-  onBeforeAction: function() {
-    var self = this;
-    //Session.set('openNewTabEvent', self);
-    
-    Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
-      //console.log(study);
-      sortStudy(study);
+tabs = new Meteor.Collection(null);
 
-      var studies = [study];
-      Session.set('studies', studies);
-      //Session.set(activeTabId, studies);
-      //Session.set('showContentInTab', true);
-      //self.render('viewer');
-      openNewTab(studies);
-    });
-  }
+Router.route('/viewer/:_id', {
+    layoutTemplate: 'layoutLesionTracker',
+    name: 'viewer',
+    onBeforeAction: function() {
+        var self = this;
+
+        Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
+            sortStudy(study);
+
+            var studies = [study];
+            var title = study.seriesList[0].instances[0].patientName;
+            var contentid = generateUUID();
+
+            var newTabObject = {
+                title: title,
+                contentid: contentid,
+            };
+            tabs.insert(newTabObject);
+
+            self.render('worklist');
+            console.log('Setting studesInTab');
+            Session.set('StudiesInTab#' + contentid, studies);
+            Session.set('OpenNewTabEvent', contentid);
+        });
+    }
 });