Fix display of image modal, start work on fixing marking things

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>

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>

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>