Merge pull request #17 from TIPPECC/6-display-geotiff-on-map

6 display geotiff on map
TIPPECC · Aug 5, 2024 · 544eb6a · 544eb6a
2 parents 9b6547b + 9627d54
commit 544eb6a
Show file tree

Hide file tree

Showing 27 changed files with 706 additions and 400 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -23,3 +23,11 @@ body {
 p {
 	@apply pt-2 pb-2;
 }
+
+.flex-center {
+	@apply flex justify-center place-items-center;
+}
+
+.rounded-image-hover {
+	@apply hover:bg-primary-200 rounded-md cursor-pointer;
+}
diff --git a/src/lib/ColorGradientPicker.svelte b/src/lib/ColorGradientPicker.svelte
@@ -71,6 +71,11 @@
 				throw new Error('NaN value entered as custom abs max.');
 			}
 
+			// TODO:
+			//	- change so that you can reset to the original cmin/cmax
+			//	which was (most likely) read from the file metadata
+			//	- right now when a custom max is set, this information is lost
+			//	and it can not be reverted without reloading the file
 			cmin = -custom_abs_max;
 			cmax = custom_abs_max;
 

diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
@@ -9,18 +9,52 @@
 		<span class="pr-4"> @2023 TIPPECC</span><a href={base + '/imprint'}>Imprint</a>
 	</div>
 
-	<!--<div class="flex flex-1 bg-white h-10">-->
-	<div class="logo-cloud grid-cols-1 lg:!grid-cols-3 gap-2 bg-primary-100 pt-4 pr-4 pl-4 mt-6">
-		<div class=""><BMBF_logo /></div>
-		<div><img src="{base}/uni_jena.png" alt="test" class="p-1" /></div>
-		<div><img src="{base}/GCI.jpg" alt="test" class="p-4" /></div>
+	<div
+		class="logo-cloud grid-cols-1 md:grid-cols-3 md:px-12 lg:px-2 xl:px-8 gap-y-1 lg:!grid-cols-7 bg-primary-100 p-2 mt-6 mb-2"
+	>
+		<div class="flex-center">
+			<a class="rounded-image-hover p-2" href="https://www.bmbf.de/bmbf/en/home/home_node.html">
+				<BMBF_logo class_overwrite="max-xl:max-w-[132px]" />
+			</a>
+		</div>
+		<div class="flex-center">
+			<a class="rounded-image-hover p-1 px-2" href="https://www.ub.bw/">
+				<img src="{base}/images/UB-LOGO-2_0.png" alt="test" class="p-1 max-h-[90px] min-w-[50px]" />
+			</a>
+			<a class="rounded-image-hover p-1" href="https://www.unza.zm/">
+				<Uni_zambia class_overwrite="max-xl:max-h-[80px] max-h-[90px]" w="50pt" />
+			</a>
+		</div>
 
-		<div><img src="{base}/GERICS.png" alt="test" class="p-8" /></div>
-		<div><img src="{base}/Gobabeb.png" alt="test" class="p-4" /></div>
+		<div class="flex-center">
+			<a class="rounded-image-hover p-2" href="https://www.uni-jena.de/">
+				<img src="{base}/images/uni_jena.png" alt="test" class="p-1 max-h-[80px]" />
+			</a>
+		</div>
+		<div class="flex-center">
+			<a class="rounded-image-hover p-2" href="https://www.wits.ac.za/">
+				<img src="{base}/images/university-witts.png" alt="test" class="p-1 max-h-[80px]" />
+			</a>
+			<a class="rounded-image-hover p-2" href="https://www.wits.ac.za/gci/">
+				<img src="{base}/images/gci_small.png" alt="test" class="p-1 max-h-[80px]" />
+			</a>
+		</div>
+
+		<div class="flex-center">
+			<a class="rounded-image-hover p-1" href="https://www.climate-service-center.de/">
+				<img src="{base}/images/GERICS.png" alt="test" class="p-1 max-lg:max-h-[84px]" />
+			</a>
+		</div>
+		<div class="flex-center">
+			<a class="rounded-image-hover" href="https://gobabeb.org/">
+				<img src="{base}/images/Gobabeb.png" alt="test" class="p-1 max-lg:max-h-[100px]" />
+			</a>
+		</div>
 
-		<div class="flex">
-			<img src="{base}/UB-LOGO-2_0.png" alt="test" class="h-full p-8 pr-14" />
-			<Uni_zambia />
+		<div class="flex-center md:col-span-3 lg:col-span-1">
+			<a class="rounded-image-hover p-1 max-xl:max-w-[120px]" href="https://sasscal.org/">
+				<img src="{base}/images/SASSCAL.png" alt="test" class="p-1 max-lg:max-h-[100px]" />
+			</a>
 		</div>
 	</div>
 </footer>
diff --git a/src/lib/bmbf_en.svelte b/src/lib/bmbf_en.svelte
@@ -1,9 +1,14 @@
+<script>
+	export let class_overwrite = '';
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 168 84"
 	id="svg-logo-bmbf"
 	width="168px"
 	height="84px"
+	class={class_overwrite}
 >
 	<g clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
 		<path

diff --git a/src/lib/icons/circle_question.svelte b/src/lib/icons/circle_question.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- circle_question -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/icons/earth.svelte b/src/lib/icons/earth.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- earth -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M57.7 193l9.4 16.4c8.3 14.5 21.9 25.2 38 29.8L163 255.7c17.2 4.9 29 20.6 29 38.5l0 39.9c0 11 6.2 21 16 25.9s16 14.9 16 25.9l0 39c0 15.6 14.9 26.9 29.9 22.6c16.1-4.6 28.6-17.5 32.7-33.8l2.8-11.2c4.2-16.9 15.2-31.4 30.3-40l8.1-4.6c15-8.5 24.2-24.5 24.2-41.7l0-8.3c0-12.7-5.1-24.9-14.1-33.9l-3.9-3.9c-9-9-21.2-14.1-33.9-14.1L257 256c-11.1 0-22.1-2.9-31.8-8.4l-34.5-19.7c-4.3-2.5-7.6-6.5-9.2-11.2c-3.2-9.6 1.1-20 10.2-24.5l5.9-3c6.6-3.3 14.3-3.9 21.3-1.5l23.2 7.7c8.2 2.7 17.2-.4 21.9-7.5c4.7-7 4.2-16.3-1.2-22.8l-13.6-16.3c-10-12-9.9-29.5 .3-41.3l15.7-18.3c8.8-10.3 10.2-25 3.5-36.7l-2.4-4.2c-3.5-.2-6.9-.3-10.4-.3C163.1 48 84.4 108.9 57.7 193zM464 256c0-36.8-9.6-71.4-26.4-101.5L412 164.8c-15.7 6.3-23.8 23.8-18.5 39.8l16.9 50.7c3.5 10.4 12 18.3 22.6 20.9l29.1 7.3c1.2-9 1.8-18.2 1.8-27.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/icons/exclamation.svelte b/src/lib/icons/exclamation.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- ! -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/icons/file_question.svelte b/src/lib/icons/file_question.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- file ? -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="28"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/icons/square_caret_down.svelte b/src/lib/icons/square_caret_down.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- square_caret_down -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M384 480c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0zM224 352c-6.7 0-13-2.8-17.6-7.7l-104-112c-6.5-7-8.2-17.2-4.4-25.9s12.5-14.4 22-14.4l208 0c9.5 0 18.2 5.7 22 14.4s2.1 18.9-4.4 25.9l-104 112c-4.5 4.9-10.9 7.7-17.6 7.7z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/icons/x_disabled.svelte b/src/lib/icons/x_disabled.svelte
@@ -0,0 +1,10 @@
+<script></script>
+
+<!-- x -->
+<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="28"
+	><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M64 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 32zm79 143c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+	/></svg
+>
+
+<style></style>
diff --git a/src/lib/tempresults/folderytpe_chooser.svelte b/src/lib/tempresults/folderytpe_chooser.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export var foldertype: string = 'water_budget';
+	var foldertypes: any[] = ['water_budget', 'water_budget_bias', 'kariba', 'vaal'];
+
+	const dispatch = createEventDispatcher();
+
+	function set_foldertype(new_type: string) {
+		for (let x = 0; x < foldertypes.length; x++) {
+			if (new_type == foldertypes[x]) {
+				console.log('NEW: ', new_type, ' ftype: ', foldertypes[x]);
+				foldertype = new_type;
+				dispatch('foldertype_changed', foldertype);
+				return;
+			}
+		}
+
+		// default
+		foldertype = foldertypes[0];
+		dispatch('foldertype_changed', foldertype);
+	}
+</script>
+
+<!-- Backend Folder Content as checkboxes -->
+<div class="btn-group variant-ghost-primary h-10 px-2 m-1">
+	<div class="flex gap-1 items-center btn-group">
+		{#each foldertypes as ftype}
+			<button
+				type="button"
+				class="btn h-[28px] variant-filled-tertiary {foldertype == ftype
+					? 'font-bold border-l-2 border-cyan-300'
+					: 'border-l-2 border-red-500'}"
+				on:click={() => set_foldertype(ftype)}>{ftype}</button
+			>
+		{/each}
+	</div>
+</div>