From e7943dc8bd54699da7c8bfc2690c72e4e5c74031 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 5 Sep 2023 12:15:53 +0200
Subject: [PATCH 01/17] =?UTF-8?q?Anfang=20des=20=C3=9Cbersetzens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  10 +++
 src/components/AlteriConnectionList.vue |  14 +++
 src/components/AlteriPanel.vue          |  22 ++++-
 src/de.ts                               | 108 ++++++++++++++++++++++++
 src/en.ts                               | 108 ++++++++++++++++++++++++
 src/views/HomeView.vue                  |  41 +++++++--
 6 files changed, 293 insertions(+), 10 deletions(-)
 create mode 100644 src/de.ts
 create mode 100644 src/en.ts

diff --git a/src/App.vue b/src/App.vue
index 2dfc132..bd5bf6f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,16 @@ export default {
   created(): void {
     document.documentElement.setAttribute("lang", "de");
   },
+  methods: {
+    onLangChange(event: any): void {
+      document.documentElement.setAttribute("lang", event.target.value);
+    },
+  },
+  data: function () {
+    return {
+      lang: "de",
+    };
+  },
 };
 </script>
 <style></style>
diff --git a/src/components/AlteriConnectionList.vue b/src/components/AlteriConnectionList.vue
index d50e5e7..710c10f 100644
--- a/src/components/AlteriConnectionList.vue
+++ b/src/components/AlteriConnectionList.vue
@@ -44,8 +44,22 @@ import { defineComponent, computed, onMounted } from "vue";
 import { useStore } from "@/store";
 import { isConnectable } from "@/data/Alter";
 import { TAB_CONNECTIONS } from "@/store/viewOptionsModule";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
+  data() {
+    return {
+      lang: "de",
+    };
+  },
   props: {
     alter: {
       type: Object,
diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index 04089d4..9f99238 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="panel">
     <p class="panel-heading">
-      <span>Kontakte</span>
+      <span>{{ t("contacts") }}</span>
       <span class="buttons are-small">
         <button
           class="button"
@@ -21,12 +21,12 @@
       </span>
     </p>
     <p class="panel-block" style="display: block" v-if="alteri.length < 1">
-      Noch keine Kontakte vorhanden.<br />
-      Klicken Sie auf den Button mit dem
+      {{ t("nocontactsyet1") }}<br />
+      {{ t("nocontactsyet2") }}
       <span class="icon is-small">
         <font-awesome-icon icon="user-plus" />
       </span>
-      Symbol, um Kontakte in der Netzwerkkarte anzulegen.
+      {{ t("nocontactsyet3") }}
     </p>
 
     <AlteriPanelEntry
@@ -42,6 +42,8 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
 
 import AlteriPanelEntry from "@/components/AlteriPanelEntry.vue";
 
@@ -49,6 +51,18 @@ import AlteriPanelEntry from "@/components/AlteriPanelEntry.vue";
 // manages the edited-alter (from above or by itself) --> vuex store
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
+  data() {
+    return {
+      lang: "de",
+    };
+  },
   components: { AlteriPanelEntry },
   props: {
     // toogled after each click on the map (resets keyboard cursor)
diff --git a/src/de.ts b/src/de.ts
new file mode 100644
index 0000000..0728a61
--- /dev/null
+++ b/src/de.ts
@@ -0,0 +1,108 @@
+export default {
+  data() {
+    return {
+      de: {
+        //networkMap: {
+        family: "Familie",
+        friends: "Freund*innen/Bekannte",
+        colleagues: "Kolleg*innen",
+        professionals: "prof. Helfer*innen",
+        maptext: "Klicke in die Karte um die Position festzulegen",
+        //},
+        //sideMenu: {
+        newNWK: "Neue NWK",
+        open: "Öffnen",
+        save: "Speichern",
+        openDemo: "Demo laden",
+        exportPNG: "PNG exportieren",
+        exportkeyfigures: "Kennzahlen exportieren",
+        createPDF: "PDF erstellen",
+        keyfigures: "Kennzahlen",
+        abouteasyNWK: "Über die easyNWK",
+        sourcecode: "Source Code (Version 2.0.5)",
+        imprint: "Impressum",
+        //},
+        //statisticPanel: {
+        overview: "Überblick",
+        sector: "Sektor",
+        profhelp: "Prof. Hilfe",
+        horizon: "Horizont",
+        horizoncumulative: "Horizont (kumulativ)",
+        gender: "Geschlecht",
+        networksize: "Netzwerkgröße",
+        realtionshipweight: "Beziehungsgewicht",
+        totaldensity: "Dichte gesamt",
+        stars: "Star(s)",
+        bridges: "Brücken",
+        bridgepersons: "Brückenperson(en)",
+        isolatedpersons: "Isolierte",
+        personswithoutedgetotheego: "Personen ohne Kante zur Ankerperson",
+        //},
+        //viewOptions: {
+        viewsettings: "Ansichtseinstellungen",
+        anonymiseon: "Anonymisieren",
+        horizonson: "Horizonte ein",
+        connectionson: "Verbindungen ein",
+        namesofcontactson: "Kontaktnamen ein",
+        ageofcontactson: "Alter der Kontakte ein",
+        roleofcontactson: "Rolle der Kontakte ein",
+        anonymiseoff: "De-Anonymisieren",
+        horizonsoff: "Horizonte aus",
+        connectionsoff: "Verbindungen aus",
+        namesofcontactsoff: "Kontaktnamen aus",
+        ageofcontactsoff: "Alter der Kontakte aus",
+        roleofcontactsoff: "Rolle der Kontakte aus",
+        //},
+        //pdfView: {
+        printorpdf: "Drucken bzw. als PDF drucken",
+        closeandback: "Schließen & zur easyNWK zurückkehren",
+        printtext:
+          "Um eine PDF Datei dieser Ansicht zu erzeugen, wählen Sie im Druckdialog 'Als PDF speichern.'Sie können die Daten der Kontakte auch markieren, kopieren und in einem Textverarbeitungsprogramm einfügen.",
+        //},
+        //egoPanel: {},
+        //egoEdit: {
+        ego: "Ankerperson",
+        name: "Name",
+        genders: "Geschlecht",
+        male: "männlich",
+        female: "weiblich",
+        diverse: "divers",
+        notspecified: "not nicht festgelegt",
+        age: "Alter",
+        notesaboutego: "Notizen zum Kontakt",
+        Whoisinthecenter: "Wer steht im Zentrum der NWK?",
+        mandatoryfield: "Pflichtfeld",
+        done: "Schließen",
+        //},
+        //alterPanel: {
+        contacts: "Kontakte",
+        nocontactsyet1: "Noch keine Kontakte vorhanden.",
+        nocontactsyet2: "Klicken Sie auf den Button mit dem  ",
+        nocontactsyet3: " Symbol, um Kontakte in der Netzwerkkarte anzulegen.",
+        //},
+        //alterEdit: {
+        addcontact: "Kontakt hinzufügen",
+        positiononmap: "Die Position in der Karte muss noch festgelegt werden.",
+        role: "Rolle",
+        human: "Mensch",
+        deceased: "+verstorben",
+        relationship: "Beziehung",
+        existing: "besteht",
+        multiplex: "multiplex",
+        nocurrentrelationship: "keine aktuelle Beziehung",
+        notesaboutcontact: "Notizen zum Kontakt",
+        nextcontact: "Nächster Kontakt",
+        close: "Schließen",
+        cancel: "Abbrechen",
+        //},
+        //alterConnections: {
+        relationshipsof: "Beziehungen von",
+        clickoncontacttoconnect:
+          "Klicke auf einen Kontakt um diesen mit  zu verbinden bzw. die Verbindung zu lösen.",
+        possiblecontacts: "Mögliche Kontakte",
+        connectedcontacts: "Verbundene Kontakte",
+        //},
+      },
+    };
+  },
+};
diff --git a/src/en.ts b/src/en.ts
new file mode 100644
index 0000000..3cd9094
--- /dev/null
+++ b/src/en.ts
@@ -0,0 +1,108 @@
+export default {
+  data() {
+    return {
+      en: {
+        //networkMap: {
+        family: "Family",
+        friends: "Friends",
+        colleagues: "Colleagues",
+        professionals: "prof. Help",
+        maptext: "Click on the map to determine the position",
+        //},
+        //sideMenu: {
+        newNWK: "New NWK",
+        open: "Open",
+        save: "Save",
+        openDemo: "Open demo",
+        exportPNG: "Export PNG",
+        exportkeyfigures: "Export key figures",
+        createPDF: "Create PDF",
+        keyfigures: "Key figures",
+        abouteasyNWK: "About the easyNWK",
+        sourcecode: "Source code (Version 2.0.5)",
+        imprint: "Imprint",
+        //},
+        //statisticPanel: {
+        overview: "Overview",
+        sector: "Sector",
+        profhelp: "prof. help",
+        horizon: "Horizon",
+        horizoncumulative: "Horizon (cumulative)",
+        gender: "Gender",
+        networksize: "Network size",
+        realtionshipweight: "Relationship weight",
+        totaldensity: "Total density",
+        stars: "Star(s)",
+        bridges: "Bridges",
+        bridgepersons: "Bridge person(s)",
+        isolatedpersons: "Isolated person(s)",
+        personswithoutedgetotheego: "Person(s) without edge to the ego",
+        //},
+        //viewOptions: {
+        viewsettings: "View settings",
+        anonymiseon: "Anonymise",
+        horizonson: "Horizons on",
+        connectionson: "Connections on",
+        namesofcontactson: "Name of contacts on",
+        ageofcontactson: "Age of contacts on",
+        roleofcontactson: "Role of contacts on",
+        anonymiseoff: "De-anonymise",
+        horizonsoff: "Horizons off",
+        connectionsoff: "Connections off",
+        namesofcontactsoff: "Name of contacts off",
+        ageofcontactsoff: "Age of contacts off",
+        roleofcontactsoff: "Role of contacts off",
+        //},
+        //pdfView: {
+        printorpdf: "Print or print as PDF",
+        closeandback: "Close & go back to easyNWK",
+        printtext:
+          "In order to generate a PDF file of this view, select 'Save as PDF' in the print dialogue. You can also highlight the data and copy & paste it into a word processor.",
+        //},
+        //egoPanel: {},
+        //egoEdit: {
+        ego: "Ego",
+        name: "Name",
+        genders: "Gender",
+        male: "male",
+        female: "female",
+        diverse: "diverse",
+        notspecified: "not specified",
+        age: "Age",
+        notesaboutego: "notes about ego",
+        Whoisinthecenter: "Who is in the center of the NWK?",
+        mandatoryfield: "Mandatory field",
+        done: "Done",
+        //},
+        //alterPanel: {
+        contacts: "Contacts",
+        nocontactsyet1: "No contacts available yet.",
+        nocontactsyet2: "Click on the button with the  ",
+        nocontactsyet3: "  symbol to add contacts to the networkmap.",
+        //},
+        //alterEdit: {
+        addcontact: "Add contact",
+        positiononmap: "The position on the map still has to be determined.",
+        role: "Role",
+        human: "Human",
+        deceased: "+deceased",
+        relationship: "Relationship",
+        existing: "existing",
+        multiplex: "multiplex",
+        nocurrentrelationship: "no current relationship",
+        notesaboutcontact: "notes about contact",
+        nextcontact: "Next contact",
+        close: "Close",
+        cancel: "Cancel",
+        //},
+        //alterConnections: {
+        relationshipsof: "Relationships of",
+        clickoncontacttoconnect:
+          "Click on the contact to connect it/ cancel the connection with",
+        possiblecontacts: "Possible contacts",
+        connectedcontacts: "Connected contacts",
+        //},
+      },
+    };
+  },
+};
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 22357e5..b35f461 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,4 +1,8 @@
 <template>
+  <select name="lang" v-model="lang" @change="onLangChange($event)">
+    <option value="de">Deutsch</option>
+    <option value="en">English</option>
+  </select>
   <div id="container">
     <ErrorBoundary>
       <!-- TODO use slots to separate layout from logic https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots -->
@@ -13,20 +17,32 @@
             <UndoRedo />
           </div>
           <div id="egobar">
-            <EgoHeader v-if="!egoEditMode" @edit="egoEditMode = true" />
+            <EgoHeader
+              v-if="!egoEditMode"
+              @edit="egoEditMode = true"
+              :key="langKey"
+            />
           </div>
 
           <div id="forms">
-            <EgoEditForm v-if="egoEditMode" @edit-finished="editEgoFinished" />
+            <EgoEditForm
+              v-if="egoEditMode"
+              @edit-finished="editEgoFinished"
+              :key="langKey"
+            />
 
-            <AlteriPanel v-if="!egoEditMode" :mapclicked="mapclicked" />
-            <ViewOptionsPanel />
-            <StatisticsPanel v-if="showStatistics" />
+            <AlteriPanel
+              v-if="!egoEditMode"
+              :mapclicked="mapclicked"
+              :key="langKey"
+            />
+            <ViewOptionsPanel :key="langKey" />
+            <StatisticsPanel v-if="showStatistics" :key="langKey" />
           </div>
         </div>
       </div>
       <div id="chart">
-        <NetworkMap @map-click="mapclick" />
+        <NetworkMap @map-click="mapclick" :key="langKey" />
       </div>
     </ErrorBoundary>
   </div>
@@ -60,6 +76,19 @@ export default defineComponent({
     ViewOptionsPanel,
   },
 
+  methods: {
+    onLangChange(event: any) {
+      document.documentElement.setAttribute("lang", event.target.value);
+      this.langKey = document.documentElement.lang;
+    },
+  },
+  data: function () {
+    return {
+      lang: "de",
+      langKey: "de",
+    };
+  },
+
   setup() {
     // managing the currently open Alter --> moved to store
 

From 10e400157901bce23ec983066ae7bf4a14e98732 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 5 Sep 2023 15:20:27 +0200
Subject: [PATCH 02/17] =?UTF-8?q?=C3=9Cbersetzung=20von=20einem=20Gro?=
 =?UTF-8?q?=C3=9Fteil=20des=20Textes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriConnectionList.vue      | 12 ++--
 src/components/AlteriEditForm.vue            | 53 ++++++++------
 src/components/EgoEditForm.vue               | 21 ++++--
 src/components/EgoHeader.vue                 | 11 ++-
 src/components/NetworkMap.vue                | 13 +++-
 src/components/NetworkMapSectors.vue         | 29 ++++++--
 src/components/SideMenu.vue                  | 33 ++++++---
 src/components/StatisticsPanel.vue           | 11 ++-
 src/components/StatisticsTable.vue           | 25 ++++---
 src/components/StatisticsTableCategories.vue | 25 ++++---
 src/components/ViewOptionsPanel.vue          | 35 +++++----
 src/data/Sectors.ts                          |  8 +++
 src/data/roles_en.json                       | 75 ++++++++++++++++++++
 src/de.ts                                    | 18 +++--
 src/en.ts                                    | 16 +++--
 15 files changed, 292 insertions(+), 93 deletions(-)
 create mode 100644 src/data/roles_en.json

diff --git a/src/components/AlteriConnectionList.vue b/src/components/AlteriConnectionList.vue
index 710c10f..36ac24a 100644
--- a/src/components/AlteriConnectionList.vue
+++ b/src/components/AlteriConnectionList.vue
@@ -1,13 +1,13 @@
 <template>
-  <p class="label">Beziehungen von {{ alter.name }}</p>
+  <p class="label">{{ t("relationshipsof") }} {{ alter.name }}</p>
   <p class="help">
-    Klicke auf einen Kontakt um diesen mit {{ alter.name }} zu verbinden bzw.
-    die Verbindung zu lösen.
+    {{ t("clickoncontacttoconnect") }} {{ alter.name }}
+    {{ t("clickoncontacttoconnect2") }}
   </p>
 
   <div class="columns">
     <div class="column">
-      <p class="label">Mögliche Kontakte</p>
+      <p class="label">{{ t("possiblecontacts") }}</p>
       <button
         v-for="other in altersNotConnected"
         :key="other.id"
@@ -18,7 +18,7 @@
       </button>
     </div>
     <div class="column">
-      <p class="label">Verbundene Kontakte</p>
+      <p class="label">{{ t("connectedcontacts") }}</p>
       <button
         v-for="other in altersConnected"
         :key="other.id"
@@ -33,7 +33,7 @@
   <div class="field is-grouped is-grouped-centered">
     <p class="control">
       <button @click.stop="editAlterFinished()" class="button is-primary">
-        Fertig
+        {{ t("done") }}
       </button>
     </p>
   </div>
diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index ad793d4..7e574ce 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -1,17 +1,17 @@
 <template>
-  <p class="label" v-if="addingNewAlter">Kontakt hinzufügen</p>
-  <p class="label" v-else>Kontakt bearbeiten</p>
+  <p class="label" v-if="addingNewAlter">{{ t("addcontact") }}</p>
+  <p class="label" v-else>{{ t("editcontact") }}</p>
   <form class="form" @submit.prevent="editAlterFinished">
     <div class="field has-text-danger" v-if="invalidPosition">
       <span class="icon is-small">
         <font-awesome-icon icon="exclamation-triangle" />
       </span>
-      Die Position in der Karte muss noch festgelegt werden.
+      {{ t("positiononmap") }}
     </div>
 
     <div class="field is-horizontal">
       <div class="field-label is-normal">
-        <label class="label">Name</label>
+        <label class="label">{{ t("name") }}</label>
       </div>
       <div class="field-body">
         <div class="field">
@@ -26,7 +26,7 @@
               placeholder="Vorname oder Spitzname"
             />
           </div>
-          <p class="help">Pflichtfeld</p>
+          <p class="help">{{ t("mandatoryfield") }}</p>
         </div>
       </div>
     </div>
@@ -36,7 +36,7 @@
         <label
           class="label"
           title="Soziale Rolle des Kontakts, Auswahlmöglichkeiten"
-          >Rolle</label
+          >{{ t("role") }}</label
         >
       </div>
       <div class="field-body">
@@ -62,7 +62,7 @@
 
     <div class="field is-horizontal">
       <div class="field-label">
-        <label class="label checkbox" for="chk-human">Mensch</label>
+        <label class="label checkbox" for="chk-human">{{ t("human") }}</label>
       </div>
       <div class="field-body">
         <label>
@@ -76,7 +76,7 @@
         <label
           class="label"
           title="biologisches und/oder soziales Geschlecht; Kategorisierung obliegt der Ankerperson"
-          >Geschlecht</label
+          >{{ t("gender") }}</label
         >
       </div>
       <div class="field-body">
@@ -97,7 +97,7 @@
 
     <div v-else class="field is-horizontal">
       <div class="field-label is-normal">
-        <label class="label">Kategorie</label>
+        <label class="label">{{ t("category") }}</label>
       </div>
       <div class="field-body">
         <div class="field">
@@ -115,8 +115,10 @@
 
     <div class="field is-horizontal">
       <div class="field-label is-normal">
-        <label class="label" title="Optional,soziales Alter der Kontaktperson"
-          >Alter</label
+        <label
+          class="label"
+          title="Optional,soziales Alter der Kontaktperson"
+          >{{ t("age") }}</label
         >
       </div>
       <div class="field-body">
@@ -139,16 +141,16 @@
       <div class="field-body">
         <label class="checkbox" title="Häkchen, falls Kontaktperson verstorben">
           <input type="checkbox" v-model="alterDeceased" />
-          {{ SYMBOL_DECEASED }}verstorben
+          {{ SYMBOL_DECEASED }}{{ t("deceased") }}
         </label>
       </div>
     </div>
 
     <div class="field is-horizontal">
       <div class="field-label">
-        <label class="label" title="Aktualisierung der Verbindung"
-          >Beziehung</label
-        >
+        <label class="label" title="Aktualisierung der Verbindung">{{
+          t("relationship")
+        }}</label>
       </div>
       <div class="field-body">
         <div class="field">
@@ -158,21 +160,21 @@
               title="Beziehung wird aktuell gepflegt, aktualisierte Verbindung."
             >
               <input type="radio" v-model="alterEdgeType" value="1" />
-              besteht
+              {{ t("existing") }}
             </label>
             <label
               class="radio"
               title="Anker- und Kontaktperson begegnen sich in mehreren sozialen Rollen. Beziehung erfüllt mehrere Funktionen."
             >
               <input type="radio" v-model="alterEdgeType" value="2" />
-              multiplex
+              {{ t("multiplex") }}
             </label>
             <label
               class="radio"
               title="Ankerperson und diese Person pflegen zurzeit keinen Kontakt, Beziehung ist nicht aktualisiert (sondern beendet/unterbrochen)."
             >
               <input type="radio" v-model="alterEdgeType" value="0" />
-              keine aktuelle Beziehung
+              {{ t("nocurrentrelationship") }}
             </label>
           </fieldset>
         </div>
@@ -202,7 +204,7 @@
           ref="domButton"
           :disabled="invalidName || invalidPosition"
         >
-          {{ addingNewAlter ? "Nächster Kontakt" : "Schließen" }}
+          {{ addingNewAlter ? t("nextcontact") : t("close") }}
         </button>
       </p>
       <p class="control">
@@ -213,7 +215,7 @@
           type="button"
           @mouseup.prevent="editAlterFinished($event, false)"
         >
-          Schließen
+          {{ t("close") }}
         </button>
       </p>
       <p class="control">
@@ -223,7 +225,7 @@
           type="button"
           @mouseup.prevent="cancelAddAlter"
         >
-          Abbrechen
+          {{ t("cancel") }}
         </button>
       </p>
     </div>
@@ -239,6 +241,8 @@ import { Gender } from "@/data/Gender";
 import { Roles } from "@/data/Roles";
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { TAB_BASE } from "@/store/viewOptionsModule";
+import de from "@/de";
+import en from "@/en";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
@@ -249,6 +253,13 @@ type InputType = HTMLInputElement | HTMLTextAreaElement;
 // emit edit-finished
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   props: {
     // gets Alter as prop cp. ToDo demo
     alter: {
diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index 654f1cb..d347a4a 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -1,12 +1,12 @@
 <template>
   <nav class="panel">
     <p class="panel-heading">
-      <span>Ankerperson</span>
+      <span>{{ t("ego") }}</span>
     </p>
     <form class="panel-block form" @submit.prevent="editEgoFinished">
       <div class="field is-horizontal">
         <div class="field-label is-normal">
-          <label class="label">Name</label>
+          <label class="label">{{ t("name") }}</label>
         </div>
         <div class="field-body">
           <div class="field">
@@ -21,14 +21,14 @@
                 placeholder="Wer steht im Zentrum der NWK?"
               />
             </div>
-            <p class="help">Pflichtfeld</p>
+            <p class="help">{{ t("mandatoryfield") }}</p>
           </div>
         </div>
       </div>
 
       <div class="field is-horizontal">
         <div class="field-label is-normal">
-          <label class="label">Geschlecht</label>
+          <label class="label">{{ t("genders") }}</label>
         </div>
         <div class="field-body">
           <div class="control">
@@ -45,7 +45,7 @@
 
       <div class="field is-horizontal">
         <div class="field-label is-normal">
-          <label class="label">Alter</label>
+          <label class="label">{{ t("age") }}</label>
         </div>
         <div class="field-body">
           <div class="field">
@@ -76,7 +76,7 @@
       <div class="field is-grouped is-grouped-centered">
         <p class="control">
           <button class="button is-primary" :disabled="invalidName">
-            Schließen
+            {{ t("done") }}
           </button>
         </p>
       </div>
@@ -90,10 +90,19 @@ import { useStore } from "@/store";
 
 import { Ego } from "@/data/Ego";
 import { Gender } from "@/data/Gender";
+import de from "@/de";
+import en from "@/en";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup(props, { emit }) {
     const store = useStore();
 
diff --git a/src/components/EgoHeader.vue b/src/components/EgoHeader.vue
index 920c25e..cd5deb5 100644
--- a/src/components/EgoHeader.vue
+++ b/src/components/EgoHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="ego">
-    Ankerperson:&nbsp;
+    {{ t("ego") }}:&nbsp;
     <b>{{ displayName }}</b>
     &nbsp;
     <span v-if="egoAge">/ {{ egoAge }} </span>
@@ -20,9 +20,18 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
 // import { Ego } from "@/data/Ego";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 42dce6e..e0ffeea 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -58,8 +58,8 @@
     <NetworkMapCoordinates :transform="transform" />
 
     <text v-if="isEditMode" text-anchor="middle" class="edithint">
-      <tspan x="0" y="-1em">Klicke in die Karte, um</tspan>
-      <tspan x="0" dy="2em">die Position festzulegen</tspan>
+      <tspan x="0" y="-1em">{{ t("maptext") }}</tspan>
+      <tspan x="0" dy="2em">{{ t("maptext2") }}</tspan>
     </text>
 
     <g id="marksBackgroundLayer">
@@ -255,6 +255,8 @@ import { SYMBOL_DECEASED } from "@/assets/utils";
 import { getRoleAbbrev } from "../data/Roles";
 import { brushSelection, D3BrushEvent } from "d3";
 import { zoom, ZoomTransform, zoomIdentity } from "d3-zoom";
+import de from "@/de";
+import en from "@/en";
 
 interface AlterMark {
   d: Alter;
@@ -278,6 +280,13 @@ interface ConnectionMark {
 // emit "map-click" (which is not currently used)
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   components: { NetworkMapCoordinates, NetworkMapSectors },
   emits: ["map-click"],
 
diff --git a/src/components/NetworkMapSectors.vue b/src/components/NetworkMapSectors.vue
index f747870..2df0092 100644
--- a/src/components/NetworkMapSectors.vue
+++ b/src/components/NetworkMapSectors.vue
@@ -3,25 +3,25 @@
     <g @click="$emit('zoom-sector', 1, -1)" v-if="showSectors[0]">
       <rect x="80" width="21" y="-106" height="11" />
       <text x="100" y="-100" text-anchor="end">
-        {{ Sectors[0] }}
+        {{ langIsGerman() ? Sectors[0] : SectorsEng[0] }}
       </text>
     </g>
     <g @click="$emit('zoom-sector', -1, -1)" v-if="showSectors[1]">
       <rect x="-101" width="50" y="-106" height="11" />
       <text x="-100" y="-100" text-anchor="start">
-        {{ Sectors[1] }}
+        {{ langIsGerman() ? Sectors[1] : SectorsEng[1] }}
       </text>
     </g>
     <g @click="$emit('zoom-sector', -1, 1)" v-if="showSectors[2]">
       <rect x="-101" width="30" y="95" height="11" />
       <text x="-100" y="101" text-anchor="start">
-        {{ Sectors[2] }}
+        {{ langIsGerman() ? Sectors[2] : SectorsEng[2] }}
       </text>
     </g>
     <g @click="$emit('zoom-sector', 1, 1)" v-if="showSectors[3]">
       <rect x="50" width="40" y="95" height="11" />
       <text x="87" y="101" text-anchor="end">
-        {{ Sectors[3] }}
+        {{ langIsGerman() ? Sectors[3] : SectorsEng[3] }}
       </text>
     </g>
   </g>
@@ -30,12 +30,30 @@
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 
-import { Sectors } from "@/data/Sectors";
+import { Sectors, SectorsEng } from "@/data/Sectors";
+import de from "@/de";
+import en from "@/en";
 
 // get Zoom Behavior transform as property
 // emit 'zoom-sector' with index of sector
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+    langIsGerman() {
+      if (document.documentElement.lang == "de") return true;
+      else return false;
+    },
+  },
+  data() {
+    return {
+      lang: "de",
+    };
+  },
   props: {
     transform: {
       type: Object,
@@ -56,6 +74,7 @@ export default defineComponent({
     return {
       showSectors,
       Sectors,
+      SectorsEng,
     };
   },
 });
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 4b34f58..d77271d 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -29,7 +29,7 @@
           <span class="icon">
             <font-awesome-icon icon="file" />
           </span>
-          <span>Neue NWK</span>
+          <span>{{ t("newNWK") }}</span>
         </button>
 
         <div class="file">
@@ -39,7 +39,7 @@
               <span class="file-icon">
                 <font-awesome-icon icon="folder-open" />
               </span>
-              <span class="file-label"> Öffnen </span>
+              <span class="file-label"> {{ t("open") }} </span>
             </span>
           </label>
         </div>
@@ -48,14 +48,14 @@
           <span class="icon">
             <font-awesome-icon icon="save" />
           </span>
-          <span>Speichern</span>
+          <span>{{ t("save") }}</span>
         </button>
 
         <button class="button" @click="openDemoData">
           <!-- <span class="icon">
             <font-awesome-icon icon="save" />
           </span> -->
-          <span>Demo laden</span>
+          <span>{{ t("openDemo") }}</span>
         </button>
 
         <p><br /></p>
@@ -64,14 +64,14 @@
           <span class="icon">
             <font-awesome-icon icon="file-image" />
           </span>
-          <span>PNG exportieren</span>
+          <span>{{ t("exportPNG") }}</span>
         </button>
 
         <button class="button" @click="exportCSV">
           <span class="icon">
             <font-awesome-icon icon="file-csv" />
           </span>
-          <span>Kennzahlen exportieren</span>
+          <span>{{ t("exportkeyfigures") }}</span>
         </button>
 
         <a
@@ -96,7 +96,7 @@
           <span class="icon">
             <font-awesome-icon icon="file-pdf" />
           </span>
-          <span>PDF erstellen</span>
+          <span>{{ t("createPDF") }}</span>
         </a>
 
         <p><br /></p>
@@ -105,16 +105,18 @@
           <span class="icon">
             <font-awesome-icon icon="chart-bar" />
           </span>
-          <span>Kennzahlen</span>
+          <span>{{ t("keyfigures") }}</span>
         </button>
       </div>
 
       <div class="links">
-        <a href="http://www.easynwk.com/" target="_blank">Über die easyNWK</a>
+        <a href="http://www.easynwk.com/" target="_blank">{{
+          t("abouteasyNWK")
+        }}</a>
         <a href="https://github.com/fhstp/easynwk-web" target="_blank"
-          >Source Code (Version {{ appVersion }})</a
+          >{{ t("sourcecode") }} (Version {{ appVersion }})</a
         >
-        <a href="http://www.easynwk.com/impressum/">Impressum</a>
+        <a href="http://www.easynwk.com/impressum/">{{ t("imprint") }}</a>
         <img src="fhstp_sw_pos.png" width="80" height="80" />
       </div>
     </div>
@@ -128,8 +130,17 @@ import { useStore } from "@/store";
 import { downloadSVGasPNG, downloadText } from "@/assets/utils";
 import { statisticsCSV } from "@/data/statisticsCSV";
 import { NWK } from "@/data/NWK";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup(props, { emit }) {
     const menuOpen = ref(false);
 
diff --git a/src/components/StatisticsPanel.vue b/src/components/StatisticsPanel.vue
index f346248..57aed8e 100644
--- a/src/components/StatisticsPanel.vue
+++ b/src/components/StatisticsPanel.vue
@@ -4,7 +4,7 @@
       <span class="icon is-medium">
         <font-awesome-icon icon="chart-bar" size="lg" />
       </span>
-      <span>Kennzahlen</span>
+      <span>{{ t("keyfigures") }}</span>
       <span style="flex: 1">&nbsp;</span>
       <span class="icon is-medium clickAble" @click="hideStatistics">
         <font-awesome-icon icon="times" size="1x" />
@@ -37,8 +37,17 @@ import {
   allAlterCategorizationKeys,
   getAlterCategorization,
 } from "@/data/AlterCategories";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   components: { StatisticsTable, StatisticsTableCategories },
   setup() {
     const store = useStore();
diff --git a/src/components/StatisticsTable.vue b/src/components/StatisticsTable.vue
index b28a297..2c60df6 100644
--- a/src/components/StatisticsTable.vue
+++ b/src/components/StatisticsTable.vue
@@ -12,7 +12,7 @@
           <th
             title="Anzahl der Kontakte im Netzwerk exklusive Ankerperson und exklusive Personen ohne Kante zur Ankerperson"
           >
-            Netzwerkgröße
+            {{ t("networksize") }}
             <!-- <span class="icon">
             <font-awesome-icon icon="info-circle" />
           </span> -->
@@ -23,7 +23,7 @@
           <th
             title="Summierte Nähe bzw. Distanz der Kontakte zur Ankerperson. Je höher die Kennzahl, umso näher stehen die Personen der Ankerperson."
           >
-            Beziehungsgewicht
+            {{ t("relationshipweight") }}
           </th>
           <td>{{ naehenSum }}</td>
         </tr>
@@ -31,7 +31,7 @@
           <th
             title="Verhältnis der tatsächlich vorhandenen zu den theoretisch möglichen Verbindungen (exklusive der Verbindungen zwischen Anker- und Kontaktpersonen, inklusive Personen ohne Kante zur Ankerperson). Optional: Maßzahl liegt zwischen 0 (nur isolierte Kontakte) und 1 (jede Person im Netzwerk ist mit jeder anderen verbunden)."
           >
-            Dichte gesamt
+            {{ t("totaldensity") }}
           </th>
           <td>
             {{
@@ -46,7 +46,7 @@
           <th
             title="Kontakt(e) mit den meisten Verbindungen im Netzwerk (neben der Ankerperson)"
           >
-            Star(s)
+            {{ t("stars") }}
           </th>
           <td @click="clickCell('stars')" :class="{ clickAble: stars != '-' }">
             {{ stars }}
@@ -54,7 +54,7 @@
         </tr>
         <tr>
           <th title="Anzahl der Verbindungen zwischen den Sektoren im Netzwerk">
-            Brücken
+            {{ t("bridges") }}
           </th>
           <td>{{ bridgesCount }}</td>
         </tr>
@@ -62,7 +62,7 @@
           <th
             title="Kontakt(e), die einzelne Sektoren im Netzwerk miteinander verbinden"
           >
-            Brückenperson(en)
+            {{ t("bridgepersons") }}
           </th>
           <td
             @click="clickCell('bridgePersons')"
@@ -75,7 +75,7 @@
           <th
             title="Kontakt(e), die ausschließlich mit der Ankerperson verbunden sind"
           >
-            Isolierte
+            {{ t("isolatedpersons") }}
           </th>
           <td
             @click="clickCell('isolated')"
@@ -88,7 +88,7 @@
           <th
             title="Lebende Personen ohne aktualisierte Verbindung zur Ankerperson. Verbindungen mit anderen Personen im Netzwerk und damit indirekte Verbindung zur Ankerperson sind möglich."
           >
-            Personen ohne Kante zur Ankerperson
+            {{ t("personswithoutedgetotheego") }}
           </th>
           <td
             @click="clickCell('alterZeroEdge')"
@@ -112,8 +112,17 @@ import {
   NetworkAnalysis,
 } from "@/data/NetworkAnalysis";
 import { getAlterCategorization } from "@/data/AlterCategories";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/components/StatisticsTableCategories.vue b/src/components/StatisticsTableCategories.vue
index 3a05488..ef5b6a6 100644
--- a/src/components/StatisticsTableCategories.vue
+++ b/src/components/StatisticsTableCategories.vue
@@ -12,7 +12,7 @@
           <th
             title="Anzahl der Kontakte im Netzwerk exklusive Ankerperson und exklusive Personen ohne Kante zur Ankerperson"
           >
-            Netzwerkgröße
+            {{ t("networksize") }}
             <!-- <span class="icon">
             <font-awesome-icon icon="info-circle" />
           </span> -->
@@ -25,7 +25,7 @@
           <th
             title="summierte Nähe bzw. Distanz der Kontakte zur Ankerperson. Je höher die Kennzahl, umso näher stehen die Personen der Ankerperson."
           >
-            Beziehungsgewicht
+            {{ t("relationshipweight") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">
             {{ naehenSum[i] }}
@@ -35,7 +35,7 @@
           <th
             title="Verhältnis der tatsächlich vorhandenen zu den theoretisch möglichen Verbindungen (exklusive der Verbindungen zwischen Anker- und Kontaktpersonen, inklusive Personen ohne Kante zur Ankerperson). Optional: Maßzahl liegt zwischen 0 (nur isolierte Kontakte) und 1 (jede Person im Netzwerk ist mit jeder anderen verbunden)."
           >
-            Dichte der Kategorie
+            {{ t("categorydensity") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">{{ density[i] }}</td>
         </tr>
@@ -49,7 +49,7 @@
           <th
             title="Kontakt(e) mit den meisten Verbindungen im Netzwerk (neben der Ankerperson)"
           >
-            Star(s) (pro Kategorie)
+            {{ t("categorystar") }}
           </th>
           <td
             v-for="(cat, i) in categoryLabels"
@@ -62,7 +62,7 @@
         </tr>
         <tr>
           <th title="Anzahl der Verbindungen zwischen den Sektoren im Netzwerk">
-            Brücken
+            {{ t("bridges") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">
             {{ bridgesCount[i] }}
@@ -72,7 +72,7 @@
           <th
             title="Kontakt(e), die einzelne Sektoren im Netzwerk miteinander verbinden"
           >
-            Brückenperson(en)
+            {{ t("bridgepersons") }}
           </th>
           <td
             v-for="(cat, i) in categoryLabels"
@@ -87,7 +87,7 @@
           <th
             title="Kontakt(e), die ausschließlich mit der Ankerperson verbunden sind"
           >
-            Isolierte
+            {{ t("isolatedpersons") }}
           </th>
           <td
             v-for="(cat, i) in categoryLabels"
@@ -102,7 +102,7 @@
           <th
             title="Lebende Personen ohne aktualisierte Verbindung zur Ankerperson. Verbindungen mit anderen Personen im Netzwerk und damit indirekte Verbindung zur Ankerperson sind möglich."
           >
-            Personen ohne Kante zur Ankerperson
+            {{ t("personswithoutedgetotheego") }}
           </th>
           <td
             v-for="(cat, i) in categoryLabels"
@@ -129,8 +129,17 @@ import {
   NetworkAnalysis,
 } from "@/data/NetworkAnalysis";
 import { getAlterCategorization } from "@/data/AlterCategories";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   props: {
     categories: {
       type: String,
diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
index cb22d80..30ad0f4 100644
--- a/src/components/ViewOptionsPanel.vue
+++ b/src/components/ViewOptionsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="panel">
     <p class="panel-heading" @click.stop="isOpen = !isOpen">
-      <span>Ansichtseinstellungen</span>
+      <span>{{ t("viewsettings") }}</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" />
@@ -17,8 +17,8 @@
                   <span class="icon">
                     <font-awesome-icon icon="user-secret" />
                   </span>
-                  <span v-if="pseudonyms">De-Anonymisieren</span>
-                  <span v-else>Anonymisieren</span>
+                  <span v-if="pseudonyms">{{ t("anonymiseoff") }}</span>
+                  <span v-else>{{ t("anonymiseon") }}</span>
                   <span></span>
                 </button>
 
@@ -26,8 +26,8 @@
                   <span class="icon">
                     <font-awesome-icon icon="rss" />
                   </span>
-                  <span v-if="horizons">Horizonte aus</span>
-                  <span v-else>Horizonte ein</span>
+                  <span v-if="horizons">{{ t("horizonsoff") }}</span>
+                  <span v-else>{{ t("horizonson") }}</span>
                 </button>
 
                 <br />
@@ -36,32 +36,32 @@
                   <span class="icon">
                     <font-awesome-icon icon="project-diagram" />
                   </span>
-                  <span v-if="connections">Verbindungen aus</span>
-                  <span v-else>Verbindungen ein</span>
+                  <span v-if="connections">{{ t("connectionsoff") }}</span>
+                  <span v-else>{{ t("connectionson") }}</span>
                 </button>
 
                 <button class="button" @click.stop="toggleAlteriNames">
                   <span class="icon">
                     <font-awesome-icon icon="font" />
                   </span>
-                  <span v-if="alteriNames">Kontaktnamen aus</span>
-                  <span v-else>Kontaktnamen ein</span>
+                  <span v-if="alteriNames">{{ t("namesofcontactsoff") }}</span>
+                  <span v-else>{{ t("namesofcontactson") }}</span>
                 </button>
 
                 <button class="button" @click.stop="toggleAge">
                   <span class="icon">
                     <font-awesome-icon icon="info" />
                   </span>
-                  <span v-if="showAge">Alter der Kontakte aus</span>
-                  <span v-else>Alter der Kontakte ein</span>
+                  <span v-if="showAge">{{ t("ageofcontactsoff") }}</span>
+                  <span v-else>{{ t("ageofcontactson") }}</span>
                 </button>
 
                 <button class="button" @click.stop="toggleRoleShort">
                   <span class="icon">
                     <font-awesome-icon icon="info" />
                   </span>
-                  <span v-if="showRole">Rolle der Kontakte aus</span>
-                  <span v-else>Rolle der Kontakte ein</span>
+                  <span v-if="showRole">{{ t("roleofcontactsoff") }}</span>
+                  <span v-else>{{ t("roleofcontactson") }}</span>
                 </button>
               </div>
             </div>
@@ -75,8 +75,17 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/data/Sectors.ts b/src/data/Sectors.ts
index 1c45705..24a069b 100644
--- a/src/data/Sectors.ts
+++ b/src/data/Sectors.ts
@@ -4,6 +4,7 @@ export const Sectors = [
   "Kolleg*innen",
   "prof. Helfer*innen",
 ];
+export const SectorsEng = ["Family", "Friends", "Colleagues", "prof. Help"];
 
 export const SectorDefaultRoles = [
   "Familienangehörige*r",
@@ -11,3 +12,10 @@ export const SectorDefaultRoles = [
   "Kolleg*in",
   "prof. Helfer*in",
 ];
+
+export const SectorDefaultRolesEng = [
+  "Familienangehörige*r",
+  "Freund*in",
+  "Kolleg*in",
+  "prof. Helfer*in",
+];
diff --git a/src/data/roles_en.json b/src/data/roles_en.json
new file mode 100644
index 0000000..e11f3d0
--- /dev/null
+++ b/src/data/roles_en.json
@@ -0,0 +1,75 @@
+[
+  { "label": "familiy member", "german": "Familienangehörige*r", "gender": 3, "abbrev": "Fa" },
+  { "label": "wife", "german": "Ehefrau", "gender": 0, "abbrev": "Ef" },
+  { "label": "husband", "german": "Ehemann", "gender": 1, "abbrev": "Em" },
+  { "label": "life partner", "german": "Lebensgefährt*in", "gender": 3, "abbrev": "Lgf" },
+  { "label": "partner", "german": "Partner*in", "gender": 3, "abbrev": "Pr" },
+  { "label": "mother", "german": "Mutter", "gender": 0, "abbrev": "Mu" },
+  { "label": "father", "german": "Vater", "gender": 1, "abbrev": "Va" },
+  { "label": "stepmother", "german": "Stiefmutter", "gender": 0, "abbrev": "StM" },
+  { "label": "step father", "german": "Stiefvater", "gender": 1, "abbrev": "Stv" },
+  { "label": "foster mother", "german": "Pflegemutter", "gender": 0, "abbrev": "PfM" },
+  { "label": "foster father", "german": "Pflegevater", "gender": 1, "abbrev": "Pfv" },
+  { "label": "adoptive mother", "german": "Adoptivmutter", "gender": 0, "abbrev": "AMu" },
+  { "label": "adoptive father", "german": "Adoptivvater", "gender": 1, "abbrev": "AVa" },
+  { "label": "sister", "german": "Schwester", "gender": 0, "abbrev": "Sw" },
+  { "label": "brother", "german": "Bruder", "gender": 1, "abbrev": "Br" },
+  { "label": "adoptive sister", "german": "Adoptivschwester", "gender": 0, "abbrev": "ABr" },
+  { "label": "adoptive brother", "german": "Adoptivbruder", "gender": 1, "abbrev": "ABr" },
+  { "label": "stepsister", "german": "Stiefschwester", "gender": 0, "abbrev": "SSw" },
+  { "label": "stepbrother", "german": "Stiefbruder", "gender": 1, "abbrev": "SBr" },
+  { "label": "half sister", "german": "Halbschwester", "gender": 0, "abbrev": "HSw" },
+  { "label": "half brother", "german": "Halbbruder", "gender": 1, "abbrev": "HBr" },
+  { "label": "foster sister", "german": "Pflegeschwester", "gender": 0, "abbrev": "PSw" },
+  { "label": "foster brother", "german": "Pflegebruder", "gender": 1, "abbrev": "PBr" },
+  { "label": "daughter", "german": "Tochter", "gender": 0, "abbrev": "To" },
+  { "label": "son", "german": "Sohn", "gender": 1, "abbrev": "So" },
+  { "label": "adopted daughter", "german": "Adoptivtochter", "gender": 0, "abbrev": "ATo" },
+  { "label": "adopted son", "german": "Adoptivsohn", "gender": 1, "abbrev": "ASo" },
+  { "label": "foster daughter", "german": "Pflegetochter", "gender": 0, "abbrev": "PTo" },
+  { "label": "foster son", "german": "Pflegesohn", "gender": 1, "abbrev": "PSo" },
+  { "label": "stepdaughter", "german": "Stieftochter", "gender": 0, "abbrev": "STo" },
+  { "label": "stepson", "german": "Stiefsohn", "gender": 1, "abbrev": "SSo" },
+  { "label": "grandmother", "german": "Großmutter", "gender": 0, "abbrev": "GrM" },
+  { "label": "grandfather", "german": "Großvater", "gender": 1, "abbrev": "GrV" },
+  { "label": "great-grandmother", "german": "Urgroßmutter", "gender": 0, "abbrev": "UGm" },
+  { "label": "great-grandfather", "german": "Urgroßvater", "gender": 1, "abbrev": "UGrv" },
+  { "label": "sister/brother-in-law", "german": "Schwager/Schwägerin", "gender": 3, "abbrev": "Schw" },
+  { "label": "mother-in-law", "german": "Schwiegermutter", "gender": 0, "abbrev": "SwM" },
+  { "label": "father-in-law", "german": "Schwiegervater", "gender": 1, "abbrev": "SwV" },
+  { "label": "daughter-in-law", "german": "Schwiegertochter", "gender": 0, "abbrev": "SwT" },
+  { "label": "son-in-law", "german": "Schwiegersohn", "gender": 1, "abbrev": "SwS" },
+  { "label": "grandchild", "german": "Enkelkind", "gender": 3, "abbrev": "Ek" },
+  { "label": "great-grandchild", "german": "Urenkelkind", "gender": 3, "abbrev": "UEk" },
+  { "label": "aunt", "german": "Tante", "gender": 0, "abbrev": "Ta" },
+  { "label": "uncle", "german": "Onkel", "gender": 1, "abbrev": "On" },
+  { "label": "cousin", "german": "Cousin*e", "gender": 3, "abbrev": "Co" },
+  { "label": "", "german": "Angeheiratete Tante", "gender": 0, "abbrev": "aTa" },
+  { "label": "", "german": "Angeheirateter Onkel", "gender": 1, "abbrev": "aOn" },
+  { "label": "niece", "german": "Nichte", "gender": 0, "abbrev": "Ni" },
+  { "label": "nephew", "german": "Neffe", "gender": 1, "abbrev": "Ne" },
+  { "label": "", "german": "Angeheiratete Nichte", "gender": 0, "abbrev": "aNi" },
+  { "label": "", "german": "Angeheirater Neffe", "gender": 1, "abbrev": "aNE" },
+  { "label": "friend", "german": "Freund*in", "gender": 3, "abbrev": "Fr" },
+  { "label": "neighbor", "german": "Nachbar*in", "gender": 3, "abbrev": "Na" },
+  { "label": "acquaintance", "german": "Bekannte*r", "gender": 3, "abbrev": "Be" },
+  { "label": "colleague", "german": "Kolleg*in", "gender": 3, "abbrev": "Ko" },
+  { "label": "", "german": "Arbeitskolleg*in", "gender": 3, "abbrev": "AKo" },
+  { "label": "", "german": "Vereinskolleg*in", "gender": 3, "abbrev": "VKo" },
+  { "label": "", "german": "Ausbildungskolleg*in", "gender": 3, "abbrev": "AuKo" },
+  { "label": "", "german": "Schulkolleg*in", "gender": 3, "abbrev": "SKo" },
+  { "label": "", "german": "Studienkolleg*in", "gender": 3, "abbrev": "StKo" },
+  { "label": "prof. helper", "german": "prof. Helfer*in", "gender": 3, "abbrev": "He" },
+  { "label": "doctor", "german": "Ärzt*in", "gender": 3, "abbrev": "Arz" },
+  { "label": "psychiotherapist", "german": "Psychotherapeut*in", "gender": 3, "abbrev": "PsyT" },
+  { "label": "nurse practitioner", "german": "Pflegefachkraft", "gender": 3, "abbrev": "PK" },
+  { "label": "legal adult representation", "german": "Gesetz. Erwachsenenvertretung", "gender": 3, "abbrev": "ErV" },
+  { "label": "psychologist", "german": "Psycholog*in", "gender": 3, "abbrev": "Psy" },
+  { "label": "social worker", "german": "Sozialarbeiter*in", "gender": 3, "abbrev": "Soz" },
+  { "label": "consultant/supervisor", "german": "Berater*in / Betreuer*in", "gender": 3, "abbrev": "Be" },
+  { "label": "pastor", "german": "Pfarrer*in", "gender": 3, "abbrev": "Pf" },
+  { "label": "physiotherapist", "german": "Physiotherapeut*in", "gender": 3, "abbrev": "Phy" },
+  { "label": "", "german": "Ergotherapeut*in", "gender": 3, "abbrev": "Erg" },
+  { "label": "ex-partner", "german": "Ex-Partner*in", "gender": 3, "abbrev": "ExPr" },
+  { "label": "roommate", "german": "Mitbewohner*in", "gender": 3, "abbrev": "Mbw" }
+]
diff --git a/src/de.ts b/src/de.ts
index 0728a61..39cda05 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -7,7 +7,8 @@ export default {
         friends: "Freund*innen/Bekannte",
         colleagues: "Kolleg*innen",
         professionals: "prof. Helfer*innen",
-        maptext: "Klicke in die Karte um die Position festzulegen",
+        maptext: "Klicke in die Karte, um",
+        maptext2: " die Position festzulegen",
         //},
         //sideMenu: {
         newNWK: "Neue NWK",
@@ -19,7 +20,7 @@ export default {
         createPDF: "PDF erstellen",
         keyfigures: "Kennzahlen",
         abouteasyNWK: "Über die easyNWK",
-        sourcecode: "Source Code (Version 2.0.5)",
+        sourcecode: "Source Code ",
         imprint: "Impressum",
         //},
         //statisticPanel: {
@@ -30,9 +31,11 @@ export default {
         horizoncumulative: "Horizont (kumulativ)",
         gender: "Geschlecht",
         networksize: "Netzwerkgröße",
-        realtionshipweight: "Beziehungsgewicht",
+        relationshipweight: "Beziehungsgewicht",
         totaldensity: "Dichte gesamt",
+        categorydensity: "Dichte der Kategorie",
         stars: "Star(s)",
+        categorystar: "Star(s) (pro Kategorie)",
         bridges: "Brücken",
         bridgepersons: "Brückenperson(en)",
         isolatedpersons: "Isolierte",
@@ -82,10 +85,12 @@ export default {
         //},
         //alterEdit: {
         addcontact: "Kontakt hinzufügen",
+        editcontact: "Kontakt bearbeiten",
+        category: "Kategorie",
         positiononmap: "Die Position in der Karte muss noch festgelegt werden.",
         role: "Rolle",
         human: "Mensch",
-        deceased: "+verstorben",
+        deceased: "verstorben",
         relationship: "Beziehung",
         existing: "besteht",
         multiplex: "multiplex",
@@ -97,8 +102,9 @@ export default {
         //},
         //alterConnections: {
         relationshipsof: "Beziehungen von",
-        clickoncontacttoconnect:
-          "Klicke auf einen Kontakt um diesen mit  zu verbinden bzw. die Verbindung zu lösen.",
+        clickoncontacttoconnect: "Klicke auf einen Kontakt um diesen mit",
+        clickoncontacttoconnect2:
+          "  zu verbinden bzw. die Verbindung zu lösen.",
         possiblecontacts: "Mögliche Kontakte",
         connectedcontacts: "Verbundene Kontakte",
         //},
diff --git a/src/en.ts b/src/en.ts
index 3cd9094..50da8a5 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -7,7 +7,8 @@ export default {
         friends: "Friends",
         colleagues: "Colleagues",
         professionals: "prof. Help",
-        maptext: "Click on the map to determine the position",
+        maptext: "Click on the map ",
+        maptext2: "to determine the position",
         //},
         //sideMenu: {
         newNWK: "New NWK",
@@ -19,7 +20,7 @@ export default {
         createPDF: "Create PDF",
         keyfigures: "Key figures",
         abouteasyNWK: "About the easyNWK",
-        sourcecode: "Source code (Version 2.0.5)",
+        sourcecode: "Source code ",
         imprint: "Imprint",
         //},
         //statisticPanel: {
@@ -30,8 +31,10 @@ export default {
         horizoncumulative: "Horizon (cumulative)",
         gender: "Gender",
         networksize: "Network size",
-        realtionshipweight: "Relationship weight",
+        relationshipweight: "Relationship weight",
         totaldensity: "Total density",
+        categorydensity: "Category density",
+        categorystar: "Star (per category)",
         stars: "Star(s)",
         bridges: "Bridges",
         bridgepersons: "Bridge person(s)",
@@ -82,10 +85,12 @@ export default {
         //},
         //alterEdit: {
         addcontact: "Add contact",
+        editcontact: "Edit contact",
+        category: "Category",
         positiononmap: "The position on the map still has to be determined.",
         role: "Role",
         human: "Human",
-        deceased: "+deceased",
+        deceased: "deceased",
         relationship: "Relationship",
         existing: "existing",
         multiplex: "multiplex",
@@ -98,7 +103,8 @@ export default {
         //alterConnections: {
         relationshipsof: "Relationships of",
         clickoncontacttoconnect:
-          "Click on the contact to connect it/ cancel the connection with",
+          "Click on the contact to connect or cancel the connection with",
+        clickoncontacttoconnect2: ".",
         possiblecontacts: "Possible contacts",
         connectedcontacts: "Connected contacts",
         //},

From 4bbdac9ab038f3ec652b1a3ac3e17d193bdf95e9 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 6 Sep 2023 21:33:35 +0200
Subject: [PATCH 03/17] =?UTF-8?q?Weiterf=C3=BChren=20des=20=C3=9Cbersetzen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EgoEditForm.vue | 2 +-
 src/components/EgoHeader.vue   | 2 +-
 src/data/Roles.ts              | 6 ++++--
 src/de.ts                      | 3 ++-
 src/en.ts                      | 3 ++-
 src/views/HomeView.vue         | 8 ++++----
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index d347a4a..51d4987 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -18,7 +18,7 @@
                 v-model="egoName"
                 @blur="commitEdit($event, 'name')"
                 type="text"
-                placeholder="Wer steht im Zentrum der NWK?"
+                :placeholder="t('whoisinthecenter')"
               />
             </div>
             <p class="help">{{ t("mandatoryfield") }}</p>
diff --git a/src/components/EgoHeader.vue b/src/components/EgoHeader.vue
index cd5deb5..d62800f 100644
--- a/src/components/EgoHeader.vue
+++ b/src/components/EgoHeader.vue
@@ -7,7 +7,7 @@
     &nbsp;
     <button
       class="button is-small"
-      title="Ankerperson bearbeiten"
+      :title="t('editego')"
       v-on:click="$emit('edit')"
     >
       <span class="icon">
diff --git a/src/data/Roles.ts b/src/data/Roles.ts
index b77e2a3..3f45bd8 100644
--- a/src/data/Roles.ts
+++ b/src/data/Roles.ts
@@ -1,7 +1,9 @@
 import { Gender, defaultGender } from "./Gender";
-import roles from "./roles.json";
+import roles from "./roles_en.json";
 
-export const Roles = roles.map((d) => d.label);
+export const Roles = roles.map((role) => {
+  return document.documentElement.lang === "de" ? role.german : role.label;
+});
 
 const DEFAULT_ABBREV = "X";
 
diff --git a/src/de.ts b/src/de.ts
index 39cda05..46eff6a 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -65,6 +65,7 @@ export default {
         //egoPanel: {},
         //egoEdit: {
         ego: "Ankerperson",
+        editego: "Ankerperson bearbeiten",
         name: "Name",
         genders: "Geschlecht",
         male: "männlich",
@@ -73,7 +74,7 @@ export default {
         notspecified: "not nicht festgelegt",
         age: "Alter",
         notesaboutego: "Notizen zum Kontakt",
-        Whoisinthecenter: "Wer steht im Zentrum der NWK?",
+        whoisinthecenter: "Wer steht im Zentrum der NWK?",
         mandatoryfield: "Pflichtfeld",
         done: "Schließen",
         //},
diff --git a/src/en.ts b/src/en.ts
index 50da8a5..4134a2c 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -65,6 +65,7 @@ export default {
         //egoPanel: {},
         //egoEdit: {
         ego: "Ego",
+        editego: "Edit ego",
         name: "Name",
         genders: "Gender",
         male: "male",
@@ -73,7 +74,7 @@ export default {
         notspecified: "not specified",
         age: "Age",
         notesaboutego: "notes about ego",
-        Whoisinthecenter: "Who is in the center of the NWK?",
+        whoisinthecenter: "Who is in the center of the NWK?",
         mandatoryfield: "Mandatory field",
         done: "Done",
         //},
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b35f461..e5ef8c6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,4 @@
 <template>
-  <select name="lang" v-model="lang" @change="onLangChange($event)">
-    <option value="de">Deutsch</option>
-    <option value="en">English</option>
-  </select>
   <div id="container">
     <ErrorBoundary>
       <!-- TODO use slots to separate layout from logic https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots -->
@@ -14,6 +10,10 @@
               @open-nwk="editEgoFinished"
             />
             <div id="brand"><i>easy</i>NWK</div>
+            <select name="lang" v-model="lang" @change="onLangChange($event)">
+              <option value="de">Deutsch</option>
+              <option value="en">English</option>
+            </select>
             <UndoRedo />
           </div>
           <div id="egobar">

From 56b2400c6a9a7c7f8465a0d5980fc17c2368a986 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 7 Sep 2023 14:27:23 +0200
Subject: [PATCH 04/17] =?UTF-8?q?Tooltips=20=C3=BCbersetzt=20und=20Ansatz?=
 =?UTF-8?q?=20Rollen=C3=BCbersetzung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                            | 16 +++---
 src/components/AlteriConnectionList.vue      |  1 -
 src/components/AlteriEditForm.vue            | 42 ++++-----------
 src/components/AlteriPanel.vue               |  3 +-
 src/components/AlteriPanelEntry.vue          | 14 +++--
 src/components/EgoEditForm.vue               |  3 +-
 src/components/EgoHeader.vue                 |  1 -
 src/components/ErrorBoundary.vue             | 29 ++++++----
 src/components/NetworkMap.vue                |  9 ++--
 src/components/NetworkMapSectors.vue         |  1 -
 src/components/SideMenu.vue                  |  1 -
 src/components/StatisticsPanel.vue           |  1 -
 src/components/StatisticsTable.vue           | 31 +++--------
 src/components/StatisticsTableCategories.vue | 31 +++--------
 src/components/UndoRedo.vue                  | 14 +++--
 src/components/ViewOptionsPanel.vue          |  1 -
 src/data/Sectors.ts                          |  8 +--
 src/de.ts                                    | 55 ++++++++++++++++++-
 src/en.ts                                    | 57 ++++++++++++++++++--
 src/store/adaptiveNWKDefaults.ts             |  8 ++-
 src/views/HomeView.vue                       | 14 ++++-
 src/views/PdfView.vue                        | 19 ++++---
 22 files changed, 226 insertions(+), 133 deletions(-)

diff --git a/public/index.html b/public/index.html
index 95c58bb..561ad59 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,16 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
-    <link rel="icon" type="image/png" href="./favicon.png">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <link rel="icon" type="image/png" href="./favicon.png" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <!-- built files will be auto injected -->
     <div id="app"></div>
diff --git a/src/components/AlteriConnectionList.vue b/src/components/AlteriConnectionList.vue
index 36ac24a..7b68e53 100644
--- a/src/components/AlteriConnectionList.vue
+++ b/src/components/AlteriConnectionList.vue
@@ -51,7 +51,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index 7e574ce..b32245b 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -23,7 +23,7 @@
               v-model="alterNameInUI"
               @blur="commitEdit($event, 'name')"
               type="text"
-              placeholder="Vorname oder Spitzname"
+              :placeholder="t('nickname')"
             />
           </div>
           <p class="help">{{ t("mandatoryfield") }}</p>
@@ -33,11 +33,7 @@
 
     <div class="field is-horizontal">
       <div class="field-label is-normal">
-        <label
-          class="label"
-          title="Soziale Rolle des Kontakts, Auswahlmöglichkeiten"
-          >{{ t("role") }}</label
-        >
+        <label class="label" :title="t('socialrole')">{{ t("role") }}</label>
       </div>
       <div class="field-body">
         <div class="control">
@@ -73,11 +69,7 @@
 
     <div v-if="alterHuman" class="field is-horizontal">
       <div class="field-label is-normal">
-        <label
-          class="label"
-          title="biologisches und/oder soziales Geschlecht; Kategorisierung obliegt der Ankerperson"
-          >{{ t("gender") }}</label
-        >
+        <label class="label" :title="t('altergender')">{{ t("gender") }}</label>
       </div>
       <div class="field-body">
         <div class="control">
@@ -115,11 +107,7 @@
 
     <div class="field is-horizontal">
       <div class="field-label is-normal">
-        <label
-          class="label"
-          title="Optional,soziales Alter der Kontaktperson"
-          >{{ t("age") }}</label
-        >
+        <label class="label" :title="t('agetitle')">{{ t("age") }}</label>
       </div>
       <div class="field-body">
         <div class="field">
@@ -139,7 +127,7 @@
     <div class="field is-horizontal">
       <div class="field-label is-normal"></div>
       <div class="field-body">
-        <label class="checkbox" title="Häkchen, falls Kontaktperson verstorben">
+        <label class="checkbox" :title="t('deceasedcheck')">
           <input type="checkbox" v-model="alterDeceased" />
           {{ SYMBOL_DECEASED }}{{ t("deceased") }}
         </label>
@@ -148,31 +136,22 @@
 
     <div class="field is-horizontal">
       <div class="field-label">
-        <label class="label" title="Aktualisierung der Verbindung">{{
+        <label class="label" :title="t('relationtitle')">{{
           t("relationship")
         }}</label>
       </div>
       <div class="field-body">
         <div class="field">
           <fieldset :disabled="!isConnectable" class="control radio-group">
-            <label
-              class="radio"
-              title="Beziehung wird aktuell gepflegt, aktualisierte Verbindung."
-            >
+            <label class="radio" :title="t('existingtitle')">
               <input type="radio" v-model="alterEdgeType" value="1" />
               {{ t("existing") }}
             </label>
-            <label
-              class="radio"
-              title="Anker- und Kontaktperson begegnen sich in mehreren sozialen Rollen. Beziehung erfüllt mehrere Funktionen."
-            >
+            <label class="radio" :title="t('multititle')">
               <input type="radio" v-model="alterEdgeType" value="2" />
               {{ t("multiplex") }}
             </label>
-            <label
-              class="radio"
-              title="Ankerperson und diese Person pflegen zurzeit keinen Kontakt, Beziehung ist nicht aktualisiert (sondern beendet/unterbrochen)."
-            >
+            <label class="radio" :title="t('norelationtitle')">
               <input type="radio" v-model="alterEdgeType" value="0" />
               {{ t("nocurrentrelationship") }}
             </label>
@@ -187,7 +166,7 @@
           class="textarea is-small"
           :value="alter.note"
           @blur="commitEdit($event, 'note')"
-          placeholder="Notizen zum Kontakt"
+          :placeholder="t('notesaboutcontact')"
         ></textarea>
       </div>
     </div>
@@ -256,7 +235,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index 9f99238..47c29fa 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -5,7 +5,7 @@
       <span class="buttons are-small">
         <button
           class="button"
-          title="Kontakt hinzufügen"
+          :title="t('addcontact')"
           @click.stop="addAlter"
           :disabled="!isAlterOpsAllowed"
         >
@@ -54,7 +54,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index 2174087..e110bc4 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -19,7 +19,7 @@
     <span class="buttons are-small" v-if="!isEditMode && isAlterOpsAllowed">
       <button
         class="button is-small"
-        title="Kontakt bearbeiten"
+        :title="t('editcontact')"
         @click.stop="edit()"
       >
         <span class="icon is-small">
@@ -28,7 +28,7 @@
       </button>
       <button
         class="button is-small"
-        title="Beziehungen des Kontakts bearbeiten"
+        :title="t('editconnections')"
         :disabled="isConnectionDisabled"
         @click.stop="editConnections()"
       >
@@ -38,7 +38,7 @@
       </button>
       <button
         class="button is-small"
-        title="Kontakt entfernen"
+        :title="t('deletecontact')"
         v-on:click.stop="removeAlter"
       >
         <span class="icon is-small">
@@ -66,8 +66,16 @@ import AlteriEditForm from "@/components/AlteriEditForm.vue";
 import AlteriConnectionList from "@/components/AlteriConnectionList.vue";
 import { TAB_BASE, TAB_CONNECTIONS } from "@/store/viewOptionsModule";
 import { Alter, isConnectable } from "@/data/Alter";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
   components: { AlteriEditForm, AlteriConnectionList },
   props: {
     // gets Alter as prop cp. ToDo demo
diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index 51d4987..7763a04 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -68,7 +68,7 @@
             class="textarea is-small"
             :value="$store.state.nwk.ego.note"
             @blur="commitEdit($event, 'note')"
-            placeholder="Notizen zum Kontakt"
+            :placeholder="t('notesaboutego')"
           ></textarea>
         </div>
       </div>
@@ -99,7 +99,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/EgoHeader.vue b/src/components/EgoHeader.vue
index d62800f..e490130 100644
--- a/src/components/EgoHeader.vue
+++ b/src/components/EgoHeader.vue
@@ -28,7 +28,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/ErrorBoundary.vue b/src/components/ErrorBoundary.vue
index 1419f08..1086aaf 100644
--- a/src/components/ErrorBoundary.vue
+++ b/src/components/ErrorBoundary.vue
@@ -4,40 +4,41 @@
     <div class="modal-content">
       <!-- Any other Bulma elements you want -->
       <div class="notification is-warning">
-        <h3 class="title">Irgendetwas ist schief gelaufen :-(</h3>
+        <h3 class="title">{{ t("sthwentwrong") }}</h3>
 
         <p class="block" v-if="canUndo">
-          Mit <b>"Rückgängig"</b> kann der Fehler möglicherweiser behoben
-          werden.
+          {{ t("withmsg") }} <b>"{{ t("canundo") }}"</b> {{ t("canundo2") }}
         </p>
 
         <p class="block">
-          Mit <b>"Zwischenspeicher löschen"</b> können Sie easyNWK in den
-          Auslieferungszustand zurücksetzen. <i>Achtung:</i> Dabei gehen die
-          momentan bearbeiteten Daten verloren.
+          {{ t("withmsg2") }} <b>"{{ t("deletedata") }}"</b>
+          {{ t("deletedata2") }} <i>{{ t("attention") }}</i>
+          {{ t("attention2") }}
         </p>
 
-        <p><b>Zwischengespeicherte Daten:</b> (können kopiert werden)</p>
+        <p>
+          <b>{{ t("tempdata") }}</b> {{ t("tempdata2") }}
+        </p>
         <pre class="block">{{ vuexDump }}</pre>
 
         <div class="buttons">
           <button
             class="button"
-            title="Rückgängig"
+            :title="t('canundo')"
             @click="undo"
             :disabled="!canUndo"
           >
             <span class="icon">
               <font-awesome-icon icon="undo" />
             </span>
-            <span>Rückgängig</span>
+            <span>{{ t("canundo") }}</span>
           </button>
 
           <button class="button is-danger" @click="resetLocalData">
             <span class="icon">
               <font-awesome-icon icon="trash-alt" />
             </span>
-            <span>Zwischenspeicher löschen</span>
+            <span>{{ t("deletetempdata") }}</span>
           </button>
         </div>
       </div>
@@ -49,8 +50,16 @@
 <script lang="ts">
 import { defineComponent, onErrorCaptured, ref, computed } from "vue";
 import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index e0ffeea..4d50ee8 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -170,7 +170,7 @@
       id="zoomResetBtn"
       class="button is-medium"
       type="button"
-      title="Zoom Zurücksetzen"
+      :title="t('zoomreset')"
       @click="resetZoom()"
       :disabled="isNotZoomed"
     >
@@ -195,7 +195,7 @@
       id="btnClusterConnect"
       class="button is-small"
       type="button"
-      title="komplett verbinden (Clique erzeugen)"
+      :title="t('clusterconnect')"
       @click="clusterConnect"
       v-if="!isClusterFullyConnected"
       :disabled="!isClusterConnectPossible"
@@ -208,7 +208,7 @@
       id="btnClusterUnConnect"
       class="button is-small"
       type="button"
-      title="alle Beziehungen lösen"
+      :title="t('deconnect')"
       @click="clusterDisconnect"
       v-else
     >
@@ -230,7 +230,7 @@
     <button
       class="button is-small"
       type="button"
-      title="Auswahlrechteck schließen"
+      :title="t('closebrush')"
       @click="clearBrush"
     >
       <span class="icon is-small">
@@ -283,7 +283,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/NetworkMapSectors.vue b/src/components/NetworkMapSectors.vue
index 2df0092..21b8885 100644
--- a/src/components/NetworkMapSectors.vue
+++ b/src/components/NetworkMapSectors.vue
@@ -41,7 +41,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
     langIsGerman() {
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index d77271d..8141545 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -137,7 +137,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/StatisticsPanel.vue b/src/components/StatisticsPanel.vue
index 57aed8e..0df4b35 100644
--- a/src/components/StatisticsPanel.vue
+++ b/src/components/StatisticsPanel.vue
@@ -44,7 +44,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/StatisticsTable.vue b/src/components/StatisticsTable.vue
index 2c60df6..432b1f1 100644
--- a/src/components/StatisticsTable.vue
+++ b/src/components/StatisticsTable.vue
@@ -9,9 +9,7 @@
   </thead> -->
       <tbody>
         <tr>
-          <th
-            title="Anzahl der Kontakte im Netzwerk exklusive Ankerperson und exklusive Personen ohne Kante zur Ankerperson"
-          >
+          <th :title="t('networkmsg')">
             {{ t("networksize") }}
             <!-- <span class="icon">
             <font-awesome-icon icon="info-circle" />
@@ -20,17 +18,13 @@
           <td>{{ networkSize }}</td>
         </tr>
         <tr>
-          <th
-            title="Summierte Nähe bzw. Distanz der Kontakte zur Ankerperson. Je höher die Kennzahl, umso näher stehen die Personen der Ankerperson."
-          >
+          <th :title="t('relationshipmsg')">
             {{ t("relationshipweight") }}
           </th>
           <td>{{ naehenSum }}</td>
         </tr>
         <tr>
-          <th
-            title="Verhältnis der tatsächlich vorhandenen zu den theoretisch möglichen Verbindungen (exklusive der Verbindungen zwischen Anker- und Kontaktpersonen, inklusive Personen ohne Kante zur Ankerperson). Optional: Maßzahl liegt zwischen 0 (nur isolierte Kontakte) und 1 (jede Person im Netzwerk ist mit jeder anderen verbunden)."
-          >
+          <th :title="t('densitymsg')">
             {{ t("totaldensity") }}
           </th>
           <td>
@@ -43,9 +37,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Kontakt(e) mit den meisten Verbindungen im Netzwerk (neben der Ankerperson)"
-          >
+          <th :title="t('starsmsg')">
             {{ t("stars") }}
           </th>
           <td @click="clickCell('stars')" :class="{ clickAble: stars != '-' }">
@@ -53,15 +45,13 @@
           </td>
         </tr>
         <tr>
-          <th title="Anzahl der Verbindungen zwischen den Sektoren im Netzwerk">
+          <th :title="t('bridgemsg')">
             {{ t("bridges") }}
           </th>
           <td>{{ bridgesCount }}</td>
         </tr>
         <tr>
-          <th
-            title="Kontakt(e), die einzelne Sektoren im Netzwerk miteinander verbinden"
-          >
+          <th :title="t('bridgesmsg2')">
             {{ t("bridgepersons") }}
           </th>
           <td
@@ -72,9 +62,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Kontakt(e), die ausschließlich mit der Ankerperson verbunden sind"
-          >
+          <th :title="t('isolatedmsg')">
             {{ t("isolatedpersons") }}
           </th>
           <td
@@ -85,9 +73,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Lebende Personen ohne aktualisierte Verbindung zur Ankerperson. Verbindungen mit anderen Personen im Netzwerk und damit indirekte Verbindung zur Ankerperson sind möglich."
-          >
+          <th :title="t('noedgemsg')">
             {{ t("personswithoutedgetotheego") }}
           </th>
           <td
@@ -119,7 +105,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/StatisticsTableCategories.vue b/src/components/StatisticsTableCategories.vue
index ef5b6a6..f66f807 100644
--- a/src/components/StatisticsTableCategories.vue
+++ b/src/components/StatisticsTableCategories.vue
@@ -9,9 +9,7 @@
       </thead>
       <tbody>
         <tr>
-          <th
-            title="Anzahl der Kontakte im Netzwerk exklusive Ankerperson und exklusive Personen ohne Kante zur Ankerperson"
-          >
+          <th :title="t('networkmsg')">
             {{ t("networksize") }}
             <!-- <span class="icon">
             <font-awesome-icon icon="info-circle" />
@@ -22,9 +20,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="summierte Nähe bzw. Distanz der Kontakte zur Ankerperson. Je höher die Kennzahl, umso näher stehen die Personen der Ankerperson."
-          >
+          <th :title="t('relationshipmsg')">
             {{ t("relationshipweight") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">
@@ -32,9 +28,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Verhältnis der tatsächlich vorhandenen zu den theoretisch möglichen Verbindungen (exklusive der Verbindungen zwischen Anker- und Kontaktpersonen, inklusive Personen ohne Kante zur Ankerperson). Optional: Maßzahl liegt zwischen 0 (nur isolierte Kontakte) und 1 (jede Person im Netzwerk ist mit jeder anderen verbunden)."
-          >
+          <th :title="t('densitymsg')">
             {{ t("categorydensity") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">{{ density[i] }}</td>
@@ -46,9 +40,7 @@
         </td>
       </tr> -->
         <tr>
-          <th
-            title="Kontakt(e) mit den meisten Verbindungen im Netzwerk (neben der Ankerperson)"
-          >
+          <th :title="t('starsmsg')">
             {{ t("categorystar") }}
           </th>
           <td
@@ -61,7 +53,7 @@
           </td>
         </tr>
         <tr>
-          <th title="Anzahl der Verbindungen zwischen den Sektoren im Netzwerk">
+          <th :title="t('bridgemsg')">
             {{ t("bridges") }}
           </th>
           <td v-for="(cat, i) in categoryLabels" :key="i">
@@ -69,9 +61,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Kontakt(e), die einzelne Sektoren im Netzwerk miteinander verbinden"
-          >
+          <th :title="t('bridgesmsg2')">
             {{ t("bridgepersons") }}
           </th>
           <td
@@ -84,9 +74,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Kontakt(e), die ausschließlich mit der Ankerperson verbunden sind"
-          >
+          <th :title="t('isolatedmsg')">
             {{ t("isolatedpersons") }}
           </th>
           <td
@@ -99,9 +87,7 @@
           </td>
         </tr>
         <tr>
-          <th
-            title="Lebende Personen ohne aktualisierte Verbindung zur Ankerperson. Verbindungen mit anderen Personen im Netzwerk und damit indirekte Verbindung zur Ankerperson sind möglich."
-          >
+          <th :title="t('noedgemsg')">
             {{ t("personswithoutedgetotheego") }}
           </th>
           <td
@@ -136,7 +122,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/components/UndoRedo.vue b/src/components/UndoRedo.vue
index fe77628..8c44a9e 100644
--- a/src/components/UndoRedo.vue
+++ b/src/components/UndoRedo.vue
@@ -2,7 +2,7 @@
   <div class="buttons">
     <button
       class="button is-small"
-      title="Rückgängig"
+      :title="t('canundo')"
       @click="undo"
       :disabled="!canUndo"
     >
@@ -12,7 +12,7 @@
     </button>
     <button
       class="button is-small"
-      title="Wiederherstellen"
+      :title="t('restore')"
       @click="redo"
       :disabled="!canRedo"
     >
@@ -22,7 +22,7 @@
     </button>
     <button
       class="button is-small"
-      title="Vollbildmodus"
+      :title="t('fullscreen')"
       @click="toggleFullScreen"
       v-if="canFullscreen()"
     >
@@ -38,8 +38,16 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from "vue";
 import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
index 30ad0f4..5523f3e 100644
--- a/src/components/ViewOptionsPanel.vue
+++ b/src/components/ViewOptionsPanel.vue
@@ -82,7 +82,6 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
       return this[document.documentElement.lang][prop];
     },
   },
diff --git a/src/data/Sectors.ts b/src/data/Sectors.ts
index 24a069b..cbb6daf 100644
--- a/src/data/Sectors.ts
+++ b/src/data/Sectors.ts
@@ -14,8 +14,8 @@ export const SectorDefaultRoles = [
 ];
 
 export const SectorDefaultRolesEng = [
-  "Familienangehörige*r",
-  "Freund*in",
-  "Kolleg*in",
-  "prof. Helfer*in",
+  "Family member",
+  "Friend",
+  "Colleague",
+  "prof. Help",
 ];
diff --git a/src/de.ts b/src/de.ts
index 46eff6a..7bf6fe9 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -9,6 +9,10 @@ export default {
         professionals: "prof. Helfer*innen",
         maptext: "Klicke in die Karte, um",
         maptext2: " die Position festzulegen",
+        zoomreset: "Zoom zurücksetzen",
+        clusterconnect: "komplett verbinden (Clique erzeugen)",
+        deconnect: "alle Beziehungen lösen",
+        closebrush: "Auswahlrechteck schließen",
         //},
         //sideMenu: {
         newNWK: "Neue NWK",
@@ -40,6 +44,22 @@ export default {
         bridgepersons: "Brückenperson(en)",
         isolatedpersons: "Isolierte",
         personswithoutedgetotheego: "Personen ohne Kante zur Ankerperson",
+        networkmsg:
+          "Anzahl der Kontakte im Netzwerk exklusive Ankerperson und exklusive Personen ohne Kante zur Ankerperson",
+        relationshipmsg:
+          "Summierte Nähe bzw. Distanz der Kontakte zur Ankerperson. Je höher die Kennzahl, umso näher stehen die Personen der Ankerperson.",
+        densitymsg:
+          "Verhältnis der tatsächlich vorhandenen zu den theoretisch möglichen Verbindungen (exklusive der Verbindungen zwischen Anker- und Kontaktpersonen, inklusive Personen ohne Kante zur Ankerperson). Optional: Maßzahl liegt zwischen 0 (nur isolierte Kontakte) und 1 (jede Person im Netzwerk ist mit jeder anderen verbunden).",
+        starsmsg:
+          "Kontakt(e) mit den meisten Verbindungen im Netzwerk (neben der Ankerperson)",
+        bridgemsg: "Anzahl der Verbindungen zwischen den Sektoren im Netzwerk",
+        bridgesmsg2:
+          "Kontakt(e), die einzelne Sektoren im Netzwerk miteinander verbinden",
+        isolatedmsg:
+          "Kontakt(e), die ausschließlich mit der Ankerperson verbunden sind",
+        noedgemsg:
+          "Lebende Personen ohne aktualisierte Verbindung zur Ankerperson. Verbindungen mit anderen Personen im Netzwerk und damit indirekte Verbindung zur Ankerperson sind möglich.",
+
         //},
         //viewOptions: {
         viewsettings: "Ansichtseinstellungen",
@@ -60,7 +80,9 @@ export default {
         printorpdf: "Drucken bzw. als PDF drucken",
         closeandback: "Schließen & zur easyNWK zurückkehren",
         printtext:
-          "Um eine PDF Datei dieser Ansicht zu erzeugen, wählen Sie im Druckdialog 'Als PDF speichern.'Sie können die Daten der Kontakte auch markieren, kopieren und in einem Textverarbeitungsprogramm einfügen.",
+          "Um eine PDF Datei dieser Ansicht zu erzeugen, wählen Sie im Druckdialog 'Als PDF speichern.",
+        printtext2:
+          "'Sie können die Daten der Kontakte auch markieren, kopieren und in einem Textverarbeitungsprogramm einfügen.",
         //},
         //egoPanel: {},
         //egoEdit: {
@@ -83,16 +105,31 @@ export default {
         nocontactsyet1: "Noch keine Kontakte vorhanden.",
         nocontactsyet2: "Klicken Sie auf den Button mit dem  ",
         nocontactsyet3: " Symbol, um Kontakte in der Netzwerkkarte anzulegen.",
+        editconnections: "Beziehungen des Kontakts bearbeiten",
+        deletecontact: "Kontakt entfernen",
         //},
         //alterEdit: {
         addcontact: "Kontakt hinzufügen",
         editcontact: "Kontakt bearbeiten",
+        nickname: "Vorname oder Spitzname",
+        socialrole: "Soziale Rolle des Kontakts, Auswahlmöglichkeiten",
+        altergender:
+          "biologisches und/oder soziales Geschlecht; Kategorisierung obliegt der Ankerperson",
         category: "Kategorie",
         positiononmap: "Die Position in der Karte muss noch festgelegt werden.",
         role: "Rolle",
         human: "Mensch",
+        agetitle: "Optional,soziales Alter der Kontaktperson",
         deceased: "verstorben",
+        deceasedcheck: "Häkchen, falls Kontaktperson verstorben",
         relationship: "Beziehung",
+        relationtitle: "Aktualisierung der Verbindung",
+        existingtitle:
+          "Beziehung wird aktuell gepflegt, aktualisierte Verbindung.",
+        multititle:
+          "Anker- und Kontaktperson begegnen sich in mehreren sozialen Rollen. Beziehung erfüllt mehrere Funktionen.",
+        norelationtitle:
+          "Ankerperson und diese Person pflegen zurzeit keinen Kontakt, Beziehung ist nicht aktualisiert (sondern beendet/unterbrochen).",
         existing: "besteht",
         multiplex: "multiplex",
         nocurrentrelationship: "keine aktuelle Beziehung",
@@ -109,6 +146,22 @@ export default {
         possiblecontacts: "Mögliche Kontakte",
         connectedcontacts: "Verbundene Kontakte",
         //},
+        //errorMessage:
+        sthwentwrong: "Irgendetwas ist schief gelaufen :-(",
+        withmsg: "Mit ",
+        canundo: "Rückgängig",
+        fullscreen: "Vollbildmodus",
+        restore: "Wiederherstellen",
+        canundo2: "kann der Fehler möglicherweiser behoben werden.",
+        withmsg2: "Mit ",
+        deletedata: "Zwischenspeicher löschen",
+        deletedata2:
+          "können Sie easyNWK in den Auslieferungszustand zurücksetzen.",
+        attention: "Achtung:",
+        attention2: "Dabei gehen die momentan bearbeiteten Daten verloren.",
+        tempdata: "Zwischengespeicherte Daten:",
+        tempdata2: "(können kopiert werden)",
+        deletetempdata: "Zwischenspeicher löschen",
       },
     };
   },
diff --git a/src/en.ts b/src/en.ts
index 4134a2c..cb8c90e 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -9,6 +9,10 @@ export default {
         professionals: "prof. Help",
         maptext: "Click on the map ",
         maptext2: "to determine the position",
+        zoomreset: "Reset zoom",
+        clusterconnect: "Connect contacts (create clique)",
+        deconnect: "Remove all connections",
+        closebrush: "Close selection",
         //},
         //sideMenu: {
         newNWK: "New NWK",
@@ -40,6 +44,21 @@ export default {
         bridgepersons: "Bridge person(s)",
         isolatedpersons: "Isolated person(s)",
         personswithoutedgetotheego: "Person(s) without edge to the ego",
+        networkmsg:
+          "Number of contacts in the network without ego and without contacts that do not have an edge to the ego",
+        relationshipmsg:
+          "Summed proximity or distance of the contacts to the ego. The higher the indicator, the closer the contacts are to the ego.",
+        densitymsg:
+          "Ratio of the actually existing connections to the theoretically possible connections (excluding connections between ego and contacts, including contacts without edge to ego). Optional: Measurement is between 0 (isolated contacts only) and 1 (every person in the network is connected to everyone else).",
+        starsmsg:
+          "Contact(s) with most connections in the network (besides the ego)",
+        bridgesmsg2: "Contact(s) connecting individual sectors in the network",
+        bridgemsg:
+          "Amount of contact(s) connecting individual sectors in the network",
+        isolatedmsg: "Contact(s) associated exclusively with the ego",
+        noedgemsg:
+          "Living contacts without an updated connection to the ego. Connections with other people in the network and thus indirect connection to the ego are possible.",
+
         //},
         //viewOptions: {
         viewsettings: "View settings",
@@ -60,7 +79,9 @@ export default {
         printorpdf: "Print or print as PDF",
         closeandback: "Close & go back to easyNWK",
         printtext:
-          "In order to generate a PDF file of this view, select 'Save as PDF' in the print dialogue. You can also highlight the data and copy & paste it into a word processor.",
+          "In order to generate a PDF file of this view, select 'Save as PDF' in the print dialogue.",
+        printtext2:
+          "You can also highlight the data and copy & paste it into a word processor.",
         //},
         //egoPanel: {},
         //egoEdit: {
@@ -73,7 +94,7 @@ export default {
         diverse: "diverse",
         notspecified: "not specified",
         age: "Age",
-        notesaboutego: "notes about ego",
+        notesaboutego: "Notes about ego",
         whoisinthecenter: "Who is in the center of the NWK?",
         mandatoryfield: "Mandatory field",
         done: "Done",
@@ -83,20 +104,35 @@ export default {
         nocontactsyet1: "No contacts available yet.",
         nocontactsyet2: "Click on the button with the  ",
         nocontactsyet3: "  symbol to add contacts to the networkmap.",
+        editconnections: "Edit the relationships of the contact",
+        deletecontact: "Delete contact",
         //},
         //alterEdit: {
         addcontact: "Add contact",
         editcontact: "Edit contact",
+        nickname: "Name or nickname",
+        socialrole: "Social role of contact, options",
+        altergender:
+          "biological and/or social sex; categorisation is the responsibility of the ego",
         category: "Category",
         positiononmap: "The position on the map still has to be determined.",
         role: "Role",
         human: "Human",
+        agetitle: "Optional, social age of the contact",
         deceased: "deceased",
+        deceasedcheck: "Check if contact person died",
         relationship: "Relationship",
+        relationtitle: "Updating the connection",
+        existingtitle:
+          "Relationship is currently maintained, connection updated.",
+        multititle:
+          "Ego and contact person meet in several social roles. Relationship fulfills several functions.",
+        norelationtitle:
+          "Ego and this person are currently not in contact, relationship is not updated (but ended/broken).",
         existing: "existing",
         multiplex: "multiplex",
         nocurrentrelationship: "no current relationship",
-        notesaboutcontact: "notes about contact",
+        notesaboutcontact: "Notes about contact",
         nextcontact: "Next contact",
         close: "Close",
         cancel: "Cancel",
@@ -109,6 +145,21 @@ export default {
         possiblecontacts: "Possible contacts",
         connectedcontacts: "Connected contacts",
         //},
+        //errorMessage:
+        sthwentwrong: "Something went wrong :-(",
+        withmsg: "",
+        canundo: "Undo",
+        fullscreen: "Full screen mode",
+        restore: "Restore",
+        canundo2: "could possibly fix the error.",
+        withmsg2: "With ",
+        deletedata: "Delete cache",
+        deletedata2: " you can reset the easyNWK to the original state.",
+        attention: "Attention:",
+        attention2: "The currently processed data will be lost.",
+        tempdata: "Cached data: ",
+        tempdata2: "(can be copied)",
+        deletetempdata: "Delete cache",
       },
     };
   },
diff --git a/src/store/adaptiveNWKDefaults.ts b/src/store/adaptiveNWKDefaults.ts
index 3b01fe2..5026834 100644
--- a/src/store/adaptiveNWKDefaults.ts
+++ b/src/store/adaptiveNWKDefaults.ts
@@ -1,7 +1,7 @@
 import { Alter, isConnectable } from "@/data/Alter";
 import { sectorIndex } from "@/data/AlterCategories";
 import { getGenderDefaultByRole } from "@/data/Roles";
-import { SectorDefaultRoles } from "@/data/Sectors";
+import { SectorDefaultRoles, SectorDefaultRolesEng } from "@/data/Sectors";
 
 export function applyAdaptiveNWKDefaults(
   changedAlter: Alter,
@@ -31,7 +31,11 @@ export function applyAdaptiveNWKDefaults(
 
   if (changedAlter.roleDefault && "angle" in changes) {
     const sector = sectorIndex(changedAlter);
-    if (sector != null) changedAlter.role = SectorDefaultRoles[sector];
+    if (sector != null)
+      changedAlter.role =
+        document.documentElement.lang === "de"
+          ? SectorDefaultRoles[sector]
+          : SectorDefaultRolesEng[sector];
   }
 
   // monitor if user has explicitly set a gender --> never override that
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e5ef8c6..0287729 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -10,11 +10,16 @@
               @open-nwk="editEgoFinished"
             />
             <div id="brand"><i>easy</i>NWK</div>
-            <select name="lang" v-model="lang" @change="onLangChange($event)">
+            <UndoRedo />
+            <select
+              id="langselect"
+              name="lang"
+              v-model="lang"
+              @change="onLangChange($event)"
+            >
               <option value="de">Deutsch</option>
               <option value="en">English</option>
             </select>
-            <UndoRedo />
           </div>
           <div id="egobar">
             <EgoHeader
@@ -164,6 +169,11 @@ export default defineComponent({
   flex-direction: column;
 }
 
+#langselect {
+  height: 2.25em;
+  margin-left: 0.5em;
+}
+
 #titlebar {
   font-size: 180%;
   background: $fhstpblue; /* #005096; /* $light; */
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index f803899..c01695b 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -6,23 +6,21 @@
           <span class="icon">
             <font-awesome-icon icon="file-pdf" />
           </span>
-          <span>Drucken bzw. als PDF drucken</span>
+          <span>{{ t("printorpdf") }}</span>
         </button>
 
         <button class="button" onclick="window.close()">
           <span class="icon">
             <font-awesome-icon icon="arrow-left" />
           </span>
-          <span>Schließen & zur easyNWK zurückkehren</span>
+          <span>{{ t("closeandback") }}</span>
         </button>
       </div>
       <p>
-        Wenn Sie eine PDF Datei dieser Ansicht erzeugen, indem Sie im
-        Druckdialog "Als PDF speichern" auswählen.
+        {{ t("printtext") }}
       </p>
       <p>
-        Sie können die Daten der Kontakte auch markieren, kopieren und in einem
-        Textverarbeitungsprogramm einfügen.
+        {{ t("printtext2") }}
       </p>
     </div>
 
@@ -79,8 +77,17 @@ import NetworkMap from "@/components/NetworkMap.vue";
 import { useStore } from "@/store";
 import { defineComponent, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import de from "@/de";
+import en from "@/en";
 
 export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      console.log(document.documentElement.lang);
+      return this[document.documentElement.lang][prop];
+    },
+  },
   name: "PdfView",
   components: { NetworkMap },
   setup: function () {

From bea97b48f5e918c9a237656c2080fe3f69601f60 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 11 Sep 2023 14:15:16 +0200
Subject: [PATCH 05/17] =?UTF-8?q?=C3=9Cbersetzung=20des=20Geschlechts=20un?=
 =?UTF-8?q?d=20der=20Rollen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriEditForm.vue   | 23 ++++++++++++++------
 src/components/AlteriPanelEntry.vue | 33 +++++++++++++++++++++++------
 src/data/Roles.ts                   |  6 +++---
 src/de.ts                           |  9 +++++++-
 src/en.ts                           |  7 ++++++
 5 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index b32245b..77c6f0c 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -49,8 +49,12 @@
           <!-- <span class="icon is-small is-right has-text-link">
             <font-awesome-icon icon="chevron-down" />
           </span> -->
-          <datalist id="predefined-roles">
-            <option v-for="value in roleOptions" :key="value" :value="value" />
+          <datalist id="predefined-roles" :key="langIsGerman() ? 'de' : 'en'">
+            <option
+              v-for="value in langIsGerman() ? roleOptions : engRoleOptions"
+              :key="value"
+              :value="value"
+            />
           </datalist>
         </div>
       </div>
@@ -78,9 +82,10 @@
               :class="{ autovalue: alter.genderDefault }"
               v-model="alterGender"
             >
-              <option v-for="value in genderOptions" :key="value">
-                {{ value }}
-              </option>
+              <option value="weiblich">{{ t("female") }}</option>
+              <option value="männlich">{{ t("male") }}</option>
+              <option value="divers">{{ t("diverse") }}</option>
+              <option value="nicht festgelegt">{{ t("notspecified") }}</option>
             </select>
           </div>
         </div>
@@ -217,7 +222,7 @@ import { useStore } from "@/store";
 
 import { Alter, hasOptionalChanges, isConnectable } from "@/data/Alter";
 import { Gender } from "@/data/Gender";
-import { Roles } from "@/data/Roles";
+import { Roles, RolesEng } from "@/data/Roles";
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { TAB_BASE } from "@/store/viewOptionsModule";
 import de from "@/de";
@@ -237,6 +242,10 @@ export default defineComponent({
     t(prop: string) {
       return this[document.documentElement.lang][prop];
     },
+    langIsGerman() {
+      if (document.documentElement.lang == "de") return true;
+      else return false;
+    },
   },
   props: {
     // gets Alter as prop cp. ToDo demo
@@ -317,6 +326,7 @@ export default defineComponent({
     // apparently v-for needs this to be a data item
     const genderOptions = ref(Gender);
     const roleOptions = ref(Roles);
+    const engRoleOptions = ref(RolesEng);
 
     // we need a DOM ref in order to focus
     const altername = ref<InstanceType<typeof HTMLInputElement> | null>(null);
@@ -404,6 +414,7 @@ export default defineComponent({
       blurRole,
       genderOptions,
       roleOptions,
+      engRoleOptions,
       editAlterFinished,
       cancelAddAlter,
       altername,
diff --git a/src/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index e110bc4..4fa5d88 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -8,13 +8,13 @@
     }"
     v-on:click="toggleSelection()"
   >
-    <span v-if="!isEditMode" class="contact"
-      >{{ displayName }}
-      <span v-if="alter.age">/ {{ alter.age + " " }} </span>
-      <span :class="{ autovalue: alter.roleDefault }"
-        >/ {{ alter.role }}</span
-      ></span
-    >
+    <span v-if="!isEditMode" class="contact">
+      {{ displayName }}
+      <span v-if="alter.age">/ {{ alter.age + " " }}</span>
+      <span :class="{ autovalue: getTranslatedRole(alter.roleDefault) }">
+        / {{ getTranslatedRole(alter.role) }}
+      </span>
+    </span>
 
     <span class="buttons are-small" v-if="!isEditMode && isAlterOpsAllowed">
       <button
@@ -68,6 +68,7 @@ import { TAB_BASE, TAB_CONNECTIONS } from "@/store/viewOptionsModule";
 import { Alter, isConnectable } from "@/data/Alter";
 import de from "@/de";
 import en from "@/en";
+import roles from "@/data/roles_en.json";
 
 export default defineComponent({
   mixins: [de, en],
@@ -75,8 +76,26 @@ export default defineComponent({
     t(prop: string) {
       return this[document.documentElement.lang][prop];
     },
+    langIsGerman() {
+      if (document.documentElement.lang == "de") return true;
+      else return false;
+    },
   },
   components: { AlteriEditForm, AlteriConnectionList },
+  computed: {
+    getTranslatedRole() {
+      return (role: any) => {
+        const translatedRole = roles.find((r) => r.label === role);
+
+        if (translatedRole) {
+          return this.langIsGerman()
+            ? translatedRole.german
+            : translatedRole.label;
+        }
+        return role;
+      };
+    },
+  },
   props: {
     // gets Alter as prop cp. ToDo demo
     alter: {
diff --git a/src/data/Roles.ts b/src/data/Roles.ts
index 3f45bd8..a02d407 100644
--- a/src/data/Roles.ts
+++ b/src/data/Roles.ts
@@ -1,9 +1,9 @@
 import { Gender, defaultGender } from "./Gender";
 import roles from "./roles_en.json";
 
-export const Roles = roles.map((role) => {
-  return document.documentElement.lang === "de" ? role.german : role.label;
-});
+export const RolesEng = roles.map((d) => d.label);
+
+export const Roles = roles.map((d) => d.german);
 
 const DEFAULT_ABBREV = "X";
 
diff --git a/src/de.ts b/src/de.ts
index 7bf6fe9..2866c7b 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -93,7 +93,7 @@ export default {
         male: "männlich",
         female: "weiblich",
         diverse: "divers",
-        notspecified: "not nicht festgelegt",
+        notspecified: "nicht festgelegt",
         age: "Alter",
         notesaboutego: "Notizen zum Kontakt",
         whoisinthecenter: "Wer steht im Zentrum der NWK?",
@@ -162,6 +162,13 @@ export default {
         tempdata: "Zwischengespeicherte Daten:",
         tempdata2: "(können kopiert werden)",
         deletetempdata: "Zwischenspeicher löschen",
+        profi: "Prof. Hilfe",
+        horizon_cum: "Horizont (kumulativ)",
+        circle3: "Kreis 3",
+        circle2: "Kreis 2",
+        circle1: "Kreis 1",
+        networkwithoutprofhelp: "Netzwerk ohne prof. Hilfe",
+        entirenetwork: "gesamtes Netzwerk",
       },
     };
   },
diff --git a/src/en.ts b/src/en.ts
index cb8c90e..14d34d6 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -160,6 +160,13 @@ export default {
         tempdata: "Cached data: ",
         tempdata2: "(can be copied)",
         deletetempdata: "Delete cache",
+        profi: "Professional Help",
+        horizon_cum: "Horizon (cumulative)",
+        circle3: "Circle 3",
+        circle2: "Circle 2",
+        circle1: "Circle 1",
+        networkwithoutprofhelp: "Network without professional help",
+        entirenetwork: "Entire Network",
       },
     };
   },

From 3c398f4ef3afc45785f6d49d2f39eed58c3f1d3e Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 12 Sep 2023 16:01:45 +0200
Subject: [PATCH 06/17] =?UTF-8?q?Ansatz=20=C3=9Cbersetzung=20der=20Rollen?=
 =?UTF-8?q?=20in=20der=20Anzeige?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriPanelEntry.vue | 38 ++++++++++++++++++++++++++++-
 src/de.ts                           |  6 +++++
 src/en.ts                           |  6 +++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index 4fa5d88..7bdff2b 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -11,7 +11,7 @@
     <span v-if="!isEditMode" class="contact">
       {{ displayName }}
       <span v-if="alter.age">/ {{ alter.age + " " }}</span>
-      <span :class="{ autovalue: getTranslatedRole(alter.roleDefault) }">
+      <span :class="{ autovalue: getTranslatedDefault(alter.roleDefault) }">
         / {{ getTranslatedRole(alter.role) }}
       </span>
     </span>
@@ -87,15 +87,51 @@ export default defineComponent({
       return (role: any) => {
         const translatedRole = roles.find((r) => r.label === role);
 
+        console.log(translatedRole);
+
+        if (translatedRole) {
+          return this.langIsGerman()
+            ? translatedRole.german
+            : translatedRole.label;
+        } else {
+          return role;
+        }
+      };
+    },
+    getTranslatedDefault() {
+      return (role: string) => {
+        if (role === "Familienangehörige*r" && !this.langIsGerman()) {
+          console.log("here");
+          return "Family member";
+        } else if (role === "Family member" && this.langIsGerman()) {
+          return "Familienangehörige*r";
+        } else if (role === "Freund*in" && !this.langIsGerman()) {
+          return "Friend";
+        } else if (role === "Friend" && this.langIsGerman()) {
+          return "Freund*in";
+        } else if (role === "Kolleg*in" && !this.langIsGerman()) {
+          return "Colleague";
+        } else if (role === "Colleague" && this.langIsGerman()) {
+          return "Kolleg*in";
+        } else if (role === "prof. Helfer*in" && !this.langIsGerman()) {
+          return "prof. Help";
+        } else if (role === "prof. Help" && this.langIsGerman()) {
+          return "prof. Helfer*in";
+        }
+
+        const translatedRole = roles.find((r) => r.label === role);
+
         if (translatedRole) {
           return this.langIsGerman()
             ? translatedRole.german
             : translatedRole.label;
         }
+
         return role;
       };
     },
   },
+
   props: {
     // gets Alter as prop cp. ToDo demo
     alter: {
diff --git a/src/de.ts b/src/de.ts
index 2866c7b..67f1d2f 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -169,6 +169,12 @@ export default {
         circle1: "Kreis 1",
         networkwithoutprofhelp: "Netzwerk ohne prof. Hilfe",
         entirenetwork: "gesamtes Netzwerk",
+        circle_3: "Kreis 3",
+        circle_3_2: "Kreis 3 + 2",
+        circle_3_2_1: "Kreis 3 + 2 + 1",
+        professional_help: "Prof. Hilfe",
+        network_without_professional_help: "Netzwerk ohne prof. Hilfe",
+        entire_network: "gesamtes Netzwerk",
       },
     };
   },
diff --git a/src/en.ts b/src/en.ts
index 14d34d6..8e7a57e 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -167,6 +167,12 @@ export default {
         circle1: "Circle 1",
         networkwithoutprofhelp: "Network without professional help",
         entirenetwork: "Entire Network",
+        circle_3: "Circle 3",
+        circle_3_2: "Circle 3 + 2",
+        circle_3_2_1: "Circle 3 + 2 + 1",
+        professional_help: "Professional Help",
+        network_without_professional_help: "Network without Professional Help",
+        entire_network: "Entire Network",
       },
     };
   },

From 7c80b63b4c1e61b643272b44497f0cc3a39eff98 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 13 Sep 2023 10:37:40 +0200
Subject: [PATCH 07/17] =?UTF-8?q?=C3=9Cbersetzung=20der=20Rollen=20in=20de?=
 =?UTF-8?q?r=20Anzeige?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriPanelEntry.vue | 46 ++++++-----------------------
 1 file changed, 9 insertions(+), 37 deletions(-)

diff --git a/src/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index 7bdff2b..f33e906 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -11,7 +11,7 @@
     <span v-if="!isEditMode" class="contact">
       {{ displayName }}
       <span v-if="alter.age">/ {{ alter.age + " " }}</span>
-      <span :class="{ autovalue: getTranslatedDefault(alter.roleDefault) }">
+      <span :class="{ autovalue: getTranslatedRole(alter.roleDefault) }">
         / {{ getTranslatedRole(alter.role) }}
       </span>
     </span>
@@ -84,52 +84,24 @@ export default defineComponent({
   components: { AlteriEditForm, AlteriConnectionList },
   computed: {
     getTranslatedRole() {
-      return (role: any) => {
-        const translatedRole = roles.find((r) => r.label === role);
-
-        console.log(translatedRole);
+      return () => {
+        const { role } = this.alter;
+        const translatedRole = roles.find((r) => r.german === role);
+        const translatedEng = roles.find((r) => r.label === role);
 
         if (translatedRole) {
           return this.langIsGerman()
             ? translatedRole.german
             : translatedRole.label;
+        } else if (translatedEng) {
+          return this.langIsGerman()
+            ? translatedEng.german
+            : translatedEng.label;
         } else {
           return role;
         }
       };
     },
-    getTranslatedDefault() {
-      return (role: string) => {
-        if (role === "Familienangehörige*r" && !this.langIsGerman()) {
-          console.log("here");
-          return "Family member";
-        } else if (role === "Family member" && this.langIsGerman()) {
-          return "Familienangehörige*r";
-        } else if (role === "Freund*in" && !this.langIsGerman()) {
-          return "Friend";
-        } else if (role === "Friend" && this.langIsGerman()) {
-          return "Freund*in";
-        } else if (role === "Kolleg*in" && !this.langIsGerman()) {
-          return "Colleague";
-        } else if (role === "Colleague" && this.langIsGerman()) {
-          return "Kolleg*in";
-        } else if (role === "prof. Helfer*in" && !this.langIsGerman()) {
-          return "prof. Help";
-        } else if (role === "prof. Help" && this.langIsGerman()) {
-          return "prof. Helfer*in";
-        }
-
-        const translatedRole = roles.find((r) => r.label === role);
-
-        if (translatedRole) {
-          return this.langIsGerman()
-            ? translatedRole.german
-            : translatedRole.label;
-        }
-
-        return role;
-      };
-    },
   },
 
   props: {

From 8a58c9f484606634e995fcf7a0c1f284b75225a4 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 13 Sep 2023 15:34:19 +0200
Subject: [PATCH 08/17] =?UTF-8?q?=C3=9Cbersetzung=20PDF=20und=20Anfang=20d?=
 =?UTF-8?q?er=20=C3=84nderung=20der=20Rollenspeicherung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriPanelEntry.vue |  2 +-
 src/components/SideMenu.vue         |  5 +-
 src/data/Roles.ts                   | 11 +++--
 src/data/roles.json                 | 75 -----------------------------
 src/data/roles_de.json              | 75 +++++++++++++++++++++++++++++
 src/data/roles_en.json              | 24 ++++-----
 src/de.ts                           |  4 ++
 src/en.ts                           |  4 ++
 src/store/adaptiveNWKDefaults.ts    |  6 +--
 src/views/PdfView.vue               | 48 +++++++++++-------
 10 files changed, 136 insertions(+), 118 deletions(-)
 delete mode 100644 src/data/roles.json
 create mode 100644 src/data/roles_de.json

diff --git a/src/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index f33e906..49d9fb2 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -11,7 +11,7 @@
     <span v-if="!isEditMode" class="contact">
       {{ displayName }}
       <span v-if="alter.age">/ {{ alter.age + " " }}</span>
-      <span :class="{ autovalue: getTranslatedRole(alter.roleDefault) }">
+      <span :class="{ autovalue: alter.roleDefault }">
         / {{ getTranslatedRole(alter.role) }}
       </span>
     </span>
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 8141545..88d32dd 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -87,7 +87,9 @@
             '&age=' +
             showAge +
             '&role=' +
-            showRole
+            showRole +
+            '&lang=' +
+            t('lang')
           "
           target="_blank"
           class="button"
@@ -219,7 +221,6 @@ export default defineComponent({
       },
 
       showStatistics: () => store.commit("view/enable", "statistics"),
-
       pseudonyms: computed(() => store.state.pseudonym.active),
       togglePseudonyms: () => store.commit("pseudonym/toggle"),
       horizons: computed(() => store.state.view.horizons),
diff --git a/src/data/Roles.ts b/src/data/Roles.ts
index a02d407..b0cdc4a 100644
--- a/src/data/Roles.ts
+++ b/src/data/Roles.ts
@@ -1,20 +1,21 @@
 import { Gender, defaultGender } from "./Gender";
-import roles from "./roles_en.json";
+import rolesEN from "./roles_en.json";
+import rolesDE from "./roles_de.json";
 
-export const RolesEng = roles.map((d) => d.label);
+export const RolesEng = rolesEN.map((d) => d.german);
 
-export const Roles = roles.map((d) => d.german);
+export const Roles = rolesDE.map((d) => d.german);
 
 const DEFAULT_ABBREV = "X";
 
 export function getGenderDefaultByRole(role: string): string {
-  const roleInfo = roles.find((d) => d.label == role);
+  const roleInfo = rolesDE.find((d) => d.german == role);
   if (roleInfo) return Gender[roleInfo.gender];
   else return defaultGender;
 }
 
 export function getRoleAbbrev(role: string): string {
-  const roleInfo = roles.find((d) => d.label == role);
+  const roleInfo = rolesDE.find((d) => d.german == role);
   if (roleInfo) return roleInfo.abbrev;
   else return DEFAULT_ABBREV;
 }
diff --git a/src/data/roles.json b/src/data/roles.json
deleted file mode 100644
index 5b3b2ce..0000000
--- a/src/data/roles.json
+++ /dev/null
@@ -1,75 +0,0 @@
-[
-  { "label": "Familienangehörige*r", "gender": 3, "abbrev": "Fa" },
-  { "label": "Ehefrau", "gender": 0, "abbrev": "Ef" },
-  { "label": "Ehemann", "gender": 1, "abbrev": "Em" },
-  { "label": "Lebensgefährt*in", "gender": 3, "abbrev": "Lgf" },
-  { "label": "Partner*in", "gender": 3, "abbrev": "Pr" },
-  { "label": "Mutter", "gender": 0, "abbrev": "Mu" },
-  { "label": "Vater", "gender": 1, "abbrev": "Va" },
-  { "label": "Stiefmutter", "gender": 0, "abbrev": "StM" },
-  { "label": "Stiefvater", "gender": 1, "abbrev": "Stv" },
-  { "label": "Pflegemutter", "gender": 0, "abbrev": "PfM" },
-  { "label": "Pflegevater", "gender": 1, "abbrev": "Pfv" },
-  { "label": "Adoptivmutter", "gender": 0, "abbrev": "AMu" },
-  { "label": "Adoptivvater", "gender": 1, "abbrev": "AVa" },
-  { "label": "Schwester", "gender": 0, "abbrev": "Sw" },
-  { "label": "Bruder", "gender": 1, "abbrev": "Br" },
-  { "label": "Adoptivschwester", "gender": 0, "abbrev": "ABr" },
-  { "label": "Adoptivbruder", "gender": 1, "abbrev": "ABr" },
-  { "label": "Stiefschwester", "gender": 0, "abbrev": "SSw" },
-  { "label": "Stiefbruder", "gender": 1, "abbrev": "SBr" },
-  { "label": "Halbschwester", "gender": 0, "abbrev": "HSw" },
-  { "label": "Halbbruder", "gender": 1, "abbrev": "HBr" },
-  { "label": "Pflegeschwester", "gender": 0, "abbrev": "PSw" },
-  { "label": "Pflegebruder", "gender": 1, "abbrev": "PBr" },
-  { "label": "Tochter", "gender": 0, "abbrev": "To" },
-  { "label": "Sohn", "gender": 1, "abbrev": "So" },
-  { "label": "Adoptivtochter", "gender": 0, "abbrev": "ATo" },
-  { "label": "Adoptivsohn", "gender": 1, "abbrev": "ASo" },
-  { "label": "Pflegetochter", "gender": 0, "abbrev": "PTo" },
-  { "label": "Pflegesohn", "gender": 1, "abbrev": "PSo" },
-  { "label": "Stieftochter", "gender": 0, "abbrev": "STo" },
-  { "label": "Stiefsohn", "gender": 1, "abbrev": "SSo" },
-  { "label": "Großmutter", "gender": 0, "abbrev": "GrM" },
-  { "label": "Großvater", "gender": 1, "abbrev": "GrV" },
-  { "label": "Urgroßmutter", "gender": 0, "abbrev": "UGm" },
-  { "label": "Urgroßvater", "gender": 1, "abbrev": "UGrv" },
-  { "label": "Schwager/Schwägerin", "gender": 3, "abbrev": "Schw" },
-  { "label": "Schwiegermutter", "gender": 0, "abbrev": "SwM" },
-  { "label": "Schwiegervater", "gender": 1, "abbrev": "SwV" },
-  { "label": "Schwiegertochter", "gender": 0, "abbrev": "SwT" },
-  { "label": "Schwiegersohn", "gender": 1, "abbrev": "SwS" },
-  { "label": "Enkelkind", "gender": 3, "abbrev": "Ek" },
-  { "label": "Urenkelkind", "gender": 3, "abbrev": "UEk" },
-  { "label": "Tante", "gender": 0, "abbrev": "Ta" },
-  { "label": "Onkel", "gender": 1, "abbrev": "On" },
-  { "label": "Cousin*e", "gender": 3, "abbrev": "Co" },
-  { "label": "Angeheiratete Tante", "gender": 0, "abbrev": "aTa" },
-  { "label": "Angeheirateter Onkel", "gender": 1, "abbrev": "aOn" },
-  { "label": "Nichte", "gender": 0, "abbrev": "Ni" },
-  { "label": "Neffe", "gender": 1, "abbrev": "Ne" },
-  { "label": "Angeheiratete Nichte", "gender": 0, "abbrev": "aNi" },
-  { "label": "Angeheirater Neffe", "gender": 1, "abbrev": "aNE" },
-  { "label": "Freund*in", "gender": 3, "abbrev": "Fr" },
-  { "label": "Nachbar*in", "gender": 3, "abbrev": "Na" },
-  { "label": "Bekannte*r", "gender": 3, "abbrev": "Be" },
-  { "label": "Kolleg*in", "gender": 3, "abbrev": "Ko" },
-  { "label": "Arbeitskolleg*in", "gender": 3, "abbrev": "AKo" },
-  { "label": "Vereinskolleg*in", "gender": 3, "abbrev": "VKo" },
-  { "label": "Ausbildungskolleg*in", "gender": 3, "abbrev": "AuKo" },
-  { "label": "Schulkolleg*in", "gender": 3, "abbrev": "SKo" },
-  { "label": "Studienkolleg*in", "gender": 3, "abbrev": "StKo" },
-  { "label": "prof. Helfer*in", "gender": 3, "abbrev": "He" },
-  { "label": "Ärzt*in", "gender": 3, "abbrev": "Arz" },
-  { "label": "Psychotherapeut*in", "gender": 3, "abbrev": "PsyT" },
-  { "label": "Pflegefachkraft", "gender": 3, "abbrev": "PK" },
-  { "label": "Gesetz. Erwachsenenvertretung", "gender": 3, "abbrev": "ErV" },
-  { "label": "Psycholog*in", "gender": 3, "abbrev": "Psy" },
-  { "label": "Sozialarbeiter*in", "gender": 3, "abbrev": "Soz" },
-  { "label": "Berater*in / Betreuer*in", "gender": 3, "abbrev": "Be" },
-  { "label": "Pfarrer*in", "gender": 3, "abbrev": "Pf" },
-  { "label": "Physiotherapeut*in", "gender": 3, "abbrev": "Phy" },
-  { "label": "Ergotherapeut*in", "gender": 3, "abbrev": "Erg" },
-  { "label": "Ex-Partner*in", "gender": 3, "abbrev": "ExPr" },
-  { "label": "Mitbewohner*in", "gender": 3, "abbrev": "Mbw" }
-]
diff --git a/src/data/roles_de.json b/src/data/roles_de.json
new file mode 100644
index 0000000..4089a2f
--- /dev/null
+++ b/src/data/roles_de.json
@@ -0,0 +1,75 @@
+[
+  { "label": "Familienangehörige*r", "german": "Familienangehörige*r", "gender": 3, "abbrev": "Fa" },
+  { "label": "Ehefrau", "german": "Ehefrau", "gender": 0, "abbrev": "Ef" },
+  { "label": "Ehemann", "german": "Ehemann", "gender": 1, "abbrev": "Em" },
+  { "label": "Lebensgefährt*in", "german": "Lebensgefährt*in", "gender": 3, "abbrev": "Lgf" },
+  { "label": "Partner*in", "german": "Partner*in", "gender": 3, "abbrev": "Pr" },
+  { "label": "Mutter", "german": "Mutter", "gender": 0, "abbrev": "Mu" },
+  { "label": "Vater", "german": "Vater", "gender": 1, "abbrev": "Va" },
+  { "label": "Stiefmutter", "german": "Stiefmutter", "gender": 0, "abbrev": "StM" },
+  { "label": "Stiefvater", "german": "Stiefvater", "gender": 1, "abbrev": "Stv" },
+  { "label": "Pflegemutter", "german": "Pflegemutter", "gender": 0, "abbrev": "PfM" },
+  { "label": "Pflegevater", "german": "Pflegevater", "gender": 1, "abbrev": "Pfv" },
+  { "label": "Adoptivmutter", "german": "Adoptivmutter", "gender": 0, "abbrev": "AMu" },
+  { "label": "Adoptivvater", "german": "Adoptivvater", "gender": 1, "abbrev": "AVa" },
+  { "label": "Schwester", "german": "Schwester", "gender": 0, "abbrev": "Sw" },
+  { "label": "Bruder", "german": "Bruder", "gender": 1, "abbrev": "Br" },
+  { "label": "Adoptivschwester", "german": "Adoptivschwester", "gender": 0, "abbrev": "ABr" },
+  { "label": "Adoptivbruder", "german": "Adoptivbruder", "gender": 1, "abbrev": "ABr" },
+  { "label": "Stiefschwester", "german": "Stiefschwester", "gender": 0, "abbrev": "SSw" },
+  { "label": "Stiefbruder", "german": "Stiefbruder", "gender": 1, "abbrev": "SBr" },
+  { "label": "Halbschwester", "german": "Halbschwester", "gender": 0, "abbrev": "HSw" },
+  { "label": "Halbbruder", "german": "Halbbruder", "gender": 1, "abbrev": "HBr" },
+  { "label": "Pflegeschwester", "german": "Pflegeschwester", "gender": 0, "abbrev": "PSw" },
+  { "label": "Pflegebruder", "german": "Pflegebruder", "gender": 1, "abbrev": "PBr" },
+  { "label": "Tochter", "german": "Tochter", "gender": 0, "abbrev": "To" },
+  { "label": "Sohn", "german": "Sohn", "gender": 1, "abbrev": "So" },
+  { "label": "Adoptivtochter", "german": "Adoptivtochter", "gender": 0, "abbrev": "ATo" },
+  { "label": "Adoptivsohn", "german": "Adoptivsohn", "gender": 1, "abbrev": "ASo" },
+  { "label": "Pflegetochter", "german": "Pflegetochter", "gender": 0, "abbrev": "PTo" },
+  { "label": "Pflegesohn", "german": "Pflegesohn", "gender": 1, "abbrev": "PSo" },
+  { "label": "Stieftochter", "german": "Stieftochter", "gender": 0, "abbrev": "STo" },
+  { "label": "Stiefsohn", "german": "Stiefsohn", "gender": 1, "abbrev": "SSo" },
+  { "label": "Großmutter", "german": "Großmutter", "gender": 0, "abbrev": "GrM" },
+  { "label": "Großvater", "german": "Großvater", "gender": 1, "abbrev": "GrV" },
+  { "label": "Urgroßmutter", "german": "Urgroßmutter", "gender": 0, "abbrev": "UGm" },
+  { "label": "Urgroßvater", "german": "Urgroßvater", "gender": 1, "abbrev": "UGrv" },
+  { "label": "Schwager/Schwägerin", "german": "Schwager/Schwägerin", "gender": 3, "abbrev": "Schw" },
+  { "label": "Schwiegermutter", "german": "Schwiegermutter", "gender": 0, "abbrev": "SwM" },
+  { "label": "Schwiegervater", "german": "Schwiegervater", "gender": 1, "abbrev": "SwV" },
+  { "label": "Schwiegertochter", "german": "Schwiegertochter", "gender": 0, "abbrev": "SwT" },
+  { "label": "Schwiegersohn", "german": "Schwiegersohn", "gender": 1, "abbrev": "SwS" },
+  { "label": "Enkelkind", "german": "Enkelkind", "gender": 3, "abbrev": "Ek" },
+  { "label": "Urenkelkind", "german": "Urenkelkind", "gender": 3, "abbrev": "UEk" },
+  { "label": "Tante", "german": "Tante", "gender": 0, "abbrev": "Ta" },
+  { "label": "Onkel", "german": "Onkel", "gender": 1, "abbrev": "On" },
+  { "label": "Cousin*e", "german": "Cousin*e", "gender": 3, "abbrev": "Co" },
+  { "label": "Angeheiratete Tante", "german": "Angeheiratete Tante", "gender": 0, "abbrev": "aTa" },
+  { "label": "Angeheirateter Onkel", "german": "Angeheirateter Onkel", "gender": 1, "abbrev": "aOn" },
+  { "label": "Nichte", "german": "Nichte", "gender": 0, "abbrev": "Ni" },
+  { "label": "Neffe", "german": "Neffe", "gender": 1, "abbrev": "Ne" },
+  { "label": "Angeheiratete Nichte", "german": "Angeheiratete Nichte", "gender": 0, "abbrev": "aNi" },
+  { "label": "Angeheirater Neffe", "german": "Angeheirater Neffe", "gender": 1, "abbrev": "aNE" },
+  { "label": "Freund*in", "german": "Freund*in", "gender": 3, "abbrev": "Fr" },
+  { "label": "Nachbar*in", "german": "Nachbar*in", "gender": 3, "abbrev": "Na" },
+  { "label": "Bekannte*r", "german": "Bekannte*r", "gender": 3, "abbrev": "Be" },
+  { "label": "Kolleg*in", "german": "Kolleg*in", "gender": 3, "abbrev": "Ko" },
+  { "label": "Arbeitskolleg*in", "german": "Arbeitskolleg*in", "gender": 3, "abbrev": "AKo" },
+  { "label": "Vereinskolleg*in", "german": "Vereinskolleg*in", "gender": 3, "abbrev": "VKo" },
+  { "label": "Ausbildungskolleg*in", "german": "Ausbildungskolleg*in", "gender": 3, "abbrev": "AuKo" },
+  { "label": "Schulkolleg*in", "german": "Schulkolleg*in", "gender": 3, "abbrev": "SKo" },
+  { "label": "Studienkolleg*in", "german": "Studienkolleg*in", "gender": 3, "abbrev": "StKo" },
+  { "label": "prof. Helfer*in", "german": "prof. Helfer*in", "gender": 3, "abbrev": "He" },
+  { "label": "Ärzt*in", "german": "Ärzt*in", "gender": 3, "abbrev": "Arz" },
+  { "label": "Psychotherapeut*in", "german": "Psychotherapeut*in", "gender": 3, "abbrev": "PsyT" },
+  { "label": "Pflegefachkraft", "german": "Pflegefachkraft", "gender": 3, "abbrev": "PK" },
+  { "label": "Gesetz. Erwachsenenvertretung", "german": "Gesetz. Erwachsenenvertretung", "gender": 3, "abbrev": "ErV" },
+  { "label": "Psycholog*in", "german": "Psycholog*in", "gender": 3, "abbrev": "Psy" },
+  { "label": "Sozialarbeiter*in", "german": "Sozialarbeiter*in", "gender": 3, "abbrev": "Soz" },
+  { "label": "Berater*in / Betreuer*in", "german": "Berater*in / Betreuer*in", "gender": 3, "abbrev": "Be" },
+  { "label": "Pfarrer*in", "german": "Pfarrer*in", "gender": 3, "abbrev": "Pf" },
+  { "label": "Physiotherapeut*in", "german": "Physiotherapeut*in", "gender": 3, "abbrev": "Phy" },
+  { "label": "Ergotherapeut*in", "german": "Ergotherapeut*in", "gender": 3, "abbrev": "Erg" },
+  { "label": "Ex-Partner*in", "german": "Ex-Partner*in", "gender": 3, "abbrev": "ExPr" },
+  { "label": "Mitbewohner*in", "german": "Mitbewohner*in", "gender": 3, "abbrev": "Mbw" }
+]
diff --git a/src/data/roles_en.json b/src/data/roles_en.json
index e11f3d0..458b507 100644
--- a/src/data/roles_en.json
+++ b/src/data/roles_en.json
@@ -1,5 +1,5 @@
 [
-  { "label": "familiy member", "german": "Familienangehörige*r", "gender": 3, "abbrev": "Fa" },
+  { "label": "family member", "german": "Familienangehörige*r", "gender": 3, "abbrev": "Fa" },
   { "label": "wife", "german": "Ehefrau", "gender": 0, "abbrev": "Ef" },
   { "label": "husband", "german": "Ehemann", "gender": 1, "abbrev": "Em" },
   { "label": "life partner", "german": "Lebensgefährt*in", "gender": 3, "abbrev": "Lgf" },
@@ -44,24 +44,24 @@
   { "label": "aunt", "german": "Tante", "gender": 0, "abbrev": "Ta" },
   { "label": "uncle", "german": "Onkel", "gender": 1, "abbrev": "On" },
   { "label": "cousin", "german": "Cousin*e", "gender": 3, "abbrev": "Co" },
-  { "label": "", "german": "Angeheiratete Tante", "gender": 0, "abbrev": "aTa" },
-  { "label": "", "german": "Angeheirateter Onkel", "gender": 1, "abbrev": "aOn" },
+  { "label": "aunt", "german": "Angeheiratete Tante", "gender": 0, "abbrev": "aTa" },
+  { "label": "uncle", "german": "Angeheirateter Onkel", "gender": 1, "abbrev": "aOn" },
   { "label": "niece", "german": "Nichte", "gender": 0, "abbrev": "Ni" },
   { "label": "nephew", "german": "Neffe", "gender": 1, "abbrev": "Ne" },
-  { "label": "", "german": "Angeheiratete Nichte", "gender": 0, "abbrev": "aNi" },
-  { "label": "", "german": "Angeheirater Neffe", "gender": 1, "abbrev": "aNE" },
+  { "label": "niece", "german": "Angeheiratete Nichte", "gender": 0, "abbrev": "aNi" },
+  { "label": "nephew", "german": "Angeheirater Neffe", "gender": 1, "abbrev": "aNE" },
   { "label": "friend", "german": "Freund*in", "gender": 3, "abbrev": "Fr" },
   { "label": "neighbor", "german": "Nachbar*in", "gender": 3, "abbrev": "Na" },
   { "label": "acquaintance", "german": "Bekannte*r", "gender": 3, "abbrev": "Be" },
   { "label": "colleague", "german": "Kolleg*in", "gender": 3, "abbrev": "Ko" },
-  { "label": "", "german": "Arbeitskolleg*in", "gender": 3, "abbrev": "AKo" },
-  { "label": "", "german": "Vereinskolleg*in", "gender": 3, "abbrev": "VKo" },
-  { "label": "", "german": "Ausbildungskolleg*in", "gender": 3, "abbrev": "AuKo" },
-  { "label": "", "german": "Schulkolleg*in", "gender": 3, "abbrev": "SKo" },
-  { "label": "", "german": "Studienkolleg*in", "gender": 3, "abbrev": "StKo" },
+  { "label": "colleague", "german": "Arbeitskolleg*in", "gender": 3, "abbrev": "AKo" },
+  { "label": "colleague", "german": "Vereinskolleg*in", "gender": 3, "abbrev": "VKo" },
+  { "label": "colleague", "german": "Ausbildungskolleg*in", "gender": 3, "abbrev": "AuKo" },
+  { "label": "colleague", "german": "Schulkolleg*in", "gender": 3, "abbrev": "SKo" },
+  { "label": "colleague", "german": "Studienkolleg*in", "gender": 3, "abbrev": "StKo" },
   { "label": "prof. helper", "german": "prof. Helfer*in", "gender": 3, "abbrev": "He" },
   { "label": "doctor", "german": "Ärzt*in", "gender": 3, "abbrev": "Arz" },
-  { "label": "psychiotherapist", "german": "Psychotherapeut*in", "gender": 3, "abbrev": "PsyT" },
+  { "label": "psychotherapist", "german": "Psychotherapeut*in", "gender": 3, "abbrev": "PsyT" },
   { "label": "nurse practitioner", "german": "Pflegefachkraft", "gender": 3, "abbrev": "PK" },
   { "label": "legal adult representation", "german": "Gesetz. Erwachsenenvertretung", "gender": 3, "abbrev": "ErV" },
   { "label": "psychologist", "german": "Psycholog*in", "gender": 3, "abbrev": "Psy" },
@@ -69,7 +69,7 @@
   { "label": "consultant/supervisor", "german": "Berater*in / Betreuer*in", "gender": 3, "abbrev": "Be" },
   { "label": "pastor", "german": "Pfarrer*in", "gender": 3, "abbrev": "Pf" },
   { "label": "physiotherapist", "german": "Physiotherapeut*in", "gender": 3, "abbrev": "Phy" },
-  { "label": "", "german": "Ergotherapeut*in", "gender": 3, "abbrev": "Erg" },
+  { "label": "ergotherapist", "german": "Ergotherapeut*in", "gender": 3, "abbrev": "Erg" },
   { "label": "ex-partner", "german": "Ex-Partner*in", "gender": 3, "abbrev": "ExPr" },
   { "label": "roommate", "german": "Mitbewohner*in", "gender": 3, "abbrev": "Mbw" }
 ]
diff --git a/src/de.ts b/src/de.ts
index 67f1d2f..cae82b6 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -96,6 +96,7 @@ export default {
         notspecified: "nicht festgelegt",
         age: "Alter",
         notesaboutego: "Notizen zum Kontakt",
+        note: "Notizen",
         whoisinthecenter: "Wer steht im Zentrum der NWK?",
         mandatoryfield: "Pflichtfeld",
         done: "Schließen",
@@ -119,8 +120,10 @@ export default {
         positiononmap: "Die Position in der Karte muss noch festgelegt werden.",
         role: "Rolle",
         human: "Mensch",
+        humanno: "Mensch: Nein",
         agetitle: "Optional,soziales Alter der Kontaktperson",
         deceased: "verstorben",
+        deceasedyes: "Verstroben: Ja",
         deceasedcheck: "Häkchen, falls Kontaktperson verstorben",
         relationship: "Beziehung",
         relationtitle: "Aktualisierung der Verbindung",
@@ -175,6 +178,7 @@ export default {
         professional_help: "Prof. Hilfe",
         network_without_professional_help: "Netzwerk ohne prof. Hilfe",
         entire_network: "gesamtes Netzwerk",
+        lang: "de",
       },
     };
   },
diff --git a/src/en.ts b/src/en.ts
index 8e7a57e..d0bf5e4 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -95,6 +95,7 @@ export default {
         notspecified: "not specified",
         age: "Age",
         notesaboutego: "Notes about ego",
+        note: "Note",
         whoisinthecenter: "Who is in the center of the NWK?",
         mandatoryfield: "Mandatory field",
         done: "Done",
@@ -118,8 +119,10 @@ export default {
         positiononmap: "The position on the map still has to be determined.",
         role: "Role",
         human: "Human",
+        humanno: "Human: No",
         agetitle: "Optional, social age of the contact",
         deceased: "deceased",
+        deceasedyes: "Deceased: Yes",
         deceasedcheck: "Check if contact person died",
         relationship: "Relationship",
         relationtitle: "Updating the connection",
@@ -173,6 +176,7 @@ export default {
         professional_help: "Professional Help",
         network_without_professional_help: "Network without Professional Help",
         entire_network: "Entire Network",
+        lang: "en",
       },
     };
   },
diff --git a/src/store/adaptiveNWKDefaults.ts b/src/store/adaptiveNWKDefaults.ts
index 5026834..e144960 100644
--- a/src/store/adaptiveNWKDefaults.ts
+++ b/src/store/adaptiveNWKDefaults.ts
@@ -31,11 +31,7 @@ export function applyAdaptiveNWKDefaults(
 
   if (changedAlter.roleDefault && "angle" in changes) {
     const sector = sectorIndex(changedAlter);
-    if (sector != null)
-      changedAlter.role =
-        document.documentElement.lang === "de"
-          ? SectorDefaultRoles[sector]
-          : SectorDefaultRolesEng[sector];
+    if (sector != null) changedAlter.role = SectorDefaultRoles[sector];
   }
 
   // monitor if user has explicitly set a gender --> never override that
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index c01695b..792546f 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -29,14 +29,16 @@
         <div id="brand"><i>easy</i>NWK</div>
       </div>
       <div id="egobar">
-        <p class="name">{{ "Ankerperson: " + ego.name }}</p>
-        <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>
+        <p class="name">{{ t("ego") + ": " + ego.name }}</p>
+        <p>
+          {{ ego.currentGender ? t("genders") + ": " + ego.currentGender : "" }}
+        </p>
+        <p>{{ ego.age.length >= 1 ? t("age") + ": " + ego.age : "" }}</p>
+        <p>{{ ego.note.length >= 1 ? t("note") + ": " + ego.note : "" }}</p>
       </div>
       <div class="columns">
         <div class="column">
-          <p class="panel-heading">Kontakte</p>
+          <p class="panel-heading">{{ t("contacts") }}</p>
           <div
             v-for="(alter, index) in alteri"
             v-bind:key="index"
@@ -44,31 +46,35 @@
           >
             <p class="name">{{ alter.name }}</p>
             <p>{{ alter.role }}</p>
-            <p>{{ alter.age.length >= 1 ? "Alter: " + alter.age : "" }}</p>
-            <p>{{ alter.human ? "" : "Mensch: Nein" }}</p>
+            <p>
+              {{ alter.age.length >= 1 ? t("age") + ": " + alter.age : "" }}
+            </p>
+            <p>{{ alter.human ? "" : t("humanno") }}</p>
             <p>
               {{
                 alter.human
-                  ? "Geschlecht: " + alter.currentGender
-                  : "Kategorie: " + alter.currentGender
+                  ? t("genders") + ": " + alter.currentGender
+                  : t("category") + ": " + alter.currentGender
               }}
             </p>
-            <p>{{ alter.deceased ? "Verstorben: Ja" : "" }}</p>
+            <p>{{ alter.deceased ? t("deceasedyes") : "" }}</p>
             <p>
-              Beziehung:
+              {{ t("relationship") }}:
               {{
                 alter.edgeType == 1
-                  ? "besteht"
+                  ? t("existing")
                   : alter.edgeType == 2
-                  ? "multiplex"
-                  : "keine aktuelle Beziehung"
+                  ? t("multiplex")
+                  : t("nocurrentrelationship")
               }}
             </p>
-            <p>{{ alter.note.length >= 1 ? "Notiz: " + alter.note : "" }}</p>
+            <p>
+              {{ alter.note.length >= 1 ? t("note") + ": " + alter.note : "" }}
+            </p>
           </div>
         </div>
       </div>
-      <NetworkMap />
+      <NetworkMap :key="t('lang')" />
     </div>
   </div>
 </template>
@@ -84,8 +90,14 @@ export default defineComponent({
   mixins: [de, en],
   methods: {
     t(prop: string) {
-      console.log(document.documentElement.lang);
-      return this[document.documentElement.lang][prop];
+      const langParam = useRouter().currentRoute.value.query.lang;
+
+      const lang =
+        typeof langParam === "string"
+          ? langParam
+          : document.documentElement.lang;
+
+      return this[lang][prop];
     },
   },
   name: "PdfView",

From 1d593f5a26138368dcfa2b48ed18db926ce71080 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 14 Sep 2023 15:29:32 +0200
Subject: [PATCH 09/17] =?UTF-8?q?Fertigstellung=20=C3=9Cbersetzung=20PDF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlteriEditForm.vue    | 10 +++++++---
 src/components/NetworkMapSectors.vue |  5 -----
 src/data/Roles.ts                    |  7 +++++--
 src/views/PdfView.vue                | 28 +++++++++++++++++++++++++---
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index 77c6f0c..5f3cb87 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -52,9 +52,11 @@
           <datalist id="predefined-roles" :key="langIsGerman() ? 'de' : 'en'">
             <option
               v-for="value in langIsGerman() ? roleOptions : engRoleOptions"
-              :key="value"
-              :value="value"
-            />
+              :key="value.german"
+              :data-value="value.german"
+            >
+              {{ value.label }}
+            </option>
           </datalist>
         </div>
       </div>
@@ -261,6 +263,8 @@ export default defineComponent({
 
     const addingNewAlter = ref(!(props.alter?.name.length > 0));
 
+    const selectedRoleLabel = ref(props.alter?.role);
+
     // name field is special because it must not be empty
     // the data item is only used for validity check & never stored
     const alterNameInUI = ref(props.alter?.name);
diff --git a/src/components/NetworkMapSectors.vue b/src/components/NetworkMapSectors.vue
index 21b8885..d87303e 100644
--- a/src/components/NetworkMapSectors.vue
+++ b/src/components/NetworkMapSectors.vue
@@ -48,11 +48,6 @@ export default defineComponent({
       else return false;
     },
   },
-  data() {
-    return {
-      lang: "de",
-    };
-  },
   props: {
     transform: {
       type: Object,
diff --git a/src/data/Roles.ts b/src/data/Roles.ts
index b0cdc4a..606f77b 100644
--- a/src/data/Roles.ts
+++ b/src/data/Roles.ts
@@ -2,9 +2,12 @@ import { Gender, defaultGender } from "./Gender";
 import rolesEN from "./roles_en.json";
 import rolesDE from "./roles_de.json";
 
-export const RolesEng = rolesEN.map((d) => d.german);
+export const RolesEng = rolesEN.map((d) => ({
+  german: d.german,
+  label: d.label,
+}));
 
-export const Roles = rolesDE.map((d) => d.german);
+export const Roles = rolesDE.map((d) => ({ german: d.german, label: d.label }));
 
 const DEFAULT_ABBREV = "X";
 
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index 792546f..44d6984 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -31,7 +31,11 @@
       <div id="egobar">
         <p class="name">{{ t("ego") + ": " + ego.name }}</p>
         <p>
-          {{ ego.currentGender ? t("genders") + ": " + ego.currentGender : "" }}
+          {{
+            ego.currentGender
+              ? t("genders") + ": " + getGenderTranslation(ego.currentGender)
+              : ""
+          }}
         </p>
         <p>{{ ego.age.length >= 1 ? t("age") + ": " + ego.age : "" }}</p>
         <p>{{ ego.note.length >= 1 ? t("note") + ": " + ego.note : "" }}</p>
@@ -53,7 +57,9 @@
             <p>
               {{
                 alter.human
-                  ? t("genders") + ": " + alter.currentGender
+                  ? t("genders") +
+                    ": " +
+                    getGenderTranslation(alter.currentGender)
                   : t("category") + ": " + alter.currentGender
               }}
             </p>
@@ -74,7 +80,7 @@
           </div>
         </div>
       </div>
-      <NetworkMap :key="t('lang')" />
+      <NetworkMap />
     </div>
   </div>
 </template>
@@ -97,8 +103,24 @@ export default defineComponent({
           ? langParam
           : document.documentElement.lang;
 
+      document.documentElement.lang = lang;
+
       return this[lang][prop];
     },
+    getGenderTranslation(gender: string) {
+      switch (gender) {
+        case "weiblich":
+          return this.t("female");
+        case "männlich":
+          return this.t("male");
+        case "divers":
+          return this.t("diverse");
+        case "nicht festgelegt":
+          return this.t("notspecified");
+        default:
+          return "";
+      }
+    },
   },
   name: "PdfView",
   components: { NetworkMap },

From ec0f3dd65831efb8143ecb88bde01db69356e44a Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 15 Sep 2023 11:27:24 +0200
Subject: [PATCH 10/17] =?UTF-8?q?=C3=9Cbersetzung=20der=20Kennzahlen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatisticsPanel.vue           | 13 ++-
 src/components/StatisticsTable.vue           | 17 ++--
 src/components/StatisticsTableCategories.vue | 20 ++++-
 src/data/AlterCategories.ts                  | 94 ++++++++++++++++++--
 4 files changed, 127 insertions(+), 17 deletions(-)

diff --git a/src/components/StatisticsPanel.vue b/src/components/StatisticsPanel.vue
index 0df4b35..b9c5711 100644
--- a/src/components/StatisticsPanel.vue
+++ b/src/components/StatisticsPanel.vue
@@ -17,7 +17,7 @@
         :class="{ 'is-active': tab === cat }"
         @click="go(cat)"
       >
-        {{ categoryLabel(cat) }}</a
+        {{ translateCategoryKey(categoryLabel(cat)) }}</a
       >
     </p>
     <StatisticsTable v-if="tab === ''"></StatisticsTable>
@@ -39,6 +39,7 @@ import {
 } from "@/data/AlterCategories";
 import de from "@/de";
 import en from "@/en";
+import { CATEGORY_TRANSLATIONS } from "@/data/AlterCategories";
 
 export default defineComponent({
   mixins: [de, en],
@@ -46,6 +47,16 @@ export default defineComponent({
     t(prop: string) {
       return this[document.documentElement.lang][prop];
     },
+    translateCategoryKey(categoryKey: any) {
+      const lang = document.documentElement.lang;
+      const translation = CATEGORY_TRANSLATIONS[categoryKey];
+
+      if (translation && translation[lang]) {
+        return translation[lang];
+      } else {
+        return categoryKey;
+      }
+    },
   },
   components: { StatisticsTable, StatisticsTableCategories },
   setup() {
diff --git a/src/components/StatisticsTable.vue b/src/components/StatisticsTable.vue
index 432b1f1..c947f31 100644
--- a/src/components/StatisticsTable.vue
+++ b/src/components/StatisticsTable.vue
@@ -125,14 +125,17 @@ export default defineComponent({
     const stars = computed(() => {
       const alteri = networkAnalysis.value.stars;
       if (alteri.length > 0 && networkAnalysis.value.maxDegree > 0) {
-        return (
-          alteri.map((a) => store.getters["displayName"](a)).join(", ") +
-          " (" +
-          networkAnalysis.value.maxDegree +
-          " Beziehungen)"
-        );
+        return document.documentElement.lang == "de"
+          ? alteri.map((a) => store.getters["displayName"](a)).join(", ") +
+              " (" +
+              networkAnalysis.value.maxDegree +
+              " Beziehungen)"
+          : alteri.map((a) => store.getters["displayName"](a)).join(", ") +
+              " (" +
+              networkAnalysis.value.maxDegree +
+              " relations)";
       } else {
-        return "keine";
+        return document.documentElement.lang == "de" ? "keine" : "none";
       }
     });
 
diff --git a/src/components/StatisticsTableCategories.vue b/src/components/StatisticsTableCategories.vue
index f66f807..3ca1f5a 100644
--- a/src/components/StatisticsTableCategories.vue
+++ b/src/components/StatisticsTableCategories.vue
@@ -4,7 +4,9 @@
       <thead>
         <tr>
           <th></th>
-          <th v-for="(cat, i) in categoryLabels" :key="i">{{ cat }}</th>
+          <th v-for="(cat, i) in categoryLabels" :key="i">
+            {{ translateCategoryKey(cat) }}
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -114,7 +116,10 @@ import {
   getOrInit,
   NetworkAnalysis,
 } from "@/data/NetworkAnalysis";
-import { getAlterCategorization } from "@/data/AlterCategories";
+import {
+  CATEGORY_TRANSLATIONS,
+  getAlterCategorization,
+} from "@/data/AlterCategories";
 import de from "@/de";
 import en from "@/en";
 
@@ -124,7 +129,18 @@ export default defineComponent({
     t(prop: string) {
       return this[document.documentElement.lang][prop];
     },
+    translateCategoryKey(categoryKey: any) {
+      const lang = document.documentElement.lang;
+      const translation = CATEGORY_TRANSLATIONS[categoryKey];
+
+      if (translation && translation[lang]) {
+        return translation[lang];
+      } else {
+        return categoryKey;
+      }
+    },
   },
+
   props: {
     categories: {
       type: String,
diff --git a/src/data/AlterCategories.ts b/src/data/AlterCategories.ts
index 0fce4e9..e9096ae 100644
--- a/src/data/AlterCategories.ts
+++ b/src/data/AlterCategories.ts
@@ -10,6 +10,85 @@ export interface AlterCategorization {
   categories: string[];
 }
 
+export const CATEGORY_TRANSLATIONS: Record<string, Record<string, string>> = {
+  Sektor: {
+    de: "Sektor",
+    en: "Sector",
+  },
+  "Kreis 3": {
+    de: "Kreis 3",
+    en: "Circle 3",
+  },
+  "Kreis 3 + 2": {
+    de: "Kreis 3 + 2",
+    en: "Circle 3 + 2",
+  },
+  "Kreis 3 + 2 + 1": {
+    de: "Kreis 3 + 2 + 1",
+    en: "Circle 3 + 2 + 1",
+  },
+  "prof. Hilfe": {
+    de: "Prof. Hilfe",
+    en: "Professional Help",
+  },
+  "Netzwerk ohne prof. Hilfe": {
+    de: "Netzwerk ohne prof. Hilfe",
+    en: "Network without Professional Help",
+  },
+  "gesamtes Netzwerk": {
+    de: "gesamtes Netzwerk",
+    en: "Entire Network",
+  },
+  Geschlecht: {
+    de: "Geschlecht",
+    en: "Gender",
+  },
+  Überblick: {
+    de: "Überblick",
+    en: "Overview",
+  },
+  "Horizont (kumulativ)": {
+    de: "Horizont (kumulativ)",
+    en: "Cumulative Horizon",
+  },
+  Horizont: {
+    de: "Horizont",
+    en: "Horizon",
+  },
+  Familie: {
+    de: "Familie",
+    en: "Family",
+  },
+  "Freund*innen / Bekannte": {
+    de: "Freund*innen / Bekannte",
+    en: "Friends / Acquaintances",
+  },
+  "Kolleg*innen": {
+    de: "Kolleg*innen",
+    en: "Colleagues",
+  },
+  "prof. Helfer*innen": {
+    de: "prof. Helfer*innen",
+    en: "Professional Helpers",
+  },
+  weiblich: {
+    de: "weiblich",
+    en: "Female",
+  },
+  männlich: {
+    de: "männlich",
+    en: "Male",
+  },
+  divers: {
+    de: "divers",
+    en: "Diverse",
+  },
+  "nicht festgelegt": {
+    de: "nicht festgelegt",
+    en: "Not Specified",
+  },
+};
+
 export function sectorIndex(alter: Alter): number | null {
   if (alter.distance <= 0) return null;
 
@@ -36,7 +115,12 @@ const SECTOR: AlterCategorization = {
   label: "Sektor",
   inCategory: (catIndex: number, a: Alter): boolean =>
     sectorIndex(a) === catIndex,
-  categories: Sectors,
+  categories: [
+    "Familie",
+    "Freund*innen / Bekannte",
+    "Kolleg*innen",
+    "prof. Helfer*innen",
+  ],
 };
 
 const PROFI: AlterCategorization = {
@@ -45,11 +129,7 @@ const PROFI: AlterCategorization = {
     (catIndex === 0 && sectorIndex(a) === 3) ||
     (catIndex === 1 && sectorIndex(a) != 3) ||
     catIndex === 2,
-  categories: [
-    "prof. Hilfe",
-    "Netzwerk ohne prof.\xa0Hilfe",
-    "gesamtes Netzwerk",
-  ],
+  categories: ["prof. Hilfe", "Netzwerk ohne prof. Hilfe", "gesamtes Netzwerk"],
 };
 
 const HORIZON_CUM: AlterCategorization = {
@@ -70,7 +150,7 @@ const GENDER: AlterCategorization = {
   label: "Geschlecht",
   inCategory: (catIndex: number, a: Alter): boolean =>
     a.currentGender === Gender[catIndex],
-  categories: Gender,
+  categories: ["weiblich", "männlich", "divers", "nicht festgelegt,"],
 };
 
 // const AGE: AlterCategorization = {

From 526befeb413f7eb71333282a4393e22a240070d4 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 25 Sep 2023 13:57:22 +0200
Subject: [PATCH 11/17] Versuch die Rollen immer auf Deutsch zu speichern

---
 src/components/AlteriEditForm.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index 5f3cb87..ed1ff5d 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -41,11 +41,12 @@
             class="input"
             :class="{ autovalue: alter.roleDefault }"
             type="text"
-            :value="alter.role"
+            :value="alterRole"
             list="predefined-roles"
             @blur="blurRole"
             @focus="focusRole"
           />
+
           <!-- <span class="icon is-small is-right has-text-link">
             <font-awesome-icon icon="chevron-down" />
           </span> -->
@@ -317,12 +318,24 @@ export default defineComponent({
 
     const blurRole = (evt: FocusEvent) => {
       const value = (evt.target as InputType).value.trim();
-      if (props.alter.roleDefault && value == "") {
-        (evt.target as InputType).value = props.alter.role;
+
+      const roles = roleOptions.value;
+      const role = roles.find((r) => r.label === value);
+
+      if (role) {
+        const germanValue = role.german;
+        const payload = {
+          index: store.state.view.editIndex,
+          changes: { role: germanValue },
+        };
+        store.commit("editAlter", payload);
       } else {
         commitEdit(evt, "role");
       }
     };
+
+    const alterRole = accessor<string>("role");
+
     const invalidName = computed(() => {
       return alterNameInUI.value.trim().length === 0;
     });
@@ -406,6 +419,7 @@ export default defineComponent({
     return {
       addingNewAlter,
       alterNameInUI,
+      alterRole,
       invalidName,
       invalidPosition,
       alterHuman: accessor<boolean>("human"),

From 93026e5db7e783a1fe7650c6541c90f855c59a5c Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 28 Sep 2023 11:52:54 +0200
Subject: [PATCH 12/17] Rollen immer auf Deutsch speichern

---
 src/components/AlteriEditForm.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index ed1ff5d..ba5f714 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -319,7 +319,10 @@ export default defineComponent({
     const blurRole = (evt: FocusEvent) => {
       const value = (evt.target as InputType).value.trim();
 
-      const roles = roleOptions.value;
+      const roles =
+        document.documentElement.lang == "de"
+          ? roleOptions.value
+          : engRoleOptions.value;
       const role = roles.find((r) => r.label === value);
 
       if (role) {

From be3a04c7eaa434c26e6638901395f7e12a5db26d Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 4 Oct 2023 14:32:48 +0200
Subject: [PATCH 13/17] Richtige Sprache anzeigen im Input-field von der Rolle

---
 src/components/AlteriEditForm.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index ba5f714..c3bf956 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -41,7 +41,7 @@
             class="input"
             :class="{ autovalue: alter.roleDefault }"
             type="text"
-            :value="alterRole"
+            :value="localizedRole"
             list="predefined-roles"
             @blur="blurRole"
             @focus="focusRole"
@@ -54,7 +54,6 @@
             <option
               v-for="value in langIsGerman() ? roleOptions : engRoleOptions"
               :key="value.german"
-              :data-value="value.german"
             >
               {{ value.label }}
             </option>
@@ -337,6 +336,13 @@ export default defineComponent({
       }
     };
 
+    const localizedRole = computed(() => {
+      const lang = document.documentElement.lang;
+      const roles = lang === "de" ? roleOptions.value : engRoleOptions.value;
+      const role = roles.find((r) => r.german === alterRole.value);
+      return role ? role.label : alterRole.value;
+    });
+
     const alterRole = accessor<string>("role");
 
     const invalidName = computed(() => {
@@ -423,6 +429,7 @@ export default defineComponent({
       addingNewAlter,
       alterNameInUI,
       alterRole,
+      localizedRole,
       invalidName,
       invalidPosition,
       alterHuman: accessor<boolean>("human"),

From a22bc4b11f91f6e6239b7287a74e774971de3f80 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 22 Feb 2024 15:02:01 +0100
Subject: [PATCH 14/17] =?UTF-8?q?Geschlechtsoptionen=20auch=20bei=20Ego=20?=
 =?UTF-8?q?=C3=BCbersetzt;=20Ankerperson=20in=20Deutsch=20zu=20Ego=20ge?=
 =?UTF-8?q?=C3=A4ndert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EgoEditForm.vue | 7 +++++--
 src/de.ts                      | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index 7763a04..9d3fc70 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -34,8 +34,11 @@
           <div class="control">
             <div class="select is-fullwidth">
               <select v-model="egoGender">
-                <option v-for="value in genderOptions" :key="value">
-                  {{ value }}
+                <option value="weiblich">{{ t("female") }}</option>
+                <option value="männlich">{{ t("male") }}</option>
+                <option value="divers">{{ t("diverse") }}</option>
+                <option value="nicht festgelegt">
+                  {{ t("notspecified") }}
                 </option>
               </select>
             </div>
diff --git a/src/de.ts b/src/de.ts
index cae82b6..b7354b4 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -86,7 +86,7 @@ export default {
         //},
         //egoPanel: {},
         //egoEdit: {
-        ego: "Ankerperson",
+        ego: "Ego",
         editego: "Ankerperson bearbeiten",
         name: "Name",
         genders: "Geschlecht",

From d0b2868f19f18cb66bb28065d6c362b3f10f8490 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Tue, 27 Feb 2024 05:55:10 +0100
Subject: [PATCH 15/17] dependency updates

* @babel/traverse <https://github.com/advisories/GHSA-67hx-6x53-jw92>
* follow-redirects <https://github.com/advisories/GHSA-jchw-25xp-jwwc>
* update-browserslist-db
---
 package-lock.json | 337 ++++++++++++++++++++++++----------------------
 1 file changed, 177 insertions(+), 160 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1fa3a22..8d467d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easynwk",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "easynwk",
-      "version": "2.0.6",
+      "version": "2.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -68,12 +68,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.18.6"
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -119,13 +120,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.0.tgz",
-      "integrity": "sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.19.0",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -244,9 +246,9 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
-      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -265,25 +267,25 @@
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
-      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.18.10",
-        "@babel/types": "^7.19.0"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -412,30 +414,30 @@
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz",
-      "integrity": "sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -480,13 +482,13 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.18.6",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       },
       "engines": {
@@ -494,9 +496,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.1.tgz",
-      "integrity": "sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1673,34 +1675,34 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
-      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.1.tgz",
-      "integrity": "sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.19.0",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.19.1",
-        "@babel/types": "^7.19.0",
-        "debug": "^4.1.0",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -1708,13 +1710,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz",
-      "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.18.10",
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -3501,9 +3503,9 @@
     },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
-      "version": "15.10.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
-      "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
+      "version": "15.11.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
       "dev": true,
       "dependencies": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -3520,6 +3522,9 @@
         "cache-loader": {
           "optional": true
         },
+        "prettier": {
+          "optional": true
+        },
         "vue-template-compiler": {
           "optional": true
         }
@@ -4359,9 +4364,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
+      "version": "1.0.30001589",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001589.tgz",
+      "integrity": "sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==",
       "dev": true,
       "funding": [
         {
@@ -7085,9 +7090,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true,
       "funding": [
         {
@@ -8897,9 +8902,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -9525,9 +9536,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
       "funding": [
         {
           "type": "opencollective",
@@ -9536,10 +9547,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -12891,12 +12906,13 @@
       }
     },
     "@babel/code-frame": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.18.6"
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
       }
     },
     "@babel/compat-data": {
@@ -12929,13 +12945,14 @@
       }
     },
     "@babel/generator": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.0.tgz",
-      "integrity": "sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.19.0",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
       },
       "dependencies": {
@@ -13023,9 +13040,9 @@
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
-      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true
     },
     "@babel/helper-explode-assignable-expression": {
@@ -13038,22 +13055,22 @@
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
-      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.18.10",
-        "@babel/types": "^7.19.0"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-member-expression-to-functions": {
@@ -13149,24 +13166,24 @@
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.22.5"
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz",
-      "integrity": "sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "dev": true
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "dev": true
     },
     "@babel/helper-validator-option": {
@@ -13199,20 +13216,20 @@
       }
     },
     "@babel/highlight": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.18.6",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.1.tgz",
-      "integrity": "sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A=="
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -13996,42 +14013,42 @@
       }
     },
     "@babel/template": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
-      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9"
       }
     },
     "@babel/traverse": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.1.tgz",
-      "integrity": "sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.19.0",
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.19.1",
-        "@babel/types": "^7.19.0",
-        "debug": "^4.1.0",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz",
-      "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-string-parser": "^7.18.10",
-        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -15476,9 +15493,9 @@
       "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
     },
     "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
-      "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
+      "version": "npm:vue-loader@15.11.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
       "dev": true,
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -16136,9 +16153,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
+      "version": "1.0.30001589",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001589.tgz",
+      "integrity": "sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -18134,9 +18151,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true
     },
     "fork-ts-checker-webpack-plugin": {
@@ -19476,9 +19493,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -19948,11 +19965,11 @@
       }
     },
     "postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }

From 49dd7c22272b253bf3d41d6aadd81140a9700053 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Tue, 27 Feb 2024 06:22:54 +0100
Subject: [PATCH 16/17] bump version of feature branch to v2.2

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7973427..c848302 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # easyNWK Version History
 
+## version 2.2.0, released xx xxx 2024
+
+* (feature) make the web app multi-linugal [#83](https://github.com/fhstp/easynwk-web/issues/83)
+
 ## 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)
diff --git a/package.json b/package.json
index e221968..f096388 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",

From b6e5fd75b318d0c6ea3c45f1cd2115a51f6f5c32 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Sat, 2 Mar 2024 12:13:45 +0100
Subject: [PATCH 17/17] =?UTF-8?q?=C3=9Cbersetzung=20f=C3=BCr=20Karten=20un?=
 =?UTF-8?q?d=20Verl=C3=A4ufe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComparisonOptionsPanel.vue | 32 ++++++++++++++---------
 src/de.ts                                 | 11 ++++++++
 src/en.ts                                 | 11 ++++++++
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
index e11ac57..6db5b9c 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 Verlauf</span>
+      <span>{{ t("versiontitle") }}</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" />
@@ -17,10 +17,10 @@
           <div id="record-settings" class="field" v-if="isOpen">
             <div class="control">
               <div class="field is-horizontal">
-                Aktuelle Karte:&nbsp;
+                {{ t("currentversion") }}
                 <span v-if="versions.length && currentVersion >= 0">
                   {{ visibleNWKVersion?.title || "" }}
-                  vom
+                  {{ t("versionfrom") }}
                   <!-- TODO use internationalizable date formater -->
                   {{
                     visibleNWKVersion?.date?.substring(8, 10) +
@@ -54,7 +54,7 @@
                   <span class="icon">
                     <font-awesome-icon icon="plus-circle" />
                   </span>
-                  <span>Neue leere Karte</span>
+                  <span>{{ t("newemptyversion") }}</span>
                   <span></span>
                 </button>
 
@@ -67,14 +67,14 @@
                   <span class="icon">
                     <font-awesome-icon icon="copy" />
                   </span>
-                  <span>Karte duplizieren</span>
+                  <span>{{ t("duplicateversion") }}</span>
                 </button>
 
                 <button class="button" @click.stop="toggleChange">
                   <span class="icon">
                     <font-awesome-icon icon="exchange-alt" />
                   </span>
-                  <span>Karte wechseln</span>
+                  <span>{{ t("changeversion") }}</span>
                 </button>
 
                 <!-- TODO hide comparison button in the production code in main branch
@@ -90,7 +90,7 @@
               <div v-if="newVersion">
                 <div class="field is-horizontal">
                   <div class="field-label is-normal">
-                    <label class="label">Titel</label>
+                    <label class="label">{{ t("title") }}</label>
                   </div>
                   <div class="field-body">
                     <div class="field">
@@ -98,7 +98,7 @@
                         <input
                           class="input"
                           type="text"
-                          placeholder="Titel der aktuellen Version"
+                          :placeholder="t('titleplaceholder')"
                           v-model="newVersionTitle"
                         />
                       </div>
@@ -110,7 +110,7 @@
 
                 <div class="field is-horizontal">
                   <div class="field-label is-normal">
-                    <label class="label">Datum</label>
+                    <label class="label">{{ t("date") }}</label>
                   </div>
                   <div class="field-body">
                     <div class="field">
@@ -133,7 +133,7 @@
                     @click="addNewVersion()"
                     @click.stop="(newVersion = false), (firstCreation = false)"
                   >
-                    <span>Speichern</span>
+                    <span>{{ t("save") }}</span>
                   </button>
 
                   <button
@@ -143,7 +143,7 @@
                     @click.stop="(newVersion = false), (firstCreation = false)"
                   >
                     <!-- TODO Abbrechen does not clear the refs used in the text fields -->
-                    <span>Abbrechen</span>
+                    <span>{{ t("cancel") }}</span>
                   </button>
 
                   <!-- TODO move state updates into handler functions? -->
@@ -154,7 +154,7 @@
                     @click.stop="newVersion = false"
                     :disabled="versions.length <= 1"
                   >
-                    <span>Karte Löschen</span>
+                    <span>{{ t("deleteversion") }}</span>
                   </button>
                 </div>
               </div>
@@ -170,6 +170,8 @@
 import { defineComponent, ref, computed, watch } from "vue";
 import { useStore } from "@/store";
 import { NWKVersion } from "@/data/NWKVersion";
+import de from "@/de";
+import en from "@/en";
 
 //type InputType = HTMLInputElement | HTMLTextAreaElement;
 
@@ -182,6 +184,12 @@ export default defineComponent({
     },
   },
    */
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
   setup() {
     const store = useStore();
 
diff --git a/src/de.ts b/src/de.ts
index b7354b4..19b0993 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -179,6 +179,17 @@ export default {
         network_without_professional_help: "Netzwerk ohne prof. Hilfe",
         entire_network: "gesamtes Netzwerk",
         lang: "de",
+        //Karten und Verläufe:
+        versiontitle: "Karten und Verläufe",
+        currentversion: "Aktuelle Karte: ",
+        versionfrom: " vom ",
+        newemptyversion: "Neue leere Karte",
+        duplicateversion: "Karte duplizieren",
+        changeversion: "Karte wechseln",
+        title: "Titel",
+        date: "Datum",
+        deleteversion: "Karte löschen",
+        titleplaceholder: "Titel der aktuellen Version",
       },
     };
   },
diff --git a/src/en.ts b/src/en.ts
index d0bf5e4..4123429 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -177,6 +177,17 @@ export default {
         network_without_professional_help: "Network without Professional Help",
         entire_network: "Entire Network",
         lang: "en",
+        //Karten und Verläufe:
+        versiontitle: "Maps and versions",
+        currentversion: "Current map:  ",
+        versionfrom: " from ",
+        newemptyversion: "New empty map",
+        duplicateversion: "Duplicate map",
+        changeversion: "Change map",
+        title: "Title",
+        date: "Date",
+        deleteversion: "Delete map",
+        titleplaceholder: "Title of the current version",
       },
     };
   },