New AdminUI: tags tab. In development.

Author: riclolsen

src/AdminUI/src/App.vue

@@ -3,7 +3,11 @@
     <v-app-bar app height="48">
       <v-app-bar-title class="text-subtitle-1">
         <router-link to="/" class="text-decoration-none">
-          {{ $t('app.title') }}
+          <v-tooltip :text="version">
+            <template v-slot:activator="{ props }">
+              <span v-bind="props">{{ $t('app.title') }}</span>
+            </template>
+          </v-tooltip>
         </router-link>
       </v-app-bar-title>
       <v-spacer></v-spacer>
@@ -72,6 +76,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { STORAGE_KEY } from './i18n';
 
+const version = ref("v0.38-alpha");
 const router = useRouter();
 const theme = ref('dark');
 const vuetifyTheme = useTheme();
@@ -147,16 +152,16 @@ const changePwd = () => {
   if (newPassword.value !== confirmNewPassword.value) {
     errorMessage.value = t('login.passwordMismatch')
     setTimeout(() => {
-        errorMessage.value = ""
-      }, 1500)
+      errorMessage.value = ""
+    }, 1500)
     return
   }
 
   if (newPassword.value.trim() === "" || newPassword.value.trim().length < 4) {
     errorMessage.value = t('login.invalidNewPassword')
     setTimeout(() => {
-        errorMessage.value = ""
-      }, 1500)
+      errorMessage.value = ""
+    }, 1500)
     return
   }
 
@@ -185,13 +190,13 @@ const changePwd = () => {
       } else {
         errorMessage.value = t('login.changePasswordFailed')
         setTimeout(() => {
-        errorMessage.value = ""
-      }, 1500)
+          errorMessage.value = ""
+        }, 1500)
       }
     })
-    .catch((err) => { 
+    .catch((err) => {
       console.warn(err)
-      errorMessage.value = t('login.changePasswordError') 
+      errorMessage.value = t('login.changePasswordError')
       setTimeout(() => {
         errorMessage.value = ""
       }, 1500)

src/AdminUI/src/components/TagsTab.vue

@@ -50,7 +50,7 @@
         <v-card>
             <v-card-title class="headline">{{
                 $t('admin.tags.confirmErase')
-                }}</v-card-title>
+            }}</v-card-title>
             <v-card-text>
                 <v-text-field density="compact" readonly variant="outlined" v-model="editedTag._id"
                     :label="$t('admin.tags.eraseId')"></v-text-field>
@@ -76,7 +76,8 @@
             </v-card-title>
 
             <v-card-text>
-                <v-text-field v-model="editedTag._id" :label="$t('admin.tags.editId')"></v-text-field>
+                <v-text-field type="number" v-model="editedTag._id" :label="$t('admin.tags.editId')" :disabled="!isNewTag"
+                    min="0"></v-text-field>
                 <v-text-field v-model="editedTag.tag" :label="$t('admin.tags.editName')"></v-text-field>
                 <v-text-field v-model="editedTag.description" :label="$t('admin.tags.editDescription')"></v-text-field>
                 <v-text-field v-model="editedTag.ungroupedDescription"
@@ -216,7 +217,7 @@
                 <v-btn color="orange darken-1" text variant="tonal" @click="closeEditTag">
                     {{ $t('common.cancel') }}
                 </v-btn>
-                <v-btn color="blue darken-1" text variant="tonal" @click="updateTag">
+                <v-btn color="blue darken-1" text variant="tonal" @click="updateOrCreateTag">
                     {{ $t('common.save') }}
                 </v-btn>
             </v-card-actions>
@@ -318,6 +319,7 @@ const { t } = useI18n()
 const dialogEditTag = ref(false)
 const dialogDeleteTag = ref(false)
 const dialogAddParcel = ref(false)
+const isNewTag = ref(false)
 const tags = ref([])
 const protocolConnections = ref([])
 const protocolDriveNameByConnNumber = ref([])
@@ -367,7 +369,7 @@ const defaultTagValue = ref({
     historianDeadBand: 0,
     historianPeriod: 0,
 })
-const editedTag = ref({...defaultTagValue.value})
+const editedTag = ref({ ...defaultTagValue.value })
 
 const headers = computed(() => [
     {
@@ -420,13 +422,15 @@ const handleOptionsUpdate = (newOptions) => {
 }
 
 const newTagOpenDialog = async () => {
+    isNewTag.value = true
     error.value = false;
     editedTag.value = Object.assign({}, defaultTagValue.value);
     await fetchProtocolConnections()
     dialogEditTag.value = true;
 }
 
 const editTagOpenDialog = async (item) => {
+    isNewTag.value = false
     error.value = false;
     editedTag.value = Object.assign({}, item);
     await fetchProtocolConnections()
@@ -447,8 +451,8 @@ const deleteTag = async () => {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({
-                tag: editedTag.tag,
-                _id: editedTag._id,
+                tag: editedTag.value.tag,
+                _id: editedTag.value._id,
             }),
         })
         const json = await response.json()
@@ -469,6 +473,38 @@ const closeDeleteTag = () => {
     dialogDeleteTag.value = false
 }
 
+const updateOrCreateTag = async () => {
+    if (editedTag.value._id) {
+        await updateTag();
+    } else {
+        await createTag();
+    }
+}
+
+const createTag = async () => {
+    try {
+        const response = await fetch('/Invoke/auth/createTag', {
+            method: 'post',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(editedTag.value),
+        })
+        const json = await response.json()
+        if (json.error || !json._id) {
+            console.warn(json)
+            error.value = true
+            return
+        }
+        dialogEditTag.value = false
+    } catch (err) {
+        console.warn(err)
+        error.value = true
+    }
+    fetchTags()
+}
+
 const updateTag = async () => {
     try {
         const response = await fetch('/Invoke/auth/updateTag', {
@@ -477,7 +513,7 @@ const updateTag = async () => {
                 Accept: 'application/json',
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify(editedTag),
+            body: JSON.stringify(editedTag.value),
         })
         const json = await response.json()
         if (json.error) { console.log(json); error.value = true; }

src/AdminUI/src/locales/en.json

@@ -528,7 +528,7 @@
       "eraseName": "Tag name",
       "newTag": "New Tag",
       "editTag": "Edit Tag",
-      "editId": "Tag _id (unique numeric point key)",
+      "editId": "Tag _id (unique numeric point key, empty for auto-assign)",
       "editName": "Tag name (unique string key)",
       "editDescription": "Description",
       "editUngroupedDescription": "Ungrouped Description",