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">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="RitzenbergenOrtsschild.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Willkommen auf ritzenbergen.de</title>
@@ -18,8 +17,7 @@
</noscript>
<link rel="stylesheet"
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>
<!-- <script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php"></script> -->
</head>

1
package.json
View File

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

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

@@ -1,126 +1,58 @@
<script lang="ts">
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import striptags from "striptags";
import moment, { Moment } from "moment";
<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib";
import Modal from "../Modal.vue";
import $ from "jquery";
import MarkdownRender from "vue-renderer-markdown";
import "katex/dist/katex.min.css";
import Forms from "./Forms.vue";
import { ref } from "vue";
import { EventType, MyEvent } from "../../dto/event.dto.js";
export default {
data() {
const openedModals: number[] = [];
return {
openedModals,
modaltypes: ["markdown", "html"],
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
};
},
computed: {
events() {
let result: Array<any> = [];
const initdone=ref(false);
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
crossDomain: true,
async: false,
success: function (data: string) {
result = JSON.parse(data);
},
error: function () {
result=false;
}
});
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);
const events = ref<MyEvent[]>([]);
const openedModals=ref<number[]>([]);
const modaltypes=[EventType.html,EventType.markdown];
async function init() {
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;
});
function format_date(date: string){
return new Date(date).toDateString();
}
function vorschautext(str: string){
return str;
}
return mymoment.format("DD.MM.YYYY");
},
galerie(content: string) {
this.$router.push({ path: "/bild/" + content });
},
},
components: {
Modal,
MarkdownRender,
Forms
},
};
</script>
<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="row justify-content-center mb-5">
<div class="col-12 content-head">
@@ -159,7 +91,7 @@ export default {
"
>
<MarkdownRender
v-if="event.type == 'markdown'"
v-if="event.type == EventType.markdown"
:content="event.content"
/>
<div v-else v-html="event.content"></div>
@@ -168,7 +100,7 @@ export default {
<div class="item-wrapper">
<div class="item-img mb-3">
<img :src="RitzenbergenLib.get_img(event.foto)" />
<img :src="RitzenbergenLib.RitzenbergenLib.get_img(event.foto)" />
</div>
<div class="item-content align-left">
<h6

2
src/dto

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

8
src/ritzenbergenlib.ts
View File

@@ -1,5 +1,12 @@
import $ from "jquery";
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;
@@ -308,4 +315,5 @@ export default {
Spiel,
Formular,
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 Umgebung from "../components/startseite/Umgebung.vue";
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 Bilderbuch from "../components/startseite/Bilderbuch.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)=>{
images.value[0]=url;
});
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
images.value[1]=url;
});
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
images.value[2]=url;
});
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
images.value[3]=url;
});
// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
// images.value[0]=url;
// });
// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
// images.value[1]=url;
// });
// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
// images.value[2]=url;
// });
// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
// images.value[3]=url;
// });
</script>
@@ -52,14 +52,14 @@ loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Os
<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="row">
<div class="col-12">
@@ -86,7 +86,7 @@ loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Os
<br>
<br>
<br> -->
<Umgebung ref="umgebung" />