From 59fb35d7d8577264c1a129ad3a2703d373d68741 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sun, 8 Apr 2018 17:13:01 +0200
Subject: [PATCH] show waiting game

---
 pdb-ui/src/main/resources/resources/js/ui.js | 49 +++++++++-----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index df2e448..fe338e7 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -31,20 +31,6 @@ Vue.component('search-bar-query', {
 				data.searchBar.proposals = [];
 			}
 		});
-		
-		document.onkeydown = function(evt) {
-			evt = evt || window.event;
-			var isEscape = false;
-			if ("key" in evt) {
-				isEscape = (evt.key == "Escape" || evt.key == "Esc");
-			} else {
-				isEscape = (evt.keyCode == 27);
-			}
-			if (isEscape) {
-				data.searchBar.proposals = [];
-			}
-		};
-		
 	},
 	data: function() {
 		return {
@@ -56,7 +42,6 @@ Vue.component('search-bar-query', {
 			if (event.key == 'ArrowDown' || event.key == 'ArrowUp' || event.key == 'Enter' || event.key == 'Escape'){
 				return;
 			}
-			console.log(event);
 			
 			this.autocomplete(this, event);
 		},
@@ -111,8 +96,6 @@ Vue.component('search-bar-query', {
 				data.searchBar.query = proposal.newQuery;
 				data.searchBar.proposals = [];
 				
-				console.log(proposal.newCaretPosition);
-				
 				Vue.nextTick(function () {
 					var el = document.getElementById('search-input');
 					el.select();
@@ -143,7 +126,7 @@ Vue.component('search-bar-query', {
 				@keyup="onChange"
 				@keyup.down.up="selectUpDown"
 				@keydown.enter="selectOrSubmit"
-				@keyup.esc="showProposals = false"
+				@keyup.esc="searchBar.proposals = []"
 				@keyup.enter="noop"
 				@keydown.prevent.arrowUp.arrowDown="noop"
 				@focus="onChange"
@@ -215,10 +198,15 @@ Vue.component('result-view', {
 			}
 		}
 	},
+	computed: {
+		showPrevNext: function() {
+			return data.searchBar.splitBy.values.length > 0 && data.resultView.imageUrl;
+		}
+	},
 	template: `
 	<div id="result">
-		<div id="prev_image" v-show="searchBar.splitBy.field" v-on:click="prev_image" title="Previous Plot"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
-		<div id="next_image" v-show="searchBar.splitBy.field" v-on:click="next_image" title="Next Plot"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
+		<div id="prev_image" v-show="showPrevNext" v-on:click="prev_image" title="Previous Plot"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
+		<div id="next_image" v-show="showPrevNext" v-on:click="next_image" title="Next Plot"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
 		<div id="result-image"><img v-bind:src="resultView.imageUrl" v-if="resultView.imageUrl"/></div>
 		<div id="result-error-message" v-if="resultView.errorMessage">{{ resultView.errorMessage }}</div>
 	</div>`
@@ -601,12 +589,14 @@ var rootView = new Vue({
   }
 });
 
-}
+initInvaders('result-image');
+
+} // end window.on-load
 
 var data = {
 
 	searchBar: {
-		query: 'pod=vapf and method = ViewService.findFieldViewGroup',
+		query: 'pod=vapfinra01 and method = ViewService.findFieldViewGroup',
 		proposals: [],
 	    groupByKeys: [],
 	    splitByKeys: {
@@ -617,7 +607,7 @@ var data = {
 	    	'selected': 'NO_LIMIT',
 	    	'number': 10
 	    },
-	    dateFrom: '2018-01-05 09:03:00', //Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm:ss"),
+	    dateFrom: Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm:ss"), // '2018-01-05 09:03:00'
 	    dateRange: '1 week',
 	    axisScale: 'LOG10',
 	    plotType: 'SCATTER',
@@ -643,10 +633,17 @@ var data = {
 };
 
 
+function showLoadingIcon()
+{
+	data.resultView.imageUrl = '';
+	data.resultView.errorMessage = '';
+
+	startInvaders();
+}
 
 function plotCurrent()
 {
-	//showLoadingIcon();
+	showLoadingIcon();
 	
 	if (data.searchBar.splitBy['field']) {
 		var query = createQuery();
@@ -700,6 +697,7 @@ function sendPlotRequest(query){
 	var success = function(response){
 		data.resultView.imageUrl = response.imageUrl;
 		data.resultView.errorMessage = '';
+		pauseInvaders();
 	};
 	var error = function(e) {
 		data.resultView.imageUrl = '';
@@ -712,10 +710,10 @@ function sendPlotRequest(query){
 		else{
 			data.resultView.errorMessage = "FAILED: " + JSON.parse(e.responseText).message;
 		}
+		pauseInvaders();
 	};
 	
 	postJson("plots", request, success, error);
-	
 }
 
 
@@ -729,7 +727,6 @@ function postJson(url, requestData, successCallback, errorCallback) {
 		})
 		.done(successCallback)
 		.fail(errorCallback)
-		//.always(pauseInvaders)
 		;
 }