You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
4.5 KiB
200 lines
4.5 KiB
<template>
|
|
<div class="calendar-page">
|
|
<h1 class="calendar__month">
|
|
{{ new Date(date).toLocaleString("default", { month: "long" }) }}
|
|
</h1>
|
|
<ul class="calendar">
|
|
<li
|
|
v-for="dow in daysOfWeek"
|
|
:key="dow"
|
|
:class="['calendar__day', 'calendar__day--dow']"
|
|
>
|
|
{{ dow }}
|
|
</li>
|
|
<li
|
|
v-for="index in getDayOfWeekOffset(date)"
|
|
:key="index + 'o'"
|
|
class="calendar__day calendar__day--blank"
|
|
/>
|
|
<li
|
|
v-for="day in getDaysInMonth(date)"
|
|
:key="day.toString()"
|
|
class="calendar__day"
|
|
>
|
|
<span class="day__date"> {{ day.getDate() }} </span>
|
|
<NuxtLink
|
|
v-if="
|
|
selectedDows.find((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
) && day > new Date()
|
|
"
|
|
class="btn btn--primary btn--day"
|
|
:to="
|
|
'/flights/' +
|
|
$route.params.o +
|
|
'/' +
|
|
$route.params.d +
|
|
'/' +
|
|
day.toLocaleDateString('en-CA')
|
|
"
|
|
>
|
|
<span class="day__date"> {{ day.getDate() }} </span>
|
|
</NuxtLink>
|
|
<span
|
|
v-if="
|
|
selectedDows.find((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
) &&
|
|
day > new Date() &&
|
|
selectedDows.filter((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
).length == 1
|
|
"
|
|
class="badge badge--day badge--count"
|
|
>
|
|
{{ scheduleTime(selectedDows[0]) }}
|
|
</span>
|
|
<span
|
|
v-if="
|
|
selectedDows.find((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
) &&
|
|
day > new Date() &&
|
|
selectedDows.filter((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
).length > 1
|
|
"
|
|
class="badge badge--day badge--count"
|
|
>
|
|
{{
|
|
selectedDows.filter((sched) =>
|
|
sched.DowsList.find((dow) => dow.num == day.getDay())
|
|
).length + "x"
|
|
}}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
date: {
|
|
type: [Date],
|
|
default () {
|
|
return new Date()
|
|
}
|
|
},
|
|
selectedDows: {
|
|
type: [Array],
|
|
default () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
|
}
|
|
},
|
|
methods: {
|
|
getDayOfWeekOffset (thisDate) {
|
|
const dow = new Date(thisDate.getFullYear(), thisDate.getMonth(), 1).getDay()
|
|
return dow
|
|
},
|
|
getDaysInMonth (thisDate) {
|
|
const daysInMonth = new Date(thisDate.getFullYear(), thisDate.getMonth() + 1, 0).getDate()
|
|
const days = []
|
|
|
|
for (let index = 1; index < daysInMonth + 1; index++) {
|
|
days.push(new Date(thisDate.getFullYear(), thisDate.getMonth(), index))
|
|
}
|
|
|
|
return days
|
|
},
|
|
book (thisDate) {
|
|
this.$emit('book', thisDate)
|
|
},
|
|
scheduleTime (dow) {
|
|
// console.log(dow)
|
|
const thisDate = new Date(dow.DepartureTimeFormatted)
|
|
const hours = thisDate.getHours() + Math.round(thisDate.getMinutes() / 60)
|
|
return ((hours > 12) ? (hours - 12) + 'pm' : hours + 'am')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.calendar-page {
|
|
width: min(90vmin, 400px);
|
|
}
|
|
|
|
.calendar {
|
|
display: grid;
|
|
border-radius: 3rem;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.day__date {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.btn.btn--day {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
background: #007fff;
|
|
color: white;
|
|
border-radius: 999px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.calendar__day {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: #eee;
|
|
}
|
|
|
|
.calendar__day--dow {
|
|
background: transparent;
|
|
aspect-ratio: unset;
|
|
color: gray;
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.calendar__day--blank {
|
|
background: white;
|
|
}
|
|
|
|
h1.calendar__month {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin: 0.5rem 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge.badge--day {
|
|
position: absolute;
|
|
background: hotpink;
|
|
border: white 0.2rem solid;
|
|
border-radius: 999px;
|
|
color: white;
|
|
padding: 0 0.4em;
|
|
bottom: -0.25rem;
|
|
right: -0.25rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
</style>
|