sync to server

src/main.ts

@@ -5,12 +5,16 @@ import App from "./App.vue";
 import router from "./router";
 import NProgress from "nprogress";
 import "../node_modules/nprogress/nprogress.css";
+import { Quill } from "@vueup/vue-quill";
+import QuillCursors from "quill-cursors";
 
 import { http } from "./serverCom";
 import "./main.css";
 
 NProgress.configure({ showSpinner: false });
 
+Quill.register("modules/cursors", QuillCursors);
+
 const app = createApp(App);
 
 app.use(createPinia());

src/stores/admin/operation/connection.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { io, type Socket } from "socket.io-client";
+import { io, Socket } from "socket.io-client";
 import { useNotificationStore } from "../../notification";
 import { refreshToken, url } from "../../../serverCom";
 
@@ -19,7 +19,8 @@ export const useConnectionStore = defineStore("connection", {
       this.connection?.disconnect();
       this.connection = io(url, {
         reconnection: true,
-        reconnectionDelayMax: 10000,
+        reconnectionDelayMax: 1000,
+        reconnectionAttempts: 1,
         auth: (cb) => {
           cb({ token: localStorage.getItem("accessToken") });
         },
@@ -46,18 +47,6 @@ export const useConnectionStore = defineStore("connection", {
           message: msg,
         });
       });
-      this.connection.on("reconnect", (attemptNumber) => {
-        notificationStore.push("Socket-Reconnect", `Reconnect erfolgreich`, "success");
-      });
-      this.connection.on("reconnect_attempt", (attemptNumber) => {
-        notificationStore.push("Socket-Reconnect-Versuch", `Reconnect-Versuch Nr.${attemptNumber}`, "info");
-      });
-      this.connection.on("reconnect_error", (error) => {
-        notificationStore.push("Socket-Warnung", "Reconnect fehlgeschlagen", "warning");
-      });
-      this.connection.on("reconnect_failed", () => {
-        notificationStore.push("Socket-Fehler", "Reconnect-Versuche erfolglos beendet", "error");
-      });
     },
     disconnectClient(): void {
       this.connection?.disconnect();
@@ -67,6 +56,11 @@ export const useConnectionStore = defineStore("connection", {
 
       if (err.message == "xhr poll error") {
         notificationStore.push("Socket-Netzwerk-Fehler", "Reconnect Versuch in 10s", "error");
+        this.disconnectClient();
+        setTimeout(() => {
+          console.log("hi");
+          this.connectClient();
+        }, 10000);
       } else if (err.message == "Token expired") {
         notificationStore.push("Session", "Session wird verlängert", "info");
         refreshToken()

src/stores/admin/operation/missionDetail.ts

@@ -4,79 +4,46 @@ import * as Y from "yjs";
 import { Awareness } from "y-protocols/awareness.js";
 import { computed, ref } from "vue";
 
-export const useMissionDetailStore = defineStore(
-  "missionDetail",
-  () => {
-    const connectionStore = useConnectionStore();
+export const useMissionDetailStore = defineStore("missionDetail", () => {
+  const connectionStore = useConnectionStore();
 
-    const ydoc = ref(new Y.Doc());
-    const awareness = ref(new Awareness(ydoc.value));
+  const ydoc = ref(new Y.Doc());
+  const awareness = ref(new Awareness(ydoc.value));
 
-    const editor = ref(ydoc.value.getText("editor"));
+  const editor = ref(ydoc.value.getText("editor"));
 
-    const title = computed({
-      get() {
-        return ydoc.value.getMap("form").get("title") ?? "";
-      },
-      set(val) {
-        ydoc.value.getMap("form").set("title", val);
-      },
+  const title = computed({
+    get() {
+      return ydoc.value.getMap("form").get("title") ?? "";
+    },
+    set(val) {
+      ydoc.value.getMap("form").set("title", val);
+    },
+  });
+
+  function init(missionId: string) {
+    connectionStore.connection?.on("package-sync", (update) => {
+      Y.applyUpdate(ydoc.value, new Uint8Array(update));
     });
 
-    function init(missionId: string) {
-      connectionStore.connection?.emit("room:join", missionId);
-
-      connectionStore.connection?.on("sync", (update) => {
-        Y.applyUpdate(ydoc.value, update);
-      });
-    }
-    function destroy() {
-      connectionStore?.connection?.emit("room:leave");
-      useMissionDetailStore().$reset();
-    }
-
-    ydoc.value.on("update", (update) => {
-      console.log(Array.from(update));
-      connectionStore.connection?.emit("sync", Array.from(update));
-
-      ydoc.value = new Y.Doc();
-      awareness.value = new Awareness(ydoc.value);
-      editor.value = ydoc.value.getText("editor");
+    connectionStore.connection?.on("package-mission", (initial) => {
+      Y.applyUpdate(ydoc.value, new Uint8Array(initial));
     });
 
-    return { ydoc, awareness, editor, title, init, destroy };
+    connectionStore.connection?.emit("mission:join", missionId);
   }
-  // {
-  //   state: () => {
-  //     const ydoc = new Y.Doc();
-  //     return {
-  //       ydoc: ydoc as Y.Doc,
-  //       awareness: new Awareness(ydoc) as Awareness,
+  function destroy() {
+    connectionStore?.connection?.emit("mission:leave");
 
-  //       editor: "",
-  //     };
-  //   },
-  //   actions: {
-  //     init(missionId: string) {
-  //       const connectionStore = useConnectionStore();
-  //       if (!connectionStore.connection) return;
+    ydoc.value = new Y.Doc();
+    awareness.value = new Awareness(ydoc.value);
+    editor.value = ydoc.value.getText("editor");
+  }
 
-  //       connectionStore.connection.emit("room:join", missionId);
+  ydoc.value.on("update", (update) => {
+    console.log(connectionStore.connection);
+    connectionStore.connection?.emit("mission:sync", Array.from(update));
+  });
 
-  //       connectionStore.connection.on("sync", (update) => {
-  //         Y.applyUpdate(this.ydoc, update);
-  //       });
-
-  //       this.$subscribe((mutation, state) => {
-  //         console.log(mutation, state);
-  //       });
-  //     },
-  //     destroy() {
-  //       const connectionStore = useConnectionStore();
-  //       if (!connectionStore.connection) return;
-  //       connectionStore.connection.emit("room:leave");
-  //       this.$reset();
-  //     },
-  //   },
-  // }
-);
+  return { ydoc, awareness, editor, title, init, destroy };
+});

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

@@ -13,7 +13,6 @@
         <label for="title">Einsatzbeginn</label>
         <input type="datetime-local" id="title" />
       </div>
-      {{ title }}
       <div class="grow">
         <label for="title">Einsatzende</label>
         <input type="datetime-local" id="title" />
@@ -83,7 +82,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import { Quill, QuillEditor } from "@vueup/vue-quill";
-import QuillCursors from "quill-cursors";
+import type QuillCursors from "quill-cursors";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { QuillBinding } from "y-quill";
 import { moduleOptions } from "@/helpers/quillConfig";
@@ -105,9 +104,6 @@ export default defineComponent({
     ...mapState(useForceStore, ["availableForces"]),
     ...mapWritableState(useMissionDetailStore, ["editor", "title"]),
   },
-  created() {
-    Quill.register("modules/cursors", QuillCursors);
-  },
   methods: {
     initEditor(quill: Quill) {
       this.binding = new QuillBinding(this.editor, quill);

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

@@ -69,6 +69,7 @@ export default defineComponent({
     },
     connectionStatus() {
       if (this.connectionStatus) {
+        console.log("hi");
         this.init(this.id);
       }
     },