Rewrite the delete component, cleanup the store, add type

client/src/components/DeletePartyLines.vue

@@ -1,44 +1,41 @@
 <template>
-  <div>
-    <select v-model="selectedPartyLine" class="select select-bordered w-full max-w-xs">
-      <option v-if="!partyLines?.length" disabled selected value="">No party lines available</option>
-      <option v-if="partyLines?.length" disabled selected value="">Select a party line</option>
-      <option v-for="partyLine in partyLines" :key="partyLine" :value="partyLine">{{
-          partyLine
-        }}
-      </option>
-    </select>
-    <button class="btn btn-outline btn-error" @click="deletePartyLine" :disabled="!selectedPartyLine.length">Delete Party Line</button>
-    &nbsp;
-    <button class="btn btn-outline btn-info" @click="fetchPartyLines">Refresh List</button>
+  <button class="btn btn-outline btn-info" @click="partyLineStore.fetchPartyLines">Refresh List</button>
+
+  <div class="collapse bg-base-200" v-for="partyLine in partyLines" :key="partyLine.lastEvent">
+    <input type="radio" name="my-accordion-1"/>
+    <div class="collapse-title text-xl font-medium">{{ partyLine.name }}</div>
+    <div class="collapse-content">
+      <p>Last Event: {{ partyLine.lastEvent }}</p>
+      <p>Last Event: {{ new Date(partyLine.lastActivity).toLocaleString("en-GB") }}</p>
+      <br/>
+      Clients:
+      <ul>
+        <li v-for="client in partyLine.clients" :key="client.clientId">
+          Client ID: {{ client.clientId }} - IP Address: {{ client.ipAddress }}
+        </li>
+      </ul>
+      <br/>
+      <button class="btn btn-outline btn-error" @click="deletePartyLine(partyLine.name)">Delete
+        Party Line
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { usePartyLineStore } from '../stores/partyLine';
 import { storeToRefs } from "pinia";
 
 const partyLineStore = usePartyLineStore();
 const { partyLines } = storeToRefs(partyLineStore);
 
-const selectedPartyLine = ref('');
-
-const fetchPartyLines = async () => {
-  await partyLineStore.fetchPartyLines();
-};
-
-// Fetch party lines when component is mounted
 onMounted(async () => {
-  await fetchPartyLines();
+  await partyLineStore.fetchPartyLines();
 });
 
-const deletePartyLine = async () => {
-  if (selectedPartyLine.value) {
-    await partyLineStore.deletePartyLine(selectedPartyLine.value);
-    selectedPartyLine.value = ''; // Clear selection after deletion
-    await fetchPartyLines(); // Refresh the party lines after deletion
-  }
+const deletePartyLine = async (partyLine: string) => {
+  await partyLineStore.deletePartyLine(partyLine);
 };
 </script>
 

client/src/stores/partyLine.ts

@@ -2,13 +2,15 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { useGetServer } from "@/composables/useGetServer.ts";
 import { useSound } from '@vueuse/sound';
-import notification from '../../public/notification.mp3';
+import notification from '/notification.mp3';
+import type { PartyLine } from "@/types/partyLine.ts";
 
 export const usePartyLineStore = defineStore('partyLine', () => {
+
+    const partyLines = ref<PartyLine[]>([]);
     const partyLine = ref('');
     const rumor = ref('');
     const eventSource = ref<EventSource | null>(null);
-    const partyLines = ref<string[]>([]);
     const partyLineDeletedFlag = ref(false);
     const { play } = useSound(notification);
 
@@ -62,8 +64,7 @@ export const usePartyLineStore = defineStore('partyLine', () => {
     const fetchPartyLines = async () => {
         try {
             const response = await fetch(useGetServer() + '/partyLines');
-            const data = await response.json();
-            partyLines.value = data.allPartyLines;
+            partyLines.value = await response.json();
         } catch (error: any) {
             console.error('Error fetching party lines:', error);
         }

client/src/types/partyLine.ts

@@ -0,0 +1,11 @@
+export type PartyLine = {
+  name: string;
+  clients: Client[];
+  lastActivity: number;
+  lastEvent: string;
+}
+
+export type Client = {
+  clientId: string;
+  ipAddress: string;
+}

client/src/views/AdminView.vue

@@ -7,7 +7,7 @@ import CreatePartyLine from "@/components/CreatePartyLine.vue";
 <template>
   <div class="w-screen text-center grid grid-cols-1 grid-rows-3 gap-3">
     <CreatePartyLine/>
-    <DeletePartyLines/>
     <SendRumor/>
+    <DeletePartyLines/>
   </div>
 </template>