Flesh out the start of the site list

ts/components/ReviewSiteColumnList.vue

@@ -1,12 +1,56 @@
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.entry-item {
+	padding: 15px;
+	border-bottom: 1px solid #e9ecef;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.entry-item:hover {
+	background-color: #f8f9fa;
+}
+
+.entry-item.active {
+	background-color: #e7f3ff;
+	border-left: 4px solid #0d6efd;
+}
+</style>
 <template>
-	<p>list</p>
+	<div class="p-3 border-bottom bg-primary text-white">
+		<h5 class="mb-0"><i class="bi bi-list-ul"></i> Sites</h5>
+	</div>
+	<div
+		v-for="site in sites"
+		:key="site.id"
+		class="entry-item"
+		:class="{ active: selectedSite?.id === site.id }"
+		@click="doClick(site)"
+	>
+		<div class="d-flex justify-content-between align-items-start">
+			<div>
+				<i class="bi bi-droplet"></i>
+				<strong>Pool {{ site.id }}</strong>
+			</div>
+			<small class="text-muted">{{ site.created }}</small>
+		</div>
+		<small class="text-muted d-block mt-1">
+			{{ formatAddress(site.address) }}
+		</small>
+	</div>
 </template>
 <script setup lang="ts">
+import { Site } from "@/type/api";
+import { formatAddress } from "@/format";
 interface Emits {
 	(e: "doSelectTask", id: number): void;
 }
-interface Props {}
+interface Props {
+	selectedSite: Site | undefined;
+	sites: Site[];
+}
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
+function doClick(site: Site) {
+	console.log("click", site);
+}
 </script>

ts/router.ts

@@ -24,6 +24,7 @@ import Operations from "./view/Operations.vue";
 import Planning from "./view/Planning.vue";
 import ReviewPool from "./view/review/Pool.vue";
 import ReviewRoot from "./view/review/Root.vue";
+import ReviewSite from "./view/review/Site.vue";
 import Signin from "./view/Signin.vue";
 import Sudo from "./view/Sudo.vue";
 import apiClient from "@/client";

ts/view/review/Site.vue

@@ -1,4 +1,4 @@
-<style scoped>
+<style scoped lang="scss">
 body {
 	background-color: #f5f5f5;
 }
@@ -24,44 +24,16 @@ body {
 	border-left: 1px solid #dee2e6;
 	padding: 20px;
 }
-.placeholder-box {
-	background-color: #e9ecef;
-	border: 2px dashed #adb5bd;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #6c757d;
-	font-size: 18px;
-	margin-bottom: 20px;
-}
-
-.map-placeholder {
-	height: 300px;
-}
-
-.image-placeholder {
-	height: 400px;
-}
-
-.action-btn {
-	width: 100%;
-	margin-bottom: 10px;
-	padding: 12px;
-	font-size: 16px;
-}
-
-.status-badge {
-	font-size: 11px;
-}
-
-.map-container {
-	margin-bottom: 20px;
-}
 </style>
 <template>
 	<ThreeColumn>
 		<template #left>
-			<ReviewSiteColumnList />
+			<ReviewSiteColumnList
+				@doDeselectSite="siteDeselect"
+				@doSelectSite="siteSelect"
+				:selectedSite="selectedSite"
+				:sites="storeSite.all()"
+			/>
 		</template>
 		<template #center>
 			<ReviewSiteColumnDetail />
@@ -83,7 +55,7 @@ import ReviewSiteColumnDetail from "@/components/ReviewSiteColumnDetail.vue";
 import ReviewSiteColumnList from "@/components/ReviewSiteColumnList.vue";
 import { formatAddress } from "@/format";
 import type { Changes } from "@/types";
-import { Bounds, Contact, Location, ReviewTask } from "@/type/api";
+import { Bounds, Contact, Location, Site } from "@/type/api";
 import { Camera } from "@/type/map";
 import { MapClickEvent, Marker } from "@/types";
 
@@ -93,6 +65,29 @@ interface Props {}
 const props = withDefaults(defineProps<Props>(), {});
 
 const storeSite = useStoreSite();
+const selectedSiteID = ref<number>(0);
+const selectedSite = computed((): Site | undefined => {
+	if (!selectedSiteID.value) {
+		return undefined;
+	}
+	return storeSite.byID(selectedSiteID.value);
+});
+function siteDeselect(id: number): void {
+	if (selectedSiteID.value == id) {
+		selectedSiteID.value = 0;
+	}
+}
+function siteSelect(id: number): void {
+	selectedSiteID.value = id;
+
+	const site = storeSite.byID(id);
+	if (!site) {
+		console.log("no site", id);
+		return;
+	}
+	console.log("selecting site", id, site);
+}
+
 // Lifecycle
 onMounted(async () => {
 	storeSite.fetchAll();