Fixing language issues and refactoring LanguageSelector into an exter…

…nal vue file

Signed-off-by: julianbollig <[email protected]>

WebUI/src/assets/i18n/en-US.json

@@ -209,9 +209,18 @@
   "BACKEND_INFORMATION": "Information",
   "BACKEND_ENABLE": "Enable *",
   "BACKEND_ACTION": "Action",
+  "BACKEND_REQUIRED": "Required",
+  "BACKEND_OPTIONAL": "Optional",
   "BACKEND_REQUIRED_COMPONENTS_MESSAGE": "Before you can use the Intel AI Playground, we need to download some additional components. Please make sure you have a stable and unmetered internet connection.",
   "BACKEND_OPTIONAL_COMPONENTS_MESSAGE": "Optional components are not required for AI-Playground to work, but provide alternative functions. If you want to use them please click the info buttons to familiarize yourself with their terms and conditions before activating them.",
   "BACKEND_TERMS_AND_CONDITIONS": "* I have reviewed the optional component. I agree to all terms and conditions and would like to download and enable third-party software if applicable.",
+  "BACKEND_STATUS_RUNNING": "Running",
+  "BACKEND_STATUS_STOPPING": "Stopping",
+  "BACKEND_STATUS_STARTING": "Starting",
+  "BACKEND_STATUS_INSTALLED": "Installed",
+  "BACKEND_STATUS_NOT_INSTALLED": "Not Installed",
+  "BACKEND_STATUS_INSTALLING": "Installing",
+  "BACKEND_STATUS_FAILED": "Failed",
   "SETTINGS_IMAGE_MODE": "Mode",
   "SETTINGS_IMAGE_WORKFLOW": "Workflow",
   "WORKFLOW_RELOAD_INFO": "Reload workflows from disk.",

WebUI/src/components/DropSelector.vue

@@ -2,7 +2,7 @@
     <button ref="root" class="v-drop-select" :class="class" :disabled="props.disabled" @click="showList">
         <p class="v-drop-select-result">
             <span class="v-drop-select-text">
-                <slot name="selected">{{ props.value == null ? i18NSate.COM_NO_SELECTED : props.value }}</slot>
+                <slot name="selected">{{ props.value == null ? languages.COM_NO_SELECTED : props.value }}</slot>
             </span>
             <span class="v-drop-toggle"></span>
         </p>
@@ -17,9 +17,7 @@
     </Teleport>
 </template>
 <script setup lang="ts">
-import { useI18N } from '@/assets/js/store/i18n.ts';
 
-const i18NSate = useI18N().state;
 const props = defineProps<{
     array: Array<any>,
     value?: any,

WebUI/src/components/InstallationManagement.vue

@@ -20,7 +20,7 @@
           <tbody>
           <tr v-for="component in components">
             <td class="text-left">{{ mapServiceNameToDisplayName(component.serviceName) }}</td>
-            <td class="text-center">{{ component.isRequired ? "Required" : "Optional" }}</td>
+            <td class="text-center">{{ component.isRequired ? languages.BACKEND_REQUIRED : languages.BACKEND_OPTIONAL }}</td>
             <td>
               <a :href="getInfoURL(component.serviceName)" target="_blank">
               <span v-show="!!getInfoURL(component.serviceName)" style="vertical-align: middle;"
@@ -93,51 +93,32 @@
           }}
         </button>
       </div>
-
       <!-- terms and conditions -->
       <div class="dialog-container z-10 pt-10" style="display: flex">
         <p>{{ languages.BACKEND_TERMS_AND_CONDITIONS }}</p>
       </div>
       <!-- Change Language Settings -->
       <div class="place-content-end flex gap-2">
-        <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage" class="max-w-40">
-          <template #selected>
-            <div class="flex gap-2 items-center">
-              <span class="rounded-full bg-green-500 w-2 h-2"></span>
-              <span>{{ i18n.currentLanguageName }}</span>
-            </div>
-          </template>
-          <template #list="slotItem">
-            <div class="flex gap-2 items-center">
-              <span class="rounded-full bg-green-500 w-2 h-2"></span>
-              <span>{{ slotItem.item.name }}</span>
-            </div>
-          </template>
-        </drop-selector>
+        <LanguageSelector class="max-w-40"></LanguageSelector>
         <button @click="openDebug" class="v-radio-block">{{ languages.COM_DEBUG }}</button>
       </div>
     </div>
   </div>
-
-
 </template>
 
 <script setup lang="ts">
 import {mapServiceNameToDisplayName, mapStatusToColor, mapToDisplayStatus} from "@/lib/utils.ts";
 import {toast} from "@/assets/js/toast.ts";
 import {useBackendServices} from '@/assets/js/store/backendServices';
-import DropSelector from "@/components/DropSelector.vue";
-import {useI18N} from '@/assets/js/store/i18n';
+import LanguageSelector from "@/components/LanguageSelector.vue";
 
 const emits = defineEmits<{
   (e: "close"): void
 }>();
 
-
 type ExtendedApiServiceInformation = ApiServiceInformation & { enabled: boolean, isLoading: boolean }
 
 const backendServices = useBackendServices();
-const i18n = useI18N();
 
 let toBeInstalledQueue: ExtendedApiServiceInformation[] = []
 

WebUI/src/components/LanguageSelector.vue

@@ -0,0 +1,24 @@
+<template>
+  <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
+    <template #selected>
+      <div class="flex gap-2 items-center">
+        <span class="rounded-full bg-green-500 w-2 h-2"></span>
+        <span>{{ i18n.currentLanguageName }}</span>
+      </div>
+    </template>
+    <template #list="slotItem">
+      <div class="flex gap-2 items-center">
+        <span class="rounded-full bg-green-500 w-2 h-2"></span>
+        <span>{{ slotItem.item.name }}</span>
+      </div>
+    </template>
+  </drop-selector>
+</template>
+
+<script setup lang="ts">
+
+import DropSelector from "../components/DropSelector.vue";
+import {useI18N} from '@/assets/js/store/i18n';
+const i18n = useI18N();
+
+</script>

WebUI/src/components/SettingsBasic.vue

@@ -3,20 +3,7 @@
     <h2 class="text-center font-bold">{{ languages.SETTINGS_BASIC_GENERAL }}</h2>
     <div class="flex flex-col gap-2">
       <p>{{ languages.SETTINGS_BASIC_LANGUAGE }}</p>
-      <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
-        <template #selected>
-          <div class="flex gap-2 items-center">
-            <span class="rounded-full bg-green-500 w-2 h-2"></span>
-            <span>{{ i18n.currentLanguageName }}</span>
-          </div>
-        </template>
-        <template #list="slotItem">
-          <div class="flex gap-2 items-center">
-            <span class="rounded-full bg-green-500 w-2 h-2"></span>
-            <span>{{ slotItem.item.name }}</span>
-          </div>
-        </template>
-      </drop-selector>
+      <LanguageSelector></LanguageSelector>
     </div>
     <div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
       <p>Theme</p>
@@ -79,7 +66,6 @@
     </div>
     <div class="flex flex-col gap-3">
       <p>{{ languages.SETTINGS_BACKEND_STATUS }}</p>
-      <!--   Required   -->
       <table class="text-center w-full mx-2 table-fixed">
         <tbody>
         <tr v-for="item in displayComponents">
@@ -105,16 +91,16 @@ import DropSelector from "../components/DropSelector.vue";
 import RadioBlock from "../components/RadioBlock.vue";
 
 import {useGlobalSetup} from "@/assets/js/store/globalSetup";
-import {useI18N} from '@/assets/js/store/i18n';
+
 import {useTheme} from '@/assets/js/store/theme';
 import {useTextInference, backendTypes, Backend} from "@/assets/js/store/textInference";
 import {mapServiceNameToDisplayName, mapStatusToColor, mapToDisplayStatus} from "@/lib/utils.ts";
 import {useBackendServices} from "@/assets/js/store/backendServices.ts";
+import LanguageSelector from "@/components/LanguageSelector.vue";
 
 const globalSetup = useGlobalSetup();
 const textInference = useTextInference();
 const backendServices = useBackendServices();
-const i18n = useI18N();
 const theme = useTheme();
 
 const textInferenceBackendDisplayName: Record<typeof backendTypes[number], string> = {

WebUI/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import {useI18N} from "@/assets/js/store/i18n.ts";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -27,23 +28,24 @@ export function mapStatusToColor(componentState: BackendStatus) {
 }
 
 export function mapToDisplayStatus(componentState: BackendStatus) {
+  const i18nState = useI18N().state;
   switch (componentState) {
     case "running":
-      return "Running"
+      return i18nState.BACKEND_STATUS_RUNNING
     case "stopping":
-      return "Stopping"
+      return i18nState.BACKEND_STATUS_STOPPING
     case "starting":
-        return "Starting"
+        return i18nState.BACKEND_STATUS_STARTING
     case "stopped":
     case "notYetStarted":
-      return "Installed"
+      return i18nState.BACKEND_STATUS_INSTALLED
     case "installationFailed":
     case "failed":
-      return "Failed"
+      return i18nState.BACKEND_STATUS_FAILED
     case "notInstalled":
-      return "Not Installed"
+      return i18nState.BACKEND_STATUS_NOT_INSTALLED
     case "installing":
-      return "Installing"
+      return i18nState.BACKEND_STATUS_INSTALLING
     default:
       return componentState
   }