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

Markdown Renderer hinzugefügt

Browse Source
This commit is contained in:
R40fendt
2025-12-10 17:15:18 +01:00
parent dd7b6bf220
commit a1e25d8dca
3 changed files with 154 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -7,7 +7,7 @@ TODO:
- Addhit - Addhit
- Galerie (Kommentare fixen, Rest geht) - Galerie (Kommentare fixen, Rest geht)
- BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?) - BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
- Startseite (Events testen, type=fotos?) - Startseite Event Markdown-HTML Support
- Footer, Texte? - Footer, Texte?
- Navbar Hamburger Menu - Navbar Hamburger Menu
- Klönkasten ungelesen Punkt (localStorage) - Klönkasten ungelesen Punkt (localStorage)

2
package.json
View File

@@ -18,11 +18,13 @@
"embla-carousel-vue": "^8.6.0", "embla-carousel-vue": "^8.6.0",
"jarallax": "^2.2.1", "jarallax": "^2.2.1",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"katex": "^0.16.27",
"moment": "^2.30.1", "moment": "^2.30.1",
"sloc": "^0.3.2", "sloc": "^0.3.2",
"striptags": "^3.2.0", "striptags": "^3.2.0",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-async-computed": "^4.0.1", "vue-async-computed": "^4.0.1",
"vue-renderer-markdown": "^0.0.62",
"vue-router": "^4.5.0" "vue-router": "^4.5.0"
}, },
"devDependencies": { "devDependencies": {

265
src/components/startseite/Events.vue
View File

@@ -4,30 +4,32 @@ import striptags from "striptags";
import moment, { Moment } from "moment"; import moment, { Moment } from "moment";
import Modal from "../Modal.vue"; import Modal from "../Modal.vue";
import $ from "jquery"; import $ from "jquery";
import MarkdownRender from 'vue-renderer-markdown'
import 'katex/dist/katex.min.css'
export default { export default {
data() { data() {
let openedModals: number[] = []; let openedModals: number[] = [];
return { return {
openedModals, openedModals,
modaltypes: ["text", "html"], modaltypes: ["text", "html"],
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib, RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
}; };
}, },
computed: { computed: {
events() { events() {
let result: any[]=[]; let result: any[] = [];
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"),{ $.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
crossDomain: true, crossDomain: true,
async: false, async: false,
success: function (data:string) { success: function (data: string) {
result = JSON.parse(data); result = JSON.parse(data);
}, },
}); });
console.log(result); console.log(result);
return result; return result;
/* /*
Beispiel-Event-Array: Beispiel-Event-Array:
[ [
{ {
@@ -38,6 +40,7 @@ export default {
content: "<h1>Test</h1>", content: "<h1>Test</h1>",
link: undefined, link: undefined,
foto: "erntefest/2011/pic08.jpg", foto: "erntefest/2011/pic08.jpg",
minitext: ""
}, },
{ {
id: 1, id: 1,
@@ -47,6 +50,8 @@ export default {
content: "<h1>Testlink</h1>", content: "<h1>Testlink</h1>",
link: "#/test", link: "#/test",
foto: "erntefest/2011/pic08.jpg", foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
}, },
{ {
id: 2, id: 2,
@@ -56,6 +61,8 @@ export default {
content: "<h1>Testlink2</h1>", content: "<h1>Testlink2</h1>",
link: "/", link: "/",
foto: "erntefest/2011/pic08.jpg", foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
}, },
{ {
id: 3, id: 3,
@@ -65,6 +72,8 @@ export default {
content: "Fotos vom Erntefest 2011", content: "Fotos vom Erntefest 2011",
link: "erntefest/2011", link: "erntefest/2011",
foto: "erntefest/2011/pic08.jpg", foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
}, },
{ {
id: 4, id: 4,
@@ -74,105 +83,133 @@ export default {
content: "<h1>Test2</h1>", content: "<h1>Test2</h1>",
link: undefined, link: undefined,
foto: "erntefest/2011/pic08.jpg", foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
}, },
];*/ ];*/
}, },
}, },
methods:{ methods: {
vorschautext(content:string) { vorschautext(content: string) {
let stripped=striptags(content); let stripped = striptags(content);
let vorschaulen=30; let vorschaulen = 30;
if(stripped.length>vorschaulen){ if (stripped.length > vorschaulen) {
return stripped.substring(0,vorschaulen)+"..."; return stripped.substring(0, vorschaulen) + "...";
}else{ } else {
return stripped; return stripped;
} }
}, },
format_date(date: string){ format_date(date: string) {
let mymoment:Moment=moment(date); let mymoment: Moment = moment(date);
return mymoment.format("DD.MM.YYYY"); return mymoment.format("DD.MM.YYYY");
} },
}, galerie(content: string) {
components: { this.$router.push({ path: "/bild/" + content });
Modal, },
}, },
components: {
Modal,
MarkdownRender
},
}; };
</script> </script>
<template> <template>
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG"> <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
<div class="container-fluid"> <div class="container-fluid">
<div class="row justify-content-center mb-5"> <div class="row justify-content-center mb-5">
<div class="col-12 content-head"> <div class="col-12 content-head">
<div class="mbr-section-head"> <div class="mbr-section-head">
<h4 <h4
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2" class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
> >
<strong>Termine & Neuigkeiten</strong> <strong>Termine & Neuigkeiten</strong>
</h4> </h4>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<!-- Events --> <!-- Events -->
<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>
<div <div
class="item features-image col-12 col-md-6 col-lg-3" class="item features-image col-12 col-md-6 col-lg-3"
:class="{ active: i % 4 == 0 }" :class="{ active: i % 4 == 0 }"
v-for="(event, i) in events" v-for="(event, i) in events"
> >
<Modal <Modal
v-show=" v-show="
openedModals.includes(event.id) && modaltypes.includes(event.type) openedModals.includes(event.id) &&
" modaltypes.includes(event.type)
@closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)" "
:content="event.content" @closemodal="
></Modal> openedModals.splice(
<div class="item-wrapper"> openedModals.indexOf(event.id),
<div class="item-img mb-3"> 1
<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"> <MarkdownRender :content="event.content" :options="{'allowHtml': true}"/>
<strong </Modal>
><a class="text-black fw-bold" :data-id="event.id">{{
event.eventname <div class="item-wrapper">
}}</a></strong <div class="item-img mb-3">
> <img :src="RitzenbergenLib.get_img(event.foto)" />
</h6> </div>
<p class="mbr-text mbr-fonts-style mb-3 display-7"> <div class="item-content align-left">
{{ format_date(event.datum) }} <h6
</p> class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5"
<p class="mbr-text mbr-fonts-style mb-3 display-7"> >
{{ vorschautext(event.minitext) }} <strong
</p> ><a
<div class="mbr-section-btn item-footer"> class="text-black fw-bold"
<a :data-id="event.id"
:download="event.type == 'dlink' ? event.link : undefined" >{{ event.eventname }}</a
:href="event.link" ></strong
><button >
class="btn item-btn btn-primary display-7" </h6>
:data-id="event.id" <p class="mbr-text mbr-fonts-style mb-3 display-7">
@click="openedModals.push(event.id)" {{ format_date(event.datum) }}
> </p>
<span v-if="event.type == 'link'">Einladung öffnen</span> <p class="mbr-text mbr-fonts-style mb-3 display-7">
<span v-else-if="event.type == 'dlink'" {{ vorschautext(event.minitext) }}
>Einladung runterladen</span </p>
> <div class="mbr-section-btn item-footer">
<span v-else-if="event.type == 'fotos'" @click="galerie(event.content)">Fotos ansehen</span> <a
<span v-else>Mehr</span> :download="
</button></a event.type == 'dlink'
> ? event.link
</div> : undefined
</div> "
</div> :href="event.link"
</div> ><button
</div> class="btn item-btn btn-primary display-7"
</div> :data-id="event.id"
</section> @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'"
@click="galerie(event.content)"
>Fotos ansehen</span
>
<span v-else>Mehr</span>
</button></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template> </template>
<style></style> <style></style>