|
22 | 22 | <div class="h-0 w-full flex justify-center">
|
23 | 23 | <div
|
24 | 24 | v-if="openingHours"
|
25 |
| - class="h-fit w-fit bottom-0 right-0 translate-y-1/2 |
| 25 | + class="h-fit w-fit bottom-0 right-0 translate-y-1/2 flex |
26 | 26 | border rounded px-1 -mb-1 dark:border-cool-700 border-cool-300 backdrop-blur-3xl"
|
| 27 | + :class="{ '!border-yellow-600': nonNormalOpeningHours }" |
27 | 28 | >
|
28 |
| - <p class="text-cool-600 dark:text-cool-400 text-xs whitespace-nowrap"> |
| 29 | + <p class="text-cool-600 dark:text-cool-400 text-xs whitespace-nowrap flex"> |
29 | 30 | {{ openingHours.open.hours }}:{{ openingHours.open.minutes.toString().padStart(2, '0') }}
|
30 | 31 | -
|
31 | 32 | {{ openingHours.close.hours }}:{{ openingHours.close.minutes.toString().padStart(2, '0') }}
|
32 | 33 | </p>
|
33 | 34 | </div>
|
| 35 | + <UPopover |
| 36 | + v-if="nonNormalOpeningHours" |
| 37 | + mode="click" |
| 38 | + :label="$t('aria.nonNormalOpeningHours')" |
| 39 | + :ui="{ wrapper: 'w-0' }" |
| 40 | + > |
| 41 | + <UButton |
| 42 | + icon="iconoir:warning-circle-solid" |
| 43 | + color="orange" |
| 44 | + variant="link" |
| 45 | + size="xs" |
| 46 | + class="translate-y-1" |
| 47 | + :aria-label="$t('aria.nonNormalOpeningHours')" |
| 48 | + /> |
| 49 | + <template #panel> |
| 50 | + <div class="w-96 max-w-[90vw]"> |
| 51 | + <UAlert |
| 52 | + type="warning" |
| 53 | + icon="iconoir:warning-circle-solid" |
| 54 | + :description="$t('restaurant.openingHoursDisclaimer')" |
| 55 | + /> |
| 56 | + </div> |
| 57 | + </template> |
| 58 | + </UPopover> |
34 | 59 | </div>
|
35 | 60 | </template>
|
36 | 61 | <div v-if="menus?.length"
|
|
50 | 75 | <br>
|
51 | 76 | {{ $t("noMenu") }}
|
52 | 77 | <br>
|
53 |
| - <UAlert class="mt-5" type="info" icon="ion:information-circle-outline" description="This message is only visible in development mode"/> |
| 78 | + <UAlert class="mt-5" type="info" icon="ion:information-circle-outline" description="This restaurant is hidden in production mode"/> |
54 | 79 | </UCard>
|
55 | 80 | </DevOnly>
|
56 | 81 | </template>
|
@@ -105,7 +130,16 @@ export default defineNuxtComponent({
|
105 | 130 | openingHours() {
|
106 | 131 | if(!this.restaurant.openingHours) return;
|
107 | 132 | const today = this.date.getDay();
|
| 133 | + const nonNormal = this.nonNormalOpeningHours; |
| 134 | + if(nonNormal) { |
| 135 | + // console.log(`Non-normal opening hours for ${this.restaurant.name} on ${this.date.toDateString()}: ${nonNormal.open.hours}:${nonNormal.open.minutes} - ${nonNormal.close.hours}:${nonNormal.close.minutes}`); |
| 136 | + return nonNormal; |
| 137 | + } |
108 | 138 | return this.restaurant.openingHours.find(oh => oh.day === today);
|
| 139 | + }, |
| 140 | + nonNormalOpeningHours() { |
| 141 | + const today = this.date.getDay(); |
| 142 | + return this.restaurant.nonNormalOpeningHours?.find(oh => (new Date(oh.day)).getDay() === today); |
109 | 143 | }
|
110 | 144 | },
|
111 | 145 | });
|
|
0 commit comments