Add proxy

src/Eventform.ce.vue

@@ -191,9 +191,6 @@ const colClasses = {
 };
 
 const props = defineProps({
-    eventId: {
-        type: Number,
-    },
     editable: {
         type: Boolean,
         default: () => false,
@@ -202,7 +199,6 @@ const props = defineProps({
         type: String,
         default: () => "{}",
     },
-    baseUrl: {},
 });
 
 const active = ref(0);
@@ -215,7 +211,9 @@ watch(active, function (newValue) {
 
 const v = computed(() => {
     loaded.value = false;
-    var values = JSON.parse(props.value);
+    var values = window.adrema_event
+        ? window.adrema_event
+        : JSON.parse(props.value);
     var p = {};
 
     values.sections.forEach(function (section) {

src/Eventindex.ce.vue

@@ -1,84 +1,76 @@
 <template>
-  <div>
+    <div>
-    <div
+        <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
-      class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
+            <a
-      <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
+                v-for="(event, index) in events"
-        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 max-w-[400px]">
+                :key="index"
-        <img :src="event.image"
+                href="#"
-          class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]" />
+                @click.prevent="makeVisible(event)"
-        <div class="p-6 flex flex-col grow">
+                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 max-w-[400px]"
-          <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">
+                <img
-            <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
+                    :src="event.image"
-            <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
+                    class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]"
-          </div>
+                />
-          <div class="grow text-sm leading-normal text-gray-800 mt-3" v-text="event.excerpt"></div>
+                <div class="p-6 flex flex-col grow">
-          <div
+                    <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
-            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="flex items-baseline text-sm">
-            Zur Veranstaltung
+                        <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
-          </div>
+                        <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">Zur Veranstaltung</div>
+                </div>
+            </a>
         </div>
-      </a>
-    </div>
 
-    <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent">
+        <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </popup>
-    </popup>
+    </div>
-  </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import {ref} from 'vue';
-import CalendarIcon from "./components/icons/CalendarIcon.vue";
+import CalendarIcon from './components/icons/CalendarIcon.vue';
-import Popup from "./components/Popup.vue";
+import Popup from './components/Popup.vue';
 
 const props = defineProps({
-  url: {
+    indexUrl: {
-    required: true,
+        required: true,
-    type: String,
+        type: String,
-  },
+    },
-  indexUrl: {
+    singleUrl: {
-    required: true,
+        required: true,
-    type: String,
+        type: String,
-  },
+    },
-  singleUrl: {
+    registerUrl: {
-    required: true,
+        required: true,
-    type: String,
+        type: String,
-  },
+    },
-  registerUrl: {
+    event: {
-    required: true,
+        required: false,
-    type: String,
+        type: String,
-  },
+    },
-  event: {
-    required: false,
-    type: String,
-  },
 });
 
 const events = ref([]);
 const visibleEvent = ref(null);
 
 async function reloadEvents() {
-  const results = await axios.get(props.url);
+    const results = await axios.get('/api/form');
-  events.value = results.data.data;
+    events.value = results.data.data;
-  if (props.event) {
+    if (props.event) {
-    visibleEvent.value = events.value.find(
+        visibleEvent.value = events.value.find((event) => event.slug === props.event);
-      (event) => event.slug === props.event
+    }
-    );
-  }
 }
 
 function makeVisible(event) {
-  window.history.pushState(
+    window.history.pushState({}, '', props.singleUrl.replace(':slug', event.slug));
-    {},
+    visibleEvent.value = event;
-    "",
-    props.singleUrl.replace(":slug", event.slug)
-  );
-  visibleEvent.value = event;
 }
 
 function hideEvent() {
-  window.history.pushState({}, "", props.indexUrl);
+    window.history.pushState({}, '', props.indexUrl);
-  visibleEvent.value = null;
+    visibleEvent.value = null;
 }
 reloadEvents();
 </script>

src/main.js

@@ -1,23 +1,20 @@
-import { defineCustomElement } from "vue";
+import {defineCustomElement} from 'vue';
-import classes from "./style.css?inline";
+import classes from './style.css?inline';
-import carousel from "vue3-carousel/dist/carousel.css?inline";
+import carousel from 'vue3-carousel/dist/carousel.css?inline';
-import carouselStyle from "./carousel.css?inline";
+import carouselStyle from './carousel.css?inline';
-import Eventindex from "./Eventindex.ce.vue";
+import Eventindex from './Eventindex.ce.vue';
-import Eventform from "./Eventform.ce.vue";
+import Eventform from './Eventform.ce.vue';
 
-import axios from "axios";
+import axios from 'axios';
 window.axios = axios;
+axios.defaults.baseURL = window.document.querySelector('[name="adrema_base_url"]').content;
 
 window.hasKeys = function (object, expected) {
-  return (
+    return typeof object === 'object' && JSON.stringify(Object.keys(object).sort()) === JSON.stringify(expected.sort());
-    typeof object === "object" &&
-    JSON.stringify(Object.keys(object).sort()) ===
-      JSON.stringify(expected.sort())
-  );
 };
 
 Eventform.styles = [classes, carousel, carouselStyle];
 Eventindex.styles = [classes];
 
-customElements.define("event-form", defineCustomElement(Eventform));
+customElements.define('event-form', defineCustomElement(Eventform));
-customElements.define("event-index", defineCustomElement(Eventindex));
+customElements.define('event-index', defineCustomElement(Eventindex));