pedrocx486/rumor-party-line
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rewrite the delete component, cleanup the store, add type

Browse source
This commit is contained in:
pedrocx486 2025-01-31 01:33:17 -03:00
parent 0a62f2a0f3
commit f3b3611365
4 changed files with 41 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
client/src/components/DeletePartyLines.vue
View file

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

9
client/src/stores/partyLine.ts
View file

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

11
client/src/types/partyLine.ts Normal file
View file

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

2
client/src/views/AdminView.vue
View file

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