mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-24 07:14:04 +00:00
190 lines
5 KiB
Vue
190 lines
5 KiB
Vue
|
<template>
|
||
|
<div class="condition-group mb-3" data-testid="condition-group">
|
||
|
<div class="d-flex">
|
||
|
<select v-if="!isFirst" v-model="model.andOr" class="form-select" style="width: auto;" data-testid="condition-group-and-or">
|
||
|
<option value="and">{{ $t("and") }}</option>
|
||
|
<option value="or">{{ $t("or") }}</option>
|
||
|
</select>
|
||
|
</div>
|
||
|
|
||
|
<div class="condition-group-inner mt-2 pa-2">
|
||
|
<div class="condition-group-conditions">
|
||
|
<template v-for="(child, childIndex) in model.children" :key="childIndex">
|
||
|
<EditMonitorConditionGroup
|
||
|
v-if="child.type === 'group'"
|
||
|
v-model="model.children[childIndex]"
|
||
|
:is-first="childIndex === 0"
|
||
|
:get-new-group="getNewGroup"
|
||
|
:get-new-condition="getNewCondition"
|
||
|
:condition-variables="conditionVariables"
|
||
|
@remove="removeChild"
|
||
|
/>
|
||
|
<EditMonitorCondition
|
||
|
v-else
|
||
|
v-model="model.children[childIndex]"
|
||
|
:is-first="childIndex === 0"
|
||
|
:is-last="childIndex === model.children.length - 1"
|
||
|
:is-in-group="true"
|
||
|
:condition-variables="conditionVariables"
|
||
|
@remove="removeChild"
|
||
|
/>
|
||
|
</template>
|
||
|
</div>
|
||
|
|
||
|
<div class="condition-group-actions mt-3">
|
||
|
<button class="btn btn-outline-secondary me-2" type="button" data-testid="add-condition-button" @click="addCondition">
|
||
|
{{ $t("conditionAdd") }}
|
||
|
</button>
|
||
|
<button class="btn btn-outline-secondary me-2" type="button" data-testid="add-group-button" @click="addGroup">
|
||
|
{{ $t("conditionAddGroup") }}
|
||
|
</button>
|
||
|
<button
|
||
|
class="btn btn-outline-danger"
|
||
|
type="button"
|
||
|
:aria-label="$t('conditionDeleteGroup')"
|
||
|
data-testid="remove-condition-group"
|
||
|
@click="remove"
|
||
|
>
|
||
|
<font-awesome-icon icon="trash" />
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import EditMonitorCondition from "./EditMonitorCondition.vue";
|
||
|
|
||
|
export default {
|
||
|
name: "EditMonitorConditionGroup",
|
||
|
|
||
|
components: {
|
||
|
EditMonitorCondition,
|
||
|
},
|
||
|
|
||
|
props: {
|
||
|
/**
|
||
|
* The condition group
|
||
|
*/
|
||
|
modelValue: {
|
||
|
type: Object,
|
||
|
required: true,
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Whether this is the first condition
|
||
|
*/
|
||
|
isFirst: {
|
||
|
type: Boolean,
|
||
|
required: true,
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Function to generate a new group model
|
||
|
*/
|
||
|
getNewGroup: {
|
||
|
type: Function,
|
||
|
required: true,
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Function to generate a new condition model
|
||
|
*/
|
||
|
getNewCondition: {
|
||
|
type: Function,
|
||
|
required: true,
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Variable choices
|
||
|
*/
|
||
|
conditionVariables: {
|
||
|
type: Array,
|
||
|
required: true,
|
||
|
},
|
||
|
},
|
||
|
|
||
|
emits: [ "update:modelValue", "remove" ],
|
||
|
|
||
|
computed: {
|
||
|
model: {
|
||
|
get() {
|
||
|
return this.modelValue;
|
||
|
},
|
||
|
set(value) {
|
||
|
this.$emit("update:modelValue", value);
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
addGroup() {
|
||
|
const conditions = [ ...this.model.children ];
|
||
|
conditions.push(this.getNewGroup());
|
||
|
this.model.children = conditions;
|
||
|
},
|
||
|
|
||
|
addCondition() {
|
||
|
const conditions = [ ...this.model.children ];
|
||
|
conditions.push(this.getNewCondition());
|
||
|
this.model.children = conditions;
|
||
|
},
|
||
|
|
||
|
remove() {
|
||
|
this.$emit("remove", this.model);
|
||
|
},
|
||
|
|
||
|
removeChild(child) {
|
||
|
const idx = this.model.children.indexOf(child);
|
||
|
if (idx !== -1) {
|
||
|
this.model.children.splice(idx, 1);
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
@import "../assets/vars.scss";
|
||
|
|
||
|
.condition-group-inner {
|
||
|
background: rgba(0, 0, 0, 0.05);
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
.dark .condition-group-inner {
|
||
|
background: rgba(255, 255, 255, 0.05);
|
||
|
}
|
||
|
|
||
|
.condition-group-conditions {
|
||
|
container-type: inline-size;
|
||
|
}
|
||
|
|
||
|
.condition-group-actions {
|
||
|
display: grid;
|
||
|
gap: 10px;
|
||
|
}
|
||
|
|
||
|
// Delete button
|
||
|
.condition-group-actions > :last-child {
|
||
|
margin-left: auto;
|
||
|
margin-top: 14px;
|
||
|
}
|
||
|
|
||
|
@container (min-width: 400px) {
|
||
|
.condition-group-actions {
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
// Delete button
|
||
|
.condition-group-actions > :last-child {
|
||
|
margin-left: auto;
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
.btn-delete-group {
|
||
|
margin-left: auto;
|
||
|
}
|
||
|
}
|
||
|
</style>
|