Admin UI updated, internationalization added (partially).

Author: riclolsen

src/htdocs-admin/src/components/AppNavigation.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <v-navigation-drawer
+       <v-navigation-drawer
       app
       v-model="drawer"
       class="primary lighten-2"
@@ -18,31 +18,33 @@
         </template>
       </v-list>
     </v-navigation-drawer>
-    <v-app-bar color="primary darken-4" dark>
+    <v-app-bar color="primary darken-4" dark dense>
       <v-app-bar-nav-icon
         class="hidden-md-and-up"
         @click="drawer = !drawer"
       ></v-app-bar-nav-icon>
       <v-spacer class="hidden-md-and-up"></v-spacer>
-      <img alt="Vue logo" height="50px" src="../assets/json-scada.svg" />
+      <img alt="{json-scada}" height="36px" src="../assets/json-scada.svg" />
       <v-spacer></v-spacer>
-      <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
+      <v-toolbar-title>{{ msg.appTitle }}</v-toolbar-title>
       <v-spacer class="hidden-sm-and-down"></v-spacer>
       <v-btn text class="hidden-sm-and-down" @click="logout($event)"
-        >LOGOUT <v-icon>mdi-logout</v-icon>
+        >{{ msg.logout }} <v-icon>mdi-logout</v-icon>
       </v-btn>
     </v-app-bar>
   </span>
 </template>
 
 <script>
+import i18n from "@/i18n/i18n-current";
+
 export default {
   name: "AppNavigation",
   data() {
     return {
-      appTitle: "Admin Management",
+      msg: { ...i18n },
+      items: [{ title: i18n.logout }],
       drawer: false,
-      items: [{ title: "Logout" }],
     };
   },
   methods: {
@@ -62,7 +64,7 @@ export default {
           console.log("Error on a fetch operation: " + error.message);
         })
         .finally(() => {
-            window.location="/login/login.html"
+          window.location = "/login/login.html";
         });
     },
   },

src/htdocs-admin/src/components/ProtocolConnections.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-row class="pa-4" justify="space-between">
-      <v-col cols="5">
+      <v-col>
         <v-treeview
           style="max-height: 500px;min-width: 250px"
           class="overflow-y-auto overflow-x-hidden"
@@ -1933,12 +1933,13 @@
 </template>
 
 <script>
-// const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+import i18n from "@/i18n/i18n-current";
 
 export default {
   name: "ProtocolConnections",
 
   data: () => ({
+    msg: { ...i18n },
     itemsSizeOfCOT: [1, 2],
     itemsSizeOfCA: [1, 2],
     itemsSizeOfIOA: [1, 2, 3],

src/htdocs-admin/src/components/ProtocolDriverInstances.vue

@@ -1,8 +1,8 @@
 <template>
   <v-card>
     <v-row class="pa-4" justify="space-between">
-      <v-col cols="5">
-        <v-treeview style="max-height: 500px" class="overflow-y-auto overflow-x-hidden" 
+      <v-col>
+        <v-treeview style="max-height: 500px;min-width: 250px" class="overflow-y-auto overflow-x-hidden" 
           :active.sync="active"
           :items="items"
           :load-children="fetchDriverInstances"
@@ -45,17 +45,17 @@
             v-else
             :key="selected.id"
             class="pt-6 mx-auto"
-            flat
-            max-width="440"
+            flat            
           >
-            <v-row class="pb-8 mx-auto" justify="space-between">
+            <v-row min-width="500px" class="mx-auto" justify="space-between">
               <v-select
                 prepend-inner-icon="mdi-cogs"
                 :items="driverNameItems"
                 label="Protocol driver"
                 v-model="selected.protocolDriver"
                 outlined
                 @change="updateProtocolDriverInstance"
+                full-width
               ></v-select>
 
               <v-tooltip bottom>
@@ -75,13 +75,7 @@
                 </template>
                 <span>Delete driver instance!</span>
               </v-tooltip>
-              <v-switch
-                v-model="selected.enabled"
-                inset
-                color="primary"
-                :label="`Enabled: ${selected.enabled.toString()}`"
-                @change="updateProtocolDriverInstance"
-              ></v-switch>
+
               <v-dialog v-model="dialogDelInst" max-width="290">
                 <v-card>
                   <v-card-title class="headline">
@@ -114,6 +108,14 @@
               </v-dialog>
             </v-row>
 
+            <v-switch
+              v-model="selected.enabled"
+              inset
+              color="primary"
+              :label="`Enabled: ${selected.enabled.toString()}`"
+              @change="updateProtocolDriverInstance"
+            ></v-switch>
+
             <v-text-field
               class="pb-8"
               prepend-inner-icon="mdi-play-circle"
@@ -211,12 +213,13 @@
 </template>
 
 <script>
-// const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+import i18n from "@/i18n/i18n-current";
 
 export default {
   name: "ProtocolDriversInstances",
 
   data: () => ({
+    msg: { ...i18n },
     dialogAddNode: false,
     dialogDelInst: false,
     active: [],