R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Galerie

Browse Source
This commit is contained in:
Jonas
2026-05-05 12:29:21 +02:00
parent 75b50fb9ef
commit 8f8decf263
12 changed files with 187 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/Embla.vue
View File

@@ -1,6 +1,5 @@
<script setup>
<script setup lang="ts">
import emblaCarouselVue from "embla-carousel-vue";
import RitzenbergenLib from "../ritzenbergenlib.ts";
import { onMounted, ref } from "vue";
import EmblaItem from "./EmblaItem.vue";
@@ -42,13 +41,22 @@ defineProps({
type: Array,
required: true,
},
jahre: {
type: Array,
required: false,
},
fontSize:{
type: Number,
required: false,
default: 100
}
});
</script>
<template>
<div class="embla" ref="emblaRef">
<div class="embla__container">
<EmblaItem v-for="el, i in src" :src="el" :link="links[i]" />
<EmblaItem v-for="el, i in src" :src="el" :jahr="jahre?jahre[i]:null" :link="links[i]" :font-size="fontSize"/>
</div>
<button class="embla__button embla__button--prev" @click="prev">
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

27
app/components/EmblaItem.vue
View File

@@ -1,7 +1,5 @@
<script lang="ts">
export default {
props: ["src", "link"],
};
<script lang="ts" setup>
const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
</script>
<template>
<div
@@ -11,16 +9,31 @@ export default {
<div class="slide-content">
<div class="item-img">
<div class="item-wrapper">
<RouterLink :to="link">
<NuxtLink :to="link">
<img
:src="
src
"
/>
</RouterLink>
<span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
{{ jahr }}
</span>
</NuxtLink>
</div>
</div>
</div>
</div>
</template>
<style></style>
<style scoped>
.item-wrapper {
position: relative;
}
.jahr-overlay {
color: white;
mix-blend-mode: difference;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>

73
app/components/startseite/Bilderbuch.vue
View File

@@ -1,38 +1,37 @@
<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import {ref} from "vue";
async function loadImage(path: string) {
try{
const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
headers: {
"Accept":"image/png"
}
});
if(!response.ok) return false;
const blob = await response.blob();
return URL.createObjectURL(blob);
// async function loadImage(path: string) {
// try{
// const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
// headers: {
// "Accept":"image/png"
// }
// });
// if(!response.ok) return false;
// const blob = await response.blob();
// return URL.createObjectURL(blob);
}
catch(e){
console.warn(e);
}
}
// }
// catch(e){
// console.warn(e);
// }
// }
loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
images.value[0]=url;
});
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
images.value[1]=url;
});
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
images.value[2]=url;
});
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
images.value[3]=url;
});
// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
// images.value[0]=url;
// });
// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
// images.value[1]=url;
// });
// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
// images.value[2]=url;
// });
// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
// images.value[3]=url;
// });
const images=ref([]);
const images=ref(["bild1","bild2","bild3","bild4"]);
</script>
<template>
<section
@@ -64,9 +63,9 @@ const images=ref([]);
>
<div class="item-wrapper">
<div class="item-img">
<RouterLink to="/galerie/doppelkopf"
<NuxtLink to="/galerie/#doppelkopf"
><img :src="images[0]"
/></RouterLink>
/></NuxtLink>
</div>
</div>
</div>
@@ -75,9 +74,9 @@ const images=ref([]);
>
<div class="item-wrapper">
<div class="item-img">
<RouterLink to="/galerie/erntefest"
<NuxtLink to="/galerie/#erntefest"
><img :src="images[1]"
/></RouterLink>
/></NuxtLink>
</div>
</div>
</div>
@@ -86,9 +85,9 @@ const images=ref([]);
>
<div class="item-wrapper">
<div class="item-img">
<RouterLink to="/galerie/fussball"
<NuxtLink to="/galerie/#fussball"
><img :src="images[2]"
/></RouterLink>
/></NuxtLink>
</div>
</div>
</div>
@@ -97,9 +96,9 @@ const images=ref([]);
>
<div class="item-wrapper">
<div class="item-img">
<RouterLink to="/galerie/osterfeuer"
<NuxtLink to="/galerie/#osterfeuer"
><img :src="images[3]"
/></RouterLink>
/></NuxtLink>
</div>
</div>
</div>

26
app/components/startseite/Forms.vue
View File

@@ -5,7 +5,7 @@ import { ref } from "vue";
import Modal from "../Modal.vue";
import { Formular } from "../../dto/formular.dto";
const { $gql } = useNuxtApp();
const { $gql, $myfetch } = useNuxtApp();
const forms = await $gql.request<{formulare: Formular[] }>(`
{
@@ -35,26 +35,17 @@ const forms = await $gql.request<{formulare: Formular[] }>(`
).then(data=>data.formulare);
const props=defineProps({
formid: {
type: [Number, null],
required: false,
default: null
}
});
function submit($event: Event) {
/*const url = new URL(
RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
);
console.log($event);
if($event.target==null) return;
const formData = new FormData(<HTMLFormElement>$event.target);
fetch(url.toString(), {
const body = Object.fromEntries(formData);
$myfetch("/formulare/submit/"+(<HTMLFormElement>$event.target).dataset.formid,{
method: "POST",
body: formData
body
}).then(() => {
init();
values.value={};
});*/
});
}
const modalOpened=ref<boolean>(false);
@@ -102,9 +93,9 @@ const values=ref({});
data-form-title="Form Name"
:data-formid="form.id"
:data-i="i"
@submit.prevent="submit"
>
<!-- @submit.prevent="submit" -->
<div v-for="(field, j) in form.fields" :key="j">
<label
v-if="field.placeholder == null"
@@ -156,7 +147,6 @@ const values=ref({});
Absenden
</button>
</div>
<input type="hidden" :value="form.id" name="internalformid" />
</form>
</div>
</div>