silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add proxy

This commit is contained in:
philipp lang 2024-02-03 20:41:28 +01:00
parent 874b1bd705
commit 870d96d049
3 changed files with 67 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Eventform.ce.vue
View File

@ -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) {

50
src/Eventindex.ce.vue
View File

@ -1,11 +1,17 @@
<template>
<div>
<div
class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
<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 max-w-[400px]">
<img :src="event.image"
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 class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
<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 max-w-[400px]"
>
<img
:src="event.image"
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 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>
<div class="flex items-baseline text-sm">
@ -13,29 +19,21 @@
<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 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" :register-url="props.registerUrl" @close="hideEvent">
</popup>
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </popup>
</div>
</template>
<script setup>
import { ref } from "vue";
import CalendarIcon from "./components/icons/CalendarIcon.vue";
import Popup from "./components/Popup.vue";
import {ref} from 'vue';
import CalendarIcon from './components/icons/CalendarIcon.vue';
import Popup from './components/Popup.vue';
const props = defineProps({
url: {
required: true,
type: String,
},
indexUrl: {
required: true,
type: String,
@ -58,26 +56,20 @@ 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;
if (props.event) {
visibleEvent.value = events.value.find(
(event) => event.slug === props.event
);
visibleEvent.value = events.value.find((event) => event.slug === props.event);
}
}
function makeVisible(event) {
window.history.pushState(
{},
"",
props.singleUrl.replace(":slug", event.slug)
);
window.history.pushState({}, '', props.singleUrl.replace(':slug', event.slug));
visibleEvent.value = event;
}
function hideEvent() {
window.history.pushState({}, "", props.indexUrl);
window.history.pushState({}, '', props.indexUrl);
visibleEvent.value = null;
}
reloadEvents();

25
src/main.js
View File

@ -1,23 +1,20 @@
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 Eventindex from "./Eventindex.ce.vue";
import Eventform from "./Eventform.ce.vue";
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 Eventindex from './Eventindex.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 (
typeof object === "object" &&
JSON.stringify(Object.keys(object).sort()) ===
JSON.stringify(expected.sort())
);
return 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-index", defineCustomElement(Eventindex));
customElements.define('event-form', defineCustomElement(Eventform));
customElements.define('event-index', defineCustomElement(Eventindex));