From 75156d4e5e379ca3ddf632d3b7171f912bca4ddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helge-Mikael=20Nordg=C3=A5rd?=
 <helge-mikael.nordgard@arcticsoftware.no>
Date: Mon, 5 May 2025 22:07:51 +0200
Subject: [PATCH] Implemented missing component, moved markdown style to main
 css

---
 resources/css/app.css                         | 142 +++++++++++++
 .../Statics/FrontPageEventsListRendered.vue   | 195 ++++++++++++++++++
 .../Statics/FrontPageMembershipInfo.vue       | 146 +------------
 .../FrontPageMembershipInfoRendered.vue       | 150 +-------------
 .../js/pages/Backend/PageBuilder/Preview.vue  |  21 --
 5 files changed, 340 insertions(+), 314 deletions(-)
 create mode 100644 resources/js/components/Blocks/Statics/FrontPageEventsListRendered.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 7a0abaf..10b860a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -269,3 +269,145 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+
+.memberShipBlock p {
+  margin-bottom: 12px;
+}
+
+.memberShipBlock p:last-child {
+  margin-bottom: 0;
+}
+
+.memberShipBlock a {
+  color: #f59e0b;
+  text-decoration: underline;
+}
+
+.memberShipBlock a:hover {
+  color: #d97706;
+  text-decoration: none;
+}
+
+.memberShipBlock a:active {
+  color: #d97706;
+  text-decoration: none;
+}
+
+.memberShipBlock a:focus {
+  color: #d97706;
+  text-decoration: none;
+}
+
+.memberShipBlock a:visited {
+  color: #fcd34d;
+  text-decoration: underline;
+}
+
+.memberShipBlock ul {
+  color: #9ca3af;
+  margin-left: 20px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  list-style-type: circle;
+}
+
+.memberShipBlock li p {
+  color: #9ca3af;
+  font-size: 1rem;
+}
+
+.memberShipBlock ul li {
+  margin-bottom: 6px;
+}
+
+.memberShipBlock ul li:last-child {
+  margin-bottom: 0;
+}
+
+.memberShipBlock ol {
+  color: #9ca3af;
+  margin-left: 20px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  list-style-type: decimal;
+}
+
+.memberShipBlock ol li {
+  margin-bottom: 6px;
+}
+
+.memberShipBlock ol li:last-child {
+  margin-bottom: 0;
+}
+
+.memberShipBlock hr {
+  border-top-color: #f59e0b;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.memberShipBlock h1 {
+  @apply font-arctic text-4xl;
+}
+
+.memberShipBlock h2 {
+  color: #f59e0b;
+  font-family: 'Arctic';
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: x-large;
+}
+
+.memberShipBlock h3 {
+  color: #fff;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: large;
+  font-weight: bold;
+}
+
+.memberShipBlock h4 {
+  color: #f59e0b;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: medium;
+  font-weight: bold;
+}
+
+.memberShipBlock h5 {
+  color: #f59e0b;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: small;
+  font-weight: bold;
+}
+
+.memberShipBlock h6 {
+  color: #f59e0b;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: x-small;
+  font-weight: bold;
+}
+
+.memberShipBlock blockquote {
+  color: #9ca3af;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  margin-left: 20px;
+  padding-left: 10px;
+  border-left: 3px solid #ccc;
+  font-style: italic;
+}
+
+.memberShipBlock code {
+  background-color: #1f2937;
+  color: #ef4444;
+  border-radius: 0.3em;
+  padding: 8px 10px 12px;
+  white-space: nowrap;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
\ No newline at end of file
diff --git a/resources/js/components/Blocks/Statics/FrontPageEventsListRendered.vue b/resources/js/components/Blocks/Statics/FrontPageEventsListRendered.vue
new file mode 100644
index 0000000..3537ebf
--- /dev/null
+++ b/resources/js/components/Blocks/Statics/FrontPageEventsListRendered.vue
@@ -0,0 +1,195 @@
+<script setup>
+    import { Link, usePage } from '@inertiajs/vue3';
+    import { onMounted, defineProps, computed, ref, nextTick } from 'vue';
+    import { gsap } from 'gsap';
+    import { initFlowbite } from 'flowbite';
+
+    const { block, blockData, frontpage } = defineProps({
+        block: {
+            type: Object,
+            required: true,
+        },
+        blockData: {
+            type: Object,
+            default: () => ({})
+        },
+        frontpage: {
+            type: Boolean
+        }
+    });
+
+    onMounted(() => {
+        initFlowbite();
+    });
+
+    const articlesContainer = ref(null);
+    const page = usePage();
+
+    /**
+     * Retrieve only 4 event articles
+     */
+
+     const limitedArticles = computed(() => blockData.articles.slice(0, 4));
+     
+    /**
+     * Paginate event articles into arrays of 4
+     */
+
+    const paginateEventArticles = computed(() => {
+        const pageSize = 4;
+        return blockData.events.reduce((acc, article, index) => {
+            const chunkIndex = Math.floor(index / pageSize);
+            if(!acc[chunkIndex]) {
+                acc[chunkIndex] = []; // start a new chunk
+            }
+            acc[chunkIndex].push(article);
+            return acc;
+        }, []);
+    });
+
+    const currentEventPage = ref(0);
+
+    // Use this computed property to get the articles of the current page
+    
+    const currentArticles = computed(() => paginateEventArticles.value[currentEventPage.value]);
+
+    const nextPage = () => {
+        if (currentEventPage.value < paginateEventArticles.value.length - 1) {
+            // Animate current articles out to the left
+            gsap.to(articlesContainer.value, {x: -100, opacity: 0, onComplete: () => {
+                currentEventPage.value++;
+                // Wait for the DOM to update
+                nextTick().then(() => {
+                    // Animate new articles in from the right
+                    gsap.fromTo(articlesContainer.value, {x: 100, opacity: 0}, {x: 0, opacity: 1});
+                });
+            }});
+        }
+    };
+
+    const prevPage = () => {
+        if (currentEventPage.value > 0) {
+            // Animate current articles out to the right
+            gsap.to(articlesContainer.value, {x: 100, opacity: 0, onComplete: () => {
+                currentEventPage.value--;
+                // Wait for the DOM to update
+                nextTick().then(() => {
+                    // Animate new articles in from the left
+                    gsap.fromTo(articlesContainer.value, {x: -100, opacity: 0}, {x: 0, opacity: 1});
+                });
+            }});
+        }
+    };
+
+    // Check if currentPage is the first page
+    const isFirstPage = computed(() => currentEventPage.value === 0);
+
+    // Check if currentPage is the last page
+    const isLastPage = computed(() => currentEventPage.value === paginateEventArticles.value.length - 1);
+    
+    /** Get a node value from json */
+
+    const extractMetaValue = (node, key) => {
+        let meta = JSON.parse(node.fs_meta);
+
+        return meta[key];
+    };
+
+    /**
+     * formatDate
+     * 
+     * Formats a date string to a Norwegian date format.
+     * 
+     * @param {
+     * } dateString 
+     */
+
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        const day = ('0' + date.getDate()).slice(-2);
+        const month = ('0' + (date.getMonth() + 1)).slice(-2);
+        const year = date.getFullYear();
+
+        return `${day}/${month}/${year}`;
+    };
+
+    /**
+     * dateString
+     * 
+     * Formats a date string to a Norwegian time format.
+     * @param {*} dateString 
+     */
+
+    const formatTime = (dateString) => {
+        const date = new Date(dateString);
+        return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
+    };
+
+</script>
+
+<template>
+    <section id="events" class="relative block w-full h-screen overflow-hidden">
+        <div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
+        <div class="absolute inset-0 bg-black opacity-80"></div>
+        <div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
+            <div class="flex-row justify-center items-center">
+                <h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel' }}</h1>
+                <h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Merkelapp' }}</h2>
+                <h3 v-if="block.showsecondarylabel && !$page.props.auth.user" class="text-center text-gray-400 font-serif text-sm md:text-md">{{ block.secondarylabel || 'Sekundær merkelapp' }}</h3>
+            </div>
+
+            <div class="mx-auto max-w-[1280px]">
+                <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
+                    <!-- Begin events loop -->
+                    <div
+                        v-for="(event, index) in blockData.events"
+                        :key="event.id"
+                        class="max-w-sm rounded-lg shadow-xl bg-gray-800 border-gray-700 relative"
+                    >
+                        <div class="relative z-0">
+                            <Link v-if="event.image_id" :href="route('event', event.slug)">
+                                <img class="rounded-t-lg" :src="extractMetaValue(event.image, 'symbolic_name')" :alt="extractMetaValue(event.image, 'title')" />
+                                <!-- Badge positioned absolutely within the relative container -->
+                                <template v-if="event.capacity">
+                                    <div v-if="event.signups.length === 0" class="absolute top-0 right-0 bg-blue-100 text-blue-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
+                                        {{ event.capacity - event.signups.length }} plasser igjen
+                                    </div>
+                                    <div v-else-if="event.signups.length < (event.capacity / 2)" class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
+                                        {{ event.capacity - event.signups.length }} plasser igjen
+                                    </div>
+                                    <div v-else-if="event.signups.length > (event.capacity / 2) && event.signups.length != event.capacity" class="absolute top-0 right-0 bg-yellow-100 text-yellow-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-300 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
+                                        {{ event.capacity - event.signups.length }} plasser igjen
+                                    </div>
+                                    <div v-else class="absolute top-0 right-0 bg-red-100 text-red-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-red-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
+                                        Alle plasser er tatt
+                                    </div>
+                                </template>
+                                <div v-else class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
+                                    Ingen plassrestriksjoner
+                                </div>
+                            </Link>
+                        </div>
+                        <div class="p-5">
+                            <Link :href="route('event', event.slug)">
+                                <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">{{ event.title }}</h5>
+                            </Link>
+                            <p class="text-sm text-green-400 mb-1">
+                                Oppstart: {{ formatDate(event.start) }}, klokken {{ formatTime(event.start) }}
+                            </p>
+                            <p v-if="event.signups.length > 0" class="mb-2 text-xs text-green-200">{{ event.signups.length }} deltager(e) har meldt seg på så langt</p>
+                            <p v-else class="mb-2 text-xs text-red-300">Ingen påmeldte så langt</p>
+                            <p class="mb-3 font-normal text-gray-400">{{ event.excerpt }}</p>
+                            <Link :href="route('event', event.slug)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-green-600 hover:bg-green-700 focus:ring-green-800">
+                                Les mer
+                                <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                                </svg>
+                            </Link>
+                        </div>
+                    </div>
+                    <!-- End events loop -->
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.vue b/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.vue
index ca040c1..c05990a 100644
--- a/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.vue
+++ b/resources/js/components/Blocks/Statics/FrontPageMembershipInfo.vue
@@ -46,148 +46,4 @@
             </div>
         </div>
     </section>
-</template>
-
-<style>
-
-.memberShipBlock p {
-    margin-bottom: 12px;
-}
-
-.memberShipBlock p:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock a {
-    color: #f59e0b;
-    text-decoration: underline;
-}
-
-.memberShipBlock a:hover {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:active {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:focus {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:visited {
-    color: #fcd34d;
-    text-decoration: underline;
-}
-
-.memberShipBlock ul {
-    color: #9ca3af;
-    margin-left: 20px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    list-style-type: circle;
-}
-
-.memberShipBlock li p {
-    color: #9ca3af;
-    font-size: 1rem;
-}
-
-.memberShipBlock ul li {
-    margin-bottom: 6px;
-}
-
-.memberShipBlock ul li:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock ol {
-    color: #9ca3af;
-    margin-left: 20px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    list-style-type: decimal;
-}
-
-.memberShipBlock ol li {
-    margin-bottom: 6px;
-}
-
-.memberShipBlock ol li:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock hr {
-    border-top-color: #f59e0b;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-.memberShipBlock h1 {
-    @apply font-arctic text-4xl;
-}
-
-.memberShipBlock h2 {
-    color: #f59e0b;
-    font-family: 'Arctic';
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: x-large;
-}
-
-.memberShipBlock h3 {
-    color: #fff;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: large;
-    font-weight: bold;
-}
-
-.memberShipBlock h4 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: medium;
-    font-weight: bold;
-}
-
-.memberShipBlock h5 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: small;
-    font-weight: bold;
-}
-
-.memberShipBlock h6 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: x-small;
-    font-weight: bold;
-}
-
-.memberShipBlock blockquote {
-    color: #9ca3af;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    margin-left: 20px;
-    padding-left: 10px;
-    border-left: 3px solid #ccc;
-    font-style: italic;
-}
-
-.memberShipBlock code {
-    background-color: #1f2937;
-    color: #ef4444;
-    border-radius: 0.3em;
-    padding: 8px 10px 12px;
-    white-space: nowrap;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-</style>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/Blocks/Statics/FrontPageMembershipInfoRendered.vue b/resources/js/components/Blocks/Statics/FrontPageMembershipInfoRendered.vue
index f5e6ab9..7c6b01d 100644
--- a/resources/js/components/Blocks/Statics/FrontPageMembershipInfoRendered.vue
+++ b/resources/js/components/Blocks/Statics/FrontPageMembershipInfoRendered.vue
@@ -65,12 +65,11 @@
             </div>
 
             <div class="mx-auto max-w-[1280px]">
-                <!-- <img src="/img/medlemmer.jpg" class="border-2 w-[200px] sm:w-[320px] md:w-[640px] lg:w-[800px] border-green-700 rounded-lg float-left mb-1 md:mb-4 mx-2 md:mx-6" alt="ØMS Medlemmer"> -->
                 <p v-if="block.showprices" class="mt-2 text-white">
                     Prisen for medlemskap er
                     {{ page.props.pageSettings['membership_fee'] }},- kr per år for voksne eller {{ page.props.pageSettings['membership_child_fee'] }} 
                     for barn/ungdom under {{ page.props.pageSettings['membership_child_age_limit'] }} år. Du må være 
-                    {{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem. hos oss. Medlemskapet
+                    {{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem hos oss. Medlemskapet
                     varer i {{ page.props.pageSettings['membership_time_interval_months'] }} måneder
                     <span v-if="page.props.pageSettings['membership_annual']"> eller ut kalenderåret </span>
                     før det må fornyes. Betalinger kan gjøres på nettsiden via vipps <span v-if="page.props.pageSettings['module_stripe_payment']">eller bankkort</span> ved å besøke 
@@ -89,149 +88,4 @@
             </div>
         </div>
     </section>
-</template>
-
-<style>
-
-.memberShipBlock p {
-    margin-bottom: 12px;
-}
-
-.memberShipBlock p:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock a {
-    color: #f59e0b;
-    text-decoration: underline;
-}
-
-.memberShipBlock a:hover {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:active {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:focus {
-    color: #d97706;
-    text-decoration: none;
-}
-
-.memberShipBlock a:visited {
-    color: #fcd34d;
-    text-decoration: underline;
-}
-
-.memberShipBlock ul {
-    color: #9ca3af;
-    margin-left: 20px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    list-style-type: circle;
-}
-
-.memberShipBlock li p {
-    color: #9ca3af;
-    font-size: 1rem;
-}
-
-.memberShipBlock ul li {
-    margin-bottom: 6px;
-}
-
-.memberShipBlock ul li:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock ol {
-    color: #9ca3af;
-    margin-left: 20px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    list-style-type: decimal;
-}
-
-.memberShipBlock ol li {
-    margin-bottom: 6px;
-}
-
-.memberShipBlock ol li:last-child {
-    margin-bottom: 0;
-}
-
-.memberShipBlock hr {
-    border-top-color: #f59e0b;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-.memberShipBlock h1 {
-    @apply font-arctic;
-    @apply text-4xl;
-}
-
-.memberShipBlock h2 {
-    color: #f59e0b;
-    font-family: 'Arctic';
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: x-large;
-}
-
-.memberShipBlock h3 {
-    color: #fff;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: large;
-    font-weight: bold;
-}
-
-.memberShipBlock h4 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: medium;
-    font-weight: bold;
-}
-
-.memberShipBlock h5 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: small;
-    font-weight: bold;
-}
-
-.memberShipBlock h6 {
-    color: #f59e0b;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    font-size: x-small;
-    font-weight: bold;
-}
-
-.memberShipBlock blockquote {
-    color: #9ca3af;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    margin-left: 20px;
-    padding-left: 10px;
-    border-left: 3px solid #ccc;
-    font-style: italic;
-}
-
-.memberShipBlock code {
-    background-color: #1f2937;
-    color: #ef4444;
-    border-radius: 0.3em;
-    padding: 8px 10px 12px;
-    white-space: nowrap;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/resources/js/pages/Backend/PageBuilder/Preview.vue b/resources/js/pages/Backend/PageBuilder/Preview.vue
index 925b96f..9bd0277 100644
--- a/resources/js/pages/Backend/PageBuilder/Preview.vue
+++ b/resources/js/pages/Backend/PageBuilder/Preview.vue
@@ -260,27 +260,6 @@
     </Head>
 
     <div ref="pageRef" class="min-h-screen w-full bg-black">
-        <template v-if="revision.page.main"> <!-- Show Main menu if the current page is the front page (main page) -->
-            <MainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" :menuLinks="menuLinks" />
-        </template>
-        <template v-else> <!-- Show the external main menu, if the current page is NOT the front page (main page)  -->
-            <ExternalMainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" class="z-40" />
-        </template>
-        <SmallHeader />
-
-        <!-- Hovedmeny knapp -->
-        <div class="fixed top-0 right-0 p-4 z-50">
-            <button ref="menuButton" @click="clickMenuButton" @mouseover="handleMenuButtonOver" @mouseout="handleMenuButtonOut" class="p-2 text-white rounded-full shadow-md shadow-black" :class="{'bg-sky-600': showMainMenu, 'bg-green-700': !showMainMenu }">
-                <svg v-if="showMainMenu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-
-                <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                </svg>
-            </button>
-        </div>
-
         <!-- Komponentrendring -->
         <component
             v-for="block in revision.content"