feat: refresh token when page is reloaded

- Stack title and controls vertically on mobile
- Separate admin actions into own row below
- No more absolute positioning or fragile layout
- Show date labels on prev/next buttons only on desktop
- Cleaner responsive breakpoint at 800px

docker-compose.yml

@@ -14,6 +14,8 @@ services:
       - POSTGRES_PASSWORD=minis
       - POSTGRES_USER=minis
       - POSTGRES_DB=minis
+    ports:
+      - 5432:5432
     networks:
       - backend
     volumes:

private/minis-backend/.env

@@ -11,3 +11,5 @@ DATABASE_PASSWORD=abc
 ADMIN_PASSWORD=123
 FRONTEND_PATH=./public
 APPLICATION_NAME=Miniplan\ Hl.\ Familie
+PORT=8080
+

private/minis-backend/application_base.conf

@@ -1,7 +1,7 @@
 ktor {
   development = true
   deployment {
-    port = "${PORT}"
+    port = ${PORT}
   }
   application {
     modules = [ de.walamana.ApplicationKt.module ]
@@ -9,7 +9,7 @@ ktor {
 }
 
 jwt {
-  secret = "${SECRET}"
+  secret = ${SECRET}
   issuer = "http://0.0.0.0:8080/"
   audience = "http://0.0.0.0:8080/"
   realm = "mini-data"
@@ -21,5 +21,5 @@ database {
 }
 
 admin {
-  password = "${ADMIN}"
+  password = ${ADMIN}
 }

private/minis-backend/src/main/kotlin/de/walamana/models/Ministranten.kt

@@ -20,7 +20,7 @@ data class Ministrant(
     val passwordHash: String? = "",
     val firstname: String,
     val lastname: String,
-    val birthday: DateAsLong,
+    val birthday: DateAsLong? = null,
     val privileges: CommaSeperatedStringList
 )
 
@@ -38,7 +38,7 @@ object Ministranten : Table() {
     val passwordHash = varchar("passwordHash", 1024)
     val firstname = varchar("firstname", 128)
     val lastname = varchar("lastname", 128)
-    val birthday = long("birthday")
+    val birthday = long("birthday").nullable()
     val privileges = varchar("privileges", 1024)
 
     override val primaryKey = PrimaryKey(id)
@@ -51,7 +51,7 @@ object MinistrantenDao {
         if (showPasswordHash) row[Ministranten.passwordHash] else "",
         row[Ministranten.firstname],
         row[Ministranten.lastname],
-        Date(row[Ministranten.birthday]),
+        row[Ministranten.birthday]?.let(::Date),
         row[Ministranten.privileges].split(",")
     )
 
@@ -96,7 +96,7 @@ object MinistrantenDao {
         passwordHash: String,
         firstname: String,
         lastname: String,
-        birthday: Date,
+        birthday: Date?,
         privileges: List<String>
     ) = dbQuery {
         val statement = Ministranten.insert {
@@ -104,7 +104,7 @@ object MinistrantenDao {
             it[Ministranten.passwordHash] = ""
             it[Ministranten.firstname] = firstname
             it[Ministranten.lastname] = lastname
-            it[Ministranten.birthday] = birthday.time
+            it[Ministranten.birthday] = birthday?.time
             it[Ministranten.privileges] = privileges.joinToString(",")
         }
         Security.setPassword(username, passwordHash)

private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt

@@ -29,6 +29,8 @@ fun Application.configureDatabases() {
         SchemaUtils.create(GottesdienstGroups)
         SchemaUtils.create(Gottesdienste)
         SchemaUtils.create(Marks)
+        // TODO Add proper versioning and migration for database
+        exec("ALTER TABLE MINISTRANTEN ALTER COLUMN birthday BIGINT NULL;")
     }
 }
 

private/minis-backend/src/main/kotlin/de/walamana/plugins/Security.kt

@@ -59,7 +59,7 @@ fun Payload.mid() = getClaim("id").asInt()
 
 
 object Security {
-    fun DEFAULT_EXPIRY() = Date(System.currentTimeMillis() + 1000 * 60 * 60 * 24 * 14);
+    fun DEFAULT_EXPIRY() = Date(System.currentTimeMillis() + 1000L * 60 * 60 * 24 * 40);
 
     suspend fun authenticateUser(application: Application, username: String, password: String): Ministrant? {
         println("Username $username password $password")

private/minis-backend/src/main/kotlin/de/walamana/views/AuthenticationView.kt

@@ -3,6 +3,7 @@ package de.walamana.views
 import at.favre.lib.crypto.bcrypt.BCrypt
 import com.auth0.jwt.JWT
 import com.auth0.jwt.algorithms.Algorithm
+import de.walamana.models.Ministrant
 import de.walamana.models.MinistrantenDao
 import de.walamana.plugins.Security
 import de.walamana.plugins.getJWTEnvironment
@@ -98,6 +99,28 @@ fun Route.configureAuthenticationRoutes() {
 
                 call.respond(hashMapOf("password" to newPassword))
             }
+            post("refresh") {
+                val principal = call.principal<JWTPrincipal>()!!
+                val jwtEnv = application.getJWTEnvironment()
+                val username = principal.payload.username()
+
+                val ministrant = if (username == "admin") {
+                    val allMinis = MinistrantenDao.allMinistranten().map { it.username }
+                    Ministrant(0, "admin", "", "admin", "admin", null, allMinis)
+                } else {
+                    MinistrantenDao.getMinistrant(username) ?: return@post
+                }
+
+                val newToken = Security.createToken(jwtEnv, ministrant)
+                val expiry = Security.DEFAULT_EXPIRY().toGMTString()
+
+                call.response.header(
+                    "Set-Cookie",
+                    "token=$newToken; HttpOnly; Expires=$expiry"
+                )
+
+                call.respond(AuthenticationResult(true, newToken, ministrant.privileges))
+            }
         }
     }
 }

public/src/App.vue

@@ -22,8 +22,11 @@ function print(){
     window.print()
 }
 
-onMounted(() => {
+onMounted(async () => {
     Auth.checkForToken()
+    if (Auth.getToken()) {
+        await Auth.refreshToken()
+    }
 })
 
 LoginService.subject.subscribe(() => {

public/src/components/GottesdienstCard.vue

@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
+import {computed, ref} from "vue"
+
+const props = defineProps<{
+    gottesdienst: Gottesdienst
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[]
+    editable: string[]
+    currentUsername: string
+}>()
+
+const emit = defineEmits<{
+    toggleMark: [gid: number, mid: number]
+    editGottesdienst: [id: number]
+}>()
+
+const isAdmin = computed(() => props.currentUsername === "admin")
+const currentMini = computed(() => props.ministranten.find(m => m.username === props.currentUsername))
+const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
+const expanded = ref(false)
+
+const responseCount = computed(() =>
+    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0).length
+)
+
+const comingMinistrants = computed(() => {
+    const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
+    return props.marks
+        .filter(m => m.gid === props.gottesdienst.id && m.value === 1)
+        .map(m => miniMap.get(m.mid))
+        .filter((m): m is SimplifiedMinistrant => !!m)
+})
+
+const allMinistrants = computed(() => {
+    const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
+    const marksMap = new Map(props.marks.filter(m => m.gid === props.gottesdienst.id).map(m => [m.mid, m]))
+    return props.ministranten
+        .map(mini => ({
+            ministrant: mini,
+            mark: marksMap.get(mini.id) ?? {gid: props.gottesdienst.id, mid: mini.id, value: 0} as Mark
+        }))
+})
+
+function ministrantTotalMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value === 1).length
+}
+
+function getMark(gid: number, mid: number): Mark {
+    const mark = props.marks.find(m => m.mid === mid && m.gid === gid)
+    return mark ?? {gid, mid, value: 0}
+}
+
+function getIconForMark(gid: number, mid: number): string {
+    const mark = getMark(gid, mid).value
+    switch (mark) {
+        case -1: return "remove"
+        case 0: return "question_mark"
+        case 1: return "close"
+    }
+    return ""
+}
+
+function getMarkClass(gid: number, mid: number): Record<string, boolean> {
+    const mark = getMark(gid, mid).value
+    return {
+        minus: mark === -1,
+        neutral: mark === 0,
+        cross: mark === 1
+    }
+}
+
+function getHintForMark(gid: number, mid: number): string {
+    const mark = getMark(gid, mid).value
+    switch (mark) {
+        case -1: return "Ich kann nicht"
+        case 0: return "Egal"
+        case 1: return "Ich komme"
+    }
+    return ""
+}
+
+function two(s: number): string {
+    return (s < 10 ? "0" : "") + s
+}
+
+function formatDay(time: number | Date): string {
+    const date = new Date(time)
+    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
+}
+
+function formatTime(time: number | Date): string {
+    const date = new Date(time)
+    return two(date.getHours()) + ":" + two(date.getMinutes())
+}
+
+function formatWeekday(time: number | Date): string {
+    const date = new Date(time)
+    switch (date.getDay()) {
+        case 1: return "Montag"
+        case 2: return "Dienstag"
+        case 3: return "Mittwoch"
+        case 4: return "Donnerstag"
+        case 5: return "Freitag"
+        case 6: return "Samstag"
+        case 0: return "Sonntag"
+    }
+    return ""
+}
+
+function toggleOwnMark() {
+    if (!currentMini.value) return
+    emit("toggleMark", props.gottesdienst.id, currentMini.value.id)
+}
+
+function getOwnMarkIcon(): string {
+    if (!currentMini.value) return ""
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    switch (mark) {
+        case -1: return "close"
+        case 0: return ""
+        case 1: return "check"
+    }
+    return ""
+}
+
+function getOwnMarkClass(): Record<string, boolean> {
+    if (!currentMini.value) return {}
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    return {
+        minus: mark === -1,
+        neutral: mark === 0,
+        cross: mark === 1
+    }
+}
+
+function getOwnMarkHint(): string {
+    if (!currentMini.value) return ""
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    switch (mark) {
+        case -1: return "Ich kann nicht"
+        case 0: return "keine Angabe"
+        case 1: return "Ich komme"
+    }
+    return ""
+}
+</script>
+
+<template>
+    <div class="card">
+        <div class="card-header">
+            <div class="title-row">
+                <button
+                    v-if="showCheckbox"
+                    class="own-mark"
+                    :class="getOwnMarkClass()"
+                    @click="toggleOwnMark"
+                    :title="getOwnMarkHint()"
+                >
+                    <i v-if="getOwnMarkIcon()" class="icon">{{ getOwnMarkIcon() }}</i>
+                </button>
+                <span class="day">{{ formatWeekday(gottesdienst.date) }} {{ formatDay(gottesdienst.date) }}</span>
+                <button v-if="isAdmin" class="edit-godi-btn" @click="emit('editGottesdienst', gottesdienst.id)" title="Gottesdienst bearbeiten">
+                    <i class="icon">edit</i>
+                </button>
+            </div>
+            <div class="info">
+                <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
+                <span class="time">um {{ formatTime(gottesdienst.date) }} Uhr</span>
+                <span class="attendance">Anwesenheit: {{ formatTime(gottesdienst.attendance) }}</span>
+            </div>
+        </div>
+
+        <div class="card-body" v-if="allMinistrants.length > 0">
+            <div class="coming-summary" v-if="comingMinistrants.length > 0">
+                <span v-for="m in comingMinistrants" :key="m.id" class="coming-chip">
+                    {{ m.firstname }}
+                </span>
+            </div>
+            <button class="collapse-toggle" @click="expanded = !expanded">
+                <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
+                {{ responseCount }} Rückmeldungen
+            </button>
+            <template v-if="expanded">
+                <div
+                    v-for="{ministrant, mark} in allMinistrants"
+                    :key="ministrant.id"
+                    class="ministrant-row"
+                    :class="getMarkClass(gottesdienst.id, ministrant.id)"
+                >
+                    <span class="mini-name">{{ ministrant.firstname }} {{ ministrant.lastname }}</span>
+                    <span class="mark-count">{{ ministrantTotalMarks(ministrant.id) }}</span>
+                    <span
+                        class="mark-badge"
+                        :class="{ clickable: isAdmin }"
+                        @click="isAdmin && emit('toggleMark', gottesdienst.id, ministrant.id)"
+                    >
+                        <i class="icon">{{ getIconForMark(gottesdienst.id, ministrant.id) }}</i>
+                        <span class="hint">{{ getHintForMark(gottesdienst.id, ministrant.id) }}</span>
+                    </span>
+                </div>
+            </template>
+        </div>
+        <div class="card-body empty" v-else>
+            <span class="no-marks">Keine Ministranten</span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+.card {
+    background: #ffffff;
+    border: 1px solid #d7d5d5;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .title-row {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 4px;
+
+        .name {
+            font-weight: 700;
+            font-size: 18px;
+            flex: 1;
+        }
+
+        .edit-godi-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+            margin: 0;
+            border: none;
+            border-radius: 4px;
+            background: transparent;
+            color: #aaa;
+            cursor: pointer;
+            transition: 100ms;
+            flex-shrink: 0;
+
+            i {
+                font-size: 20px;
+                margin: 0;
+            }
+
+            &:hover {
+                background: #f0f0f0;
+                color: #555;
+            }
+        }
+    }
+
+    .own-mark {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border: 2px solid #cecece;
+        border-radius: 6px;
+        background: #ffffff;
+        cursor: pointer;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        transition: 100ms;
+
+        i {
+            margin: 0;
+        }
+
+        &:hover {
+            border-color: #919191;
+        }
+
+        &.minus {
+            border-color: #690b0b;
+            background: #fdd5d5;
+            color: #690b0b;
+        }
+
+        &.cross {
+            border-color: #045b04;
+            background: #d1fcd1;
+            color: #045b04;
+        }
+
+        &.neutral {
+            border-color: #9f9f9f;
+            background: #f0f0f0;
+            color: #9f9f9f;
+        }
+
+        i {
+            font-size: 20px;
+            font-variation-settings: "wght" 600;
+        }
+    }
+
+    .day {
+        font-weight: 700;
+        flex: 1;
+    }
+
+    .info {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 16px;
+        font-size: 14px;
+        color: #656565;
+
+        span {
+            font-weight: 700;
+        }
+    }
+}
+
+.card-body {
+    padding: 8px 16px;
+
+    &.empty {
+        padding: 16px;
+        text-align: center;
+        color: #9f9f9f;
+        font-size: 14px;
+    }
+
+    .coming-summary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        margin-bottom: 8px;
+
+        .coming-chip {
+            display: inline-block;
+            padding: 2px 8px;
+            font-size: 13px;
+            font-weight: 600;
+            background: #d1fcd1;
+            color: #045b04;
+            border-radius: 4px;
+        }
+    }
+
+    .collapse-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 6px 0;
+        margin: 0;
+        border: none;
+        background: transparent;
+        font-size: 14px;
+        font-weight: 600;
+        color: #777;
+        cursor: pointer;
+
+        i {
+            font-size: 20px;
+        }
+
+        &:hover {
+            color: #444;
+        }
+    }
+
+    .ministrant-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 0 8px 0;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .mini-name {
+            font-size: 15px;
+            font-weight: 500;
+            flex: 1;
+        }
+
+        .mark-count {
+            font-size: 12px;
+            color: #aaa;
+            font-weight: 600;
+            min-width: 20px;
+            text-align: center;
+        }
+
+        .mark-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            i {
+                border-radius: 100%;
+                padding: 2px;
+                font-size: 20px;
+            }
+
+            .hint {
+                font-size: 13px;
+                white-space: nowrap;
+            }
+
+            &.clickable {
+                cursor: pointer;
+                padding: 2px 4px;
+                border-radius: 4px;
+                transition: 100ms;
+
+                &:hover {
+                    background: rgba(0,0,0,0.04);
+                }
+            }
+        }
+
+        &.minus {
+            .mark-badge {
+                color: #690b0b;
+
+                i {
+                    background: #fdd5d5;
+                }
+
+                .hint {
+                    color: #690b0b;
+                }
+            }
+        }
+
+        &.cross {
+            .mark-badge {
+                color: #045b04;
+
+                i {
+                    background: #d1fcd1;
+                }
+
+                .hint {
+                    color: #045b04;
+                }
+            }
+        }
+
+        &.neutral {
+            .mark-badge {
+                color: #9f9f9f;
+
+                i {
+                    background: #f0f0f0;
+                }
+
+                .hint {
+                    color: #9f9f9f;
+                }
+            }
+        }
+    }
+}
+</style>

public/src/components/GroupView.vue

@@ -133,31 +133,33 @@ function dateToValueString(time) {
 
 <template>
     <div class="bar">
-        <div class="controls">
-            <button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
+        <div class="top-row">
+            <button class="flat arrow" v-if="prev != null && prev <= groups.length - 1" @click="back">
                 <i>arrow_left_alt</i>
-                <span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
+                <span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
-            <div class="width: 100%"/>
-            <button class="flat right" v-if="next != null && next > 0" @click="forward">
-                <span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
+            <div v-else></div>
+
+            <div class="title">
+                <template v-if="groups.length > 0">
+                    <span class="prefix">Miniplan vom</span>
+                    {{ formatDate(get(cur).from) }} – {{ formatDate(get(cur).to) }}
+                </template>
+                <span v-else>Keine Gottesdienstgruppen vorhanden</span>
+            </div>
+
+            <button class="flat arrow" v-if="next != null && next > 0" @click="forward">
+                <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
-            <button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
-                    @click="$emit('new')">
-                <i>add</i> Neuer plan
-            </button>
+            <div v-else></div>
+        </div>
+
+        <div class="admin-row" v-if="admin && groups.length > 0">
+            <button class="flat" @click="$emit('new')"><i>add</i> Neuer Plan</button>
+            <button class="flat icon" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
+            <button class="flat icon" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
         </div>
-        <template v-if="groups.length > 0">
-            <span style="z-index: 1"><span class="hide-mobile">Miniplan vom </span> {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
-            <span v-if="admin" style="display: flex; align-items: center; z-index: 1">
-                <button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
-                <button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
-            </span>
-        </template>
-        <span v-else>
-            Keine Gottesdienstgruppen vorhanden
-        </span>
     </div>
 </template>
 
@@ -165,56 +167,119 @@ function dateToValueString(time) {
 
 .bar {
     display: flex;
-    width: calc(100% - 30px);
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
     border-bottom: 1px solid #d7d5d5;
     z-index: 10;
-    padding: 15px;
-    position: relative;
+    padding: 8px 12px;
+    gap: 6px;
 
-    .controls {
+    .top-row {
+        display: grid;
+        align-items: center;
+        width: 100%;
+        gap: 6px;
+        grid-template-columns: 60px 1fr 60px;
+    }
+
+    .arrow {
         display: flex;
-        justify-content: space-between;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% - 10px);
-        height: calc(100% - 10px);
-        padding: 5px;
-    }
-
-    .left, .right{
+        align-items: center;
+        gap: 4px;
         flex-shrink: 0;
-    }
+        padding: 6px 8px 6px 6px;
 
-    .left {
-        margin-left: 10px;
-    }
-
-    .right {
         i {
-            margin-left: 10px;
+            font-size: 22px;
         }
-    }
 
-    span {
-        font-weight: 700;
-    }
-
-    button {
-        margin-right: 10px;
-    }
-
-    .input {
-        margin: 0 10px
-    }
-
-    @media(max-width: 800px) {
-        .hide-mobile {
+        .date-label {
             display: none;
         }
+    }
 
+    .title {
+        flex: 1;
+        text-align: center;
+        font-weight: 700;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+        margin: 0 auto;
+
+        .prefix {
+            display: none;
+        }
+    }
+
+    .admin-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        width: 100%;
+        padding-top: 4px;
+        border-top: 1px solid #eee;
+
+        button {
+            font-size: 13px;
+            padding: 4px 10px 4px 6px;
+
+            i {
+                font-size: 18px;
+                margin-right: 4px;
+            }
+
+            &.icon {
+                padding: 4px 8px;
+
+                i {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    @media(min-width: 800px) {
+        padding: 10px 16px;
+        gap: 0;
+
+        .top-row {
+            flex: 1;
+            gap: 10px;
+            grid-template-columns: 180px 1fr 180px;
+        }
+
+        .arrow {
+            padding: 6px 14px 6px 10px;
+
+            .date-label {
+                display: inline;
+                font-size: 13px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+        }
+
+        .title {
+            font-size: 16px;
+            white-space: normal;
+
+            .prefix {
+                display: inline;
+                font-weight: 400;
+                color: #777;
+            }
+        }
+
+        .admin-row {
+            width: auto;
+            border-top: none;
+            padding-top: 0;
+            margin-left: 12px;
+        }
     }
 
 }

public/src/components/ListView.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import {ref, watch} from "vue"
+import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
+import GottesdienstCard from "@/components/GottesdienstCard.vue"
+
+const STORAGE_KEY = "miniplan_list_tutorial_seen"
+
+const props = defineProps<{
+    gottesdienste: Gottesdienst[]
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[]
+    editable: string[]
+    currentUsername: string
+    admin: boolean
+}>()
+
+const emit = defineEmits<{
+    toggleMark: [gid: number, mid: number]
+    addGottesdienst: []
+    editGottesdienst: [id: number]
+    addMinistrant: []
+    editMinistrant: [id: number]
+    importZelebrationsplan: []
+}>()
+
+const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
+const showTutorial = ref(!localStorage.getItem(STORAGE_KEY))
+
+function dismissTutorial() {
+    showTutorial.value = false
+    localStorage.setItem(STORAGE_KEY, "true")
+}
+
+function countXMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value === 1).length
+}
+</script>
+
+<template>
+    <div class="list-view">
+        <div class="tab-bar" v-if="admin">
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'gottesdienste' }"
+                @click="activeTab = 'gottesdienste'"
+            ><i class="icon">list</i> Gottesdienste</button>
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'ministranten' }"
+                @click="activeTab = 'ministranten'"
+            ><i class="icon">groups</i> Ministranten</button>
+        </div>
+
+        <template v-if="activeTab === 'gottesdienste'">
+            <GottesdienstCard
+                v-for="godi in gottesdienste"
+                :key="godi.id"
+                :gottesdienst="godi"
+                :ministranten="ministranten"
+                :marks="marks"
+                :editable="editable"
+                :current-username="currentUsername"
+                @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
+                @edit-gottesdienst="(id) => emit('editGottesdienst', id)"
+            />
+            <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
+                <i class="icon">add</i> Gottesdienst
+            </button>
+            <button v-if="admin" class="import-btn" @click="emit('importZelebrationsplan')">
+                <i class="icon">upload</i> Zelebrationsplan importieren
+            </button>
+        </template>
+
+        <template v-if="admin && activeTab === 'ministranten'">
+            <div class="mini-list">
+                <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
+                    <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
+                    <span class="mini-username">@{{ mini.username }}</span>
+                    <span class="x-count">{{ countXMarks(mini.id) }}</span>
+                    <button v-if="admin" class="edit-btn" @click="emit('editMinistrant', mini.id)">
+                        <i class="icon">edit</i>
+                    </button>
+                </div>
+                <div v-if="ministranten.length === 0" class="empty-state">
+                    Keine Ministranten
+                </div>
+                <button v-if="admin" class="add-mini" @click="emit('addMinistrant')">
+                    <i class="icon">add</i> Ministrant
+                </button>
+            </div>
+        </template>
+
+        <div class="tutorial-overlay" v-if="showTutorial" @click.self="dismissTutorial">
+            <div class="tutorial-card">
+                <h3><i class="icon">info</i> Listenansicht</h3>
+                <ul>
+                    <li><strong>Gottesdienste</strong> sind als Karten dargestellt – jede Karte zeigt Datum, Uhrzeit und Rückmeldungen.</li>
+                    <li>Klicke auf dein <strong>Kästchen</strong> in der Karte, um deine Teilnahme anzugeben: <span class="chip cross">✓</span> dabei, <span class="chip minus">✗</span> nicht dabei.</li>
+                    <li>Die <strong>Rückmeldungen</strong> der anderen siehst du aufgeklappt unter „X Rückmeldungen".</li>
+                    <li v-if="admin">Als Admin siehst du zusätzlich den <strong>Ministranten-Tab</strong> und kannst Markierungen direkt anklicken.</li>
+                </ul>
+                <button @click="dismissTutorial">Verstanden!</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+.list-view {
+    padding: 12px;
+    max-width: 800px;
+    margin: 0 auto;
+
+
+    @media(min-width: 800px) {
+    }
+}
+
+.tab-bar {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    background: #f0f0f0;
+    border-radius: 8px;
+    padding: 3px;
+
+    .tab {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        color: #777;
+        cursor: pointer;
+        transition: 100ms;
+
+        i {
+            font-size: 20px;
+        }
+
+        &.active {
+            background: #ffffff;
+            color: #222;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        &:not(.active):hover {
+            color: #555;
+        }
+    }
+}
+
+.mini-list {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .mini-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .mini-name {
+            font-size: 15px;
+            font-weight: 500;
+        }
+
+        .mini-username {
+            font-size: 13px;
+            color: #999;
+            flex: 1;
+        }
+
+        .x-count {
+            font-size: 13px;
+            font-weight: 700;
+            color: #045b04;
+            background: #d1fcd1;
+            padding: 1px 8px;
+            border-radius: 10px;
+            margin: 0 8px;
+        }
+    }
+
+    .mini-row {
+        .edit-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+            margin: 0;
+            border: none;
+            border-radius: 4px;
+            background: transparent;
+            color: #aaa;
+            cursor: pointer;
+            transition: 100ms;
+            flex-shrink: 0;
+
+            i {
+                font-size: 18px;
+                margin: 0;
+            }
+
+            &:hover {
+                background: #f0f0f0;
+                color: #555;
+            }
+        }
+    }
+
+    .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+    }
+
+    .add-mini {
+        display: flex;
+        width: 100%;
+        padding: 10px;
+        font-size: 14px;
+        justify-content: center;
+        background: #fafafa;
+        border: none;
+        border-top: 1px solid #f0f0f0;
+        border-radius: 0;
+        cursor: pointer;
+        color: #777;
+        transition: 100ms;
+        margin: 0;
+
+        i {
+            font-size: 20px;
+            margin-right: 6px;
+        }
+
+        &:hover {
+            background: #f0f0f0;
+            color: #444;
+        }
+    }
+}
+
+.add-godi {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
+
+.tutorial-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 16px;
+
+    .tutorial-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 28px 32px;
+        max-width: 440px;
+        width: 100%;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+        h3 {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 0 0 16px;
+            font-size: 20px;
+
+            i {
+                font-size: 26px;
+                color: #555;
+            }
+        }
+
+        ul {
+            margin: 0 0 20px;
+            padding: 0 0 0 18px;
+            line-height: 1.7;
+            font-size: 15px;
+            color: #333;
+
+            li {
+                margin-bottom: 6px;
+            }
+        }
+
+        .chip {
+            display: inline-block;
+            padding: 0 6px;
+            border-radius: 4px;
+            font-size: 13px;
+            font-weight: 700;
+
+            &.cross { background: #d1fcd1; color: #045b04; }
+            &.minus { background: #fdd5d5; color: #690b0b; }
+        }
+
+        button {
+            display: flex;
+            margin-left: auto;
+        }
+    }
+}
+
+.import-btn {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
+</style>

public/src/components/PlanActionBar.vue

@@ -25,17 +25,23 @@ const props = defineProps<{
 <style scoped lang="less">
 
 .action-bar {
-    width: calc(100% - 32px * 2);
-    border-top: 1px solid #d7d5d5;
+    width: calc(100% - 24px * 2);
     display: flex;
-    padding: 10px 32px;
-    background: #ffffff;
+    padding: 6px 24px;
+    background: #fafafa;
     justify-content: flex-end;
+    border-bottom: 1px solid #e0e0e0;
 
     .other-action{
         transition: 200ms translate;
         translate: 220px;
         transition-delay: 100ms;
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        button {
+            margin: 0;
+        }
     };
 
     &.save .other-action {
@@ -45,21 +51,17 @@ const props = defineProps<{
 }
 
 button {
+    font-size: 13px;
+    padding: 4px 10px 4px 6px;
+
+    i {
+        font-size: 18px;
+        margin-right: 6px;
+    }
+
     &:not(.show){
         display: none;
     }
-    &.save{
-        &:not(.show){
-            display: flex;
-        }
-        width: 220px;
-        translate: 0 calc(100% + 20px);
-        transition: 200ms translate;
-        &.show {
-            translate: 0;
-            transition-delay: 100ms;
-        }
-    }
 }
 
 @media print {

public/src/components/dialog/CreateGottesdienstDialog.vue

@@ -9,7 +9,8 @@ import {onKeyPress} from "@/composables/enter";
 interface CreateGottesdienstDialogProps extends DialogControls {
     onCreate: (arg0: Gottesdienst) => (Promise<any> | undefined),
     gottesdienst?: Gottesdienst,
-    planId: number
+    planId: number,
+    onDelete?: () => void
 }
 
 onKeyPress("Enter", create)
@@ -70,9 +71,12 @@ async function create(){
         <Input class="input" v-model:value="date" date-format="string" type="date" label="Datum"/>
         <Input class="input" v-model:value="time" date-format="string" type="time" label="Um"/>
         <Input class="input" v-model:value="godi.attendance" type="time" label="Anwesenheit"/>
-        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
-            <button @click="onDismiss">Abbrechen</button>
-            <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
+        <div class="buttons" style="display: flex; justify-content: space-between; margin-top: 20px;">
+            <button v-if="godi.id != -1 && onDelete" class="red" @click="onDelete(); onDismiss()"><i class="icon">delete</i> Löschen</button>
+            <div style="display: flex; gap: 8px; margin-left: auto;">
+                <button @click="onDismiss">Abbrechen</button>
+                <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
+            </div>
         </div>
     </Dialog>
 

public/src/services/api.ts

@@ -3,7 +3,7 @@ import {Auth} from "@/services/auth";
 
 
 const API_ENDPOINT = import.meta.env.MODE == "development"
-    ? "http://0.0.0.0:8080/api"
+    ? "http://localhost:8080/api"
     : window.location.origin + "/api"
 
 

public/src/services/auth.ts

@@ -71,6 +71,30 @@ export namespace Auth {
         }
     }
 
+    export async function refreshToken(): Promise<boolean> {
+        const token = getToken()
+        if (!token) return false
+
+        return api("/auth/refresh", "POST").then(res => {
+            if (res.status == 200) {
+                return res.json().then(data => {
+                    if (data.success) {
+                        setToken(data.token ?? "")
+                        const payload = parseJwt(data.token)
+                        loggedIn = true
+                        user = payload.username
+                        privileges = payload.privileges
+                        privileges.push(user)
+                        loggedInSubject.next(true)
+                        return true
+                    }
+                    return false
+                })
+            }
+            return false
+        }).catch(() => false)
+    }
+
     function parseJwt (token) {
         var base64Url = token.split('.')[1];
         var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');

public/src/views/PlanView.vue

@@ -5,6 +5,7 @@ import TablePlan from "@/components/TablePlan.vue";
 import {API, UnauthorizedError} from "@/services/api";
 import type {Gottesdienst, GottesdienstGroup, Mark, SimplifiedMinistrant} from "@/models/models";
 import MobilePlan from "@/components/MobilePlan.vue";
+import ListView from "@/components/ListView.vue";
 import PlanActionBar from "@/components/PlanActionBar.vue";
 import {Auth} from "@/services/auth";
 import GroupView from "@/components/GroupView.vue";
@@ -38,6 +39,8 @@ const plan = reactive<{
     groups: []
 })
 const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
+const viewMode = ref<"table" | "list">("table")
+const currentUsername = ref("")
 const editedMarks = reactive<Mark[]>([]);
 const editPlanAdmin = ref(false)
 const planId = ref(parseInt(route.params.id as string))
@@ -79,6 +82,7 @@ async function loadPlan() {
 Auth.loggedInSubject.subscribe(async (loggedIn) => {
     console.log("logged in " + loggedIn)
     if (loggedIn) {
+        currentUsername.value = Auth.getUser()
         plan.editable = Auth.getPrivileges()
         if (Auth.getUser() == "admin") {
             editPlanAdmin.value = true
@@ -86,6 +90,7 @@ Auth.loggedInSubject.subscribe(async (loggedIn) => {
             console.log("Plan", plan.ministranten)
         }
     } else {
+        currentUsername.value = ""
         editPlanAdmin.value = false
         plan.editable = []
     }
@@ -123,7 +128,8 @@ async function createGottesdienst(gottesdienstId?: number){
                 plan.gottesdienste.splice(index, 1)
                 plan.gottesdienste.push(godi)
             }
-        }
+        },
+        onDelete: gottesdienst ? () => deleteGottedienst(gottesdienst.id) : undefined
     })
 }
 
@@ -312,53 +318,90 @@ async function importZelebrationsplan() {
 <template>
     <main>
 
-        <div class="container">
+        <div class="container" :class="{
+            'mobile-view': mobile && viewMode === 'table'
+        }">
 
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
-            <TablePlan
+
+
+            <ListView
                 :gottesdienste="sortedGottesdienste"
                 :ministranten="plan.ministranten"
                 :marks="getMarks()"
                 :editable="plan.editable"
-                :edit="editPlanAdmin"
-                :small-mode="editPlanAdmin"
-                @added="addGodi"
-                @delete="deleteGottedienst"
-                @edit="createGottesdienst"
+                :current-username="currentUsername"
+                :admin="editPlanAdmin"
                 @toggle-mark="toggleMark"
-                @end-edit="editPlanAdmin = false"
-                @reset-password="resetPassword"
-                @create-ministrant="createMinistrant"
-                @edit-ministrant="createMinistrant"
-                class="plan table"
-                v-if="!mobile">
-
-            </TablePlan>
-
-            <MobilePlan
-                :gottesdienste="sortedGottesdienste"
-                :ministranten="plan.ministranten"
-                :marks="getMarks()"
-                :editable="plan.editable"
-                @toggle-mark="toggleMark"
-                class="plan mobile"
-                v-else>
-
-            </MobilePlan>
-
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
+                @add-gottesdienst="createGottesdienst()"
+                @add-ministrant="createMinistrant()"
+                @edit-ministrant="(id) => createMinistrant(id)"
+                @edit-gottesdienst="(id) => createGottesdienst(id)"
                 @import-zelebrationsplan="importZelebrationsplan()"
-                v-if="editPlanAdmin"
-            />
+                class="plan list"
+                v-if="viewMode === 'list'">
 
+            </ListView>
+
+            <template v-if="viewMode === 'table'">
+
+                <PlanActionBar
+                    class="action-bar no-print"
+                    :save="getDif().length > 0"
+                    :plan="false"
+                    :godi="true"
+                    @save="saveChanges()"
+                    @add-godi="createGottesdienst()"
+                    @add-mini="createMinistrant()"
+                    @import-zelebrationsplan="importZelebrationsplan()"
+                    v-if="editPlanAdmin"
+                />
+                
+                <TablePlan
+                    :gottesdienste="sortedGottesdienste"
+                    :ministranten="plan.ministranten"
+                    :marks="getMarks()"
+                    :editable="plan.editable"
+                    :edit="editPlanAdmin"
+                    :small-mode="editPlanAdmin"
+                    @added="addGodi"
+                    @delete="deleteGottedienst"
+                    @edit="createGottesdienst"
+                    @toggle-mark="toggleMark"
+                    @end-edit="editPlanAdmin = false"
+                    @reset-password="resetPassword"
+                    @create-ministrant="createMinistrant"
+                    @edit-ministrant="createMinistrant"
+                    class="plan table"
+                    v-if="!mobile">
+
+                </TablePlan>
+
+                <MobilePlan
+                    :gottesdienste="sortedGottesdienste"
+                    :ministranten="plan.ministranten"
+                    :marks="getMarks()"
+                    :editable="plan.editable"
+                    @toggle-mark="toggleMark"
+                    class="plan mobile"
+                    v-else>
+
+                </MobilePlan>
+            </template>
+
+            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'table' }"
+                    @click="viewMode = 'table'"
+                ><i>table_rows</i> Tabelle</button>
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'list' }"
+                    @click="viewMode = 'list'"
+                ><i>list</i> Liste</button>
+            </div>
 
             <SavingIndicator :visible="isSaving"/>
         </div>
@@ -378,16 +421,45 @@ async function importZelebrationsplan() {
 }
 
 .plan {
-    padding-bottom: 100px;
+    padding-bottom: 24px;
 }
 
 .plan.table {
     //width: 100%;
 }
 
+.container .view-toggle {
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+    padding: 8px 12px;
+
+    button {
+        font-size: 14px;
+        padding: 6px 14px;
+
+        i {
+            font-size: 18px;
+        }
+
+        &.active {
+            background: #e0e0e0;
+            border-color: #c4c4c4;
+        }
+    }
+}
+
+.container.mobile-view {
+    .plan.list {
+        flex: 1;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
 .action-bar {
-    position: fixed;
-    bottom: 0;
+    position: sticky;
+    top: 0;
     z-index: 100;
 }
 </style>