Merged buttons, cleaned up SS tag retrieval and made tagsVisible a bool.

Also to note: due to the transition of tagsVisible this breaks compatibility with the previous commits, delete the  tagsVisible setting in the database to fix.

server/routers/api-router.js

@@ -102,7 +102,7 @@ router.get("/api/status-page/config", async (_request, response) => {
     }
 
     if (! config.statusPageTags) {
-        config.statusPageTags = "hidden";
+        config.statusPageTags = false;
     }
 
     if (! config.title) {
@@ -144,15 +144,22 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request,
     try {
         await checkPublished();
         const publicGroupList = [];
-        let list = await R.find("group", " public = 1 ORDER BY weight ");
+        const tagsVisible = (await getSettings("statusPage")).statusPageTags;
+        const list = await R.find("group", " public = 1 ORDER BY weight ");
         for (let groupBean of list) {
-            let monitorGroup = await groupBean.toPublicJSON()
-            if ((await getSettings("statusPage")).statusPageTags=="visible") {
+            let monitorGroup = await groupBean.toPublicJSON();
+            if (tagsVisible) {
                 monitorGroup.monitorList = await Promise.all(monitorGroup.monitorList.map( async (monitor)=>{
                     // Includes tags as an array in response, allows for tags to be displayed on public status page
-                    let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]);
+                    const tags = await R.getAll(
+                            `SELECT monitor_tag.monitor_id, monitor_tag.value, tag.name, tag.color
+                            FROM monitor_tag
+                            JOIN tag
+                            ON monitor_tag.tag_id = tag.id
+                            WHERE monitor_tag.monitor_id = ?`, [monitor.id]
+                        );
                     return {...monitor,tags: tags}
-                }))
+                }));
             }
 
             publicGroupList.push(monitorGroup);

src/pages/StatusPage.vue

@@ -78,14 +78,15 @@
                     {{ $t("Switch to Dark Theme") }}
                 </button>
 
-                <button v-if="tagsVisible == 'hidden'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('visible')">
-                    <font-awesome-icon icon="eye" />
-                    {{ $t("Show Tags") }}
-                </button>
-
-                <button v-if="tagsVisible == 'visible'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('hidden')">
-                    <font-awesome-icon icon="eye-slash" />
-                    {{ $t("Hide Tags") }}
+                <button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
+                    <template v-if="tagsVisible">
+                        <font-awesome-icon icon="eye-slash" />
+                        {{ $t("Hide Tags") }}
+                    </template>
+                    <template v-else>
+                        <font-awesome-icon icon="eye" />
+                        {{ $t("Show Tags") }}
+                    </template>
                 </button>
             </div>
         </div>
@@ -499,7 +500,7 @@ export default {
                         // We only include the tags if visible so we can reuse the logic to hide the tags on disable
                         return {
                             ...monitor,
-                            tags: newState==="visible" ? this.$root.monitorList[monitor.id].tags : []
+                            tags: newState ? this.$root.monitorList[monitor.id].tags : []
                         }
                     })
                 }