114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<template>
|
|
<div id="timeranges_s_e_container" class="flex justify-between items-center">
|
|
<Durationjs
|
|
:max="minVuemax"
|
|
:min="minVuemin"
|
|
:size="'min'"
|
|
:updateMax="updateMax"
|
|
@total-seconds="minTotalSeconds"
|
|
:value="durationMin"
|
|
>
|
|
</Durationjs>
|
|
<span>~</span>
|
|
<Durationjs
|
|
:max="maxVuemax"
|
|
:min="maxVuemin"
|
|
:size="'max'"
|
|
:updateMin="updateMin"
|
|
@total-seconds="maxTotalSeconds"
|
|
:value="durationMax"
|
|
>
|
|
</Durationjs>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration
|
|
* Time range duration picker with min/max duration inputs
|
|
* for conformance time-based rules.
|
|
*/
|
|
|
|
import { ref, watch } from "vue";
|
|
import Durationjs from "@/components/DurationInput.vue";
|
|
import { cloneDeep } from "lodash-es";
|
|
|
|
const props = defineProps(["time", "select"]);
|
|
const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
|
|
|
|
const timeData = ref({ min: 0, max: 0 });
|
|
const timeRangeMin = ref(0);
|
|
const timeRangeMax = ref(0);
|
|
const minVuemin = ref(0);
|
|
const minVuemax = ref(0);
|
|
const maxVuemin = ref(0);
|
|
const maxVuemax = ref(0);
|
|
const updateMax = ref(null);
|
|
const updateMin = ref(null);
|
|
const durationMin = ref(null);
|
|
const durationMax = ref(null);
|
|
|
|
/** Deep-copies timeData min/max values to the Vue component boundaries. */
|
|
function setTimeValue() {
|
|
// Deep copy the original timeData values
|
|
minVuemin.value = cloneDeep(timeData.value.min);
|
|
minVuemax.value = cloneDeep(timeData.value.max);
|
|
maxVuemin.value = cloneDeep(timeData.value.min);
|
|
maxVuemax.value = cloneDeep(timeData.value.max);
|
|
}
|
|
|
|
/**
|
|
* Handles the minimum duration total seconds update.
|
|
* @param {number} e - The total seconds from the min duration component.
|
|
*/
|
|
function minTotalSeconds(e) {
|
|
timeRangeMin.value = e;
|
|
updateMin.value = e;
|
|
emit("min-total-seconds", e);
|
|
}
|
|
|
|
/**
|
|
* Handles the maximum duration total seconds update.
|
|
* @param {number} e - The total seconds from the max duration component.
|
|
*/
|
|
function maxTotalSeconds(e) {
|
|
timeRangeMax.value = e;
|
|
updateMax.value = e;
|
|
emit("max-total-seconds", e);
|
|
}
|
|
|
|
watch(
|
|
() => props.time,
|
|
(newValue, oldValue) => {
|
|
durationMax.value = null;
|
|
durationMin.value = null;
|
|
if (newValue === null) {
|
|
timeData.value = { min: 0, max: 0 };
|
|
} else if (newValue !== null) {
|
|
timeData.value = { min: newValue.min, max: newValue.max };
|
|
emit("min-total-seconds", newValue.min);
|
|
emit("max-total-seconds", newValue.max);
|
|
}
|
|
setTimeValue();
|
|
},
|
|
{ deep: true, immediate: true },
|
|
);
|
|
|
|
// created
|
|
if (props.select) {
|
|
if (Object.keys(props.select.base).length !== 0) {
|
|
timeData.value = props.select.base;
|
|
setTimeValue();
|
|
}
|
|
if (Object.keys(props.select.rule).length !== 0) {
|
|
durationMin.value = props.select.rule.min;
|
|
durationMax.value = props.select.rule.max;
|
|
}
|
|
}
|
|
</script>
|