Merge pull request #66 from hmcalister/AddEventForm

Add event form
hmcalister · Sep 10, 2023 · 00094a4 · 00094a4
2 parents 2c97edd + c4eaf4e
commit 00094a4
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.4",
+    "@tailwindcss/forms": "^0.5.6",
     "@types/node": "20.5.9",
     "autoprefixer": "10.4.15",
     "postcss": "8.4.29",

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-a85fb1a1f35b487a8e6c281896428b87
+c05f28154f02e2add136f6d5198b1250
diff --git a/frontend/src/lib/EventForm.svelte b/frontend/src/lib/EventForm.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { models } from "$lib/wailsjs/go/models";
+    import { getModalStore } from "@skeletonlabs/skeleton";
+    const modalStore = getModalStore();
+    export let parent: any;
+    export let event: models.Event;
+
+    var formEventName: string = event.Name;
+    var formStartTime: Date = event.StartTime;
+    var formIsRecurring: boolean = event.IsRecurring;
+
+    const TIMEOUT_DURATION_SECOND_FACTOR = 1000000000;
+    const TIMEOUT_DURATION_MINUTE_FACTOR = 60 * TIMEOUT_DURATION_SECOND_FACTOR;
+    const TIMEOUT_DURATION_HOUR_FACTOR = 60 * TIMEOUT_DURATION_MINUTE_FACTOR;
+    const TIMEOUT_DURATION_DAY_FACTOR = 24 * TIMEOUT_DURATION_HOUR_FACTOR;
+    var timeoutRemaining: number = event.TimeoutDuration;
+    var formTimeoutDurationDays: number = Math.floor(timeoutRemaining / TIMEOUT_DURATION_DAY_FACTOR);
+    timeoutRemaining = timeoutRemaining % TIMEOUT_DURATION_DAY_FACTOR;
+    var formTimeoutDurationHours: number = Math.floor(timeoutRemaining / TIMEOUT_DURATION_HOUR_FACTOR);
+    timeoutRemaining = timeoutRemaining % TIMEOUT_DURATION_HOUR_FACTOR;
+    var formTimeoutDurationMinutes: number = Math.floor(timeoutRemaining / TIMEOUT_DURATION_MINUTE_FACTOR);
+    timeoutRemaining = timeoutRemaining % TIMEOUT_DURATION_MINUTE_FACTOR;
+    var formTimeoutDurationSeconds: number = Math.floor(timeoutRemaining / TIMEOUT_DURATION_SECOND_FACTOR);
+
+    function editEvent() {
+        var editedEvent = new models.Event({
+            ID: event.ID,
+            Name: formEventName,
+            StartTime: new Date(formStartTime),
+            TimeoutDuration:
+                formTimeoutDurationDays * TIMEOUT_DURATION_DAY_FACTOR +
+                formTimeoutDurationHours * TIMEOUT_DURATION_HOUR_FACTOR +
+                formTimeoutDurationMinutes * TIMEOUT_DURATION_MINUTE_FACTOR +
+                formTimeoutDurationSeconds * TIMEOUT_DURATION_SECOND_FACTOR,
+            IsRecurring: formIsRecurring,
+        });
+        if ($modalStore[0] && $modalStore[0].response) $modalStore[0].response(editedEvent);
+        modalStore.close();
+    }
+
+    function cancelEditing() {
+        if ($modalStore[0] && $modalStore[0].response) $modalStore[0].response(undefined);
+        modalStore.close();
+    }
+    parent.onClose = cancelEditing;
+
+    // Base Classes
+    const cBase = "card p-4 w-modal shadow-xl space-y-4";
+    const cHeader = "text-2xl font-bold";
+    const cForm = "border border-surface-500 p-4 space-y-4 rounded-container-token";
+</script>
+
+{#if $modalStore[0]}
+    <div class={cBase}>
+        <header class={cHeader}>{$modalStore[0].title ?? ""}</header>
+        <article>{$modalStore[0].body ?? ""}</article>
+        <form id="eventForm" class="modal-form {cForm}" on:submit|preventDefault={editEvent}>
+            <label class="label">
+                <span>Event Name</span>
+                <input type="text" class="input" bind:value={formEventName} />
+            </label>
+
+            <label>
+                <span>Start Time</span>
+                <input type="datetime-local" class="input" bind:value={formStartTime} />
+            </label>
+
+            <div>
+                <span>Timeout Duration</span>
+                <div id="TimeoutDurationGrid">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                        <div class="input-group-shim">Days</div>
+                        <input type="number" min=0 bind:value={formTimeoutDurationDays} />
+                    </div>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                        <div class="input-group-shim">Hours</div>
+                        <input type="number" min=0 bind:value={formTimeoutDurationHours} />
+                    </div>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                        <div class="input-group-shim">Minutes</div>
+                        <input type="number" min=0 bind:value={formTimeoutDurationMinutes} />
+                    </div>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                        <div class="input-group-shim">Seconds</div>
+                        <input type="number" min=0 bind:value={formTimeoutDurationSeconds} />
+                    </div>
+                </div>
+            </div>
+
+            <label>
+                <span>Is Recurring</span>
+                <input type="checkbox" class="input" bind:checked={formIsRecurring} />
+            </label>
+        </form>
+        <footer class="modal-footer {parent.regionFooter}">
+            <button class="btn {parent.buttonNeutral}" on:click={cancelEditing}>Cancel</button>
+            <button class="btn {parent.buttonPositive}" form="eventForm">Submit Data</button>
+        </footer>
+    </div>
+{/if}
+
+<style>
+    #TimeoutDurationGrid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+</style>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -1,6 +1,8 @@
 import { join } from 'path'
 import type { Config } from 'tailwindcss'
 import { skeleton } from '@skeletonlabs/tw-plugin'
+import forms from '@tailwindcss/forms';
+
 
 export default {
 	darkMode: 'class',
@@ -9,6 +11,7 @@ export default {
 		extend: {},
 	},
 	plugins: [
+		forms,
 		skeleton({
 			themes: {
 				preset: [

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -8,7 +8,8 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"importsNotUsedAsValues": "remove",
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//