Add language support

build-tools/fetch-schemas-plugin.ts

@@ -19,27 +19,29 @@ function sha256(data: string): string {
 }
 
 export function fetchRemoteSchemas() {
-  remoteSchemas.forEach(async (schema) => {
-    if (!fs.existsSync(`./public/schemas/${schema.name}.json`)) {
-      const fetchedSchemaYAML = await fetch(schema.url).then((res) =>
-        res.text(),
-      );
-      const fetchedSchemaHash = sha256(fetchedSchemaYAML);
-      if (fetchedSchemaHash !== schema.hash) {
-        throw new Error(
-          `Schema hash mismatch for ${schema.url}. Expected: ${schema.hash}, got: ${fetchedSchemaHash}`,
+  remoteSchemas.forEach((schema) => {
+    void (async () => {
+      if (!fs.existsSync(`./public/schemas/${schema.name}.json`)) {
+        const fetchedSchemaYAML = await fetch(schema.url).then((res) =>
+          res.text(),
         );
-      }
-      const schemaJSON = yaml.load(fetchedSchemaYAML);
+        const fetchedSchemaHash = sha256(fetchedSchemaYAML);
+        if (fetchedSchemaHash !== schema.hash) {
+          throw new Error(
+            `Schema hash mismatch for ${schema.url}. Expected: ${schema.hash}, got: ${fetchedSchemaHash}`,
+          );
+        }
+        const schemaJSON = yaml.load(fetchedSchemaYAML);
 
-      schema.hash = fetchedSchemaHash;
-      fs.mkdirSync("./public/schemas", { recursive: true });
-      fs.writeFileSync(
-        `./public/schemas/${schema.name}.json`,
-        JSON.stringify(schemaJSON),
-      );
+        schema.hash = fetchedSchemaHash;
+        fs.mkdirSync("./public/schemas", { recursive: true });
+        fs.writeFileSync(
+          `./public/schemas/${schema.name}.json`,
+          JSON.stringify(schemaJSON),
+        );
 
-      console.log(`${schema.url} fetched and cached successfully.`);
-    }
+        console.log(`${schema.url} fetched and cached successfully.`);
+      }
+    })();
   });
 }

package.json

@@ -37,6 +37,7 @@
     "splitpanes": "4.0.4",
     "vee-validate": "4.15.1",
     "vue": "3.5.18",
+    "vue-i18n": "^11.1.12",
     "vue-router": "4.5.1",
     "vue-tsc": "3.0.5",
     "vuetify": "3.7.19"
@@ -63,7 +64,7 @@
     "prettier": "3.6.2",
     "sass": "1.89.2",
     "typescript": "5.5.4",
-    "vite": "7.0.6",
+    "vite": "7.2.1",
     "vite-plugin-pwa": "1.0.1",
     "vite-plugin-vuetify": "2.1.1",
     "vitest": "3.2.4",

src/components/CreateConfig.vue

@@ -15,7 +15,7 @@
           @click="uploadConfigPrompt()"
         />
       </template>
-      <span>Upload Config</span>
+      <span>{{ t("createConfig.uploadConfigTooltip") }}</span>
     </v-tooltip>
     <v-tooltip v-if="state == ComponentStates.DEFAULT" location="right" open-delay="500">
       <template #activator="{ props }">
@@ -29,7 +29,7 @@
           @click="state = ComponentStates.ASK_USER_FOR_CONFIG_NAME"
         />
       </template>
-      <span>Create Config</span>
+      <span>{{ t("createConfig.createConfigTooltip") }}</span>
     </v-tooltip>
     <v-tooltip v-if="state == ComponentStates.ASK_USER_FOR_CONFIG_NAME" location="right" open-delay="500">
       <template #activator="{ props }">
@@ -43,7 +43,7 @@
           @click="resetDialog()"
         />
       </template>
-      <span>Abort</span>
+      <span>{{ t("createConfig.abortTooltip") }}</span>
     </v-tooltip>
     <v-tooltip v-if="state == ComponentStates.ASK_USER_FOR_CONFIG_NAME" location="right" open-delay="500">
       <template #activator="{ props }">
@@ -58,25 +58,25 @@
           @click="onAcceptBtnClick()"
         />
       </template>
-      <span>Create Config</span>
+      <span>{{ t("createConfig.createConfigTooltip") }}</span>
     </v-tooltip>
   </div>
   <v-text-field
     v-if="state === ComponentStates.ASK_USER_FOR_CONFIG_NAME"
     v-model="configName"
     density="compact"
     data-cy="config-name-input"
-    placeholder="config name"
+    :placeholder="t('createConfig.configNamePlaceholder')"
     :rules="[validateConfigName]"
   />
   <v-dialog v-model="showErrorDialog" @click:outside="resetDialog()">
     <v-card color="danger">
-      <v-card-title>Couldn't load config</v-card-title>
+      <v-card-title>{{ t("createConfig.errorDialogTitle") }}</v-card-title>
       <v-card-text>
         <pre style="white-space: pre-wrap"><code>{{ errorStore.getError() }}</code></pre>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="primary" @click="resetDialog()"> OK </v-btn>
+        <v-btn color="primary" @click="resetDialog()">{{ t("createConfig.errorDialogOk") }}</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -91,6 +91,9 @@ import Ajv from "ajv";
 import { EverestConfig } from "@/modules/evbc";
 import { urlToPublicAsset } from "@/utils";
 import { useErrorStore } from "@/store/errorStore";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 enum ComponentStates {
   DEFAULT,
@@ -155,13 +158,13 @@ function uploadConfigPrompt() {
  */
 function validateConfigName() {
   if (configName.value.trim().length === 0) {
-    return "Please enter a name";
+    return t("createConfig.validateConfigNameMissing");
   } else if (/.*(\.json|\.ya?ml)$/.test(configName.value)) {
-    return "The name must not contain the file extension";
+    return t("createConfig.validateConfigNameFileExtension");
   } else if (!/^[a-zA-Z0-9-_]+$/.test(configName.value)) {
-    return "The name must only contain letters, numbers, dashes and underscores";
+    return t("createConfig.validateConfigNameCharacters");
   } else if (Object.keys(available_configs.value).includes(configName.value.trim())) {
-    return "The name must be unique";
+    return t("createConfig.validateConfigNameUnique");
   } else {
     return true;
   }

src/components/EvConfigCanvas.vue

@@ -17,21 +17,21 @@
                 icon="mdi-code-tags"
               />
             </template>
-            <span>Show config preview</span>
+            <span>{{ t("evConfigCanvas.showConfigPreviewTooltip") }}</span>
           </v-tooltip>
         </template>
       </config-preview>
       <v-tooltip location="left">
         <template #activator="{ props }">
           <v-btn id="reset-view-button" icon="mdi-undo" color="primary" v-bind="props" @click="reset_view" />
         </template>
-        <span>Reset View</span>
+        <span>{{ t("evConfigCanvas.resetViewTooltip") }}</span>
       </v-tooltip>
       <v-tooltip v-if="current_config" location="left">
         <template #activator="{ props }">
           <v-btn id="config-save-button" icon="mdi-content-save" color="primary" v-bind="props" @click="save_config" />
         </template>
-        <span>Save Config</span>
+        <span>{{ t("evConfigCanvas.saveConfigTooltip") }}</span>
       </v-tooltip>
     </div>
   </v-sheet>
@@ -46,6 +46,7 @@ import EVBackendClient from "@/modules/evbc/client";
 import { Notyf } from "notyf";
 import ConfigPreview from "@/components/ConfigPreview.vue";
 import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   components: { ConfigPreview },
@@ -55,6 +56,7 @@ export default defineComponent({
     const selected_interface: string | null = null;
     const notyf = inject<Notyf>("notyf");
     const { current_config: current_config } = storeToRefs(evbcStore);
+    const { t } = useI18n({ useScope: "global" });
 
     ref(false);
 
@@ -89,10 +91,12 @@ export default defineComponent({
       evbc
         .save_config(current_config.value)
         .then(() => {
-          notyf.success(`Successfully saved ${current_config.value._name}`);
+          notyf.success(t("evConfigCanvas.successfullySavedNotification", { config: current_config.value._name }));
         })
         .catch((error: string) => {
-          notyf.error(`Failed to save ${current_config.value._name}\nReason: ${error}`);
+          notyf.error(
+            t("evConfigCanvas.failedToSaveNotification", { config: current_config.value._name, error: error }),
+          );
         });
     };
 
@@ -110,6 +114,7 @@ export default defineComponent({
       current_config,
       reset_view,
       save_config,
+      t,
     };
   },
 });