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

Dockerfile

@@ -16,7 +16,7 @@ RUN npm install
 RUN npm run build-only
 
 
-FROM openjdk:latest as miniplan
+FROM amazoncorretto:18 as miniplan
 LABEL authors="walamana"
 
 RUN mkdir -p /app/public

docker-compose.yml

@@ -3,16 +3,23 @@ name: miniplan
 networks:
   backend:
 
+volumes:
+  postgres:
+
 services:
   db:
-    image: postgres
+    image: postgres:16
     restart: always
     environment:
       - POSTGRES_PASSWORD=minis
       - POSTGRES_USER=minis
       - POSTGRES_DB=minis
+    ports:
+      - 5432:5432
     networks:
       - backend
+    volumes:
+      - postgres:/var/lib/postgresql/data
     healthcheck:
       test: ["CMD-SHELL", "pg_isready", "-d", "db_prod"]
       interval: 30s
@@ -21,7 +28,7 @@ services:
       start_period: 80s
   app:
     image: git.walamana.de/walamana/miniplan:latest
-    restart: no
+    restart: on-failure
     depends_on:
       - db
     networks:

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "dropzone-vue3": "^1.0.2",
     "rxjs": "^7.8.1"
   }
 }

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/Dockerfile

@@ -1,4 +1,4 @@
-FROM gradle:latest as build_backend
+FROM gradle:7.5.1 as build_backend
 
 COPY --chownn=gradle:gradle . /home/gradle/src
 WORKDIR /home/gradle/src
@@ -11,7 +11,7 @@ WORKDIR /home/node/app
 COPY --chown=node:node /pub
 
 
-FROM openjdk:latest
+FROM amazoncorretto:18
 LABEL authors="walamana"
 
 RUN mkdir /miniplan

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/build.gradle.kts

@@ -8,7 +8,7 @@ plugins {
     kotlin("jvm") version "1.9.0"
     id("io.ktor.plugin") version "2.3.3"
     kotlin("plugin.serialization") version "1.9.0"
-    id("com.palantir.docker") version "0.35.0"
+    id("com.palantir.docker") version "0.36.0"
 }
 
 group = "de.walamana"
@@ -44,8 +44,11 @@ dependencies {
 
     implementation("io.github.cdimascio:dotenv-kotlin:6.4.1")
     implementation("at.favre.lib:bcrypt:0.10.2")
+    implementation("org.apache.poi:poi:5.2.3") // Check for the latest version
+    implementation("org.apache.poi:poi-ooxml:5.2.3") // Check for the latest version
+    implementation("org.apache.xmlbeans:xmlbeans:5.0.2") // Check for the latest version
 
-    testImplementation("io.ktor:ktor-server-tests-jvm")
+    testImplementation("io.ktor:ktor-server-test-host")
     testImplementation("org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version")
 }
 

private/minis-backend/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

private/minis-backend/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,13 +82,12 @@ do
     esac
 done
 
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -133,22 +134,29 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -193,11 +201,15 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
@@ -205,6 +217,12 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.

private/minis-backend/gradlew.bat

@@ -13,8 +13,10 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +27,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,13 +43,13 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -56,11 +59,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
 if exist "%JAVA_EXE%" goto execute
 
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -75,13 +78,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal

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/HTTP.kt

@@ -10,9 +10,13 @@ fun Application.configureHTTP() {
         allowMethod(HttpMethod.Put)
         allowMethod(HttpMethod.Delete)
         allowMethod(HttpMethod.Patch)
+        allowMethod(HttpMethod.Post)
         allowMethod(HttpMethod.Options)
         allowHeader(HttpHeaders.Authorization)
         allowHeader(HttpHeaders.AccessControlAllowOrigin)
+        allowHeader(HttpHeaders.ContentType)
+        allowHeader(HttpHeaders.CacheControl)
+        allowHeader("x-requested-with")
         allowNonSimpleContentTypes = true
 //        allowHeader("MyCustomHeader")
         anyHost() // @TODO: Don't do this in production if possible. Try to limit it.

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);
+    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/service/ZelebrationsplanParser.kt

@@ -0,0 +1,85 @@
+package de.walamana.service
+
+import de.walamana.models.Gottesdienst
+import org.apache.poi.ss.usermodel.Row
+import org.apache.poi.xssf.usermodel.XSSFWorkbook
+import java.io.File
+import java.io.InputStream
+import java.lang.Exception
+import java.time.*
+import java.time.format.DateTimeFormatter
+import java.util.*
+import kotlin.collections.ArrayList
+import kotlin.collections.HashMap
+
+
+object ZelebrationsplanParser {
+
+    private val weekdays = listOf("Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag")
+
+    fun parse(ins: InputStream, planId: Int): HashMap<String, ArrayList<Gottesdienst>> {
+        val workbook = XSSFWorkbook(ins)
+        val sheet = workbook.getSheetAt(0)
+
+        var currentDate: String? = null
+        val gottesdienste = hashMapOf<String, ArrayList<Gottesdienst>>()
+
+        for (row in sheet) {
+            val r = rowToArray(row)
+            val weekday = weekdays.firstOrNull { r[0]?.startsWith(it) == true }
+            if(weekday != null) {
+                currentDate = r[0]!!
+            }else if(r[0]?.isBlank() == true) {
+                println("Empty line")
+            }else if(r.all { it != null }){
+                try {
+                    val time = formatTime(currentDate!!, r[1]!!)
+                    val pfarrei = r[0]!!
+                    val attendance = time - Duration.ofMinutes(30)
+
+                    gottesdienste[pfarrei] = gottesdienste.getOrElse(pfarrei) { arrayListOf() }.apply {
+                        add(Gottesdienst(
+                            id = 0,
+                            name = r[2]!!,
+                            date = time.toDate(),
+                            attendance = attendance.toDate(),
+                            planId = planId
+                        ))
+                    }
+                } catch (e: Exception) {
+                    e.printStackTrace()
+                }
+            }
+        }
+
+        return gottesdienste
+    }
+
+    private fun formatTime(date: String, time: String): LocalDateTime {
+        try{
+            return LocalDateTime.parse("$date, $time", DateTimeFormatter.ofPattern("EEEE, d. MMMM yyyy, H.mm 'Uhr'", Locale.GERMANY))
+        } catch (_: Exception) {}
+
+        try{
+            return LocalDateTime.parse("$date, $time", DateTimeFormatter.ofPattern("EEEE, d. MMMM yyyy, H:mm 'Uhr'", Locale.GERMANY))
+        } catch (_: Exception) {}
+
+        try{
+            return LocalDateTime.parse("$date, $time", DateTimeFormatter.ofPattern("EEEE, d. MMMM yyyy, 'a. 'H.mm 'Uhr'", Locale.GERMANY))
+        } catch (_: Exception) {}
+
+        return LocalDateTime.parse("$date, $time", DateTimeFormatter.ofPattern("EEEE, d. MMMM yyyy, 'a. 'H:mm 'Uhr'", Locale.GERMANY))
+    }
+
+    private fun rowToArray(row: Row): Array<String?> {
+        return arrayOf(row.getCell(0)?.stringCellValue, row.getCell(1)?.stringCellValue, row.getCell(2)?.stringCellValue, row.getCell(3)?.stringCellValue)
+    }
+
+    private fun LocalDateTime.toDate() = Date.from(this.atZone(ZoneId.of("Europe/Berlin")).toInstant())
+}
+
+fun main() {
+    File("Zelebrationsplan Mai 2025.xlsx").inputStream().use {
+        ZelebrationsplanParser.parse(it, 0)
+    }
+}

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
@@ -34,6 +35,7 @@ data class AuthenticationResult(
 
 @Serializable
 data class AuthenticationUpdateRequest(
+    val username: String?,
     val newPassword: String
 )
 
@@ -70,7 +72,11 @@ fun Route.configureAuthenticationRoutes() {
                 val principal = call.principal<JWTPrincipal>()!!
                 val request = call.receive<AuthenticationUpdateRequest>()
 
-                Security.setPassword(principal.payload.username(), request.newPassword)
+                val username = if(request.username != null && principal.payload.username() == "admin") {
+                    request.username
+                } else principal.payload.username()
+
+                Security.setPassword(username, request.newPassword)
 
                 call.respond(hashMapOf("success" to true))
             }
@@ -92,8 +98,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))
             }
         }
     }

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

@@ -1,9 +1,10 @@
 package de.walamana.views
 
 import de.walamana.models.Gottesdienst
-import de.walamana.models.Gottesdienste
 import de.walamana.models.GottesdiensteDao
+import de.walamana.service.ZelebrationsplanParser
 import io.ktor.http.*
+import io.ktor.http.content.*
 import io.ktor.server.application.*
 import io.ktor.server.request.*
 import io.ktor.server.response.*
@@ -43,5 +44,17 @@ fun Route.configureGottesdiensteRoutes() {
             GottesdiensteDao.deleteGottesdienst(id)
             call.respond(HttpStatusCode.OK)
         }
+
+        post("/parseZelebrationsplan") {
+            val id = call.parameters.getOrFail("id").toInt()
+            val multipartData = call.receiveMultipart()
+            multipartData.forEachPart { part ->
+                if(part is PartData.FileItem) {
+                    val data = ZelebrationsplanParser.parse(part.streamProvider(), planId = id)
+                    call.respond(data)
+                }
+                part.dispose()
+            }
+        }
     }
 }

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

@@ -3,6 +3,7 @@ package de.walamana.views
 import de.walamana.models.GottesdienstGroup
 import de.walamana.models.GottesdienstGroupDao
 import de.walamana.models.GottesdienstGroups
+import de.walamana.plugins.getJWTEnvironment
 import de.walamana.service.PlanDao
 import io.ktor.server.application.*
 import io.ktor.server.auth.*
@@ -14,12 +15,14 @@ import io.ktor.server.util.*
 
 fun Route.configurePlanRoutes() {
     route("/plan") {
-        get {
-            val principal = call.principal<JWTPrincipal>()
-            val isAnonymous = principal == null
-            val id = call.parameters.getOrFail("id").toInt()
-            val plan = PlanDao.constructPlan(id, isAnonymous = isAnonymous);
-            call.respond(plan)
+        authenticate {
+            get {
+                val principal = call.principal<JWTPrincipal>()
+                val isAnonymous = principal == null
+                val id = call.parameters.getOrFail("id").toInt()
+                val plan = PlanDao.constructPlan(id, isAnonymous = isAnonymous);
+                call.respond(plan)
+            }
         }
     }
     route("/groups") {

public/package-lock.json

@@ -8,7 +8,9 @@
       "name": "minis-new",
       "version": "0.0.0",
       "dependencies": {
+        "dropzone-vue3": "^1.0.2",
         "rxjs": "^7.8.1",
+        "underscore": "^1.13.7",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -392,6 +394,12 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.2.14.tgz",
+      "integrity": "sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==",
+      "license": "MIT"
+    },
     "node_modules/@tsconfig/node18": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.0.tgz",
@@ -748,6 +756,18 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.41.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.41.0.tgz",
+      "integrity": "sha512-SJ4/EHwS36QMJd6h/Rg+GyR4A5xE0FSI3eZ+iBVpfqf1x0eTSg1smWLHrA+2jQThZSh97fmSgFSU8B61nxosxA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -801,6 +821,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dropzone": {
+      "version": "6.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/dropzone/-/dropzone-6.0.0-beta.2.tgz",
+      "integrity": "sha512-k44yLuFFhRk53M8zP71FaaNzJYIzr99SKmpbO/oZKNslDjNXQsBTdfLs+iONd0U0L94zzlFzRnFdqbLcs7h9fQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.2.13",
+        "just-extend": "^5.0.0"
+      }
+    },
+    "node_modules/dropzone-vue3": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dropzone-vue3/-/dropzone-vue3-1.0.2.tgz",
+      "integrity": "sha512-kP+bp7sgNZtO+tdsZv/Vjga8/ltLqXKyWTCbQ5IK9SxxjO8SDUGlnZDZMVhbwsZx+fmHMTxkEoTYlonOdMplGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "dropzone": "^6.0.0-beta.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "core-js": "^3.21.1",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -1437,6 +1483,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "node_modules/just-extend": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-5.1.1.tgz",
+      "integrity": "sha512-b+z6yF1d4EOyDgylzQo5IminlUmzSeqR1hs/bzjBNjuGras4FXq/6TrzjxfN0j+TmI0ltJzTNlqXUMCniciwKQ==",
+      "license": "MIT"
+    },
     "node_modules/less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -2209,6 +2261,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/underscore": {
+      "version": "1.13.7",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz",
+      "integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g=="
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

public/package.json

@@ -10,7 +10,9 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
+    "dropzone-vue3": "^1.0.2",
     "rxjs": "^7.8.1",
+    "underscore": "^1.13.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

public/src/App.vue

@@ -5,6 +5,7 @@ import LoginPanel from "@/components/LoginPanel.vue";
 import {onMounted, ref} from "vue";
 import {Auth} from "@/services/auth";
 import DialogHost from "@/components/dialog/DialogHost.vue";
+import {LoginService} from "@/services/LoginService";
 
 let showPopup = ref(false)
 let loggedIn = ref(false)
@@ -21,8 +22,15 @@ function print(){
     window.print()
 }
 
-onMounted(() => {
+onMounted(async () => {
     Auth.checkForToken()
+    if (Auth.getToken()) {
+        await Auth.refreshToken()
+    }
+})
+
+LoginService.subject.subscribe(() => {
+    showPopup.value = true
 })
 
 </script>

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,29 +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">
-                <i>arrow_left_alt</i>{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}
+        <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="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">
-                {{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}<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
+            <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>
+            <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">Miniplan vom {{ 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>
 
@@ -163,49 +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;
+        }
+
+        .date-label {
+            display: none;
         }
     }
 
-    span {
+    .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;
+        }
     }
 
-    button {
-        margin-right: 10px;
+    .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;
+                }
+            }
+        }
     }
 
-    .input {
-        margin: 0 10px
+    @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/Input.vue

@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<{
     label?: string,
     disabled?: boolean,
     type?: string,
-    dateFormat?: "string" | "number",
+    dateFormat?: "string" | "number" | "date",
     focus?: boolean
 }>(), {
     dateFormat: "string"
@@ -45,10 +45,12 @@ function leading(val) {
 
 function getValue(){
     if(props.type == "date" && props.dateFormat == "number") {
-        console.log(props.value)
         const date = new Date(props.value)
         return leading(date.getFullYear()) + "-" + zeros(date.getMonth() + 1) + "-" + zeros(date.getDate())
-    }else{
+    } if(props.type == "date" && props.dateFormat == "date") {
+        const date = new Date(props.value)
+        return leading(date.getFullYear()) + "-" + zeros(date.getMonth() + 1) + "-" + zeros(date.getDate())
+    } else {
         return props.value
     }
 }

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/LoginPanel.vue

@@ -45,7 +45,9 @@ async function attemptLogin() {
 <template>
 
     <div class="container">
+        <img src="./../assets/minis_logo.png" style="height: 80px"/>
         <span class="title">Anmelden</span>
+        <span class="subtitle">Um den Miniplan einsehen zu können, logge dich bitte ein.</span>
         <Input class="input" v-model:value="username" label="Nutzername"/>
         <Input class="input" v-model:value="password" label="Passwort" type="password"/>
         <span v-if="invalid" style="color: red; text-align: center; margin-bottom: 10px">Benutzername oder<br> Passwort falsch.</span>
@@ -69,11 +71,22 @@ async function attemptLogin() {
     .title{
         display: inline-block;
         font-size: 24px;
-        margin-bottom: 24px;
+        margin-bottom: 8px;
+        margin-top: 16px;
+    }
+
+    .subtitle {
+        margin-bottom: 30px;
+        max-width: 300px;
+        text-align: center;
+        opacity: 0.5;
+        font-style: italic;
+        line-height: 1.3rem;
     }
 
     .input {
         margin-bottom: 16px;
+        min-width: 300px;
     }
     button{
         margin-top: 8px;

public/src/components/PlanActionBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits(["addPlan", "addGodi", "addMini", "save"])
+const emit = defineEmits(["addPlan", "addGodi", "addMini", "importZelebrationsplan", "save"])
 const props = defineProps<{
     save: boolean,
     plan: boolean,
@@ -9,31 +9,39 @@ const props = defineProps<{
 
 <template>
 
-    <div class="action-bar" :class="{save: props.save}">
+    <div class="action-bar" :class="{save: true}">
         <div class="other-action">
             <button class="add-plan" :class="{show: props.plan}" @click="$emit('addPlan')"> <i class="icon">add_box</i> Neuer Plan</button>
+            <button class="import-zelebrationsplan" :class="{show: props.godi}" @click="$emit('importZelebrationsplan')"> <i class="icon">upload</i> Zelebrationsplan importieren</button>
             <button class="add-godi" :class="{show: props.godi}" @click="$emit('addGodi')"> <i class="icon">add</i> Gottesdienst</button>
             <button class="add-mini" :class="{show: props.godi}" @click="$emit('addMini')"> <i class="icon">add</i> Ministrant</button>
         </div>
-        <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>
+<!--        <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>-->
     </div>
 
+
 </template>
 
 <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 {
@@ -43,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/SavingIndicator.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import {ref, watch} from "vue";
+
+const props = defineProps<{
+    visible: boolean
+}>()
+
+const up = ref(false)
+const showText = ref(false)
+const saved = ref(false)
+const timeout = ref(undefined)
+const timeoutShowText = ref(0)
+
+watch(props, (isSaving, wasBeingSaved) => {
+    console.log("Is saving", props.visible, wasBeingSaved)
+    if(props.visible) {
+        up.value = true
+        saved.value = false
+        clearTimeout(timeout.value)
+        timeoutShowText.value = setTimeout(() => {
+            showText.value = true
+        }, 3000)
+    }else if(wasBeingSaved){
+        clearTimeout(timeoutShowText.value)
+        if(showText.value) {
+            saved.value = true
+            timeout.value = setTimeout(() => {
+                up.value = false
+                showText.value = false
+            }, 1000)
+        }else{
+            up.value = false
+        }
+    }
+}, {immediate: true})
+</script>
+
+<template>
+    <div class="indicator" :class="{up, saved, showText}">
+        <span class="loader" :class="{saved}"></span>
+        <span class="text">{{saved ? "Gespeichert" : "Wird gespeichert"}}</span>
+        <i :class="{saved}">check</i>
+    </div>
+
+</template>
+
+<style scoped lang="less">
+
+.indicator {
+    position: fixed;
+    right: 16px;
+    bottom: -60px;
+    background: white;
+    border-radius: 22px;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    padding: 10px 10px 10px 10px;
+    height: 22px;
+    width: 22px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    transition: width 300ms, bottom 300ms;
+
+    color: #000000;
+    i {
+        color: #6cc361;
+    }
+
+    &.up{
+        bottom: 16px;
+
+        &.showText{
+            width: 154px;
+            &.saved{
+                width: 150px;
+            }
+        }
+
+    }
+
+}
+.loader {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    margin-right: 10px;
+    border: 3px solid #6cc361;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    transition: opacity 200ms, width 200ms;
+
+    &.saved{
+        width: 0;
+        opacity: 0;
+    }
+}
+
+.text{
+    flex-shrink: 0;
+    opacity: 0.5;
+}
+
+i {
+    opacity: 0;
+    transition: opacity 200ms;
+    margin-left: 15px;
+    &.saved{
+        opacity: 1;
+    }
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+</style>

public/src/components/TablePlan.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
     edit: boolean,
     smallMode: boolean
 }>()
-const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword", "deleteMinistrant", "createMinistrant", "editMinistrant"])
+const emit = defineEmits(["toggleMark", "added", "delete", "edit", "endEdit", "resetPassword", "deleteMinistrant", "createMinistrant", "editMinistrant"])
 const openEditUser = ref<number>(-1)
 const miniCopy = reactive<{ data?: SimplifiedMinistrant }>({})
 const data = reactive({
@@ -115,6 +115,10 @@ function toggleEditMinistrant(mini: SimplifiedMinistrant) {
     }
 
 }
+
+function getAmount(mid: number, value: number): number {
+  return props.marks.filter(m => m.mid == mid && m.value == value).length
+}
 </script>
 
 <template>
@@ -127,7 +131,12 @@ function toggleEditMinistrant(mini: SimplifiedMinistrant) {
 
             <tr v-if="props.edit" class="no-print">
                 <th></th>
-                <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
+                <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)" style="cursor: pointer">delete</i></th>
+            </tr>
+
+            <tr v-if="props.edit" class="no-print">
+                <th></th>
+                <th v-for="godi in props.gottesdienste"><i @click="$emit('edit', godi.id)" style="cursor: pointer">edit</i></th>
             </tr>
 
             <tr>
@@ -157,12 +166,18 @@ function toggleEditMinistrant(mini: SimplifiedMinistrant) {
             <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
                 <td class="name">
                     <div class="center">
-                        <i class="edit-button no-print"
-                           v-if="edit"
-                           style="margin-right: 10px; font-size: 18px"
-                           @click="$emit('editMinistrant', mini.id)">edit</i>
-                        {{ mini.firstname }}
-                        {{ mini.lastname }}
+                        <div style="width: 100%;">
+                            <i class="edit-button no-print"
+                               v-if="edit"
+                               style="margin-right: 10px; font-size: 18px"
+                               @click="$emit('editMinistrant', mini.id)">edit</i>
+                            {{ mini.firstname }}
+                            {{ mini.lastname }}
+                        </div>
+                        <div style="flex-shrink: 0" v-if="edit">
+                            {{getAmount(mini.id, 1)}}
+                        </div>
+
                     </div>
                 </td>
                 <td

public/src/components/dialog/CreateGottesdienstDialog.vue

@@ -7,28 +7,44 @@ import {onMounted, ref, toRaw} from "vue";
 import type {Gottesdienst, GottesdienstGroup} from "@/models/models";
 import {onKeyPress} from "@/composables/enter";
 interface CreateGottesdienstDialogProps extends DialogControls {
-    onCreate: (Gottesdienst) => (Promise<any> | undefined),
-    godi?: Gottesdienst,
-    planId: number
+    onCreate: (arg0: Gottesdienst) => (Promise<any> | undefined),
+    gottesdienst?: Gottesdienst,
+    planId: number,
+    onDelete?: () => void
 }
 
 onKeyPress("Enter", create)
 
 const props = defineProps<CreateGottesdienstDialogProps>()
 
-const date = ref("")
-const time = ref("")
+const godi = ref(formatGottesdienst(props.gottesdienst))
 
-const godi = ref(props.godi ?? {
-    planId: props.planId,
-    date: "",
-    attendance: "",
-    name: "",
-    id: -1
-})
+const date = ref(props.gottesdienst ? formatDateString(props.gottesdienst.date) : "")
+const time = ref(props.gottesdienst ? formatTimeString(props.gottesdienst.date) : "")
 
 let submitted = false
 
+function formatGottesdienst(gottesdienst: Gottesdienst) {
+    return gottesdienst ? {
+        ...gottesdienst,
+        attendance: formatTimeString(gottesdienst.attendance)
+    } : {
+        planId: props.planId,
+        date: "",
+        attendance: "",
+        name: "",
+        id: -1
+    }
+}
+
+function formatDateString(date: Date) {
+    return (new Date(date)).toISOString().split('T')[0];
+}
+
+function formatTimeString(date: Date) {
+    return (new Date(date)).toTimeString().slice(0, 5);
+}
+
 
 async function create(){
     if(submitted) return;
@@ -44,6 +60,7 @@ async function create(){
     submitted = false
 }
 
+
 </script>
 
 <template>
@@ -51,12 +68,15 @@ async function create(){
     <Dialog class="dialog">
         <h3>Gottesdienst {{ godi.id == -1 ? "erstellen" : "bearbeiten"}}</h3>
         <Input class="input" v-model:value="godi.name" label="Name" focus/>
-        <Input class="input" v-model:value="date" type="date" label="Datum"/>
-        <Input class="input" v-model:value="time" type="time" label="Um"/>
+        <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/components/dialog/CreateMinistrantDialog.vue

@@ -7,6 +7,7 @@ import {ref, toRaw} from "vue";
 import {onKeyPress} from "@/composables/enter";
 import {API} from "@/services/api";
 import {Dialogs} from "@/services/DialogService";
+import UpdatePasswordDialog from "@/components/dialog/UpdatePasswordDialog.vue";
 interface CreateMinistrantDialogProps extends DialogControls {
     onCreate: (any) => (Promise<any> | undefined),
     onDelete: (id) => (Promise<any> | undefined),
@@ -62,6 +63,23 @@ async function resetPassword(username: string) {
     console.log(result)
 }
 
+async function updatePassword(username: string) {
+    Dialogs.createDialog(
+        UpdatePasswordDialog,
+        {
+            onDismiss(){},
+            onNegative(){},
+            onPositive(){},
+        },
+        {
+            async onUpdated(newPassword: string){
+                await API.updatePassword(username, newPassword)
+            },
+            username
+        }
+    )
+}
+
 </script>
 
 <template>
@@ -75,7 +93,9 @@ async function resetPassword(username: string) {
         <Input class="input" v-model:value="ministrant.privileges" label="Privilegien"/>
 
         <div class="actions" v-if="ministrant.id != -1">
-            <button @click="resetPassword(ministrant.username)"><i>lock_reset</i>Passwort zurücksetzen
+<!--            <button @click="resetPassword(ministrant.username)"><i>lock_reset</i>Passwort zurücksetzen-->
+<!--            </button>-->
+            <button @click="updatePassword(ministrant.username)"><i>lock_reset</i>Passwort ändern
             </button>
             <button class="red" @click="deleteMinistrant()"><i>delete</i>Entfernen</button>
         </div>

public/src/components/dialog/ImportZelebrationsplanDialog.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+
+import Dialog from "@/components/dialog/Dialog.vue";
+import type {DialogControls} from "@/components/dialog/dialog";
+import {ref} from "vue";
+import {API} from "@/services/api";
+import vueDropzone from "dropzone-vue3"
+import type {Gottesdienst} from "@/models/models";
+
+interface ImportZelebrationsplanProps extends DialogControls {
+    onImport(gottesdienste: Gottesdienst[])
+    planId: number
+}
+
+const props = defineProps<ImportZelebrationsplanProps>()
+
+const gottesdienste = ref<(Gottesdienst & {checked: boolean, pfarrei: string})[]>([])
+const pfarreien = ref<string[]>([])
+
+const filter = ref("Pfarrei wählen")
+
+const importing = ref(false)
+const progress = ref(0)
+
+const dropzoneOptions = {
+    url: API.getZelebrationsplanParsingUrl(props.planId),
+    parallelUploads: 1,
+    acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    disablePreviews: true,
+    init: function() {
+        this.on("complete", file => {
+            console.log("File", file)
+            let response = JSON.parse(file.xhr?.responseText)
+            gottesdienste.value = Object.keys(response).reduce((acc, next) => {
+                return acc.concat(response[next].map((it: any) => ({
+                    ...it,
+                    checked: false,
+                    pfarrei: next
+                })));
+            }, []);
+            pfarreien.value = Object.keys(response)
+        })
+    }
+}
+
+
+async function importZelebrationsplan() {
+    const godis = gottesdienste.value.filter(it => it.checked)
+    importing.value = true
+
+    for(let godi of godis) {
+        const id = await API.addGottesdienstNew({
+            ...godi,
+            date: new Date(godi.date),
+            attendance: new Date(godi.attendance)
+        })
+        progress.value += 1
+        godi.id = id
+    }
+    props.onImport(godis)
+    props.onDismiss()
+}
+
+function canImport() {
+    return gottesdienste.value.filter(it => it.checked).length > 0
+}
+
+function amountChecked() {
+    return gottesdienste.value.filter(it => it.checked).length
+}
+
+function selectAll() {
+    return gottesdienste.value.forEach(it => {
+        if(it.pfarrei == filter.value) {
+            it.checked = true
+        }
+    })
+}
+
+function deselectAll() {
+    return gottesdienste.value.forEach(it => it.checked = false)
+}
+
+
+function two(s) {
+    return (s < 10 ? "0" : "") + s
+}
+
+function formatDay(time) {
+    let date = new Date(time)
+    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
+}
+
+function formatTime(time) {
+    let date = new Date(time)
+    return two(date.getHours()) + ":" + two(date.getMinutes())
+}
+
+function formatWeekday(time) {
+    let date = new Date(time)
+    switch (date.getDay()) {
+        case 1:
+            return "Mo";
+        case 2:
+            return "Di";
+        case 3:
+            return "Mi";
+        case 4:
+            return "Do";
+        case 5:
+            return "Fr";
+        case 6:
+            return "Sa";
+        case 0:
+            return "So"
+    }
+}
+
+function getGottesdienste() {
+    return gottesdienste.value.filter(it => it["pfarrei"] == filter.value || it.checked)
+}
+</script>
+
+<template>
+
+    <Dialog class="dialog">
+        <h3>Zelebrationsplan importieren</h3>
+
+        <vue-dropzone v-if="gottesdienste.length == 0" id="dropzone" :options="dropzoneOptions"/>
+
+        <div class="select" v-if="gottesdienste.length > 0 && !importing">
+            <span>Gottesdienste ausgewählt: <strong>{{amountChecked()}} / {{getGottesdienste().length}}</strong></span>
+            <div style="margin: 10px 0; display: flex; align-items: center">
+                <select v-model="filter">
+                    <option disabled selected>Pfarrei wählen</option>
+                    <option v-for="pfarrei in pfarreien">{{pfarrei}}</option>
+                </select>
+                <template v-if="filter">
+                    <button class="flat" @click="selectAll"><i class="icon">select_all</i>Alle auswählen</button>
+                    <button class="flat" @click="deselectAll"><i class="icon">deselect</i>Alle abwählen</button>
+                </template>
+            </div>
+            <div class="list">
+                <table>
+                    <thead>
+                    <tr>
+                        <td></td>
+                        <td>Titel</td>
+                        <td></td>
+                        <td>Datum</td>
+                        <td>Uhrzeit</td>
+                        <td>Anwesenheit</td>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr v-for="godi in getGottesdienste()" @click.stop="godi.checked = !godi.checked">
+                        <td><input type="checkbox" v-model="godi.checked"/></td>
+                        <td style="width: 100%">{{godi.name}}</td>
+                        <td>{{formatWeekday(godi.date)}}</td>
+                        <td>{{formatDay(godi.date)}}</td>
+                        <td>{{formatTime(godi.date)}}</td>
+                        <td>{{formatTime(godi.attendance)}}</td>
+                    </tr>
+                    </tbody>
+                </table>
+
+            </div>
+
+        </div>
+
+        <div v-if="importing" style="display: flex; align-items: center; justify-content: center; padding: 100px; flex-direction: column; gap: 10px">
+            <p>Gottesdienste werden importiert...</p>
+            <p style="font-size: 3rem"><strong>{{progress}} / {{amountChecked()}}</strong></p>
+        </div>
+
+        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
+            <button @click="onDismiss">Abbrechen</button>
+            <button v-if="canImport()" @click="importZelebrationsplan">Importieren</button>
+        </div>
+    </Dialog>
+
+</template>
+
+<style scoped lang="less">
+
+.dialog {
+    display: flex;
+    flex-direction: column;
+    width: min(90vw, 700px);
+
+    h3{
+        margin-bottom: 30px;
+    }
+
+    .input {
+        margin-bottom: 16px;
+    }
+}
+
+.upload {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 60px 100px;
+    border: 1px solid #e1e1e1;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    transition: background 200ms;
+    .icon {
+        font-size: 50px;
+        color: #989898;
+    }
+    span {
+        margin-top: 20px;
+        color: #bdbdbd;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    &:hover {
+        background: #f9f9f9;
+    }
+}
+
+.list {
+    max-height: 400px;
+    overflow-y: auto;
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    table {
+        width: 100%;
+        height: 100%;
+        border-spacing: 0;
+
+        thead {
+            font-weight: bold;
+        }
+
+        tr td{
+            padding: 12px 10px;
+            border-bottom: 1px solid #e1e1e1;
+            transition: background 200ms;
+        }
+
+        tr:hover td {
+            cursor: pointer;
+            background: #f6f6f6;
+        }
+        tbody tr:last-child td{
+            border-bottom: none;
+        }
+    }
+}
+
+</style>

public/src/components/dialog/UpdatePasswordDialog.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type {DialogControls} from "@/components/dialog/dialog";
+import Dialog from "@/components/dialog/Dialog.vue";
+import Input from "@/components/Input.vue";
+import {ref} from "vue";
+
+interface UpdatePasswordDialogProps extends DialogControls {
+    username: string,
+    onUpdated: (newPassword: string) => (Promise<any> | undefined)
+}
+
+const props = defineProps<UpdatePasswordDialogProps>()
+
+const newPassword = ref("")
+const newPasswordCheck = ref("")
+
+function updatePassword() {
+    if(newPassword.value !== newPasswordCheck.value) {
+        alert("Beide Passwörter müssen gleich sein!")
+        return
+    }
+
+    props.onUpdated(newPassword.value)
+    props.onPositive()
+}
+
+</script>
+
+<template>
+    <Dialog class="dialog">
+
+        <h3>Passwort zurücksetzen</h3>
+
+        <Input class="input" v-model:value="newPassword" type="password" label="Neues Passwort"/>
+        <Input class="input" v-model:value="newPasswordCheck" type="password" label="Wiederholen"/>
+
+
+        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
+            <button @click="onDismiss">Abbrechen</button>
+            <button @click="updatePassword">Passwort speichern</button>
+        </div>
+
+    </Dialog>
+</template>
+
+<style scoped lang="less">
+
+.dialog {
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+
+    h3{
+        margin-bottom: 30px;
+    }
+
+    .input {
+        margin-bottom: 16px;
+    }
+}
+</style>

public/src/services/LoginService.ts

@@ -0,0 +1,9 @@
+import {Subject} from "rxjs";
+
+export namespace LoginService {
+    export const subject = new Subject<void>();
+
+    export function showLoginPopup() {
+        subject.next()
+    }
+}

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"
 
 
@@ -30,11 +30,21 @@ function getToken(): string | null {
     return ""
 }
 
+export class UnauthorizedError extends Error {
+    constructor() {
+        super("UnauthorizedError");
+    }
+}
+
 export namespace API {
 
     export async function getPlan(id: number) {
-        return api(`/plan?id=${id}`).then(res => res.json())
-            .then(data => {
+        return api(`/plan?id=${id}`).then(res => {
+            if(res.status == 401) {
+                throw new UnauthorizedError()
+            }
+            return res.json()
+        }).then(data => {
                 return {
                     gottesdienste: data.gottesdienste,
                     ministranten: data.ministranten,
@@ -87,6 +97,22 @@ export namespace API {
             })
     }
 
+    export async function addGottesdienstNew(gottesdienst: Gottesdienst) {
+        return api("/gottesdienste", "PUT", {
+            ...gottesdienst,
+            date: gottesdienst.date.getTime(),
+            attendance: gottesdienst.attendance.getTime()
+        }).then(data => data.json())
+    }
+
+    export async function updateGottesdienst(gottesdienst: Gottesdienst) {
+        return api("/gottesdienste", "PATCH", {
+            ...gottesdienst,
+            date: gottesdienst.date.getTime(),
+            attendance: gottesdienst.attendance.getTime()
+        }).then(res => res.status == 200)
+    }
+
     export async function getMinistranten() {
         return api("/ministranten", "GET").then(res => res.json())
     }
@@ -118,6 +144,15 @@ export namespace API {
             .then(res => res.json())
     }
 
+    export async function updatePassword(username: String, newPassword: string): Promise<any> {
+        return api("/auth/update", "PUT", { username, newPassword })
+            .then(res => res.json())
+    }
+
+    export function getZelebrationsplanParsingUrl(planId: number) {
+        return API_ENDPOINT + "/gottesdienste/parseZelebrationsplan?id=" + planId
+    }
+
 }
 
 

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

@@ -2,9 +2,10 @@
 
 import {computed, onMounted, reactive, ref, toRaw, watch} from "vue";
 import TablePlan from "@/components/TablePlan.vue";
-import {API} from "@/services/api";
+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";
@@ -14,7 +15,10 @@ import CreatePlanDialog from "@/components/dialog/CreatePlanDialog.vue";
 import CreateGottesdienstDialog from "@/components/dialog/CreateGottesdienstDialog.vue";
 import CreateMinistrantDialog from "@/components/dialog/CreateMinistrantDialog.vue";
 import {useRoute, useRouter} from "vue-router";
-import {min} from "rxjs";
+import debounce from "underscore/modules/debounce.js"
+import SavingIndicator from "@/components/SavingIndicator.vue";
+import ImportZelebrationsplanDialog from "@/components/dialog/ImportZelebrationsplanDialog.vue";
+import {LoginService} from "@/services/LoginService";
 
 const MAX_WIDTH_MOBILE = 600;
 
@@ -35,9 +39,12 @@ 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))
+const isSaving = ref(false)
 
 
 onMounted(async () => {
@@ -53,16 +60,29 @@ watch(() => route.params.id, async (value, oldValue) => {
 })
 
 async function loadPlan() {
-    const { ministranten, gottesdienste, marks} = await API.getPlan(planId.value)
-    plan.ministranten = ministranten
-    plan.gottesdienste = gottesdienste
-    plan.marks = marks
-    Auth.checkForToken()
+    try {
+        const { ministranten, gottesdienste, marks} = await API.getPlan(planId.value)
+        plan.ministranten = ministranten
+        plan.gottesdienste = gottesdienste
+        plan.marks = marks
+        Auth.checkForToken()
+    } catch (e: any) {
+        if(e instanceof UnauthorizedError) {
+            LoginService.showLoginPopup()
+            let subscription = Auth.loggedInSubject.subscribe((loggedIn) => {
+                subscription.unsubscribe()
+                if(loggedIn) {
+                    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
@@ -70,6 +90,7 @@ Auth.loggedInSubject.subscribe(async (loggedIn) => {
             console.log("Plan", plan.ministranten)
         }
     } else {
+        currentUsername.value = ""
         editPlanAdmin.value = false
         plan.editable = []
     }
@@ -86,22 +107,29 @@ const sortedGottesdienste = computed(() => {
     })
 })
 
-async function createGottesdienst(){
+async function createGottesdienst(gottesdienstId?: number){
+    let gottesdienstRef = plan.gottesdienste.find(gottesdienst => gottesdienst.id == gottesdienstId)
+    let gottesdienst = gottesdienstRef ? Object.assign({}, toRaw(gottesdienstRef)) : null;
     Dialogs.createDialog(CreateGottesdienstDialog, {
         onPositive() {},
         onNegative() {},
         onDismiss() {}
     }, {
-        planId: parseInt(planId.value as string),
+        gottesdienst,
+        planId: parseInt(planId.value as unknown),
         async onCreate(godi: Gottesdienst) {
-            const newGodi = await API.addGottesdienst(
-                godi.name,
-                godi.date,
-                godi.attendance,
-                godi.planId
-            )
-            plan.gottesdienste.push(newGodi)
-        }
+            if(godi.id == -1) {
+                const newGodi = await API.addGottesdienstNew(godi)
+                godi.id = newGodi.id
+                plan.gottesdienste.push(godi)
+            } else {
+                await API.updateGottesdienst(godi)
+                const index = plan.gottesdienste.findIndex(g => g.id == godi.id)
+                plan.gottesdienste.splice(index, 1)
+                plan.gottesdienste.push(godi)
+            }
+        },
+        onDelete: gottesdienst ? () => deleteGottedienst(gottesdienst.id) : undefined
     })
 }
 
@@ -147,11 +175,13 @@ function getDif(): Mark[] {
     })
 }
 
-async function saveChanges() {
+
+const saveChanges = debounce(saveChangesFunc, 600)
+
+async function saveChangesFunc() {
     const saved = await API.setMarks(getDif())
     if (saved) {
-        plan.marks = getMarks()
-        editedMarks.length = 0
+        isSaving.value = false
     }
 }
 
@@ -165,12 +195,23 @@ function canEdit(username: string) {
     return plan.editable.includes(username)
 }
 
+
 function toggleMark(gid, mid) {
     // TODO: track changes
     const username = plan.ministranten.find(m => m.id == mid)?.username
     if (!canEdit(username)) return;
 
     let mark = editedMarks.find(m => m.mid == mid && m.gid == gid);
+    if(!mark) {
+        let markFromPlan = plan.marks.find(m => m.gid == gid && m.mid == mid)
+        if(markFromPlan) {
+            mark = {
+                ...markFromPlan
+            }
+            editedMarks.push(mark)
+        }
+    }
+    console.log(mark, editedMarks, plan.marks)
     if (mark) {
         mark.value = ((mark.value + 2) % 3) - 1
     } else {
@@ -179,6 +220,9 @@ function toggleMark(gid, mid) {
         }
         editedMarks.push(mark)
     }
+
+    isSaving.value = true
+    saveChanges()
 }
 
 
@@ -255,6 +299,18 @@ async function createMinistrant(ministrantId?: number) {
     })
 }
 
+async function importZelebrationsplan() {
+    Dialogs.createDialog(ImportZelebrationsplanDialog, {
+        onPositive() {},
+        onNegative() {},
+        onDismiss() {}
+    }, {
+        planId: planId.value,
+        async onImport(godis: Gottesdienst[]) {
+            plan.gottesdienste.push(...godis)
+        }
+    })
+}
 
 
 </script>
@@ -262,50 +318,92 @@ async function createMinistrant(ministrantId?: number) {
 <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"
+                :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">
+                @add-gottesdienst="createGottesdienst()"
+                @add-ministrant="createMinistrant()"
+                @edit-ministrant="(id) => createMinistrant(id)"
+                @edit-gottesdienst="(id) => createGottesdienst(id)"
+                @import-zelebrationsplan="importZelebrationsplan()"
+                class="plan list"
+                v-if="viewMode === 'list'">
 
-            </TablePlan>
+            </ListView>
 
-            <MobilePlan
-                :gottesdienste="sortedGottesdienste"
-                :ministranten="plan.ministranten"
-                :marks="getMarks()"
-                :editable="plan.editable"
-                @toggle-mark="toggleMark"
-                class="plan mobile"
-                v-else>
+            <template v-if="viewMode === 'table'">
 
-            </MobilePlan>
+                <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"
+                />
                 
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
-                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>
     </main>
 </template>
@@ -323,16 +421,45 @@ async function createMinistrant(ministrantId?: number) {
 }
 
 .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>