148 lines
5.5 KiB
Vue
148 lines
5.5 KiB
Vue
<script>
|
|
import { defineNuxtComponent } from 'nuxt/app';
|
|
import utils from '~/assets/utils';
|
|
|
|
export default defineNuxtComponent({
|
|
props: {
|
|
modalState: {
|
|
type: Boolean,
|
|
},
|
|
weatherData: {
|
|
type: Object,
|
|
},
|
|
locID: {
|
|
type: Number,
|
|
},
|
|
},
|
|
methods: {
|
|
getDay(date) {
|
|
return utils.getDay(date);
|
|
},
|
|
closeModal() {
|
|
this.$emit('close-modal');
|
|
},
|
|
getWeatherIcon(wmoCode) {
|
|
return this.$parent.getWeatherIcon(wmoCode);
|
|
},
|
|
},
|
|
name: 'Slideover Details',
|
|
emits: ['close-modal'],
|
|
});
|
|
|
|
const detailsOpen = ref(false);
|
|
|
|
defineShortcuts({
|
|
escape: {
|
|
usingInput: true,
|
|
whenever: [detailsOpen],
|
|
handler: () => {
|
|
detailsOpen.value = false;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<USlideover
|
|
:ui="{
|
|
base: 'min-w-100 min-h-70 h-full',
|
|
background: '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',
|
|
},
|
|
},
|
|
}"
|
|
prevent-close
|
|
v-model="modalState"
|
|
:overlay="true"
|
|
@close-prevented="closeModal"
|
|
@close="closeModal"
|
|
>
|
|
<UCard
|
|
:ui="{
|
|
background: 'bg-woodsmoke-950 h-full',
|
|
divide: '',
|
|
ring: '',
|
|
preventClose: True,
|
|
header: {
|
|
base: '',
|
|
padding: 'pb-3',
|
|
},
|
|
body: {
|
|
base: 'pt-2 px-6 pb-4',
|
|
padding: '',
|
|
},
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-2xl px-2 font-semibold text-gray-200">
|
|
{{ this.weatherData[this.locID].data.location.name }}
|
|
</p>
|
|
<button
|
|
class="float-right rounded-sm text-justify text-md bg-shark-950 text-gray-200 hover:bg-linkwater-300 px-1"
|
|
@click="closeModal"
|
|
>
|
|
<UIcon class="mt-1" name="i-heroicons-x-mark-16-solid" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<p class="text-sm text-silver-400 pb-4">This Week</p>
|
|
<div class="mb-4 mx-1" v-for="index in 7" :key="index">
|
|
<div class="container grid grid-cols-3 py-5 bg-mineshaft-900 text-gray-200 px-5 rounded-3xl">
|
|
<div class="mt-2 col-span-2 text-left items-start">
|
|
<img
|
|
class="float-left w-10 mr-3"
|
|
:src="getWeatherIcon(this.weatherData[this.locID].data.daily.weather_code[index - 1])"
|
|
alt="weather icon"
|
|
/>
|
|
<div class="items-start text-left py-1 align-middle">
|
|
<strong class="text-left text-3xl font-semibold font-sans align-middle">
|
|
{{ getDay(this.weatherData[this.locID].data.daily.date[index - 1]) }}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<div class="float-right">
|
|
<span class="text-md text-silver-500 mx-4">Min.</span>
|
|
<span class="text-md"
|
|
><strong class="mr-1 text-silver-200">
|
|
{{
|
|
Math.ceil(
|
|
this.weatherData[this.locID].data.daily.temperature_2m_min[index - 1]
|
|
)
|
|
}}°C
|
|
</strong>
|
|
</span>
|
|
</div>
|
|
<div class="float-right mt-2">
|
|
<span class="text-md text-silver-500 mx-4">Max.</span>
|
|
<span class="text-md"
|
|
><strong class="mr-1 text-silver-200">
|
|
{{
|
|
Math.ceil(
|
|
this.weatherData[this.locID].data.daily.temperature_2m_max[index - 1]
|
|
)
|
|
}}°C
|
|
</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</USlideover>
|
|
</div>
|
|
</template>
|