From d4165ec2d0f323d500b23746e70feca981472d03 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sun, 22 Mar 2026 07:16:42 +0000
Subject: [PATCH] Fix display of image modal, start work on fixing marking
 things

---
 ts/components/CommunicationColumnAction.vue |  43 +++------
 ts/components/CommunicationColumnDetail.vue |   9 +-
 ts/components/PhotoViewerModal.vue          |  29 ++++--
 ts/view/Communication.vue                   | 100 ++++++++++++--------
 4 files changed, 107 insertions(+), 74 deletions(-)

diff --git a/ts/components/CommunicationColumnAction.vue b/ts/components/CommunicationColumnAction.vue
index 773b0ef5..7248b91f 100644
--- a/ts/components/CommunicationColumnAction.vue
+++ b/ts/components/CommunicationColumnAction.vue
@@ -29,7 +29,7 @@
 				<div class="p-3 flex-grow-1">
 					<!-- Create Signal -->
 					<div class="d-grid mb-3">
-						<button class="btn btn-success btn-lg" @click="createSignal()">
+						<button class="btn btn-success btn-lg" @click="markSignal()">
 							<i class="bi bi-plus-circle me-2"></i>Mark Signal
 						</button>
 						<small class="text-muted mt-1">This report is useful signal</small>
@@ -143,11 +143,17 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+interface Emits {
+	(e: "markSignal"): void;
+	(e: "markInvalid"): void;
+	(e: "sendMessage", message: string): void;
+}
 interface Props {
 	loading: boolean;
 	selectedCommunication: Communication | null;
 	user: User | null;
 }
+const emit = defineEmits<Emits>();
 
 const messageText = ref("");
 const props = withDefaults(defineProps<Props>(), {});
@@ -166,32 +172,13 @@ function applyMessageTemplate(template) {
 function formatDate(date) {
 	return new Date(date).toLocaleString();
 }
-
-async function sendMessage() {
-	if (!messageText.value.trim()) return;
-
-	console.log("Sending message reporter:", messageText.value);
-
-	const payload = {
-		message: messageText.value,
-		reportID: selectedCommunication.value.id,
-	};
-	const response = await fetch(`${apiBase.value}/publicreport/message`, {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-		},
-		body: JSON.stringify(payload),
-	});
-
-	if (!response.ok) {
-		throw new Error(`HTTP error! status: ${response.status}`);
-	}
-
-	showNotification(
-		"Message Sent",
-		`Message successfully sent to ${selectedCommunication.value.public_report.reporter.name}`,
-	);
-	messageText.value = "";
+function markInvalid() {
+	emit("markInvalid");
+}
+function markSignal() {
+	emit("markSignal");
+}
+function sendMessage() {
+	emit("sendMessage", messageText.value);
 }
 </script>
diff --git a/ts/components/CommunicationColumnDetail.vue b/ts/components/CommunicationColumnDetail.vue
index dc6e0e51..72566ea1 100644
--- a/ts/components/CommunicationColumnDetail.vue
+++ b/ts/components/CommunicationColumnDetail.vue
@@ -334,7 +334,7 @@
 					</div>
 				</div>
 
-				<!-- Photos Section -->
+				<!-- Images Section -->
 				<div class="card">
 					<div
 						class="card-header d-flex justify-content-between align-items-center"
@@ -384,12 +384,16 @@ import { computed } from "vue";
 import MapMultipoint from "../components/MapMultipoint.vue";
 import TimeRelative from "../components/TimeRelative.vue";
 
+interface Emits {
+	(e: "viewImage", index: int): void;
+}
 interface Props {
 	loading: boolean;
 	selectedCommunication: Communication | null;
 	user: User | null;
 }
 
+const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
 const nuisance = computed(() => {
 	return props.selectedCommunication?.value?.public_report?.nuisance || null;
@@ -404,4 +408,7 @@ function formatAddress(a) {
 	}
 	return `${a.number} ${a.street}, ${a.locality}`;
 }
+function openPhotoViewer(index) {
+	emit("viewImage", index);
+}
 </script>
diff --git a/ts/components/PhotoViewerModal.vue b/ts/components/PhotoViewerModal.vue
index c66bce95..903284a2 100644
--- a/ts/components/PhotoViewerModal.vue
+++ b/ts/components/PhotoViewerModal.vue
@@ -72,19 +72,14 @@
 				<div class="modal-footer justify-content-between">
 					<button
 						class="btn btn-outline-secondary"
-						@click="currentPhotoIndex = Math.max(0, currentPhotoIndex - 1)"
+						@click="emit('imagePrevious')"
 						:disabled="currentPhotoIndex === 0"
 					>
 						<i class="bi bi-chevron-left"></i> Previous
 					</button>
 					<button
 						class="btn btn-outline-secondary"
-						@click="
-							currentPhotoIndex = Math.min(
-								images.length - 1,
-								currentPhotoIndex + 1,
-							)
-						"
+						@click="emit('imageNext')"
 						:disabled="currentPhotoIndex >= (images?.length || 1) - 1"
 					>
 						Next <i class="bi bi-chevron-right"></i>
@@ -101,10 +96,30 @@
 </template>
 
 <script setup lang="ts">
+interface Emits {
+	(e: "imageNext"): void;
+	(e: "imagePrevious"): void;
+}
 interface Props {
 	currentPhotoIndex: int | null;
 	images: Photo[] | null;
 	show: boolean;
 }
+const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
+function formatDistance(meters) {
+	if (meters === undefined || meters === null) {
+		return "unknown";
+	}
+	if (meters < 1) {
+		const mm = Math.round(meters * 1000);
+		return `${mm} mm`;
+	} else if (meters >= 1000) {
+		const km = Math.round(meters / 1000);
+		return `${km} km`;
+	} else {
+		const m = Math.round(meters);
+		return `${m} m`;
+	}
+}
 </script>
diff --git a/ts/view/Communication.vue b/ts/view/Communication.vue
index 950129e9..fb20b0fa 100644
--- a/ts/view/Communication.vue
+++ b/ts/view/Communication.vue
@@ -15,17 +15,23 @@
 				:loading="loading"
 				:selectedCommunication="selectedCommunication"
 				:user="user"
+				@viewImage="openPhotoViewer"
 			/>
 		</template>
 		<template #right>
 			<CommunicationColumnAction
 				:loading="loading"
+				@markInvalid="markInvalid"
+				@markSignal="markSignal"
+				@sendMessage="sendMessage"
 				:selectedCommunication="selectedCommunication"
 				:user="user"
 			/>
 		</template>
 	</ThreeColumn>
 	<PhotoViewerModal
+		@imageNext="imageNext()"
+		@imagePrevious="imagePrevious()"
 		:images="currentImages"
 		:currentPhotoIndex="currentPhotoIndex"
 		:show="showPhotoModal"
@@ -57,7 +63,6 @@ onMounted(() => {
 });
 
 // Refs
-const apiBase = ref("/api");
 const showPhotoModal = ref(false);
 const selectedId = ref<string | null>(null);
 const currentPhotoIndex = ref(0);
@@ -104,22 +109,15 @@ async function fetchCommunications() {
 		}
 	}
 }
-function formatDistance(meters) {
-	if (meters === undefined || meters === null) {
-		return "unknown";
-	}
-	if (meters < 1) {
-		const mm = Math.round(meters * 1000);
-		return `${mm} mm`;
-	} else if (meters >= 1000) {
-		const km = Math.round(meters / 1000);
-		return `${km} km`;
-	} else {
-		const m = Math.round(meters);
-		return `${m} m`;
-	}
+function imageNext() {
+	currentPhotoIndex.value = Math.min(
+		currentImages.value.length - 1,
+		currentPhotoIndex.value + 1,
+	);
+}
+function imagePrevious() {
+	currentPhotoIndex.value = Math.max(0, currentPhotoIndex.value - 1);
 }
-
 async function loadFromAPI() {
 	loading.value = true;
 	error.value = null;
@@ -138,7 +136,28 @@ function openPhotoViewer(index) {
 	showPhotoModal.value = true;
 }
 
-async function createSignal() {
+async function markInvalid() {
+	console.log("Marking report as invalid:", selectedCommunication.value.id);
+	const payload = {
+		reportID: selectedCommunication.value.id,
+	};
+	const response = await fetch("api/publicreport/invalid", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify(payload),
+	});
+
+	showNotification(
+		"Report Marked Invalid",
+		`Report #${selectedCommunication.value.id} has been marked as invalid`,
+	);
+	removeCurrentFromList();
+	await fetchCommunications();
+}
+
+async function markSignal() {
 	console.log("Marking report as signal:", selectedCommunication.value.id);
 	try {
 		const report_id = selectedCommunication.value.id;
@@ -167,27 +186,6 @@ async function createSignal() {
 	}
 }
 
-async function markInvalid() {
-	console.log("Marking report as invalid:", selectedCommunication.value.id);
-	const payload = {
-		reportID: selectedCommunication.value.id,
-	};
-	const response = await fetch("api/publicreport/invalid", {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-		},
-		body: JSON.stringify(payload),
-	});
-
-	showNotification(
-		"Report Marked Invalid",
-		`Report #${selectedCommunication.value.id} has been marked as invalid`,
-	);
-	removeCurrentFromList();
-	await fetchCommunications();
-}
-
 function removeCurrentFromList() {
 	const index = communication.all.findIndex((c) => c.id === selectedId.value);
 	if (index > -1) {
@@ -200,7 +198,33 @@ function removeCurrentFromList() {
 		selectedId.value = null;
 	}
 }
+async function sendMessage(message: string) {
+	if (!message.trim()) return;
 
+	console.log("Sending message reporter:", message.value);
+
+	const payload = {
+		message: message.value,
+		reportID: selectedCommunication.value.id,
+	};
+	const response = await fetch(user.urls.api.publicreport_message, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify(payload),
+	});
+
+	if (!response.ok) {
+		throw new Error(`HTTP error! status: ${response.status}`);
+	}
+
+	showNotification(
+		"Message Sent",
+		`Message successfully sent to ${selectedCommunication.value.public_report.reporter.name}`,
+	);
+	messageText.value = "";
+}
 function showNotification(title, message) {
 	toastTitle.value = title;
 	toastMessage.value = message;