141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import {ref, onMounted, type PropType, reactive} from "vue";
|
|
import {baseWebstream, createWebstream, getWebstream, updateWebstream, type Webstream} from "@models/webstream.ts";
|
|
|
|
// Props and emits
|
|
const props = defineProps({
|
|
webstreamId: {
|
|
type: Number as PropType<number | null>,
|
|
required: true,
|
|
},
|
|
});
|
|
const emits = defineEmits(['go-back']);
|
|
|
|
// Data
|
|
const loading = ref(false);
|
|
const isFormValid = ref(false);
|
|
const currentWebstream = ref<Webstream>(baseWebstream());
|
|
|
|
// Funcs
|
|
onMounted(async () => {
|
|
loading.value = true;
|
|
if (props.webstreamId === null) {
|
|
currentWebstream.value = baseWebstream();
|
|
} else {
|
|
currentWebstream.value = await getWebstream(props.webstreamId);
|
|
}
|
|
loading.value = false;
|
|
});
|
|
|
|
const goBack = () => {
|
|
emits('go-back');
|
|
};
|
|
|
|
const saveWebstream = async () => {
|
|
loading.value = true;
|
|
try {
|
|
if (currentWebstream.value.id) {
|
|
await updateWebstream(currentWebstream.value);
|
|
goBack();
|
|
return
|
|
}
|
|
|
|
await createWebstream(currentWebstream.value);
|
|
goBack()
|
|
return
|
|
|
|
} catch (error) {
|
|
console.error("Error saving webstream:", error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-card
|
|
:disabled="loading"
|
|
:loading="loading"
|
|
>
|
|
<template v-slot:loader="{ isActive }">
|
|
<v-progress-linear
|
|
:active="isActive"
|
|
color="deep-purple"
|
|
height="4"
|
|
indeterminate
|
|
></v-progress-linear>
|
|
</template>
|
|
|
|
<v-card-title>
|
|
<h3>Webstream</h3>
|
|
</v-card-title>
|
|
<v-form ref="form" v-model="isFormValid">
|
|
<v-card-text>
|
|
<v-row no-gutters>
|
|
<!-- Name Field -->
|
|
<v-col cols="12" md="6">
|
|
<v-card>
|
|
<v-text-field
|
|
v-model="currentWebstream.name"
|
|
label="Nome"
|
|
density="compact"
|
|
:rules="[v => !!v || 'Nome è obbligatorio']"
|
|
required="true"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- URL Field -->
|
|
<v-col cols="12" md="6">7
|
|
<v-card>
|
|
<v-text-field
|
|
v-model="currentWebstream.url"
|
|
label="URL"
|
|
density="compact"
|
|
:rules="[v => !!v || 'URL è obbligatorio', v => /^http?:\/\//.test(v) || 'URL deve iniziare con http://']"
|
|
required="true"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Description Field -->
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-textarea
|
|
v-model="currentWebstream.description"
|
|
label="Descrizione"
|
|
density="compact"
|
|
rows="2"
|
|
:rules="[v => !!v || 'Descrizione è obbligatoria']"
|
|
required="true"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Length Field -->
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-textarea
|
|
v-model="currentWebstream.length"
|
|
label="Durata"
|
|
density="compact"
|
|
rows="2"
|
|
:rules="[v => !!v || 'Durata è obbligatoria']"
|
|
required="true"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
|
|
<v-btn color="primary" @click="saveWebstream" :disabled="!isFormValid">
|
|
{{ currentWebstream.id ? 'Aggiorna' : 'Crea' }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|