WIP

public/src/components/Input.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 
+import {ref} from "vue";
+
 const props = defineProps<{
     value: any,
     label?: string,
@@ -8,44 +10,71 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(["update:value"])
+const focus = ref(false)
 
 </script>
 
 <template>
     <div class="input">
-        <label v-if="label">{{ label }}</label>
+        <label v-if="label" :class="{up: props.value != '' || focus, focus}">{{ label }}</label>
         <input
             :value="value"
             @input="$emit('update:value', $event.target.value)"
             :type="props.type ? props.type : 'text'"
-            :disabled="disabled">
+            :disabled="disabled"
+            @focusin="focus = true"
+            @focusout="focus = false">
     </div>
 </template>
 
 <style scoped lang="less">
 
 .input {
-  display: inline-block;
-  label {
-    display: block;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #727272;
-  }
-  input {
-    font-family: sans-serif;
-    width: calc(100% - 30px);
-    min-width: 0px;
-    outline: none;
-    margin: 0 10px;
-    padding: 5px 5px;
-    color: #121212;
-    border: 1px solid transparent;
-    font-size: 14px;
-    &:not(:disabled){
-      border: 1px solid #cecece;
+    display: inline-block;
+    position: relative;
+
+    label {
+        display: block;
+        font-size: 14px;
+        padding: 2px 4px;
+        color: #727272;
+        position: absolute;
+        top: 12px;
+        left: 10px;
+        z-index: 1;
+        background: #ffffff;
+        pointer-events: none;
+        transition: 100ms top;
+        &.up {
+            top: -8px;
+            font-size: 12px;
+        }
+        &.focus {
+            color: #464646;
+        }
+    }
+
+    input {
+        position: relative;
+        font-family: sans-serif;
+        width: calc(100% - 30px);
+        min-width: 0px;
+        outline: none;
+        margin: 0;
+        padding: 15px 15px;
+        color: #121212;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: 100ms border-color;
+
+        &:not(:disabled) {
+            border: 1px solid #cecece;
+            &:focus{
+                border-color: #919191;
+            }
+        }
     }
-  }
 }
 
-</style>
+</style>

public/src/components/LoginPanel.vue

@@ -1,11 +1,70 @@
 
 <script setup lang="ts">
+import Input from "@/components/Input.vue";
+import {onMounted, ref} from "vue";
+import {API} from "@/views/api";
+
+const props = defineProps<{
+    active: boolean
+}>()
+
+const emit = defineEmits(["success"])
+
+onMounted(() => {
+    window.addEventListener("keydown", ev => {
+        if(props.active && ev.key == "Enter") {
+            attemptLogin()
+        }
+    })
+})
+
+const username = ref("")
+const password = ref("")
+
+async function attemptLogin() {
+    let login = await API.login(username.value, password.value)
+    if(login.success){
+        console.log("success", login)
+        emit("success", login)
+    }
+}
 </script>
 
 <template>
 
+    <div class="container">
+        <span class="title">Anmelden</span>
+        <Input class="input" v-model:value="username" label="Nutzername"/>
+        <Input class="input" v-model:value="password" label="Passwort" type="password"/>
+        <button><i>login</i>Anmelden</button>
+    </div>
+
 </template>
 
 <style scoped lang="less">
 
+.container{
+    background: #ffffff;
+    padding: 20px 32px;
+    border-radius: 8px;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    pointer-events: auto;
+
+    .title{
+        display: inline-block;
+        font-size: 24px;
+        margin-bottom: 24px;
+    }
+
+    .input {
+        margin-bottom: 16px;
+    }
+    button{
+        margin-top: 8px;
+    }
+}
+
 </style>

public/src/components/Plan.vue

@@ -125,6 +125,7 @@ function toggleMark(gid, mid) {
         <tr>
             <th></th>
             <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"></th>
         </tr>
 
         </thead>
@@ -195,4 +196,4 @@ table{
 tr:nth-child(5n) td{
   border-bottom: 1px solid black;
 }
-</style>
+</style>

public/src/components/PlanActionBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const emit = defineEmits(["addPlan", "save"])
 const props = defineProps<{
     save: boolean,
     plan: boolean,
@@ -10,8 +11,7 @@ const props = defineProps<{
 
     <div class="action-bar" :class="{save: props.save}">
         <div class="other-action">
-            <button class="add-plan" :class="{show: props.plan}" @click="$emit('save')"> <i class="icon">add_box</i> Neuer Plan</button>
-            <button class="add-godi" :class="{show: props.godi}" @click="$emit('save')"> <i class="icon">add</i> Neuer Gottesdienst</button>
+            <button class="add-plan" :class="{show: props.plan}" @click="$emit('addPlan')"> <i class="icon">add_box</i> Neuer Plan</button>
         </div>
         <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>
     </div>

public/src/components/TablePlan.vue

@@ -3,10 +3,32 @@
 import {API} from "@/views/api";
 
 import {onMounted, reactive, ref} from "vue";
-import type {PlanModel, SimplifiedMinistrant} from "@/models/models";
+import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
+import Input from "@/components/Input.vue";
+
+const props = defineProps<{
+    gottesdienste: Gottesdienst[],
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[],
+    editable: number[]
+    edit: boolean
+}>()
+const emit = defineEmits(["toggleMark", "added", "delete", "endEdit"])
+
+const data = reactive({
+    godi: {}
+})
+
+onMounted(() => {
+    window.addEventListener("keypress", ev => {
+        if(ev.key == "Enter" && props.edit){
+            emit("added", data.godi, () => {
+                data.godi = {}
+            })
+        }
+    })
+})
 
-const props = defineProps<PlanModel>()
-defineEmits(["toggleMark"])
 
 function getIconForMark(gid, mid) {
     const mark = getMark(gid, mid).value
@@ -100,25 +122,36 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
 
         <thead>
 
+        <tr v-if="props.edit">
+            <th></th>
+            <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
+            <th><i @click="$emit('endEdit')">close</i></th>
+        </tr>
+
         <tr>
             <th></th>
             <th v-for="godi in props.gottesdienste">{{ godi.name }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.name"/></th>
         </tr>
         <tr class="bold">
             <th>Datum</th>
             <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.date" type="date"/></th>
         </tr>
         <tr>
             <th>Uhrzeit</th>
             <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.time" type="time"/></th>
         </tr>
         <tr class="bold">
             <th>Anwesenheit</th>
             <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.attendance" type="time"/></th>
         </tr>
         <tr>
             <th>Wochentag</th>
             <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"></th>
         </tr>
 
         </thead>
@@ -134,6 +167,7 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
                 <i class="icon"> {{ getIconForMark(godi.id, mini.id) }} </i><br>
                 <span class="hint">{{ getHintForMark(godi.id, mini.id) }}</span>
             </td>
+            <td class="edit" v-if="props.edit"></td>
 
 
         </tr>
@@ -151,6 +185,9 @@ table {
 tr{
     th{
         font-weight: 400;
+        &.edit{
+            text-align: start;
+        }
     }
     &.bold th{
         font-weight: 700;