166 lines
5.1 KiB
Vue
166 lines
5.1 KiB
Vue
<script>
|
|
import { defineNuxtComponent } from 'nuxt/app';
|
|
import utils from '~/assets/utils';
|
|
|
|
export default defineNuxtComponent({
|
|
props: {
|
|
modalState: {
|
|
type: Boolean,
|
|
},
|
|
weatherData: {
|
|
type: Object,
|
|
},
|
|
databaseLocations: {
|
|
type: Object,
|
|
},
|
|
locID: {
|
|
type: Number,
|
|
},
|
|
locations: {
|
|
type: Object,
|
|
},
|
|
apiBaseURL: {
|
|
type: String,
|
|
},
|
|
},
|
|
data: () => ({
|
|
apiURL: '',
|
|
userId: 1,
|
|
deleteBootstrapData: false,
|
|
}),
|
|
methods: {
|
|
getDay(date) {
|
|
return utils.getDay(date);
|
|
},
|
|
closeModal() {
|
|
this.$emit('close-modal');
|
|
},
|
|
getWeatherIcon(wmoCode) {
|
|
return utils.getWeatherIcon(wmoCode);
|
|
},
|
|
async removeLocID(input) {
|
|
await this.$parent.removeLocID(input);
|
|
},
|
|
async deleteLocation(input) {
|
|
this.apiURL = '';
|
|
this.apiURL = `${this.apiBaseURL}/locations/${input}`;
|
|
await this.$emit('close-modal');
|
|
|
|
await this.removeLocID(input);
|
|
await delete this.weatherData[input];
|
|
|
|
await fetch(`${this.apiBaseURL}/locations/${input}`, {
|
|
method: 'DELETE',
|
|
body: JSON.stringify({
|
|
id: input,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then(async (json) => {
|
|
console.log('Deleted: ' + input);
|
|
});
|
|
|
|
this.apiURL = '';
|
|
await this.getDatabaseLocations();
|
|
},
|
|
async getDatabaseLocations() {
|
|
await this.$parent.getDatabaseLocations();
|
|
},
|
|
async fetchWeatherData(bulk = false, location = null) {
|
|
await this.$parent.fetchWeatherData(bulk, location);
|
|
},
|
|
displayNotification(type, input) {
|
|
this.$parent.displayNotification(type, input);
|
|
},
|
|
},
|
|
name: 'Delete Location',
|
|
emits: ['close-modal'],
|
|
});
|
|
|
|
const delOpen = ref(false);
|
|
|
|
defineShortcuts({
|
|
escape: {
|
|
usingInput: true,
|
|
whenever: [delOpen],
|
|
handler: () => {
|
|
delOpen.value = false;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UModal
|
|
:ui="{
|
|
base: 'w-80 min-w-20 h-50 bg-opacity-0',
|
|
overlay: {
|
|
base: 'fixed inset-0 transition-opacity',
|
|
background: 'bg-black bg-opacity-80',
|
|
transition: {
|
|
enter: 'ease-out duration-300',
|
|
enterFrom: 'opacity-0',
|
|
enterTo: 'opacity-100',
|
|
leave: 'ease-in duration-200',
|
|
leaveFrom: 'opacity-100',
|
|
leaveTo: 'opacity-0',
|
|
},
|
|
},
|
|
}"
|
|
v-model="modalState"
|
|
prevent-close
|
|
:overlay="true"
|
|
@close-prevented="closeModal"
|
|
@close="closeModal"
|
|
>
|
|
<UCard
|
|
:ui="{
|
|
background: 'bg-woodsmoke-950',
|
|
divide: '',
|
|
ring: '',
|
|
header: {
|
|
base: '',
|
|
padding: 'pb-3 px-4',
|
|
},
|
|
body: {
|
|
base: 'py-2 px-4',
|
|
padding: '',
|
|
},
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-base font-semibold text-gray-200">Delete Location</h3>
|
|
<button
|
|
class="float-right text-justify text-md bg-shark-950 text-gray-200 hover:bg-linkwater-300 px-1 rounded-md"
|
|
@click="closeModal"
|
|
>
|
|
<UIcon name="i-heroicons-x-mark-16-solid" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<div class="flex items-center">
|
|
<p class="text-base mx-auto text-center text-gray-200">
|
|
Remove the selected location ? ({{ this.weatherData[this.locID].data.location.name }})
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center m-6">
|
|
<button
|
|
class="mx-auto text-center text-xs bg-linkwater-100 text-gray-900 hover:bg-linkwater-300 font-bold py-2 px-4 rounded-md"
|
|
@click="deleteLocation(this.locID)"
|
|
>
|
|
Yes
|
|
</button>
|
|
<button
|
|
class="mx-auto text-center text-xs bg-linkwater-100 text-gray-900 hover:bg-linkwater-300 font-bold py-2 px-4 rounded-md"
|
|
@click="closeModal"
|
|
>
|
|
No
|
|
</button>
|
|
</div>
|
|
</UCard>
|
|
</UModal>
|
|
</div>
|
|
</template>
|