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

Updated Events to GraphQL

Browse Source
This commit is contained in:
R40fendt
2026-01-30 14:34:44 +01:00
parent 6beffcb734
commit 9e34a12e23
6 changed files with 76 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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>Willkommen auf ritzenbergen.de</title> <title>Willkommen auf ritzenbergen.de</title>
@@ -18,8 +17,7 @@
</noscript> </noscript>
<link rel="stylesheet" <link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php"> <!-- <script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php"></script> -->
</script>
</head> </head>

1
package.json
View File

@@ -19,6 +19,7 @@
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"embla-carousel-vue": "^8.6.0", "embla-carousel-vue": "^8.6.0",
"graphql-request": "^7.4.0",
"jarallax": "^2.2.1", "jarallax": "^2.2.1",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"katex": "^0.16.27", "katex": "^0.16.27",

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

@@ -1,126 +1,58 @@
<script lang="ts"> <script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib.ts"; import RitzenbergenLib from "../../ritzenbergenlib";
import striptags from "striptags";
import moment, { Moment } from "moment";
import Modal from "../Modal.vue"; import Modal from "../Modal.vue";
import $ from "jquery";
import MarkdownRender from "vue-renderer-markdown"; import MarkdownRender from "vue-renderer-markdown";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import Forms from "./Forms.vue"; import Forms from "./Forms.vue";
import { ref } from "vue";
import { EventType, MyEvent } from "../../dto/event.dto.js";
export default { const initdone=ref(false);
data() {
const openedModals: number[] = [];
return {
openedModals,
modaltypes: ["markdown", "html"],
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
};
},
computed: {
events() {
let result: Array<any> = [];
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), { const events = ref<MyEvent[]>([]);
crossDomain: true,
async: false, const openedModals=ref<number[]>([]);
success: function (data: string) {
result = JSON.parse(data); const modaltypes=[EventType.html,EventType.markdown];
},
error: function () { async function init() {
result=false;
events.value=(await RitzenbergenLib.graphqlClient.request<{events: MyEvent[]}>
(`{
events {
id
eventname
type
minitext
datum
content
link
foto
formular
} }
}`)).events;
console.log(events.value);
}
init().then(()=>{
initdone.value=true;
}); });
return result;
/*
Beispiel-Event-Array:
[
{
id: 0,
eventname: "Eventname",
datum: "2009-04-06",
type: "markdown",
content: "# Test",
link: undefined,
foto: "erntefest/2011/pic08.jpg",
minitext: "",
formular: 1
},
{
id: 1,
eventname: "Link",
datum: "2009-04-06",
type: "link",
content: "<h1>Testlink</h1>",
link: "#/test",
foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
},
{
id: 2,
eventname: "Download-Link",
datum: "2009-04-06",
type: "dlink",
content: "<h1>Testlink2</h1>",
link: "/",
foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
},
{
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",
minitext: ""
},
},
{
id: 4,
eventname: "Eventname",
datum: "2009-04-06",
type: "html",
content: "<h1>Test2</h1>",
link: undefined,
foto: "erntefest/2011/pic08.jpg",
minitext: ""
},
},
];*/
},
},
methods: {
vorschautext(content: string) {
const stripped = striptags(content);
const vorschaulen = 30;
if (stripped.length > vorschaulen) {
return stripped.substring(0, vorschaulen) + "...";
} else {
return stripped;
}
},
format_date(date: string) {
const mymoment: Moment = moment(date);
return mymoment.format("DD.MM.YYYY"); function format_date(date: string){
}, return new Date(date).toDateString();
galerie(content: string) { }
this.$router.push({ path: "/bild/" + content });
}, function vorschautext(str: string){
}, return str;
components: { }
Modal,
MarkdownRender,
Forms
},
};
</script> </script>
<template> <template>
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG"> <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG" v-if="initdone">
<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">
@@ -159,7 +91,7 @@ export default {
" "
> >
<MarkdownRender <MarkdownRender
v-if="event.type == 'markdown'" v-if="event.type == EventType.markdown"
:content="event.content" :content="event.content"
/> />
<div v-else v-html="event.content"></div> <div v-else v-html="event.content"></div>
@@ -168,7 +100,7 @@ export default {
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img mb-3"> <div class="item-img mb-3">
<img :src="RitzenbergenLib.get_img(event.foto)" /> <img :src="RitzenbergenLib.RitzenbergenLib.get_img(event.foto)" />
</div> </div>
<div class="item-content align-left"> <div class="item-content align-left">
<h6 <h6

2
src/dto

Submodule src/dto updated: 669bc47276...3798232611

8
src/ritzenbergenlib.ts
View File

@@ -1,5 +1,12 @@
import $ from "jquery"; import $ from "jquery";
import { ref } from "vue"; import { ref } from "vue";
import { GraphQLClient } from 'graphql-request';
const graphqlClient = new GraphQLClient('http://localhost:3000/graphql', {
headers: {
// optional: Authorization: 'Bearer TOKEN'
},
});
const apiBaseUrl = import.meta.env.VITE_BACKEND_URL; const apiBaseUrl = import.meta.env.VITE_BACKEND_URL;
@@ -308,4 +315,5 @@ export default {
Spiel, Spiel,
Formular, Formular,
Field, Field,
graphqlClient
}; };

34
src/views/Main.vue
View File

@@ -4,7 +4,7 @@ import Modal from "../components/Modal.vue";
import Embla from "../components/Embla.vue"; import Embla from "../components/Embla.vue";
import Umgebung from "../components/startseite/Umgebung.vue"; import Umgebung from "../components/startseite/Umgebung.vue";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
import RitzenbergenLib from "../ritzenbergenlib.ts"; import RitzenbergenLib from "../ritzenbergenlib";
import WillkommenText from "../components/startseite/WillkommenText.vue"; import WillkommenText from "../components/startseite/WillkommenText.vue";
import Bilderbuch from "../components/startseite/Bilderbuch.vue"; import Bilderbuch from "../components/startseite/Bilderbuch.vue";
import Forms from "../components/startseite/Forms.vue"; import Forms from "../components/startseite/Forms.vue";
@@ -29,18 +29,18 @@ async function loadImage(path: string) {
} }
} }
loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{ // loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
images.value[0]=url; // images.value[0]=url;
}); // });
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{ // loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
images.value[1]=url; // images.value[1]=url;
}); // });
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{ // loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
images.value[2]=url; // images.value[2]=url;
}); // });
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{ // loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
images.value[3]=url; // images.value[3]=url;
}); // });
</script> </script>
@@ -52,14 +52,14 @@ loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Os
<Events style="margin-top: 120px;"/> <Events style="margin-top: 120px;"/>
<Forms/> <!-- <Forms/> -->
<Bilderbuch/> <!-- <Bilderbuch/> -->
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]"> <!-- <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@@ -86,7 +86,7 @@ loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Os
<br> <br>
<br> <br> -->
<Umgebung ref="umgebung" /> <Umgebung ref="umgebung" />