133 lines
No EOL
3.4 KiB
Vue
133 lines
No EOL
3.4 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, type PropType} from "vue";
|
|
import { ref, watch } from 'vue';
|
|
import {getShowInstances} from "@models/show/showInstance.ts";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
default: 'Orari della trasmissione',
|
|
type: String
|
|
},
|
|
startTime: {
|
|
default: '',
|
|
type: String
|
|
},
|
|
startTimeLabel: {
|
|
default: "Orario d'inizio della trasmissione",
|
|
type: String
|
|
},
|
|
duration: {
|
|
default: '',
|
|
type: String
|
|
},
|
|
durationLabel: {
|
|
default: "Durata",
|
|
type: String
|
|
},
|
|
endTimeLabel: {
|
|
default: "Orario di fine della trasmissione",
|
|
type: String
|
|
},
|
|
})
|
|
|
|
const startTime = ref(props.startTime);
|
|
const duration = ref(props.duration);
|
|
const endTime = ref('');
|
|
const startMenu = ref(false);
|
|
const endMenu = ref(false);
|
|
|
|
|
|
const getDuration = (startTime: Date, endTime: Date) => {
|
|
const diffInMilliseconds = Math.abs(startTime.getTime() - endTime.getTime());
|
|
const remainingHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const remainingMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
return `${remainingHours}:${remainingMinutes}`;
|
|
};
|
|
|
|
const getHoursMinutes = (timeString: string) => {
|
|
const [ h, m ] = timeString.split(":");
|
|
const ms = new Date().setHours(h,m);
|
|
return new Date(ms)
|
|
};
|
|
|
|
const checkTime = () => {
|
|
if (startTime && endTime) {
|
|
const start = getHoursMinutes(startTime.value);
|
|
let end = getHoursMinutes(endTime.value);
|
|
|
|
if (end.getTime() <= start.getTime()) {
|
|
end = new Date(start);
|
|
end.setMinutes(start.getMinutes() + 1);
|
|
endTime.value = end.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });;
|
|
}
|
|
duration.value = getDuration(start, end);
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if(endTime.value == '') endTime.value=startTime.value
|
|
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-on:update:model-value=checkTime
|
|
></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-on:update:model-value=checkTime
|
|
></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> |