Auslagerung in Components, Verbesserung Embla

This commit is contained in:
R40fendt
2025-04-16 19:19:41 +02:00
parent 3057988eb0
commit ad8ce7fb67
9 changed files with 442 additions and 347 deletions

90
src/Bilderbuch.vue Normal file
View File

@@ -0,0 +1,90 @@
<script lang="ts">
import RitzenbergenLib from "./ritzenbergenlib.ts";
export default {
data() {
return {
RitzenbergenLib
};
}
};
</script>
<template>
<section class="gallery09 cid-u6k7q0xbqP" id="gallery-9-u6k7q0xbqP">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-12 col-lg-4 main-text">
<div class="">
<h5 class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2">
<strong>Bilderbuch Ritzenbergen</strong>
</h5>
<h6
class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7"
>
Klicke auf ein Bild um in unsere Galerie zu gelangen. Die Bilder
sind nach Jahreszahl und Kategorie geordnet.
</h6>
</div>
</div>
<div class="col-lg-8 side-features row">
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#doppelkopf"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3'
)
"
/></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#erntefest"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3'
)
"
/></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#fussballturnier"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3'
)
"
/></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#osterfeuer"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3'
)
"
/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style></style>

View File

@@ -1,15 +1,12 @@
<script setup>
import emblaCarouselVue from "embla-carousel-vue";
import Autoplay from "embla-carousel-autoplay";
import RitzenbergenLib from "./ritzenbergenlib.ts";
import { onMounted, ref } from "vue";
import EmblaItem from "./EmblaItem.vue";
const emblaApi = ref();
const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true }, [
Autoplay({ delay: 3000 }),
]);
const [emblaRef, emblaInstance] = emblaCarouselVue({ loop: true });
onMounted(() => {
emblaApi.value = emblaInstance.value;
@@ -22,40 +19,19 @@ const prev = () => {
const next = () => {
emblaApi.value?.scrollNext();
};
defineProps({
src: {
type: Array,
required: true,
},
});
</script>
<template>
<div class="embla" ref="emblaRef">
<div class="embla__container">
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'
)
"
/>
<EmblaItem src="http://ritzenbergen.de/Fotos/hauptfoto.jpg" />
<EmblaItem v-for="el in src" :src="el" />
</div>
<button class="embla__button embla__button--prev" @click="prev">
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

165
src/Events.vue Normal file
View File

@@ -0,0 +1,165 @@
<script lang="ts">
import RitzenbergenLib from "./ritzenbergenlib.ts";
import striptags from "striptags";
import moment, { Moment } from "moment";
import Modal from "./Modal.vue";
export default {
data() {
let openedModals: number[] = [];
return {
openedModals,
modaltypes: ["text", "html"],
RitzenbergenLib,
};
},
computed: {
events() {
return [
{
id: 0,
eventname: "Eventname",
datum: "2009-04-06",
type: "text",
content: "<h1>Test</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg",
},
{
id: 1,
eventname: "Link",
datum: "2009-04-06",
type: "link",
content: "<h1>Testlink</h1>",
link: "#/test",
foto: "erntefest/2011/pic08.jpg",
},
{
id: 2,
eventname: "Download-Link",
datum: "2009-04-06",
type: "dlink",
content: "<h1>Testlink2</h1>",
link: "/",
foto: "erntefest/2011/pic08.jpg",
},
{
id: 3,
eventname: "Fotos endlich online!",
datum: "2009-04-06",
type: "fotos",
content: "Fotos vom Erntefest 2011",
link: "erntefest/2011",
foto: "erntefest/2011/pic08.jpg",
},
{
id: 4,
eventname: "Eventname",
datum: "2009-04-06",
type: "html",
content: "<h1>Test2</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg",
},
];
},
},
methods:{
vorschautext(content:string) {
let stripped=striptags(content);
let vorschaulen=30;
if(stripped.length>vorschaulen){
return stripped.substring(0,vorschaulen)+"...";
}else{
return stripped;
}
},
format_date(date: string){
let mymoment:Moment=moment();
mymoment.set("year",parseInt(date.split("-")[0]));
mymoment.set("month",parseInt(date.split("-")[2])-1);
mymoment.set("day",parseInt(date.split("-")[1]));
return mymoment.format("DD.MM.YYYY")
}
},
components: {
Modal,
},
};
</script>
<template>
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
<div class="container-fluid">
<div class="row justify-content-center mb-5">
<div class="col-12 content-head">
<div class="mbr-section-head">
<h4
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
>
<strong>Termine & Neuigkeiten</strong>
</h4>
</div>
</div>
</div>
<div class="row">
<!-- Events -->
<h5 class="align-center" v-if="events.length == 0">
Es stehen keine Events an.
</h5>
<div
class="item features-image col-12 col-md-6 col-lg-3"
:class="{ active: i % 4 == 0 }"
v-for="(event, i) in events"
>
<Modal
v-show="
openedModals.includes(event.id) && modaltypes.includes(event.type)
"
@closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)"
:content="event.content"
></Modal>
<div class="item-wrapper">
<div class="item-img mb-3">
<img :src="RitzenbergenLib.get_img(event.foto)" />
</div>
<div class="item-content align-left">
<h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
<strong
><a class="text-black fw-bold" :data-id="event.id">{{
event.eventname
}}</a></strong
>
</h6>
<p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ format_date(event.datum) }}
</p>
<p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ vorschautext(event.content) }}
</p>
<div class="mbr-section-btn item-footer">
<a
:download="event.type == 'dlink' ? event.link : undefined"
:href="event.link"
><button
class="btn item-btn btn-primary display-7"
:data-id="event.id"
@click="openedModals.push(event.id)"
>
<span v-if="event.type == 'link'">Einladung öffnen</span>
<span v-else-if="event.type == 'dlink'"
>Einladung runterladen</span
>
<span v-else-if="event.type == 'fotos'">Fotos ansehen</span>
<span v-else>Mehr</span>
</button></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style></style>

69
src/Forms.vue Normal file
View File

@@ -0,0 +1,69 @@
<script>
export default {
}
</script>
<template>
<section id="anmeldeformular">
<section class="form5 cid-u6k7q0BfGa">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 content-head">
<div class="mbr-section-head mb-5">
<h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Überschrift</strong>
</h3><br>
<h5 style="text-align: center;"><b></b> <br>
Inhalt</h5><br>
if public
<div class="modal-container">
<div class="modal">
<div class="modal-content">
<span class="closeBtn" style="cursor: pointer;">x</span>
<h1>Modal-Überschrift</h1>
Ergebnisse
</div>
</div>
<br><br>
</div>
else
<p style="text-align: center;">Minitext<br><br>
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
<form action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
data-form-email="true" value="">
<div class="dragArea row">
<div class="col-md col-sm-12 form-group mb-3" data-for="name">
<input type="text" maxlength="128" name="name" placeholder="Label1"
data-form-field="name" class="form-control" value="" id="name-form02-0">
</div>
<div class="col-12 form-group mb-3" data-for="textarea">
<input type="text" name="textarea" maxlength="128" placeholder="Label2"
data-form-field="textarea" class="form-control" id="textarea-form02-0">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn">
<button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
</div>
</div>
<input type="hidden" value="<?php echo $id; ?>" name="id">
</form>
</div>
</div>
</div>
</section>
</section>
</template>
<style>
</style>

View File

@@ -1,12 +1,14 @@
<script lang="ts">
import Navbar from "./Navbar.vue";
import striptags from "striptags";
import moment, { Moment } from "moment";
import Modal from "./Modal.vue";
import Embla from "./Embla.vue";
import Umgebung from "./Umgebung.vue";
import Footer from "./Footer.vue";
import RitzenbergenLib from "./ritzenbergenlib.ts";
import Willkommen from "./Willkommen.vue";
import Bilderbuch from "./Bilderbuch.vue";
import Forms from "./Forms.vue";
import Events from "./Events.vue";
export default {
components: {
@@ -14,85 +16,19 @@ export default {
Modal,
Embla,
Umgebung,
Footer
},
computed: {
events() {
return [
{
id: 0,
eventname:"Eventname",
datum: "2009-04-06",
type: "text",
content: "<h1>Test</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg"
},
{
id: 1,
eventname:"Link",
datum: "2009-04-06",
type: "link",
content: "<h1>Testlink</h1>",
link: "#/test",
foto: "erntefest/2011/pic08.jpg"
},
{
id: 2,
eventname:"Download-Link",
datum: "2009-04-06",
type: "dlink",
content: "<h1>Testlink2</h1>",
link: "/",
foto: "erntefest/2011/pic08.jpg"
},
{
id: 3,
eventname:"Fotos endlich online!",
datum: "2009-04-06",
type: "fotos",
content: "Fotos vom Erntefest 2011",
link: "erntefest/2011",
foto: "erntefest/2011/pic08.jpg"
},
{
id: 4,
eventname:"Eventname",
datum: "2009-04-06",
type: "html",
content: "<h1>Test2</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg"
}
];
},
},
methods:{
vorschautext(content:string) {
let stripped=striptags(content);
let vorschaulen=30;
if(stripped.length>vorschaulen){
return stripped.substring(0,vorschaulen)+"...";
}else{
return stripped;
}
},
format_date(date: string){
let mymoment:Moment=moment();
mymoment.set("year",parseInt(date.split("-")[0]));
mymoment.set("month",parseInt(date.split("-")[2])-1);
mymoment.set("day",parseInt(date.split("-")[1]));
return mymoment.format("DD.MM.YYYY")
}
Footer,
Willkommen,
Bilderbuch,
Forms,
Events
},
data() {
let openedModals: number[] = [];
return {
openedModals,
modaltypes: ["text", "html"],
RitzenbergenLib
}
RitzenbergenLib,
};
},
};
</script>
@@ -145,192 +81,25 @@ export default {
</div>
</div>
</section>
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
<div class="container-fluid">
<div class="row justify-content-center mb-5">
<div class="col-12 content-head">
<div class="mbr-section-head">
<h4
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
>
<strong>Termine & Neuigkeiten</strong>
</h4>
</div>
</div>
</div>
<div class="row">
<!-- Events -->
<Events/>
<h5 class="align-center" v-if="events.length == 0">
Es stehen keine Events an.
</h5>
<div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
<Modal v-show="openedModals.includes(event.id)&&modaltypes.includes(event.type)" @closemodal="openedModals.splice(openedModals.indexOf(event.id),1)" :content="event.content"></Modal>
<div class="item-wrapper">
<div class="item-img mb-3">
<img :src="RitzenbergenLib.get_img(event.foto)" />
</div>
<div class="item-content align-left">
<h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
<strong
><a
class="text-black fw-bold"
:data-id="event.id"
>{{ event.eventname }}</a
></strong
>
</h6>
<p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ format_date(event.datum) }}
</p>
<p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ vorschautext(event.content) }}
</p>
<div class="mbr-section-btn item-footer">
<a
:download="event.type=='dlink' ? event.link : undefined"
:href="event.link"
><button
class="btn item-btn btn-primary display-7"
:data-id="event.id"
@click="openedModals.push(event.id);"
>
<span v-if="event.type=='link'">Einladung öffnen</span>
<span v-else-if="event.type=='dlink'">Einladung runterladen</span>
<span v-else-if="event.type=='fotos'">Fotos ansehen</span>
<span v-else>Mehr</span>
</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="anmeldeformular">
<section class="form5 cid-u6k7q0BfGa">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 content-head">
<div class="mbr-section-head mb-5">
<h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Überschrift</strong>
</h3><br>
<h5 style="text-align: center;"><b></b> <br>
Inhalt</h5><br>
if public
<div class="modal-container">
<div class="modal">
<div class="modal-content">
<span class="closeBtn" style="cursor: pointer;">x</span>
<h1>Modal-Überschrift</h1>
Ergebnisse
</div>
</div>
<br><br>
</div>
else
<p style="text-align: center;">Minitext<br><br>
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
<form action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
data-form-email="true" value="">
<div class="dragArea row">
<div class="col-md col-sm-12 form-group mb-3" data-for="name">
<input type="text" maxlength="128" name="name" placeholder="Label1"
data-form-field="name" class="form-control" value="" id="name-form02-0">
</div>
<div class="col-12 form-group mb-3" data-for="textarea">
<input type="text" name="textarea" maxlength="128" placeholder="Label2"
data-form-field="textarea" class="form-control" id="textarea-form02-0">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn">
<button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
</div>
</div>
<input type="hidden" value="<?php echo $id; ?>" name="id">
</form>
</div>
</div>
</div>
</section>
<Forms/>
<section class="gallery09 cid-u6k7q0xbqP" id="gallery-9-u6k7q0xbqP">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-12 col-lg-4 main-text">
<div class="">
<h5 class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2">
<strong>Bilderbuch Ritzenbergen</strong>
</h5>
<h6 class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7">
Klicke auf ein Bild um in unsere Galerie zu gelangen. Die Bilder sind nach Jahreszahl und Kategorie
geordnet.
</h6>
</div>
</div>
<div class="col-lg-8 side-features row">
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#doppelkopf"><img
:src="RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3')"></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#erntefest"><img
:src="RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3')"></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#fussballturnier"><img
:src="RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3')"></a>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#osterfeuer"><img
:src="RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3')"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<Bilderbuch/>
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<Embla/>
<Embla :src="[
RitzenbergenLib.api('randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=5'),
RitzenbergenLib.api('randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=5'),
RitzenbergenLib.api('randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=5'),
RitzenbergenLib.api('randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=5'),
'http://ritzenbergen.de/Fotos/hauptfoto.jpg'
]" />
</div>
</div>
</div>
@@ -339,53 +108,15 @@ export default {
<section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
<strong>Willkommen in Ritzenbergen</strong>
</h3>
<p class="mbr-text mbr-fonts-style display-7">Ritzenbergen, ehemalig "Rikinburg" wurde nur ein einziges Mal im
Jahr 935 in der historischen Überlieferung erwähnt. In diesem Jahr wurde sie vom Edelherren Willarius der
Bremer Kirche geschenkt. Eine Identifikation dieser Burg mit einem auf einer Karte des Amtes Thedinghausen
von 1765 eingetragenen Hügel von etwa 150 m Durchmesser oberhalb eines alten Weserarms in Ritzenbergen ist
aber bisher nicht gesichert.</p>
<p class="mbr-text mbr-fonts-style display-7">Die Gemeinde Amedorf/Ritzenbergen wurde zusammen mit der
Gemeinde Holtum-Marsch im Jahr 1968 in die Gemeinde Blender eingegliedert.</p>
<p class="mbr-text mbr-fonts-style display-7">In der Galerie findest du viele Fotos aus den letzten Jahren.</p>
</div>
</div>
</div>
</section>
<Willkommen/>
<section class="gallery10 cid-u6k7q0zbuN" id="features-61-u6k7q0zbuN">
<div class="container-fluid">
<div class="loop-container">
<div class="item display-1" data-linewords="
Amedorf & Ritzenbergen *
Niedersachsen *
Gemeinde Blender *
Landkreis Verden *" data-direction="-1" data-speed="0.05">
</div>
<div class="item display-1" data-linewords="
Amedorf & Ritzenbergen *
Niedersachsen *
Gemeinde Blender *
Landkreis Verden *" data-direction="-1" data-speed="0.05">
</div>
</div>
</div>
</section>
<br>
<br>
<Umgebung/>
<Footer/>
</section>
</template>

27
src/Willkommen.vue Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts">
export default {
}
</script>
<template>
<section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
<strong>Willkommen in Ritzenbergen</strong>
</h3>
<p class="mbr-text mbr-fonts-style display-7">Ritzenbergen, ehemalig "Rikinburg" wurde nur ein einziges Mal im
Jahr 935 in der historischen Überlieferung erwähnt. In diesem Jahr wurde sie vom Edelherren Willarius der
Bremer Kirche geschenkt. Eine Identifikation dieser Burg mit einem auf einer Karte des Amtes Thedinghausen
von 1765 eingetragenen Hügel von etwa 150 m Durchmesser oberhalb eines alten Weserarms in Ritzenbergen ist
aber bisher nicht gesichert.</p>
<p class="mbr-text mbr-fonts-style display-7">Die Gemeinde Amedorf/Ritzenbergen wurde zusammen mit der
Gemeinde Holtum-Marsch im Jahr 1968 in die Gemeinde Blender eingegliedert.</p>
<p class="mbr-text mbr-fonts-style display-7">In der Galerie findest du viele Fotos aus den letzten Jahren.</p>
</div>
</div>
</div>
</section>
</template>
<style scoped></style>

View File

@@ -1,10 +1,10 @@
export default class RitzenbergenLib {
static get_img(mypath: string) {
if(mypath.startsWith("/")) return "https://bilder.ritzenbergen.de"+mypath;
else return "https://bilder.ritzenbergen.de/"+mypath;
if(mypath.startsWith("/")) return "http://bilder.ritzenbergen.de"+mypath;
else return "http://bilder.ritzenbergen.de/"+mypath;
}
static api(path:string){
if(path.startsWith("/")) return "https://api.ritzenbergen.de"+path;
else return "https://api.ritzenbergen.de/"+path;
if(path.startsWith("/")) return "http://api.ritzenbergen.de"+path;
else return "http://api.ritzenbergen.de/"+path;
}
}