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

Setting Modal

Browse source
This commit is contained in:
Yoswaris Lawpaiboon 2023-05-29 20:11:06 +07:00
parent 966066b897
commit 85eb084305
2 changed files with 129 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
src/components/MonitorSettingDialog.vue Normal file
View file

@ -0,0 +1,123 @@
<template>
<div ref="MonitorSettingDialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ $t("Monitor Setting", [monitor.name]) }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
<div class="my-3 form-check">
<input id="show-clickable-link" v-model="monitor.isClickAble" class="form-check-input" type="checkbox" @click="toggleLink(monitor.group_index, monitor.monitor_index)" />
<label class="form-check-label" for="show-clickable-link">
{{ $t("Show Clickable Link") }}
</label>
<div class="form-text">
{{ $t("Show Clickable Link Description") }}
</div>
</div>
<button
class="btn btn-primary btn-add-group me-2"
@click="$refs.badgeGeneratorDialog.show(monitor.id, monitor.name)"
>
<font-awesome-icon icon="certificate" />
{{ $t("Open Badge Generator") }}
</button>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
{{ $t("Close") }}
</button>
</div>
</div>
</div>
</div>
<BadgeGeneratorDialog ref="badgeGeneratorDialog" />
</template>
<script lang="ts">
import { Modal } from "bootstrap";
import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
export default {
components: {
BadgeGeneratorDialog
},
props: {},
emits: [],
data() {
return {
monitor: {
id: null,
name: null,
},
};
},
computed: {},
mounted() {
this.MonitorSettingDialog = new Modal(this.$refs.MonitorSettingDialog);
},
methods: {
/**
* Setting monitor
* @param {Object} group Data of monitor
* @param {Object} monitor Data of monitor
*/
show(group, monitor) {
this.monitor = {
id: monitor.element.id,
name: monitor.element.name,
monitor_index: monitor.index,
group_index: group.index,
isClickAble: this.showLink(monitor),
};
this.MonitorSettingDialog.show();
},
/**
* Toggle the value of sendUrl
* @param {number} groupIndex Index of group monitor is member of
* @param {number} index Index of monitor within group
*/
toggleLink(groupIndex, index) {
this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
},
/**
* Should a link to the monitor be shown?
* Attempts to guess if a link should be shown based upon if
* sendUrl is set and if the URL is default or not.
* @param {Object} monitor Monitor to check
* @param {boolean} [ignoreSendUrl=false] Should the presence of the sendUrl
* property be ignored. This will only work in edit mode.
* @returns {boolean}
*/
showLink(monitor, ignoreSendUrl = false) {
// We must check if there are any elements in monitorList to
// prevent undefined errors if it hasn't been loaded yet
if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
}
return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
</style>

32
src/components/PublicGroupList.vue
View file

@ -49,26 +49,15 @@
{{ monitor.element.name }}
</a>
<p v-else class="item-name"> {{ monitor.element.name }} </p>
<span
v-if="showLink(monitor, true)"
title="Toggle Clickable Link"
>
<font-awesome-icon
v-if="editMode"
:class="{'link-active': monitor.element.sendUrl, 'btn-link': true}"
icon="link" class="action me-3"
@click="toggleLink(group.index, monitor.index)"
/>
</span>
<span
title="Badge Generator"
title="Setting"
>
<font-awesome-icon
v-if="editMode"
:class="{'link-active': true, 'btn-link': true}"
icon="certificate" class="action me-3"
@click="$refs.badgeGeneratorDialog.show(monitor.element.id, monitor.element.name)"
icon="cog" class="action me-3"
@click="$refs.monitorSettingDialog.show(group, monitor)"
/>
</span>
</div>
@ -80,7 +69,7 @@
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
</div>
</div>
<BadgeGeneratorDialog ref="badgeGeneratorDialog" />
<MonitorSettingDialog ref="monitorSettingDialog" />
</div>
</template>
</Draggable>
@ -91,7 +80,7 @@
</template>
<script>
import BadgeGeneratorDialog from "./BadgeGeneratorDialog.vue";
import MonitorSettingDialog from "./MonitorSettingDialog.vue";
import Draggable from "vuedraggable";
import HeartbeatBar from "./HeartbeatBar.vue";
import Uptime from "./Uptime.vue";
@ -99,7 +88,7 @@ import Tag from "./Tag.vue";
export default {
components: {
BadgeGeneratorDialog,
MonitorSettingDialog,
Draggable,
HeartbeatBar,
Uptime,
@ -148,15 +137,6 @@ export default {
this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
},
/**
* Toggle the value of sendUrl
* @param {number} groupIndex Index of group monitor is member of
* @param {number} index Index of monitor within group
*/
toggleLink(groupIndex, index) {
this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
},
/**
* Should a link to the monitor be shown?
* Attempts to guess if a link should be shown based upon if