120 lines
No EOL
2.9 KiB
Vue
120 lines
No EOL
2.9 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, type PropType} from "vue";
|
|
import { ref, watch } from 'vue';
|
|
import {getShowInstances} from "@models/show/showInstance.ts";
|
|
import {getHoursMinutesFromString, getTimeDiff} from "@/helpers/DateFormatter.ts";
|
|
// Emits, props and models
|
|
const emits = defineEmits(['update:duration'])
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
default: 'Orari della trasmissione',
|
|
type: String
|
|
},
|
|
startTimeLabel: {
|
|
default: "Orario d'inizio della trasmissione",
|
|
type: String
|
|
},
|
|
durationLabel: {
|
|
default: "Durata",
|
|
type: String
|
|
},
|
|
endTimeLabel: {
|
|
default: "Orario di fine della trasmissione",
|
|
type: String
|
|
},
|
|
})
|
|
|
|
const startTime = defineModel({default: '08:00'});
|
|
|
|
// Data
|
|
const duration = ref('0:0');
|
|
const endTime = ref('');
|
|
const startMenu = ref(false);
|
|
const endMenu = ref(false);
|
|
|
|
|
|
// Func
|
|
const checkTime = () => {
|
|
if (startTime.value && endTime) {
|
|
const start: Date = getHoursMinutesFromString(startTime.value);
|
|
let end: Date = getHoursMinutesFromString(endTime.value);
|
|
|
|
if (end.getTime() <= start.getTime()) {
|
|
end = new Date(start);
|
|
end.setMinutes(start.getMinutes() + 60);
|
|
endTime.value = end.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });;
|
|
}
|
|
duration.value = getTimeDiff(start, end);
|
|
emits('update:duration', duration.value);
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if(endTime.value == '') endTime.value=startTime.value
|
|
checkTime()
|
|
});
|
|
|
|
watch([startTime, endTime], () => {
|
|
checkTime();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-card class="pa-4">
|
|
<v-card-title>{{props.title}}</v-card-title>
|
|
<v-card-text>
|
|
<!-- Start Time Picker -->
|
|
<v-text-field
|
|
v-model="startTime"
|
|
:label=props.startTimeLabel
|
|
prepend-icon="mdi-clock-time-four-outline"
|
|
readonly
|
|
@click="startMenu = true"
|
|
>
|
|
<v-menu
|
|
v-model="startMenu"
|
|
:close-on-content-click="false"
|
|
transition="scale-transition"
|
|
offset-x
|
|
>
|
|
<v-time-picker
|
|
v-model="startTime"
|
|
format="ampm"
|
|
ampm-in-title
|
|
full-width
|
|
></v-time-picker>
|
|
</v-menu>
|
|
</v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="endTime"
|
|
:label=props.endTimeLabel
|
|
prepend-icon="mdi-clock-time-four-outline"
|
|
readonly
|
|
@click="endMenu = true"
|
|
>
|
|
<v-menu
|
|
v-model="endMenu"
|
|
:close-on-content-click="false"
|
|
transition="scale-transition"
|
|
>
|
|
<v-time-picker
|
|
v-model="endTime"
|
|
format="ampm"
|
|
ampm-in-title
|
|
full-width
|
|
:min="startTime"
|
|
></v-time-picker>
|
|
</v-menu>
|
|
</v-text-field>
|
|
<v-label>{{`${props.durationLabel} - ${duration}`}}</v-label>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pa-4 {
|
|
padding: 16px;
|
|
}
|
|
</style> |