Add urls for registration and single view

src/Eventindex.ce.vue

@@ -1,45 +1,23 @@
 <template>
-  <div
-    class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito"
-  >
-    <a
-      v-for="(event, index) in events"
-      :key="index"
-      href="#"
-      @click.prevent="makeVisible(event)"
-      class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group"
-    >
+  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito">
+    <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
+      class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
       <img :src="event.image" />
       <div class="p-6 flex flex-col grow">
-        <h2
-          class="font-arvo flex-none text-primary text-sm md:text-base"
-          v-text="event.name"
-        ></h2>
+        <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
         <div class="flex items-baseline text-sm">
           <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
-          <span
-            class="text-sm font-semibold text-gray-800 ml-2"
-            v-text="event.dates"
-          ></span>
+          <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
         </div>
-        <div
-          class="grow text-sm leading-normal text-gray-800 mt-3"
-          v-text="event.excerpt"
-        ></div>
-        <div
-          class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3"
-        >
+        <div class="grow text-sm leading-normal text-gray-800 mt-3" v-text="event.excerpt"></div>
+        <div class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
           Zur Veranstaltung
         </div>
       </div>
     </a>
   </div>
 
-  <popup
-    v-if="visibleEvent !== null"
-    :event="visibleEvent"
-    @close="hideEvent"
-  ></popup>
+  <popup v-if="visibleEvent !== null" :event="visibleEvent" @close="hideEvent"></popup>
 </template>
 
 <script setup>
@@ -52,14 +30,22 @@ const props = defineProps({
     required: true,
     type: String,
   },
-  urlPattern: {
+  indexUrl: {
     required: true,
     type: String,
   },
-  overviewUrl: {
+  singleUrl: {
     required: true,
     type: String,
   },
+  registerUrl: {
+    required: true,
+    type: String,
+  },
+  event: {
+    required: false,
+    type: String,
+  },
 });
 
 const events = ref([]);
@@ -68,19 +54,24 @@ const visibleEvent = ref(null);
 async function reloadEvents() {
   const results = await axios.get(props.url);
   events.value = results.data.data;
+  if (props.event) {
+    visibleEvent.value = events.value.find(
+      (event) => event.slug === props.event
+    );
+  }
 }
 
 function makeVisible(event) {
   window.history.pushState(
     {},
     "",
-    props.urlPattern.replace("{slug}", event.slug)
+    props.singleUrl.replace(":slug", event.slug)
   );
   visibleEvent.value = event;
 }
 
 function hideEvent() {
-  window.history.pushState({}, "", props.overviewUrl);
+  window.history.pushState({}, "", props.indexUrl);
   visibleEvent.value = null;
 }
 reloadEvents();

src/main.js

@@ -2,7 +2,7 @@ import { defineCustomElement } from "vue";
 import classes from "./style.css?inline";
 import carousel from "vue3-carousel/dist/carousel.css?inline";
 import carouselStyle from "./carousel.css?inline";
-import Eventoverview from "./Eventoverview.ce.vue";
+import Eventindex from "./Eventindex.ce.vue";
 import Eventform from "./Eventform.ce.vue";
 
 import axios from "axios";
@@ -17,7 +17,7 @@ window.hasKeys = function (object, expected) {
 };
 
 Eventform.styles = [classes, carousel, carouselStyle];
-Eventoverview.styles = [classes];
+Eventindex.styles = [classes];
 
 customElements.define("event-form", defineCustomElement(Eventform));
-customElements.define("event-overview", defineCustomElement(Eventoverview));
+customElements.define("event-index", defineCustomElement(Eventindex));

vite.config.js

@@ -1,28 +1,29 @@
-import {defineConfig} from 'vite';
-import vue from '@vitejs/plugin-vue';
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        vue({
-            template: {
-                compilerOptions: {
-                    isCustomElement: (tag) => tag.includes('event-form'),
-                },
-            },
-        }),
-    ],
-    build: {
-        lib: {
-            entry: './src/main.js',
-            name: 'main',
-            fileName: 'main',
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) =>
+            tag.includes("event-form") || tag.includes("event-index"),
         },
+      },
+    }),
+  ],
+  build: {
+    lib: {
+      entry: "./src/main.js",
+      name: "main",
+      fileName: "main",
     },
-    define: {
-        'process.env': process.env,
-    },
-    server: {
-        port: 5174,
-    },
+  },
+  define: {
+    "process.env": process.env,
+  },
+  server: {
+    port: 5174,
+  },
 });