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

Galerie hinzugefügt

Browse Source
This commit is contained in:
R40fendt
2025-04-17 11:35:59 +02:00
parent 4bbea4507d
commit c4822b9f37
7 changed files with 199 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.vue
View File

@@ -33,7 +33,7 @@ export default {
<br />
Bei dieser Seite handelt es sich um eine private Homepage der
Dorfgemeinschaft Amedorf & Ritzenbergen.
<br /><br />y<
<br /><br />
© Front-End und Web Design: Mathis Kuhlenkamp <br />
© Back-End und Datenbanken: Tom Kuhlenkamp, Jonas Kuhlenkamp
<br />

24
src/components/Navbar.vue
View File

@@ -1,5 +1,8 @@
<script lang="ts">
export default {};
import RouterLink from "vue-router";
export default {
name: "Navbar"
};
</script>
<template>
<section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
@@ -7,19 +10,19 @@ export default {};
<div class="container">
<div class="navbar-brand">
<span class="navbar-logo">
<a href="/">
<RouterLink to="/">
<img
class="navbar-logo-img"
src="../assets/RitzenbergenOrtsschild.png"
style="height: 60px; padding-left: 5px"
/>
</a>
</RouterLink>
</span>
<span class="navbar-caption-wrap">
<a
<RouterLink
class="navbar-caption text-black display-4"
href="http://ritzenbergen.de"
>Amedorf & Ritzenbergen</a
to="/"
>Amedorf & Ritzenbergen</RouterLink
>
</span>
</div>
@@ -47,12 +50,13 @@ export default {};
<a class="nav-link link text-black display-4" href="#news-1-u6k7q0xyDG">Termine</a>
</li>-->
<li class="nav-item">
<a
<RouterLink
class="nav-link link text-black display-4"
href="galerie.php"
to="/galerie"
aria-expanded="false"
>Galerie</a
>
>
Galerie
</RouterLink>
</li>
<li class="nav-item">
<a

4
src/ritzenbergenlib.ts
View File

@@ -4,7 +4,7 @@ export default class RitzenbergenLib {
else return "http://bilder.ritzenbergen.de/"+mypath;
}
static api(path:string){
if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
else return "http://192.168.188.38/Jonas/ritzenbergenapi/"+path;
if(path.startsWith("/")) return "http://api.ritzenbergen.de"+path;
else return "http://api.ritzenbergen.de/"+path;
}
}

8
src/router/index.ts
View File

@@ -1,11 +1,13 @@
import { createMemoryHistory, createRouter } from 'vue-router'
import { createWebHashHistory, createRouter } from 'vue-router'
import Galerie from "../views/Galerie.vue";
const routes = [
{ path: '/', component: () => import('../views/Main.vue') }
{ path: '/', component: () => import('../views/Main.vue') },
{ path: '/galerie', component: Galerie }
]
export default createRouter({
history: createMemoryHistory(),
history: createWebHashHistory(),
routes,
});

101
src/views/Galerie.vue Normal file
View File

@@ -0,0 +1,101 @@
<script lang="ts">
import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue";
import RitzenbergenLib from "../ritzenbergenlib.ts";
import Footer from "../components/Footer.vue";
import $ from "jquery";
export default {
components: {
Navbar,
Embla,
Footer
},
computed: {
events() {
let erntefeste = this.get_jahre("erntefest");
let osterfeuer = this.get_jahre("osterfeuer");
let doppelkopf = this.get_jahre("doppelkopf");
let fussball = this.get_jahre("fussball");
return [
{
src: erntefeste.map(erntefest => RitzenbergenLib.api("randomimage.php?path=/erntefest/" + erntefest + "&recursive=1&tn=1&text=" + erntefest + "&color=white")),
title: "Erntefeste"
},
{
src: osterfeuer.map(osterfeuer => RitzenbergenLib.api("randomimage.php?path=/osterfeuer/" + osterfeuer + "&recursive=1&tn=1&text=" + osterfeuer + "&color=white")),
title: "Osterfeuer"
},
{
src: doppelkopf.map(doppelkopf => RitzenbergenLib.api("randomimage.php?path=/doppelkopf/" + doppelkopf + "&recursive=1&tn=1&text=" + doppelkopf + "&color=white")),
title: "Doppelkopf"
},
{
src: fussball.map(fussball => RitzenbergenLib.api("randomimage.php?path=/fussball/" + fussball + "&recursive=1&tn=1&text=" + fussball + "&color=white")),
title: "Fußballturniere"
}
];
},
},
methods: {
get_jahre(event){
let result;
$.ajax(RitzenbergenLib.api("/galerie/get_jahre.php"),{
success(data){
result=JSON.parse(data);
},
async: false,
data: {event}
});
return result;
}
}
};
</script>
<template>
<Navbar />
<br />
<br />
<br />
<br />
<br />
<br />
<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 der Galerie</strong>
</h3>
<p class="mbr-text mbr-fonts-style display-7">
In unserem Fotoalbum findest du chronisch geordnete
Bilder verschiedener Veranstaltungen aus den letzten Jahrzehnten.
Einfach auf ein Bild mit einer Jahreszahl raufklicken.
</p>
</div>
</div>
</div>
</section>
<br /><br />
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="erntefest" v-for="event in events">
<div class="container-fluid">
<div class="row">
<h4
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
>
<strong>{{ event.title }}</strong>
</h4>
<div class="col-12">
<br>
<Embla :src="event.src" />
</div>
</div>
</div>
<br /><br /><br />
</section>
<Footer />
</template>
<style scoped></style>