walamana/miniplan
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

save changed marks

Browse Source
This commit is contained in:
walamana
2023-09-18 11:51:41 +02:00
parent 00cca5ca9a
commit 24f14da9b2
16 changed files with 300 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/src/App.vue
View File

@@ -2,9 +2,23 @@
import {RouterLink, RouterView} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import LoginPanel from "@/components/LoginPanel.vue";
import {ref} from "vue";
import {onMounted, ref} from "vue";
import {Auth} from "@/services/auth";
const showPopup = ref(false)
let showPopup = ref(false)
let loggedIn = ref(false)
Auth.loggedInSubject.subscribe((isLoggedIn) => {
loggedIn.value = isLoggedIn
})
function logout(){
Auth.logout()
}
onMounted(() => {
Auth.checkForToken()
})
</script>
@@ -14,13 +28,14 @@ const showPopup = ref(false)
Miniplan
</div>
<div class="right">
<button class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
<button v-if="!loggedIn" class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
<button v-if="loggedIn" class="flat" @click="logout"><i>logout</i> Abmelden</button>
</div>
</nav>
<RouterView/>
<div class="popup-container" :class="{show: showPopup}" @click.self="showPopup = false">
<LoginPanel :active="showPopup"/>
<LoginPanel :active="showPopup" @success="showPopup = false"/>
</div>
</template>

7
public/src/components/LoginPanel.vue
View File

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

15
public/src/components/MobilePlan.vue
View File

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

2
public/src/components/Plan.vue
View File

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

42
public/src/components/TablePlan.vue
View File

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

4
public/src/models/models.ts
View File

@@ -8,6 +8,7 @@ export interface Gottesdienst {
export interface SimplifiedMinistrant {
id: number,
username: string,
firstname: string,
lastname: string
}
@@ -21,6 +22,5 @@ export interface Mark {
export interface PlanModel {
gottesdienste: Gottesdienst[],
ministranten: SimplifiedMinistrant[],
marks: Mark[],
editable: number[]
marks: Mark[]
}

33
public/src/views/api.ts → public/src/services/api.ts
View File

@@ -1,9 +1,10 @@
import type {Gottesdienst} from "@/models/models";
import type {Gottesdienst, Mark} from "@/models/models";
import {Auth} from "@/services/auth";
const API_ENDPOINT = "http://0.0.0.0:8080/api"
async function api(endpoint: string, method: string = "GET", body?: any ) {
export async function api(endpoint: string, method: string = "GET", body?: any ) {
let isJson = (typeof body == "object")
return fetch(API_ENDPOINT + endpoint, {
method: method,
@@ -11,7 +12,8 @@ async function api(endpoint: string, method: string = "GET", body?: any ) {
headers: {
Accept: "application/json",
"Content-Type": (isJson ? "application/json" : "text/plain"),
"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Origin": "*",
"Authorization": "Bearer " + Auth.getToken()
}
})
}
@@ -67,23 +69,16 @@ export namespace API {
.then(data => data.status == 200)
}
export async function login(username: string, password: string): Promise<{
success: boolean,
token?: string
}> {
return api("/auth", "POST", {
username, password
}).then(res => res.json() as Promise<{
success: boolean,
token?: string
}>)
.then(res => {
if(res.success) {
console.log("test")
}
return Promise.resolve(res)
})
export async function setMarks(marks: Mark[]): Promise<boolean> {
return api("/marks", "PATCH", marks)
.then(res => Promise.resolve(res.status == 200))
}
export async function resetPassword(username: String): Promise<any> {
return api("/auth/reset", "POST", { username })
.then(res => res.json())
}
}

85
public/src/services/auth.ts Normal file
View File

@@ -0,0 +1,85 @@
import {api} from "@/services/api";
import {Subject} from "rxjs";
export namespace Auth {
let loggedIn = false
let user = ""
let privileges: string[] = []
export const loggedInSubject: Subject<boolean> = new Subject<boolean>()
export function isLoggedIn() {
return loggedIn
}
export function getUser() {
return user;
}
export function getPrivileges() {
return privileges
}
function setToken(token: string) {
window.localStorage.setItem("token", token)
}
export function getToken(): string {
return window.localStorage.getItem("token")
}
export async function login(username: string, password: string): Promise<{
success: boolean,
token?: string
}> {
return api("/auth", "POST", {
username, password
}).then(res => res.json() as Promise<{
success: boolean,
token?: string
privileges?: string[]
}>).then(res => {
if(res.success) {
loggedIn = true
user = username;
privileges = res.privileges ?? []
privileges.push(username)
setToken(res.token ?? "")
loggedInSubject.next(true)
}
return Promise.resolve(res)
})
}
export function logout(){
setToken("")
loggedIn = false;
user = "";
privileges = []
loggedInSubject.next(false)
}
export function checkForToken() {
const token = getToken()
if(token && token != ""){
const payload = parseJwt(token)
loggedIn = true
user = payload.username
privileges = payload.privileges
privileges.push(user)
loggedInSubject.next(true)
}
}
function parseJwt (token) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
}

99
public/src/views/PlanView.vue
View File

@@ -2,23 +2,26 @@
import {onMounted, reactive, ref, toRaw, computed} from "vue";
import TablePlan from "@/components/TablePlan.vue";
import {API} from "@/views/api";
import {API} from "@/services/api";
import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
import MobilePlan from "@/components/MobilePlan.vue";
import PlanActionBar from "@/components/PlanActionBar.vue";
import {Auth} from "@/services/auth";
const MAX_WIDTH_MOBILE = 600;
const plan = reactive<{
gottesdienste: Gottesdienst[],
ministranten: SimplifiedMinistrant[],
marks: Mark[],
editable: number[]
editable: string[]
}>({
gottesdienste: [],
ministranten: [],
marks: [],
editable: []
})
const mobile = ref(false)
const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
const editedMarks = reactive<Mark[]>([]);
const editPlanAdmin = ref(false)
@@ -35,7 +38,7 @@ async function addGodi(data, validate) {
let date = Date.parse(data.date + "T" + data.time);
let attendance = data.attendance && data.attendance != ""
? Date.parse(data.date + "T" + data.attendance)
: (date - 1000*60*30)
: (date - 1000 * 60 * 30)
console.log(date, attendance, data.date + "T" + data.attendance)
let newGodi = await API.addGottesdienst(
data.name,
@@ -50,7 +53,7 @@ async function addGodi(data, validate) {
async function deleteGottedienst(id) {
let deleted = await API.deleteGottesdienst(id)
if(deleted) {
if (deleted) {
let index = plan.gottesdienste.findIndex(godi => godi.id == id)
plan.gottesdienste.splice(index, 1)
}
@@ -62,64 +65,98 @@ onMounted(async () => {
plan.gottesdienste = fetchedPlan.gottesdienste
plan.ministranten = fetchedPlan.ministranten
plan.marks = fetchedPlan.marks
Auth.checkForToken()
})
function getMarks(): Mark[]{
return plan.marks.filter((mark: Mark) => {
let difMark = editedMarks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
return !difMark
}).concat(editedMarks);
Auth.loggedInSubject.subscribe(loggedIn => {
if (loggedIn) {
plan.editable = Auth.getPrivileges()
if(Auth.getUser() == "admin"){
editPlanAdmin.value = true
}
}else {
editPlanAdmin.value = false
plan.editable = []
}
})
window.addEventListener("resize", (ev) => {
mobile.value = window.innerWidth <= MAX_WIDTH_MOBILE
})
function getMarks(): Mark[] {
return plan.marks.filter((mark: Mark) => {
let difMark = editedMarks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
return !difMark
}).concat(editedMarks);
}
function getDif(): Mark[]{
return editedMarks.filter((mark: Mark) => {
let sameMark = plan.marks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
return (!sameMark && mark.value != 0) || (sameMark && mark.value != sameMark.value)
})
function getDif(): Mark[] {
return editedMarks.filter((mark: Mark) => {
let sameMark = plan.marks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
return (!sameMark && mark.value != 0) || (sameMark && mark.value != sameMark.value)
})
}
function canEdit(mid) {
return plan.editable.includes(mid)
async function saveChanges() {
const saved = await API.setMarks(getDif())
if(saved) {
plan.marks = getMarks()
editedMarks.length = 0
}
}
async function resetPassword(username: string) {
const result = await API.resetPassword(username)
alert("Neues Passwort für " + username + "\n\n" + result.password)
console.log(result)
}
function canEdit(username: string) {
return plan.editable.includes(username)
}
function toggleMark(gid, mid) {
// TODO: track changes
if(!canEdit(mid)) return;
// 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) {
mark.value = ((mark.value + 2) % 3) - 1
} else {
mark = {
gid, mid, value: 1
let mark = editedMarks.find(m => m.mid == mid && m.gid == gid);
if (mark) {
mark.value = ((mark.value + 2) % 3) - 1
} else {
mark = {
gid, mid, value: 1
}
editedMarks.push(mark)
}
editedMarks.push(mark)
}
}
</script>
<template>
<main>
<TablePlan
:gottesdienste="plan.gottesdienste"
:gottesdienste="sortedGottesdienste"
:ministranten="plan.ministranten"
:marks="getMarks()"
:editable="plan.editable"
:edit="editPlanAdmin"
:small-mode="editPlanAdmin"
@added="addGodi"
@delete="deleteGottedienst"
@toggle-mark="toggleMark"
@end-edit="editPlanAdmin = false"
@reset-password="resetPassword"
class="plan table"
v-if="!mobile">
</TablePlan>
<MobilePlan
:gottesdienste="plan.gottesdienste"
:gottesdienste="sortedGottesdienste"
:ministranten="plan.ministranten"
:marks="getMarks()"
:editable="plan.editable"
@@ -134,6 +171,7 @@ function toggleMark(gid, mid) {
:save="getDif().length > 0"
:plan="false"
:godi="true"
@save="saveChanges()"
/>
@@ -146,6 +184,7 @@ function toggleMark(gid, mid) {
.plan {
padding-bottom: 100px;
}
.plan.table {
width: 100%;
}