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

Add Nuxt

Browse Source
This commit is contained in:
Jonas
2026-04-26 22:02:24 +02:00
commit 73442783b7
1470 changed files with 43422 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/pages/adminpanel/AdminPanelLogin.vue Normal file
View File

@@ -0,0 +1,51 @@
<script lang="ts" setup>
import Navbar from "../../components/Navbar.vue";
import { ref } from "vue";
import { useRouter } from 'vue-router'
import RitzenbergenLib from "../../ritzenbergenlib.ts";
const router = useRouter()
RitzenbergenLib.RitzenbergenLib.checkInternetConnection().then((result)=>{
if(!result) router.push("/");
});
async function login(){
const url=new URL(RitzenbergenLib.RitzenbergenLib.api("/admin/login.php"));
url.searchParams.append("username",username.value);
url.searchParams.append("password",password.value);
const token=await fetch(url)
.then((result)=>result.json())
.then((result)=>{
if(result.success) return result.token;
else{
window.alert(result.error);
return "";
}
});
if(token!="") router.push({ name: "adminpanel-main", params: { token } })
}
const username=ref("");
const password=ref("");
</script>
<template>
<br>
<br>
<br>
<br>
<br>
<h1>Admin Panel</h1>
<Navbar/>
<form @submit.prevent="login()">
<input type="text" placeholder="Benutzername" v-model="username"/>
<input type="password" placeholder="Passwort" v-model="password"/>
<input type="submit" value="Login"/>
</form>
</template>
<style scoped></style>

128
app/pages/adminpanel/Events.vue Normal file
View File

@@ -0,0 +1,128 @@
<script lang="ts" setup>
import AdminNavbar from "../../components/admin/AdminNavbar.vue";
import { useRoute } from "vue-router";
import { ref } from "vue";
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import InputP from "../../components/admin/InputP.vue";
const route = useRoute();
const token = ref(route.params.token);
async function submit(myevent) {
const url = new URL(
RitzenbergenLib.RitzenbergenLib.api("/admin/events/editEvent.php")
);
return fetch(url, {
headers: {
Authorization: "Bearer " + token.value,
},
body: JSON.stringify(myevent),
method: "POST"
});
}
const events = ref([]);
async function getEvents() {
return fetch(RitzenbergenLib.RitzenbergenLib.api("/get_events.php"))
.then((res) => res.json())
.then((res) => {
events.value = res;
console.log(events.value);
return res;
});
}
getEvents();
</script>
<template>
<AdminNavbar />
<br />
<br />
<br />
<br />
<br />
<h1>Events</h1>
<table>
<thead>
<tr>
<td>Name</td>
<td>Datum</td>
<td>Typ</td>
<td>Inhalt</td>
<td>Link</td>
<td>Foto</td>
<td>Minitext</td>
<td>Formular</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="event in events" :key="event.id">
<td>
<InputP
v-model="event.eventname"
:nullable="false"
inputtype="text"
/>
</td>
<td>
<InputP
v-model="event.datum"
:nullable="false"
inputtype="date"
/>
</td>
<td>
<select v-model="event.type">
<option value="link">Link</option>
<option value="markdown">Markdown</option>
<option value="dlink">Download-Link</option>
<option value="html">HTML</option>
<option value="fotos">Fotos</option>
</select>
</td>
<td>
<textarea v-model="event.content"></textarea>
</td>
<td>
<InputP
v-model="event.link"
:nullable="true"
inputtype="text"
/>
</td>
<td>
<InputP
v-model="event.foto"
:nullable="false"
inputtype="text"
/>
</td>
<td>
<InputP
v-model="event.minitext"
:nullable="false"
inputtype="text"
/>
</td>
<td>
<select v-model="event.formular">
<option :value="null"></option>
<option :value="1">testformular-2</option>
</select>
</td>
<td>
<button @click="submit(event)">Speichern</button>
</td>
</tr>
</tbody>
</table>
</template>
<style scoped lang="scss">
@import "../../assets/css/bulitipp2.css";
h1 {
text-align: center;
}
</style>

280
app/pages/adminpanel/Formulare.vue Normal file
View File

@@ -0,0 +1,280 @@
<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref } from "vue";
import AdminNavbar from "../../components/admin/AdminNavbar.vue";
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import InputP from "../../components/admin/InputP.vue";
import FormResults from "../../components/FormResults.vue";
const route = useRoute();
const token = ref(route.params.token);
const formulare: RitzenbergenLib.Formular[] = ref([]);
RitzenbergenLib.Formular.getForms().then(
(result) => (formulare.value = result)
);
async function saveForm(form) {
return fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/updateForm.php"),{
method: "POST",
body: JSON.stringify(form),
headers: {
"Content-Type":"application/json",
"Authorization":"Bearer "+token.value
}
})
}
async function deleteForm(form){
const url=new URL(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/deleteForm.php"));
url.searchParams.set("id",form.id);
return fetch(url,{
headers: {
"Authorization":"Bearer "+token.value
}
})
.then((response) => {
if (response.ok)
RitzenbergenLib.Formular.getForms().then(
(result) => (formulare.value = result)
);
return response;
})
}
function filterType(type: string) {
if (type in ["radio", "checkbox"]) return "text";
return type;
}
async function newForm() {
return fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/newForm.php"),{
headers: {
"Authorization":"Bearer "+token.value
}
})
.then((response) => {
if (response.ok)
RitzenbergenLib.Formular.getForms().then(
(result) => (formulare.value = result)
);
return response;
})
.then((response) => response.json());
}
</script>
<template>
<AdminNavbar />
<br />
<br />
<br />
<br />
<br />
<h1>Formulare</h1>
<div class="formeditor">
<form
@submit.prevent="saveForm(form)"
v-for="(form, i) in formulare"
:key="i"
>
<input type="text" placeholder="Name" v-model="form.name"/><br>
<input type="text" placeholder="Minitext (Ergebnisse anzeigen-Button)" v-model="form.minitext"/><br>
<label for="publicCheckbox">Ergebnisse veröffentlichen</label>
<input type="checkbox" id="publicCheckbox" v-model="form.ispublic"/><br>
<label for="multipleCheckbox">Mehrfacheinträge zulassen</label>
<input type="checkbox" id="multipleCheckbox" v-model="form.multiple"/><br>
*: Muss gesetzt werden
<table>
<thead>
<tr>
<td>ID</td>
<td>Name *</td>
<td>Display-Name</td>
<td>Value *</td>
<td>Display-Value</td>
<td>Placeholder</td>
<td>Type *</td>
<td>Title (Hover)</td>
<td>Required *</td>
<td>Max. Länge</td>
<td>Minimum</td>
<td>Maximum</td>
<td>Checked (für Checkbox und Radio)</td>
</tr>
</thead>
<tbody>
<tr v-for="(field, j) in form.fields" :key="j">
<td>{{ field.id }}</td>
<td>
<InputP
inputtype="text"
:nullable="false"
v-model="field.name"
/>
</td>
<td>
<InputP
inputtype="text"
:nullable="true"
v-model="field.displayname"
/>
</td>
<td>
<InputP
:inputtype="filterType(field.type)"
:nullable="false"
v-model="field.value"
/>
</td>
<td>
<InputP
inputtype="text"
:nullable="true"
v-model="field.displayvalue"
/>
</td>
<td>
<InputP
inputtype="text"
:nullable="true"
v-model="field.placeholder"
/>
</td>
<td>
<select v-model="field.type">
<option value="text">Text</option>
<option value="number">Zahl</option>
<option value="range">Schieberegler</option>
<option value="date">Datum</option>
<option value="time">Zeit</option>
<option value="checkbox">Checkbox</option>
<option value="radio">Radio Button</option>
<option value="color">Farbe</option>
<option value="textarea">
Mehrzeiliger Text
</option>
</select>
</td>
<td>
<InputP
inputtype="text"
:nullable="true"
v-model="field.title"
/>
</td>
<td>
<InputP
inputtype="checkbox"
:nullable="false"
v-model="field.required"
/>
</td>
<td>
<InputP
inputtype="number"
:nullable="true"
v-model="field.maxlength"
/>
</td>
<td>
<InputP
inputtype="number"
:nullable="true"
v-model="field.min"
/>
</td>
<td>
<InputP
inputtype="number"
:nullable="true"
v-model="field.max"
/>
</td>
<td>
<InputP
inputtype="checkbox"
:nullable="true"
v-model="field.checked"
/>
</td>
</tr>
<tr>
<td>
<button
@click="
form.fields.push(
new RitzenbergenLib.Field()
)
"
>
Neu
</button>
</td>
</tr>
</tbody>
</table>
<br />
<input class="saveBtn" type="submit" value="Speichern" />
<br />
<input class="deleteBtn" type="button" value="Löschen (Doppelklick)" @dblclick="deleteForm(form)" />
</form>
<button class="newFormBtn deleteBtn" @click="newForm">Neues Formular</button>
<br>
<br>
</div>
<div class="formresults">
<FormResults v-for="form in formulare.filter((el)=>el!=undefined)" :key="form" :form="form" :token="token"/>
</div>
</template>
<style lang="scss" scoped>
@import "../../assets/css/bulitipp2.css";
thead tr td {
background-color: #efefef;
}
.saveBtn {
margin-left: 20%;
margin-right: 20%;
}
label, p, i, h1, h2 {
text-align: center;
}
.formresults{
overflow: scroll;
}
input{
max-width: 300px;
}
form {
display: flex;
align-items: center;
justify-content: center;
border: 3px solid black;
border-radius: 10px;
margin: 20px;
padding: 30px;
}
.deleteBtn {
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
background-color: #cc0000;
color: white;
}
.deleteBtn:hover{
background-color: #aa0000;
}
.newFormBtn{
background-color: #0000ff;
}
.newFormBtn:hover{
background-color: #0000aa;
}
.formeditor {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>

20
app/pages/adminpanel/Main.vue Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { ref } from "vue";
import AdminPanelLib from "../../adminpanellib.ts";
import AdminNavbar from "../../components/admin/AdminNavbar.vue";
const route = useRoute();
const token=ref(route.params.token);
const userinfo=ref({})
AdminPanelLib.AdminPanelLib.getUserInfo(token.value).then((result)=>userinfo.value=result);
</script>
<template>
<AdminNavbar/>
<h1>Admin Panel</h1>
<h2>Moin {{ userinfo.username }}!</h2>
</template>