Merge pull request #12 from externref/master

ui: update ui and add transitions
jatiinyadav · Jun 20, 2024 · ece61b1 · ece61b1
2 parents bfdaa1f + b64ccf6
commit ece61b1
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 23 deletions.
diff --git a/ui/src/app.css b/ui/src/app.css
@@ -49,6 +49,7 @@ h1 {
 button {
   border-radius: 8px;
   border: 1px solid transparent;
+  margin-top: 5px;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;

diff --git a/ui/src/lib/Landing.svelte b/ui/src/lib/Landing.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-  // import { onMount } from "svelte";
+  import { onMount } from "svelte";
   import type { IResponseType } from "../interfaces/IResponseType";
-
+  import { fade, slide } from "svelte/transition";
+  let mount: boolean = false;
+  onMount(() => {
+    mount = true;
+  });
   // let message = "";
   let items: IResponseType[] = [];
   // const endpoint = "http://localhost:8080/api/message";
@@ -26,11 +30,11 @@
       console.log(inputValue1);
 
       const response = await fetch(
-        `http://localhost:8080/api/weburl?url1=${inputValue1}&url2=${inputValue2}`
+        `http://localhost:8080/api/weburl?url1=${inputValue1}&url2=${inputValue2}`,
       );
       const data = await response.json();
       console.log(data); // Process the response data as needed
-      items = data
+      items = data;
     } catch (error) {
       console.error("Error fetching data:", error);
     }
@@ -40,35 +44,61 @@
   }
 </script>
 
-<main>
-  <!-- <h1>{message}</h1> -->
-
-  <!-- svelte-ignore a11y-autofocus -->
-  <input type="text" bind:value={inputValue1} />
+{#if mount}
+  <main>
+    <!-- <h1>{message}</h1> -->
+    <!-- svelte-ignore a11y-autofocus -->
+    <input type="text" bind:value={inputValue1} />
 
-  <!-- svelte-ignore a11y-autofocus -->
-  <input type="text" bind:value={inputValue2} />
-  <button on:click={fetchData}>Fetch Data</button>
+    <!-- svelte-ignore a11y-autofocus -->
+    <input type="text" bind:value={inputValue2} /><br />
+    <button transition:fade={{ delay: 100, duration: 400 }} on:click={fetchData}
+      >Fetch Data</button
+    >
+
 
-  <h1>List of Items</h1>
-  <ul>
-    {items.length}
-    {#each items as item}
-      <li><span>Header: </span> {item.header}</li>
-      <li><span>Description: </span> {item.desc}</li>
-      <li><span>URL: </span> {item.href}</li>
+    {#if items.length > 0}
+    <button
+    transition:fade={{ delay: 100, duration: 400 }}
+    on:click={() => {
+      items = [];
+    }}>Reset</button
+  >
+      <flex>
+        <div id="loi">List of Items</div>
+        <div>(<b> Total items:</b> {items.length})</div></flex
+      >
       <hr />
-    {/each}
-  </ul>
-</main>
+
+      <ul>
+        <div transition:slide={{ duration: 400, delay: 100, axis: "y" }}>
+          {#each items as item}
+            <div transition:slide={{ duration: 400, delay: 100, axis: "y" }}>
+              <li><span>Header: </span> {item.header}</li>
+              <li><span>Description: </span> {item.desc}</li>
+              <li><span>URL: </span> {item.href}</li>
+              <hr />
+            </div>
+          {/each}
+        </div>
+      </ul>
+    {/if}
+  </main>
+{/if}
 
 <style>
   ul {
     text-align: left;
   }
-
+  input {
+    border-radius: 5%;
+    outline: none;
+  }
   span {
     font-weight: bold;
     font-size: 1.3rem;
   }
+  #loi {
+    font-size: xx-large;
+  }
 </style>