@@ -137,42 +134,33 @@
- Beziehung
+ {{
+ t("relationship")
+ }}
@@ -202,7 +190,7 @@
ref="domButton"
:disabled="invalidName || invalidPosition"
>
- {{ addingNewAlter ? "Nächster Kontakt" : "Schließen" }}
+ {{ addingNewAlter ? t("nextcontact") : t("close") }}
@@ -213,7 +201,7 @@
type="button"
@mouseup.prevent="editAlterFinished($event, false)"
>
- Schließen
+ {{ t("close") }}
@@ -223,7 +211,7 @@
type="button"
@mouseup.prevent="cancelAddAlter"
>
- Abbrechen
+ {{ t("cancel") }}
@@ -236,9 +224,11 @@ 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";
+import en from "@/en";
type InputType = HTMLInputElement | HTMLTextAreaElement;
@@ -249,6 +239,16 @@ type InputType = HTMLInputElement | HTMLTextAreaElement;
// emit edit-finished
export default defineComponent({
+ mixins: [de, en],
+ methods: {
+ 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
alter: {
@@ -263,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);
@@ -315,12 +317,34 @@ 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 =
+ document.documentElement.lang == "de"
+ ? roleOptions.value
+ : engRoleOptions.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 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
("role");
+
const invalidName = computed(() => {
return alterNameInUI.value.trim().length === 0;
});
@@ -328,6 +352,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 | null>(null);
@@ -403,6 +428,8 @@ export default defineComponent({
return {
addingNewAlter,
alterNameInUI,
+ alterRole,
+ localizedRole,
invalidName,
invalidPosition,
alterHuman: accessor("human"),
@@ -415,6 +442,7 @@ export default defineComponent({
blurRole,
genderOptions,
roleOptions,
+ engRoleOptions,
editAlterFinished,
cancelAddAlter,
altername,
diff --git a/src/components/AlteriPanel.vue b/src/components/AlteriPanel.vue
index 04089d4..47c29fa 100644
--- a/src/components/AlteriPanel.vue
+++ b/src/components/AlteriPanel.vue
@@ -1,11 +1,11 @@
- Kontakte
+ {{ t("contacts") }}
@@ -21,12 +21,12 @@
- Noch keine Kontakte vorhanden.
- Symbol, um Kontakte in der Netzwerkkarte anzulegen.
+ {{ t("nocontactsyet3") }}
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,17 @@ 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) {
+ 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/components/AlteriPanelEntry.vue b/src/components/AlteriPanelEntry.vue
index 2174087..49d9fb2 100644
--- a/src/components/AlteriPanelEntry.vue
+++ b/src/components/AlteriPanelEntry.vue
@@ -8,18 +8,18 @@
}"
v-on:click="toggleSelection()"
>
- {{ displayName }}
- / {{ alter.age + " " }}
- / {{ alter.role }}
+
+ {{ displayName }}
+ / {{ alter.age + " " }}
+
+ / {{ getTranslatedRole(alter.role) }}
+
+
@@ -28,7 +28,7 @@
@@ -38,7 +38,7 @@
@@ -66,9 +66,44 @@ 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";
+import roles from "@/data/roles_en.json";
export default defineComponent({
+ mixins: [de, en],
+ methods: {
+ 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 () => {
+ 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;
+ }
+ };
+ },
+ },
+
props: {
// gets Alter as prop cp. ToDo demo
alter: {
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"
>
- Karten und Verlauf
+ {{ t("versiontitle") }}
- Aktuelle Karte:
+ {{ t("currentversion") }}
{{ visibleNWKVersion?.title || "" }}
- vom
+ {{ t("versionfrom") }}
{{
visibleNWKVersion?.date?.substring(8, 10) +
@@ -54,7 +54,7 @@
- Neue leere Karte
+ {{ t("newemptyversion") }}
- Karte duplizieren
+ {{ t("duplicateversion") }}
- Karte wechseln
+ {{ t("changeversion") }}
- Abbrechen
+ {{ t("cancel") }}
@@ -154,7 +154,7 @@
@click.stop="newVersion = false"
:disabled="versions.length <= 1"
>
- Karte Löschen
+ {{ t("deleteversion") }}
@@ -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/components/EgoEditForm.vue b/src/components/EgoEditForm.vue
index 654f1cb..9d3fc70 100644
--- a/src/components/EgoEditForm.vue
+++ b/src/components/EgoEditForm.vue
@@ -1,12 +1,12 @@
- Ankerperson
+ {{ t("ego") }}
- Geschlecht
+ {{ t("genders") }}
-
- {{ value }}
+ {{ t("female") }}
+ {{ t("male") }}
+ {{ t("diverse") }}
+
+ {{ t("notspecified") }}
@@ -45,7 +48,7 @@
- Alter
+ {{ t("age") }}
@@ -68,7 +71,7 @@
class="textarea is-small"
:value="$store.state.nwk.ego.note"
@blur="commitEdit($event, 'note')"
- placeholder="Notizen zum Kontakt"
+ :placeholder="t('notesaboutego')"
>
@@ -76,7 +79,7 @@
- Schließen
+ {{ t("done") }}
@@ -90,10 +93,18 @@ 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) {
+ 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..e490130 100644
--- a/src/components/EgoHeader.vue
+++ b/src/components/EgoHeader.vue
@@ -1,13 +1,13 @@
- Ankerperson:
+ {{ t("ego") }}:
{{ displayName }}
/ {{ egoAge }}
@@ -20,9 +20,17 @@