OHIFVIEWER-27 Popup is shown/hidden to set the timepoint as Baseline when the user clicks timepoint header cell in lesion table

LesionTracker/client/components/viewer.html

@@ -2,6 +2,8 @@
     <div id="viewer">
         {{>lesionLocationDialog}}
         {{>nonTargetLesionDialog}}
+        {{>timepointTextDialog}}
+
         {{>hidingPanel}}
         <div id="viewportAndLesionTable">
             {{>viewerMain }}

Packages/lesiontracker/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html

@@ -1,3 +1,9 @@
 <template name="lesionTableTimepointHeader">
-    <th class="lesionTableTimepointCell">{{formatDA timepointName "MM/DD/YYYY"}} {{ #if timepointLoaded }}<span class="timepointIndicator">&lt;</span> {{ /if }} </th>
+    <th class="lesionTableTimepointCell">
+        {{formatDA timepointName "MM/DD/YYYY"}}
+        {{#if timepointTextFound}}
+            {{timepointText}}
+        {{/if}}
+        {{#if timepointLoaded }}<span class="timepointIndicator">&lt;</span> {{/if}}
+    </th>
 </template>

Packages/lesiontracker/components/lesionTableTimepointHeader/lesionTableTimepointHeader.js

@@ -0,0 +1,104 @@
+Template.lesionTableTimepointHeader.events({
+    'click th': function(e, template){
+
+        var parentPosition = getPosition(e.currentTarget);
+        var cellText = e.currentTarget.innerText;
+        // Remove spaces in string
+        cellText = cellText.replace(/\s/g, ''); // Remove spaces
+        cellText = cellText.replace('<', ''); // Remove <
+        var splitCellText = cellText.split('/');
+        var dateStr = splitCellText[2].replace(/\D/g,'') + "" + splitCellText[0].replace(/\D/g,'') + ""+splitCellText[1].replace(/\D/g,''); // Remove non-digit chars
+
+        // Check patient has a timepointText as Baseline
+        var patientId = template.data.patientId;
+
+        // Open popup
+        var timepointTextDialog = $("#timepointTextDialog");
+        var dialogDisplay = timepointTextDialog.css("display");
+        if(dialogDisplay === "none") {
+
+            var isBaselineInCollection = Timepoints.findOne({patientId: patientId, timepointName: dateStr, timepointText: "Baseline"});
+
+            // If isBaselineInCollection is true, "Baseline" is found in collection for patient and set checkbox as checked
+            if (isBaselineInCollection) {
+                // Set checkbox as checked
+                $('#checkBoxBaseline').prop('checked', true);
+            } else {
+                // Set checkbox as unchecked
+                $('#checkBoxBaseline').prop('checked', false);
+            }
+
+            // Open dialog
+            var dialogProperty =  {
+                top: parentPosition.y - 30,
+                left: parentPosition.x,
+                display: 'block'
+            };
+            timepointTextDialog.css(dialogProperty);
+
+        } else if(dialogDisplay === "block") {
+
+            // Get timepoints of patient
+            // Set timepointText as Baseline for selected timepoint
+            var timepoints = Timepoints.find({patientId: patientId}).fetch();
+
+            // Check checkbox is selected
+            var checkboxBaselineChecked = $("#checkBoxBaseline").is(":checked");
+
+            timepoints.forEach(function(timepoint) {
+                // timepointText defines a custom text for timepoint such as Baseline, Nadir, Current
+                if (timepoint.timepointName === dateStr) {
+                    // If checkbox is selected, set timepointText as Baseline
+                    // Else set timepointText as ""
+                    var timepointText = "Baseline";
+                    if(!checkboxBaselineChecked) {
+                        timepointText = "";
+                    }
+
+                    Timepoints.update(timepoint._id,{
+                        $set: {
+                            timepointText: timepointText
+                        }
+                    });
+                } else{
+                    // Set timepointText as empty
+                    Timepoints.update(timepoint._id,{
+                        $set: {
+                            timepointText: ""
+                        }
+                    });
+                }
+            });
+
+
+            // Close dialog
+            timepointTextDialog.css("display", "none");
+
+        }
+    }
+});
+
+Template.lesionTableTimepointHeader.helpers({
+    'timepointTextFound': function(){
+        var timepointText = this.timepointText;
+        if(timepointText && timepointText === 'Baseline') {
+            return true;
+        }
+
+        return false;
+    }
+});
+
+
+// Gets parent's position of element which mouse pointer is clicked in
+function getPosition(element) {
+    var xPosition = 0;
+    var yPosition = 0;
+
+    while (element) {
+        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+        element = element.offsetParent;
+    }
+    return { x: xPosition, y: yPosition };
+}

Packages/lesiontracker/components/timepointTextDialog/timepointTextDialog.html

@@ -0,0 +1,11 @@
+<template name="timepointTextDialog">
+    <div id="timepointTextDialog">
+        <div class="timepointDialogContentWrapper">
+            <div class="dialogContent">
+                <div class="timepointContent">
+                    <input type="checkbox" id="checkBoxBaseline" value="ok"><strong >Baseline</strong>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/components/timepointTextDialog/timepointTextDialog.styl

@@ -0,0 +1,27 @@
+
+#timepointTextDialog
+  display: none
+  position: absolute
+  z-index: 99
+
+  .timepointDialogContentWrapper
+    position: absolute
+    width: 100px
+    height: 30px
+    padding: 5px
+    background-color: rgba(255,255,255,1)
+    border-top-left-radius: 5px
+    border-top-right-radius: 5px
+    text-align: left
+
+    .dialogContent
+      margin: 0 auto
+      float: none
+      padding: 0
+
+    .timepointContent
+      font-size: 16px
+
+    #checkBoxBaseline
+      height: 16px
+      width: 16px