From 9463c58f0c0f088201c10554ac2be34351de5a49 Mon Sep 17 00:00:00 2001
From: May <40745122+SomewhatMay@users.noreply.github.com>
Date: Tue, 12 Mar 2024 12:58:14 -0400
Subject: [PATCH] Changed UI a bit to make it more reactive

---
 src/lib/components/AddForm.svelte      |  5 +-
 src/lib/components/FormsList.svelte    | 77 ++++++++++++++------------
 src/lib/components/ResponseList.svelte | 69 ++++++++++++-----------
 3 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/src/lib/components/AddForm.svelte b/src/lib/components/AddForm.svelte
index 2315c85..fc59e3e 100644
--- a/src/lib/components/AddForm.svelte
+++ b/src/lib/components/AddForm.svelte
@@ -56,6 +56,9 @@
 
 
 <div class="space-y-4">
+    <div class="text-2xl text-text block font-bold text-center">Create Form</div>
+    <hr class="text-text/50 mb-2" style="margin-top: 8px" />
+
     <div class="my-2">
         <div class="sm:flex justify-between items-center gap-2">
             <span
@@ -236,7 +239,7 @@
 
     <div class="flex px-20 mt-3">
         <button 
-            class="button flex-auto"
+            class="button flex-auto mb-5"
             class:clickable={!error}
             class:!bg-disabled={error}
             class:!text-gray-500={error}
diff --git a/src/lib/components/FormsList.svelte b/src/lib/components/FormsList.svelte
index 255ad19..7e3f5a2 100644
--- a/src/lib/components/FormsList.svelte
+++ b/src/lib/components/FormsList.svelte
@@ -15,43 +15,50 @@
 </script>
 
 <div class="py-4">
-    <span class="text-2xl text-text block mb-2 font-bold">Forms</span>
+    <div class="text-2xl text-text block mb-2 font-bold text-center">Existing Forms</div>
     <hr class="text-text/50 mb-2" />
-    <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
-        {#each responses as response (response.id)}
-            <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
-                <!-- Main button that takes you to the response -->
-                <button class="flex-auto text-white text-left flex flex-col sm:block"
-                    on:click={() => setResponse(response.id)}
-                >
 
-                <!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->  
-                <span class="block sm:inline font-normal text-gray-400">{response?.type?.name}</span>
-                {#if response?.type?.name != "Pit Scouting"}
-                    <!-- Add a space between them on desktop -->
-                    <span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
-                {/if}
-                <!-- Add a space between them on desktop -->
-                <span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
-                </button>
+    <!-- Display a short message if there are no forms -->
+    {#if responses.length == 0}
+        <div class="text-gray-400 text-xs w-max mx-auto mt-2 mb-4 text-center">Unsubmitted forms will appear here.<br /> Click on them to edit them.</div>
+    {:else}
+        <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
+
+            {#each responses as response (response.id)}
+                <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
+                    <!-- Main button that takes you to the response -->
+                    <button class="flex-auto text-white text-left flex flex-col sm:block"
+                        on:click={() => setResponse(response.id)}
+                    >
 
-                <!-- The submit and delete buttons -->
-                <span class="flex">
-                    <button
-                        class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
-                        on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
-                    ><button
-                        class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
-                        disabled={$errors[response.id]}
-                        on:click={() => submitResponse(response.id)}>
-                        {#if $errors[response.id]}
-                            🚫 Has Errors
-                        {:else}
-                            ✔ Submit
-                        {/if}
+                    <!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->  
+                    <span class="block sm:inline font-normal text-gray-400">{response?.type?.name}</span>
+                    {#if response?.type?.name != "Pit Scouting"}
+                        <!-- Add a space between them on desktop -->
+                        <span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
+                    {/if}
+                    <!-- Add a space between them on desktop -->
+                    <span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
                     </button>
-                </span>
-            </li>
-        {/each}
-    </ul>
+
+                    <!-- The submit and delete buttons -->
+                    <span class="flex">
+                        <button
+                            class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
+                            on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
+                        ><button
+                            class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
+                            disabled={$errors[response.id]}
+                            on:click={() => submitResponse(response.id)}>
+                            {#if $errors[response.id]}
+                                🚫 Has Errors
+                            {:else}
+                                ✔ Submit
+                            {/if}
+                        </button>
+                    </span>
+                </li>
+            {/each}
+        </ul>
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src/lib/components/ResponseList.svelte b/src/lib/components/ResponseList.svelte
index 444b788..dd628b7 100644
--- a/src/lib/components/ResponseList.svelte
+++ b/src/lib/components/ResponseList.svelte
@@ -7,39 +7,44 @@
 
   <div>
     <span>
-        <hr class="mt-3"/>
-        <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
-            {#each $responseQueue as response (response.id)}
-                <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
-                    <!-- Main button that takes you to the response -->
-                    <!-- <button class="flex-auto text-white text-left flex flex-col sm:block"
-                        on:click={() => setResponse(response.id)}
-                    > -->
+        {#if $responseQueue.length > 0}
+            <hr class="mb-2"/>
+            <div class="text-2xl text-text block mb-2 font-bold text-center">Response Queue</div>
+            <div class="text-gray-400 text-xs w-max mx-auto mt-2 mb-4 text-center">These forms are being sent to strategy. This may take some time.</div>
+            <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
+                {#each $responseQueue as response (response.id)}
+                    <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
+                        <!-- Main button that takes you to the response -->
+                        <!-- <button class="flex-auto text-white text-left flex flex-col sm:block"
+                            on:click={() => setResponse(response.id)}
+                        > -->
 
-                    <span class="flex-auto text-white text-left flex flex-col sm:block">
-                        <!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->  
-                        <span class="block sm:inline font-normal text-gray-400">{response.type.name}</span>
-                        {#if response?.type?.name != "Pit Scouting"}
+                        <span class="flex-auto text-white text-left flex flex-col sm:block">
+                            <!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->  
+                            <span class="block sm:inline font-normal text-gray-400">{response.type.name}</span>
+                            {#if response?.type?.name != "Pit Scouting"}
+                                <!-- Add a space between them on desktop -->
+                                <span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
+                            {/if}
                             <!-- Add a space between them on desktop -->
-                            <span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
-                        {/if}
-                        <!-- Add a space between them on desktop -->
-                        <span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
-                    </span>
-                    <!-- </button> -->
-    
-                    <!-- The submit and delete buttons -->
-                    <span class="flex">
-                        <button
-                            class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
-                            on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
-                        ><button
-                            class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
-                            disabled={$errors[response.id]}
-                            on:click={() => unsubmitResponse(response.id)}>↩️ Unsubmit</button>
-                    </span>
-                </li>
-            {/each}
-        </ul>
+                            <span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
+                        </span>
+                        <!-- </button> -->
+        
+                        <!-- The submit and delete buttons -->
+                        <span class="flex">
+                            <button
+                                class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
+                                on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
+                            ><button
+                                class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
+                                disabled={$errors[response.id]}
+                                on:click={() => unsubmitResponse(response.id)}>↩️ Unsubmit</button>
+                        </span>
+                    </li>
+                {/each}
+            </ul>
+            <hr class="text-text/50 mb-2 mt-3" />
+        {/if}
     </span>
   </div>
\ No newline at end of file