mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-09-08 10:23:57 +00:00
show tags in monitor select list under status page : change select UI from normal select to vue-multiselect
This commit is contained in:
parent
b91c526d2e
commit
db6b863445
@ -276,9 +276,23 @@
|
||||
<div class="mt-3">
|
||||
<div v-if="allMonitorList.length > 0 && loadedData">
|
||||
<label>{{ $t("Add a monitor") }}:</label>
|
||||
<select v-model="selectedMonitor" class="form-control">
|
||||
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
|
||||
</select>
|
||||
<VueMultiselect
|
||||
v-model="selectedMonitor"
|
||||
: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 v-else class="text-center">
|
||||
{{ $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 { 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 Tag from "../components/Tag.vue";
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
@ -359,6 +375,8 @@ export default {
|
||||
Confirm,
|
||||
PrismEditor,
|
||||
MaintenanceTime,
|
||||
Tag,
|
||||
VueMultiselect
|
||||
},
|
||||
|
||||
// Leave Page for vue route change
|
||||
|
Loading…
Reference in New Issue
Block a user