initial commit

public/src/views/PlanView.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+
+import {computed, onMounted, reactive, ref} from "vue";
+import Plan from "@/components/Plan.vue";
+import {API} from "@/views/api";
+import type {PlanModel} from "@/models/models";
+
+const plan = reactive<PlanModel>({
+    gottesdienste: [],
+    ministranten: [],
+    marks: []
+})
+
+const sortedGottesdienste = computed(() => {
+    return plan.gottesdienste.sort((a, b) => {
+        console.log(a, b)
+        return a.date - b.date
+    })
+})
+
+async function addGodi(data) {
+    console.log(data)
+    let date = Date.parse(data.date + "T" + data.time);
+    let attendance = data.attendance && data.attendance != ""
+        ? Date.parse(data.date + "T" + data.attendance)
+        : (date - 1000*60*30)
+    console.log(date, attendance, data.date + "T" + data.attendance)
+    let newGodi = await API.addGottesdienst(
+        data.name,
+        new Date(date),
+        new Date(attendance),
+        0
+    )
+    console.log(newGodi)
+    plan.gottesdienste.push(newGodi)
+}
+
+async function deleteGottedienst(id) {
+    let deleted = await API.deleteGottesdienst(id)
+    if(deleted) {
+        let index = plan.gottesdienste.findIndex(godi => godi.id == id)
+        plan.gottesdienste.splice(index, 1)
+    }
+}
+
+
+onMounted(async () => {
+    let fetchedPlan = await API.getPlan(0)
+    plan.gottesdienste = fetchedPlan.gottesdienste
+    plan.ministranten = fetchedPlan.ministranten
+    plan.marks = fetchedPlan.marks
+})
+
+function toggleMark(gid, mid) {
+    // TODO: track changes
+    let existingMark = plan.marks.find(mark => mark.mid == mid && mark.gid == gid);
+    if(existingMark) {
+        existingMark.value = ((existingMark.value + 2) % 3) - 1
+        console.log(existingMark.value.valueOf())
+    }else{
+        const mark = {
+            gid, mid, value: 1
+        }
+        plan.marks.push(mark)
+    }
+}
+
+
+
+</script>
+
+<template>
+    <main>
+
+        <Plan
+            :gottesdienste="sortedGottesdienste"
+            :ministranten="plan.ministranten"
+            :marks="plan.marks"
+            :edit="false"
+            @added="addGodi"
+            @delete="deleteGottedienst"
+            @toggle-mark="toggleMark">
+
+        </Plan>
+
+        <button @click="addGodi">Add random Gottesdienst</button>
+
+    </main>
+</template>
+
+
+<style scoped lang="less">
+</style>

public/src/views/api.ts

@@ -0,0 +1,64 @@
+import type {Gottesdienst} from "@/models/models";
+
+
+const API_ENDPOINT = "http://0.0.0.0:8080/api"
+
+async function api(endpoint: string, method: string = "GET", body?: any ) {
+    let isJson = (typeof body == "object")
+    return fetch(API_ENDPOINT + endpoint, {
+        method: method,
+        body: isJson ? JSON.stringify(body) : body,
+        headers: {
+            Accept: "application/json",
+            "Content-Type": (isJson ? "application/json" : "text/plain"),
+            "Access-Control-Allow-Origin": "*"
+        }
+    })
+}
+
+
+export namespace API {
+
+    export async function getPlan(id: number) {
+        return api(`/plan?id=${id}`).then(res => res.json())
+            .then(data => {
+                return {
+                    gottesdienste: data.gottesdienste,
+                    ministranten: data.ministranten,
+                    marks: data.marks
+                }
+            })
+    }
+
+    function formatGottesdienste(data: any): Array<Gottesdienst>{
+        return data.map(json => {
+            json["date"] = new Date(json["date"])
+            json["attendance"] = new Date(json["attendance"])
+            return json as Gottesdienst
+        }) as Array<Gottesdienst>
+    }
+
+    export async function addGottesdienst(
+        name: string = "",
+        date: Date,
+        attendance: Date = new Date(date.getTime() - 1000*60*30),
+        planId: number
+    ){
+        return api("/gottesdienste", "PUT", {
+            id: 0, name, date: date.getTime(), attendance: attendance.getTime(), planId
+        }).then(res => res.json())
+            .then(json => {
+                return {
+                    id: json.id, name, date, attendance, planId
+                }
+            })
+    }
+
+    export async function deleteGottesdienst(id) {
+        return api("/gottesdienste?id=" + id, "DELETE")
+            .then(data => data.status == 200)
+    }
+
+
+
+}