intermediate: sync

src/stores/admin/operation/connection.ts

@@ -7,10 +7,11 @@ export const useConnectionStore = defineStore("connection", {
   state: () => {
     return {
       connection: undefined as undefined | Socket,
+      connected: false as boolean,
     };
   },
   getters: {
-    connectionStatus: (state) => !!state.connection,
+    connectionStatus: (state) => state.connected,
   },
   actions: {
     connectClient(): void {
@@ -27,16 +28,21 @@ export const useConnectionStore = defineStore("connection", {
       });
 
       this.connection.on("connect", () => {
+        this.connected = true;
         notificationStore.push("Socket-Erfolg", `Verbindung aufgebaut`, "success");
       });
       this.connection.on("connect_error", (err) => {
+        this.connected = false;
         this.handleError(err, true);
       });
       this.connection.on("disconnecting", () => {
+        this.connected = false;
         this.connection?.disconnect();
       });
       this.connection.on("disconnect", () => {
+        this.connected = false;
         this.$reset();
+        this.connectClient();
       });
       this.connection.on("warning", (msg: string) => {
         notificationStore.push("Socket-Warnung", msg, "warning");

src/stores/admin/operation/missionDetail.ts

@@ -6,12 +6,11 @@ import { computed, ref } from "vue";
 
 export const useMissionDetailStore = defineStore("missionDetail", () => {
   const connectionStore = useConnectionStore();
+  const initialized = ref(false);
 
   const ydoc = ref(new Y.Doc());
   const awareness = ref(new Awareness(ydoc.value));
 
-  const editor = ref(ydoc.value.getText("editor"));
-
   const title = computed({
     get() {
       return ydoc.value.getMap("form").get("title") ?? "";
@@ -20,30 +19,35 @@ export const useMissionDetailStore = defineStore("missionDetail", () => {
       ydoc.value.getMap("form").set("title", val);
     },
   });
+  const editor = ref(ydoc.value.getText("editor"));
 
   function init(missionId: string) {
-    connectionStore.connection?.on("package-sync", (update) => {
-      Y.applyUpdate(ydoc.value, new Uint8Array(update));
-    });
-
-    connectionStore.connection?.on("package-mission", (initial) => {
-      Y.applyUpdate(ydoc.value, new Uint8Array(initial));
-    });
-
-    connectionStore.connection?.emit("mission:join", missionId);
-  }
-  function destroy() {
-    connectionStore?.connection?.emit("mission:leave");
+    if (!connectionStore.connection) return;
 
     ydoc.value = new Y.Doc();
     awareness.value = new Awareness(ydoc.value);
     editor.value = ydoc.value.getText("editor");
+    ydoc.value.on("update", (update) => {
+      connectionStore.connection?.emit("mission:sync", Array.from(update));
+    });
+
+    connectionStore.connection.on("package-sync", (update) => {
+      Y.applyUpdate(ydoc.value, new Uint8Array(update));
+    });
+
+    connectionStore.connection.on("package-mission", (initial) => {
+      Y.applyUpdate(ydoc.value, new Uint8Array(initial));
+    });
+
+    connectionStore.connection.emit("mission:join", missionId, initialized.value);
+    initialized.value = true;
+  }
+  function destroy() {
+    connectionStore.connection?.emit("mission:leave");
+
+    connectionStore.connection?.off("package-mission");
+    connectionStore.connection?.off("package-sync");
   }
 
-  ydoc.value.on("update", (update) => {
-    console.log(connectionStore.connection);
-    connectionStore.connection?.emit("mission:sync", Array.from(update));
-  });
-
-  return { ydoc, awareness, editor, title, init, destroy };
+  return { ydoc, awareness, title, editor, init, destroy };
 });

src/views/admin/operation/mission/MissionDetail.vue

@@ -10,12 +10,12 @@
     </div>
     <div class="flex flex-col sm:flex-row gap-2">
       <div class="grow">
-        <label for="title">Einsatzbeginn</label>
-        <input type="datetime-local" id="title" />
+        <label for="start">Einsatzbeginn</label>
+        <input type="datetime-local" id="start" />
       </div>
       <div class="grow">
-        <label for="title">Einsatzende</label>
-        <input type="datetime-local" id="title" />
+        <label for="end">Einsatzende</label>
+        <input type="datetime-local" id="end" />
       </div>
       <div class="w-full sm:w-fit min-w-fit">
         <p>Dauer</p>
@@ -27,11 +27,11 @@
       </div>
     </div>
     <div>
-      <label for="title">Stichwort</label>
-      <input type="text" id="title" />
+      <label for="mission_short">Stichwort</label>
+      <input type="text" id="mission_short" />
     </div>
     <div>
-      <label for="title">Einsatzort</label>
+      <label for="location">Einsatzort</label>
       <input type="text" id="title" />
     </div>
     <div>
@@ -40,12 +40,12 @@
     </div>
     <div class="flex flex-col sm:flex-row gap-2">
       <div class="w-full">
-        <label for="title">Anzahl getretteter Personen</label>
-        <input type="number" id="title" value="0" />
+        <label for="rescued">Anzahl getretteter Personen</label>
+        <input type="number" id="rescued" value="0" />
       </div>
       <div class="w-full">
-        <label for="title">Anzahl geborgener Personen</label>
-        <input type="number" id="title" value="0" />
+        <label for="recovered">Anzahl geborgener Personen</label>
+        <input type="number" id="recovered" value="0" />
       </div>
     </div>
     <div class="flex flex-col">
@@ -72,9 +72,6 @@
       <p>Kontaktdaten</p>
     </div>
   </div>
-  <!-- <div class="flex flex-row gap-4">
-    <button primary class="!w-fit">Knopf</button>
-  </div> -->
 </template>
 
 <script setup lang="ts">

src/views/admin/operation/mission/MissionOverview.vue

@@ -71,7 +71,6 @@ export default defineComponent({
     },
     connectionStatus() {
       if (this.connectionStatus) {
-        console.log("hi");
         this.init(this.id);
       }
     },
@@ -85,6 +84,7 @@ export default defineComponent({
   mounted() {
     this.manageHash();
     this.connectClient();
+    this.init(this.id);
     this.getAvailableForces();
   },
   beforeUnmount() {