New Admin UI. Protocol connections managemnt tab. In development.

Author: riclolsen

src/AdminUI/src/App.vue

@@ -14,9 +14,9 @@
       </v-btn>
       <v-menu v-if="loggedInUser" offset-y>
         <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" text class="ml-2" size="small">
-            {{ loggedInUser }}
+          <v-btn v-bind="props" text class="ml-2">
             <v-icon right size="small">mdi-account-circle</v-icon>
+            {{ loggedInUser }}
           </v-btn>
         </template>
         <v-list>
@@ -46,7 +46,7 @@ const vuetifyTheme = useTheme();
 const { locale, t } = useI18n();
 
 const currentLocale = ref(locale.value);
-const loggedInUser = ref(null);
+const loggedInUser = ref("?");
 
 const availableLocales = [
   { title: 'English', value: 'en' },
@@ -74,7 +74,23 @@ const setLoggedInUser = (username) => {
 
 const logout = () => {
   loggedInUser.value = null;
-  router.push('/login');
+  fetch('/Invoke/auth/signout', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.ok) {
+        router.push('/login');
+      } else {
+        console.error('Logout failed!');
+      }
+    })
+    .catch(error => {
+      console.error('Error during logout:', error);
+    });
 };
 
 watch(currentLocale, (newLocale) => {

src/AdminUI/src/components/AdminPage.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-container fluid class="admin-page">
-    <v-card class="fill-height d-flex flex-column">
+  <v-container fluid class="admin-page ma-0 pa-0">
+    <v-card class="fill-height d-flex flex-column elevation-0">
       <v-tabs v-model="activeTab" color="primary" align-tabs="center">
-        <v-tab :value="1" @click="fetchUsersAndRoles">{{
+        <v-tab :value="1" @click="fetchUsersAndRoles"><v-icon>mdi-account-multiple</v-icon> {{
           $t('admin.tabs.userManagement') }}</v-tab>
-        <v-tab :value="2" @click="fetchRoles">{{ $t('admin.tabs.rolesManagement') }}</v-tab>
-        <v-tab :value="3" @click="fetchProtocolDriverInstances">{{ $t('admin.tabs.protocolDriverInstances') }}</v-tab>
-        <v-tab :value="4">{{ $t('admin.tabs.systemSettings') }}</v-tab>
-        <v-tab :value="5">{{ $t('admin.tabs.logs') }}</v-tab>
+        <v-tab :value="2" @click="fetchRoles"><v-icon>mdi-shield-account</v-icon> {{ $t('admin.tabs.rolesManagement') }}</v-tab>
+        <v-tab :value="3" @click="fetchProtocolDriverInstances"><v-icon>mdi-cogs</v-icon> {{ $t('admin.tabs.protocolDriverInstances') }}</v-tab>
+        <v-tab :value="4" @click="fetchProtocolConnections"><v-icon>mdi-lan-connect</v-icon> {{ $t('admin.tabs.protocolConnections') }}</v-tab>
+        <v-tab :value="5"><v-icon>mdi-cog</v-icon> {{ $t('admin.tabs.systemSettings') }}</v-tab>
+        <v-tab :value="6"><v-icon>mdi-file-document-outline</v-icon> {{ $t('admin.tabs.logs') }}</v-tab>
       </v-tabs>
 
-      <v-card-text>
+      <v-card-text class="ma-0 pa-0">
         <v-window v-model="activeTab">
           <v-window-item :value="1">
             <user-management-tab ref="userManagementTabRef" />
@@ -25,10 +26,14 @@
           </v-window-item>
 
           <v-window-item :value="4">
-            <system-settings-tab ref="systemSettingsTabRef" />
+            <protocol-connections-tab ref="protocolConnectionsTabRef" />
           </v-window-item>
 
           <v-window-item :value="5">
+            <system-settings-tab ref="systemSettingsTabRef" />
+          </v-window-item>
+
+          <v-window-item :value="6">
             <logs-tab ref="logsTab" />
           </v-window-item>
         </v-window>
@@ -42,15 +47,17 @@
 import UserManagementTab from './UserManagementTab.vue';
 import RolesManagementTab from './RolesManagementTab.vue';
 import ProtocolDriverInstancesTab from './ProtocolDriverInstancesTab.vue';
+import ProtocolConnectionsTab from './ProtocolConnectionsTab.vue';
 import SystemSettingsTab from './SystemSettingsTab.vue';
 import LogsTab from './LogsTab.vue';
 import { ref } from 'vue';
 
-const userManagementTabRef = ref(1);
-const rolesManagementTabRef = ref(2);
-const protocolDriverInstancesTabRef = ref(3);
-const systemSettingsTabRef = ref(4);
-const logsTab = ref(5);
+const userManagementTabRef = ref(null);
+const rolesManagementTabRef = ref(null);
+const protocolDriverInstancesTabRef = ref(null);
+const protocolConnectionsTabRef = ref(null);
+const systemSettingsTabRef = ref(null);
+const logsTab = ref(null);
 const activeTab = ref(1);
 
 const fetchUsersAndRoles = async () => {
@@ -70,6 +77,11 @@ const fetchProtocolDriverInstances = async () => {
     await protocolDriverInstancesTabRef.value.fetchProtocolDriverInstances();
 }
 
+const fetchProtocolConnections = async () => {
+  if (protocolConnectionsTabRef?.value?.fetchProtocolConnections)
+    await protocolConnectionsTabRef.value.fetchProtocolConnections();
+}
+
 </script>
 
 <style scoped>

src/AdminUI/src/components/LoginPage.vue

@@ -136,14 +136,6 @@ const parseCookie = (str) => {
     }, {})
 }
 
-function LoadFavicon(href) {
-  let link = document.createElement('link')
-  link.type = 'image/x-icon'
-  link.rel = 'shortcut icon'
-  link.href = href
-  document.getElementsByTagName('head')[0].appendChild(link)
-}
-
 function testLogin() {
   let ck = parseCookie(document.cookie)
   if ('json-scada-user' in ck) {
@@ -188,55 +180,4 @@ function testLogin() {
     })
 }
 
-function tryLogin() {
-  fetch('/Invoke/auth/signin', {
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    method: 'POST',
-    body: JSON.stringify({
-      username: document.getElementById('username').value,
-      password: document.getElementById('password').value,
-    }),
-  })
-    .then((resp) => resp.json())
-    .then((data) => {
-      if ('ok' in data && data.ok == false) {
-        document.getElementById('divloginerror').style.display = ''
-        setTimeout(function () {
-          document.getElementById('divloginerror').style.display = 'none'
-        }, 3000)
-      }
-    })
-    .catch((error) => {
-      console.log('Error on a fetch operation: ' + error.message)
-    })
-    .finally(() => {
-      testLogin()
-      document.getElementById('password').value = ''
-    })
-}
-
-function tryLogout() {
-  fetch('/Invoke/auth/signout', {
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    method: 'POST',
-    body: JSON.stringify({
-      username: document.getElementById('username').value,
-    }),
-  })
-    .then((response) => {
-      // console.log(response)
-    })
-    .catch((error) => {
-      console.log('Error on a fetch operation: ' + error.message)
-    })
-    .finally(() => {
-      testLogin()
-    })
-}
 </script>