Skip to content

Commit

Permalink
refactor: apply script setup style to openg hour #353
Browse files Browse the repository at this point in the history
  • Loading branch information
@wazolab @frodrigo
wazolab authored and frodrigo committed Oct 30, 2024
1 parent ad5b825 commit d5ef09d
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 182 deletions.
3 changes: 2 additions & 1 deletion components/Fields/Field.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import DateRange, { isDateRangeEmpty } from '~/components/Fields/DateRange.vue'
import Facebook from '~/components/Fields/Facebook.vue'
import LinkedIn from '~/components/Fields/LinkedIn.vue'
import Instagram from '~/components/Fields/Instagram.vue'
import OpeningHours, { isOpeningHoursSupportedOsmTags } from '~/components/Fields/OpeningHours.vue'
import OpeningHours from '~/components/Fields/OpeningHours.vue'
import { isOpeningHoursSupportedOsmTags } from '~/composables/useOpeningHours'
import Phone from '~/components/Fields/Phone.vue'
import RoutesField from '~/components/Fields/RoutesField.vue'
import Stars from '~/components/Fields/Stars.vue'
Expand Down
318 changes: 137 additions & 181 deletions components/Fields/OpeningHours.vue
View file
Original file line number Diff line number Diff line change
@@ -1,201 +1,157 @@
<script lang="ts">
<script setup lang="ts">
import type { optional_conf } from 'opening_hours'
import OpeningHours from 'opening_hours'
import { mapState } from 'pinia'
import type { PropType } from 'vue'
import { defineNuxtComponent } from '#app'
import { storeToRefs } from 'pinia'
import RelativeDate from '~/components/UI/RelativeDate.vue'
import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
import { siteStore } from '~/stores/site'
const PointTime = [/^collection_times$/, /^service_times$/]
// List of tag keys regex copied from opening_hours.js
const SupportedOsmKeys = [
...PointTime,
/^opening_hours$/,
/^opening_hours:.+/,
/.+:opening_hours$/,
/.+:opening_hours:.+/,
/^smoking_hours$/,
/^happy_hours$/,
/^lit$/,
]
function isSupportedOsmTags(keys: RegExp[], key: string): boolean {
return keys.some(regexKey => regexKey.test(key))
}
export function isOpeningHoursSupportedOsmTags(key: string): boolean {
return isSupportedOsmTags(SupportedOsmKeys, key)
}
export default defineNuxtComponent({
components: {
RelativeDate,
},
props: {
context: {
type: String as PropType<PropertyTranslationsContextEnum>,
required: true,
},
tagKey: {
type: String as PropType<string>,
required: true,
},
openingHours: {
type: String as PropType<string>,
required: true,
},
baseDate: {
type: Date as PropType<Date>,
default: () => new Date(),
},
},
computed: {
...mapState(siteStore, ['locale', 'settings']),
import { siteStore as useSiteStore } from '~/stores/site'
import { PointTime, isSupportedOsmTags } from '~/composables/useOpeningHours'
//
// Props
//
const props = withDefaults(defineProps<{
baseDate?: Date
context: PropertyTranslationsContextEnum
openingHours: string
tagKey: string
}>(), {
baseDate: () => new Date(),
})
isPointTime(): boolean {
return isSupportedOsmTags(PointTime, this.tagKey)
},
//
// Composables
//
const { locale, settings } = storeToRefs(useSiteStore())
const { t } = useI18n()
comment() {
const oh = this.OpeningHoursFactory()
return oh?.getComment(this.baseDate)
},
//
// Computed
//
const isPointTime = computed(() => isSupportedOsmTags(PointTime, props.tagKey))
isCompact(): boolean {
return this.context === PropertyTranslationsContextEnum.Card
},
const comment = computed(() => {
const oh = OpeningHoursFactory()
return oh?.getComment(props.baseDate)
})
pretty(): [string | undefined, string[]][] | undefined {
const oh = this.OpeningHoursFactory()
if (oh) {
let prettyString
try {
prettyString = oh
.prettifyValue({
// @ts-expect-error: Fix typings
conf: {
locale: this.locale || 'en',
rule_sep_string: '\n',
print_semicolon: false,
},
})
.replace(/(^\w|\s\w)/g, c => c.toUpperCase())
.split('\n')
}
catch (e) {
return undefined
}
if (!this.variable) {
return [[undefined, prettyString]]
}
else {
const ret: [string | undefined, string[]][] = []
// Stable group by month
prettyString
.map(
row =>
(row.includes(': ')
? [
row.slice(0, row.indexOf(': ')),
row.slice(row.indexOf(': ') + 1 + 1),
]
: [undefined, row]) as [string | undefined, string],
)
.forEach(([month, date]) => {
const i = ret.findIndex(r => r[0] === month)
if (i >= 0)
ret[i][1].push(date)
else
ret.push([month, [date]])
})
return ret
}
}
else {
return undefined
}
},
const isCompact = computed(() => props.context === PropertyTranslationsContextEnum.Card)
variable(): boolean {
const oh = this.OpeningHoursFactory()
try {
return !oh?.isWeekStable()
}
catch (e) {
return false
}
},
const variable = computed(() => {
const oh = OpeningHoursFactory()
try {
return !oh?.isWeekStable()
}
catch (e) {
return false
}
})
nextChange():
| undefined
| {
type: 'opened' | 'openAt'
nextChange: Date
} {
const oh = this.OpeningHoursFactory()
if (oh) {
try {
const nextChange = oh.getNextChange(this.baseDate)
if (nextChange) {
return {
type: oh.getState(this.baseDate) ? 'opened' : 'openAt',
nextChange,
}
}
}
catch (e) {
return undefined
}
}
const pretty = computed((): [string | undefined, string[]][] | undefined => {
const oh = OpeningHoursFactory()
if (oh) {
let prettyString
try {
prettyString = oh
.prettifyValue({
// @ts-expect-error: Fix typings
conf: {
locale: locale.value || 'en',
rule_sep_string: '\n',
print_semicolon: false,
},
})
.replace(/(^\w|\s\w)/g, (c: any) => c.toUpperCase())
.split('\n')
}
catch (e) {
return undefined
},
},
}
if (!variable.value) {
return [[undefined, prettyString]]
}
else {
const ret: [string | undefined, string[]][] = []
// Stable group by month
prettyString
.map((row: any) => (
row.includes(': ')
? [row.slice(0, row.indexOf(': ')), row.slice(row.indexOf(': ') + 1 + 1)]
: [undefined, row]
) as [string | undefined, string])
.forEach(([month, date]: any) => {
const i = ret.findIndex(r => r[0] === month)
if (i >= 0)
ret[i][1].push(date)
else
ret.push([month, [date]])
})
return ret
}
}
else {
return undefined
}
})
methods: {
OpeningHoursFactory(): OpeningHours | undefined {
try {
// https://github.com/opening-hours/opening_hours.js/issues/428
// @ts-expect-error: Fix typings
const optionalConf: optional_conf = {
tag_key: this.tagKey,
const nextChange = computed((): { type: 'opened' | 'openAt', nextChange: Date } | undefined => {
const oh = OpeningHoursFactory()
if (oh) {
try {
const nextChange = oh.getNextChange(props.baseDate)
if (nextChange) {
return {
type: oh.getState(props.baseDate) ? 'opened' : 'openAt',
nextChange,
}
return new OpeningHours(
this.openingHours,
{
lon:
(this.settings!.bbox_line.coordinates[0][1]
+ this.settings!.bbox_line.coordinates[1][1])
/ 2,
lat:
(this.settings!.bbox_line.coordinates[0][0]
+ this.settings!.bbox_line.coordinates[1][0])
/ 2,
address: {
country_code: this.settings!.default_country,
state: this.settings!.default_country_state_opening_hours,
},
},
optionalConf,
)
}
catch (e) {}
},
},
}
catch (e) {
return undefined
}
}
return undefined
})
//
// Methods
//
function OpeningHoursFactory(): OpeningHours | undefined {
try {
// https://github.com/opening-hours/opening_hours.js/issues/428
// @ts-expect-error: Fix typings
const optionalConf: optional_conf = {
tag_key: props.tagKey,
}
return new OpeningHours(
props.openingHours,
{
lon:
(settings.value!.bbox_line.coordinates[0][1]
+ settings.value!.bbox_line.coordinates[1][1])
/ 2,
lat:
(settings.value!.bbox_line.coordinates[0][0]
+ settings.value!.bbox_line.coordinates[1][0])
/ 2,
address: {
country_code: settings.value!.default_country,
state: settings.value!.default_country_state_opening_hours,
},
},
optionalConf,
)
}
catch (e) {}
}
</script>

<template>
<div v-if="openingHours">
<span hidden>{{ openingHours }}</span>
<template v-if="nextChange">
<p v-if="isPointTime" id="next" class="tw-text-emerald-500">
{{ $t('openingHours.next') }}
{{ t('openingHours.next') }}
<RelativeDate :date="nextChange.nextChange" />
</p>
<template v-else>
Expand All @@ -204,10 +160,10 @@ export default defineNuxtComponent({
id="opened"
class="tw-text-emerald-500"
>
{{ $t('openingHours.opened') }}
{{ t('openingHours.opened') }}
<template v-if="nextChange.nextChange">
-
{{ $t('openingHours.closeAt') }}
{{ t('openingHours.closeAt') }}
<RelativeDate :date="nextChange.nextChange" />
</template>
</p>
Expand All @@ -216,10 +172,10 @@ export default defineNuxtComponent({
id="openAt"
class="tw-text-red-500"
>
{{ $t('openingHours.closed') }}
{{ t('openingHours.closed') }}
<template v-if="nextChange.nextChange">
-
{{ $t('openingHours.openAt') }}
{{ t('openingHours.openAt') }}
<RelativeDate :date="nextChange.nextChange" />
</template>
</p>
Expand All @@ -246,7 +202,7 @@ export default defineNuxtComponent({
</li>
</ul>
<template v-if="variable">
<p>{{ $t('openingHours.variableWeek') }}</p>
<p>{{ t('openingHours.variableWeek') }}</p>
</template>
</template>
<template v-if="isCompact && comment">
Expand Down
Loading

0 comments on commit d5ef09d

Please sign in to comment.