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

Events erweitert, TODO-Liste erstellt

Browse Source
This commit is contained in:
R40fendt
2025-04-04 22:33:55 +02:00
parent e7c3946101
commit f92c169d65
4 changed files with 71 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -1,2 +1,10 @@
# ritzenbergen # ritzenbergen
https://ritzenbergen.de - Neue, private Homepage für das kleine Dorf Ritzenbergen [https://ritzenbergen.de](https://ritzenbergen.de) - Neue, private Homepage für das kleine Dorf Ritzenbergen
TODO:
- Addhit
- Galerie
- BuLi-Tipp
- Startseite
- Footer

4
index.html
View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/png" href="RitzenbergenOrtsschild.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + Typescript App</title> <title>Willkommen auf ritzenbergen.de</title>
<link rel="manifest" href="./manifest.json"> <link rel="manifest" href="./manifest.json">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style" <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"

BIN
public/RitzenbergenOrtsschild.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

70
src/Main.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import Navbar from "./Navbar.vue"; import Navbar from "./Navbar.vue";
import striptags from "striptags"; import striptags from "striptags";
import moment, { Moment } from "moment";
export default { export default {
components: { components: {
Navbar, Navbar,
@@ -14,7 +15,43 @@ export default {
datum: "2009-04-06", datum: "2009-04-06",
type: "text", type: "text",
content: "<h1>Test</h1>", content: "<h1>Test</h1>",
link: null, link: undefined,
foto: "erntefest/2011/pic08.jpg"
},
{
id: 0,
eventname:"Eventname",
datum: "2009-04-06",
type: "link",
content: "<h1>Test</h1>",
link: "#/test",
foto: "erntefest/2011/pic08.jpg"
},
{
id: 0,
eventname:"Eventname",
datum: "2009-04-06",
type: "dlink",
content: "<h1>Test</h1>",
link: "/",
foto: "erntefest/2011/pic08.jpg"
},
{
id: 0,
eventname:"Eventname",
datum: "2009-04-06",
type: "fotos",
content: "<h1>Test</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg"
},
{
id: 0,
eventname:"Eventname",
datum: "2009-04-06",
type: "html",
content: "<h1>Test</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg" foto: "erntefest/2011/pic08.jpg"
} }
]; ];
@@ -31,7 +68,14 @@ export default {
} }
}, },
format_date(date: string){ 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")
},
get_file(filename:string){
return filename;
} }
} }
}; };
@@ -105,36 +149,42 @@ export default {
<h5 class="align-center" v-if="events.length == 0"> <h5 class="align-center" v-if="events.length == 0">
Es stehen keine Events an. Es stehen keine Events an.
</h5> </h5>
<!--HTML-->
<div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events"> <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img mb-3"> <div class="item-img mb-3">
<img :src="'../bilder/'+event.foto" /> <img :src="get_file('bilder/'+event.foto)" />
</div> </div>
<div class="item-content align-left"> <div class="item-content align-left">
<h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5"> <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
<strong <strong
><a ><a
class="text-black fw-bold" class="text-black fw-bold"
@click.prevent
:data-id="event.id" :data-id="event.id"
>{{ event.eventname }}</a >{{ event.eventname }}</a
></strong ></strong
> >
</h6> </h6>
<p class="mbr-text mbr-fonts-style mb-3 display-7"> <p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ event.datum }} {{ format_date(event.datum) }}
</p> </p>
<p class="mbr-text mbr-fonts-style mb-3 display-7"> <p class="mbr-text mbr-fonts-style mb-3 display-7">
{{ vorschautext(event.content) }} {{ vorschautext(event.content) }}
</p> </p>
<div class="mbr-section-btn item-footer"> <div class="mbr-section-btn item-footer">
<button <a
class="btn item-btn btn-primary display-7 modal-open-btn" :download="event.type=='dlink' ? event.link : undefined"
:href="event.link"
><button
class="btn item-btn btn-primary display-7"
:data-id="event.id" :data-id="event.id"
> >
Mehr <span v-if="event.type=='link'">Einladung öffnen</span>
</button> <span v-else-if="event.type=='dlink'">Einladung runterladen</span>
<span v-else>Mehr</span>
</button></a>
</div> </div>
</div> </div>
</div> </div>