Move luxon dependency to npm

thrimbletrimmer/package.json

@@ -16,9 +16,11 @@
 		"typescript": "5.6.3",
 		"url": "0.11.4",
 		"vite": "5.4.10",
-		"vite-plugin-solid": "2.10.2"
+		"vite-plugin-solid": "2.10.2",
+		"@types/luxon": "3.4.2"
 	},
 	"dependencies": {
+		"luxon": "3.4.4",
 		"solid-js": "1.9.3"
 	}
 }

thrimbletrimmer/src/common/convertTime.tsx

@@ -1,5 +1,4 @@
-import { l } from "vite/dist/node/types.d-aGj9QkWt";
+import { DateTime } from "luxon";
-import { DateTime } from "../external/luxon.min";
 
 export function dateTimeFromWubloaderTime(wubloaderTime: string): DateTime | null {
 	const dt = DateTime.fromISO(wubloaderTime, { zone: "UTC" });
@@ -86,7 +85,7 @@ export function timeAgoFromDateTime(dateTime: DateTime): string {
 		timeAgoSeconds = -timeAgoSeconds;
 	}
 
-	const seconds = (((timeAgoSeconds % 60) * 1000) | 0) / 1000
+	const seconds = (((timeAgoSeconds % 60) * 1000) | 0) / 1000;
 	const secondsString = seconds < 10 ? `0${seconds}` : seconds.toString();
 	const minutes = (timeAgoSeconds / 60) % 60 | 0;
 	const minutesString = minutes < 10 ? `0${minutes}` : minutes.toString();

thrimbletrimmer/src/common/googleAuth.tsx

@@ -20,7 +20,7 @@ async function googleSignOut() {
 	if (googleUser) {
 		googleUser = null;
 		await gapi.auth2.getAuthInstance().signOut();
-		
+
 		const signInElem = document.getElementById("google-auth-sign-in");
 		if (signInElem) {
 			signInElem.classList.add("hidden");
@@ -40,7 +40,9 @@ export const GoogleSignIn: Component = () => {
 	return (
 		<div>
 			<div id="google-auth-sign-in" class="g-signin2" data-onsuccess="googleOnSignIn"></div>
-			<a href="javascript:googleSignOut" id="google-auth-sign-out" class="hidden">Sign Out of Google Account</a>
+			<a href="javascript:googleSignOut" id="google-auth-sign-out" class="hidden">
+				Sign Out of Google Account
+			</a>
 		</div>
 	);
-};
+};

thrimbletrimmer/src/globalStyle.scss

@@ -1,3 +1,3 @@
 .hidden {
 	display: none;
-}
+}

thrimbletrimmer/src/thumbnails/ThumbnailManager.module.scss

@@ -44,4 +44,4 @@
 
 .newTemplateMidText {
 	margin: 2px;
-}
+}

thrimbletrimmer/src/thumbnails/ThumbnailManager.tsx

@@ -41,13 +41,19 @@ const ThumbnailManager: Component = () => {
 				cropStart: cropStart,
 				cropEnd: cropEnd,
 				locationStart: locationStart,
-				locationEnd: locationEnd
+				locationEnd: locationEnd,
 			});
 		}
 		setTemplates(templateList);
 	});
 
-	const submitHandler = async (origName: string, noImageIsError: boolean, errorList: Accessor<string[]>, setErrorList: Setter<string[]>, event: SubmitEvent): Promise<Template | null> => {
+	const submitHandler = async (
+		origName: string,
+		noImageIsError: boolean,
+		errorList: Accessor<string[]>,
+		setErrorList: Setter<string[]>,
+		event: SubmitEvent,
+	): Promise<Template | null> => {
 		setErrorList([]);
 
 		const form = event.currentTarget as HTMLFormElement;
@@ -67,7 +73,16 @@ const ThumbnailManager: Component = () => {
 		const locEndX = parseInt(formData.get("locendx") as string, 10);
 		const locEndY = parseInt(formData.get("locendy") as string, 10);
 
-		if (isNaN(cropStartX) || isNaN(cropStartY) || isNaN(cropEndX) || isNaN(cropEndY) || isNaN(locStartX) || isNaN(locStartY) || isNaN(locEndX) || isNaN(locEndY)) {
+		if (
+			isNaN(cropStartX) ||
+			isNaN(cropStartY) ||
+			isNaN(cropEndX) ||
+			isNaN(cropEndY) ||
+			isNaN(locStartX) ||
+			isNaN(locStartY) ||
+			isNaN(locEndX) ||
+			isNaN(locEndY)
+		) {
 			setErrorList((errors) => {
 				errors.push("All crop and location information must be entered.");
 				return errors;
@@ -108,12 +123,15 @@ const ThumbnailManager: Component = () => {
 			return null;
 		}
 
-		const submitURL = (origName === "") ? "/thrimshim/add-template" : `/thrimshim/update-template/${encodeURIComponent(origName)}`;
+		const submitURL =
+			origName === ""
+				? "/thrimshim/add-template"
+				: `/thrimshim/update-template/${encodeURIComponent(origName)}`;
 		const submitDataJSON = JSON.stringify(Object.fromEntries(submitData));
 		const submitResponse = await fetch(submitURL, {
 			method: "POST",
 			body: submitDataJSON,
-			headers: { "Content-Type": "application/json" }
+			headers: { "Content-Type": "application/json" },
 		});
 		if (!submitResponse.ok) {
 			const errorText = await submitResponse.text();
@@ -132,7 +150,7 @@ const ThumbnailManager: Component = () => {
 			cropStart: { x: cropStartX, y: cropStartY },
 			cropEnd: { x: cropEndX, y: cropEndY },
 			locationStart: { x: locStartX, y: locStartY },
-			locationEnd: { x: locEndX, y: locEndY }
+			locationEnd: { x: locEndX, y: locEndY },
 		};
 	};
 
@@ -158,7 +176,13 @@ const ThumbnailManager: Component = () => {
 							<form
 								class={styles.templatesListRow}
 								onSubmit={async (event) => {
-									const submitData = await submitHandler(template().name, false, formErrors, setFormErrors, event);
+									const submitData = await submitHandler(
+										template().name,
+										false,
+										formErrors,
+										setFormErrors,
+										event,
+									);
 									if (submitData) {
 										setTemplates((templateList) => {
 											templateList[index] = submitData;
@@ -175,39 +199,30 @@ const ThumbnailManager: Component = () => {
 											<div>{template().description}</div>
 											<div>{template().attribution}</div>
 											<div>
-												({template().cropStart.x}, {template().cropStart.y})
+												({template().cropStart.x}, {template().cropStart.y}) to (
-												to
+												{template().cropEnd.x}, {template().cropEnd.y})
-												({template().cropEnd.x}, {template().cropEnd.y})
 											</div>
 											<div>
-												({template().locationStart.x}, {template().locationStart.y})
+												({template().locationStart.x}, {template().locationStart.y}) to (
-												to
+												{template().locationEnd.x}, {template().locationEnd.y})
-												({template().locationEnd.x}, {template().locationEnd.y})
 											</div>
 											<div>
 												<Show
 													when={displayImagePreview()}
 													fallback={
-														<a
+														<a href="#" onClick={(event) => setDisplayImagePreview(true)}>
-															href="#"
-															onClick={
-																(event) => setDisplayImagePreview(true)
-															}
-														>
 															Preview
 														</a>
 													}
 												>
-													<img class={styles.templateImagePreview} src={`/thrimshim/template/${encodeURIComponent(template().name)}.png`} />
+													<img
+														class={styles.templateImagePreview}
+														src={`/thrimshim/template/${encodeURIComponent(template().name)}.png`}
+													/>
 												</Show>
 											</div>
 											<div>
-												<button
+												<button type="button" onClick={(event) => setEditing(true)}>
-													type="button"
-													onClick={
-														(event) => setEditing(true)
-													}
-												>
 													Edit
 												</button>
 											</div>
@@ -226,28 +241,92 @@ const ThumbnailManager: Component = () => {
 										</div>
 										<div>
 											(
-											<input type="number" name="cropstartx" placeholder="X" min={0} step={1} class={styles.templateCoord} value={template().cropStart.x} />
+											<input
+												type="number"
+												name="cropstartx"
+												placeholder="X"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().cropStart.x}
+											/>
 											,
-											<input type="number" name="cropstarty" placeholder="Y" min={0} step={1} class={styles.templateCoord} value={template().cropStart.y} />
+											<input
+												type="number"
+												name="cropstarty"
+												placeholder="Y"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().cropStart.y}
+											/>
 											)
 											<br />
 											(
-											<input type="number" name="cropendx" placeholder="X" min={0} step={1} class={styles.templateCoord} value={template().cropEnd.x} />
+											<input
+												type="number"
+												name="cropendx"
+												placeholder="X"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().cropEnd.x}
+											/>
 											,
-											<input type="number" name="cropendy" placeholder="Y" min={0} step={1} class={styles.templateCoord} value={template().cropEnd.y} />
+											<input
+												type="number"
+												name="cropendy"
+												placeholder="Y"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().cropEnd.y}
+											/>
 											)
 										</div>
 										<div>
 											(
-											<input type="number" name="locstartx" placeholder="X" min={0} step={1} class={styles.templateCoord} value={template().locationStart.x} />
+											<input
+												type="number"
+												name="locstartx"
+												placeholder="X"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().locationStart.x}
+											/>
 											,
-											<input type="number" name="locstarty" placeholder="Y" min={0} step={1} class={styles.templateCoord} value={template().locationStart.y} />
+											<input
+												type="number"
+												name="locstarty"
+												placeholder="Y"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().locationStart.y}
+											/>
 											)
 											<br />
 											(
-											<input type="number" name="locendx" placeholder="X" min={0} step={1} class={styles.templateCoord} value={template().locationEnd.x} />
+											<input
+												type="number"
+												name="locendx"
+												placeholder="X"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().locationEnd.x}
+											/>
 											,
-											<input type="number" name="locendy" placeholder="Y" min={0} step={1} class={styles.templateCoord} value={template().locationEnd.y} />
+											<input
+												type="number"
+												name="locendy"
+												placeholder="Y"
+												min={0}
+												step={1}
+												class={styles.templateCoord}
+												value={template().locationEnd.y}
+											/>
 											)
 										</div>
 										<div>
@@ -270,7 +349,13 @@ const ThumbnailManager: Component = () => {
 			</div>
 			<form
 				onSubmit={async (event) => {
-					const submitData = await submitHandler("", true, newTemplateErrors, setNewTemplateErrors, event);
+					const submitData = await submitHandler(
+						"",
+						true,
+						newTemplateErrors,
+						setNewTemplateErrors,
+						event,
+					);
 					if (submitData) {
 						setTemplates((templateList) => [...templateList, submitData]);
 					}

thrimbletrimmer/src/utilities/Clock.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, createSignal, onCleanup, onMount } from "solid-js";
-import { DateTime, Interval } from "../external/luxon.min";
+import { DateTime, Interval } from "luxon";
 
 interface ClockProps {
 	busStartTime: Accessor<DateTime | null>;

thrimbletrimmer/src/utilities/TimeConverter.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, createSignal } from "solid-js";
-import { DateTime } from "../external/luxon.min";
+import { DateTime } from "luxon";
 import {
 	dateTimeFromWubloaderTime,
 	dateTimeFromBusTime,

thrimbletrimmer/src/utilities/Utilities.tsx

@@ -1,5 +1,5 @@
 import { Component, createSignal, onMount } from "solid-js";
-import { DateTime } from "../external/luxon.min";
+import { DateTime } from "luxon";
 import Clock from "./Clock";
 import TimeConverter from "./TimeConverter";