Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Eli Ribble 2026-03-22 07:16:42 +00:00
parent 82ecf0f5d1
commit d4165ec2d0
No known key found for this signature in database
4 changed files with 107 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ts/components/CommunicationColumnAction.vue
View file

@ -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>

9
ts/components/CommunicationColumnDetail.vue
View file

@ -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>

29
ts/components/PhotoViewerModal.vue
View file

@ -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>

100
ts/view/Communication.vue
View file

@ -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;