ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 01:04:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

show tags in monitor select list under status page : change select UI from normal select to vue-multiselect

Browse source
This commit is contained in:
titanventura 2023-02-26 16:26:09 +05:30
parent b91c526d2e
commit db6b863445
1 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/StatusPage.vue
View file

@ -276,9 +276,23 @@
<div class="mt-3"> <div class="mt-3">
<div v-if="allMonitorList.length > 0 && loadedData"> <div v-if="allMonitorList.length > 0 && loadedData">
<label>{{ $t("Add a monitor") }}:</label> <label>{{ $t("Add a monitor") }}:</label>
<select v-model="selectedMonitor" class="form-control"> <VueMultiselect
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option> v-model="selectedMonitor"
</select> :options="allMonitorList"
:multiple="false"
:searchable="true"
:placeholder="$t('Select')"
label="name"
trackBy="name"
>
<template #option="{ option }">
<div
class="d-inline-flex"
>
<span>{{ option.name }} <Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" /></span>
</div>
</template>
</VueMultiselect>
</div> </div>
<div v-else class="text-center"> <div v-else class="text-center">
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link> {{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
@ -339,6 +353,8 @@ import PublicGroupList from "../components/PublicGroupList.vue";
import MaintenanceTime from "../components/MaintenanceTime.vue"; import MaintenanceTime from "../components/MaintenanceTime.vue";
import { getResBaseURL } from "../util-frontend"; import { getResBaseURL } from "../util-frontend";
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts"; import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
import Tag from "../components/Tag.vue";
import VueMultiselect from "vue-multiselect";
const toast = useToast(); const toast = useToast();
@ -359,6 +375,8 @@ export default {
Confirm, Confirm,
PrismEditor, PrismEditor,
MaintenanceTime, MaintenanceTime,
Tag,
VueMultiselect
}, },
// Leave Page for vue route change // Leave Page for vue route change