sync and keep by change timestamp

package.json

@@ -4,7 +4,7 @@
   "description": "Feuerwehr/Verein Einsatzverwaltung UI",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",

src/stores/admin/operation/missionDetail.ts

@@ -4,50 +4,116 @@ 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();
-  const initialized = ref(false);
+export const useMissionDetailStore = defineStore("missionDetail", {
+  state: () => {
+    return {
+      yDoc: new Y.Doc(),
+      docId: null as null | string,
+      lastUpdateTimestamp: 0 as number,
+      connectionStatus: "disconnected", // 'disconnected', 'connecting', 'connected', 'syncing', 'synced'
+    };
+  },
+  actions: {
+    initialize(docId: string) {
+      this.docId = docId;
 
-  const ydoc = ref(new Y.Doc());
-  const awareness = ref(new Awareness(ydoc.value));
+      this.lastUpdateTimestamp = this.loadLastUpdateFromLocalStorage();
 
-  const title = computed({
-    get() {
-      return ydoc.value.getMap("form").get("title") ?? "";
+      this.setupSocketHandlers();
+      this.setupYjsObservers();
     },
-    set(val) {
-      ydoc.value.getMap("form").set("title", val);
+
+    setupSocketHandlers() {
+      const connectionStore = useConnectionStore();
+      if (!connectionStore.connection) return;
+
+      connectionStore.connection.on("package-sync", (data) => {
+        try {
+          this.connectionStatus = "syncing";
+
+          Y.applyUpdate(this.yDoc, new Uint8Array(data.update));
+
+          if (data.timestamp > this.lastUpdateTimestamp) {
+            this.lastUpdateTimestamp = data.timestamp;
+            this.saveLastUpdateToLocalStorage();
+          }
+
+          this.connectionStatus = "synced";
+        } catch (error) {
+          console.error("Error applying update:", error);
+          this.requestFullSync();
+        }
+      });
+      connectionStore.connection.on("sync-get-missing-updates", (data) => {
+        const clientUpdates = Y.encodeStateAsUpdate(this.yDoc, new Uint8Array(data.stateVector));
+
+        connectionStore.connection?.emit("mission:sync-client-updates", {
+          update: clientUpdates,
+          timestamp: Date.now(),
+        });
+      });
+
+      this.joinDocument();
     },
-  });
-  const editor = ref(ydoc.value.getText("editor"));
 
-  function init(missionId: string) {
-    if (!connectionStore.connection) return;
+    setupYjsObservers() {
+      if (!this.yDoc) 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));
-    });
+      this.yDoc.on("update", (update) => {
+        const connectionStore = useConnectionStore();
+        if (connectionStore.connected) {
+          connectionStore.connection?.emit("mission:sync-client-updates", {
+            update: Array.from(update),
+            timestamp: Date.now(),
+          });
+        }
 
-    connectionStore.connection.on("package-sync", (update) => {
-      Y.applyUpdate(ydoc.value, new Uint8Array(update));
-    });
+        this.lastUpdateTimestamp = Date.now();
+        this.saveLastUpdateToLocalStorage();
+      });
+    },
 
-    connectionStore.connection.on("package-mission", (initial) => {
-      Y.applyUpdate(ydoc.value, new Uint8Array(initial));
-    });
+    joinDocument() {
+      const connectionStore = useConnectionStore();
+      if (!connectionStore.connection || !this.docId) return;
 
-    connectionStore.connection.emit("mission:join", missionId, initialized.value);
-    initialized.value = true;
-  }
-  function destroy() {
-    connectionStore.connection?.emit("mission:leave");
+      connectionStore.connection.emit("mission:join", this.docId, {
+        timestamp: this.lastUpdateTimestamp,
+      });
+    },
 
-    connectionStore.connection?.off("package-mission");
-    connectionStore.connection?.off("package-sync");
-  }
+    requestFullSync() {
+      const connectionStore = useConnectionStore();
+      if (!connectionStore.connection || !this.docId) return;
 
-  return { ydoc, awareness, title, editor, init, destroy };
+      connectionStore.connection.emit("mission:join", this.docId, null);
+    },
+
+    loadLastUpdateFromLocalStorage() {
+      if (!this.docId) return 0;
+
+      const stored = localStorage.getItem(`yjsDoc_timestamp`);
+      return stored ? parseInt(stored, 10) : 0;
+    },
+
+    saveLastUpdateToLocalStorage() {
+      if (!this.docId) return;
+
+      localStorage.setItem(`yjsDoc_timestamp`, this.lastUpdateTimestamp.toString());
+    },
+
+    cleanup() {
+      if (this.yDoc) {
+        this.yDoc.destroy();
+        this.yDoc = new Y.Doc();
+      }
+      this.lastUpdateTimestamp = 0;
+      localStorage.removeItem("yjsDoc_timestamp");
+
+      const connectionStore = useConnectionStore();
+      connectionStore.connection?.emit("mission:leave");
+
+      this.connectionStatus = "disconnected";
+    },
+  },
 });

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

@@ -75,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import { Quill, QuillEditor } from "@vueup/vue-quill";
@@ -85,11 +85,17 @@ import { QuillBinding } from "y-quill";
 import { moduleOptions } from "@/helpers/quillConfig";
 import ForceSelect from "@/components/admin/ForceSelect.vue";
 import { useForceStore } from "@/stores/admin/configuration/force";
-import { useMissionDetailStore } from "@/stores/admin/operation/missionDetail";
+import * as Y from "yjs";
 </script>
 
 <script lang="ts">
 export default defineComponent({
+  props: {
+    document: {
+      type: Object as PropType<Y.Doc>,
+      required: true,
+    },
+  },
   data() {
     return {
       binding: undefined as undefined | QuillBinding,
@@ -99,7 +105,17 @@ export default defineComponent({
   computed: {
     ...mapState(useAbilityStore, ["can"]),
     ...mapState(useForceStore, ["availableForces"]),
-    ...mapWritableState(useMissionDetailStore, ["editor", "title"]),
+    title: {
+      get() {
+        return this.document.getMap("form").get("title");
+      },
+      set(val: string) {
+        this.document.getMap("form").set("title", val);
+      },
+    },
+    editor() {
+      return this.document.getText("editor");
+    },
   },
   methods: {
     initEditor(quill: Quill) {

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

@@ -27,7 +27,7 @@
             </RouterLink>
           </div>
 
-          <MissionDetail v-show="routeHash == '#edit'" />
+          <MissionDetail v-show="routeHash == '#edit'" :document="yDoc" />
           <MissionPresence v-show="routeHash == '#presence'" />
         </div>
       </div>
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useConnectionStore } from "@/stores/admin/operation/connection";
 import MissionDetail from "./MissionDetail.vue";
@@ -71,12 +71,13 @@ export default defineComponent({
     },
     connectionStatus() {
       if (this.connectionStatus) {
-        this.init(this.id);
+        this.setupSocketHandlers();
       }
     },
   },
   computed: {
     ...mapState(useConnectionStore, ["connectionStatus"]),
+    ...mapWritableState(useMissionDetailStore, ["yDoc"]),
     routeHash() {
       return this.$route.hash;
     },
@@ -84,15 +85,15 @@ export default defineComponent({
   mounted() {
     this.manageHash();
     this.connectClient();
-    this.init(this.id);
+    this.initialize(this.id);
     this.getAvailableForces();
   },
   beforeUnmount() {
-    this.destroy();
+    this.cleanup();
   },
   methods: {
     ...mapActions(useConnectionStore, ["connectClient"]),
-    ...mapActions(useMissionDetailStore, ["init", "destroy"]),
+    ...mapActions(useMissionDetailStore, ["initialize", "setupSocketHandlers", "cleanup"]),
     ...mapActions(useForceStore, ["getAvailableForces"]),
     manageHash() {
       if (!this.$route.hash || !this.tabs.map((t) => t.hash).includes(this.$route.hash)) {