From 5bb1a0a675b5892f5e0d70266641a0bc19e8d6db Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 3 Feb 2024 18:00:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=9C=20Adds=20new=20topbar=20inspired?=
 =?UTF-8?q?=20by=20real=20spot=20controller?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Topbar.svelte | 152 +++++++++----------------------
 1 file changed, 45 insertions(+), 107 deletions(-)

diff --git a/app/src/components/Topbar.svelte b/app/src/components/Topbar.svelte
index c606468..5327598 100644
--- a/app/src/components/Topbar.svelte
+++ b/app/src/components/Topbar.svelte
@@ -1,117 +1,55 @@
 <script lang="ts">
-	import { isConnected, dataBuffer } from '../lib/socket';
-	import { Icon, ArrowsPointingIn, ArrowsPointingOut, Bars3, Power, Cube } from 'svelte-hero-icons';
-	import { tweened } from 'svelte/motion';
-	import { quadInOut } from 'svelte/easing';
+	import { isConnected, dataBuffer, status } from '../lib/socket';
+	import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel, sidebarOpen } from '../lib/store';
 
-	let isFullscreen = false;
+    const views = ["Robot camera", "Virtual environment"]
+    const modes = ["Drive", "Choreography"]
 
-	const width = tweened(0, {
-		duration: 250,
-		easing: quadInOut
-	});
-
-	function handleClick() {
-		if ($width === 0) width.set(75);
-		else width.set(0);
-	}
-
-	const toggleFullScreen = () => {
-		if (!document.fullscreenElement) document.documentElement.requestFullscreen();
-		else if (document.exitFullscreen) document.exitFullscreen();
-		isFullscreen = !document.fullscreenElement;
-	};
 </script>
 
-<div class="absolute flex justify-between w-full z-10 h-10" on:dblclick={handleClick}>
-    <div class="absolute flex justify-between w-full">
-        <div class="w-20 p-4 z-20">
-            <button on:click={() => sidebarOpen.set(true)}>
-                <Icon src={Bars3} size="32" />
-            </button>
-        </div>
-        <div class="w-20 p-4 text-right">{Math.floor($dataBuffer[0])}°🌡️<br>
-            {Math.floor($dataBuffer[9]*10)/10}V<br>
-            {Math.floor($dataBuffer[8]*1000)/1000}A
-        </div>
+
+<div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
+    <div class="flex gap-2 py-2">
+    <button class="ml-2" on:click={() => sidebarOpen.set(true)}>
+        <Icon src={Bars3} size="32" />
+    </button>
+        <select>
+            {#each modes as mode}
+            <option>{mode}</option>
+            {/each}
+        </select>
+        
+        <select>
+            {#each views as view}
+            <option>{view}</option>
+            {/each}
+        </select>
     </div>
-    <div class="absolute flex justify-center w-full">
-        <div>
-            <div
-                style="height:{$width}px; width:300px; background-color:#36393f"
-                class="rounded-b-xl overflow-hidden flex justify-end flex-col"
-            >
-                {#if $width !== 0}
-                    <div class="flex justify-evenly p-4 w-full">
-                        <button on:click={toggleFullScreen}>
-                            <Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" />
-                        </button>
-                        <button>
-                            <Icon src={Power} size="32" />
-                        </button>
-                        <button class:text-blue-600={$emulateModel} on:click={() => emulateModel.update(v => !v)}>
-                            <Icon src={Cube} size="32"/>
-                        </button>
-                    </div>
-                {/if}
-            </div>
-            <div class="flex justify-center" on:mouseup={handleClick}>
-                <svg height="40" width="300" class="Settings_topSVG__2VXbU">
-                    <path
-                        stroke="none"
-                        fill="#36393f"
-                        d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z"
-                    />
-                </svg>
-                <div
-                    class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
-                {$isConnected ? 'connected' : 'disconnected'}"
-                >
-                    <span class="dot h-4 w-4" />
-                    <span class="dot h-4 w-4" />
-                    <span class="dot h-4 w-4" />
-                    <span class="dot h-4 w-4" />
-                </div>
-            </div>
-        </div>
+
+    <div class="flex gap-2 p-2">
+        <button class="action_button bg-zinc-600">
+            <Icon src={Power} size="24" />
+        </button>
+        <button class="action_button"><Icon src={Battery100} size="24" /></button>
+        <button class="action_button"><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button>
+    </div>
+    <div>
+        <button class="h-full w-20 bg-red-600 text-white">STOP</button>
     </div>
 </div>
 
-<style scoped>
-	.dot {
-		background-color: grey;
-	}
-	.disconnected .dot {
-		animation: _fade 0.5s 3s infinite alternate forwards;
-	}
-	.connected .dot:first-child {
-		background-color: #00bbe3;
-		transform: scale(1.1);
-	}
-	.dots .dot:first-child {
-		animation-delay: 0.25s;
-	}
-	.dots .dot:nth-child(2) {
-		animation-delay: 0.5s;
-	}
-	.dots .dot:nth-child(3) {
-		animation-delay: 0.75s;
-	}
-	.dots .dot:last-child {
-		animation-delay: 1s;
-	}
-	.dots .dot:last-child {
-		animation-delay: 1s;
-	}
-	@keyframes _fade {
-		from {
-			background-color: #00bbe3;
-			transform: scale(1.1);
-		}
-		to {
-			background-color: grey;
-			transform: scale(1.1);
-		}
-	}
-</style>
+<style>
+    .topbar {
+        height: 50px;
+    }
+    .action_button {
+        border-radius: 4px;
+        width: 34px;
+        height: 34px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: 1px solid #52525b;
+    }
+</style>
\ No newline at end of file