From a640703f2da8815dc26ad1600a6f206be1624379 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:10:32 +0200
Subject: feat: Initial after clean slate

---
 .../views/entry-form/sections/date-time.svelte     | 165 +++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 apps/projects-web/src/app/pages/views/entry-form/sections/date-time.svelte

(limited to 'apps/projects-web/src/app/pages/views/entry-form/sections/date-time.svelte')

diff --git a/apps/projects-web/src/app/pages/views/entry-form/sections/date-time.svelte b/apps/projects-web/src/app/pages/views/entry-form/sections/date-time.svelte
new file mode 100644
index 0000000..c91e014
--- /dev/null
+++ b/apps/projects-web/src/app/pages/views/entry-form/sections/date-time.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import {Temporal} from "@js-temporal/polyfill";
+
+	// TIME
+	let fromTimeValue = "";
+	let fromTimeError = "";
+	let toTimeValue = "";
+	let toTimeError = "";
+
+	function handle_from_time_changed(e) {
+		fromTimeValue = e.target.value;
+		if (fromTimeValue) {
+			fromTimeError = "";
+		}
+	}
+
+	function handle_to_time_changed(e) {
+		toTimeValue = e.target.value;
+		if (toTimeValue) {
+			toTimeError = "";
+		}
+	}
+
+	// DATE
+	let date = Temporal.Now.plainDateTimeISO().toString().substring(0, 10);
+	let dateError = "";
+
+	function is_valid() {
+		let isValid = true;
+		let focusIsSet = false;
+		if (!date) {
+			dateError = "Date is required";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("date")?.focus();
+				focusIsSet = true;
+			}
+		} else {
+			dateError = "";
+		}
+
+		if (!fromTimeValue) {
+			fromTimeError = "From is required";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("from")?.focus();
+				focusIsSet = true;
+			}
+		} else if (toTimeValue && fromTimeValue > toTimeValue) {
+			fromTimeError = "From can not be after To";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("from")?.focus();
+				focusIsSet = true;
+			}
+		} else if (fromTimeValue === toTimeValue) {
+			fromTimeError = "From and To can not be equal";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("from")?.focus();
+				focusIsSet = true;
+			}
+		} else {
+			fromTimeError = "";
+		}
+
+		if (!toTimeValue) {
+			toTimeError = "To is required";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("to")?.focus();
+				focusIsSet = true;
+			}
+		} else if (fromTimeValue && toTimeValue < fromTimeValue) {
+			toTimeError = "To can not be before From";
+			isValid = false;
+			if (!focusIsSet) {
+				document.getElementById("to")?.focus();
+				focusIsSet = true;
+			}
+		} else {
+			toTimeError = "";
+		}
+
+		return isValid;
+	}
+
+	export const functions = {
+		get_from_time_value() {
+			return fromTimeValue;
+		},
+		get_to_time_value() {
+			return toTimeValue;
+		},
+		get_date() {
+			return date;
+		},
+		is_valid,
+		reset(focusDate = false) {
+			fromTimeValue = "";
+			toTimeValue = "";
+			if (focusDate) {
+				document.getElementById("date")?.focus();
+			}
+		},
+		set_times(value) {
+			console.log(value);
+			fromTimeValue = value.from.toString().substring(0, 5);
+			toTimeValue = value.to.toString().substring(0, 5);
+		},
+		set_date(new_date: Temporal.PlainDate) {
+			date = new_date.toString();
+		},
+		set_values(values) {
+			const currentTimeZone = Temporal.Now.timeZone().id;
+			const startDate = Temporal.Instant.from(values.start);
+			const stopDate = Temporal.Instant.from(values.stop);
+			fromTimeValue = startDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
+			toTimeValue = stopDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
+			date = startDate.toZonedDateTimeISO(currentTimeZone).toPlainDate().toString();
+		}
+	};
+</script>
+
+<div class="grid gap-xs">
+    <div class="col-4">
+        <label for="date"
+               class="form-label margin-bottom-xxs">Date</label>
+        <input type="date"
+               id="date"
+               class="form-control width-100%"
+               bind:value={date}>
+        {#if dateError}
+            <small class="color-error">{dateError}</small>
+        {/if}
+    </div>
+    <div class="col-4">
+        <label for="from"
+               class="form-label margin-bottom-xxs">From</label>
+        <input id="from"
+               class="form-control width-100%"
+               pattern="[0-9][0-9]:[0-9][0-9]"
+               type="time"
+               bind:value={fromTimeValue}
+               on:input={handle_from_time_changed}
+        />
+        {#if fromTimeError}
+            <small class="color-error">{fromTimeError}</small>
+        {/if}
+    </div>
+    <div class="col-4">
+        <label for="to"
+               class="form-label margin-bottom-xxs">To</label>
+        <input id="to"
+               class="form-control  width-100%"
+               pattern="[0-9][0-9]:[0-9][0-9]"
+               type="time"
+               bind:value={toTimeValue}
+               on:input={handle_to_time_changed}
+        />
+        {#if toTimeError}
+            <small class="color-error">{toTimeError}</small>
+        {/if}
+    </div>
+</div>
-- 
cgit v1.3