diff --git a/resources/js/components/SMPanel.vue b/resources/js/components/SMPanel.vue index 00680bf..6ee2e9f 100644 --- a/resources/js/components/SMPanel.vue +++ b/resources/js/components/SMPanel.vue @@ -28,6 +28,10 @@

{{ location }}

+
+ +

{{ ages }}

+
$

{{ computedPrice }}

@@ -149,6 +153,11 @@ const props = defineProps({ default: "", required: false, }, + ages: { + type: String, + default: "", + required: false, + }, }); let styleObject = reactive({}); @@ -324,12 +333,13 @@ watch( .sm-panel-date, .sm-panel-location, - .sm-panel-price { + .sm-panel-price, + .sm-panel-ages { display: flex; flex-direction: row; align-items: top; font-size: 80%; - margin-bottom: 0.4rem; + margin-bottom: 0rem; .icon { flex: 0 1 1rem; diff --git a/resources/js/views/EventList.vue b/resources/js/views/EventList.vue index fa8023c..699ec3c 100644 --- a/resources/js/views/EventList.vue +++ b/resources/js/views/EventList.vue @@ -45,7 +45,8 @@ : item.event.address " :banner="item.banner" - :banner-type="item.bannerType"> + :banner-type="item.bannerType" + :ages="computedAges(item.event)"> { handleLoad(); }; +/** + * Return a human readable Ages string. + * + * @param item + */ +const computedAges = (item: Event): string => { + const trimmed = item.ages.trim(); + const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/; + + if (regex.test(trimmed)) { + return `Ages ${trimmed}`; + } + + return item.ages; +}; + watch( () => postsPage.value, () => {