Merge pull request #19 from TIPPECC/18-UI-improvements

18 UI improvements
TIPPECC · Aug 7, 2024 · 6fc72d3 · 6fc72d3
2 parents 51a3b9c + 9f242de
commit 6fc72d3
Show file tree

Hide file tree

Showing 11 changed files with 262 additions and 31 deletions.
diff --git a/src/lib/LoadingRing.svelte b/src/lib/LoadingRing.svelte
@@ -0,0 +1,53 @@
+<script>
+	// code from:
+	// https://github.com/thetrisatria/svelte-loading-animation/blob/master/src/Ring.svelte
+
+	export let size = '64px';
+	export let color = '#10b981';
+</script>
+
+<div class="ring" style="--color:{color};--size:{size}">
+	<div />
+	<div />
+	<div />
+	<div />
+</div>
+
+<style>
+	.ring {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--size);
+		height: var(--size);
+	}
+	.ring div {
+		width: calc(var(--size) * 0.8);
+		height: calc(var(--size) * 0.8);
+		box-sizing: border-box;
+		display: block;
+		position: absolute;
+		margin: 4px;
+		border: calc(var(--size) * 0.125) solid var(--color);
+		border-radius: 50%;
+		border-color: var(--color) transparent transparent transparent;
+		animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	}
+	.ring div:nth-child(1) {
+		animation-delay: -0.45s;
+	}
+	.ring div:nth-child(2) {
+		animation-delay: -0.3s;
+	}
+	.ring div:nth-child(3) {
+		animation-delay: -0.15s;
+	}
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/src/lib/icons/caret_down.svelte b/src/lib/icons/caret_down.svelte
@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<svg class="pb-1 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="18"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
+	/></svg
+>
+
+<style>
+</style>
diff --git a/src/lib/icons/caret_right.svelte b/src/lib/icons/caret_right.svelte
@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="14"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"
+	/></svg
+>
+
+<style>
+</style>
diff --git a/src/lib/icons/earth_africa.svelte b/src/lib/icons/earth_africa.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let w = 36;
+</script>
+
+<svg
+	class="fill-white"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 512 512"
+	width={w}
+	height="40"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M177.8 63.2l10 17.4c2.8 4.8 4.2 10.3 4.2 15.9l0 41.4c0 3.9 1.6 7.7 4.3 10.4c6.2 6.2 16.5 5.7 22-1.2l13.6-17c4.7-5.9 12.9-7.7 19.6-4.3l15.2 7.6c3.4 1.7 7.2 2.6 11 2.6c6.5 0 12.8-2.6 17.4-7.2l3.9-3.9c2.9-2.9 7.3-3.6 11-1.8l29.2 14.6c7.8 3.9 12.6 11.8 12.6 20.5c0 10.5-7.1 19.6-17.3 22.2l-35.4 8.8c-7.4 1.8-15.1 1.5-22.4-.9l-32-10.7c-3.3-1.1-6.7-1.7-10.2-1.7c-7 0-13.8 2.3-19.4 6.5L176 212c-10.1 7.6-16 19.4-16 32l0 28c0 26.5 21.5 48 48 48l32 0c8.8 0 16 7.2 16 16l0 48c0 17.7 14.3 32 32 32c10.1 0 19.6-4.7 25.6-12.8l25.6-34.1c8.3-11.1 12.8-24.6 12.8-38.4l0-12.1c0-3.9 2.6-7.3 6.4-8.2l5.3-1.3c11.9-3 20.3-13.7 20.3-26c0-7.1-2.8-13.9-7.8-18.9l-33.5-33.5c-3.7-3.7-3.7-9.7 0-13.4c5.7-5.7 14.1-7.7 21.8-5.1l14.1 4.7c12.3 4.1 25.7-1.5 31.5-13c3.5-7 11.2-10.8 18.9-9.2l27.4 5.5C432 112.4 351.5 48 256 48c-27.7 0-54 5.4-78.2 15.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+	/></svg
+>
diff --git a/src/lib/icons/folder_tree.svelte b/src/lib/icons/folder_tree.svelte
@@ -0,0 +1,16 @@
+<script>
+</script>
+
+<svg
+	class="fill-white"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 576 512"
+	height="40px"
+	width="36px"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32l0 96L0 384c0 35.3 28.7 64 64 64l192 0 0-64L64 384l0-224 192 0 0-64L64 96l0-64zM288 192c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32l-98.7 0c-8.5 0-16.6-3.4-22.6-9.4L409.4 9.4c-6-6-14.1-9.4-22.6-9.4L320 0c-17.7 0-32 14.3-32 32l0 160zm0 288c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-128c0-17.7-14.3-32-32-32l-98.7 0c-8.5 0-16.6-3.4-22.6-9.4l-13.3-13.3c-6-6-14.1-9.4-22.6-9.4L320 288c-17.7 0-32 14.3-32 32l0 160z"
+	/></svg
+>
+
+<style>
+</style>
diff --git a/src/lib/icons/square_checkmark.svelte b/src/lib/icons/square_checkmark.svelte
@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="19"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+	/></svg
+>
+
+<style>
+</style>
diff --git a/src/lib/icons/square_empty.svelte b/src/lib/icons/square_empty.svelte
@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="18"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"
+	/></svg
+>
+
+<style>
+</style>
diff --git a/src/lib/tempresults/folderytpe_chooser.svelte b/src/lib/tempresults/folderytpe_chooser.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <!-- Backend Folder Content as checkboxes -->
-<div class=" h-10">
+<div class="h-14">
 	<div class="flex gap-2 items-center">
 		{#each foldertypes as ftype}
 			<button

diff --git a/src/lib/tempresults/tif_map.svelte b/src/lib/tempresults/tif_map.svelte
@@ -12,10 +12,13 @@
 	import CustomSliderPicker from '$lib/CustomSliderPicker.svelte';
 	import { browser } from '$app/environment';
 	import FoldertypeChooser from './folderytpe_chooser.svelte';
+	import EarthAfrica from '$lib/icons/earth_africa.svelte';
+	import LoadingRing from '$lib/LoadingRing.svelte';
 
 	const TWELVE_HOURS = 43200000; // 12 hours in ms, for date calculation
 
 	let metadata_loaded: boolean = false;
+	let loading_map: boolean = false;
 	export let selected_file: string = '';
 	export let foldertype: string = 'water_budget';
 	let folder_data: any[any] = [];
@@ -145,6 +148,7 @@
 		// when a file is selected, we usually want to reset everything
 		console.log('Selected file: ', selected_file);
 		metadata_loaded = false;
+		loading_map = true;
 
 		// demand access to the tif file
 		var access_tif_url =
@@ -155,6 +159,8 @@
 
 		let result = [];
 		if (!res.ok) {
+			loading_map = false;
+
 			var err_msg = await res.text();
 			throw new Error(`${res.status} ${res.statusText}\nReason: ${err_msg}`);
 		}
@@ -170,6 +176,8 @@
 
 		let meta_result = [];
 		if (!meta_res.ok) {
+			loading_map = false;
+
 			var err_msg = await res.text();
 			throw new Error(`${meta_res.status} ${meta_res.statusText}\nReason: ${err_msg}`);
 		}
@@ -180,6 +188,7 @@
 		//		- -> now assemble metadata and visualize
 
 		if (!meta_result.metadata) {
+			loading_map = false;
 			throw new Error('No metadata on the current metadata response.');
 		}
 
@@ -192,6 +201,7 @@
 			!current_metadata.net_cdf_times ||
 			!current_metadata.timestamp_begin
 		) {
+			loading_map = false;
 			throw new Error('Missing key-value pairs on metadata response object!');
 		}
 
@@ -215,6 +225,7 @@
 			var meta_max = parseFloat(band_metadata[selected_band].max);
 
 			if (isNaN(meta_min) || isNaN(meta_max)) {
+				loading_map = false;
 				throw new Error('Meta_min or Meta_max evaluated to NaN.');
 			}
 
@@ -276,10 +287,13 @@
 				// fetching file succesful -> visualize
 				metadata_loaded = true;
 				visualize_band();
+
+				loading_map = false;
 				// console.log('selected_tif_url: ', selected_tif_url);
 			})
 			.catch((error) => {
 				metadata_loaded = false;
+				loading_map = false;
 				console.log(
 					`Encountered an error while trying to fetch file ${selected_tif_url}:\n ${error}`
 				);
@@ -416,7 +430,16 @@
 	}
 </script>
 
-<FoldertypeChooser bind:foldertype on:foldertype_changed={refresh_foldercontent} />
+<div class="flex px-4">
+	<h1 class="content-heading">Data Visualization</h1>
+	<div class="flex-center">
+		<EarthAfrica w="38" />
+	</div>
+</div>
+
+<div class="px-2">
+	<FoldertypeChooser bind:foldertype on:foldertype_changed={refresh_foldercontent} />
+</div>
 
 <div class="lg:flex px-4 pt-4 w-full">
 	<label
@@ -460,6 +483,12 @@
 			>
 		</div>
 	{/if}
+
+	{#if loading_map}
+		<div class="flex-center ml-2">
+			<LoadingRing size="24px" />
+		</div>
+	{/if}
 </div>
 
 {#if band_slider_values && metadata_loaded}

diff --git a/src/routes/view_geotiff/+page.svelte b/src/routes/view_geotiff/+page.svelte
@@ -3,6 +3,7 @@
 	import { browser } from '$app/environment';
 	import { tempresult_selection } from '../store/tempresult_store';
 	import TifMap from '$lib/tempresults/tif_map.svelte';
+	import LoadingRing from '$lib/LoadingRing.svelte';
 
 	let selected_filename: string = '';
 	let selected_foldertype: string = '';
@@ -43,4 +44,8 @@
 
 {#if temp_res_check}
 	<TifMap foldertype={selected_foldertype} selected_file={selected_filename} />
+{:else}
+	<div class="flex-center mt-8">
+		<LoadingRing />
+	</div>
 {/if}