WIP: Add tags display in monitorList & Details

src/components/MonitorList.vue

@@ -11,6 +11,9 @@
                         <Uptime :monitor="item" type="24" :pill="true" />
                         {{ item.name }}
                     </div>
+                    <div class="tags">
+                        <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
+                    </div>
                 </div>
                 <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4">
                     <HeartbeatBar size="small" :monitor-id="item.id" />
@@ -29,10 +32,13 @@
 <script>
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Uptime from "../components/Uptime.vue";
+import Tag from "../components/Tag.vue";
+
 export default {
     components: {
         Uptime,
         HeartbeatBar,
+        Tag,
     },
     props: {
         scrollbar: {
@@ -140,4 +146,11 @@ export default {
 .monitorItem {
     width: 100%;
 }
+
+.tags {
+    padding-left: 62px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
 </style>

src/components/Tag.vue

@@ -1,7 +1,16 @@
 <template>
-    <div class="tag-wrapper m-2 py-1 px-3 rounded d-inline-flex" :style="{ backgroundColor: item.color }">
+    <div class="tag-wrapper rounded d-inline-flex"
+         :class="{ 'px-3': size == 'normal',
+                   'py-1': size == 'normal',
+                   'm-2': size == 'normal',
+                   'px-2': size == 'sm',
+                   'py-0': size == 'sm',
+                   'm-1': size == 'sm',
+         }"
+         :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
+    >
         {{ displayText }}
-        <span class="ps-1 btn-remove" @click="remove(item)">
+        <span v-if="remove != null" class="ps-1 btn-remove" @click="remove(item)">
             <font-awesome-icon icon="times" />
         </span>
     </div>
@@ -16,7 +25,11 @@ export default {
         },
         remove: {
             type: Function,
-            required: true,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: "normal",
         }
     },
     computed: {

src/pages/Details.vue

@@ -2,6 +2,9 @@
     <transition name="slide-fade" appear>
         <div v-if="monitor">
             <h1> {{ monitor.name }}</h1>
+            <div class="tags">
+                <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
+            </div>
             <p class="url">
                 <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
                 <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
@@ -188,6 +191,7 @@ import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
 const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
+import Tag from "../components/Tag.vue";
 
 export default {
     components: {
@@ -199,6 +203,7 @@ export default {
         Status,
         Pagination,
         PingChart,
+        Tag,
     },
     data() {
         return {
@@ -423,4 +428,12 @@ table {
     }
 }
 
+.tags {
+    margin-bottom: 0.5rem;
+}
+
+.tags > div:first-child {
+    margin-left: 0 !important;
+}
+
 </style>