From 8f69be3b6654b5152b8e1fd27db0d2a77d82d765 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sun, 8 Apr 2018 19:28:19 +0200
Subject: [PATCH] read initial values from URI and provide permanent link

---
 .../main/resources/resources/css/design.css   |  4 +
 pdb-ui/src/main/resources/resources/js/ui.js  | 82 ++++++++++++++++---
 2 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css
index 959fed9..8ac1cf5 100644
--- a/pdb-ui/src/main/resources/resources/css/design.css
+++ b/pdb-ui/src/main/resources/resources/css/design.css
@@ -19,6 +19,10 @@ textarea {
 	font-size:1.2em;
 }
 
+.permalink, .permalink:hover, .permalink:active, .permalink:visited {
+	color: black;
+}
+
 
 @font-face {
   font-family: 'FontAwesome';
diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index fe338e7..3aebc65 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -443,6 +443,30 @@ Vue.component('search-bar', {
 		getJson(url, request, successCallback, error);
 	},
   },
+  computed: {
+  	permalink: function() {
+  	
+  		var groupBy = [];
+  		data.searchBar.groupByKeys.forEach(function(e){ if (e.selected) {groupBy.push(e.selected);}});
+  	
+  		var params = {
+  			'query': data.searchBar.query,
+  			'groupBy': groupBy,
+	    	'splitByKeys.selected': data.searchBar.splitByKeys.selected,
+	    	'limitBy.selected': data.searchBar.limitBy.selected,
+	    	'limitBy.number': data.searchBar.limitBy.number,
+	    	'dateFrom': data.searchBar.dateFrom,
+	    	'dateRange': data.searchBar.dateRange,
+	    	'axisScale': data.searchBar.axisScale,
+	    	'plotType': data.searchBar.plotType,
+	    	'showAggregate': data.searchBar.showAggregate,
+	    	'keyOutside': data.searchBar.keyOutside,
+  		};
+  	
+  		var link = window.location.origin+ window.location.pathname + "?" + jQuery.param( params ); 
+  		return link;
+  	}
+  },
   template: `
   	<form id="search-bar" v-on:submit.prevent.stop>
   		<search-bar-query v-bind="{ 'searchBar': searchBar }"></search-bar-query>
@@ -554,6 +578,7 @@ Vue.component('search-bar', {
 					v-on:click.prevent.stop="dashboard"
 				><i class="fa fa-object-group" aria-hidden="true"></i> Dashboard</button>
 				-->
+				<a v-bind:href="permalink" title="Permanent Link" class="permalink"><i class="fa fa-link" aria-hidden="true"></i></a>
 			</div>
 		</div>
   	</form>`
@@ -572,10 +597,12 @@ var rootView = new Vue({
 		
 		response.forEach( (item, index) => { options.push({text: item, value: item}); } );
 	
+		const groupByDefaults = GetURLParameterArray('groupBy');
+	
 		for (var i = 0; i < 3; i++){
 			self.searchBar.groupByKeys.push({
 				'id': i,
-				'selected': '',
+				'selected': groupByDefaults[i] ? groupByDefaults[i] : '',
 				'options': options
 			});
 		}
@@ -596,23 +623,23 @@ initInvaders('result-image');
 var data = {
 
 	searchBar: {
-		query: 'pod=vapfinra01 and method = ViewService.findFieldViewGroup',
+		query: GetURLParameter('query', 'pod=vapfinra01 and method = ViewService.findFieldViewGroup'),
 		proposals: [],
 	    groupByKeys: [],
 	    splitByKeys: {
-	    	'selected': 'method',
+	    	'selected': GetURLParameter('splitByKeys.selected','method'),
 	    	'options': []
 	    },
 	    limitBy: {
-	    	'selected': 'NO_LIMIT',
-	    	'number': 10
+	    	'selected': GetURLParameter('limitBy.selected','NO_LIMIT'),
+	    	'number': GetURLParameter('limitBy.number',10)
 	    },
-	    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',
-	    showAggregate: 'NONE',
-	    keyOutside: false,
+	    dateFrom: GetURLParameter('dateFrom', Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm:ss")), // '2018-01-05 09:03:00'
+	    dateRange: GetURLParameter('dateRange','1 week'),
+	    axisScale: GetURLParameter('axisScale','LOG10'),
+	    plotType: GetURLParameter('plotType','SCATTER'),
+	    showAggregate: GetURLParameter('showAggregate','NONE'),
+	    keyOutside: GetURLParameterBoolean('keyOutside', 'false'),
 	    
 	    splitBy: {
 			field: '',
@@ -742,5 +769,38 @@ function getJson(url, requestData, successCallback, errorCallback) {
 		.fail(errorCallback);
 }
 
+function GetURLParameter(paramName, defaultValue)
+{
+    var pageURL = window.location.search.substring(1);
+    var URLVariables = pageURL.split('&');
+    for (var i = 0; i < URLVariables.length; i++)
+    {
+        var keyValue = URLVariables[i].split('=');
+        if (keyValue[0] == paramName)
+        {
+            return decodeURIComponent(keyValue[1]);
+        }
+    }
+    return defaultValue;
+}
 
+function GetURLParameterArray(paramName)
+{
+	var result = [];
+	var pageURL = window.location.search.substring(1);
+    var URLVariables = pageURL.split('&');
+    for (var i = 0; i < URLVariables.length; i++)
+    {
+        var keyValue = URLVariables[i].split('=');
+        if (decodeURIComponent(keyValue[0]) == paramName+"[]")
+        {
+            result.push(decodeURIComponent(keyValue[1]));
+        }
+    }
+    return result;
+}
+
+function GetURLParameterBoolean(paramName, defaultValue){
+	return GetURLParameter(paramName, defaultValue) == 'true';
+}