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

75
package-lock.json generated
View File

@@ -14,6 +14,7 @@
"jarallax": "^2.2.1",
"jquery": "^3.7.1",
"moment": "^2.30.1",
"sloc": "^0.3.2",
"striptags": "^3.2.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
@@ -1244,6 +1245,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/async": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
"integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
"license": "MIT"
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1268,6 +1275,17 @@
"dev": true,
"license": "MIT/X11"
},
"node_modules/cli-table": {
"version": "0.3.11",
"resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.11.tgz",
"integrity": "sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==",
"dependencies": {
"colors": "1.0.3"
},
"engines": {
"node": ">= 0.2.0"
}
},
"node_modules/colorjs.io": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -1275,6 +1293,24 @@
"dev": true,
"license": "MIT"
},
"node_modules/colors": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
"integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==",
"license": "MIT",
"engines": {
"node": ">=0.1.90"
}
},
"node_modules/commander": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
"license": "MIT",
"engines": {
"node": ">=16"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1560,6 +1596,30 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/readdirp/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"license": "MIT",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/rollup": {
"version": "4.39.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz",
@@ -1995,6 +2055,21 @@
"node": ">=14.0.0"
}
},
"node_modules/sloc": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/sloc/-/sloc-0.3.2.tgz",
"integrity": "sha512-tnB+gi6TiFpt3qmCGfaV+78dfKwLiH5HRohkW+PnJYHNAcEdk408uxWG+F/3pu4w1eyCO2NC5CpZKuiyMac5GQ==",
"license": "MIT",
"dependencies": {
"async": "^3.2.4",
"cli-table": "^0.3.11",
"commander": "^11.0.0",
"readdirp": "^3.3.0"
},
"bin": {
"sloc": "bin/sloc"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

1
package.json
View File

@@ -18,6 +18,7 @@
"jarallax": "^2.2.1",
"jquery": "^3.7.1",
"moment": "^2.30.1",
"sloc": "^0.3.2",
"striptags": "^3.2.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0"

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>