From b9cbcace91cbca701fea9ec9c68da7b78fa2baa6 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Tue, 1 May 2018 08:47:07 +0200
Subject: [PATCH] rename dashboard to gallery

The dashboard was never really a dashboard.
---
 .../main/resources/resources/css/design.css   |  20 +--
 pdb-ui/src/main/resources/resources/js/ui.js  | 163 +++++++++---------
 .../main/resources/templates/main.mustache    |   4 +-
 3 files changed, 98 insertions(+), 89 deletions(-)

diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css
index b55e2d2..2fdab3d 100644
--- a/pdb-ui/src/main/resources/resources/css/design.css
+++ b/pdb-ui/src/main/resources/resources/css/design.css
@@ -182,7 +182,7 @@ textarea {
 	top: 0;
 }
 
-.dashboard-item {
+.gallery-item {
 	width: 300px;
 	height: 200px;
 	margin: 10px;
@@ -192,18 +192,18 @@ textarea {
 	position: relative;
 }
 
-.dashboard-item img {
+.gallery-item img {
 	max-width: 300px;
 	max-height: 200px;
 	display:block; /* removes 3 pixels extra height around the image */
 }
 
-.dashboard-item .fieldValue{
+.gallery-item .fieldValue{
 	position: absolute;
 	bottom: 0;
 }
 
-#result-view-dashboard-image-viewer {
+#result-view-gallery-image-viewer {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -211,11 +211,11 @@ textarea {
 	z-index: 1;
 	overflow-y:hidden;
 }
-#result-view-dashboard-image-viewer img{
+#result-view-gallery-image-viewer img{
 	display:block; /* removes 3 pixels extra height around the image */
 }
 
-#result-view-dashboard-image-viewer-close {
+#result-view-gallery-image-viewer-close {
     position: absolute;
     top: 0;
     right: 0;
@@ -223,18 +223,18 @@ textarea {
     opacity: 0.3;
 }
 
-#result-view-dashboard-image-viewer-close:hover {
+#result-view-gallery-image-viewer-close:hover {
    opacity: 1.0;
 }
 
-#dashboardControls {
+#galleryControls {
 	margin-left: 1em;
 }
 
-#dashboardControls progress {
+#galleryControls progress {
   text-align: center;
 }
-#dashboardControls progress:after {
+#galleryControls progress:after {
   content: attr(percentage)'%';
 }
 
diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index 824480a..063aa7a 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -215,31 +215,31 @@ Vue.component('result-view', {
 	</div>`
 });
 
-Vue.component('result-view-dashboard', {
-	props: ['dashboard'],
+Vue.component('result-view-gallery', {
+	props: ['gallery'],
 	methods: {
 		closeImage: function() {
-			this.dashboard.image = "";
+			this.gallery.image = "";
 		}
 	},
 	template: `
-	<div id="result-view-dashboard"
-		v-if="dashboard.tiles">
-		<div v-show="!dashboard.image">
-			<result-view-dashboard-item
-				v-for="item in dashboard.tiles"
+	<div id="result-view-gallery"
+		v-if="gallery.tiles">
+		<div v-show="!gallery.image">
+			<result-view-gallery-item
+				v-for="item in gallery.tiles"
 				v-bind:key="item.fieldValue"
-				v-bind:dashboardItem="item"
-			></result-view-dashboard-item>
+				v-bind:galleryItem="item"
+			></result-view-gallery-item>
 		</div>
 		<div 
-			id="result-view-dashboard-image-viewer"
-			v-if="dashboard.image">
+			id="result-view-gallery-image-viewer"
+			v-if="gallery.image">
 			<img
-				v-bind:src="dashboard.image"
+				v-bind:src="gallery.image"
 			/>
 			<div 
-				id="result-view-dashboard-image-viewer-close" 
+				id="result-view-gallery-image-viewer-close" 
 				class="clickable"
 				@click="closeImage" 
 				title="Close"
@@ -249,60 +249,63 @@ Vue.component('result-view-dashboard', {
 	`
 });
 
-Vue.component('result-view-dashboard-item', {
-	props: ['dashboardItem'],
+Vue.component('result-view-gallery-item', {
+	props: ['galleryItem'],
 	methods: {
 		showImage: function(){
 			var vm = this;
-			data.dashboard.image = this.dashboardItem.imageUrl;
+			data.gallery.image = this.galleryItem.imageUrl;
 		}
 	},
 	template: `
-	<div class="dashboard-item">
-		<div class="error-message" v-if="dashboardItem.error">{{ dashboardItem.error }}</div>
+	<div class="gallery-item">
+		<div class="error-message" v-if="galleryItem.error">{{ galleryItem.error }}</div>
 		<a 
-			v-bind:href="dashboardItem.imageUrl"
+			v-bind:href="galleryItem.imageUrl"
 			v-on:click.prevent.stop
 		><img
-			v-if="dashboardItem.thumbnailUrl"
-			v-bind:src="dashboardItem.thumbnailUrl"
+			v-if="galleryItem.thumbnailUrl"
+			v-bind:src="galleryItem.thumbnailUrl"
 			class="clickable"
 			@click="showImage" 
 		/></a>
-		<div class="fieldValue">{{ dashboardItem.fieldValue }}</div>
+		<div class="fieldValue">{{ galleryItem.fieldValue }}</div>
 	</div>`
 });
 
-Vue.component('navigation-bar-dashboard', {
-	props: ['dashboard'],
+Vue.component('navigation-bar-gallery', {
+	props: ['gallery'],
 	methods: {
 		sort: function() {
 			sortTiles();
 		},
 		abort: function() {
-			data.dashboard.toBeRendered = [];
+			data.gallery.toBeRendered = [];
+			data.gallery.progress.show = false;
 		}
 	},
 	computed: {
 		navigationVisible: function() {
-			return data.mode == 'dashboard';
+			return data.mode == 'gallery';
 		},
 		showProgressBar: function(){
-			return data.dashboard.toBeRendered.length > 0;
+			// TODO remove?
+			// data.gallery.toBeRendered.length > 0 && 
+			return data.gallery.progress.show;
 		},
 		percentage: function() {
-			if (data.dashboard.progress.max > 100){
-				return Math.round(10000*data.dashboard.progress.value / data.dashboard.progress.max)/100.0;
+			if (data.gallery.progress.max > 100){
+				return Math.round(10000*data.gallery.progress.value / data.gallery.progress.max)/100.0;
 			}else{
-				return Math.round(100*data.dashboard.progress.value / data.dashboard.progress.max);
+				return Math.round(100*data.gallery.progress.value / data.gallery.progress.max);
 			}
 		}
 	},
 	template: `
-	<div id="navigation-bar-dashboard" v-if="navigationVisible">
+	<div id="navigation-bar-gallery" v-if="navigationVisible">
 		<div class="group">
-			<label for="dashboardSortBy">Sort by:</label>
-			<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
+			<label for="gallerySortBy">Sort by:</label>
+			<select id="gallerySortBy" name="gallerySortBy" v-model="gallery.sortBy" @change="sort">
 				<option value="DEFAULT"></option>
 				<option value="MAX_VALUE_DESC">max value desc</option>
 				<option value="MAX_VALUE_ASC">max value asc</option>
@@ -312,8 +315,8 @@ Vue.component('navigation-bar-dashboard', {
 		</div>
 		<!--
 		<div class="group">
-			<label for="dashboardFilter">Filter by:</label>
-			<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
+			<label for="galleryFilter">Filter by:</label>
+			<select id="galleryFilter" name="galleryFilter" v-model="gallery.filter">
 				<option value="NONE">none</option>
 				<option value="HIGHER_THAN">higher</option>
 				<option value="LOWER_THAN">lower</option>
@@ -327,10 +330,10 @@ Vue.component('navigation-bar-dashboard', {
 		</div>
 		-->
 		
-		<div id="dashboardControls" class="group" v-if="showProgressBar">
+		<div id="galleryControls" class="group" v-if="showProgressBar">
 			<progress 
-				v-bind:max="dashboard.progress.max" 
-				v-bind:value="dashboard.progress.value"
+				v-bind:max="gallery.progress.max" 
+				v-bind:value="gallery.progress.value"
 				v-bind:percentage="percentage"
 			></progress>
 			<i class="fa fa-times-circle icon-abort" title="abort" @click="abort"></i>
@@ -505,7 +508,7 @@ Vue.component('navigation-bar', {
 			return data.mode != 'plot';
 		},
 		navigationVisible: function() {
-			return data.mode != 'dashboard';
+			return data.mode != 'gallery';
 		}
 	},
 	template: `
@@ -551,9 +554,9 @@ Vue.component('search-bar', {
 			plotCurrent();
 		}
     },
-    createNewDashboard: function (event) {
-    	data.mode = 'dashboard';
-    	createDashboard(this);
+    createNewGallery: function (event) {
+    	data.mode = 'gallery';
+    	createGallery(this);
     },
     enableSplitBy: function(fieldValues) {
 		data.searchBar.splitBy['field'] = data.searchBar.splitByKeys.selected;
@@ -601,7 +604,7 @@ Vue.component('search-bar', {
 		var link = window.location.origin+ window.location.pathname + "?" + jQuery.param( params );
 		return link; 
   	},
-  	dashboardActive: function (){
+  	galleryActive: function (){
   		return data.searchBar.splitByKeys.selected != "";
   	}
   },
@@ -703,11 +706,11 @@ Vue.component('search-bar', {
 					v-on:click.prevent.stop="plot"
 				><i class="fa fa-area-chart" aria-hidden="true"></i> Plot</button>
 				<button 
-					id="dashboard-submit" 
-					title="Create Dashboard (only active if 'Split' is set)"
-					:disabled="!dashboardActive"
-					v-on:click.prevent.stop="createNewDashboard"
-				><i class="fa fa-object-group" aria-hidden="true"></i> Dashboard</button>
+					id="gallery-submit" 
+					title="Create Gallery (only active if 'Split' is set)"
+					:disabled="!galleryActive"
+					v-on:click.prevent.stop="createNewGallery"
+				><i class="fa fa-object-group" aria-hidden="true"></i> Gallery</button>
 				<a v-bind:href="permalink" v-show="permalink" title="Permanent link to the current settings." class="permalink"><i class="fa fa-sliders" aria-hidden="true"></i></a>
 				<a v-bind:href="searchBar.imagelink" v-show="searchBar.imagelink" title="Image Link" class="permalink"><i class="fa fa-image" aria-hidden="true"></i></a>
 				
@@ -754,7 +757,7 @@ initInvaders('result');
 
 var data = {
 
-	mode: '', // 'plot' or 'dashboard', depending on what is currently active. Initially empty. 
+	mode: '', // 'plot' or 'gallery', depending on what is currently active. Initially empty. 
 	searchBar: {
 		query: GetURLParameter('query', 'pod=vapfinra01 and method = ViewService.findFieldViewGroup'),
 		proposals: [],
@@ -786,7 +789,7 @@ var data = {
 		errorMessage: '',
 		loadingGameActive: false
 	},
-	dashboard: {
+	gallery: {
 		tiles: [],
 		toBeRendered: [],
 		image: "",
@@ -794,7 +797,8 @@ var data = {
 		filter: "NONE",
 		progress: {
 			max: 0,
-			value: 0
+			value: 0,
+			show: false
 		}
 	}
 };
@@ -802,7 +806,7 @@ var data = {
 
 function showLoadingIcon()
 {
-	hidePlotAndDashboard();
+	hidePlotAndGallery();
 	data.resultView.loadingGameActive = true;
 
 	startInvaders();
@@ -814,12 +818,12 @@ function hideLoadingIcon()
 	pauseInvaders();
 }
 
-function hidePlotAndDashboard()
+function hidePlotAndGallery()
 {
 	data.resultView.imageUrl = '';
 	data.resultView.errorMessage = '';
-	data.dashboard.tiles = [];
-	data.dashboard.image = "";
+	data.gallery.tiles = [];
+	data.gallery.image = "";
 }
 
 function plotCurrent()
@@ -931,34 +935,37 @@ function updateImageLink(query) {
 	data.searchBar.imagelink = window.location.origin+ window.location.pathname + "plots?" + jQuery.param(params); 
 }
 
-function createDashboard(vm){
+function createGallery(vm){
 	
-	hidePlotAndDashboard();
+	hidePlotAndGallery();
 	
 	const imageHeight = Math.floor($('#app').height() - Math.ceil($('#search-bar').outerHeight()) - Math.ceil($('#navigation-bar').outerHeight()));
 	const imageWidth = Math.floor($('#app').width());
 	
 	const originalQuery = data.searchBar.query;
+	data.gallery.progress.show = true;
+	
+	
 	vm.splitQueries(function (fieldValues) {
 		var splitByField = data.searchBar.splitByKeys.selected;
 		
-		data.dashboard.toBeRendered = fieldValues;
+		data.gallery.toBeRendered = fieldValues;
 		
 		// reset progress bar
-		data.dashboard.progress.max = fieldValues.length;
-		data.dashboard.progress.value = 0;
+		data.gallery.progress.max = fieldValues.length;
+		data.gallery.progress.value = 0;
 		
-		createDashboardItem(originalQuery, splitByField, imageHeight, imageWidth);
+		createGalleryItem(originalQuery, splitByField, imageHeight, imageWidth);
 	});
 }
 
 
 
 
-function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
+function createGalleryItem(originalQuery, field, imageHeight, imageWidth)
 {
-	if (data.dashboard.toBeRendered.length > 0) {
-		var fieldValue = data.dashboard.toBeRendered.pop();
+	if (data.gallery.toBeRendered.length > 0) {
+		var fieldValue = data.gallery.toBeRendered.pop();
 		const query = createQuery(originalQuery, field, fieldValue);
 		const generateThumbnail = true;
 		const request = createRequest(query, generateThumbnail);
@@ -968,15 +975,15 @@ function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
 		request['thumbnailMaxHeight'] = 200;
 		
 		const success = function(response){
-			data.dashboard.tiles.push({
+			data.gallery.tiles.push({
 				fieldValue: fieldValue,
 				thumbnailUrl: response.thumbnailUrl,
 				imageUrl: response.imageUrl,
 				stats: response.stats
 			});
 			sortTiles();
-			data.dashboard.progress.value++;
-			createDashboardItem(originalQuery, field, imageHeight, imageWidth);
+			data.gallery.progress.value++;
+			createGalleryItem(originalQuery, field, imageHeight, imageWidth);
 		};
 		const error = function(e) {
 			var errorMessage = '';
@@ -991,38 +998,40 @@ function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
 			}
 			hideLoadingIcon();
 			if (errorMessage) {
-				data.dashboard.tiles.push({
+				data.gallery.tiles.push({
 					fieldValue: fieldValue,
 					error: errorMessage
 				});
 			}
-			data.dashboard.progress.value++;
-			createDashboardItem(originalQuery, field, imageHeight, imageWidth);
+			data.gallery.progress.value++;
+			createGalleryItem(originalQuery, field, imageHeight, imageWidth);
 		};
 		var requestParam = {
 			request: JSON.stringify(request)
 		};
 		getJson("plots", requestParam, success, error)
+	}else{
+		data.gallery.progress.show = false;
 	}
 }
 
 function sortTiles() {
 
-	switch (data.dashboard.sortBy) {
+	switch (data.gallery.sortBy) {
 		case "DEFAULT":
-			data.dashboard.tiles.sort(function(a, b){return a.fieldValue.localeCompare(b.fieldValue);});
+			data.gallery.tiles.sort(function(a, b){return a.fieldValue.localeCompare(b.fieldValue);});
 			break;
 		case "VALUES_ASC":
-			data.dashboard.tiles.sort(function(a, b){return a.stats.values - b.stats.values;});
+			data.gallery.tiles.sort(function(a, b){return a.stats.values - b.stats.values;});
 			break;
 		case "VALUES_DESC":
-			data.dashboard.tiles.sort(function(a, b){return b.stats.values - a.stats.values;});
+			data.gallery.tiles.sort(function(a, b){return b.stats.values - a.stats.values;});
 			break;
 		case "MAX_VALUE_ASC":
-			data.dashboard.tiles.sort(function(a, b){return a.stats.maxValue - b.stats.maxValue;});
+			data.gallery.tiles.sort(function(a, b){return a.stats.maxValue - b.stats.maxValue;});
 			break;
 		case "MAX_VALUE_DESC":
-			data.dashboard.tiles.sort(function(a, b){return b.stats.maxValue - a.stats.maxValue;});
+			data.gallery.tiles.sort(function(a, b){return b.stats.maxValue - a.stats.maxValue;});
 			break;
 	}
 }
diff --git a/pdb-ui/src/main/resources/templates/main.mustache b/pdb-ui/src/main/resources/templates/main.mustache
index 13ead78..f9f2193 100644
--- a/pdb-ui/src/main/resources/templates/main.mustache
+++ b/pdb-ui/src/main/resources/templates/main.mustache
@@ -20,11 +20,11 @@
 		<search-bar v-bind="{ 'searchBar': searchBar }"></search-bar>
 		<div id="navigation-bar">
 			<navigation-bar v-bind="{ 'searchBar': searchBar }"></navigation-bar>
-			<navigation-bar-dashboard v-bind="{ 'dashboard': dashboard }"></navigation-bar-dashboard>
+			<navigation-bar-gallery v-bind="{ 'gallery': gallery }"></navigation-bar-gallery>
 		</div>
 		<div id="result">
 			<result-view v-bind="{ 'searchBar': searchBar, 'resultView': resultView }"></result-view>
-			<result-view-dashboard v-bind="{ 'dashboard': dashboard }"></result-view-dashboard>
+			<result-view-gallery v-bind="{ 'gallery': gallery }"></result-view-gallery>
 		</div>
 	</div>
 </body>