prototype report page

2025-12-28 14:38:06 -07:00
parent 49bbe281df
commit 051cf1da5d
13 changed files with 330 additions and 17 deletions
@@ -0,0 +1,16 @@
+<nav>
+	<ul>
+		<li>
+			<a href="{{ buildSitePath }}">
+				Home
+			</a>
+		</li>
+
+		<li>
+			<a href="{{ buildSitePath "reports" }}">
+				Reports
+			</a>
+		</li>
+	</ul>
+</nav>
+
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>WIP</title>
+
+		<link rel="stylesheet" href="/site/styles/index.css">
+
+		<script src="/site/scripts/htmx.min.js.gz"></script>
+		<script src="/site/scripts/_hyperscript.min.js.gz"></script>
+
+		{{/* This is where the page_head template will be inserted into the page */}}
+		{{- block "head" . }}{{ end }}
+	</head>
+
+	<body>
+		{{/* This is where the page_body template will be inserted into the page */}}
+        {{- block "body" . }}{{ end }}
+	</body>
+</html>
@@ -0,0 +1,3 @@
+{{ componentBody "nav_bar" }}
+
+<h1>Home</h1>
@@ -0,0 +1,89 @@
+{{ componentBody "nav_bar" }}
+
+{{ $storeID := .Request.URL.Query.Get "store-id" }}
+
+<h1>Reports</h1>
+
+<main>
+	<select
+		_='
+			on change
+				make a URL from window.location.href called currentURL
+				set currentQuery to searchParams of currentURL
+				set storeID to event.target.value
+				js(currentQuery, storeID) currentQuery.set("store-id", storeID) end
+				set search of currentURL to currentQuery.toString()
+				set window.location to currentURL
+		'
+	>
+		{{ if not $storeID }}
+		<option selected disabled>
+			choose a store
+		</option>
+		{{ end }}
+		<option {{ if eq $storeID "test-store-1" }}selected{{ end }} >
+			test-store-1
+		</option>
+		<option {{ if eq $storeID "test-store-2" }}selected{{ end }} >
+			test-store-2
+		</option>
+		<option {{ if eq $storeID "test-store-3" }}selected{{ end }} >
+			test-store-3
+		</option>
+	</select>
+
+	{{- if $storeID }}
+		<section
+			style="
+				display: grid;
+				grid-template-columns: auto auto auto 1fr;
+				column-gap: 1em;
+				row-gap: 0.5em;
+				margin: 1em 0;
+			"
+		>
+			<div style="border-bottom: solid black 1px;">
+				Date
+			</div>
+			<div style="border-bottom: solid black 1px;">
+				Time
+			</div>
+			<div style="border-bottom: solid black 1px;">
+				ID
+			</div>
+			<div style="border-bottom: solid black 1px;">
+				Payload
+			</div>
+			{{ $events := .RawEvents.LoadEventsForStore "etsy" $storeID }}
+			{{ range $e := $events }}
+				<div>
+					{{ printf "%d/%02d/%02d" $e.EventTimestamp.Year $e.EventTimestamp.Month $e.EventTimestamp.Day }}
+				</div>
+				<div>
+					{{ $suffix := "am" }}
+					{{ $ts := $e.EventTimestamp }}
+					{{- $hr := $ts.Hour }}
+					{{- if eq $hr 0 }}
+						{{- $hr = 12 }}
+					{{- else if eq $hr 12 }}
+						{{- $suffix = "pm" }}
+					{{- else if gt $hr 12 }}
+						{{- $hr = subInt $hr 12 }}
+						{{- $suffix = "pm" }}
+					{{- end }}
+
+					{{- $hrColorHex := multInt $hr 10 | subInt (subInt 256 128) | printf "%02x" }}
+					{{- $minColorHex := multInt $ts.Minute 2 | subInt (subInt 256 128) | printf "%02x" }}
+					{{- $secColorHex := multInt $ts.Second 2 | subInt (subInt 256 128) | printf "%02x" }}
+					<span style="color: #{{ $hrColorHex }}{{ $hrColorHex }}{{ $hrColorHex }};">{{ printf "%02d" $hr }}</span>:<span style="color: #{{ $minColorHex }}{{ $minColorHex }}{{ $minColorHex }};">{{ printf "%02d" $ts.Minute }}</span>:<span style="color: #{{ $secColorHex }}{{ $secColorHex }}{{ $secColorHex }};">{{ printf "%02d" $ts.Second }}</span>{{ printf " %s" $suffix }}
+				</div>
+				<div>
+					{{ $e.EventID }}
+				</div>
+				<div>
+					{{ prettyPrintJSON $e.Payload }}
+				</div>
+			{{ end }}
+		</section>
+	{{- end }}
+</main>