%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div v-if="is_booking_enabled"
@mouseleave="isOpen = false"
:class="classes"
class="w-full relative flex items-center">
<button @click="openAvailability"
class="mt-4 uppercase font-medium flex items-center justify-center focus:outline-none hover:text-yellow transition duration-200"
type="button">
Book Now
<svg :class="isOpen ? 'transform rotate-180' : ''"
class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div v-if="isOpen"
class="absolute z-20 top-full left-0 w-full p-6 bg-white rounded-lg shadow">
<div
class="flex items-center justify-center"
v-if="isLoading == true">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Loading Times</span>
</div>
<div v-else-if="availability.length > 0">
<span class="block font-bold mb-2">{{ $moment.utc(date).format('DD/MM/Y') }}</span>
<div class="grid grid-cols-3 gap-2">
<NuxtLink
v-for="(time, key) in availability"
v-bind:key="key"
:to="'/booking/'+therapist_slug+'?date='+$moment.utc(time.start).format('Y-MM-DD')+'&time='+time.start"
class="time">{{ $moment.utc(time.start).format('H:mm') }}</NuxtLink>
</div>
</div>
<div
class="flex items-center justify-center"
v-else>
<span class="font-bold">No availability</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
therapist_id: Number,
therapist_slug: String,
is_booking_enabled: Boolean,
classes: String
},
data() {
return {
isLoading: false,
isOpen: false,
date: null,
availability: []
}
},
methods: {
async openAvailability() {
this.isLoading = true;
this.isOpen = true;
await this.$axios.post('/availability/next/'+this.therapist_id).then((response) => {
this.isLoading = false;
this.date = response.data.date;
this.availability = response.data.slots;
}).catch((error) => {
this.isLoading = false;
})
}
}
}
</script>
<style lang="postcss" scoped>
.time {
@apply block p-2 text-center text-sm leading-5 border border-black border-opacity-10 rounded transition duration-100;
&:hover,
&:focus {
@apply bg-black text-white;
}
}
</style>
Zerion Mini Shell 1.0