Improve UI more

Chi-EEE · Mar 15, 2024 · e577e67 · e577e67
1 parent 931ac07
commit e577e67
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 64 deletions.
diff --git a/app/admin_panel/public/global.css b/app/admin_panel/public/global.css
@@ -1,7 +1,7 @@
 html, body {
 	position: relative;
 	width: 100%;
-	height: 100%;
+	height: 100vh;
 }
 
 body {

diff --git a/app/admin_panel/src/lib/BehaviourTreeHandler.svelte b/app/admin_panel/src/lib/BehaviourTreeHandler.svelte
@@ -0,0 +1,21 @@
+<script>
+    import { Button, Card } from "flowbite-svelte";
+
+    let behaviour_tree_list = [];
+</script>
+
+<div class="w-full h-full bg-white dark:bg-gray-800">
+    <Button class="w-full my-3" color="green">Save Behaviour Tree</Button>
+    <Card
+        class="w-full max-w-full h-full max-h-full overflow-scroll my-4 gap-y-2"
+    >
+        {#each behaviour_tree_list as a}
+            <Card class="w-full max-w-full">
+                <h3>
+                    {a}
+                </h3>
+                <Button color="blue">Load</Button>
+            </Card>
+        {/each}
+    </Card>
+</div>
diff --git a/app/admin_panel/src/lib/CodeBox.svelte b/app/admin_panel/src/lib/CodeBox.svelte
@@ -76,13 +76,11 @@
     </style>
     <div
         style="
-            position: absolute;
-            bottom: 20px;
             right: 40px;
             background-color: {send_behaviour_tree_color};
             color: white;
         "
-        class="p-2 rounded-lg shadow-lg"
+        class="p-2 rounded-lg shadow-lg relative inset-0"
     >
         <button on:mousedown={sendXMLCode} style="cursor:{send_behaviour_tree_cursor}">{send_behaviour_tree_text}</button>
     </div>

diff --git a/app/admin_panel/src/lib/IPList.svelte b/app/admin_panel/src/lib/IPList.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Button, Spinner, Tooltip } from "flowbite-svelte";
+    import { Button, Card, Spinner, Tooltip } from "flowbite-svelte";
     import { copy } from "svelte-copy";
 
     import { websocket_server_port } from "../store/websocket_store";
@@ -44,40 +44,45 @@
     }
 </script>
 
-<div>
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Local IP List</h2>
+<Card class="p-6">
+    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+        Local IP List
+    </h2>
     <br />
-    <Button class="mb-3" id="refresh_ip_address" on:click={refreshIPList}>Refresh IP List</Button>
-    <Tooltip triggeredBy="#refresh_ip_address">Remember to determine the appropriate IP Address based on the Raspberry Pi's network connection.</Tooltip>
+    <Button class="mb-3" id="refresh_ip_address" on:click={refreshIPList}
+        >Refresh IP List</Button
+    >
+    <Tooltip triggeredBy="#refresh_ip_address"
+        >Remember to determine the appropriate IP Address based on the Raspberry
+        Pi's network connection.</Tooltip
+    >
     <br />
-    <div>
-        <!-- svelte-ignore missing-declaration -->
-        {#await getIPList}
-            <p>Loading IP List</p>
-            <Spinner />
-        {:then ip_list}
-            <ul>
-                {#each ip_list as ip}
-                    <figure class="p-6 border-neutral-100 border-b border-t">
-                        <h3
-                            class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
-                        >
-                            {ip.group_name}
-                        </h3>
-                        <p
-                            class="font-normal text-gray-700 dark:text-gray-400 leading-tight"
-                        >
-                            {ip.address}<b>:{$websocket_server_port}</b>
-                        </p>
-                        <button
-                            use:copy={`${ip.address}:${$websocket_server_port}`}
-                            class="mt-4 p-2"
-                        >
-                            Copy IP
-                        </button>
-                    </figure>
-                {/each}
-            </ul>
-        {/await}
-    </div>    
-</div>
+    <!-- svelte-ignore missing-declaration -->
+    {#await getIPList}
+        <p>Loading IP List</p>
+        <Spinner />
+    {:then ip_list}
+        <Card class="overflow-y-scroll h-screen gap-2 justify-center" style="padding:0px">
+            {#each ip_list as ip}
+                <Card class="py-6 border-neutral-100 border-b border-t" style="padding:0.5rem">
+                    <h3
+                        class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
+                    >
+                        {ip.group_name}
+                    </h3>
+                    <p
+                        class="font-normal text-gray-700 dark:text-gray-400 leading-tight"
+                    >
+                        {ip.address}<b>:{$websocket_server_port}</b>
+                    </p>
+                    <button
+                        use:copy={`${ip.address}:${$websocket_server_port}`}
+                        class="mt-4 p-2"
+                    >
+                        Copy IP
+                    </button>
+                </Card>
+            {/each}
+        </Card>
+    {/await}
+</Card>
diff --git a/app/admin_panel/src/lib/RaspberryPiSelector.svelte b/app/admin_panel/src/lib/RaspberryPiSelector.svelte
@@ -30,7 +30,7 @@
     </h1>
     <div class="grid-cols-3 grid my-2">
         <div
-            class="content-center col-start-1 col-span-2 grid grid-cols-2 gap-2 p-3 border-2 border-gray-200 dark:border-gray-700"
+            class="content-center col-start-1 col-span-2 grid grid-cols-2 gap-2 p-3 border-2 rounded border-gray-200 dark:border-gray-700"
         >
             {#each $raspberry_pi_uuid_list as uuid}
                 <Card>

diff --git a/app/admin_panel/src/routes/Home.svelte b/app/admin_panel/src/routes/Home.svelte
@@ -1,4 +1,5 @@
 <script>
+    import BehaviourTreeHandler from "../lib/BehaviourTreeHandler.svelte";
     import CodeBox from "../lib/CodeBox.svelte";
     import NavigationBar from "../lib/NavigationBar.svelte";
     import RaspberryPiConnectBanner from "../lib/RaspberryPiConnectBanner.svelte";
@@ -19,27 +20,31 @@
     {#if $websocket_server_connection_state}
         <RaspberryPiConnectBanner />
     {/if}
-    <Splitpanes
-        horizontal={true}
-        style="height:100vh;padding:1em;background-color:rgb(20,20,40)"
-    >
-        <Pane size={80} minSize={5}>
-            <div
-                class="w-full h-full"
-                style="background-color:rgb(230,230,230)"
-                bind:clientWidth={stream_split_width}
-                bind:clientHeight={stream_split_height}
-            >
-        <!--  -->
-        </div>
+    <Splitpanes style="height:100vh;padding:1em;background-color:rgb(20,20,40)">
+        <Pane>
+            <Splitpanes horizontal={true}>
+                <Pane size={80} minSize={5}>
+                    <div
+                        class="w-full h-full"
+                        style="background-color:rgb(230,230,230)"
+                        bind:clientWidth={stream_split_width}
+                        bind:clientHeight={stream_split_height}
+                    >
+                        <!--  -->
+                    </div>
+                </Pane>
+                <Pane size={20} minSize={5}>
+                    <div
+                        class="w-full h-full"
+                        style="background-color:rgb(230,230,230)"
+                    >
+                        <CodeBox />
+                    </div>
+                </Pane>
+            </Splitpanes>
         </Pane>
-        <Pane size={20} minSize={5}>
-            <div
-                class="w-full h-full"
-                style="background-color:rgb(230,230,230)"
-            >
-                <CodeBox />
-            </div>
+        <Pane size={13} minSize={13} maxSize={80}>
+            <BehaviourTreeHandler />
         </Pane>
     </Splitpanes>
 </main>
diff --git a/app/admin_panel/src/routes/Websocket.svelte b/app/admin_panel/src/routes/Websocket.svelte
@@ -19,9 +19,7 @@
             <RaspberryPiSelector />
         </div>
         <div class="col-start-6">
-            <Card class="p-6">
-                <IPList />
-            </Card>
+            <IPList />
         </div>
     </div>
 </main>