Add Translation keys (#506)

backend/agent-socket-handlers/docker-socket-handler.ts

@@ -17,6 +17,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 callbackResult({
                     ok: true,
                     msg: "Deployed",
+                    msgi18n: true,
                 }, callback);
                 stack.joinCombinedTerminal(socket);
             } catch (e) {
@@ -30,7 +31,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await this.saveStack(server, name, composeYAML, composeENV, isAdd);
                 callbackResult({
                     ok: true,
-                    "msg": "Saved"
+                    msg: "Saved",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
             } catch (e) {
@@ -56,7 +58,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 server.sendStackList();
                 callbackResult({
                     ok: true,
-                    msg: "Deleted"
+                    msg: "Deleted",
+                    msgi18n: true,
                 }, callback);
 
             } catch (e) {
@@ -94,7 +97,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 server.sendStackList();
                 callbackResult({
                     ok: true,
-                    msg: "Updated"
+                    msg: "Updated",
+                    msgi18n: true,
                 }, callback);
             } catch (e) {
                 callbackError(e, callback);
@@ -114,7 +118,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await stack.start(socket);
                 callbackResult({
                     ok: true,
-                    msg: "Started"
+                    msg: "Started",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
 
@@ -138,7 +143,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await stack.stop(socket);
                 callbackResult({
                     ok: true,
-                    msg: "Stopped"
+                    msg: "Stopped",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
             } catch (e) {
@@ -159,7 +165,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await stack.restart(socket);
                 callbackResult({
                     ok: true,
-                    msg: "Restarted"
+                    msg: "Restarted",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
             } catch (e) {
@@ -180,7 +187,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await stack.update(socket);
                 callbackResult({
                     ok: true,
-                    msg: "Updated"
+                    msg: "Updated",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
             } catch (e) {
@@ -201,7 +209,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
                 await stack.down(socket);
                 callbackResult({
                     ok: true,
-                    msg: "Downed"
+                    msg: "Downed",
+                    msgi18n: true,
                 }, callback);
                 server.sendStackList();
             } catch (e) {

frontend/src/components/ArraySelect.vue

@@ -4,7 +4,7 @@
             <ul v-if="isArrayInited" class="list-group">
                 <li v-for="(value, index) in array" :key="index" class="list-group-item">
                     <select v-model="array[index]" class="no-bg domain-input">
-                        <option value="">Select a network...</option>
+                        <option value="">{{ $t(`Select a network...`) }}</option>
                         <option v-for="option in options" :key="option" :value="option">{{ option }}</option>
                     </select>
 

frontend/src/components/Container.vue

@@ -116,7 +116,7 @@
                     </label>
 
                     <div v-if="networkList.length === 0 && service.networks && service.networks.length > 0" class="text-warning mb-3">
-                        No networks available. You need to add internal networks or enable external networks in the right side first.
+                        {{ $t("NoNetworksAvailable") }}
                     </div>
 
                     <ArraySelect name="networks" :display-name="$t('network')" placeholder="Network Name" :options="networkList" />
@@ -127,7 +127,7 @@
                     <label class="form-label">
                         {{ $t("dependsOn") }}
                     </label>
-                    <ArrayInput name="depends_on" :display-name="$t('dependsOn')" placeholder="Container Name" />
+                    <ArrayInput name="depends_on" :display-name="$t('dependsOn')" :placeholder="$t(`containerName`)" />
                 </div>
             </div>
         </transition>

frontend/src/components/NetworkInput.vue

@@ -3,7 +3,7 @@
         <h5>{{ $t("Internal Networks") }}</h5>
         <ul class="list-group">
             <li v-for="(networkRow, index) in networkList" :key="index" class="list-group-item">
-                <input v-model="networkRow.key" type="text" class="no-bg domain-input" placeholder="Network name..." />
+                <input v-model="networkRow.key" type="text" class="no-bg domain-input" :placeholder="$t(`Network name...`)" />
                 <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
             </li>
         </ul>

frontend/src/components/settings/General.vue

@@ -47,7 +47,7 @@
                     <input
                         v-model="settings.primaryHostname"
                         class="form-control"
-                        placeholder="(Unset: Follow current hostname)"
+                        :placeholder="$t(`CurrentHostname`)"
                     />
                     <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryHostname">
                         {{ $t("autoGet") }}

frontend/src/lang/en.json

@@ -95,6 +95,7 @@
     "reverseProxyMsg1": "Using a Reverse Proxy?",
     "reverseProxyMsg2": "Check how to config it for WebSocket",
     "Cannot connect to the socket server.": "Cannot connect to the socket server.",
+    "Lost connection to the socket server. Reconnecting...": "Lost connection to the socket server. Reconnecting...",
     "reconnecting...": "Reconnecting…",
     "connecting...": "Connecting to the socket server…",
     "url": "URL | URLs",
@@ -112,5 +113,20 @@
     "agentRemovedSuccessfully": "Agent removed successfully.",
     "removeAgent": "Remove Agent",
     "removeAgentMsg": "Are you sure you want to remove this agent?",
-    "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor."
+    "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor.",
+    "Saved": "Saved",
+    "Deployed": "Deployed",
+    "Deleted": "Deleted",
+    "Updated": "Updated",
+    "Started": "Started",
+    "Stopped": "Stopped",
+    "Restarted": "Restarted",
+    "Downed": "Downed",
+    "Switch to sh": "Switch to sh",
+    "terminal": "Terminal",
+    "CurrentHostname": "(Unset: Follow current hostname)",
+    "New Container Name...": "New Container Name...",
+    "Network name...": "Network name...",
+    "Select a network...": "Select a network...",
+    "NoNetworksAvailable": "No networks available. You need to add internal networks or enable external networks in the right side first."
 }

frontend/src/mixins/socket.ts

@@ -203,7 +203,7 @@ export default defineComponent({
 
             socket.on("disconnect", () => {
                 console.log("disconnect");
-                this.socketIO.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
+                this.socketIO.connectionErrorMsg = `${this.$t("Lost connection to the socket server. Reconnecting...")}`;
                 this.socketIO.connected = false;
             });
 

frontend/src/pages/Compose.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="slide-fade" appear>
         <div>
-            <h1 v-if="isAdd" class="mb-3">Compose</h1>
+            <h1 v-if="isAdd" class="mb-3">{{$t("compose")}}</h1>
             <h1 v-else class="mb-3">
                 <Uptime :stack="globalStack" :pill="true" /> {{ stack.name }}
                 <span v-if="$root.agentCount > 1" class="agent-name">
@@ -112,7 +112,7 @@
                     <div v-if="isEditMode" class="input-group mb-3">
                         <input
                             v-model="newContainerName"
-                            placeholder="New Container Name..."
+                            :placeholder="$t(`New Container Name...`)"
                             class="form-control"
                             @keyup.enter="addContainer"
                         />
@@ -150,7 +150,7 @@
 
                     <!-- Combined Terminal Output -->
                     <div v-show="!isEditMode">
-                        <h4 class="mb-3">Terminal</h4>
+                        <h4 class="mb-3">{{$t("terminal")}}</h4>
                         <Terminal
                             ref="combinedTerminal"
                             class="mb-3 terminal"

frontend/src/pages/ContainerTerminal.vue

@@ -1,10 +1,10 @@
 <template>
     <transition name="slide-fade" appear>
         <div>
-            <h1 class="mb-3">Terminal - {{ serviceName }} ({{ stackName }})</h1>
+            <h1 class="mb-3">{{$t("terminal")}} - {{ serviceName }} ({{ stackName }})</h1>
 
             <div class="mb-3">
-                <router-link :to="sh" class="btn btn-normal me-2">Switch to sh</router-link>
+                <router-link :to="sh" class="btn btn-normal me-2">{{ $t("Switch to sh") }}</router-link>
             </div>
 
             <Terminal class="terminal" :rows="20" mode="interactive" :name="terminalName" :stack-name="stackName" :service-name="serviceName" :shell="shell" :endpoint="endpoint"></Terminal>