fhstp · alex-rind · Apr 30, 2024 · Aug 17, 2023 · Sep 5, 2023 · Sep 5, 2023
diff --git 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-lock.json b/package-lock.json
diff --git 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/",

diff --git 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/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
@@ -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>
@@ -44,8 +44,21 @@ 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) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
+  data() {
+    return {
+      lang: "de",
+    };
+  },
   props: {
     alter: {
       type: Object,