this closes #40 and closes #36

Geocene · Mar 13, 2019 · 7cc72ea · 7cc72ea
1 parent fa3d6d0
commit 7cc72ea
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 44 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -17,7 +17,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 62px;
 }
 .navbar { background:#7E4C64; }
 .nav-link , .navbar-brand { color: #f4f4f4; cursor: pointer; }

diff --git a/src/components/Index.vue b/src/components/Index.vue
@@ -81,7 +81,7 @@ export default {
             && fileText[i][1].match(/((\d{4})-(\d{2})-(\d{2})T(\d{2})\:(\d{2})\:(\d{2})(.(\d{3}))?(([+-](\d{2})\:?(\d{2}))|Z))$/)
             && fileText[i][2].match(/-?\d+(.\d+)?$/)
             && fileText[i][3].match(/1|0$/)
-            && fileText[i][0] === filename) {
+            && fileText[i][0].match(filename)) {
             var date = strftime('%Y-%m-%d %H:%M:%S%z', new Date(fileText[i][1]));
             timestamps.push(date.toString());
             values.push(fileText[i][2]);

diff --git a/src/components/Labeler.vue b/src/components/Labeler.vue
@@ -18,6 +18,7 @@
         <div class="nav-link" id="export">Export</div>
       </ul>
     </nav>
+    <div id="hoverbox" class="card"><div class="card-subtitle">Time: {{ time }}</div><div class="card-subtitle">Value: {{ val }}</div></div>
     <div id="maindiv"></div>
     <div id="rangeContext"></div>
     <div id="error" style="display: none;">
@@ -40,6 +41,7 @@
       <button type="button" class="btn btn-light exportBtn" id="continue" @click="cancelUpload()">Continue</button>
       <button type="button" class="btn btn-light exportBtn" id="newUpload" @click="newUpload()">Upload</button>
     </div>
+    <button id="updateHover" style="display: none;" v-on:click="updateHoverbox"></button>
   </div>
 </template>
 
@@ -59,47 +61,58 @@ export default {
     headerStr: String,
 		isValid: Boolean
 	},
-  methods: {
-    goHome() {
-      this.$router.push({ name: 'home', params: {nextUp: false} });
-    },
-    newUpload() {
-      this.$router.push({ name: 'home', params: {nextUp: true} });
-    },
-    newHome() {
-      let routeData = this.$router.resolve({ name: 'home', params: {nextUp: false} });
-      window.open(routeData.href, '_blank');
-    },
-    cancel() {
-      $('#clearOk').hide();
-      $('.navbar').css("opacity", "1");
-      $('#maindiv').css("opacity", "1");
+	data: function() {
+		return {
+			val: 0,
+			time: 0
+		};
+	},
+    methods: {
+	    goHome() {
+	      this.$router.push({ name: 'home', params: {nextUp: false} });
+	    },
+	    newUpload() {
+	      this.$router.push({ name: 'home', params: {nextUp: true} });
+	    },
+	    newHome() {
+	      let routeData = this.$router.resolve({ name: 'home', params: {nextUp: false} });
+	      window.open(routeData.href, '_blank');
+	    },
+	    updateHoverbox() {
+	      this.time = window.time;
+	      this.val = window.val;
+	    },
+	    cancel() {
+	      $('#clearOk').hide();
+	      $('.navbar').css("opacity", "1");
+	      $('#maindiv').css("opacity", "1");
+	    },
+	    cancelUpload() {
+	      $('#exportComplete').hide();
+	      $('.navbar').css("opacity", "1");
+	      $('#maindiv').css("opacity", "1");
+	    }
     },
-    cancelUpload() {
-      $('#exportComplete').hide();
-      $('.navbar').css("opacity", "1");
-      $('#maindiv').css("opacity", "1");
-    }
-  },
 	mounted() {
-    if (this.isValid) {
-      window.headerStr = this.headerStr;
-      window.filename = this.filename;
-      window.PLOTDATA = this.csvData;
-      window.view_or_label = "label";
-      window.y_max = this.minMax[0];
-      window.y_min = this.minMax[1];
-      $('#maindiv').append('<div class="loader"></div>');
-      $('#maindiv').css("padding", "50px 75px");
-      labeller();
-      // this.newlabeller();
-
-    } else {
-      $('#clear').hide();
-      $('#export').hide();
-      $('.navbar').css("opacity", "0.5");
-      $('#error').show();
-    }
+	    if (this.isValid) {
+	      window.headerStr = this.headerStr;
+	      window.filename = this.filename;
+	      window.PLOTDATA = this.csvData;
+	      window.view_or_label = "label";
+	      window.y_max = this.minMax[0];
+	      window.y_min = this.minMax[1];
+	      $('#maindiv').append('<div class="loader"></div>');
+	      $('#maindiv').css("padding", "0px 75px");
+	      console.log(window.y_min, window.y_max);
+	      labeller();
+	      // this.newlabeller();
+
+	    } else {
+	      $('#clear').hide();
+	      $('#export').hide();
+	      $('.navbar').css("opacity", "0.5");
+	      $('#error').show();
+	    }
 	}
 }
 
@@ -381,9 +394,18 @@ function labeller () {
           //allow clicking on single points
           point.selected=1-point.selected;
           update_selection();
-        });
+        })
+    .on("mouseover", function(point) {
+    	  update_hoverbox(point.time, point.val);
+    	});
 
   }
+
+  function update_hoverbox(time, val) {
+  	window.time = time.toString().split('GMT')[0];
+  	window.val = val.toFixed(2);
+  	$('#updateHover').click();
+  }
   
   //initial plotting function
   function makeplot(data, context_data) {
@@ -640,6 +662,15 @@ svg {
 
 #maindiv {
 	text-align: left;
+	margin-top: 90px;
+}
+
+#hoverbox {
+	float: right;
+	text-align: left;
+	padding: 10px;
+	padding-bottom: 0px;
+	margin-right: 75px;
 }
 
 .mainChart {
@@ -706,8 +737,7 @@ svg {
 }
 
 #chartTitle {
-  color: #000000; 
-  font-weight: bold;
+  color: #000000;
 }
 
 #error {