From 302a59c86d8d4c1038f9a43c66837fb0b1e073cb Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 2 Apr 2024 21:46:37 +0000
Subject: [PATCH] Refactor modal layout and add visit count to home page and
 log page

---
 src/lib/components/EditModal.svelte | 26 ++++++++++++++++----------
 src/routes/+page.svelte             | 16 +++++++++++++++-
 src/routes/log/+page.svelte         |  7 ++++++-
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 2656d70..861795e 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -43,17 +43,23 @@
     <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
         <h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
         <p class="py-4">Press ESC key or click the button below to close</p>
-        <div class="modal-action">
-            <form method="dialog">
-                <label for="name">Name</label>
-                <input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
-                <label for="location">Location</label>
-                <input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
-                <label for="created">Created</label>
-                <input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
-                <button class="btn btn-primary" on:click={submit}>Save</button>
+        <div class="modal-action items-center" style="display: flex; flex-direction: column; align-items: center; width: 100%;">
+            <form method="dialog" style="width: 100%;">
+                <div>
+                    <label for="name">Name</label>
+                    <input type="text" id="name" bind:value={editName} class="input input-bordered w-full max-w-xs" />
+                </div>
+                <div>
+                    <label for="location">Location</label>
+                    <input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
+                </div>
+                <div>
+                    <label for="created">Created</label>
+                    <input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
+                </div>
+                <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button>
                 <!-- if there is a button in form, it will close the modal -->
-                <button class="btn" on:click={close}>Close</button>
+                <button class="btn mt-4" on:click={close}>Close</button>
             </form>
         </div>
     </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4af3dba..5dc9a5f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import campingDrawing from "$lib/assets/camping.svg";
+    import { visitCount } from '$lib/utils/stores/visitCountStore';
+
     async function navToLog() {
         goto('/log');
     }
@@ -10,4 +12,16 @@
     <article class="prose"><h1 class="mb-4">Welcome. Let's get Exploring!</h1></article>
     <img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
     <button on:click={navToLog} class="btn btn-primary">Open Log</button>
-</div>
\ No newline at end of file
+
+    
+    <div class="stats shadow">
+        <div class="stat">
+          <div class="stat-title">Logged Adventures</div>
+          <div class="stat-value text-center">{$visitCount}</div>
+          <!-- <div class="stat-desc">21% more than last month</div> -->
+        </div>
+        
+      </div>
+    
+</div>
+
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 7a925ba..6958ed5 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -160,7 +160,12 @@
 {/if}
 
 {#if adventures.length != 0}
-<div class="flex flex-row items-center justify-center mt-16 gap-4 mb-4">
+<div class="flex justify-center items-center w-full mt-4">
+    <article class="prose">
+        <h2 class="text-center">Actions</h2>
+    </article>
+</div>
+<div class="flex flex-row items-center justify-center mt-2 gap-4 mb-4 flex-wrap">
     <button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
         <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
     </button>