save changed marks

public/src/components/LoginPanel.vue

@@ -2,7 +2,8 @@
 <script setup lang="ts">
 import Input from "@/components/Input.vue";
 import {onMounted, ref} from "vue";
-import {API} from "@/views/api";
+import {API} from "@/services/api";
+import {Auth} from "@/services/auth";
 
 const props = defineProps<{
     active: boolean
@@ -22,7 +23,7 @@ const username = ref("")
 const password = ref("")
 
 async function attemptLogin() {
-    let login = await API.login(username.value, password.value)
+    let login = await Auth.login(username.value, password.value)
     if(login.success){
         console.log("success", login)
         emit("success", login)
@@ -36,7 +37,7 @@ async function attemptLogin() {
         <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>
+        <button @click="attemptLogin"><i>login</i>Anmelden</button>
     </div>
 
 </template>

public/src/components/MobilePlan.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 
-import {API} from "@/views/api";
+import {API} from "@/services/api";
 
 import {onMounted, reactive, ref} from "vue";
-import type {PlanModel, SimplifiedMinistrant} from "@/models/models";
+import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
 
-const props = defineProps<PlanModel>()
+const props = defineProps<{
+    gottesdienste: Gottesdienst[],
+    ministranten: SimplifiedMinistrant[],
+    marks: Mark[],
+    editable: string[]
+}>()
 defineEmits(["toggleMark"])
 
 function getIconForMark(gid, mid) {
@@ -89,12 +94,12 @@ function getMark(gid, mid) {
 
 function getMinistrantClasses(mini: SimplifiedMinistrant) {
     return {
-        edit: props.editable.includes(mini.id)
+        edit: props.editable.includes(mini.username)
     }
 }
 
 function getMinis() {
-    return props.ministranten.filter(m => props.editable.includes(m.id))
+    return props.ministranten.filter(m => props.editable.includes(m.username))
 }
 function getMiniName(mini) {
     return mini.firstname + " " + mini.lastname

public/src/components/Plan.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {API} from "@/views/api";
+import {API} from "@/services/api";
 
 import {onMounted, reactive, ref} from "vue";
 import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";

public/src/components/TablePlan.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {API} from "@/views/api";
+import {API} from "@/services/api";
 
 import {onMounted, reactive, ref} from "vue";
 import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
@@ -10,10 +10,11 @@ const props = defineProps<{
     gottesdienste: Gottesdienst[],
     ministranten: SimplifiedMinistrant[]
     marks: Mark[],
-    editable: number[]
-    edit: boolean
+    editable: string[]
+    edit: boolean,
+    smallMode: boolean
 }>()
-const emit = defineEmits(["toggleMark", "added", "delete", "endEdit"])
+const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword"])
 
 const data = reactive({
     godi: {}
@@ -47,15 +48,12 @@ function getIconForMark(gid, mid) {
 
 function getClassForMark(gid, mid) {
     const mark = getMark(gid, mid).value
-    switch (mark) {
-        case -1:
-            return "minus";
-        case 0:
-            return "neutral";
-        case 1:
-            return "cross"
+    return {
+        minus: mark == -1,
+        neutral: mark == 0,
+        cross: mark == 1,
+        showIcon: !props.smallMode
     }
-    return ""
 }
 
 function getHintForMark(gid, mid) {
@@ -111,7 +109,7 @@ function getMark(gid, mid) {
 
 function getMinistrantClasses(mini: SimplifiedMinistrant) {
     return {
-        edit: props.editable.includes(mini.id)
+        edit: props.editable.includes(mini.username)
     }
 }
 </script>
@@ -158,7 +156,7 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
         <tbody>
 
         <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
-            <td class="name">{{ mini.id }} {{ mini.firstname }} {{ mini.lastname }}</td>
+            <td class="name"><i v-if="edit" style="margin-right: 10px" @click="$emit('resetPassword', mini.username)">lock_reset</i>{{ mini.id }} {{ mini.firstname }} {{ mini.lastname }}</td>
             <td
                 v-for="godi in props.gottesdienste"
                 class="mark"
@@ -199,7 +197,7 @@ td {
 }
 
 td:first-child, th:first-child {
-    padding: 6px 60px 6px 12px;
+    padding: 6px 30px 6px 12px;
     text-align: left;
 }
 
@@ -216,6 +214,7 @@ td:nth-child(2n), th:nth-child(2n){
     height: 20px;
     user-select: none;
 
+
     i {
         border-radius: 100%;
         padding: 1px;
@@ -253,6 +252,14 @@ td:nth-child(2n), th:nth-child(2n){
         font-size: 14px;
         //mix-blend-mode: difference;
     }
+
+
+    &:not(.showIcon){
+        padding: 0 !important;
+        .hint, br{
+            display: none !important;
+        }
+    }
 }
 
 .ministrant.edit {
@@ -264,6 +271,11 @@ td:nth-child(2n), th:nth-child(2n){
         padding-bottom: 10px;
     }
 
+    .name{
+        align-items: center;
+        height: 100%;
+    }
+
     .mark{
         cursor: pointer;
         &.neutral i {