From ed3380d9c87130f29313fb8fb4d782a1f12639ea Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 11 May 2023 14:42:48 +0200
Subject: [PATCH 01/35] =?UTF-8?q?"Karten=20und=20Verl=C3=A4ufe"=20erstellt?=
 =?UTF-8?q?=20und=20erste=20Funktionen=20angefangen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 79 +++++++++++++++++++++++
 src/components/NetworkMap.vue             | 22 +++++++
 src/store/viewOptionsModule.ts            |  2 +
 src/views/HomeView.vue                    |  3 +
 4 files changed, 106 insertions(+)
 create mode 100644 src/components/ComparisonOptionsPanel.vue

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
new file mode 100644
index 0000000..50d2eb7
--- /dev/null
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="panel">
+    <p class="panel-heading" @click.stop="isOpen = !isOpen">
+      <span>Karten und Verläufe</span>
+      <span class="icon is-medium clickAble right">
+        <font-awesome-icon v-if="isOpen" icon="chevron-up" />
+        <font-awesome-icon v-else icon="chevron-down" size="1x" />
+      </span>
+    </p>
+    <div class="panel-block form">
+      <div class="field is-horizontal">
+        <div class="field-body">
+          <div id="view-settings" class="field" v-if="isOpen">
+            <div class="control">
+              <div class="buttons">
+                <button class="button">
+                  <span class="icon">
+                    <font-awesome-icon icon="user-secret" />
+                  </span>
+                  <span>Neue leere Karte</span>
+                  <span></span>
+                </button>
+
+                <button class="button">
+                  <span class="icon">
+                    <font-awesome-icon icon="rss" />
+                  </span>
+                  <span>Karte duplizieren</span>
+                </button>
+
+                <br />
+
+                <button class="button">
+                  <span class="icon">
+                    <font-awesome-icon icon="project-diagram" />
+                  </span>
+                  <span>Karte ändern</span>
+                </button>
+
+                <button class="button" @click.stop="toggleComparison">
+                  <span class="icon">
+                    <font-awesome-icon icon="font" />
+                  </span>
+                  <span v-if="!nwkcomparison">Vergleich ein</span>
+                  <span v-else>Vergleich aus</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
+import { useStore } from "@/store";
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+
+    const isOpen = ref(false);
+
+    return {
+      nwkcomparison: computed(() => store.state.view.nwkcomparison),
+      toggleComparison: () => store.commit("view/toggle", "nwkcomparison"),
+      isOpen: isOpen,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.right {
+  float: right;
+}
+</style>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 9bb5a68..c4a7a34 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,4 +1,21 @@
 <template>
+  <div style="position: relative" v-if="showComparison">
+    <button
+      class="button is-small"
+      style="position: absolute; left: 5%; top: 32%"
+    >
+      &lt;
+    </button>
+    <svg width="90%" height="100">
+      <line x1="50" y1="50" x2="750" y2="50" class="comparisonLine"></line>
+    </svg>
+    <button
+      class="button is-small"
+      style="position: absolute; left: 92%; top: 32%"
+    >
+      &gt;
+    </button>
+  </div>
   <svg id="nwkmap" width="100%" height="100%" viewBox="-105 -105 210 210">
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -594,6 +611,7 @@ export default defineComponent({
       getRoleShort,
       alteriNames: computed(() => store.state.view.alteriNames),
       showHorizons: computed(() => store.state.view.horizons),
+      showComparison: computed(() => store.state.view.nwkcomparison),
       connections: computed(() => store.state.view.connections),
       brushBtns,
       isClusterConnectPossible,
@@ -622,6 +640,10 @@ export default defineComponent({
 <style scoped lang="scss">
 @import "~bulma/sass/base/_all.sass";
 
+.comparisonLine {
+  stroke: black !important;
+}
+
 text {
   font-family: $family-primary;
   font-size: 4px;
diff --git a/src/store/viewOptionsModule.ts b/src/store/viewOptionsModule.ts
index 1d7a97a..d46b86c 100644
--- a/src/store/viewOptionsModule.ts
+++ b/src/store/viewOptionsModule.ts
@@ -8,6 +8,7 @@ export interface ViewOptionsFlags {
   statistics: boolean;
   ageInNwk: boolean;
   roleInNwk: boolean;
+  nwkcomparison: boolean;
 }
 
 export interface ViewOptionsState extends ViewOptionsFlags {
@@ -25,6 +26,7 @@ export function initViewOptionsState(): ViewOptionsState {
     statistics: false,
     ageInNwk: false,
     roleInNwk: false,
+    nwkcomparison: false,
 
     selected: new Set<number>(),
     editIndex: null,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 92eb37c..23abc52 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -21,6 +21,7 @@
 
             <AlteriPanel v-if="!egoEditMode" :mapclicked="mapclicked" />
             <ViewOptionsPanel />
+            <ComparisonOptionsPanel />
             <StatisticsPanel v-if="showStatistics" />
           </div>
         </div>
@@ -46,9 +47,11 @@ import NetworkMap from "@/components/NetworkMap.vue";
 import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
 import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
+import ComparisonOptionsPanel from "@/components/ComparisonOptionsPanel.vue";
 
 export default defineComponent({
   components: {
+    ComparisonOptionsPanel,
     ErrorBoundary,
     EgoHeader,
     EgoEditForm,

From ce9b029b212e7a706a6e8417eca3cae95d915711 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 15 May 2023 13:26:26 +0200
Subject: [PATCH 02/35] =?UTF-8?q?Icons=20ge=C3=A4ndert;=20Kreisbutton=20au?=
 =?UTF-8?q?f=20Linie=20erstellt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue |  8 ++++----
 src/components/NetworkMap.vue             | 10 ++++++++--
 src/main.ts                               | 11 ++++++++++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 50d2eb7..720f24a 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -15,7 +15,7 @@
               <div class="buttons">
                 <button class="button">
                   <span class="icon">
-                    <font-awesome-icon icon="user-secret" />
+                    <font-awesome-icon icon="plus-circle" />
                   </span>
                   <span>Neue leere Karte</span>
                   <span></span>
@@ -23,7 +23,7 @@
 
                 <button class="button">
                   <span class="icon">
-                    <font-awesome-icon icon="rss" />
+                    <font-awesome-icon icon="copy" />
                   </span>
                   <span>Karte duplizieren</span>
                 </button>
@@ -32,14 +32,14 @@
 
                 <button class="button">
                   <span class="icon">
-                    <font-awesome-icon icon="project-diagram" />
+                    <font-awesome-icon icon="exchange-alt" />
                   </span>
                   <span>Karte ändern</span>
                 </button>
 
                 <button class="button" @click.stop="toggleComparison">
                   <span class="icon">
-                    <font-awesome-icon icon="font" />
+                    <font-awesome-icon icon="compress-arrows-alt" />
                   </span>
                   <span v-if="!nwkcomparison">Vergleich ein</span>
                   <span v-else>Vergleich aus</span>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index c4a7a34..8e994a2 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -6,8 +6,11 @@
     >
       &lt;
     </button>
-    <svg width="90%" height="100">
-      <line x1="50" y1="50" x2="750" y2="50" class="comparisonLine"></line>
+    <svg width="80%" height="100">
+      <line x1="5" y1="50" x2="750" y2="50" class="comparisonLine"></line>
+      <a>
+        <circle cx="98.5%" cy="50" r="11" class="comparisonCircle" />
+      </a>
     </svg>
     <button
       class="button is-small"
@@ -643,6 +646,9 @@ export default defineComponent({
 .comparisonLine {
   stroke: black !important;
 }
+.comparisonCircle {
+  fill: #ffc37d;
+}
 
 text {
   font-family: $family-primary;
diff --git a/src/main.ts b/src/main.ts
index 115966f..24f0b34 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 // NB: import & add each used icon here
 import {
   faBars,
+  faFileAlt,
+  faPlusCircle,
   faPencilAlt,
   faUserPlus,
   faMapPin,
@@ -45,10 +47,16 @@ import {
   faLink,
   faUnlink,
   faArrowsAlt,
+  faCompressArrowsAlt,
+  faCopy,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
+  faExchangeAlt,
+  faFileAlt,
   faPencilAlt,
+  faPlusCircle,
+  faCopy,
   faUserPlus,
   faMapPin,
   faUserMinus,
@@ -80,7 +88,8 @@ library.add(
   faInfo,
   faLink,
   faUnlink,
-  faArrowsAlt
+  faArrowsAlt,
+  faCompressArrowsAlt
 );
 
 // Vue.component("font-awesome-icon", FontAwesomeIcon);

From f49e14a2d0d3c8be1db84cb10bda5e3c6c84100f Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 19 May 2023 17:25:07 +0200
Subject: [PATCH 03/35] Anpassung der Linien-svg

---
 src/components/NetworkMap.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 8e994a2..747d2ca 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -2,19 +2,19 @@
   <div style="position: relative" v-if="showComparison">
     <button
       class="button is-small"
-      style="position: absolute; left: 5%; top: 32%"
+      style="position: absolute; left: 18%; top: 32%"
     >
       &lt;
     </button>
-    <svg width="80%" height="100">
+    <svg width="50%" height="100">
       <line x1="5" y1="50" x2="750" y2="50" class="comparisonLine"></line>
       <a>
-        <circle cx="98.5%" cy="50" r="11" class="comparisonCircle" />
+        <circle cx="97.5%" cy="50" r="9" class="comparisonCircle" />
       </a>
     </svg>
     <button
       class="button is-small"
-      style="position: absolute; left: 92%; top: 32%"
+      style="position: absolute; left: 78%; top: 32%"
     >
       &gt;
     </button>

From be65997eb0158ae05717e8cb2c791ac445285d13 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 25 May 2023 16:59:25 +0200
Subject: [PATCH 04/35] =?UTF-8?q?Anlegen=20der=20Version.ts=20f=C3=BCr=20d?=
 =?UTF-8?q?ie=20Versionierung;=20Buttons=20bei=20Verlauf=20entfernt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue |  2 +-
 src/components/NetworkMap.vue             | 12 ------------
 src/data/NWK.ts                           |  4 ++++
 src/data/Version.ts                       | 15 +++++++++++++++
 src/store/index.ts                        |  7 +++++++
 5 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/data/Version.ts

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 720f24a..5421436 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -34,7 +34,7 @@
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
                   </span>
-                  <span>Karte ändern</span>
+                  <span>Karte wechseln</span>
                 </button>
 
                 <button class="button" @click.stop="toggleComparison">
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 747d2ca..5d427a5 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,23 +1,11 @@
 <template>
   <div style="position: relative" v-if="showComparison">
-    <button
-      class="button is-small"
-      style="position: absolute; left: 18%; top: 32%"
-    >
-      &lt;
-    </button>
     <svg width="50%" height="100">
       <line x1="5" y1="50" x2="750" y2="50" class="comparisonLine"></line>
       <a>
         <circle cx="97.5%" cy="50" r="9" class="comparisonCircle" />
       </a>
     </svg>
-    <button
-      class="button is-small"
-      style="position: absolute; left: 78%; top: 32%"
-    >
-      &gt;
-    </button>
   </div>
   <svg id="nwkmap" width="100%" height="100%" viewBox="-105 -105 210 210">
     <defs>
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 042407e..89d5716 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -1,12 +1,14 @@
 import { Alter } from "@/data/Alter";
 import { Ego, initEgo } from "@/data/Ego";
 import { Connection } from "./Connection";
+import { Version } from "@/data/Version";
 
 // define your typings for the store state
 export interface NWK {
   ego: Ego;
   alteri: Array<Alter>;
   connections: Array<Connection>;
+  version: Array<Version>;
 }
 
 export function initNWKasJSON(): string {
@@ -14,6 +16,7 @@ export function initNWKasJSON(): string {
     ego: initEgo(),
     alteri: [],
     connections: [],
+    version: [],
   });
 }
 
@@ -22,4 +25,5 @@ export function loadNWK(state: NWK, loadedText: string): void {
   state.ego = loaded.ego;
   state.alteri = loaded.alteri;
   state.connections = loaded.connections;
+  state.version = loaded.version;
 }
diff --git a/src/data/Version.ts b/src/data/Version.ts
new file mode 100644
index 0000000..65de55e
--- /dev/null
+++ b/src/data/Version.ts
@@ -0,0 +1,15 @@
+//to give the nwk a version with id, title and the date
+
+export interface Version {
+  id: number;
+  title: string;
+  date: string;
+}
+
+export function initVersion(): Version {
+  return {
+    id: -1,
+    title: "",
+    date: "2023-05-25",
+  };
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 3e6e8a7..2027c67 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,6 @@
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { Alter, initAlter } from "@/data/Alter";
+import { Version, initVersion } from "@/data/Version";
 import { NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
@@ -51,6 +52,12 @@ const getters = {
 };
 
 const mutations = {
+  addVersion(state: IStoreState, initialValues: Partial<Version> = {}): void {
+    const newVersion = {
+      ...initVersion(),
+      ...initialValues,
+    };
+  },
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {

From 249c3f082c1abdf87b49ba47e6706e56b328f6b3 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 31 May 2023 16:05:11 +0200
Subject: [PATCH 05/35] =?UTF-8?q?Dialog=20f=C3=BCr=20Speichern=20der=20Ver?=
 =?UTF-8?q?sionen=20erstellt;=20Anfang=20des=20Anlegens=20einer=20addVersi?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 61 +++++++++++++++++++++--
 src/data/Version.ts                       |  2 +-
 src/store/index.ts                        |  7 +++
 3 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 5421436..26094b4 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -21,15 +21,13 @@
                   <span></span>
                 </button>
 
-                <button class="button">
+                <button class="button" @click="newVersion = true">
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
                   <span>Karte duplizieren</span>
                 </button>
 
-                <br />
-
                 <button class="button">
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
@@ -45,6 +43,50 @@
                   <span v-else>Vergleich aus</span>
                 </button>
               </div>
+
+              <div class="field is-horizontal" v-if="newVersion">
+                <div class="field-label is-normal">
+                  <label class="label">Titel</label>
+                </div>
+                <div class="field-body">
+                  <div class="field">
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="text"
+                        placeholder="Titel der Version"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <br />
+
+              <div class="field is-horizontal" v-if="newVersion">
+                <div class="field-label is-normal">
+                  <label class="label">Datum</label>
+                </div>
+                <div class="field-body">
+                  <div class="field">
+                    <div class="control">
+                      <input class="input" type="date" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <br />
+
+              <div class="buttons" v-if="newVersion">
+                <button class="button is-primary" @click="addNewVersion">
+                  <span>Speichern</span>
+                </button>
+
+                <button class="button is-light" @click="newVersion = false">
+                  <span>Abbrechen</span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -63,10 +105,23 @@ export default defineComponent({
 
     const isOpen = ref(false);
 
+    const newVersion = ref(false);
+
+    const addNewVersion = () => {
+      console.log("Adding new version");
+      store.commit("addVersion", {
+        id: 1,
+        title: "Neue Version",
+        date: "2023-06-01",
+      });
+    };
+
     return {
       nwkcomparison: computed(() => store.state.view.nwkcomparison),
       toggleComparison: () => store.commit("view/toggle", "nwkcomparison"),
       isOpen: isOpen,
+      newVersion: newVersion,
+      addNewVersion: addNewVersion,
     };
   },
 });
diff --git a/src/data/Version.ts b/src/data/Version.ts
index 65de55e..fd2941b 100644
--- a/src/data/Version.ts
+++ b/src/data/Version.ts
@@ -10,6 +10,6 @@ export function initVersion(): Version {
   return {
     id: -1,
     title: "",
-    date: "2023-05-25",
+    date: "",
   };
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 2027c67..7192ab1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -53,11 +53,18 @@ const getters = {
 
 const mutations = {
   addVersion(state: IStoreState, initialValues: Partial<Version> = {}): void {
+    // initialize version with default values and optionally with the passed values
     const newVersion = {
       ...initVersion(),
       ...initialValues,
     };
+
+    console.log(state.nwk); // Check the state of NWK object
+    console.log(state.nwk.version); // Check the state of the version array
+
+    state.nwk.version.push(newVersion);
   },
+
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {

From 3c1ada129aafe74c7a52d3efb2c76c290db752f3 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 1 Jun 2023 10:44:27 +0200
Subject: [PATCH 06/35] =?UTF-8?q?Version=20hinzuf=C3=BCgen=20funktioniert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 29 +++++++++++++++++++----
 src/data/NWK.ts                           |  6 ++---
 src/store/index.ts                        | 12 +++++++---
 src/store/nwkModule.ts                    | 14 +++++++++++
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 26094b4..6e9691d 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -21,7 +21,11 @@
                   <span></span>
                 </button>
 
-                <button class="button" @click="newVersion = true">
+                <button
+                  class="button"
+                  @click="newVersion = true"
+                  @click.stop="addNewVersion"
+                >
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
@@ -54,7 +58,7 @@
                       <input
                         class="input"
                         type="text"
-                        placeholder="Titel der Version"
+                        placeholder="Titel der aktuellen Version"
                       />
                     </div>
                   </div>
@@ -98,19 +102,36 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
+import { Version } from "@/data/Version";
+
+type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
-  setup() {
+  props: {
+    version: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
     const store = useStore();
 
     const isOpen = ref(false);
 
     const newVersion = ref(false);
 
+    const commitVersion = (evt: FocusEvent, field: keyof Version) => {
+      const value = (evt.target as InputType).value.trim();
+      if (props.version && value !== props.version[field]) {
+        const changes = { [field]: value };
+        const payload = { index: store.state.view.editIndex, changes };
+        store.commit("editVersion", payload);
+      }
+    };
+
     const addNewVersion = () => {
       console.log("Adding new version");
       store.commit("addVersion", {
-        id: 1,
         title: "Neue Version",
         date: "2023-06-01",
       });
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 89d5716..be76c6a 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -8,7 +8,7 @@ export interface NWK {
   ego: Ego;
   alteri: Array<Alter>;
   connections: Array<Connection>;
-  version: Array<Version>;
+  versions: Array<Version>;
 }
 
 export function initNWKasJSON(): string {
@@ -16,7 +16,7 @@ export function initNWKasJSON(): string {
     ego: initEgo(),
     alteri: [],
     connections: [],
-    version: [],
+    versions: [],
   });
 }
 
@@ -25,5 +25,5 @@ export function loadNWK(state: NWK, loadedText: string): void {
   state.ego = loaded.ego;
   state.alteri = loaded.alteri;
   state.connections = loaded.connections;
-  state.version = loaded.version;
+  state.versions = loaded.versions;
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 7192ab1..88fe541 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -59,10 +59,16 @@ const mutations = {
       ...initialValues,
     };
 
-    console.log(state.nwk); // Check the state of NWK object
-    console.log(state.nwk.version); // Check the state of the version array
+    newVersion.id =
+      state.nwk.versions.length > 0
+        ? Math.max(...state.nwk.versions.map((v) => (v.id ? v.id : 1))) + 1
+        : 1;
+
+    console.log(state.nwk); // defined
+    console.log(state.nwk.versions); // undefined
+    console.log(newVersion); //works
 
-    state.nwk.version.push(newVersion);
+    state.nwk.versions.push(newVersion);
   },
 
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index 99f87fc..be9a5af 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -4,6 +4,7 @@ import { NWK, initNWKasJSON, loadNWK } from "@/data/NWK";
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 
 import { loadStateFromStore } from "./localStoragePlugin";
+import { Version } from "@/data/Version";
 
 // root state object.
 // each Vuex instance is just a single state tree.
@@ -20,6 +21,10 @@ const mutations = {
     state.ego = { ...state.ego, ...payload };
   },
 
+  editVersion(state: NWK, payload: Partial<Version>): void {
+    state.versions = { ...state.versions, ...payload };
+  },
+
   newNWK(state: NWK): void {
     loadNWK(state, initNWKasJSON());
   },
@@ -52,6 +57,15 @@ const mutations = {
     state.alteri.splice(alterIndex, 1);
   },
 
+  /*addVersion(
+    state: NWK,
+    payload: { id: number; title: string; date: string }
+  ): void {
+    state.version.push(payload);
+  },
+
+   */
+
   addConnection(state: NWK, payload: { id1: number; id2: number }): void {
     state.connections.push(payload);
   },

From 1b377cdbf38c1c91fda4453d94715bfb7f9b6039 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 1 Jun 2023 15:41:02 +0200
Subject: [PATCH 07/35] CurrentVersion wurde angelegt und Weiterarbeit an
 Versionierung

---
 src/components/ComparisonOptionsPanel.vue | 127 ++++++++++++++--------
 src/data/Alter.ts                         |   3 +
 src/data/Connection.ts                    |   1 +
 src/data/CurrentVersion.ts                |  13 +++
 src/data/Ego.ts                           |   3 +
 src/data/NWK.ts                           |   4 +
 src/data/Version.ts                       |   2 +
 src/store/index.ts                        |  15 ++-
 src/store/nwkModule.ts                    |  51 +++++++--
 9 files changed, 157 insertions(+), 62 deletions(-)
 create mode 100644 src/data/CurrentVersion.ts

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 6e9691d..55479cb 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="panel">
-    <p class="panel-heading" @click.stop="isOpen = !isOpen">
+    <p
+      class="panel-heading"
+      @click.stop="isOpen = !isOpen"
+      @click="newVersion = false"
+    >
       <span>Karten und Verläufe</span>
       <span class="icon is-medium clickAble right">
         <font-awesome-icon v-if="isOpen" icon="chevron-up" />
@@ -21,25 +25,25 @@
                   <span></span>
                 </button>
 
-                <button
-                  class="button"
-                  @click="newVersion = true"
-                  @click.stop="addNewVersion"
-                >
+                <button class="button" @click="newVersion = !newVersion">
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
                   <span>Karte duplizieren</span>
                 </button>
 
-                <button class="button">
+                <button class="button" :disabled="isDisabled">
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
                   </span>
                   <span>Karte wechseln</span>
                 </button>
 
-                <button class="button" @click.stop="toggleComparison">
+                <button
+                  class="button"
+                  @click.stop="toggleComparison"
+                  :disabled="isDisabled"
+                >
                   <span class="icon">
                     <font-awesome-icon icon="compress-arrows-alt" />
                   </span>
@@ -48,48 +52,57 @@
                 </button>
               </div>
 
-              <div class="field is-horizontal" v-if="newVersion">
-                <div class="field-label is-normal">
-                  <label class="label">Titel</label>
-                </div>
-                <div class="field-body">
-                  <div class="field">
-                    <div class="control">
-                      <input
-                        class="input"
-                        type="text"
-                        placeholder="Titel der aktuellen Version"
-                      />
+              <div v-if="newVersion">
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Titel</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input
+                          class="input"
+                          type="text"
+                          placeholder="Titel der aktuellen Version"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              <br />
+                <br />
 
-              <div class="field is-horizontal" v-if="newVersion">
-                <div class="field-label is-normal">
-                  <label class="label">Datum</label>
-                </div>
-                <div class="field-body">
-                  <div class="field">
-                    <div class="control">
-                      <input class="input" type="date" />
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Datum</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input class="input" type="date" />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              <br />
-
-              <div class="buttons" v-if="newVersion">
-                <button class="button is-primary" @click="addNewVersion">
-                  <span>Speichern</span>
-                </button>
-
-                <button class="button is-light" @click="newVersion = false">
-                  <span>Abbrechen</span>
-                </button>
+                <br />
+
+                <div class="buttons">
+                  <button
+                    class="button is-primary"
+                    @click="addNewVersion"
+                    @click.stop="newVersion = false"
+                  >
+                    <span>Speichern</span>
+                  </button>
+
+                  <button
+                    class="button is-light"
+                    @click.stop="newVersion = false"
+                  >
+                    <span>Abbrechen</span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -104,7 +117,7 @@ import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
 import { Version } from "@/data/Version";
 
-type InputType = HTMLInputElement | HTMLTextAreaElement;
+//type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
   props: {
@@ -120,7 +133,24 @@ export default defineComponent({
 
     const newVersion = ref(false);
 
-    const commitVersion = (evt: FocusEvent, field: keyof Version) => {
+    const isDisabled = ref(true);
+
+    if (store.state.nwk.versions.length < 1) {
+      console.log(isDisabled.value);
+      isDisabled.value = true;
+    } else {
+      isDisabled.value = false;
+    }
+
+    /*const addingNewVersion = ref(!(props.version?.date.length > 0));
+
+    const cancelAddVersion = () => {
+      if (addingNewVersion.value) {
+        store.commit("cancelAddVersion", store.state.view.editIndex);
+      }
+    };
+
+    const commitEdit = (evt: FocusEvent, field: keyof Version) => {
       const value = (evt.target as InputType).value.trim();
       if (props.version && value !== props.version[field]) {
         const changes = { [field]: value };
@@ -129,12 +159,10 @@ export default defineComponent({
       }
     };
 
+     */
+
     const addNewVersion = () => {
-      console.log("Adding new version");
-      store.commit("addVersion", {
-        title: "Neue Version",
-        date: "2023-06-01",
-      });
+      store.commit("addVersion");
     };
 
     return {
@@ -143,6 +171,9 @@ export default defineComponent({
       isOpen: isOpen,
       newVersion: newVersion,
       addNewVersion: addNewVersion,
+      isDisabled: isDisabled,
+      //commitEdit,
+      //cancelAddVersion,
     };
   },
 });
diff --git a/src/data/Alter.ts b/src/data/Alter.ts
index a3c7b91..025c1e0 100644
--- a/src/data/Alter.ts
+++ b/src/data/Alter.ts
@@ -1,7 +1,9 @@
 import { defaultGender } from "@/data/Gender";
+import { defaultVersion } from "@/data/Version";
 
 export interface Alter {
   id: number;
+  version: number;
   name: string;
   role: string;
   /** if the role has its initial default value and has NOT been changed by user */
@@ -28,6 +30,7 @@ export interface Alter {
 export function initAlter(): Alter {
   return {
     id: -1,
+    version: defaultVersion,
     name: "",
     role: "",
     roleDefault: true,
diff --git a/src/data/Connection.ts b/src/data/Connection.ts
index 492a8fb..9487c8a 100644
--- a/src/data/Connection.ts
+++ b/src/data/Connection.ts
@@ -7,4 +7,5 @@
 export interface Connection {
   id1: number;
   id2: number;
+  version: number;
 }
diff --git a/src/data/CurrentVersion.ts b/src/data/CurrentVersion.ts
new file mode 100644
index 0000000..3db81b4
--- /dev/null
+++ b/src/data/CurrentVersion.ts
@@ -0,0 +1,13 @@
+//What is the current version? - to change version
+
+import { defaultVersion } from "@/data/Version";
+
+export interface CurrentVersion {
+  id: number;
+}
+
+export function initCurrentVersion(): CurrentVersion {
+  return {
+    id: defaultVersion,
+  };
+}
diff --git a/src/data/Ego.ts b/src/data/Ego.ts
index 2b2fcdf..b470bf8 100644
--- a/src/data/Ego.ts
+++ b/src/data/Ego.ts
@@ -1,6 +1,8 @@
 import { defaultGender } from "./Gender";
+import { defaultVersion } from "@/data/Version";
 
 export interface Ego {
+  version: number;
   name: string;
   age: string;
   currentGender: string;
@@ -9,6 +11,7 @@ export interface Ego {
 
 export function initEgo(): Ego {
   return {
+    version: defaultVersion,
     name: "",
     currentGender: defaultGender,
     age: "",
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index be76c6a..4e12a11 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -2,6 +2,7 @@ import { Alter } from "@/data/Alter";
 import { Ego, initEgo } from "@/data/Ego";
 import { Connection } from "./Connection";
 import { Version } from "@/data/Version";
+import { CurrentVersion, initCurrentVersion } from "@/data/CurrentVersion";
 
 // define your typings for the store state
 export interface NWK {
@@ -9,6 +10,7 @@ export interface NWK {
   alteri: Array<Alter>;
   connections: Array<Connection>;
   versions: Array<Version>;
+  currentVersion: CurrentVersion;
 }
 
 export function initNWKasJSON(): string {
@@ -17,6 +19,7 @@ export function initNWKasJSON(): string {
     alteri: [],
     connections: [],
     versions: [],
+    currentVersion: initCurrentVersion(),
   });
 }
 
@@ -26,4 +29,5 @@ export function loadNWK(state: NWK, loadedText: string): void {
   state.alteri = loaded.alteri;
   state.connections = loaded.connections;
   state.versions = loaded.versions;
+  state.currentVersion = loaded.currentVersion;
 }
diff --git a/src/data/Version.ts b/src/data/Version.ts
index fd2941b..d0cfd6f 100644
--- a/src/data/Version.ts
+++ b/src/data/Version.ts
@@ -13,3 +13,5 @@ export function initVersion(): Version {
     date: "",
   };
 }
+
+export const defaultVersion = 0;
diff --git a/src/store/index.ts b/src/store/index.ts
index 88fe541..d5ff6a9 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -64,9 +64,8 @@ const mutations = {
         ? Math.max(...state.nwk.versions.map((v) => (v.id ? v.id : 1))) + 1
         : 1;
 
-    console.log(state.nwk); // defined
-    console.log(state.nwk.versions); // undefined
-    console.log(newVersion); //works
+    //change the version of the currentVersion to the id of the newly created Version
+    store.commit("editCurrentVersion", { id: newVersion.id });
 
     state.nwk.versions.push(newVersion);
   },
@@ -104,6 +103,16 @@ const mutations = {
     state.view.editIndex = null;
     state.view.editTab = "";
   },
+  cancelAddVersion(state: IStoreState, versionIndex: number): void {
+    // canceled alter is new and therefore cannot have connections
+    // don't delete with index null value (see #97)
+    if (versionIndex !== null) {
+      state.nwk.versions.splice(versionIndex, 1);
+    }
+
+    state.view.editIndex = null;
+    state.view.editTab = "";
+  },
   openAlterFormById(
     state: IStoreState,
     payload: { alterId: number; tab?: string }
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index be9a5af..4121ac6 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -5,6 +5,7 @@ import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 
 import { loadStateFromStore } from "./localStoragePlugin";
 import { Version } from "@/data/Version";
+import { CurrentVersion } from "@/data/CurrentVersion";
 
 // root state object.
 // each Vuex instance is just a single state tree.
@@ -21,8 +22,8 @@ const mutations = {
     state.ego = { ...state.ego, ...payload };
   },
 
-  editVersion(state: NWK, payload: Partial<Version>): void {
-    state.versions = { ...state.versions, ...payload };
+  editCurrentVersion(state: NWK, payload: Partial<CurrentVersion>): void {
+    state.currentVersion = { ...state.currentVersion, ...payload };
   },
 
   newNWK(state: NWK): void {
@@ -33,6 +34,13 @@ const mutations = {
     loadNWK(state, payload);
   },
 
+  editVersion(
+    state: NWK,
+    payload: { index: number; changes: Partial<Version> }
+  ): void {
+    editVersion(state, payload.index, payload.changes);
+  },
+
   editAlter(
     state: NWK,
     payload: { index: number; changes: Partial<Alter> }
@@ -57,16 +65,10 @@ const mutations = {
     state.alteri.splice(alterIndex, 1);
   },
 
-  /*addVersion(
+  addConnection(
     state: NWK,
-    payload: { id: number; title: string; date: string }
+    payload: { id1: number; id2: number; version: number }
   ): void {
-    state.version.push(payload);
-  },
-
-   */
-
-  addConnection(state: NWK, payload: { id1: number; id2: number }): void {
     state.connections.push(payload);
   },
 
@@ -76,6 +78,7 @@ const mutations = {
         state.connections.push({
           id1: payload[i],
           id2: payload[x],
+          version: payload[state.currentVersion.id],
         });
       }
     }
@@ -96,7 +99,10 @@ const mutations = {
     );
   },
 
-  toggleConnection(state: NWK, payload: { id1: number; id2: number }): void {
+  toggleConnection(
+    state: NWK,
+    payload: { id1: number; id2: number; version: number }
+  ): void {
     const index = state.connections.findIndex(
       (c) => c.id1 === payload.id1 && c.id2 === payload.id2
     );
@@ -142,6 +148,29 @@ export function editAlter(
   }
 }
 
+export function editVersion(
+  state: NWK,
+  versionIndex: number | null,
+  changes: Partial<Alter>
+): void {
+  // lookup does not work for 2 parallel mutations (form change & map click)
+  if (
+    versionIndex != null &&
+    versionIndex >= 0 &&
+    versionIndex < state.versions.length
+  ) {
+    // based on vuex\examples\composition\todomvc\store\mutations.js
+    // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
+    const changedVersion = {
+      ...state.versions[versionIndex],
+      ...changes,
+    };
+    state.versions.splice(versionIndex, 1, changedVersion);
+  } else {
+    console.warn("version index invalid or out of bounds: " + versionIndex);
+  }
+}
+
 /**
  * removes all connections to and from an alter
  */

From 65770ab5c254fffe05dec35d428a688c1bb458ad Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 7 Jun 2023 12:55:40 +0200
Subject: [PATCH 08/35] Alteri sind passend nach CurrentVersion versioniert

---
 src/store/index.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index d5ff6a9..aedaaa4 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -53,7 +53,7 @@ const getters = {
 
 const mutations = {
   addVersion(state: IStoreState, initialValues: Partial<Version> = {}): void {
-    // initialize version with default values and optionally with the passed values
+    // Initialize version with default values and optionally with the passed values
     const newVersion = {
       ...initVersion(),
       ...initialValues,
@@ -64,12 +64,20 @@ const mutations = {
         ? Math.max(...state.nwk.versions.map((v) => (v.id ? v.id : 1))) + 1
         : 1;
 
-    //change the version of the currentVersion to the id of the newly created Version
-    store.commit("editCurrentVersion", { id: newVersion.id });
+    // Update the alteri array with the new version for existing alters
+    const currentVersion = newVersion.id;
+    const updatedAlteri = state.nwk.alteri.map((alter) => ({
+      ...alter,
+      version: currentVersion,
+    }));
 
+    // Add the new version and updated alteri to the respective arrays in nwk
     state.nwk.versions.push(newVersion);
-  },
+    state.nwk.alteri.push(...updatedAlteri);
 
+    // Change the version of the currentVersion to the id of the newly created Version
+    store.commit("editCurrentVersion", { id: newVersion.id });
+  },
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {

From 1d84cdce0d2526f9338faa47a690a0fa9f878825 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Sat, 10 Jun 2023 12:53:22 +0200
Subject: [PATCH 09/35] Nur alteri duplizieren wo die version die aktuelle
 version ist. Bei Kontakten nur alteri anzeigen lassen, wo version die
 aktuelle version ist

---
 src/components/AlteriPanel.vue | 14 +++++++-------
 src/store/index.ts             | 21 ++++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index 04089d4..624fbfd 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -30,7 +30,7 @@
     </p>
 
     <AlteriPanelEntry
-      v-for="(alter, i) in alteri"
+      v-for="(alter, i) in filteredAlteri"
       :key="alter.id"
       :alter="alter"
       :alterIndex="i"
@@ -45,30 +45,30 @@ import { useStore } from "@/store";
 
 import AlteriPanelEntry from "@/components/AlteriPanelEntry.vue";
 
-// handle from below: edit, edit-finished, <del>remove-alter</del> --> vuex store
-// manages the edited-alter (from above or by itself) --> vuex store
-
 export default defineComponent({
   components: { AlteriPanelEntry },
   props: {
-    // toogled after each click on the map (resets keyboard cursor)
     mapclicked: Boolean,
   },
   setup() {
     const store = useStore();
 
-    // knows list of Alter from vuex
     const alteri = computed(() => store.state.nwk.alteri);
 
-    // button to add Alter
     const addAlter = () => {
       store.commit("addAlter");
     };
 
+    const filteredAlteri = computed(() => {
+      const currentVersionId = store.state.nwk.currentVersion.id;
+      return alteri.value.filter((alter) => alter.version === currentVersionId);
+    });
+
     return {
       alteri,
       addAlter,
       isAlterOpsAllowed: computed(() => store.getters.editedAlterValid),
+      filteredAlteri,
     };
   },
 });
diff --git a/src/store/index.ts b/src/store/index.ts
index aedaaa4..9852ec6 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -64,20 +64,23 @@ const mutations = {
         ? Math.max(...state.nwk.versions.map((v) => (v.id ? v.id : 1))) + 1
         : 1;
 
-    // Update the alteri array with the new version for existing alters
+    // Duplicate the alteri objects with the version ID of the current version
     const currentVersion = newVersion.id;
-    const updatedAlteri = state.nwk.alteri.map((alter) => ({
-      ...alter,
-      version: currentVersion,
-    }));
-
-    // Add the new version and updated alteri to the respective arrays in nwk
+    const duplicatedAlteri = state.nwk.alteri
+      .filter((alter) => alter.version === state.nwk.currentVersion.id)
+      .map((alter) => ({
+        ...alter,
+        version: currentVersion,
+      }));
+
+    // Add the new version and duplicated alteri to the respective arrays in nwk
     state.nwk.versions.push(newVersion);
-    state.nwk.alteri.push(...updatedAlteri);
+    state.nwk.alteri.push(...duplicatedAlteri);
 
-    // Change the version of the currentVersion to the id of the newly created Version
+    // Change the version of the currentVersion to the ID of the newly created version
     store.commit("editCurrentVersion", { id: newVersion.id });
   },
+
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {

From f246f6af98a50b5b0dc8f0bb1823e4dc8ffdcbcd Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 14 Jun 2023 16:04:31 +0200
Subject: [PATCH 10/35] Anzeigename in NWK passend currentVersion

---
 src/store/index.ts | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 9852ec6..0b2a0ad 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -19,6 +19,7 @@ import {
   viewOptionsModule,
   ViewOptionsState,
 } from "./viewOptionsModule";
+import { Ego, initEgo } from "@/data/Ego";
 
 export interface IStoreState {
   nwk: NWK;
@@ -39,11 +40,18 @@ const getters = {
   },
 
   displayName(state: IStoreState) {
-    return (alter: Alter) =>
-      (alter.deceased ? SYMBOL_DECEASED : "") +
-      (state.pseudonym.active
-        ? store.getters["pseudonym/pseudonize"](alter.id)
-        : alter.name);
+    return (alter: Alter) => {
+      const currentVersion = state.nwk.currentVersion.id;
+      if (alter.version === currentVersion) {
+        return (
+          (alter.deceased ? SYMBOL_DECEASED : "") +
+          (state.pseudonym.active
+            ? store.getters["pseudonym/pseudonize"](alter.id)
+            : alter.name)
+        );
+      }
+      return ""; // Wenn das Alter nicht der aktuellen Version entspricht
+    };
   },
 
   // networkAnalysis(state: NWK): NetworkAnalysis {
@@ -101,6 +109,21 @@ const mutations = {
     state.view.editIndex = 0;
     state.view.editTab = TAB_BASE;
   },
+  /*addEgo(state: IStoreState, initialValues: Partial<Ego> = {}): void {
+    // initialize alter with default values and optionally with the passed values
+    const newEgo = {
+      ...initEgo(),
+      ...initialValues,
+    };
+    applyAdaptiveNWKDefaults(newEgo, initialValues);
+
+    // new alter is always added on top of list
+    state.nwk.ego.unshift(newEgo);
+    state.view.editIndex = 0;
+    state.view.editTab = TAB_BASE;
+  },
+
+   */
   // removes a newly added alter from the list
   cancelAddAlter(state: IStoreState, alterIndex: number): void {
     // console.log("cancel " + alterIndex);

From fca2d92741ec93911c683071222433c7a0dc3476 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 22 Jun 2023 14:30:53 +0200
Subject: [PATCH 11/35] =?UTF-8?q?=C3=84nderung=20der=20Datenstruktur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriPanel.vue            |  8 +--
 src/components/ComparisonOptionsPanel.vue |  9 +--
 src/data/Alter.ts                         | 34 +--------
 src/data/ClientHistory.ts                 | 23 ++++++
 src/data/Connection.ts                    |  1 -
 src/data/CurrentVersion.ts                |  4 +-
 src/data/Ego.ts                           |  6 +-
 src/data/NWK.ts                           | 28 +++-----
 src/data/Version.ts                       |  6 +-
 src/store/index.ts                        | 85 ++++++++---------------
 src/store/localStoragePlugin.ts           |  4 +-
 src/store/nwkModule.ts                    | 28 +++-----
 src/store/temporaryModule.ts              | 32 +++++++++
 13 files changed, 119 insertions(+), 149 deletions(-)
 create mode 100644 src/data/ClientHistory.ts
 create mode 100644 src/store/temporaryModule.ts

diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index 624fbfd..db2d5b9 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -30,7 +30,7 @@
     </p>
 
     <AlteriPanelEntry
-      v-for="(alter, i) in filteredAlteri"
+      v-for="(alter, i) in alteri"
       :key="alter.id"
       :alter="alter"
       :alterIndex="i"
@@ -59,16 +59,10 @@ export default defineComponent({
       store.commit("addAlter");
     };
 
-    const filteredAlteri = computed(() => {
-      const currentVersionId = store.state.nwk.currentVersion.id;
-      return alteri.value.filter((alter) => alter.version === currentVersionId);
-    });
-
     return {
       alteri,
       addAlter,
       isAlterOpsAllowed: computed(() => store.getters.editedAlterValid),
-      filteredAlteri,
     };
   },
 });
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 55479cb..004582b 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -5,7 +5,7 @@
       @click.stop="isOpen = !isOpen"
       @click="newVersion = false"
     >
-      <span>Karten und Verläufe</span>
+      <span>Karten und Verlauf</span>
       <span class="icon is-medium clickAble right">
         <font-awesome-icon v-if="isOpen" icon="chevron-up" />
         <font-awesome-icon v-else icon="chevron-down" size="1x" />
@@ -115,7 +115,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
-import { Version } from "@/data/Version";
 
 //type InputType = HTMLInputElement | HTMLTextAreaElement;
 
@@ -126,7 +125,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup() {
     const store = useStore();
 
     const isOpen = ref(false);
@@ -135,13 +134,15 @@ export default defineComponent({
 
     const isDisabled = ref(true);
 
-    if (store.state.nwk.versions.length < 1) {
+    /*if (store.state.nwk.versions.length < 1) {
       console.log(isDisabled.value);
       isDisabled.value = true;
     } else {
       isDisabled.value = false;
     }
 
+     */
+
     /*const addingNewVersion = ref(!(props.version?.date.length > 0));
 
     const cancelAddVersion = () => {
diff --git a/src/data/Alter.ts b/src/data/Alter.ts
index 025c1e0..59bf713 100644
--- a/src/data/Alter.ts
+++ b/src/data/Alter.ts
@@ -1,36 +1,25 @@
 import { defaultGender } from "@/data/Gender";
-import { defaultVersion } from "@/data/Version";
 
 export interface Alter {
   id: number;
-  version: number;
   name: string;
   role: string;
-  /** if the role has its initial default value and has NOT been changed by user */
   roleDefault: boolean;
   human: boolean;
   currentGender: string;
-  /** if the gender has its initial default value and has NOT been changed by user */
   genderDefault: boolean;
   age: string;
   note: string;
   deceased: boolean;
-  /** connection to ego: 1 ... normal, 0 ... currently no edge, 2 ... multiplex edge */
   edgeType: number;
-  /** the edge type previously set by user (0, 1, or 2); initially -1 until changed by user */
   edgeTypeByUser: number;
-
-  /** angle from x-axis between -180° and +180° */
   angle: number;
-
-  /** distance from center normalized to 100 for the outer horizont.  */
   distance: number;
 }
 
 export function initAlter(): Alter {
   return {
     id: -1,
-    version: defaultVersion,
     name: "",
     role: "",
     roleDefault: true,
@@ -47,39 +36,22 @@ export function initAlter(): Alter {
   };
 }
 
-/** check if the alter has been changed by the user. Mandatory fields name and location are ignored.
- */
 export function hasOptionalChanges(alter: Alter) {
   return (
     !alter.roleDefault ||
     !alter.genderDefault ||
     !alter.human ||
-    alter.age != "" ||
-    alter.note != "" ||
+    alter.age !== "" ||
+    alter.note !== "" ||
     alter.deceased ||
-    alter.edgeTypeByUser != -1
+    alter.edgeTypeByUser !== -1
   );
 }
 
-/**
- * get the "closeness" of an alter in 9 concentric rings around the ego.
- * 9 = very close, ..., 0 = on or beyond the outer horizon.
- * Based on Java class Position by Nikolaus Kelis (v. 1.4.2)
- * @param alter
- * @returns integer between 9 (close) and 0 (distant)
- */
 export function naehenScore(alter: Alter): number {
   return Math.max(9 - Math.floor((alter.distance * 9) / 100), 0);
 }
 
-/**
- * check if the alter can be connected to the ego or another alter.
- * By definition it is not possible to have a connection to a deceased or non-human alter.
- * Neither is it possible to have a connection to an alter placed outside the outer horizon.
- *
- * @param alter
- * @returns true, if a connection from ego or another alter is possible
- */
 export function isConnectable(alter: Alter): boolean {
   return alter.human && !alter.deceased && alter.distance <= 100;
 }
diff --git a/src/data/ClientHistory.ts b/src/data/ClientHistory.ts
new file mode 100644
index 0000000..470a3fe
--- /dev/null
+++ b/src/data/ClientHistory.ts
@@ -0,0 +1,23 @@
+import { Version } from "@/data/Version";
+import { CurrentVersion, initCurrentVersion } from "@/data/CurrentVersion";
+
+export interface ClientHistory {
+  versions: Array<Version>;
+  currentVersion: CurrentVersion;
+}
+
+export function initClientHistoryasJSON(): string {
+  return JSON.stringify({
+    versions: [],
+    currentVersion: initCurrentVersion(),
+  });
+}
+
+export function loadClientHistory(
+  state: ClientHistory,
+  loadedText: string
+): void {
+  const loaded = JSON.parse(loadedText);
+  state.versions = loaded.versions;
+  state.currentVersion = loaded.currentVersion;
+}
diff --git a/src/data/Connection.ts b/src/data/Connection.ts
index 9487c8a..492a8fb 100644
--- a/src/data/Connection.ts
+++ b/src/data/Connection.ts
@@ -7,5 +7,4 @@
 export interface Connection {
   id1: number;
   id2: number;
-  version: number;
 }
diff --git a/src/data/CurrentVersion.ts b/src/data/CurrentVersion.ts
index 3db81b4..181488a 100644
--- a/src/data/CurrentVersion.ts
+++ b/src/data/CurrentVersion.ts
@@ -1,13 +1,11 @@
 //What is the current version? - to change version
 
-import { defaultVersion } from "@/data/Version";
-
 export interface CurrentVersion {
   id: number;
 }
 
 export function initCurrentVersion(): CurrentVersion {
   return {
-    id: defaultVersion,
+    id: 1,
   };
 }
diff --git a/src/data/Ego.ts b/src/data/Ego.ts
index b470bf8..f711f84 100644
--- a/src/data/Ego.ts
+++ b/src/data/Ego.ts
@@ -1,24 +1,20 @@
 import { defaultGender } from "./Gender";
-import { defaultVersion } from "@/data/Version";
 
 export interface Ego {
-  version: number;
   name: string;
-  age: string;
   currentGender: string;
+  age: string;
   note: string;
 }
 
 export function initEgo(): Ego {
   return {
-    version: defaultVersion,
     name: "",
     currentGender: defaultGender,
     age: "",
     note: "",
   };
 }
-
 // eslint-disable-next-line
 export function isEgo(arg: any): arg is Ego {
   return (
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 4e12a11..1afad8a 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -1,26 +1,12 @@
 import { Alter } from "@/data/Alter";
-import { Ego, initEgo } from "@/data/Ego";
+import { Ego } from "@/data/Ego";
 import { Connection } from "./Connection";
-import { Version } from "@/data/Version";
-import { CurrentVersion, initCurrentVersion } from "@/data/CurrentVersion";
+import { initEgo } from "@/data/Ego";
 
-// define your typings for the store state
 export interface NWK {
   ego: Ego;
   alteri: Array<Alter>;
   connections: Array<Connection>;
-  versions: Array<Version>;
-  currentVersion: CurrentVersion;
-}
-
-export function initNWKasJSON(): string {
-  return JSON.stringify({
-    ego: initEgo(),
-    alteri: [],
-    connections: [],
-    versions: [],
-    currentVersion: initCurrentVersion(),
-  });
 }
 
 export function loadNWK(state: NWK, loadedText: string): void {
@@ -28,6 +14,12 @@ export function loadNWK(state: NWK, loadedText: string): void {
   state.ego = loaded.ego;
   state.alteri = loaded.alteri;
   state.connections = loaded.connections;
-  state.versions = loaded.versions;
-  state.currentVersion = loaded.currentVersion;
+}
+
+export function initNWK(): NWK {
+  return {
+    ego: initEgo(),
+    alteri: [],
+    connections: [],
+  };
 }
diff --git a/src/data/Version.ts b/src/data/Version.ts
index d0cfd6f..99ed78d 100644
--- a/src/data/Version.ts
+++ b/src/data/Version.ts
@@ -1,9 +1,10 @@
-//to give the nwk a version with id, title and the date
+import { initNWK, NWK } from "@/data/NWK";
 
 export interface Version {
   id: number;
   title: string;
   date: string;
+  nwk: NWK;
 }
 
 export function initVersion(): Version {
@@ -11,7 +12,6 @@ export function initVersion(): Version {
     id: -1,
     title: "",
     date: "",
+    nwk: initNWK(),
   };
 }
-
-export const defaultVersion = 0;
diff --git a/src/store/index.ts b/src/store/index.ts
index 0b2a0ad..9684527 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,6 @@
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { Alter, initAlter } from "@/data/Alter";
-import { Version, initVersion } from "@/data/Version";
-import { NWK } from "@/data/NWK";
+import { initNWK, loadNWK, NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -19,13 +18,20 @@ import {
   viewOptionsModule,
   ViewOptionsState,
 } from "./viewOptionsModule";
-import { Ego, initEgo } from "@/data/Ego";
+import {
+  initClientHistoryasJSON,
+  loadClientHistory,
+  ClientHistory,
+} from "@/data/ClientHistory";
+import { temporaryModule } from "@/store/temporaryModule";
 
 export interface IStoreState {
   nwk: NWK;
+  version: ClientHistory;
   view: ViewOptionsState;
   unredo: IUnReDoState;
   pseudonym: PseudonymState;
+  temporaryNWK: NWK;
 }
 
 const getters = {
@@ -40,18 +46,11 @@ const getters = {
   },
 
   displayName(state: IStoreState) {
-    return (alter: Alter) => {
-      const currentVersion = state.nwk.currentVersion.id;
-      if (alter.version === currentVersion) {
-        return (
-          (alter.deceased ? SYMBOL_DECEASED : "") +
-          (state.pseudonym.active
-            ? store.getters["pseudonym/pseudonize"](alter.id)
-            : alter.name)
-        );
-      }
-      return ""; // Wenn das Alter nicht der aktuellen Version entspricht
-    };
+    return (alter: Alter) =>
+      (alter.deceased ? SYMBOL_DECEASED : "") +
+      (state.pseudonym.active
+        ? store.getters["pseudonym/pseudonize"](alter.id)
+        : alter.name);
   },
 
   // networkAnalysis(state: NWK): NetworkAnalysis {
@@ -60,35 +59,18 @@ const getters = {
 };
 
 const mutations = {
-  addVersion(state: IStoreState, initialValues: Partial<Version> = {}): void {
-    // Initialize version with default values and optionally with the passed values
-    const newVersion = {
-      ...initVersion(),
-      ...initialValues,
-    };
-
-    newVersion.id =
-      state.nwk.versions.length > 0
-        ? Math.max(...state.nwk.versions.map((v) => (v.id ? v.id : 1))) + 1
-        : 1;
-
-    // Duplicate the alteri objects with the version ID of the current version
-    const currentVersion = newVersion.id;
-    const duplicatedAlteri = state.nwk.alteri
-      .filter((alter) => alter.version === state.nwk.currentVersion.id)
-      .map((alter) => ({
-        ...alter,
-        version: currentVersion,
-      }));
-
-    // Add the new version and duplicated alteri to the respective arrays in nwk
-    state.nwk.versions.push(newVersion);
-    state.nwk.alteri.push(...duplicatedAlteri);
-
-    // Change the version of the currentVersion to the ID of the newly created version
-    store.commit("editCurrentVersion", { id: newVersion.id });
+  newNWK(state: IStoreState): void {
+    loadClientHistory(state.version, initClientHistoryasJSON());
   },
 
+  loadNWK(state: IStoreState, payload: any): void {
+    loadClientHistory(state.version, payload);
+    loadNWK(
+      state.nwk,
+      payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
+    );
+    // TODO state.nwk mit payload.versions.find(d=> d.id===payload.currentversion).nwk
+  },
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {
@@ -109,21 +91,7 @@ const mutations = {
     state.view.editIndex = 0;
     state.view.editTab = TAB_BASE;
   },
-  /*addEgo(state: IStoreState, initialValues: Partial<Ego> = {}): void {
-    // initialize alter with default values and optionally with the passed values
-    const newEgo = {
-      ...initEgo(),
-      ...initialValues,
-    };
-    applyAdaptiveNWKDefaults(newEgo, initialValues);
 
-    // new alter is always added on top of list
-    state.nwk.ego.unshift(newEgo);
-    state.view.editIndex = 0;
-    state.view.editTab = TAB_BASE;
-  },
-
-   */
   // removes a newly added alter from the list
   cancelAddAlter(state: IStoreState, alterIndex: number): void {
     // console.log("cancel " + alterIndex);
@@ -137,7 +105,7 @@ const mutations = {
     state.view.editIndex = null;
     state.view.editTab = "";
   },
-  cancelAddVersion(state: IStoreState, versionIndex: number): void {
+  /*cancelAddVersion(state: IStoreState, versionIndex: number): void {
     // canceled alter is new and therefore cannot have connections
     // don't delete with index null value (see #97)
     if (versionIndex !== null) {
@@ -147,6 +115,8 @@ const mutations = {
     state.view.editIndex = null;
     state.view.editTab = "";
   },
+
+   */
   openAlterFormById(
     state: IStoreState,
     payload: { alterId: number; tab?: string }
@@ -185,6 +155,7 @@ export const store = createStore<IStoreState>({
   modules: {
     nwk: nwkModule,
     view: viewOptionsModule,
+    temporaryNWK: temporaryModule,
   },
   getters,
   mutations,
diff --git a/src/store/localStoragePlugin.ts b/src/store/localStoragePlugin.ts
index 292cb75..fd8847c 100644
--- a/src/store/localStoragePlugin.ts
+++ b/src/store/localStoragePlugin.ts
@@ -3,7 +3,7 @@
 undo/redo inspired by <https://github.com/factorial-io/undo-redo-vuex>
 and <https://github.com/anthonygore/vuex-undo-redo> */
 
-import { initNWKasJSON } from "@/data/NWK";
+import { initClientHistoryasJSON } from "@/data/ClientHistory";
 import { MutationPayload, Store } from "vuex";
 import { IStoreState } from ".";
 import { initPseudonymState } from "./pseudonymPlugin";
@@ -22,7 +22,7 @@ export function loadStateFromStore(): string {
   if (storedNWK != null && storedNWK != "undefined") {
     return storedNWK;
   } else {
-    return initNWKasJSON();
+    return initClientHistoryasJSON();
   }
 }
 
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index 4121ac6..576a837 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -1,11 +1,12 @@
 import { Alter, isConnectable } from "@/data/Alter";
 import { Ego } from "@/data/Ego";
-import { NWK, initNWKasJSON, loadNWK } from "@/data/NWK";
+//import { ClientHistory, initNWKasJSON, loadNWK } from "@/data/ClientHistory";
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
+import { NWK } from "@/data/NWK";
 
 import { loadStateFromStore } from "./localStoragePlugin";
-import { Version } from "@/data/Version";
-import { CurrentVersion } from "@/data/CurrentVersion";
+//import { Version } from "@/data/Version";
+//import { CurrentVersion } from "@/data/CurrentVersion";
 
 // root state object.
 // each Vuex instance is just a single state tree.
@@ -22,25 +23,15 @@ const mutations = {
     state.ego = { ...state.ego, ...payload };
   },
 
-  editCurrentVersion(state: NWK, payload: Partial<CurrentVersion>): void {
-    state.currentVersion = { ...state.currentVersion, ...payload };
-  },
-
-  newNWK(state: NWK): void {
-    loadNWK(state, initNWKasJSON());
-  },
-
-  loadNWK(state: NWK, payload: string): void {
-    loadNWK(state, payload);
-  },
-
-  editVersion(
+  /*editVersion(
     state: NWK,
     payload: { index: number; changes: Partial<Version> }
   ): void {
     editVersion(state, payload.index, payload.changes);
   },
 
+   */
+
   editAlter(
     state: NWK,
     payload: { index: number; changes: Partial<Alter> }
@@ -78,7 +69,6 @@ const mutations = {
         state.connections.push({
           id1: payload[i],
           id2: payload[x],
-          version: payload[state.currentVersion.id],
         });
       }
     }
@@ -148,7 +138,7 @@ export function editAlter(
   }
 }
 
-export function editVersion(
+/*export function editVersion(
   state: NWK,
   versionIndex: number | null,
   changes: Partial<Alter>
@@ -171,6 +161,8 @@ export function editVersion(
   }
 }
 
+ */
+
 /**
  * removes all connections to and from an alter
  */
diff --git a/src/store/temporaryModule.ts b/src/store/temporaryModule.ts
new file mode 100644
index 0000000..42a99ef
--- /dev/null
+++ b/src/store/temporaryModule.ts
@@ -0,0 +1,32 @@
+import { NWK, loadNWK, initNWK } from "@/data/NWK";
+import { Ego } from "@/data/Ego";
+
+const state = {
+  temporaryNWK: initNWK(), // Initialize the temporary NWK object using initNWK() function
+};
+
+const mutations = {
+  loadTemporaryNWKData(state: any, loadedText: string) {
+    loadNWK(state.temporaryNWK, loadedText);
+  },
+  saveTemporaryNWKData(state: any) {
+    state.version.versions.push({
+      id: state.version.currentVersion.id + 1,
+      title: "",
+      date: "2023-06-15",
+      nwk: state.temporaryNWK,
+    });
+
+    // Reset temporaryNWK to its initial state
+    state.temporaryNWK = initNWK();
+  },
+  editEgo(state: NWK, payload: Partial<Ego>) {
+    state.ego = { ...state.ego, ...payload };
+  },
+};
+
+export const temporaryModule = {
+  namespaced: true,
+  state,
+  mutations,
+};

From 3eb3bcd0a57f65cfd3f7512f8db3f6358d66c6e9 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 23 Jun 2023 13:31:24 +0200
Subject: [PATCH 12/35] =?UTF-8?q?=C3=84nderung=20der=20Datenstruktur=20Wei?=
 =?UTF-8?q?terf=C3=BChrung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EgoEditForm.vue |  2 +-
 src/data/NWK.ts                |  8 ++++++++
 src/store/temporaryModule.ts   | 32 +++++++++++++-------------------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index dd60a40..881afa0 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -98,7 +98,7 @@ export default defineComponent({
 
     // name field is special because it must not be empty
     // the data item is only used for validity check & never stored
-    const egoName = ref(store.state.nwk.ego.name);
+    const egoName = ref(store.state.version.versions[0].nwk.ego.name);
 
     const egoNameInStore = computed(() => {
       return store.state.nwk.ego.name;
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 1afad8a..2f80dcc 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -23,3 +23,11 @@ export function initNWK(): NWK {
     connections: [],
   };
 }
+
+export function initNWKAsJSON(): string {
+  return JSON.stringify({
+    ego: initEgo(),
+    alteri: [],
+    connections: [],
+  });
+}
diff --git a/src/store/temporaryModule.ts b/src/store/temporaryModule.ts
index 42a99ef..9333ad8 100644
--- a/src/store/temporaryModule.ts
+++ b/src/store/temporaryModule.ts
@@ -1,32 +1,26 @@
-import { NWK, loadNWK, initNWK } from "@/data/NWK";
+import { initNWKAsJSON, loadNWK, NWK } from "@/data/NWK";
 import { Ego } from "@/data/Ego";
+import { loadStateFromStore } from "@/store/localStoragePlugin";
 
-const state = {
-  temporaryNWK: initNWK(), // Initialize the temporary NWK object using initNWK() function
-};
+const initialState = JSON.parse(loadStateFromStore());
 
 const mutations = {
-  loadTemporaryNWKData(state: any, loadedText: string) {
-    loadNWK(state.temporaryNWK, loadedText);
-  },
-  saveTemporaryNWKData(state: any) {
-    state.version.versions.push({
-      id: state.version.currentVersion.id + 1,
-      title: "",
-      date: "2023-06-15",
-      nwk: state.temporaryNWK,
-    });
-
-    // Reset temporaryNWK to its initial state
-    state.temporaryNWK = initNWK();
+  newTempNWK(state: NWK): void {
+    loadNWK(state, initNWKAsJSON());
   },
-  editEgo(state: NWK, payload: Partial<Ego>) {
+  editEgo(state: NWK, payload: Partial<Ego>): void {
     state.ego = { ...state.ego, ...payload };
   },
 };
 
 export const temporaryModule = {
   namespaced: true,
-  state,
+  state: {
+    temporaryNWK: {
+      ego: { ...initialState.ego },
+      alteri: [],
+      connections: [],
+    },
+  },
   mutations,
 };

From f6cf3b346138c944c15c04dac32601252a3560db Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 28 Jun 2023 14:55:31 +0200
Subject: [PATCH 13/35] Problemsuche bei der neuen Datenstruktur

---
 src/components/EgoEditForm.vue | 2 +-
 src/components/SideMenu.vue    | 4 ++--
 src/store/index.ts             | 5 +++--
 src/store/temporaryModule.ts   | 8 ++++++--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index 881afa0..dd60a40 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -98,7 +98,7 @@ export default defineComponent({
 
     // name field is special because it must not be empty
     // the data item is only used for validity check & never stored
-    const egoName = ref(store.state.version.versions[0].nwk.ego.name);
+    const egoName = ref(store.state.nwk.ego.name);
 
     const egoNameInStore = computed(() => {
       return store.state.nwk.ego.name;
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index e1d35b7..67cba86 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -136,7 +136,7 @@ export default defineComponent({
     const store = useStore();
 
     const newNWK = () => {
-      store.commit("newNWK");
+      store.commit("newTempNWK");
       emit("new-nwk");
     };
 
@@ -156,7 +156,7 @@ export default defineComponent({
         // TODO format checks & error messages
         // if (savedNWK.alteri && savedNWK.alteri instanceof Array) {
         // if (savedNWK.ego && isEgo(savedNWK.ego)) {
-        store.commit("loadNWK", nwkText);
+        store.commit("loadTempNWK", nwkText);
         emit("open-nwk");
       };
       fr.readAsText(files.item(0));
diff --git a/src/store/index.ts b/src/store/index.ts
index 9684527..422fd70 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -64,10 +64,11 @@ const mutations = {
   },
 
   loadNWK(state: IStoreState, payload: any): void {
-    loadClientHistory(state.version, payload);
+    //loadClientHistory(state.version, payload);
     loadNWK(
       state.nwk,
-      payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
+      //payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
+      payload.versions[0].nwk
     );
     // TODO state.nwk mit payload.versions.find(d=> d.id===payload.currentversion).nwk
   },
diff --git a/src/store/temporaryModule.ts b/src/store/temporaryModule.ts
index 9333ad8..d047199 100644
--- a/src/store/temporaryModule.ts
+++ b/src/store/temporaryModule.ts
@@ -1,6 +1,7 @@
 import { initNWKAsJSON, loadNWK, NWK } from "@/data/NWK";
 import { Ego } from "@/data/Ego";
 import { loadStateFromStore } from "@/store/localStoragePlugin";
+import { ClientHistory } from "@/data/ClientHistory";
 
 const initialState = JSON.parse(loadStateFromStore());
 
@@ -8,8 +9,11 @@ const mutations = {
   newTempNWK(state: NWK): void {
     loadNWK(state, initNWKAsJSON());
   },
-  editEgo(state: NWK, payload: Partial<Ego>): void {
-    state.ego = { ...state.ego, ...payload };
+  loadTempNWK(state: NWK): void {
+    loadNWK(state, initNWKAsJSON());
+  },
+  editEgo(state: ClientHistory, payload: Partial<Ego>): void {
+    state.versions[0].nwk.ego = { ...state.versions[0].nwk.ego, ...payload };
   },
 };
 

From cb9c98c1c942205466046fdeb644f0db3a444fb6 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 29 Jun 2023 09:59:45 +0200
Subject: [PATCH 14/35] =?UTF-8?q?R=C3=BCckg=C3=A4ngig=20machen=20mancher?=
 =?UTF-8?q?=20=C3=84nderungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SideMenu.vue | 4 ++--
 src/store/index.ts          | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 67cba86..e1d35b7 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -136,7 +136,7 @@ export default defineComponent({
     const store = useStore();
 
     const newNWK = () => {
-      store.commit("newTempNWK");
+      store.commit("newNWK");
       emit("new-nwk");
     };
 
@@ -156,7 +156,7 @@ export default defineComponent({
         // TODO format checks & error messages
         // if (savedNWK.alteri && savedNWK.alteri instanceof Array) {
         // if (savedNWK.ego && isEgo(savedNWK.ego)) {
-        store.commit("loadTempNWK", nwkText);
+        store.commit("loadNWK", nwkText);
         emit("open-nwk");
       };
       fr.readAsText(files.item(0));
diff --git a/src/store/index.ts b/src/store/index.ts
index 422fd70..07eab57 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,6 @@
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { Alter, initAlter } from "@/data/Alter";
-import { initNWK, loadNWK, NWK } from "@/data/NWK";
+import { loadNWK, NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -64,13 +64,12 @@ const mutations = {
   },
 
   loadNWK(state: IStoreState, payload: any): void {
-    //loadClientHistory(state.version, payload);
+    loadClientHistory(state.version, payload);
     loadNWK(
       state.nwk,
-      //payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
-      payload.versions[0].nwk
+      payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
     );
-    // TODO state.nwk mit payload.versions.find(d=> d.id===payload.currentversion).nwk
+    // state.nwk mit payload.versions.find(d=> d.id===payload.currentversion).nwk
   },
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values

From 27cd4dc59e3831d3c14dc87c18a6bf65d5f81d05 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Fri, 11 Aug 2023 15:20:55 +0200
Subject: [PATCH 15/35] restore some changes (e.g., remove source comments)

---
 src/components/AlteriPanel.vue |  6 ++++++
 src/data/Alter.ts              | 31 ++++++++++++++++++++++++++++---
 src/data/CurrentVersion.ts     | 11 -----------
 src/data/Ego.ts                |  3 ++-
 src/data/NWK.ts                | 22 +++++++++-------------
 5 files changed, 45 insertions(+), 28 deletions(-)
 delete mode 100644 src/data/CurrentVersion.ts

diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index db2d5b9..04089d4 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -45,16 +45,22 @@ import { useStore } from "@/store";
 
 import AlteriPanelEntry from "@/components/AlteriPanelEntry.vue";
 
+// handle from below: edit, edit-finished, <del>remove-alter</del> --> vuex store
+// manages the edited-alter (from above or by itself) --> vuex store
+
 export default defineComponent({
   components: { AlteriPanelEntry },
   props: {
+    // toogled after each click on the map (resets keyboard cursor)
     mapclicked: Boolean,
   },
   setup() {
     const store = useStore();
 
+    // knows list of Alter from vuex
     const alteri = computed(() => store.state.nwk.alteri);
 
+    // button to add Alter
     const addAlter = () => {
       store.commit("addAlter");
     };
diff --git a/src/data/Alter.ts b/src/data/Alter.ts
index 59bf713..a3c7b91 100644
--- a/src/data/Alter.ts
+++ b/src/data/Alter.ts
@@ -4,16 +4,24 @@ export interface Alter {
   id: number;
   name: string;
   role: string;
+  /** if the role has its initial default value and has NOT been changed by user */
   roleDefault: boolean;
   human: boolean;
   currentGender: string;
+  /** if the gender has its initial default value and has NOT been changed by user */
   genderDefault: boolean;
   age: string;
   note: string;
   deceased: boolean;
+  /** connection to ego: 1 ... normal, 0 ... currently no edge, 2 ... multiplex edge */
   edgeType: number;
+  /** the edge type previously set by user (0, 1, or 2); initially -1 until changed by user */
   edgeTypeByUser: number;
+
+  /** angle from x-axis between -180° and +180° */
   angle: number;
+
+  /** distance from center normalized to 100 for the outer horizont.  */
   distance: number;
 }
 
@@ -36,22 +44,39 @@ export function initAlter(): Alter {
   };
 }
 
+/** check if the alter has been changed by the user. Mandatory fields name and location are ignored.
+ */
 export function hasOptionalChanges(alter: Alter) {
   return (
     !alter.roleDefault ||
     !alter.genderDefault ||
     !alter.human ||
-    alter.age !== "" ||
-    alter.note !== "" ||
+    alter.age != "" ||
+    alter.note != "" ||
     alter.deceased ||
-    alter.edgeTypeByUser !== -1
+    alter.edgeTypeByUser != -1
   );
 }
 
+/**
+ * get the "closeness" of an alter in 9 concentric rings around the ego.
+ * 9 = very close, ..., 0 = on or beyond the outer horizon.
+ * Based on Java class Position by Nikolaus Kelis (v. 1.4.2)
+ * @param alter
+ * @returns integer between 9 (close) and 0 (distant)
+ */
 export function naehenScore(alter: Alter): number {
   return Math.max(9 - Math.floor((alter.distance * 9) / 100), 0);
 }
 
+/**
+ * check if the alter can be connected to the ego or another alter.
+ * By definition it is not possible to have a connection to a deceased or non-human alter.
+ * Neither is it possible to have a connection to an alter placed outside the outer horizon.
+ *
+ * @param alter
+ * @returns true, if a connection from ego or another alter is possible
+ */
 export function isConnectable(alter: Alter): boolean {
   return alter.human && !alter.deceased && alter.distance <= 100;
 }
diff --git a/src/data/CurrentVersion.ts b/src/data/CurrentVersion.ts
deleted file mode 100644
index 181488a..0000000
--- a/src/data/CurrentVersion.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-//What is the current version? - to change version
-
-export interface CurrentVersion {
-  id: number;
-}
-
-export function initCurrentVersion(): CurrentVersion {
-  return {
-    id: 1,
-  };
-}
diff --git a/src/data/Ego.ts b/src/data/Ego.ts
index f711f84..2b2fcdf 100644
--- a/src/data/Ego.ts
+++ b/src/data/Ego.ts
@@ -2,8 +2,8 @@ import { defaultGender } from "./Gender";
 
 export interface Ego {
   name: string;
-  currentGender: string;
   age: string;
+  currentGender: string;
   note: string;
 }
 
@@ -15,6 +15,7 @@ export function initEgo(): Ego {
     note: "",
   };
 }
+
 // eslint-disable-next-line
 export function isEgo(arg: any): arg is Ego {
   return (
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 2f80dcc..5b894e8 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -1,19 +1,16 @@
 import { Alter } from "@/data/Alter";
-import { Ego } from "@/data/Ego";
+import { Ego, initEgo } from "@/data/Ego";
 import { Connection } from "./Connection";
-import { initEgo } from "@/data/Ego";
 
+// define your typings for the store state
 export interface NWK {
   ego: Ego;
   alteri: Array<Alter>;
   connections: Array<Connection>;
 }
 
-export function loadNWK(state: NWK, loadedText: string): void {
-  const loaded = JSON.parse(loadedText);
-  state.ego = loaded.ego;
-  state.alteri = loaded.alteri;
-  state.connections = loaded.connections;
+export function initNWKasJSON(): string {
+  return JSON.stringify(initNWK());
 }
 
 export function initNWK(): NWK {
@@ -24,10 +21,9 @@ export function initNWK(): NWK {
   };
 }
 
-export function initNWKAsJSON(): string {
-  return JSON.stringify({
-    ego: initEgo(),
-    alteri: [],
-    connections: [],
-  });
+export function loadNWK(state: NWK, loadedText: string): void {
+  const loaded = JSON.parse(loadedText);
+  state.ego = loaded.ego;
+  state.alteri = loaded.alteri;
+  state.connections = loaded.connections;
 }

From f19386a440ccfd126f6da9ca2099343fddab197d Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 14 Aug 2023 08:59:04 +0200
Subject: [PATCH 16/35] refactor data structures and store (pt1): rename
 entities

NWK -> NWK
Version -> NWKVersion
ClientHistory -> NWKRecord
---
 src/data/ClientHistory.ts              | 23 ---------------
 src/data/NWKRecord.ts                  | 24 ++++++++++++++++
 src/data/{Version.ts => NWKVersion.ts} |  8 ++++--
 src/store/index.ts                     | 40 +++++++++++++++-----------
 src/store/localStoragePlugin.ts        |  7 +++--
 src/store/nwkModule.ts                 |  3 +-
 src/store/nwkRecordModule.ts           | 19 ++++++++++++
 src/store/temporaryModule.ts           | 30 -------------------
 8 files changed, 78 insertions(+), 76 deletions(-)
 delete mode 100644 src/data/ClientHistory.ts
 create mode 100644 src/data/NWKRecord.ts
 rename src/data/{Version.ts => NWKVersion.ts} (55%)
 create mode 100644 src/store/nwkRecordModule.ts
 delete mode 100644 src/store/temporaryModule.ts

diff --git a/src/data/ClientHistory.ts b/src/data/ClientHistory.ts
deleted file mode 100644
index 470a3fe..0000000
--- a/src/data/ClientHistory.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Version } from "@/data/Version";
-import { CurrentVersion, initCurrentVersion } from "@/data/CurrentVersion";
-
-export interface ClientHistory {
-  versions: Array<Version>;
-  currentVersion: CurrentVersion;
-}
-
-export function initClientHistoryasJSON(): string {
-  return JSON.stringify({
-    versions: [],
-    currentVersion: initCurrentVersion(),
-  });
-}
-
-export function loadClientHistory(
-  state: ClientHistory,
-  loadedText: string
-): void {
-  const loaded = JSON.parse(loadedText);
-  state.versions = loaded.versions;
-  state.currentVersion = loaded.currentVersion;
-}
diff --git a/src/data/NWKRecord.ts b/src/data/NWKRecord.ts
new file mode 100644
index 0000000..cf662ef
--- /dev/null
+++ b/src/data/NWKRecord.ts
@@ -0,0 +1,24 @@
+import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
+
+export interface NWKRecord {
+  versions: Array<NWKVersion>;
+  currentVersion: number;
+}
+
+export function initNWKRecordAsJSON(): string {
+  return JSON.stringify(initNWKRecord());
+}
+
+export function initNWKRecord(): NWKRecord {
+  const version = initNWKVersion();
+  return {
+    versions: [version],
+    currentVersion: version.id,
+  };
+}
+
+export function loadNWKRecord(state: NWKRecord, loadedText: string): void {
+  const loaded = JSON.parse(loadedText);
+  state.versions = loaded.versions;
+  state.currentVersion = loaded.currentVersion;
+}
diff --git a/src/data/Version.ts b/src/data/NWKVersion.ts
similarity index 55%
rename from src/data/Version.ts
rename to src/data/NWKVersion.ts
index 99ed78d..853efd7 100644
--- a/src/data/Version.ts
+++ b/src/data/NWKVersion.ts
@@ -1,15 +1,17 @@
 import { initNWK, NWK } from "@/data/NWK";
 
-export interface Version {
+const DEFAULT_NWK_VERSION = 1;
+
+export interface NWKVersion {
   id: number;
   title: string;
   date: string;
   nwk: NWK;
 }
 
-export function initVersion(): Version {
+export function initNWKVersion(): NWKVersion {
   return {
-    id: -1,
+    id: DEFAULT_NWK_VERSION,
     title: "",
     date: "",
     nwk: initNWK(),
diff --git a/src/store/index.ts b/src/store/index.ts
index 07eab57..41ecbcb 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,6 @@
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { Alter, initAlter } from "@/data/Alter";
-import { loadNWK, NWK } from "@/data/NWK";
+import { initNWK, loadNWK, NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -19,19 +19,19 @@ import {
   ViewOptionsState,
 } from "./viewOptionsModule";
 import {
-  initClientHistoryasJSON,
-  loadClientHistory,
-  ClientHistory,
-} from "@/data/ClientHistory";
-import { temporaryModule } from "@/store/temporaryModule";
+  initNWKRecord,
+  initNWKRecordAsJSON,
+  loadNWKRecord,
+  NWKRecord,
+} from "@/data/NWKRecord";
+import { nwkRecordModule } from "@/store/nwkRecordModule";
 
 export interface IStoreState {
   nwk: NWK;
-  version: ClientHistory;
+  record: NWKRecord;
   view: ViewOptionsState;
   unredo: IUnReDoState;
   pseudonym: PseudonymState;
-  temporaryNWK: NWK;
 }
 
 const getters = {
@@ -60,17 +60,25 @@ const getters = {
 
 const mutations = {
   newNWK(state: IStoreState): void {
-    loadClientHistory(state.version, initClientHistoryasJSON());
+    // loadNWKRecord(state.record, initNWKRecordAsJSON());
+    state.record = initNWKRecord();
+    // set nwk as side-effects
+    // assume new history has exactly 1 empty nwk
+    state.nwk = state.record.versions[0].nwk;
   },
 
-  loadNWK(state: IStoreState, payload: any): void {
-    loadClientHistory(state.version, payload);
-    loadNWK(
-      state.nwk,
-      payload.versions.find((d: any) => d.id === payload.currentVersion).nwk
+  loadNWK(state: IStoreState, payload: string): void {
+    // TODO handle loading of JSON with just nwk
+    loadNWKRecord(state.record, payload);
+
+    // set nwk as side-effects
+    // TODO try out if a shared reference to the same nwk object works (otherwise use structuredClone)
+    const version = state.record.versions.find(
+      (d) => d.id === state.record.currentVersion
     );
-    // state.nwk mit payload.versions.find(d=> d.id===payload.currentversion).nwk
+    state.nwk = version ? version.nwk : initNWK();
   },
+
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {
@@ -154,8 +162,8 @@ export const store = createStore<IStoreState>({
   strict: process.env.NODE_ENV !== "production",
   modules: {
     nwk: nwkModule,
+    record: nwkRecordModule,
     view: viewOptionsModule,
-    temporaryNWK: temporaryModule,
   },
   getters,
   mutations,
diff --git a/src/store/localStoragePlugin.ts b/src/store/localStoragePlugin.ts
index fd8847c..c5d1336 100644
--- a/src/store/localStoragePlugin.ts
+++ b/src/store/localStoragePlugin.ts
@@ -3,7 +3,7 @@
 undo/redo inspired by <https://github.com/factorial-io/undo-redo-vuex>
 and <https://github.com/anthonygore/vuex-undo-redo> */
 
-import { initClientHistoryasJSON } from "@/data/ClientHistory";
+import { initNWKRecordAsJSON } from "@/data/NWKRecord";
 import { MutationPayload, Store } from "vuex";
 import { IStoreState } from ".";
 import { initPseudonymState } from "./pseudonymPlugin";
@@ -22,7 +22,7 @@ export function loadStateFromStore(): string {
   if (storedNWK != null && storedNWK != "undefined") {
     return storedNWK;
   } else {
-    return initClientHistoryasJSON();
+    return initNWKRecordAsJSON();
   }
 }
 
@@ -114,7 +114,8 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         mutation.type.startsWith("view/")
       )
     ) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateAfter.nwk));
+      console.log(stateAfter.record);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateAfter.record));
     }
   });
 };
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index 576a837..ed0ca74 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -10,7 +10,8 @@ import { loadStateFromStore } from "./localStoragePlugin";
 
 // root state object.
 // each Vuex instance is just a single state tree.
-const state = JSON.parse(loadStateFromStore());
+const state = JSON.parse(loadStateFromStore()).versions[0].nwk;
+// TODO this creates a different object from the NWK in the records module!
 
 // mutations are operations that actually mutate the state.
 // each mutation handler gets the entire state tree as the
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
new file mode 100644
index 0000000..a6ee729
--- /dev/null
+++ b/src/store/nwkRecordModule.ts
@@ -0,0 +1,19 @@
+import { loadStateFromStore } from "@/store/localStoragePlugin";
+// import { initNWKRecordAsJSON } from "@/data/NWKRecord";
+
+const state = JSON.parse(loadStateFromStore());
+// const state = JSON.parse(initNWKRecordAsJSON());
+
+const mutations = {
+  // n.b. new and load are at root level b/c side-effects on nwkModule
+
+  // editEgo(state: NWKHistory, payload: Partial<Ego>): void {
+  //   state.versions[0].nwk.ego = { ...state.versions[0].nwk.ego, ...payload };
+  // },
+};
+
+export const nwkRecordModule = {
+  namespaced: true,
+  state,
+  mutations,
+};
diff --git a/src/store/temporaryModule.ts b/src/store/temporaryModule.ts
deleted file mode 100644
index d047199..0000000
--- a/src/store/temporaryModule.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { initNWKAsJSON, loadNWK, NWK } from "@/data/NWK";
-import { Ego } from "@/data/Ego";
-import { loadStateFromStore } from "@/store/localStoragePlugin";
-import { ClientHistory } from "@/data/ClientHistory";
-
-const initialState = JSON.parse(loadStateFromStore());
-
-const mutations = {
-  newTempNWK(state: NWK): void {
-    loadNWK(state, initNWKAsJSON());
-  },
-  loadTempNWK(state: NWK): void {
-    loadNWK(state, initNWKAsJSON());
-  },
-  editEgo(state: ClientHistory, payload: Partial<Ego>): void {
-    state.versions[0].nwk.ego = { ...state.versions[0].nwk.ego, ...payload };
-  },
-};
-
-export const temporaryModule = {
-  namespaced: true,
-  state: {
-    temporaryNWK: {
-      ego: { ...initialState.ego },
-      alteri: [],
-      connections: [],
-    },
-  },
-  mutations,
-};

From b11860bbf94a96b76d3a790787f4ed27ae38fc86 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 14 Aug 2023 09:49:55 +0200
Subject: [PATCH 17/35] persist NWK and NWKRecord separately in
 localStoragePlugin

---
 src/data/NWK.ts                 |  7 ++-----
 src/store/index.ts              |  9 ++-------
 src/store/localStoragePlugin.ts | 33 +++++++++++++++++++++++++++------
 src/store/nwkModule.ts          |  6 +++---
 src/store/nwkRecordModule.ts    |  5 ++---
 5 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 5b894e8..ec2a9e9 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -9,10 +9,6 @@ export interface NWK {
   connections: Array<Connection>;
 }
 
-export function initNWKasJSON(): string {
-  return JSON.stringify(initNWK());
-}
-
 export function initNWK(): NWK {
   return {
     ego: initEgo(),
@@ -21,7 +17,8 @@ export function initNWK(): NWK {
   };
 }
 
-export function loadNWK(state: NWK, loadedText: string): void {
+/** load NWK independently from NWKRecord. Only to restore from localstorage */
+export function restoreNWK(state: NWK, loadedText: string): void {
   const loaded = JSON.parse(loadedText);
   state.ego = loaded.ego;
   state.alteri = loaded.alteri;
diff --git a/src/store/index.ts b/src/store/index.ts
index 41ecbcb..918aeb0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,6 @@
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { Alter, initAlter } from "@/data/Alter";
-import { initNWK, loadNWK, NWK } from "@/data/NWK";
+import { initNWK, NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -18,12 +18,7 @@ import {
   viewOptionsModule,
   ViewOptionsState,
 } from "./viewOptionsModule";
-import {
-  initNWKRecord,
-  initNWKRecordAsJSON,
-  loadNWKRecord,
-  NWKRecord,
-} from "@/data/NWKRecord";
+import { initNWKRecord, loadNWKRecord, NWKRecord } from "@/data/NWKRecord";
 import { nwkRecordModule } from "@/store/nwkRecordModule";
 
 export interface IStoreState {
diff --git a/src/store/localStoragePlugin.ts b/src/store/localStoragePlugin.ts
index c5d1336..ab8492e 100644
--- a/src/store/localStoragePlugin.ts
+++ b/src/store/localStoragePlugin.ts
@@ -4,12 +4,15 @@ undo/redo inspired by <https://github.com/factorial-io/undo-redo-vuex>
 and <https://github.com/anthonygore/vuex-undo-redo> */
 
 import { initNWKRecordAsJSON } from "@/data/NWKRecord";
+import { initNWK } from "@/data/NWK";
 import { MutationPayload, Store } from "vuex";
 import { IStoreState } from ".";
 import { initPseudonymState } from "./pseudonymPlugin";
 import { initViewOptionsState } from "./viewOptionsModule";
 
 const STORAGE_KEY = "easynwk";
+const STORAGE_KEY_NWK = STORAGE_KEY + "_nwk";
+const STORAGE_KEY_RECORD = STORAGE_KEY + "_record";
 const UNREDO_MODULE = "unredo";
 
 export interface IUnReDoState {
@@ -17,10 +20,19 @@ export interface IUnReDoState {
   redoCount: number;
 }
 
-export function loadStateFromStore(): string {
-  const storedNWK = localStorage.getItem(STORAGE_KEY);
-  if (storedNWK != null && storedNWK != "undefined") {
+export function loadNWKStateFromStore(): string {
+  const storedNWK = localStorage.getItem(STORAGE_KEY_NWK);
+  if (storedNWK && storedNWK != "undefined") {
     return storedNWK;
+  } else {
+    return JSON.stringify(initNWK());
+  }
+}
+
+export function loadNWKRecordStateFromStore(): string {
+  const storedNWKRecord = localStorage.getItem(STORAGE_KEY_RECORD);
+  if (storedNWKRecord && storedNWKRecord != "undefined") {
+    return storedNWKRecord;
   } else {
     return initNWKRecordAsJSON();
   }
@@ -29,7 +41,8 @@ export function loadStateFromStore(): string {
 export const localStoragePlugin = (store: Store<IStoreState>): void => {
   // keep track of undo history as local (non-reactive) vars
   const history = {
-    initialState: loadStateFromStore(),
+    initialNWKState: loadNWKStateFromStore(),
+    initialNWKRecordState: loadNWKRecordStateFromStore(),
     done: [] as Array<MutationPayload>,
     undone: [] as Array<MutationPayload>,
     replaying: false,
@@ -57,7 +70,9 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         history.replaying = true;
         // reset to initial state
         store.state.pseudonym = initPseudonymState();
-        store.commit("loadNWK", history.initialState);
+        store.commit("loadNWKRecord", history.initialNWKRecordState);
+        // the cached NWK could be more up to date than the record
+        store.commit("restoreNWK", history.initialNWKState);
         store.state.view = initViewOptionsState();
         // replay all mutations (but last)
         for (const c of history.done) {
@@ -115,7 +130,13 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
       )
     ) {
       console.log(stateAfter.record);
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateAfter.record));
+      localStorage.setItem(STORAGE_KEY_NWK, JSON.stringify(stateAfter.nwk));
+
+      // TODO persist NWKRecord only for some mutations
+      localStorage.setItem(
+        STORAGE_KEY_RECORD,
+        JSON.stringify(stateAfter.record)
+      );
     }
   });
 };
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index ed0ca74..bb236ab 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -4,14 +4,14 @@ import { Ego } from "@/data/Ego";
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 import { NWK } from "@/data/NWK";
 
-import { loadStateFromStore } from "./localStoragePlugin";
+import { loadNWKStateFromStore } from "./localStoragePlugin";
 //import { Version } from "@/data/Version";
 //import { CurrentVersion } from "@/data/CurrentVersion";
 
 // root state object.
 // each Vuex instance is just a single state tree.
-const state = JSON.parse(loadStateFromStore()).versions[0].nwk;
-// TODO this creates a different object from the NWK in the records module!
+const state = JSON.parse(loadNWKStateFromStore());
+// TODO this creates a different object from the NWK in the nwkRecords module!
 
 // mutations are operations that actually mutate the state.
 // each mutation handler gets the entire state tree as the
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index a6ee729..cfafaba 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -1,12 +1,11 @@
-import { loadStateFromStore } from "@/store/localStoragePlugin";
+import { loadNWKRecordStateFromStore } from "@/store/localStoragePlugin";
 // import { initNWKRecordAsJSON } from "@/data/NWKRecord";
 
-const state = JSON.parse(loadStateFromStore());
+const state = JSON.parse(loadNWKRecordStateFromStore());
 // const state = JSON.parse(initNWKRecordAsJSON());
 
 const mutations = {
   // n.b. new and load are at root level b/c side-effects on nwkModule
-
   // editEgo(state: NWKHistory, payload: Partial<Ego>): void {
   //   state.versions[0].nwk.ego = { ...state.versions[0].nwk.ego, ...payload };
   // },

From b934aece16dbea1e8ecd51a749300b61baf91807 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 14 Aug 2023 15:06:05 +0200
Subject: [PATCH 18/35] mutations to work with nwkRecordsModule

---
 src/components/ComparisonOptionsPanel.vue |  30 ++++--
 src/components/SideMenu.vue               |   8 +-
 src/data/NWKRecord.ts                     |  26 ++++-
 src/store/index.ts                        |  35 +++----
 src/store/localStoragePlugin.ts           |   5 +-
 src/store/nwkModule.ts                    |  40 +-------
 src/store/nwkRecordModule.ts              | 111 ++++++++++++++++++++--
 src/structuredClone.d.ts                  |  10 ++
 8 files changed, 182 insertions(+), 83 deletions(-)
 create mode 100644 src/structuredClone.d.ts

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 004582b..5ef46e3 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -14,10 +14,10 @@
     <div class="panel-block form">
       <div class="field is-horizontal">
         <div class="field-body">
-          <div id="view-settings" class="field" v-if="isOpen">
+          <div id="record-settings" class="field" v-if="isOpen">
             <div class="control">
               <div class="buttons">
-                <button class="button">
+                <button class="button" @click="addBlankNWK">
                   <span class="icon">
                     <font-awesome-icon icon="plus-circle" />
                   </span>
@@ -25,7 +25,8 @@
                   <span></span>
                 </button>
 
-                <button class="button" @click="newVersion = !newVersion">
+                <!-- @click="newVersion = !newVersion" -->
+                <button class="button" @click="duplicateNWK">
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
@@ -108,6 +109,13 @@
           </div>
         </div>
       </div>
+      <!-- temporary debug code -->
+      <div class="field is-horizontal">
+        NWKs:&nbsp;
+        <span v-for="ver in versions" :key="ver.id"
+          >{{ ver.id }} ({{ ver.nwk.alteri.length }} alteri),
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -119,12 +127,13 @@ import { useStore } from "@/store";
 //type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
-  props: {
-    version: {
-      type: Object,
-      required: true,
-    },
-  },
+  // AR, 14 Aug 2023: prop version not needed? current version is in state.record
+  // props: {
+  //   version: {
+  //     type: Object,
+  //     required: true,
+  //   },
+  // },
   setup() {
     const store = useStore();
 
@@ -172,7 +181,10 @@ export default defineComponent({
       isOpen: isOpen,
       newVersion: newVersion,
       addNewVersion: addNewVersion,
+      addBlankNWK: () => store.commit("addNWKVersion"),
+      duplicateNWK: () => store.commit("addNWKVersion", true),
       isDisabled: isDisabled,
+      versions: computed(() => store.state.record.versions),
       //commitEdit,
       //cancelAddVersion,
     };
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index e1d35b7..7e0515f 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -156,14 +156,16 @@ export default defineComponent({
         // TODO format checks & error messages
         // if (savedNWK.alteri && savedNWK.alteri instanceof Array) {
         // if (savedNWK.ego && isEgo(savedNWK.ego)) {
-        store.commit("loadNWK", nwkText);
+        store.commit("loadJSON", nwkText);
         emit("open-nwk");
       };
       fr.readAsText(files.item(0));
     };
 
     const save = () => {
-      let nwkJSON = JSON.stringify(store.state.nwk);
+      store.commit("prepareToSaveJSON");
+
+      let nwkJSON = JSON.stringify(store.state.record);
       let filename = store.state.nwk.ego.name;
 
       if (store.state.pseudonym.active) {
@@ -183,7 +185,7 @@ export default defineComponent({
       fetch(DEMO_URL)
         .then((res) => res.text())
         .then((nwkText) => {
-          store.commit("loadNWK", nwkText);
+          store.commit("loadJSON", nwkText);
           emit("open-nwk");
         })
         .catch((err) => {
diff --git a/src/data/NWKRecord.ts b/src/data/NWKRecord.ts
index cf662ef..749d533 100644
--- a/src/data/NWKRecord.ts
+++ b/src/data/NWKRecord.ts
@@ -17,8 +17,30 @@ export function initNWKRecord(): NWKRecord {
   };
 }
 
+/**
+ * fills a NWKRecord object from a JSON string.
+ * Supports a single NWK object for backwards compatibility.
+ *
+ * @param state
+ * @param loadedText
+ */
 export function loadNWKRecord(state: NWKRecord, loadedText: string): void {
   const loaded = JSON.parse(loadedText);
-  state.versions = loaded.versions;
-  state.currentVersion = loaded.currentVersion;
+
+  if (loaded.currentVersion && loaded.versions) {
+    // looks like a NWKRecord object
+    state.versions = loaded.versions;
+    state.currentVersion = loaded.currentVersion;
+  } else if (loaded.ego && loaded.alteri && loaded.connections) {
+    // looks like a NWK object
+    const version = initNWKVersion();
+    version.nwk = loaded;
+    state.versions = [version];
+    state.currentVersion = version.id;
+  } else {
+    // looks unexpectedly
+    throw new TypeError(
+      "The loaded data is neither a NWKRecord nor a single NWK."
+    );
+  }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 918aeb0..a31d2e5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,3 @@
-import { SYMBOL_DECEASED } from "@/assets/utils";
-import { Alter, initAlter } from "@/data/Alter";
-import { initNWK, NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -8,6 +5,12 @@ import {
   useStore as baseUseStore,
   Store,
 } from "vuex";
+
+import { SYMBOL_DECEASED } from "@/assets/utils";
+import { Alter, initAlter } from "@/data/Alter";
+import { NWK } from "@/data/NWK";
+import { NWKRecord } from "@/data/NWKRecord";
+
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 
 import { IUnReDoState, localStoragePlugin } from "./localStoragePlugin";
@@ -18,8 +21,10 @@ import {
   viewOptionsModule,
   ViewOptionsState,
 } from "./viewOptionsModule";
-import { initNWKRecord, loadNWKRecord, NWKRecord } from "@/data/NWKRecord";
-import { nwkRecordModule } from "@/store/nwkRecordModule";
+import {
+  nwkRecordModule,
+  nwkRecordMutationsAtRoot,
+} from "@/store/nwkRecordModule";
 
 export interface IStoreState {
   nwk: NWK;
@@ -54,25 +59,7 @@ const getters = {
 };
 
 const mutations = {
-  newNWK(state: IStoreState): void {
-    // loadNWKRecord(state.record, initNWKRecordAsJSON());
-    state.record = initNWKRecord();
-    // set nwk as side-effects
-    // assume new history has exactly 1 empty nwk
-    state.nwk = state.record.versions[0].nwk;
-  },
-
-  loadNWK(state: IStoreState, payload: string): void {
-    // TODO handle loading of JSON with just nwk
-    loadNWKRecord(state.record, payload);
-
-    // set nwk as side-effects
-    // TODO try out if a shared reference to the same nwk object works (otherwise use structuredClone)
-    const version = state.record.versions.find(
-      (d) => d.id === state.record.currentVersion
-    );
-    state.nwk = version ? version.nwk : initNWK();
-  },
+  ...nwkRecordMutationsAtRoot, // import mutations related to NWKRecord
 
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
diff --git a/src/store/localStoragePlugin.ts b/src/store/localStoragePlugin.ts
index ab8492e..b17e35e 100644
--- a/src/store/localStoragePlugin.ts
+++ b/src/store/localStoragePlugin.ts
@@ -70,9 +70,9 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         history.replaying = true;
         // reset to initial state
         store.state.pseudonym = initPseudonymState();
-        store.commit("loadNWKRecord", history.initialNWKRecordState);
+        store.commit("loadJSON", history.initialNWKRecordState);
         // the cached NWK could be more up to date than the record
-        store.commit("restoreNWK", history.initialNWKState);
+        store.commit("restoreNWKFromJSON", history.initialNWKState);
         store.state.view = initViewOptionsState();
         // replay all mutations (but last)
         for (const c of history.done) {
@@ -129,7 +129,6 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         mutation.type.startsWith("view/")
       )
     ) {
-      console.log(stateAfter.record);
       localStorage.setItem(STORAGE_KEY_NWK, JSON.stringify(stateAfter.nwk));
 
       // TODO persist NWKRecord only for some mutations
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index bb236ab..c3dfc31 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -1,12 +1,9 @@
 import { Alter, isConnectable } from "@/data/Alter";
 import { Ego } from "@/data/Ego";
-//import { ClientHistory, initNWKasJSON, loadNWK } from "@/data/ClientHistory";
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
-import { NWK } from "@/data/NWK";
+import { NWK, restoreNWK } from "@/data/NWK";
 
 import { loadNWKStateFromStore } from "./localStoragePlugin";
-//import { Version } from "@/data/Version";
-//import { CurrentVersion } from "@/data/CurrentVersion";
 
 // root state object.
 // each Vuex instance is just a single state tree.
@@ -24,15 +21,11 @@ const mutations = {
     state.ego = { ...state.ego, ...payload };
   },
 
-  /*editVersion(
-    state: NWK,
-    payload: { index: number; changes: Partial<Version> }
-  ): void {
-    editVersion(state, payload.index, payload.changes);
+  /** load NWK independently from NWKRecord. Only to restore from localstorage */
+  restoreNWKFromJSON(state: NWK, payload: string): void {
+    restoreNWK(state, payload);
   },
 
-   */
-
   editAlter(
     state: NWK,
     payload: { index: number; changes: Partial<Alter> }
@@ -139,31 +132,6 @@ export function editAlter(
   }
 }
 
-/*export function editVersion(
-  state: NWK,
-  versionIndex: number | null,
-  changes: Partial<Alter>
-): void {
-  // lookup does not work for 2 parallel mutations (form change & map click)
-  if (
-    versionIndex != null &&
-    versionIndex >= 0 &&
-    versionIndex < state.versions.length
-  ) {
-    // based on vuex\examples\composition\todomvc\store\mutations.js
-    // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
-    const changedVersion = {
-      ...state.versions[versionIndex],
-      ...changes,
-    };
-    state.versions.splice(versionIndex, 1, changedVersion);
-  } else {
-    console.warn("version index invalid or out of bounds: " + versionIndex);
-  }
-}
-
- */
-
 /**
  * removes all connections to and from an alter
  */
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index cfafaba..ac71bfd 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -1,16 +1,115 @@
 import { loadNWKRecordStateFromStore } from "@/store/localStoragePlugin";
-// import { initNWKRecordAsJSON } from "@/data/NWKRecord";
+import { IStoreState } from ".";
+import { NWKRecord, initNWKRecord, loadNWKRecord } from "@/data/NWKRecord";
+import { initNWK } from "@/data/NWK";
+import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
 
 const state = JSON.parse(loadNWKRecordStateFromStore());
-// const state = JSON.parse(initNWKRecordAsJSON());
 
 const mutations = {
-  // n.b. new and load are at root level b/c side-effects on nwkModule
-  // editEgo(state: NWKHistory, payload: Partial<Ego>): void {
-  //   state.versions[0].nwk.ego = { ...state.versions[0].nwk.ego, ...payload };
-  // },
+  // n.b. new and load are at root level b/c side-effects on nwkModule (see below)
+  editVersion(
+    state: NWKRecord,
+    payload: { index: number; changes: Partial<NWKVersion> }
+  ): void {
+    editVersion(state, payload.index, payload.changes);
+  },
 };
 
+export const nwkRecordMutationsAtRoot = {
+  newNWK(state: IStoreState): void {
+    // loadNWKRecord(state.record, initNWKRecordAsJSON());
+    state.record = initNWKRecord();
+    // set nwk as side-effects
+    // assume new history has exactly 1 empty nwk
+    state.nwk = state.record.versions[0].nwk;
+  },
+
+  loadJSON(state: IStoreState, payload: string): void {
+    // data type needs to handle a JSON with just nwk
+    loadNWKRecord(state.record, payload);
+
+    // set nwk as side-effects
+    // n.b. we try out if a shared reference to the same nwk object works (otherwise use structuredClone)
+    const version = state.record.versions.find(
+      (d) => d.id === state.record.currentVersion
+    );
+    state.nwk = version ? version.nwk : initNWK();
+  },
+
+  prepareToSaveJSON(state: IStoreState): void {
+    ensureNWKisLinkedInRecord(state);
+  },
+
+  switchNWK(state: IStoreState, versionId: number) {
+    ensureNWKisLinkedInRecord(state);
+
+    const newVersion = state.record.versions.find((d) => d.id === versionId);
+    if (newVersion) {
+      state.nwk = newVersion.nwk;
+      state.record.currentVersion = versionId;
+    }
+  },
+
+  addNWKVersion(state: IStoreState, duplicateAll = false) {
+    ensureNWKisLinkedInRecord(state);
+
+    const newVersion = initNWKVersion();
+    // set id depending on versions in list
+    newVersion.id =
+      state.record.versions.length > 0
+        ? Math.max(...state.record.versions.map((v) => (v.id ? v.id : 1))) + 1
+        : 1;
+    if (duplicateAll) {
+      newVersion.nwk = structuredClone(state.nwk);
+    } else {
+      // even a blank NWK, clones the Ego
+      newVersion.nwk.ego = structuredClone(state.nwk.ego);
+    }
+
+    state.nwk = newVersion.nwk;
+    state.record.versions.push(newVersion);
+    state.record.currentVersion = newVersion.id;
+  },
+
+  // TODO delete version
+  // TODO import version
+};
+
+/** make the NWK object in the current version of the NWKRecord point to the same reference as the NWK object in  */
+function ensureNWKisLinkedInRecord(state: IStoreState) {
+  const curVersion = state.record.versions.find(
+    (d) => d.id === state.record.currentVersion
+  );
+  if (curVersion) {
+    curVersion.nwk = state.nwk;
+  } else {
+    throw "The current NWK version id was not found in the record.";
+  }
+}
+
+function editVersion(
+  state: NWKRecord,
+  versionIndex: number | null,
+  changes: Partial<NWKVersion>
+): void {
+  if (
+    versionIndex != null &&
+    versionIndex >= 0 &&
+    versionIndex < state.versions.length
+  ) {
+    // based on vuex\examples\composition\todomvc\store\mutations.js
+    // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
+    const changedVersion = {
+      ...state.versions[versionIndex],
+      ...changes,
+    };
+    state.versions.splice(versionIndex, 1, changedVersion);
+  } else {
+    console.warn("version index invalid or out of bounds: " + versionIndex);
+  }
+}
+
 export const nwkRecordModule = {
   namespaced: true,
   state,
diff --git a/src/structuredClone.d.ts b/src/structuredClone.d.ts
new file mode 100644
index 0000000..b0045ba
--- /dev/null
+++ b/src/structuredClone.d.ts
@@ -0,0 +1,10 @@
+// workaround for structuredClone() until upgrade to TypeScript ~4.7
+// cp. <https://stackoverflow.com/a/72306923/1140589>
+
+interface WindowOrWorkerGlobalScope {
+  structuredClone(value: any, options?: StructuredSerializeOptions): any;
+}
+declare function structuredClone(
+  value: any,
+  options?: StructuredSerializeOptions
+): any;

From e2b793da2a07ed48d7a564eba9772af6569191ce Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 21 Aug 2023 15:11:23 +0200
Subject: [PATCH 19/35] Anpassung des Frontends

---
 src/components/ComparisonOptionsPanel.vue | 55 ++++++++++++----
 src/components/NetworkMap.vue             | 77 +++++++++++++++++++++--
 src/store/viewOptionsModule.ts            |  2 +
 3 files changed, 119 insertions(+), 15 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 5ef46e3..cd056f7 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -17,7 +17,11 @@
           <div id="record-settings" class="field" v-if="isOpen">
             <div class="control">
               <div class="buttons">
-                <button class="button" @click="addBlankNWK">
+                <button
+                  class="button"
+                  @click="addBlankNWK"
+                  @click.stop="newVersion = true"
+                >
                   <span class="icon">
                     <font-awesome-icon icon="plus-circle" />
                   </span>
@@ -33,7 +37,11 @@
                   <span>Karte duplizieren</span>
                 </button>
 
-                <button class="button" :disabled="isDisabled">
+                <button
+                  class="button"
+                  @click.stop="toggleChange"
+                  :disabled="isDisabled"
+                >
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
                   </span>
@@ -65,6 +73,7 @@
                           class="input"
                           type="text"
                           placeholder="Titel der aktuellen Version"
+                          v-model="newVersionTitle"
                         />
                       </div>
                     </div>
@@ -80,7 +89,11 @@
                   <div class="field-body">
                     <div class="field">
                       <div class="control">
-                        <input class="input" type="date" />
+                        <input
+                          class="input"
+                          type="date"
+                          v-model="newVersionDate"
+                        />
                       </div>
                     </div>
                   </div>
@@ -123,8 +136,9 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
+import { NWKVersion } from "@/data/NWKVersion";
 
-//type InputType = HTMLInputElement | HTMLTextAreaElement;
+type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
   // AR, 14 Aug 2023: prop version not needed? current version is in state.record
@@ -143,15 +157,33 @@ export default defineComponent({
 
     const isDisabled = ref(true);
 
-    /*if (store.state.nwk.versions.length < 1) {
+    const newNWK = ref(false);
+
+    const newVersionTitle = ref(""); // To capture the "Titel" input value
+    const newVersionDate = ref(""); // To capture the "Datum" input value
+
+    function addNewVersion(): any {
+      const changes: Partial<NWKVersion> = {
+        title: newVersionTitle.value,
+        date: newVersionDate.value,
+      };
+      store.commit("editVersion", {
+        versionIndex: store.state.record.currentVersion,
+        changes,
+      });
+
+      // Reset the input values
+      newVersionTitle.value = "";
+      newVersionDate.value = "";
+    }
+
+    if (store.state.record.versions.length < 2) {
       console.log(isDisabled.value);
       isDisabled.value = true;
     } else {
       isDisabled.value = false;
     }
 
-     */
-
     /*const addingNewVersion = ref(!(props.version?.date.length > 0));
 
     const cancelAddVersion = () => {
@@ -171,18 +203,19 @@ export default defineComponent({
 
      */
 
-    const addNewVersion = () => {
-      store.commit("addVersion");
-    };
-
     return {
       nwkcomparison: computed(() => store.state.view.nwkcomparison),
+      nwkchange: computed(() => store.state.view.nwkchange),
       toggleComparison: () => store.commit("view/toggle", "nwkcomparison"),
+      toggleChange: () => store.commit("view/toggle", "nwkchange"),
       isOpen: isOpen,
       newVersion: newVersion,
+      newNWK: newNWK,
       addNewVersion: addNewVersion,
       addBlankNWK: () => store.commit("addNWKVersion"),
       duplicateNWK: () => store.commit("addNWKVersion", true),
+      newVersionTitle,
+      newVersionDate,
       isDisabled: isDisabled,
       versions: computed(() => store.state.record.versions),
       //commitEdit,
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 5fab4ae..d4efd16 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,12 +1,58 @@
 <template>
+  <div style="position: relative" v-if="changeNWK">
+    <svg width="400" height="120">
+      <!-- Increased height to accommodate text -->
+      <line x1="5" y1="50" x2="395" y2="50" class="comparisonLine"></line>
+      <a v-for="(version, index) in versions" :key="index">
+        <circle
+          :cx="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          cy="50"
+          r="9"
+          :class="{
+            comparisonCircle: version.id !== currentVersion,
+            'comparisonCircle-selected': version.id === currentVersion,
+          }"
+          @click="handleCircleClick(version.id)"
+        />
+        <text
+          :x="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          y="35"
+          text-anchor="middle"
+          font-size="12"
+          :class="{ 'text-selected': version.id === currentVersion }"
+        >
+          {{ version.name ? version.name : version.date }}
+        </text>
+      </a>
+    </svg>
+  </div>
   <div style="position: relative" v-if="showComparison">
-    <svg width="50%" height="100">
-      <line x1="5" y1="50" x2="750" y2="50" class="comparisonLine"></line>
-      <a>
-        <circle cx="97.5%" cy="50" r="9" class="comparisonCircle" />
+    <svg width="400" height="120">
+      <!-- Increased height to accommodate text -->
+      <line x1="5" y1="50" x2="395" y2="50" class="comparisonLine"></line>
+      <a v-for="(version, index) in versions" :key="index">
+        <circle
+          :cx="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          cy="50"
+          r="9"
+          :class="{
+            comparisonCircle: version.id !== currentVersion,
+            'comparisonCircle-selected': version.id === currentVersion,
+          }"
+        />
+        <text
+          :x="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          y="35"
+          text-anchor="middle"
+          font-size="12"
+          :class="{ 'text-selected': version.id === currentVersion }"
+        >
+          {{ version.name ? version.name : version.date }}
+        </text>
       </a>
     </svg>
   </div>
+
   <svg id="nwkmap" width="100%" height="100%" viewBox="-106 -106 212 212">
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -277,6 +323,10 @@ export default defineComponent({
   setup: function (props, { emit }) {
     const store = useStore();
 
+    const versions = computed(() => store.state.record.versions);
+
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
     const isEditMode = computed(() => {
       return (
         store.state.view.editIndex != null &&
@@ -496,6 +546,13 @@ export default defineComponent({
       return getRoleAbbrev(role);
     };
 
+    function handleCircleClick(versionId: number) {
+      if (versionId !== store.state.record.currentVersion) {
+        store.commit("switchNWK", versionId);
+        console.log("Changed Version");
+      }
+    }
+
     let clickTimeoutId: number | null = null;
     const clickAlter = (alter: Alter) => {
       if (isConnectMode.value && store.state.view.editIndex != null) {
@@ -603,6 +660,7 @@ export default defineComponent({
       alteriNames: computed(() => store.state.view.alteriNames),
       showHorizons: computed(() => store.state.view.horizons),
       showComparison: computed(() => store.state.view.nwkcomparison),
+      changeNWK: computed(() => store.state.view.nwkchange),
       connections: computed(() => store.state.view.connections),
       brushBtns,
       isClusterConnectPossible,
@@ -610,6 +668,9 @@ export default defineComponent({
       clusterConnect,
       clusterDisconnect,
       clearBrush,
+      versions,
+      currentVersion,
+      handleCircleClick,
       Sectors,
       SYMBOL_DECEASED,
       // TODO browser detection b/c vector-effect seems not to work in Safari only as of 14 Dec 2021
@@ -732,4 +793,12 @@ line.select {
   display: block;
   margin-bottom: 0.5rem;
 }
+
+.comparisonCircle {
+  fill: #d6dae9;
+}
+
+.comparisonCircle-selected {
+  fill: #ffc37d;
+}
 </style>
diff --git a/src/store/viewOptionsModule.ts b/src/store/viewOptionsModule.ts
index 29c3d73..ff2d37d 100644
--- a/src/store/viewOptionsModule.ts
+++ b/src/store/viewOptionsModule.ts
@@ -9,6 +9,7 @@ export interface ViewOptionsFlags {
   ageInNwk: boolean;
   roleInNwk: boolean;
   nwkcomparison: boolean;
+  nwkchange: boolean;
 }
 
 export interface ViewOptionsState extends ViewOptionsFlags {
@@ -27,6 +28,7 @@ export function initViewOptionsState(): ViewOptionsState {
     ageInNwk: false,
     roleInNwk: false,
     nwkcomparison: false,
+    nwkchange: false,
 
     selected: new Set<number>(),
     editIndex: null,

From a0ea4998fbfeffc2ad9f0f50573ac38d9dc07be5 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 22 Aug 2023 12:27:23 +0200
Subject: [PATCH 20/35] Ansatz mit anderem Component

---
 src/components/ComparisonEditForm.vue     |  96 +++++++++++++
 src/components/ComparisonOptionsPanel.vue | 159 +++++++++-------------
 src/components/NetworkMap.vue             |   6 +-
 3 files changed, 164 insertions(+), 97 deletions(-)
 create mode 100644 src/components/ComparisonEditForm.vue

diff --git a/src/components/ComparisonEditForm.vue b/src/components/ComparisonEditForm.vue
new file mode 100644
index 0000000..4c3c0c8
--- /dev/null
+++ b/src/components/ComparisonEditForm.vue
@@ -0,0 +1,96 @@
+<template v-if="versionIndex === store.state.record.currentVersion">
+  <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">Titel</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <input
+            class="input"
+            type="text"
+            placeholder="Titel der aktuellen Version"
+            :value="version.title"
+            @blur="commitEdit($event, 'title')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+
+  <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">Datum</label>
+    </div>
+    <div class="field-body">
+      <div class="field">
+        <div class="control">
+          <input
+            class="input"
+            type="date"
+            :value="version.date"
+            @blur="commitEdit($event, 'date')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+
+  <div class="buttons">
+    <button class="button is-primary" @click="editVersionFinished($event)">
+      <span>Speichern</span>
+    </button>
+
+    <button class="button is-light">
+      <span>Abbrechen</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, watch } from "vue";
+import { store, useStore } from "@/store";
+import { NWKVersion } from "@/data/NWKVersion";
+
+type InputType = HTMLInputElement | HTMLTextAreaElement;
+
+export default defineComponent({
+  props: {
+    // gets Alter as prop cp. ToDo demo
+    version: {
+      type: Object,
+      required: true,
+    },
+    versionIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const store = useStore();
+    const commitEdit = (evt: FocusEvent, field: keyof NWKVersion) => {
+      const value = (evt.target as InputType).value.trim();
+      if (props.version && value !== props.version[field]) {
+        const changes = { [field]: value };
+        const payload = { index: store.state.view.editIndex, changes };
+        store.commit("record/editVersion", payload);
+      }
+    };
+
+    const editVersionFinished = (_event: Event) => {
+      store.commit("record/editVersion");
+    };
+
+    return {
+      commitEdit,
+      editVersionFinished,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index cd056f7..a77622a 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -37,85 +37,28 @@
                   <span>Karte duplizieren</span>
                 </button>
 
-                <button
-                  class="button"
-                  @click.stop="toggleChange"
-                  :disabled="isDisabled"
-                >
+                <button class="button" @click.stop="toggleChange">
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
                   </span>
                   <span>Karte wechseln</span>
                 </button>
 
-                <button
-                  class="button"
-                  @click.stop="toggleComparison"
-                  :disabled="isDisabled"
-                >
+                <button class="button" @click.stop="toggleComparison">
                   <span class="icon">
                     <font-awesome-icon icon="compress-arrows-alt" />
                   </span>
                   <span v-if="!nwkcomparison">Vergleich ein</span>
                   <span v-else>Vergleich aus</span>
                 </button>
-              </div>
-
-              <div v-if="newVersion">
-                <div class="field is-horizontal">
-                  <div class="field-label is-normal">
-                    <label class="label">Titel</label>
-                  </div>
-                  <div class="field-body">
-                    <div class="field">
-                      <div class="control">
-                        <input
-                          class="input"
-                          type="text"
-                          placeholder="Titel der aktuellen Version"
-                          v-model="newVersionTitle"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
 
-                <br />
-
-                <div class="field is-horizontal">
-                  <div class="field-label is-normal">
-                    <label class="label">Datum</label>
-                  </div>
-                  <div class="field-body">
-                    <div class="field">
-                      <div class="control">
-                        <input
-                          class="input"
-                          type="date"
-                          v-model="newVersionDate"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <br />
-
-                <div class="buttons">
-                  <button
-                    class="button is-primary"
-                    @click="addNewVersion"
-                    @click.stop="newVersion = false"
-                  >
-                    <span>Speichern</span>
-                  </button>
-
-                  <button
-                    class="button is-light"
-                    @click.stop="newVersion = false"
-                  >
-                    <span>Abbrechen</span>
-                  </button>
+                <div v-if="newVersion">
+                  <ComparisonEditForm
+                    v-for="(version, i) in currentVersion"
+                    :key="version.id"
+                    :version="version"
+                    :versionIndex="i"
+                  ></ComparisonEditForm>
                 </div>
               </div>
             </div>
@@ -136,21 +79,26 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
-import { NWKVersion } from "@/data/NWKVersion";
+
+import ComparisonEditForm from "@/components/ComparisonEditForm.vue";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
+  components: { ComparisonEditForm },
   // AR, 14 Aug 2023: prop version not needed? current version is in state.record
-  // props: {
-  //   version: {
-  //     type: Object,
-  //     required: true,
-  //   },
-  // },
+  /*props: {
+    version: {
+      type: Object,
+      required: true,
+    },
+  },
+   */
   setup() {
     const store = useStore();
 
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
     const isOpen = ref(false);
 
     const newVersion = ref(false);
@@ -159,23 +107,41 @@ export default defineComponent({
 
     const newNWK = ref(false);
 
-    const newVersionTitle = ref(""); // To capture the "Titel" input value
+    /*const newVersionTitle = ref(""); // To capture the "Titel" input value
     const newVersionDate = ref(""); // To capture the "Datum" input value
 
-    function addNewVersion(): any {
-      const changes: Partial<NWKVersion> = {
-        title: newVersionTitle.value,
-        date: newVersionDate.value,
-      };
-      store.commit("editVersion", {
-        versionIndex: store.state.record.currentVersion,
-        changes,
-      });
-
-      // Reset the input values
-      newVersionTitle.value = "";
-      newVersionDate.value = "";
-    }
+    const addNewVersion = () => {
+      const versionIndex: number = currentVersion.value;
+
+      if (
+        versionIndex !== undefined &&
+        versionIndex >= 0 &&
+        versionIndex < store.state.record.versions.length
+      ) {
+        const changes: Partial<NWKVersion> = {
+          title: newVersionTitle.value,
+          date: newVersionDate.value,
+        };
+        store.commit("record/editVersion", {
+          versionIndex,
+          changes,
+        });
+
+        // Reset the input values
+        newVersionTitle.value = "";
+        newVersionDate.value = "";
+      } else {
+        console.error(
+          "Invalid version index:",
+          versionIndex,
+          typeof versionIndex
+        );
+        console.log(
+          typeof store.state.record.currentVersion,
+          typeof store.state.record.versions.length
+        );
+      }
+    };
 
     if (store.state.record.versions.length < 2) {
       console.log(isDisabled.value);
@@ -184,7 +150,7 @@ export default defineComponent({
       isDisabled.value = false;
     }
 
-    /*const addingNewVersion = ref(!(props.version?.date.length > 0));
+    const addingNewVersion = ref(!(props.version?.date.length > 0));
 
     const cancelAddVersion = () => {
       if (addingNewVersion.value) {
@@ -192,7 +158,11 @@ export default defineComponent({
       }
     };
 
-    const commitEdit = (evt: FocusEvent, field: keyof Version) => {
+
+
+
+
+    const commitEdit = (evt: FocusEvent, field: keyof NWKVersion) => {
       const value = (evt.target as InputType).value.trim();
       if (props.version && value !== props.version[field]) {
         const changes = { [field]: value };
@@ -200,7 +170,6 @@ export default defineComponent({
         store.commit("editVersion", payload);
       }
     };
-
      */
 
     return {
@@ -211,12 +180,14 @@ export default defineComponent({
       isOpen: isOpen,
       newVersion: newVersion,
       newNWK: newNWK,
-      addNewVersion: addNewVersion,
+      //commitEdit,
+      //addNewVersion: addNewVersion,
       addBlankNWK: () => store.commit("addNWKVersion"),
       duplicateNWK: () => store.commit("addNWKVersion", true),
-      newVersionTitle,
-      newVersionDate,
+      //newVersionTitle,
+      //newVersionDate,
       isDisabled: isDisabled,
+      currentVersion: currentVersion,
       versions: computed(() => store.state.record.versions),
       //commitEdit,
       //cancelAddVersion,
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index d4efd16..c94cf1f 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,11 +1,11 @@
 <template>
   <div style="position: relative" v-if="changeNWK">
-    <svg width="400" height="120">
+    <svg width="800" height="120">
       <!-- Increased height to accommodate text -->
-      <line x1="5" y1="50" x2="395" y2="50" class="comparisonLine"></line>
+      <line x1="0" y1="50" x2="800" y2="50" class="comparisonLine"></line>
       <a v-for="(version, index) in versions" :key="index">
         <circle
-          :cx="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          :cx="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
           cy="50"
           r="9"
           :class="{

From 37ead93609e3edac3e3d81d6ac1b5c83adb027ab Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 22 Aug 2023 13:16:45 +0200
Subject: [PATCH 21/35] Titel und Datum von neuer Version speichern

---
 src/components/ComparisonEditForm.vue     |  96 ------------------
 src/components/ComparisonOptionsPanel.vue | 116 ++++++++++++++--------
 2 files changed, 72 insertions(+), 140 deletions(-)
 delete mode 100644 src/components/ComparisonEditForm.vue

diff --git a/src/components/ComparisonEditForm.vue b/src/components/ComparisonEditForm.vue
deleted file mode 100644
index 4c3c0c8..0000000
--- a/src/components/ComparisonEditForm.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template v-if="versionIndex === store.state.record.currentVersion">
-  <div class="field is-horizontal">
-    <div class="field-label is-normal">
-      <label class="label">Titel</label>
-    </div>
-    <div class="field-body">
-      <div class="field">
-        <div class="control">
-          <input
-            class="input"
-            type="text"
-            placeholder="Titel der aktuellen Version"
-            :value="version.title"
-            @blur="commitEdit($event, 'title')"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <br />
-
-  <div class="field is-horizontal">
-    <div class="field-label is-normal">
-      <label class="label">Datum</label>
-    </div>
-    <div class="field-body">
-      <div class="field">
-        <div class="control">
-          <input
-            class="input"
-            type="date"
-            :value="version.date"
-            @blur="commitEdit($event, 'date')"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <br />
-
-  <div class="buttons">
-    <button class="button is-primary" @click="editVersionFinished($event)">
-      <span>Speichern</span>
-    </button>
-
-    <button class="button is-light">
-      <span>Abbrechen</span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from "vue";
-import { store, useStore } from "@/store";
-import { NWKVersion } from "@/data/NWKVersion";
-
-type InputType = HTMLInputElement | HTMLTextAreaElement;
-
-export default defineComponent({
-  props: {
-    // gets Alter as prop cp. ToDo demo
-    version: {
-      type: Object,
-      required: true,
-    },
-    versionIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props) {
-    const store = useStore();
-    const commitEdit = (evt: FocusEvent, field: keyof NWKVersion) => {
-      const value = (evt.target as InputType).value.trim();
-      if (props.version && value !== props.version[field]) {
-        const changes = { [field]: value };
-        const payload = { index: store.state.view.editIndex, changes };
-        store.commit("record/editVersion", payload);
-      }
-    };
-
-    const editVersionFinished = (_event: Event) => {
-      store.commit("record/editVersion");
-    };
-
-    return {
-      commitEdit,
-      editVersionFinished,
-    };
-  },
-});
-</script>
-
-<style scoped></style>
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index a77622a..7a5ae04 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -53,12 +53,58 @@
                 </button>
 
                 <div v-if="newVersion">
-                  <ComparisonEditForm
-                    v-for="(version, i) in currentVersion"
-                    :key="version.id"
-                    :version="version"
-                    :versionIndex="i"
-                  ></ComparisonEditForm>
+                  <div class="field is-horizontal">
+                    <div class="field-label is-normal">
+                      <label class="label">Titel</label>
+                    </div>
+                    <div class="field-body">
+                      <div class="field">
+                        <div class="control">
+                          <input
+                            class="input"
+                            type="text"
+                            placeholder="Titel der aktuellen Version"
+                            v-model="newVersionTitle"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <br />
+
+                  <div class="field is-horizontal">
+                    <div class="field-label is-normal">
+                      <label class="label">Datum</label>
+                    </div>
+                    <div class="field-body">
+                      <div class="field">
+                        <div class="control">
+                          <input
+                            class="input"
+                            type="date"
+                            v-model="newVersionDate"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <br />
+
+                  <div class="buttons">
+                    <button
+                      class="button is-primary"
+                      @click="addNewVersion()"
+                      @click.stop="newVersion = false"
+                    >
+                      <span>Speichern</span>
+                    </button>
+
+                    <button class="button is-light">
+                      <span>Abbrechen</span>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -79,13 +125,11 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
-
-import ComparisonEditForm from "@/components/ComparisonEditForm.vue";
+import { NWKVersion } from "@/data/NWKVersion";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
-  components: { ComparisonEditForm },
   // AR, 14 Aug 2023: prop version not needed? current version is in state.record
   /*props: {
     version: {
@@ -107,42 +151,26 @@ export default defineComponent({
 
     const newNWK = ref(false);
 
-    /*const newVersionTitle = ref(""); // To capture the "Titel" input value
+    const newVersionTitle = ref(""); // To capture the "Titel" input value
     const newVersionDate = ref(""); // To capture the "Datum" input value
 
-    const addNewVersion = () => {
-      const versionIndex: number = currentVersion.value;
-
-      if (
-        versionIndex !== undefined &&
-        versionIndex >= 0 &&
-        versionIndex < store.state.record.versions.length
-      ) {
-        const changes: Partial<NWKVersion> = {
-          title: newVersionTitle.value,
-          date: newVersionDate.value,
-        };
-        store.commit("record/editVersion", {
-          versionIndex,
-          changes,
-        });
-
-        // Reset the input values
-        newVersionTitle.value = "";
-        newVersionDate.value = "";
-      } else {
-        console.error(
-          "Invalid version index:",
-          versionIndex,
-          typeof versionIndex
-        );
-        console.log(
-          typeof store.state.record.currentVersion,
-          typeof store.state.record.versions.length
-        );
-      }
+    const editVersion = () => {
+      const index: any = currentVersion.value - 1;
+      const changes: Partial<NWKVersion> = {
+        title: newVersionTitle.value,
+        date: newVersionDate.value,
+      };
+      store.commit("record/editVersion", {
+        index,
+        changes,
+      });
+
+      // Reset the input values
+      newVersionTitle.value = "";
+      newVersionDate.value = "";
     };
 
+    /*
     if (store.state.record.versions.length < 2) {
       console.log(isDisabled.value);
       isDisabled.value = true;
@@ -181,11 +209,11 @@ export default defineComponent({
       newVersion: newVersion,
       newNWK: newNWK,
       //commitEdit,
-      //addNewVersion: addNewVersion,
+      addNewVersion: editVersion,
       addBlankNWK: () => store.commit("addNWKVersion"),
       duplicateNWK: () => store.commit("addNWKVersion", true),
-      //newVersionTitle,
-      //newVersionDate,
+      newVersionTitle,
+      newVersionDate,
       isDisabled: isDisabled,
       currentVersion: currentVersion,
       versions: computed(() => store.state.record.versions),

From c3350781750015412596ad3c364fac8f7d986118 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 22 Aug 2023 14:50:05 +0200
Subject: [PATCH 22/35] =?UTF-8?q?Anpassung=20des=20"aktuelle=20Karte"=20te?=
 =?UTF-8?q?xt=20&=20Anfang=20einer=20L=C3=B6schfunktion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 53 ++++++++++++++++++++---
 src/components/NetworkMap.vue             | 40 ++++++++++++-----
 src/store/nwkRecordModule.ts              |  7 ++-
 3 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 7a5ae04..179ecaf 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -30,7 +30,11 @@
                 </button>
 
                 <!-- @click="newVersion = !newVersion" -->
-                <button class="button" @click="duplicateNWK">
+                <button
+                  class="button"
+                  @click="duplicateNWK"
+                  @click.stop="newVersion = true"
+                >
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
@@ -101,9 +105,19 @@
                       <span>Speichern</span>
                     </button>
 
-                    <button class="button is-light">
+                    <button
+                      class="button is-light"
+                      @click.stop="newVersion = false"
+                    >
                       <span>Abbrechen</span>
                     </button>
+
+                    <button
+                      class="button is-danger"
+                      @click.stop="deleteVersion"
+                    >
+                      <span>Karte Löschen</span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -111,12 +125,30 @@
           </div>
         </div>
       </div>
-      <!-- temporary debug code -->
+
       <div class="field is-horizontal">
-        NWKs:&nbsp;
-        <span v-for="ver in versions" :key="ver.id"
-          >{{ ver.id }} ({{ ver.nwk.alteri.length }} alteri),
+        Aktuelle Karte:&nbsp;
+        <span>
+          {{ versions[currentVersion - 1].title }}
+          vom
+          {{
+            versions[currentVersion - 1].date.substring(8, 10) +
+            "." +
+            versions[currentVersion - 1].date.substring(5, 7) +
+            "." +
+            versions[currentVersion - 1].date.substring(0, 4)
+          }}&nbsp;
         </span>
+        <button
+          class="button is-small"
+          title="Ankerperson bearbeiten"
+          v-if="isOpen"
+          @click="newVersion = true"
+        >
+          <span class="icon">
+            <font-awesome-icon icon="pencil-alt" />
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -170,6 +202,14 @@ export default defineComponent({
       newVersionDate.value = "";
     };
 
+    const deleteVersion = () => {
+      const index: any = currentVersion.value - 1;
+      store.commit("removeVersion", {
+        index,
+      });
+      store.commit("switchNWK", store.state.record.versions.length);
+    };
+
     /*
     if (store.state.record.versions.length < 2) {
       console.log(isDisabled.value);
@@ -209,6 +249,7 @@ export default defineComponent({
       newVersion: newVersion,
       newNWK: newNWK,
       //commitEdit,
+      deleteVersion,
       addNewVersion: editVersion,
       addBlankNWK: () => store.commit("addNWKVersion"),
       duplicateNWK: () => store.commit("addNWKVersion", true),
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index c94cf1f..ae15f67 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -15,24 +15,31 @@
           @click="handleCircleClick(version.id)"
         />
         <text
-          :x="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          :x="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
           y="35"
           text-anchor="middle"
-          font-size="12"
-          :class="{ 'text-selected': version.id === currentVersion }"
+          class="versionText"
         >
-          {{ version.name ? version.name : version.date }}
+          {{
+            version.title
+              ? version.title
+              : version.date.substring(8, 10) +
+                "." +
+                version.date.substring(5, 7) +
+                "." +
+                version.date.substring(0, 4)
+          }}
         </text>
       </a>
     </svg>
   </div>
   <div style="position: relative" v-if="showComparison">
-    <svg width="400" height="120">
+    <svg width="800" height="120">
       <!-- Increased height to accommodate text -->
-      <line x1="5" y1="50" x2="395" y2="50" class="comparisonLine"></line>
+      <line x1="5" y1="50" x2="800" y2="50" class="comparisonLine"></line>
       <a v-for="(version, index) in versions" :key="index">
         <circle
-          :cx="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          :cx="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
           cy="50"
           r="9"
           :class="{
@@ -41,13 +48,20 @@
           }"
         />
         <text
-          :x="`${10 + (380 / (versions.length + 1)) * (index + 1)}`"
+          :x="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
           y="35"
           text-anchor="middle"
-          font-size="12"
-          :class="{ 'text-selected': version.id === currentVersion }"
+          class="versionText"
         >
-          {{ version.name ? version.name : version.date }}
+          {{
+            version.title
+              ? version.title
+              : version.date.substring(8, 10) +
+                "." +
+                version.date.substring(5, 7) +
+                "." +
+                version.date.substring(0, 4)
+          }}
         </text>
       </a>
     </svg>
@@ -706,6 +720,10 @@ text {
   user-select: none;
 }
 
+.versionText {
+  font-size: 12px !important;
+}
+
 text.ego {
   font-style: italic;
 }
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index ac71bfd..8988eb1 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -1,7 +1,7 @@
 import { loadNWKRecordStateFromStore } from "@/store/localStoragePlugin";
 import { IStoreState } from ".";
 import { NWKRecord, initNWKRecord, loadNWKRecord } from "@/data/NWKRecord";
-import { initNWK } from "@/data/NWK";
+import { initNWK, NWK } from "@/data/NWK";
 import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
 
 const state = JSON.parse(loadNWKRecordStateFromStore());
@@ -25,6 +25,11 @@ export const nwkRecordMutationsAtRoot = {
     state.nwk = state.record.versions[0].nwk;
   },
 
+  removeVersion(state: IStoreState, versionIndex: number): void {
+    console.log(versionIndex);
+    state.record.versions.splice(versionIndex, 1);
+  },
+
   loadJSON(state: IStoreState, payload: string): void {
     // data type needs to handle a JSON with just nwk
     loadNWKRecord(state.record, payload);

From 5818d1ed575783584c150ce99e288f0303802578 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 23 Aug 2023 14:49:44 +0200
Subject: [PATCH 23/35] =?UTF-8?q?L=C3=B6schfunktion=20fortgef=C3=BChrt=20u?=
 =?UTF-8?q?nd=20Anzeige=20angepasst?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 106 ++++++++--------------
 src/data/NWKVersion.ts                    |   2 +-
 src/store/nwkRecordModule.ts              |  21 ++++-
 3 files changed, 59 insertions(+), 70 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 179ecaf..0f794ed 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -16,6 +16,34 @@
         <div class="field-body">
           <div id="record-settings" class="field" v-if="isOpen">
             <div class="control">
+              <div class="field is-horizontal">
+                Aktuelle Karte:&nbsp;
+                <span>
+                  {{ versions[currentVersion - 1].title }}
+                  vom
+                  {{
+                    versions[currentVersion - 1].date.substring(8, 10) +
+                    "." +
+                    versions[currentVersion - 1].date.substring(5, 7) +
+                    "." +
+                    versions[currentVersion - 1].date.substring(0, 4)
+                  }}&nbsp;
+                </span>
+                <button
+                  class="button is-small"
+                  title="Ankerperson bearbeiten"
+                  v-if="isOpen"
+                  @click="
+                    newVersion = true;
+                    editText = true;
+                  "
+                >
+                  <span class="icon">
+                    <font-awesome-icon icon="pencil-alt" />
+                  </span>
+                </button>
+              </div>
+              <br />
               <div class="buttons">
                 <button
                   class="button"
@@ -55,7 +83,6 @@
                   <span v-if="!nwkcomparison">Vergleich ein</span>
                   <span v-else>Vergleich aus</span>
                 </button>
-
                 <div v-if="newVersion">
                   <div class="field is-horizontal">
                     <div class="field-label is-normal">
@@ -115,6 +142,7 @@
                     <button
                       class="button is-danger"
                       @click.stop="deleteVersion"
+                      :disabled="versions.length <= 1"
                     >
                       <span>Karte Löschen</span>
                     </button>
@@ -125,31 +153,6 @@
           </div>
         </div>
       </div>
-
-      <div class="field is-horizontal">
-        Aktuelle Karte:&nbsp;
-        <span>
-          {{ versions[currentVersion - 1].title }}
-          vom
-          {{
-            versions[currentVersion - 1].date.substring(8, 10) +
-            "." +
-            versions[currentVersion - 1].date.substring(5, 7) +
-            "." +
-            versions[currentVersion - 1].date.substring(0, 4)
-          }}&nbsp;
-        </span>
-        <button
-          class="button is-small"
-          title="Ankerperson bearbeiten"
-          v-if="isOpen"
-          @click="newVersion = true"
-        >
-          <span class="icon">
-            <font-awesome-icon icon="pencil-alt" />
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -179,12 +182,18 @@ export default defineComponent({
 
     const newVersion = ref(false);
 
+    const editText = ref(false);
+
     const isDisabled = ref(true);
 
     const newNWK = ref(false);
 
-    const newVersionTitle = ref(""); // To capture the "Titel" input value
-    const newVersionDate = ref(""); // To capture the "Datum" input value
+    const newVersionTitle = ref(
+      store.state.record.versions[currentVersion.value - 1].title
+    );
+    const newVersionDate = ref(
+      store.state.record.versions[currentVersion.value - 1].date
+    );
 
     const editVersion = () => {
       const index: any = currentVersion.value - 1;
@@ -196,55 +205,20 @@ export default defineComponent({
         index,
         changes,
       });
-
-      // Reset the input values
-      newVersionTitle.value = "";
       newVersionDate.value = "";
     };
 
     const deleteVersion = () => {
-      const index: any = currentVersion.value - 1;
-      store.commit("removeVersion", {
-        index,
-      });
-      store.commit("switchNWK", store.state.record.versions.length);
-    };
-
-    /*
-    if (store.state.record.versions.length < 2) {
-      console.log(isDisabled.value);
-      isDisabled.value = true;
-    } else {
-      isDisabled.value = false;
-    }
-
-    const addingNewVersion = ref(!(props.version?.date.length > 0));
-
-    const cancelAddVersion = () => {
-      if (addingNewVersion.value) {
-        store.commit("cancelAddVersion", store.state.view.editIndex);
-      }
-    };
-
-
-
-
-
-    const commitEdit = (evt: FocusEvent, field: keyof NWKVersion) => {
-      const value = (evt.target as InputType).value.trim();
-      if (props.version && value !== props.version[field]) {
-        const changes = { [field]: value };
-        const payload = { index: store.state.view.editIndex, changes };
-        store.commit("editVersion", payload);
-      }
+      const index: number = currentVersion.value - 1;
+      store.commit("removeCurrentVersion", index);
     };
-     */
 
     return {
       nwkcomparison: computed(() => store.state.view.nwkcomparison),
       nwkchange: computed(() => store.state.view.nwkchange),
       toggleComparison: () => store.commit("view/toggle", "nwkcomparison"),
       toggleChange: () => store.commit("view/toggle", "nwkchange"),
+      editText: editText,
       isOpen: isOpen,
       newVersion: newVersion,
       newNWK: newNWK,
diff --git a/src/data/NWKVersion.ts b/src/data/NWKVersion.ts
index 853efd7..9a86d69 100644
--- a/src/data/NWKVersion.ts
+++ b/src/data/NWKVersion.ts
@@ -13,7 +13,7 @@ export function initNWKVersion(): NWKVersion {
   return {
     id: DEFAULT_NWK_VERSION,
     title: "",
-    date: "",
+    date: "2023-08-23",
     nwk: initNWK(),
   };
 }
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index 8988eb1..2d8c7f7 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -25,9 +25,24 @@ export const nwkRecordMutationsAtRoot = {
     state.nwk = state.record.versions[0].nwk;
   },
 
-  removeVersion(state: IStoreState, versionIndex: number): void {
-    console.log(versionIndex);
-    state.record.versions.splice(versionIndex, 1);
+  removeCurrentVersion(state: IStoreState, index: number): void {
+    if (state.record.versions.length > 1) {
+      console.table(state.record.versions);
+      console.log(state.record.currentVersion);
+      state.record.versions.splice(index, 1);
+      console.table(state.record.versions);
+
+      const newVersion = state.record.versions.find(
+        (d) => d.id === state.record.versions.length - 1
+      );
+      if (newVersion) {
+        state.nwk = newVersion.nwk;
+        state.record.currentVersion = newVersion.id;
+        console.log("new version id: " + newVersion.id);
+      }
+    } else {
+      console.log("No version to delete");
+    }
   },
 
   loadJSON(state: IStoreState, payload: string): void {

From 377ed39700a1cb0689c3206d92bf679d10ec6b47 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 28 Aug 2023 11:36:37 +0200
Subject: [PATCH 24/35] Aktuelles Datum als default bei Versionen

---
 src/components/ComparisonOptionsPanel.vue | 31 +++++++++++++------
 src/data/NWKVersion.ts                    |  2 +-
 src/store/nwkRecordModule.ts              | 36 +++++++++++++++--------
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 0f794ed..1e5e127 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -18,15 +18,15 @@
             <div class="control">
               <div class="field is-horizontal">
                 Aktuelle Karte:&nbsp;
-                <span>
-                  {{ versions[currentVersion - 1].title }}
+                <span v-if="versions.length && currentVersion > 0">
+                  {{ versions[currentVersion - 1]?.title || "" }}
                   vom
                   {{
-                    versions[currentVersion - 1].date.substring(8, 10) +
+                    versions[currentVersion - 1]?.date?.substring(8, 10) +
                     "." +
-                    versions[currentVersion - 1].date.substring(5, 7) +
+                    versions[currentVersion - 1]?.date?.substring(5, 7) +
                     "." +
-                    versions[currentVersion - 1].date.substring(0, 4)
+                    versions[currentVersion - 1]?.date?.substring(0, 4)
                   }}&nbsp;
                 </span>
                 <button
@@ -158,7 +158,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from "vue";
+import { defineComponent, ref, computed, onMounted, watch } from "vue";
 import { useStore } from "@/store";
 import { NWKVersion } from "@/data/NWKVersion";
 
@@ -191,9 +191,22 @@ export default defineComponent({
     const newVersionTitle = ref(
       store.state.record.versions[currentVersion.value - 1].title
     );
-    const newVersionDate = ref(
-      store.state.record.versions[currentVersion.value - 1].date
-    );
+    const today = new Date().toISOString().substr(0, 10);
+    let newVersionDate = ref(today);
+
+    const versions = computed(() => store.state.record.versions);
+
+    watch(currentVersion, () => {
+      const versionIndex = currentVersion.value - 1;
+      if (versionIndex >= 0 && versionIndex < versions.value.length) {
+        newVersionTitle.value = versions.value[versionIndex].title;
+        if (versions.value[versionIndex].date) {
+          newVersionDate.value = versions.value[versionIndex].date;
+        } else {
+          newVersionDate.value = today;
+        }
+      }
+    });
 
     const editVersion = () => {
       const index: any = currentVersion.value - 1;
diff --git a/src/data/NWKVersion.ts b/src/data/NWKVersion.ts
index 9a86d69..853efd7 100644
--- a/src/data/NWKVersion.ts
+++ b/src/data/NWKVersion.ts
@@ -13,7 +13,7 @@ export function initNWKVersion(): NWKVersion {
   return {
     id: DEFAULT_NWK_VERSION,
     title: "",
-    date: "2023-08-23",
+    date: "",
     nwk: initNWK(),
   };
 }
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index 2d8c7f7..b383ef2 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -25,20 +25,30 @@ export const nwkRecordMutationsAtRoot = {
     state.nwk = state.record.versions[0].nwk;
   },
 
-  removeCurrentVersion(state: IStoreState, index: number): void {
-    if (state.record.versions.length > 1) {
-      console.table(state.record.versions);
-      console.log(state.record.currentVersion);
-      state.record.versions.splice(index, 1);
-      console.table(state.record.versions);
-
-      const newVersion = state.record.versions.find(
-        (d) => d.id === state.record.versions.length - 1
+  removeCurrentVersion(state: IStoreState): void {
+    const versionsLength = state.record.versions.length;
+
+    if (versionsLength > 1) {
+      const currentVersionIndex = state.record.versions.findIndex(
+        (d) => d.id === state.record.currentVersion
       );
-      if (newVersion) {
-        state.nwk = newVersion.nwk;
-        state.record.currentVersion = newVersion.id;
-        console.log("new version id: " + newVersion.id);
+
+      if (currentVersionIndex >= 0) {
+        state.record.versions.splice(currentVersionIndex, 1);
+
+        // Update currentVersion to the last available version
+        state.record.currentVersion =
+          state.record.versions[versionsLength - 2].id;
+
+        // Update nwk with the new current version's data
+        const newVersion = state.record.versions.find(
+          (d) => d.id === state.record.currentVersion
+        );
+
+        if (newVersion) {
+          state.nwk = newVersion.nwk;
+          console.log("new version id: " + newVersion.id);
+        }
       }
     } else {
       console.log("No version to delete");

From 8f43ddfa9cf38b20b4e6a7bc1168b6659d169666 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 28 Aug 2023 13:57:50 +0200
Subject: [PATCH 25/35] =?UTF-8?q?Fortsetzung=20der=20L=C3=B6schfunktion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 29 ++++++++++++++++-------
 src/components/NetworkMap.vue             | 10 ++++++--
 src/store/nwkRecordModule.ts              |  5 ++--
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 1e5e127..c5719ab 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -19,14 +19,14 @@
               <div class="field is-horizontal">
                 Aktuelle Karte:&nbsp;
                 <span v-if="versions.length && currentVersion > 0">
-                  {{ versions[currentVersion - 1]?.title || "" }}
+                  {{ versions[visibleVersion]?.title || "" }}
                   vom
                   {{
-                    versions[currentVersion - 1]?.date?.substring(8, 10) +
+                    versions[visibleVersion]?.date?.substring(8, 10) +
                     "." +
-                    versions[currentVersion - 1]?.date?.substring(5, 7) +
+                    versions[visibleVersion]?.date?.substring(5, 7) +
                     "." +
-                    versions[currentVersion - 1]?.date?.substring(0, 4)
+                    versions[visibleVersion]?.date?.substring(0, 4)
                   }}&nbsp;
                 </span>
                 <button
@@ -178,6 +178,12 @@ export default defineComponent({
 
     const currentVersion = computed(() => store.state.record.currentVersion);
 
+    const visibleVersion = computed(() =>
+      store.state.record.versions.findIndex(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
     const isOpen = ref(false);
 
     const newVersion = ref(false);
@@ -188,16 +194,22 @@ export default defineComponent({
 
     const newNWK = ref(false);
 
+    const versions = computed(() => store.state.record.versions);
+
     const newVersionTitle = ref(
-      store.state.record.versions[currentVersion.value - 1].title
+      store.state.record.versions[
+        versions.value.findIndex(
+          (version) => version.id === currentVersion.value
+        )
+      ].title
     );
     const today = new Date().toISOString().substr(0, 10);
     let newVersionDate = ref(today);
 
-    const versions = computed(() => store.state.record.versions);
-
     watch(currentVersion, () => {
-      const versionIndex = currentVersion.value - 1;
+      const versionIndex = versions.value.findIndex(
+        (version) => version.id === currentVersion.value
+      );
       if (versionIndex >= 0 && versionIndex < versions.value.length) {
         newVersionTitle.value = versions.value[versionIndex].title;
         if (versions.value[versionIndex].date) {
@@ -244,6 +256,7 @@ export default defineComponent({
       newVersionDate,
       isDisabled: isDisabled,
       currentVersion: currentVersion,
+      visibleVersion: visibleVersion,
       versions: computed(() => store.state.record.versions),
       //commitEdit,
       //cancelAddVersion,
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index ae15f67..0a84797 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -12,7 +12,7 @@
             comparisonCircle: version.id !== currentVersion,
             'comparisonCircle-selected': version.id === currentVersion,
           }"
-          @click="handleCircleClick(version.id)"
+          @click="() => handleCircleClick(version.id)"
         />
         <text
           :x="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
@@ -561,7 +561,13 @@ export default defineComponent({
     };
 
     function handleCircleClick(versionId: number) {
-      if (versionId !== store.state.record.currentVersion) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      if (clickedVersion) {
+        console.log(`Clicked version: ${clickedVersion.title}`);
         store.commit("switchNWK", versionId);
         console.log("Changed Version");
       }
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index b383ef2..677d031 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -48,6 +48,7 @@ export const nwkRecordMutationsAtRoot = {
         if (newVersion) {
           state.nwk = newVersion.nwk;
           console.log("new version id: " + newVersion.id);
+          console.log("current version id: " + state.record.currentVersion);
         }
       }
     } else {
@@ -125,8 +126,8 @@ function editVersion(
 ): void {
   if (
     versionIndex != null &&
-    versionIndex >= 0 &&
-    versionIndex < state.versions.length
+    versionIndex >= 0
+    //&& versionIndex < state.versions.length
   ) {
     // based on vuex\examples\composition\todomvc\store\mutations.js
     // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>

From d9e215b8be791620d2664691715e6dab8ab30896 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 29 Aug 2023 10:18:47 +0200
Subject: [PATCH 26/35] =?UTF-8?q?Bearbeiten=20einer=20neuen=20Version=20na?=
 =?UTF-8?q?ch=20L=C3=B6schen=20gefixt,=20changeNWK=20und=20showComparison?=
 =?UTF-8?q?=20in=20eins,=20Anpassung=20des=20Panels,=20Lint=20angewendet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 118 +++++++++++-----------
 src/components/NetworkMap.vue             |  55 +++++-----
 2 files changed, 84 insertions(+), 89 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index c5719ab..e7e0c4f 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -18,7 +18,7 @@
             <div class="control">
               <div class="field is-horizontal">
                 Aktuelle Karte:&nbsp;
-                <span v-if="versions.length && currentVersion > 0">
+                <span v-if="versions.length && currentVersion >= 0">
                   {{ versions[visibleVersion]?.title || "" }}
                   vom
                   {{
@@ -44,7 +44,7 @@
                 </button>
               </div>
               <br />
-              <div class="buttons">
+              <div class="buttons" v-if="!newVersion">
                 <button
                   class="button"
                   @click="addBlankNWK"
@@ -83,70 +83,72 @@
                   <span v-if="!nwkcomparison">Vergleich ein</span>
                   <span v-else>Vergleich aus</span>
                 </button>
-                <div v-if="newVersion">
-                  <div class="field is-horizontal">
-                    <div class="field-label is-normal">
-                      <label class="label">Titel</label>
-                    </div>
-                    <div class="field-body">
-                      <div class="field">
-                        <div class="control">
-                          <input
-                            class="input"
-                            type="text"
-                            placeholder="Titel der aktuellen Version"
-                            v-model="newVersionTitle"
-                          />
-                        </div>
+              </div>
+
+              <div v-if="newVersion">
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Titel</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input
+                          class="input"
+                          type="text"
+                          placeholder="Titel der aktuellen Version"
+                          v-model="newVersionTitle"
+                        />
                       </div>
                     </div>
                   </div>
+                </div>
 
-                  <br />
+                <br />
 
-                  <div class="field is-horizontal">
-                    <div class="field-label is-normal">
-                      <label class="label">Datum</label>
-                    </div>
-                    <div class="field-body">
-                      <div class="field">
-                        <div class="control">
-                          <input
-                            class="input"
-                            type="date"
-                            v-model="newVersionDate"
-                          />
-                        </div>
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Datum</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input
+                          class="input"
+                          type="date"
+                          v-model="newVersionDate"
+                        />
                       </div>
                     </div>
                   </div>
+                </div>
 
-                  <br />
+                <br />
 
-                  <div class="buttons">
-                    <button
-                      class="button is-primary"
-                      @click="addNewVersion()"
-                      @click.stop="newVersion = false"
-                    >
-                      <span>Speichern</span>
-                    </button>
+                <div class="buttons">
+                  <button
+                    class="button is-primary"
+                    @click="addNewVersion()"
+                    @click.stop="newVersion = false"
+                  >
+                    <span>Speichern</span>
+                  </button>
 
-                    <button
-                      class="button is-light"
-                      @click.stop="newVersion = false"
-                    >
-                      <span>Abbrechen</span>
-                    </button>
+                  <button
+                    class="button is-light"
+                    @click.stop="newVersion = false"
+                  >
+                    <span>Abbrechen</span>
+                  </button>
 
-                    <button
-                      class="button is-danger"
-                      @click.stop="deleteVersion"
-                      :disabled="versions.length <= 1"
-                    >
-                      <span>Karte Löschen</span>
-                    </button>
-                  </div>
+                  <button
+                    class="button is-danger"
+                    @click="deleteVersion"
+                    @click.stop="newVersion = false"
+                    :disabled="versions.length <= 1"
+                  >
+                    <span>Karte Löschen</span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -158,11 +160,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from "vue";
+import { defineComponent, ref, computed, watch } from "vue";
 import { useStore } from "@/store";
 import { NWKVersion } from "@/data/NWKVersion";
 
-type InputType = HTMLInputElement | HTMLTextAreaElement;
+//type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
   // AR, 14 Aug 2023: prop version not needed? current version is in state.record
@@ -221,7 +223,9 @@ export default defineComponent({
     });
 
     const editVersion = () => {
-      const index: any = currentVersion.value - 1;
+      const index: number = versions.value.findIndex(
+        (version) => version.id === currentVersion.value
+      );
       const changes: Partial<NWKVersion> = {
         title: newVersionTitle.value,
         date: newVersionDate.value,
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index a39b22a..3c8b31e 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,11 +1,12 @@
 <template>
-  <div style="position: relative" v-if="changeNWK">
-    <svg width="800" height="120">
+  <div style="position: relative" v-if="changeNWK || showComparison">
+    <svg width="100%" height="120">
       <!-- Increased height to accommodate text -->
-      <line x1="0" y1="50" x2="800" y2="50" class="comparisonLine"></line>
+      <line x1="0" y1="50" x2="100%" y2="50" class="comparisonLine"></line>
       <a v-for="(version, index) in versions" :key="index">
         <circle
-          :cx="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
+          v-if="changeNWK"
+          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
           cy="50"
           r="9"
           :class="{
@@ -14,41 +15,19 @@
           }"
           @click="() => handleCircleClick(version.id)"
         />
-        <text
-          :x="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
-          y="35"
-          text-anchor="middle"
-          class="versionText"
-        >
-          {{
-            version.title
-              ? version.title
-              : version.date.substring(8, 10) +
-                "." +
-                version.date.substring(5, 7) +
-                "." +
-                version.date.substring(0, 4)
-          }}
-        </text>
-      </a>
-    </svg>
-  </div>
-  <div style="position: relative" v-if="showComparison">
-    <svg width="800" height="120">
-      <!-- Increased height to accommodate text -->
-      <line x1="5" y1="50" x2="800" y2="50" class="comparisonLine"></line>
-      <a v-for="(version, index) in versions" :key="index">
         <circle
-          :cx="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
+          v-if="showComparison"
+          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
           cy="50"
           r="9"
           :class="{
             comparisonCircle: version.id !== currentVersion,
             'comparisonCircle-selected': version.id === currentVersion,
           }"
+          @click="() => handleComparisonClick(version.id)"
         />
         <text
-          :x="`${10 + (800 / (versions.length + 1)) * (index + 1)}`"
+          :x="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
           y="35"
           text-anchor="middle"
           class="versionText"
@@ -66,7 +45,6 @@
       </a>
     </svg>
   </div>
-
   <svg id="nwkmap" width="100%" height="100%" viewBox="-106 -106 212 212">
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -416,7 +394,7 @@ export default defineComponent({
 
         // re-scale brush selection
         const brushElement = d3.select("#nwkmap g#brush").node() as SVGGElement;
-        if (brush && brushElement && brushSelection(brushElement)) {
+        if (brushElement && brushSelection(brushElement)) {
           const myExtent = [
             transform.value.apply(brushAbsoluteCoords[0]),
             transform.value.apply(brushAbsoluteCoords[1]),
@@ -704,6 +682,18 @@ export default defineComponent({
       }
     }
 
+    function handleComparisonClick(versionId: number) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      console.log(
+        "Click for Comparison - not yet implemented! Clicked Version: " +
+          clickedVersion
+      );
+    }
+
     let clickTimeoutId: number | null = null;
     const clickAlter = (alter: Alter) => {
       if (isConnectMode.value && store.state.view.editIndex != null) {
@@ -830,6 +820,7 @@ export default defineComponent({
       versions,
       currentVersion,
       handleCircleClick,
+      handleComparisonClick,
       zoomSector,
       isNotZoomed: computed(() => transform.value.k == 1),
       resetZoom,

From 822b4b70d90685be82345d6054f2ac6f28c28c34 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:59:33 +0200
Subject: [PATCH 27/35] remove unnecessary code (from merging zoom & versions)

---
 package-lock.json            |  4 ++--
 src/main.ts                  |  1 -
 src/store/nwkRecordModule.ts |  2 +-
 src/structuredClone.d.ts     | 10 ----------
 4 files changed, 3 insertions(+), 14 deletions(-)
 delete mode 100644 src/structuredClone.d.ts

diff --git a/package-lock.json b/package-lock.json
index fc7651e..1fa3a22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easynwk",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "easynwk",
-      "version": "2.0.4",
+      "version": "2.0.6",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
diff --git a/src/main.ts b/src/main.ts
index baa7859..db2e1cb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -56,7 +56,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
-  faExchangeAlt,
   faFileAlt,
   faSearchPlus,
   // faBan,
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
index 677d031..2eb71a7 100644
--- a/src/store/nwkRecordModule.ts
+++ b/src/store/nwkRecordModule.ts
@@ -1,7 +1,7 @@
 import { loadNWKRecordStateFromStore } from "@/store/localStoragePlugin";
 import { IStoreState } from ".";
 import { NWKRecord, initNWKRecord, loadNWKRecord } from "@/data/NWKRecord";
-import { initNWK, NWK } from "@/data/NWK";
+import { initNWK } from "@/data/NWK";
 import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
 
 const state = JSON.parse(loadNWKRecordStateFromStore());
diff --git a/src/structuredClone.d.ts b/src/structuredClone.d.ts
deleted file mode 100644
index b0045ba..0000000
--- a/src/structuredClone.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// workaround for structuredClone() until upgrade to TypeScript ~4.7
-// cp. <https://stackoverflow.com/a/72306923/1140589>
-
-interface WindowOrWorkerGlobalScope {
-  structuredClone(value: any, options?: StructuredSerializeOptions): any;
-}
-declare function structuredClone(
-  value: any,
-  options?: StructuredSerializeOptions
-): any;

From 61c3693bd889a07911f20360741e1f36b5a68778 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Tue, 29 Aug 2023 16:47:26 +0200
Subject: [PATCH 28/35] simplify NWKVersion date intialization & code comments

---
 src/components/ComparisonOptionsPanel.vue | 54 +++++++++--------------
 src/data/NWKVersion.ts                    |  2 +-
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index e7e0c4f..29fa236 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -19,19 +19,20 @@
               <div class="field is-horizontal">
                 Aktuelle Karte:&nbsp;
                 <span v-if="versions.length && currentVersion >= 0">
-                  {{ versions[visibleVersion]?.title || "" }}
+                  {{ visibleNWKVersion?.title || "" }}
                   vom
+                  <!-- TODO use internationalizable date formater -->
                   {{
-                    versions[visibleVersion]?.date?.substring(8, 10) +
+                    visibleNWKVersion?.date?.substring(8, 10) +
                     "." +
-                    versions[visibleVersion]?.date?.substring(5, 7) +
+                    visibleNWKVersion?.date?.substring(5, 7) +
                     "." +
-                    versions[visibleVersion]?.date?.substring(0, 4)
+                    visibleNWKVersion?.date?.substring(0, 4)
                   }}&nbsp;
                 </span>
                 <button
                   class="button is-small"
-                  title="Ankerperson bearbeiten"
+                  title="Metadaten der Karte bearbeiten"
                   v-if="isOpen"
                   @click="
                     newVersion = true;
@@ -76,6 +77,7 @@
                   <span>Karte wechseln</span>
                 </button>
 
+                <!-- TODO hide comparison button before merging into main -->
                 <button class="button" @click.stop="toggleComparison">
                   <span class="icon">
                     <font-awesome-icon icon="compress-arrows-alt" />
@@ -138,9 +140,11 @@
                     class="button is-light"
                     @click.stop="newVersion = false"
                   >
+                    <!-- TODO Abbrechen does not clear the refs used in the text fields -->
                     <span>Abbrechen</span>
                   </button>
 
+                  <!-- TODO move state updates into handler functions? -->
                   <button
                     class="button is-danger"
                     @click="deleteVersion"
@@ -180,8 +184,9 @@ export default defineComponent({
 
     const currentVersion = computed(() => store.state.record.currentVersion);
 
-    const visibleVersion = computed(() =>
-      store.state.record.versions.findIndex(
+    /** the NWKVersion object of the currently visible version */
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
         (version) => version.id === currentVersion.value
       )
     );
@@ -194,32 +199,17 @@ export default defineComponent({
 
     const isDisabled = ref(true);
 
-    const newNWK = ref(false);
+    const newNWK = ref(false); // TODO needed?
 
     const versions = computed(() => store.state.record.versions);
 
-    const newVersionTitle = ref(
-      store.state.record.versions[
-        versions.value.findIndex(
-          (version) => version.id === currentVersion.value
-        )
-      ].title
-    );
-    const today = new Date().toISOString().substr(0, 10);
-    let newVersionDate = ref(today);
+    const newVersionTitle = ref(visibleNWKVersion.value?.title);
+    const newVersionDate = ref(visibleNWKVersion.value?.date);
 
-    watch(currentVersion, () => {
-      const versionIndex = versions.value.findIndex(
-        (version) => version.id === currentVersion.value
-      );
-      if (versionIndex >= 0 && versionIndex < versions.value.length) {
-        newVersionTitle.value = versions.value[versionIndex].title;
-        if (versions.value[versionIndex].date) {
-          newVersionDate.value = versions.value[versionIndex].date;
-        } else {
-          newVersionDate.value = today;
-        }
-      }
+    // local copy of NWKVersion metadata needs to be updated
+    watch(visibleNWKVersion, () => {
+      newVersionTitle.value = visibleNWKVersion.value?.title;
+      newVersionDate.value = visibleNWKVersion.value?.date;
     });
 
     const editVersion = () => {
@@ -234,11 +224,11 @@ export default defineComponent({
         index,
         changes,
       });
-      newVersionDate.value = "";
+      // newVersionDate.value = ""; // TODO AR 29 Aug 2023 why???
     };
 
     const deleteVersion = () => {
-      const index: number = currentVersion.value - 1;
+      const index: number = currentVersion.value - 1; // TODO AR 29 Aug 2023 bad smell, check!
       store.commit("removeCurrentVersion", index);
     };
 
@@ -260,7 +250,7 @@ export default defineComponent({
       newVersionDate,
       isDisabled: isDisabled,
       currentVersion: currentVersion,
-      visibleVersion: visibleVersion,
+      visibleNWKVersion,
       versions: computed(() => store.state.record.versions),
       //commitEdit,
       //cancelAddVersion,
diff --git a/src/data/NWKVersion.ts b/src/data/NWKVersion.ts
index 853efd7..0332c0b 100644
--- a/src/data/NWKVersion.ts
+++ b/src/data/NWKVersion.ts
@@ -13,7 +13,7 @@ export function initNWKVersion(): NWKVersion {
   return {
     id: DEFAULT_NWK_VERSION,
     title: "",
-    date: "",
+    date: new Date().toISOString().substring(0, 10),
     nwk: initNWK(),
   };
 }

From 3d55cca9119e07a35e624de1044aa783db133109 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Thu, 7 Sep 2023 13:24:18 +0200
Subject: [PATCH 29/35] refactor ComparisonSlide.vue out of NetworkMap.vue

---
 src/components/ComparisonSlider.vue | 123 ++++++++++++++++++++++++++++
 src/components/NetworkMap.vue       |  99 ----------------------
 src/views/HomeView.vue              |   3 +
 3 files changed, 126 insertions(+), 99 deletions(-)
 create mode 100644 src/components/ComparisonSlider.vue

diff --git a/src/components/ComparisonSlider.vue b/src/components/ComparisonSlider.vue
new file mode 100644
index 0000000..ca36ad6
--- /dev/null
+++ b/src/components/ComparisonSlider.vue
@@ -0,0 +1,123 @@
+<template>
+  <div style="position: relative" v-if="changeNWK || showComparison">
+    <svg width="100%" height="120">
+      <!-- Increased height to accommodate text -->
+      <line x1="0" y1="50" x2="100%" y2="50" class="comparisonLine"></line>
+      <a v-for="(version, index) in versions" :key="index">
+        <circle
+          v-if="changeNWK"
+          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
+          cy="50"
+          r="9"
+          :class="{
+            comparisonCircle: version.id !== currentVersion,
+            'comparisonCircle-selected': version.id === currentVersion,
+          }"
+          @click="() => handleCircleClick(version.id)"
+        />
+        <circle
+          v-if="showComparison"
+          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
+          cy="50"
+          r="9"
+          :class="{
+            comparisonCircle: version.id !== currentVersion,
+            'comparisonCircle-selected': version.id === currentVersion,
+          }"
+          @click="() => handleComparisonClick(version.id)"
+        />
+        <text
+          :x="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
+          y="35"
+          text-anchor="middle"
+          class="versionText"
+        >
+          {{
+            version.title
+              ? version.title
+              : version.date.substring(8, 10) +
+                "." +
+                version.date.substring(5, 7) +
+                "." +
+                version.date.substring(0, 4)
+          }}
+        </text>
+      </a>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useStore } from "@/store";
+
+// get Zoom Behavior transform as property
+// emit 'zoom-sector' with index of sector
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+
+    const versions = computed(() => store.state.record.versions);
+
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    function handleCircleClick(versionId: number) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      if (clickedVersion) {
+        console.log(`Clicked version: ${clickedVersion.title}`);
+        store.commit("switchNWK", versionId);
+        console.log("Changed Version");
+      }
+    }
+
+    function handleComparisonClick(versionId: number) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      console.log(
+        "Click for Comparison - not yet implemented! Clicked Version: " +
+          clickedVersion
+      );
+    }
+
+    return {
+      versions,
+      currentVersion,
+      handleCircleClick,
+      handleComparisonClick,
+      showComparison: computed(() => store.state.view.nwkcomparison),
+      changeNWK: computed(() => store.state.view.nwkchange),
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "~bulma/sass/base/_all.sass";
+
+.versionText {
+  font-size: 12px !important;
+}
+
+.comparisonLine {
+  stroke: black !important;
+}
+.comparisonCircle {
+  fill: #ffc37d;
+}
+
+.comparisonCircle {
+  fill: #d6dae9;
+}
+
+.comparisonCircle-selected {
+  fill: #ffc37d;
+}
+</style>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 3c8b31e..82ae2a9 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,50 +1,4 @@
 <template>
-  <div style="position: relative" v-if="changeNWK || showComparison">
-    <svg width="100%" height="120">
-      <!-- Increased height to accommodate text -->
-      <line x1="0" y1="50" x2="100%" y2="50" class="comparisonLine"></line>
-      <a v-for="(version, index) in versions" :key="index">
-        <circle
-          v-if="changeNWK"
-          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          cy="50"
-          r="9"
-          :class="{
-            comparisonCircle: version.id !== currentVersion,
-            'comparisonCircle-selected': version.id === currentVersion,
-          }"
-          @click="() => handleCircleClick(version.id)"
-        />
-        <circle
-          v-if="showComparison"
-          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          cy="50"
-          r="9"
-          :class="{
-            comparisonCircle: version.id !== currentVersion,
-            'comparisonCircle-selected': version.id === currentVersion,
-          }"
-          @click="() => handleComparisonClick(version.id)"
-        />
-        <text
-          :x="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          y="35"
-          text-anchor="middle"
-          class="versionText"
-        >
-          {{
-            version.title
-              ? version.title
-              : version.date.substring(8, 10) +
-                "." +
-                version.date.substring(5, 7) +
-                "." +
-                version.date.substring(0, 4)
-          }}
-        </text>
-      </a>
-    </svg>
-  </div>
   <svg id="nwkmap" width="100%" height="100%" viewBox="-106 -106 212 212">
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -324,10 +278,6 @@ export default defineComponent({
   setup: function (props, { emit }) {
     const store = useStore();
 
-    const versions = computed(() => store.state.record.versions);
-
-    const currentVersion = computed(() => store.state.record.currentVersion);
-
     const isEditMode = computed(() => {
       return (
         store.state.view.editIndex != null &&
@@ -669,31 +619,6 @@ export default defineComponent({
       return getRoleAbbrev(role);
     };
 
-    function handleCircleClick(versionId: number) {
-      const clickedVersion = versions.value.find(
-        (version) =>
-          version.id === versionId &&
-          versionId !== store.state.record.currentVersion
-      );
-      if (clickedVersion) {
-        console.log(`Clicked version: ${clickedVersion.title}`);
-        store.commit("switchNWK", versionId);
-        console.log("Changed Version");
-      }
-    }
-
-    function handleComparisonClick(versionId: number) {
-      const clickedVersion = versions.value.find(
-        (version) =>
-          version.id === versionId &&
-          versionId !== store.state.record.currentVersion
-      );
-      console.log(
-        "Click for Comparison - not yet implemented! Clicked Version: " +
-          clickedVersion
-      );
-    }
-
     let clickTimeoutId: number | null = null;
     const clickAlter = (alter: Alter) => {
       if (isConnectMode.value && store.state.view.editIndex != null) {
@@ -808,8 +733,6 @@ export default defineComponent({
       showRole: computed(() => store.state.view.roleInNwk),
       getRoleShort,
       alteriNames: computed(() => store.state.view.alteriNames),
-      showComparison: computed(() => store.state.view.nwkcomparison),
-      changeNWK: computed(() => store.state.view.nwkchange),
       connections: computed(() => store.state.view.connections),
       brushBtns,
       isClusterConnectPossible,
@@ -817,10 +740,6 @@ export default defineComponent({
       clusterConnect,
       clusterDisconnect,
       clearBrush,
-      versions,
-      currentVersion,
-      handleCircleClick,
-      handleComparisonClick,
       zoomSector,
       isNotZoomed: computed(() => transform.value.k == 1),
       resetZoom,
@@ -845,12 +764,6 @@ export default defineComponent({
 <style scoped lang="scss">
 @import "~bulma/sass/base/_all.sass";
 
-.comparisonLine {
-  stroke: black !important;
-}
-.comparisonCircle {
-  fill: #ffc37d;
-}
 svg {
   overflow: visible;
 }
@@ -862,10 +775,6 @@ text {
   user-select: none;
 }
 
-.versionText {
-  font-size: 12px !important;
-}
-
 text.ego {
   font-style: italic;
 }
@@ -922,14 +831,6 @@ line.select {
   margin-bottom: 0.5rem;
 }
 
-.comparisonCircle {
-  fill: #d6dae9;
-}
-
-.comparisonCircle-selected {
-  fill: #ffc37d;
-}
-
 #zoomBtns {
   position: absolute;
   right: 2px;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f1c81ee..720cf76 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -27,6 +27,7 @@
         </div>
       </div>
       <div id="chart">
+        <ComparisonSlider />
         <NetworkMap @map-click="mapclick" />
       </div>
     </ErrorBoundary>
@@ -47,10 +48,12 @@ import NetworkMap from "@/components/NetworkMap.vue";
 import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
 import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
+import ComparisonSlider from "@/components/ComparisonSlider.vue";
 import ComparisonOptionsPanel from "@/components/ComparisonOptionsPanel.vue";
 
 export default defineComponent({
   components: {
+    ComparisonSlider,
     ComparisonOptionsPanel,
     ErrorBoundary,
     EgoHeader,

From cd8b06858cd4689f0775737594a894643811f14b Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Thu, 7 Sep 2023 15:39:21 +0200
Subject: [PATCH 30/35] change ComparisonSlider to a SVG g within the
 NetworkMap's svg; various refactorings

e.g. computed versionMarks
---
 src/components/ComparisonSlider.vue | 138 +++++++++++++++++-----------
 src/components/NetworkMap.vue       |  12 ++-
 src/views/HomeView.vue              |   3 -
 3 files changed, 92 insertions(+), 61 deletions(-)

diff --git a/src/components/ComparisonSlider.vue b/src/components/ComparisonSlider.vue
index ca36ad6..b4ab562 100644
--- a/src/components/ComparisonSlider.vue
+++ b/src/components/ComparisonSlider.vue
@@ -1,55 +1,55 @@
 <template>
-  <div style="position: relative" v-if="changeNWK || showComparison">
-    <svg width="100%" height="120">
-      <!-- Increased height to accommodate text -->
-      <line x1="0" y1="50" x2="100%" y2="50" class="comparisonLine"></line>
-      <a v-for="(version, index) in versions" :key="index">
-        <circle
-          v-if="changeNWK"
-          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          cy="50"
-          r="9"
-          :class="{
-            comparisonCircle: version.id !== currentVersion,
-            'comparisonCircle-selected': version.id === currentVersion,
-          }"
-          @click="() => handleCircleClick(version.id)"
-        />
-        <circle
-          v-if="showComparison"
-          :cx="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          cy="50"
-          r="9"
-          :class="{
-            comparisonCircle: version.id !== currentVersion,
-            'comparisonCircle-selected': version.id === currentVersion,
-          }"
-          @click="() => handleComparisonClick(version.id)"
-        />
-        <text
-          :x="`${1 + (100 / (versions.length + 1)) * (index + 1)}` + '%'"
-          y="35"
-          text-anchor="middle"
-          class="versionText"
-        >
-          {{
-            version.title
-              ? version.title
-              : version.date.substring(8, 10) +
-                "." +
-                version.date.substring(5, 7) +
-                "." +
-                version.date.substring(0, 4)
-          }}
-        </text>
-      </a>
-    </svg>
-  </div>
+  <g id="comparisonSlider">
+    <line
+      :x1="versionMarks[0].x"
+      y1="-113"
+      :x2="versionMarks[0].x * -1"
+      y2="-113"
+    />
+    <a
+      v-for="(mark, index) in versionMarks"
+      :key="index"
+      @click="() => handleCircleClick(mark.d.id)">
+      <circle
+        v-if="changeNWK"
+        :cx="mark.x"
+        cy="-113"
+        r="2"
+        :class="{
+          comparisonCircle: !mark.selected,
+          'comparisonCircle-selected': mark.selected,
+        }"
+      />
+      <!-- TODO check if different template elements necessary-->
+      <circle
+        v-if="showComparison"
+        :cx="mark.x"
+        cy="-113"
+        r="2"
+        :class="{
+          comparisonCircle: !mark.selected,
+          'comparisonCircle-selected': mark.selected,
+        }"
+        @click="() => handleComparisonClick(mark.d.id)"
+      />
+      <text :x="mark.x" y="-108" text-anchor="middle" class="versionText">
+        {{ mark.label }}
+      </text>
+    </a>
+  </g>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "@/store";
+import { NWKVersion } from "@/data/NWKVersion";
+
+interface VersionMark {
+  d: NWKVersion;
+  label: string;
+  x: number;
+  selected: boolean;
+}
 
 // get Zoom Behavior transform as property
 // emit 'zoom-sector' with index of sector
@@ -60,7 +60,36 @@ export default defineComponent({
 
     const versions = computed(() => store.state.record.versions);
 
-    const currentVersion = computed(() => store.state.record.currentVersion);
+    const versionMarks = computed((): Array<VersionMark> => {
+      const currentVersion = store.state.record.currentVersion;
+      const buffer: Array<VersionMark> = [];
+      store.state.record.versions.forEach((version, index, array) => {
+        // Julia's formula, scaled between 0 and 1
+        // 2 version --> 1/3 and 2/3
+        // 3 version --> 1/4 and 2/4 and 3/4
+        const xrel = (index + 1) / (array.length + 1);
+        const x = (xrel - 0.5) * 200;
+
+        // TODO locale specific date format
+        const label = version.title
+          ? version.title
+          : version.date.substring(8, 10) +
+            "." +
+            version.date.substring(5, 7) +
+            "." +
+            version.date.substring(0, 4);
+
+        buffer.push({
+          d: version,
+          label,
+          x,
+          selected: version.id === currentVersion,
+        });
+      });
+      // first draw marks further away from center to avoid overplotting
+      // return buffer.sort((a, b) => b.d.distance - a.d.distance);
+      return buffer;
+    });
 
     function handleCircleClick(versionId: number) {
       const clickedVersion = versions.value.find(
@@ -88,8 +117,7 @@ export default defineComponent({
     }
 
     return {
-      versions,
-      currentVersion,
+      versionMarks,
       handleCircleClick,
       handleComparisonClick,
       showComparison: computed(() => store.state.view.nwkcomparison),
@@ -103,14 +131,12 @@ export default defineComponent({
 @import "~bulma/sass/base/_all.sass";
 
 .versionText {
-  font-size: 12px !important;
+  font-size: 4px;
 }
 
-.comparisonLine {
-  stroke: black !important;
-}
-.comparisonCircle {
-  fill: #ffc37d;
+line {
+  stroke: #afafaf;
+  stroke-width: 0.5;
 }
 
 .comparisonCircle {
@@ -118,6 +144,6 @@ export default defineComponent({
 }
 
 .comparisonCircle-selected {
-  fill: #ffc37d;
+  fill: $color-primary-1;
 }
 </style>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 82ae2a9..48392d0 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,5 +1,8 @@
 <template>
-  <svg id="nwkmap" width="100%" height="100%" viewBox="-106 -106 212 212">
+  <svg
+    id="nwkmap"
+    :viewBox="showComparisonSlider ? '-110 -117 220 220' : '-106 -106 212 212'"
+  >
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
         <rect x="-0.886" y="-0.886" width="1.772" height="1.772" />
@@ -158,6 +161,7 @@
     <text :x="0" y="-102" text-anchor="middle" class="ego">
       {{ egoLabel }}
     </text>
+    <ComparisonSlider v-if="showComparisonSlider" />
   </svg>
   <div id="zoomBtns">
     <button
@@ -240,6 +244,7 @@ import { useStore } from "@/store";
 
 import NetworkMapCoordinates from "@/components/NetworkMapCoordinates.vue";
 import NetworkMapSectors from "@/components/NetworkMapSectors.vue";
+import ComparisonSlider from "@/components/ComparisonSlider.vue";
 
 import * as d3 from "d3";
 import { Alter, isConnectable } from "@/data/Alter";
@@ -272,7 +277,7 @@ interface ConnectionMark {
 // emit "map-click" (which is not currently used)
 
 export default defineComponent({
-  components: { NetworkMapCoordinates, NetworkMapSectors },
+  components: { NetworkMapCoordinates, NetworkMapSectors, ComparisonSlider },
   emits: ["map-click"],
 
   setup: function (props, { emit }) {
@@ -753,6 +758,9 @@ export default defineComponent({
             /Apple Computer/.test(navigator.vendor)
           )
       ),
+      showComparisonSlider: computed(
+        () => store.state.view.nwkchange || store.state.view.nwkcomparison
+      ),
     };
   },
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 720cf76..f1c81ee 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -27,7 +27,6 @@
         </div>
       </div>
       <div id="chart">
-        <ComparisonSlider />
         <NetworkMap @map-click="mapclick" />
       </div>
     </ErrorBoundary>
@@ -48,12 +47,10 @@ import NetworkMap from "@/components/NetworkMap.vue";
 import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
 import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
-import ComparisonSlider from "@/components/ComparisonSlider.vue";
 import ComparisonOptionsPanel from "@/components/ComparisonOptionsPanel.vue";
 
 export default defineComponent({
   components: {
-    ComparisonSlider,
     ComparisonOptionsPanel,
     ErrorBoundary,
     EgoHeader,

From 1e5e14eac69c5b36414357916b5473ae3ff5b79c Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Fri, 8 Sep 2023 11:28:39 +0200
Subject: [PATCH 31/35] ensure new alter has unique id across multiple
 NWKVersion objects

---
 src/components/ComparisonSlider.vue |  3 ++-
 src/store/index.ts                  | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ComparisonSlider.vue b/src/components/ComparisonSlider.vue
index b4ab562..d2f8c38 100644
--- a/src/components/ComparisonSlider.vue
+++ b/src/components/ComparisonSlider.vue
@@ -9,7 +9,8 @@
     <a
       v-for="(mark, index) in versionMarks"
       :key="index"
-      @click="() => handleCircleClick(mark.d.id)">
+      @click="() => handleCircleClick(mark.d.id)"
+    >
       <circle
         v-if="changeNWK"
         :cx="mark.x"
diff --git a/src/store/index.ts b/src/store/index.ts
index a31d2e5..081bc5f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -71,10 +71,24 @@ const mutations = {
 
     // set id depending on alteri in list
     // bugfix: if any id is undefined, NaN, or null --> default to 1
-    newAlter.id =
+    const maxIdNWK =
       state.nwk.alteri.length > 0
-        ? Math.max(...state.nwk.alteri.map((v) => (v.id ? v.id : 1))) + 1
-        : 1;
+        ? Math.max(...state.nwk.alteri.map((v) => (v.id ? v.id : 1)))
+        : 0;
+
+    const maxIdRecord =
+      state.record.versions.length > 0
+        ? Math.max(
+            ...state.record.versions.map((v) =>
+              v.nwk.alteri.length > 0
+                ? Math.max(...v.nwk.alteri.map((v) => (v.id ? v.id : 1)))
+                : 0
+            )
+          )
+        : 0;
+
+    // console.log(`max id nwk:  ${maxIdNWK}  -- max id record:  ${maxIdRecord} `);
+    newAlter.id = Math.max(maxIdNWK, maxIdRecord) + 1;
 
     // new alter is always added on top of list
     state.nwk.alteri.unshift(newAlter);

From 0bdfebb1f48e1400f16ca7f793b50463170e06af Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 22 Feb 2024 14:45:15 +0100
Subject: [PATCH 32/35] =?UTF-8?q?Abbrechen=20Button=20l=C3=B6scht=20neue?=
 =?UTF-8?q?=20Karte=20beim=20Erstellen=20einer=20neuen=20Version;=20Slider?=
 =?UTF-8?q?=20verschwindet=20wenn=20Alteri=20bearbeitet=20wird,=20Vergleic?=
 =?UTF-8?q?hs-Button=20disabled;=20Vermerk=20in=20PDF=20welche=20Version?=
 =?UTF-8?q?=20gedruckt=20wird?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 16 +++++++++++-----
 src/components/NetworkMap.vue             |  8 ++++++--
 src/views/PdfView.vue                     | 23 +++++++++++++++++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 29fa236..001a9a8 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -49,7 +49,7 @@
                 <button
                   class="button"
                   @click="addBlankNWK"
-                  @click.stop="newVersion = true"
+                  @click.stop="(newVersion = true), (firstCreation = true)"
                 >
                   <span class="icon">
                     <font-awesome-icon icon="plus-circle" />
@@ -62,7 +62,7 @@
                 <button
                   class="button"
                   @click="duplicateNWK"
-                  @click.stop="newVersion = true"
+                  @click.stop="(newVersion = true), (firstCreation = true)"
                 >
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
@@ -78,7 +78,7 @@
                 </button>
 
                 <!-- TODO hide comparison button before merging into main -->
-                <button class="button" @click.stop="toggleComparison">
+                <button class="button" @click.stop="toggleComparison" disabled>
                   <span class="icon">
                     <font-awesome-icon icon="compress-arrows-alt" />
                   </span>
@@ -131,14 +131,16 @@
                   <button
                     class="button is-primary"
                     @click="addNewVersion()"
-                    @click.stop="newVersion = false"
+                    @click.stop="(newVersion = false), (firstCreation = false)"
                   >
                     <span>Speichern</span>
                   </button>
 
                   <button
+                    v-if="firstCreation"
                     class="button is-light"
-                    @click.stop="newVersion = false"
+                    @click="deleteVersion"
+                    @click.stop="(newVersion = false), (firstCreation = false)"
                   >
                     <!-- TODO Abbrechen does not clear the refs used in the text fields -->
                     <span>Abbrechen</span>
@@ -146,6 +148,7 @@
 
                   <!-- TODO move state updates into handler functions? -->
                   <button
+                    v-if="!firstCreation"
                     class="button is-danger"
                     @click="deleteVersion"
                     @click.stop="newVersion = false"
@@ -195,6 +198,8 @@ export default defineComponent({
 
     const newVersion = ref(false);
 
+    const firstCreation = ref(false);
+
     const editText = ref(false);
 
     const isDisabled = ref(true);
@@ -241,6 +246,7 @@ export default defineComponent({
       isOpen: isOpen,
       newVersion: newVersion,
       newNWK: newNWK,
+      firstCreation: firstCreation,
       //commitEdit,
       deleteVersion,
       addNewVersion: editVersion,
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 48392d0..10d1a8a 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,7 +1,11 @@
 <template>
   <svg
     id="nwkmap"
-    :viewBox="showComparisonSlider ? '-110 -117 220 220' : '-106 -106 212 212'"
+    :viewBox="
+      showComparisonSlider && !isEditMode
+        ? '-110 -117 220 220'
+        : '-106 -106 212 212'
+    "
   >
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -161,7 +165,7 @@
     <text :x="0" y="-102" text-anchor="middle" class="ego">
       {{ egoLabel }}
     </text>
-    <ComparisonSlider v-if="showComparisonSlider" />
+    <ComparisonSlider v-if="showComparisonSlider && !isEditMode" />
   </svg>
   <div id="zoomBtns">
     <button
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index f803899..563384e 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -32,6 +32,18 @@
       </div>
       <div id="egobar">
         <p class="name">{{ "Ankerperson: " + ego.name }}</p>
+        <span v-if="versions.length && currentVersion >= 0">
+          Gedruckte Version: {{ visibleNWKVersion?.title || "" }}
+          vom
+          <!-- TODO use internationalizable date formater -->
+          {{
+            visibleNWKVersion?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion?.date?.substring(0, 4)
+          }}&nbsp;
+        </span>
         <p>{{ ego.currentGender ? "Geschlecht: " + ego.currentGender : "" }}</p>
         <p>{{ ego.age.length >= 1 ? "Alter: " + ego.age : "" }}</p>
         <p>{{ ego.note.length >= 1 ? "Notiz: " + ego.note : "" }}</p>
@@ -93,6 +105,14 @@ export default defineComponent({
       window.print();
     };
 
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
     // TODO currently: workaround -> schönere Lösung
     const readHttpGet = () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -137,6 +157,9 @@ export default defineComponent({
       alteri,
       ego,
       createPdf,
+      visibleNWKVersion,
+      currentVersion: currentVersion,
+      versions: computed(() => store.state.record.versions),
     };
   },
 });

From c1eadec327d17f1f0769c2f4b22a4784173fb663 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 26 Feb 2024 10:07:53 +0100
Subject: [PATCH 33/35] Versionsname und -datum in Exporten inkludiert

---
 src/components/SideMenu.vue | 44 ++++++++++++++++++++++++++++++++++---
 src/views/PdfView.vue       | 13 ++++++++++-
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index a4fe98d..b6b8fa8 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -162,11 +162,28 @@ export default defineComponent({
       fr.readAsText(files.item(0));
     };
 
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
     const save = () => {
       store.commit("prepareToSaveJSON");
 
       let nwkJSON = JSON.stringify(store.state.record);
-      let filename = store.state.nwk.ego.name;
+      let filename =
+        store.state.nwk.ego.name +
+        " " +
+        visibleNWKVersion.value?.title +
+        " " +
+        visibleNWKVersion.value?.date?.substring(8, 10) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(5, 7) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(0, 4);
 
       if (store.state.pseudonym.active) {
         const tempNWK = JSON.parse(nwkJSON) as NWK;
@@ -201,11 +218,32 @@ export default defineComponent({
       openDemoData,
       appVersion: computed(() => process.env.VUE_APP_VERSION),
       exportPNG: () => {
-        downloadSVGasPNG(store.state.nwk.ego.name + ".png", "svg#nwkmap");
+        downloadSVGasPNG(
+          store.state.nwk.ego.name +
+            " " +
+            visibleNWKVersion.value?.title +
+            " " +
+            visibleNWKVersion.value?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(0, 4) +
+            ".png",
+          "svg#nwkmap"
+        );
       },
       exportCSV: () => {
         downloadText(
-          store.state.nwk.ego.name + ".csv",
+          store.state.nwk.ego.name +
+            " " +
+            visibleNWKVersion.value?.title +
+            " " +
+            visibleNWKVersion.value?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(0, 4) +
+            ".csv",
           statisticsCSV(store.state.nwk, store.getters["displayName"])
         );
       },
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index 563384e..d86f68e 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -102,7 +102,18 @@ export default defineComponent({
     const ego = computed(() => store.state.nwk.ego);
 
     const createPdf = () => {
-      window.print();
+      (document.title =
+        store.state.nwk.ego.name +
+        " " +
+        visibleNWKVersion.value?.title +
+        " " +
+        visibleNWKVersion.value?.date?.substring(8, 10) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(5, 7) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(0, 4) +
+        ".pdf"),
+        window.print();
     };
 
     const currentVersion = computed(() => store.state.record.currentVersion);

From e97a56aeb6359d5150bf076ca3d2db506388b1db Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:56:51 +0100
Subject: [PATCH 34/35] minor changes

* demo file with fixed date of first map
* hide comparison button (instead of only disable)
* JSON filename without version info because it includes all maps
* wording "Version" to "Karte"
* remove unneeded code
---
 public/Rosa_Braunsteigl-Mueller.json      | 314 +++++++++++-----------
 src/components/ComparisonOptionsPanel.vue |   7 +-
 src/components/SideMenu.vue               |  11 +-
 src/views/PdfView.vue                     |   2 +-
 4 files changed, 167 insertions(+), 167 deletions(-)

diff --git a/public/Rosa_Braunsteigl-Mueller.json b/public/Rosa_Braunsteigl-Mueller.json
index 960a4b3..45d005c 100644
--- a/public/Rosa_Braunsteigl-Mueller.json
+++ b/public/Rosa_Braunsteigl-Mueller.json
@@ -1,157 +1,167 @@
-{
-  "ego": {
-    "name": "Rosa Braunsteigl-Müller",
-    "currentGender": "weiblich",
-    "age": "45",
-    "note": "lorem ipsum"
-  },
-  "alteri": [
-    {
-      "id": 11,
-      "name": "Ewald",
-      "role": "Familienangehörige*r",
-      "roleDefault": true,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "genderDefault": true,
-      "age": "",
-      "note": "",
-      "deceased": false,
-      "edgeType": 1,
-      "edgeTypeByUser": -1,
-      "angle": 82.59647651462154,
-      "distance": 61.56025977017402
-    },
-    {
-      "id": 10,
-      "name": "Josefine",
-      "role": "Großtante",
-      "roleDefault": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "genderDefault": false,
-      "age": "86",
-      "note": "",
-      "deceased": false,
-      "edgeType": "0",
-      "edgeTypeByUser": "0",
-      "angle": 63.66630822906832,
-      "distance": 78.41498418743308
-    },
-    {
-      "id": 9,
-      "name": "Strolchi",
-      "role": "Hund",
-      "roleDefault": false,
-      "human": false,
-      "currentGender": "nicht festgelegt",
-      "genderDefault": true,
-      "age": "",
-      "note": "",
-      "deceased": false,
-      "edgeType": 0,
-      "edgeTypeByUser": -1,
-      "angle": 32.91800440620509,
-      "distance": 49.93474976494444
-    },
-    {
-      "id": 8,
-      "name": "Susi",
-      "role": "Studienkolleg*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "age": "27",
-      "note": "",
-      "edgeType": 1,
-      "angle": -131.1060924804431,
-      "distance": 42.31366368839073
-    },
-    {
-      "id": 7,
-      "name": "Dr. Maier",
-      "role": "Ärzt*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": -50.92234207573893,
-      "distance": 93.73453583270009
-    },
-    {
-      "id": 5,
-      "name": "Hubert",
-      "role": "Vater",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "männlich",
-      "age": "",
-      "note": "",
-      "deceased": true,
-      "edgeType": 0,
-      "angle": 70,
-      "distance": 103
-    },
-    {
-      "id": 4,
-      "name": "Lara",
-      "role": "Freund*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "divers",
-      "age": "34",
-      "note": "",
-      "edgeType": 2,
-      "angle": 137.52753497925326,
-      "distance": 75.01518991342189
-    },
-    {
-      "id": 3,
-      "name": "Max",
-      "role": "Studienkolleg*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": -114.86833156298106,
-      "distance": 71.90407620902847
-    },
-    {
-      "id": 2,
-      "name": "Richard",
-      "role": "Lebensgefährt*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "männlich",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": 15.195768445698295,
-      "distance": 19.709025754817713
-    },
+{
+  "versions": [
     {
       "id": 1,
-      "name": "Maria",
-      "role": "Mutter",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": 30.051411748698495,
-      "distance": 27.853551485665644
+      "title": "Erstgespräch",
+      "date": "2024-02-26",
+      "nwk": {
+        "ego": {
+          "name": "Rosa Braunsteigl-Müller",
+          "currentGender": "weiblich",
+          "age": "45",
+          "note": "lorem ipsum"
+        },
+        "alteri": [
+          {
+            "id": 11,
+            "name": "Ewald",
+            "role": "Familienangehörige*r",
+            "roleDefault": true,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "genderDefault": true,
+            "age": "",
+            "note": "",
+            "deceased": false,
+            "edgeType": 1,
+            "edgeTypeByUser": -1,
+            "angle": 82.59647651462154,
+            "distance": 61.56025977017402
+          },
+          {
+            "id": 10,
+            "name": "Josefine",
+            "role": "Großtante",
+            "roleDefault": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "genderDefault": false,
+            "age": "86",
+            "note": "",
+            "deceased": false,
+            "edgeType": "0",
+            "edgeTypeByUser": "0",
+            "angle": 63.66630822906832,
+            "distance": 78.41498418743308
+          },
+          {
+            "id": 9,
+            "name": "Strolchi",
+            "role": "Hund",
+            "roleDefault": false,
+            "human": false,
+            "currentGender": "nicht festgelegt",
+            "genderDefault": true,
+            "age": "",
+            "note": "",
+            "deceased": false,
+            "edgeType": 0,
+            "edgeTypeByUser": -1,
+            "angle": 32.91800440620509,
+            "distance": 49.93474976494444
+          },
+          {
+            "id": 8,
+            "name": "Susi",
+            "role": "Studienkolleg*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "age": "27",
+            "note": "",
+            "edgeType": 1,
+            "angle": -131.1060924804431,
+            "distance": 42.31366368839073
+          },
+          {
+            "id": 7,
+            "name": "Dr. Maier",
+            "role": "Ärzt*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": -50.92234207573893,
+            "distance": 93.73453583270009
+          },
+          {
+            "id": 5,
+            "name": "Hubert",
+            "role": "Vater",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "männlich",
+            "age": "",
+            "note": "",
+            "deceased": true,
+            "edgeType": 0,
+            "angle": 70,
+            "distance": 103
+          },
+          {
+            "id": 4,
+            "name": "Lara",
+            "role": "Freund*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "divers",
+            "age": "34",
+            "note": "",
+            "edgeType": 2,
+            "angle": 137.52753497925326,
+            "distance": 75.01518991342189
+          },
+          {
+            "id": 3,
+            "name": "Max",
+            "role": "Studienkolleg*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": -114.86833156298106,
+            "distance": 71.90407620902847
+          },
+          {
+            "id": 2,
+            "name": "Richard",
+            "role": "Lebensgefährt*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "männlich",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": 15.195768445698295,
+            "distance": 19.709025754817713
+          },
+          {
+            "id": 1,
+            "name": "Maria",
+            "role": "Mutter",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": 30.051411748698495,
+            "distance": 27.853551485665644
+          }
+        ],
+        "connections": [
+          { "id1": 1, "id2": 4 },
+          { "id1": 1, "id2": 2 },
+          { "id1": 1, "id2": 10 },
+          { "id1": 11, "id2": 10 },
+          { "id1": 11, "id2": 1 }
+        ]
+      }
     }
   ],
-  "connections": [
-    { "id1": 1, "id2": 4 },
-    { "id1": 1, "id2": 2 },
-    { "id1": 1, "id2": 10 },
-    { "id1": 11, "id2": 10 },
-    { "id1": 11, "id2": 1 }
-  ]
+  "currentVersion": 1
 }
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index 001a9a8..e11ac57 100644
--- a/src/components/ComparisonOptionsPanel.vue
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -77,14 +77,14 @@
                   <span>Karte wechseln</span>
                 </button>
 
-                <!-- TODO hide comparison button before merging into main -->
+                <!-- TODO hide comparison button in the production code in main branch
                 <button class="button" @click.stop="toggleComparison" disabled>
                   <span class="icon">
                     <font-awesome-icon icon="compress-arrows-alt" />
                   </span>
                   <span v-if="!nwkcomparison">Vergleich ein</span>
                   <span v-else>Vergleich aus</span>
-                </button>
+                </button> -->
               </div>
 
               <div v-if="newVersion">
@@ -233,8 +233,7 @@ export default defineComponent({
     };
 
     const deleteVersion = () => {
-      const index: number = currentVersion.value - 1; // TODO AR 29 Aug 2023 bad smell, check!
-      store.commit("removeCurrentVersion", index);
+      store.commit("removeCurrentVersion");
     };
 
     return {
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index b6b8fa8..ca0eb73 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -174,16 +174,7 @@ export default defineComponent({
       store.commit("prepareToSaveJSON");
 
       let nwkJSON = JSON.stringify(store.state.record);
-      let filename =
-        store.state.nwk.ego.name +
-        " " +
-        visibleNWKVersion.value?.title +
-        " " +
-        visibleNWKVersion.value?.date?.substring(8, 10) +
-        "." +
-        visibleNWKVersion.value?.date?.substring(5, 7) +
-        "." +
-        visibleNWKVersion.value?.date?.substring(0, 4);
+      let filename = store.state.nwk.ego.name;
 
       if (store.state.pseudonym.active) {
         const tempNWK = JSON.parse(nwkJSON) as NWK;
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index d86f68e..42bbcbc 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -33,7 +33,7 @@
       <div id="egobar">
         <p class="name">{{ "Ankerperson: " + ego.name }}</p>
         <span v-if="versions.length && currentVersion >= 0">
-          Gedruckte Version: {{ visibleNWKVersion?.title || "" }}
+          Gedruckte Karte: {{ visibleNWKVersion?.title || "" }}
           vom
           <!-- TODO use internationalizable date formater -->
           {{

From 359d564d23a8f9d200a2a093a7e465d4e392a4ae Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:13:26 +0100
Subject: [PATCH 35/35] changelog for v.2.1.0

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a62c239..7973427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # easyNWK Version History
 
+## version 2.1.0, released 26 Feb 2024
+
+* (feature) create or duplicate network maps to document change over time [#118](https://github.com/fhstp/easynwk-web/issues/118)
+  * warning: new JSON file format (network maps saved in previous versions can be opened in 2.1.0)
+
 ## version 2.0.6, released 25 Aug 2023
 
 * (feature) zoom with brushbox, mouse wheel, and sector labels [#103](https://github.com/fhstp/easynwk-web/issues/103)
diff --git a/package.json b/package.json
index 977a91a..e221968 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",