From 8448597284439d1c884d9ade4c6f2183167145aa Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 5 Mar 2025 15:10:05 +0100
Subject: [PATCH] show other editors

---
 src/helpers/awareness.ts                      |  2 +-
 src/stores/admin/operation/missionDetail.ts   |  2 ++
 .../operation/mission/MissionOverview.vue     | 24 +++++++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/helpers/awareness.ts b/src/helpers/awareness.ts
index 165f2c3..9269288 100644
--- a/src/helpers/awareness.ts
+++ b/src/helpers/awareness.ts
@@ -31,7 +31,7 @@ export class Awareness {
   public readonly emitter = mitt<AwarenessEvents>();
 
   public getEditors() {
-    return this.editors;
+    return Array.from(this.editors.values());
   }
 
   public getEditor(key: string) {
diff --git a/src/stores/admin/operation/missionDetail.ts b/src/stores/admin/operation/missionDetail.ts
index f5f2701..d784a0b 100644
--- a/src/stores/admin/operation/missionDetail.ts
+++ b/src/stores/admin/operation/missionDetail.ts
@@ -57,6 +57,7 @@ export const useMissionDetailStore = defineStore("missionDetail", {
         if (data.type == "editors") {
           let update = data.update as Array<[string, Editor]>;
           for (const e of update) {
+            if (connectionStore.connection?.id == e[0]) return;
             this.awareness.updateEditor(e[0], {
               action: "update",
               data: e[1],
@@ -65,6 +66,7 @@ export const useMissionDetailStore = defineStore("missionDetail", {
         } else if (data.type == "state") {
           let update = data.update as Array<[string, EditorState]>;
           for (const e of update) {
+            if (connectionStore.connection?.id == e[0]) return;
             this.awareness.updateEditorState(e[0], {
               action: "update",
               data: e[1],
diff --git a/src/views/admin/operation/mission/MissionOverview.vue b/src/views/admin/operation/mission/MissionOverview.vue
index 5957017..0870d29 100644
--- a/src/views/admin/operation/mission/MissionOverview.vue
+++ b/src/views/admin/operation/mission/MissionOverview.vue
@@ -1,7 +1,26 @@
 <template>
   <MainTemplate :showBack="false">
     <template #headerInsert>
-      <RouterLink :to="{ name: 'admin-operation-mission' }" class="text-primary !w-fit">zurück zur Liste</RouterLink>
+      <div class="flex flex-row justify-between">
+        <RouterLink :to="{ name: 'admin-operation-mission' }" class="text-primary !w-fit">zurück zur Liste</RouterLink>
+        <tippy v-if="editors.length != 0" placement="bottom">
+          <template #default>
+            <UsersIcon class="h-6 w-6 cursor-pointer" />
+          </template>
+          <template #content>
+            <div class="flex flex-col min-w-24">
+              <p>Editoren:</p>
+              <div v-for="editor in editors" class="flex flex-row gap-1 items-end">
+                <div
+                  class="h-4 w-4 rounded-sm border border-gray-300"
+                  :style="'background-color:' + editor.color"
+                ></div>
+                {{ editor.username }}
+              </div>
+            </div>
+          </template>
+        </tippy>
+      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-2 overflow-hidden">
@@ -45,6 +64,7 @@ import MissionPresence from "./MissionPresence.vue";
 import { useForceStore } from "@/stores/admin/configuration/force";
 import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
 import { useMissionDetailStore } from "../../../../stores/admin/operation/missionDetail";
+import { UsersIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -82,7 +102,7 @@ export default defineComponent({
       return this.$route.hash;
     },
     editors() {
-      return this.awareness ?? [];
+      return this.awareness.getEditors();
     },
   },
   mounted() {