add ages

resources/js/components/SMPanel.vue

@@ -28,6 +28,10 @@
                 <ion-icon class="icon" name="location-outline" />
                 <p>{{ location }}</p>
             </div>
+            <div v-if="ages" class="sm-panel-ages">
+                <ion-icon class="icon" name="body-outline" />
+                <p>{{ ages }}</p>
+            </div>
             <div v-if="price" class="sm-panel-price">
                 <span class="icon">$</span>
                 <p>{{ computedPrice }}</p>
@@ -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;

resources/js/views/EventList.vue

@@ -45,7 +45,8 @@
                             : item.event.address
                     "
                     :banner="item.banner"
-                    :banner-type="item.bannerType"></SMPanel>
+                    :banner-type="item.bannerType"
+                    :ages="computedAges(item.event)"></SMPanel>
             </SMPanelList>
             <SMPagination
                 v-model="postsPage"
@@ -217,6 +218,22 @@ const handleFilter = async () => {
     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,
     () => {