add tooltip

make drawer size change for smaller screens
fix darkmode for dialog and add tooltip translation close #20
2025-11-12 10:22:22 +01:00 · 2025-11-12 10:22:12 +01:00 · 2025-11-12 10:21:42 +01:00 · 2025-11-12 10:20:44 +01:00 · 2025-11-12 10:18:29 +01:00 · 2025-11-11 16:05:25 +01:00
35 changed files with 241 additions and 178 deletions
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -4,7 +4,7 @@ go 1.24.5

 require (
 	gitea.tecamino.com/paadi/access-handler v1.0.19
-	gitea.tecamino.com/paadi/memberDB v1.0.21
+	gitea.tecamino.com/paadi/memberDB v1.1.2
 	gitea.tecamino.com/paadi/tecamino-dbm v0.1.1
 	gitea.tecamino.com/paadi/tecamino-logger v0.2.1
 	github.com/gin-contrib/cors v1.7.6
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -2,8 +2,8 @@ gitea.tecamino.com/paadi/access-handler v1.0.19 h1:L51Qg5RNjdIGeQsHwGUTV+ADRpUqP
 gitea.tecamino.com/paadi/access-handler v1.0.19/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
 gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
 gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.0.21 h1:kGQe5fUOc50oQj8caWcjnmmxJaSPuQEjeSG5qDT9Iz4=
-gitea.tecamino.com/paadi/memberDB v1.0.21/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
+gitea.tecamino.com/paadi/memberDB v1.1.2 h1:j/Tsr7JnzAkdOvgjG77TzTVBWd4vBrmEFzPXNpW7GYk=
+gitea.tecamino.com/paadi/memberDB v1.1.2/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1 h1:vAq7mwUxlxJuLzCQSDMrZCwo8ky5usWi9Qz+UP+WnkI=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1 h1:sQTBKYPdzn9mmWX2JXZBtGBvNQH7cuXIwsl4TD0aMgE=
--- a/index.html
+++ b/index.html
@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <title><%= productName %></title>

-    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />

-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
+    <link rel="icon" type="image/ico" href="favicon.ico" />
  </head>
  <body>
    <!-- quasar:entry-point -->
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "lightcontrol",
-  "version": "1.0.7",
+  "version": "1.0.8",
  "description": "A Tecamino App",
-  "productName": "Member Database",
+  "productName": "Attendence Records",
  "author": "A. Zuercher",
  "type": "module",
  "private": true,
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/favicon-128x128.png
+++ b/public/icons/favicon-128x128.png
--- a/public/icons/favicon-16x16.png
+++ b/public/icons/favicon-16x16.png
--- a/public/icons/favicon-32x32.png
+++ b/public/icons/favicon-32x32.png
--- a/public/icons/favicon-96x96.png
+++ b/public/icons/favicon-96x96.png
--- a/src/assets/lang/de-CH.yaml
+++ b/src/assets/lang/de-CH.yaml
@@ -32,6 +32,7 @@ settings: Iistellige
 databaseName: Datebank Name
 token: Schlüssu
 login: Amäude
+logout: Abmäude
 user: Benutzer
 password: Passwort
 isRequired: isch erforderlich
@@ -113,3 +114,7 @@ deleteResponsible: Veratwortläche entfernt
 deleteResponsibles: Veratwortläche entfernt
 expiration: Ablauf
 never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
--- a/src/assets/lang/de-DE.yaml
+++ b/src/assets/lang/de-DE.yaml
@@ -32,6 +32,7 @@ settings: Einstellungen
 databaseName: Datenbank Name
 token: Schlüssel
 login: Anmelden
+logout: Abmelden
 user: Benutzer
 password: Passwort
 isRequired: ist erforderlich
@@ -113,3 +114,7 @@ deleteResponsible: Verantwortliche entfernt
 deleteResponsibles: Verantwortliche entfernt
 expiration: Ablauf
 never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
--- a/src/assets/lang/en-US.yaml
+++ b/src/assets/lang/en-US.yaml
@@ -32,6 +32,7 @@ settings: Settings
 databaseName: Database Name
 token: Token
 login: Login
+logout: Logout
 user: User
 password: Password
 isRequired: is required
@@ -113,3 +114,7 @@ deleteResponsible: Responsible deleted
 deleteResponsibles: Responsibles deleted
 expiration: Expiration
 never: Never
+responsibles: Responsibles
+comment: Comment
+dark_mode: Dark-Mode
+light_mode: Light-Mode
--- a/src/boot/lang.js
+++ b/src/boot/lang.js
@@ -24,10 +24,27 @@ for (const path in modules) {
  messages[locale] = parsed;
 }

+function resolveLocale(desiredLocale) {
+  if (messages[desiredLocale]) return desiredLocale;
+
+  const baseLang = desiredLocale.split('-')[0];
+  // exact base match (e.g. en)
+  if (messages[baseLang]) return baseLang;
+
+  // first locale starting with that base (e.g. en-US, en-GB)
+  const partialMatch = Object.keys(messages).find((l) => l.startsWith(baseLang));
+  if (partialMatch) return partialMatch;
+
+  // fallback to English or the first available
+  return messages['en'] ? 'en' : Object.keys(messages)[0];
+}
+
+const selectedLocale = resolveLocale(savedLang || systemLocale);
+
 const i18n = createI18n({
  legacy: false, // Composition API mode
-  locale: savedLang || systemLocale,
-  fallbackLocale: systemLocale,
+  locale: selectedLocale,
+  fallbackLocale: resolveLocale(selectedLocale),
  messages,
 });

--- a/src/boot/quasar-global.ts
+++ b/src/boot/quasar-global.ts
@@ -1,15 +1,18 @@
 import { boot } from 'quasar/wrappers';
 import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
-import { Logo } from 'src/vueLib/models/logo';
+import { databaseName, logo, appName } from 'src/vueLib/models/settings';
+import { Dark } from 'quasar';

 export default boot(({ app, router }) => {
  setRouterInstance(router); // store router for global access
  const $q = app.config.globalProperties.$q;
  setQuasarInstance($q);

-  Logo.value = localStorage.getItem('icon') ?? Logo.value;
+  Dark.set(localStorage.getItem('mode') === 'true');
+
+  logo.value = localStorage.getItem('icon') ?? logo.value;
+  appName.value = localStorage.getItem('appName') ?? appName.value;
  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
  let primaryColor = localStorage.getItem('primaryColor');
  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
--- a/src/boot/restore-route.js
+++ b/src/boot/restore-route.js
@@ -1,8 +1,16 @@
 import { boot } from 'quasar/wrappers';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import { appApi } from './axios';

 export default boot(async ({ router }) => {
  const userStore = useUserStore();
+  // load user
+  try {
+    const { data } = await appApi.get('/login/me');
+    await userStore.setUser(data);
+  } catch {
+    /* ignore error */
+  }

  // Restore logic after router is ready but before navigation
  router.isReady().then(() => {
--- a/src/components/MemberEditAllDialog.vue
+++ b/src/components/MemberEditAllDialog.vue
@@ -25,9 +25,8 @@
          v-model="localMember.lastName"
        ></q-input>
        <q-input
-          class="q-ml-md col-5 required"
+          class="q-ml-md col-5"
          :label="$t('birthday')"
-          :rules="[(val) => !!val || $t('birthdayIsRequired')]"
          filled
          v-model="localMember.birthday"
        ></q-input>
--- a/src/components/ResponsibleEditAllDialog.vue
+++ b/src/components/ResponsibleEditAllDialog.vue
@@ -1,63 +0,0 @@
-<template>
-  <DialogFrame
-    ref="dialog"
-    :header-title="
-      newMember
-        ? $t('addNewResponsible')
-        : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
-    "
-    :height="600"
-    :width="500"
-  >
-    <q-form ref="form">
-      <MembersTable add-responsible v-on:update-event="emit('updated')" />
-    </q-form>
-  </DialogFrame>
-</template>
-
-<script setup lang="ts">
-import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
-import { ref } from 'vue';
-import type { Member } from 'src/vueLib/models/member';
-
-const dialog = ref();
-const form = ref();
-const newMember = ref(false);
-const localMember = ref<Member>({
-  id: 0,
-  firstName: '',
-  lastName: '',
-});
-
-const emit = defineEmits(['updated']);
-
-function open(member: Member | null) {
-  if (member === undefined) {
-    return;
-  }
-
-  if (member !== null) {
-    localMember.value = { ...member };
-    newMember.value = false;
-  } else {
-    localMember.value = {
-      id: 0,
-      firstName: '',
-      lastName: '',
-    };
-    newMember.value = true;
-  }
-
-  dialog.value?.open();
-}
-
-defineExpose({ open });
-</script>
-
-<style>
-.required .q-field__label::after {
-  content: ' *';
-  color: red;
-}
-</style>
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -10,7 +10,7 @@
        />
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

-        <q-toolbar-title class="text-primary-text"> {{ productName }} </q-toolbar-title>
+        <q-toolbar-title class="text-primary-text"> {{ appName }} </q-toolbar-title>

        <div>Version {{ version }}</div>
        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
@@ -18,7 +18,7 @@
      </q-toolbar>
    </q-header>

-    <q-drawer v-model="leftDrawerOpen" bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
      <q-list>
        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
          <q-item-section>{{ $t('login') }}</q-item-section>
@@ -63,12 +63,13 @@

 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { version, productName } from '../../package.json';
+import { version } from '../../package.json';
 import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName } from 'src/vueLib/models/settings';
+import { useQuasar } from 'quasar';

-const localLogo = ref(Logo);
+const localLogo = ref(logo);

 const leftDrawerOpen = ref(false);
 const user = useUserStore();
@@ -87,4 +88,10 @@ function closeDrawer() {
 function refresh() {
  window.location.reload();
 }
+
+// Change width based on screen size
+const drawerWidth = computed(() => {
+  const $q = useQuasar();
+  return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
+});
 </script>
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -7,6 +7,18 @@
        <q-card class="q-ma-lg">
          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
          <div class="row">
+            <q-input
+              :readonly="!user.isPermittedTo('settings', 'write')"
+              :class="[
+                colorGroup ? 'col-md-4' : 'col-md-3',
+                colorGroup ? 'col-md-6' : 'col-md-6',
+                colorGroup ? 'col-md-4' : 'col-md-12',
+                'q-pa-md',
+              ]"
+              filled
+              :label="$t('appName')"
+              v-model="settings.appName"
+            ></q-input>
            <q-input
              :readonly="!user.isPermittedTo('settings', 'write')"
              :class="[
@@ -133,8 +145,7 @@
 </template>

 <script setup lang="ts">
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName, databaseName } from 'src/vueLib/models/settings';
 import { reactive, ref, watch } from 'vue';
 import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
@@ -146,7 +157,8 @@ const colorGroup = ref(false);
 const user = useUserStore();

 const settings = reactive<Settings>({
-  icon: Logo.value,
+  appName: appName.value,
+  icon: logo.value,
  databaseName: databaseName.value,
  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
  primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
@@ -155,7 +167,8 @@ const settings = reactive<Settings>({
 });

 watch(settings, (newSettings) => {
-  Logo.value = newSettings.icon;
+  logo.value = newSettings.icon;
+  appName.value = newSettings.appName;
  databaseName.value = newSettings.databaseName;
 });

@@ -175,8 +188,10 @@ function save() {
  document.documentElement.style.setProperty('--q-primary-text', settings.primaryColorText);
  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
  document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
-  Logo.value = settings.icon;
+  appName.value = settings.appName;
+  logo.value = settings.icon;
  localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('appName', settings.appName);
  localStorage.setItem('databaseName', settings.databaseName);
  localStorage.setItem('primaryColor', settings.primaryColor);
  localStorage.setItem('primaryColorText', settings.primaryColorText);
--- a/src/vueLib/dialog/DialogFrame.vue
+++ b/src/vueLib/dialog/DialogFrame.vue
@@ -7,10 +7,10 @@
    :no-refocus="!minMaxState"
    :seamless="!minMaxState"
  >
-    <q-card class="layout" :style="cardStyle">
+    <q-card class="layout bg-surface text-on-surface" :style="cardStyle">
      <!-- Draggable Header -->
      <div
-        class="dialog-header row items-center justify-between bg-grey-1"
+        class="dialog-header row items-center justify-between bg-transparent"
        v-touch-pan.mouse.prevent.stop="handlePan"
      >
        <div v-if="headerTitle" class="text-left text-bold text-caption q-mx-sm">
@@ -139,13 +139,11 @@ const cardStyle = computed(() => {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
-  background-color: white;
 }

 /* Draggable header */
 .dialog-header {
  padding: 8px 0;
-  background: #f5f5f5;
  cursor: move;
  user-select: none;
 }
--- a/src/vueLib/general/useNotify.ts
+++ b/src/vueLib/general/useNotify.ts
@@ -48,9 +48,20 @@ export function useNotify() {
      $q?.notify({
        message: message,
        color: color,
-        position: 'bottom-right',
+        position: 'top',
        icon: icon,
        timeout: timeout,
+        actions: [
+          {
+            icon: 'close',
+            color: 'white',
+            dense: true,
+            round: true,
+            handler: () => {
+              /* just closes */
+            },
+          },
+        ],
      });
    }
  }
--- a/src/vueLib/login/LoginForm.vue
+++ b/src/vueLib/login/LoginForm.vue
@@ -3,7 +3,7 @@
  <q-form ref="refForm">
    <q-item-section class="q-gutter-md q-pa-md">
      <q-card :class="['q-gutter-xs q-items-center q-pa-lg', { shake: shake }]">
-        <div class="text-h5 text-primary text-center">{{ productName }}</div>
+        <div class="text-h5 text-primary text-center">{{ appName }}</div>
        <q-input
          ref="refUserInput"
          dense
@@ -47,7 +47,7 @@
 </template>

 <script setup lang="ts">
-import { productName } from '../../../package.json';
+import { appName } from '../models/settings';
 import { ref } from 'vue';
 import { useNotify } from '../general/useNotify';
 import { useLogin } from './useLogin';
--- a/src/vueLib/login/LoginMenu.vue
+++ b/src/vueLib/login/LoginMenu.vue
@@ -8,7 +8,9 @@
            <q-item-section class="text-primary">{{ loginText }}</q-item-section>
          </q-item>
          <q-item>
-            <q-btn flat :icon="Dark.mode ? 'light_mode' : 'dark_mode'" @click="Dark.toggle"></q-btn>
+            <q-btn flat :icon="darkMode" @click="toggleDarkMode"
+              ><q-tooltip>{{ $t(darkMode) }}</q-tooltip></q-btn
+            >
          </q-item>
          <q-item>
            <q-select
@@ -18,7 +20,8 @@
              dense
              v-model="langSelected"
              :options="langSelection"
-            ></q-select>
+              ><q-tooltip>{{ $t('language') }}</q-tooltip></q-select
+            >
          </q-item>
          <q-item
            v-if="
@@ -54,21 +57,34 @@ import { useLogin } from './useLogin';

 const userLogin = useLogin();
 const route = useRoute();
+const refLoginDialog = ref();
+const user = useUserStore();
+const { NotifyResponse } = useNotify();
+const currentUser = computed(() => user.user);
+const darkMode = computed(() => {
+  if (Dark.mode) {
+    return 'light_mode';
+  }
+  return 'dark_mode';
+});
 const showLogin = computed(
  () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
 );

-const user = useUserStore();
 const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
-const { NotifyResponse } = useNotify();
-const currentUser = computed(() => user.user);

+// switch between logged in or logged out text
 const loginText = computed(() => {
-  return currentUser.value ? 'Logout' : 'Login';
+  return currentUser.value ? i18n.global.t('logout') : i18n.global.t('login');
 });

-const refLoginDialog = ref();
+//switch between dark and light mode and save it in localStorage
+function toggleDarkMode() {
+  Dark.toggle();
+  localStorage.setItem('mode', String(Dark.mode));
+}

+// opens login page if no user is logged in otherwise it serves as logout
 function openLogin() {
  if (currentUser.value) {
    userLogin.logout().catch((err) => NotifyResponse(err, 'error'));
--- a/src/vueLib/login/useLogin.ts
+++ b/src/vueLib/login/useLogin.ts
@@ -2,7 +2,7 @@ import { appApi } from 'src/boot/axios';
 import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
-import { Logo } from '../models/logo';
+import { appName, logo } from '../models/settings';

 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -16,7 +16,8 @@ export function useLogin() {
      await appApi.post('/login', { user, password }).then((resp) => {
        const sets = resp.data.settings as Settings;

-        Logo.value = sets.icon;
+        logo.value = sets.icon;
+        appName.value = sets.appName;
        document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
        document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
        document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
--- a/src/vueLib/login/userStore.ts
+++ b/src/vueLib/login/userStore.ts
@@ -56,9 +56,20 @@ export const useUserStore = defineStore('user', {
        $q?.notify({
          message: "user '" + this.user?.username + "' logged out",
          color: 'orange',
-          position: 'bottom-right',
+          position: 'top',
          icon: 'warning',
          timeout: 5000,
+          actions: [
+            {
+              icon: 'close',
+              color: 'white',
+              dense: true,
+              round: true,
+              handler: () => {
+                /* just closes */
+              },
+            },
+          ],
        });
      } else {
        console.error("user '" + this.user?.username + "' logged out");
@@ -73,9 +84,20 @@ export const useUserStore = defineStore('user', {
          $q?.notify({
            message: err,
            color: 'orange',
-            position: 'bottom-right',
+            position: 'top',
            icon: 'warning',
            timeout: 5000,
+            actions: [
+              {
+                icon: 'close',
+                color: 'white',
+                dense: true,
+                round: true,
+                handler: () => {
+                  /* just closes */
+                },
+              },
+            ],
          });
        } else {
          console.error("user '" + this.user?.username + "' logged out");
--- a/src/vueLib/models/logo.ts
+++ b/src/vueLib/models/logo.ts
@@ -1,3 +0,0 @@
-import { ref } from 'vue';
-
-export const Logo = ref('');
--- a/src/vueLib/models/member.ts
+++ b/src/vueLib/models/member.ts
@@ -4,6 +4,7 @@ export interface Member {
  lastName: string;
  birthday?: string;
  age?: string;
+  comment?: string;
  address?: string;
  town?: string;
  zip?: string;
--- a/src/vueLib/models/settings.ts
+++ b/src/vueLib/models/settings.ts
@@ -1,4 +1,11 @@
+import { ref } from 'vue';
+
+export const logo = ref('');
+export const appName = ref('Attendance Records');
+export const databaseName = ref('members.dba');
+
 export type Settings = {
+  appName: string;
  icon: string;
  databaseName: string;
  primaryColor: string;
@@ -9,6 +16,7 @@ export type Settings = {

 export function DefaultSettings(): Settings {
  return {
+    appName: 'Attendance Records',
    icon: '',
    databaseName: 'members.dba',
    primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),
--- a/src/vueLib/tables/attendees/AttendeesTable.vue
+++ b/src/vueLib/tables/attendees/AttendeesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600">
+  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600" :height="600">
    <div class="q-pa-md">
      <q-table
        flat
@@ -93,8 +93,13 @@
        </template>
      </q-table>
    </div>
-    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700">
-      <MembersTable add-attendees v-on:update-event="updateTable" :event-id="localEvent?.id ?? 0" />
+    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
+      <MembersTable
+        add-attendees
+        :compare-members="attendees"
+        v-on:update-event="updateTable"
+        :event-id="localEvent?.id ?? 0"
+      />
    </DialogFrame>

    <OkDialog
@@ -164,7 +169,7 @@ function openRemoveDialog(...attendees: Members) {
    }
    deleteText.value += "'";
  } else {
-    deleteText.value = String(attendees.length) + ' attendees';
+    deleteText.value = String(attendees.length) + ' ' + i18n.global.t('attendees');
  }
  okDialog.value?.open(attendees);
 }
--- a/src/vueLib/tables/events/EventsTable.vue
+++ b/src/vueLib/tables/events/EventsTable.vue
@@ -153,10 +153,11 @@ import EditAllDialog from 'src/components/EventEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useEventTable } from './EventsTable';
-import { databaseName } from '../members/MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTable from '../attendees/AttendeesTable.vue';
 import type { Members } from 'src/vueLib/models/member';
+import { i18n } from 'src/boot/lang';

 export interface EventDialog {
  getSelected: () => Events;
@@ -211,7 +212,7 @@ function openRemoveDialog(...Events: Events) {
    }
    deleteText.value += "'";
  } else {
-    deleteText.value = String(Events.length) + ' Events';
+    deleteText.value = String(Events.length) + ' ' + i18n.global.t('events');
  }
  okDialog.value?.open(Events);
 }
--- a/src/vueLib/tables/members/MembersTable.ts
+++ b/src/vueLib/tables/members/MembersTable.ts
@@ -5,8 +5,6 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
 import { useResponsibleTable } from '../responsible/ResponsibleTable';

-export const databaseName = ref('members.dba');
-
 export function useMemberTable() {
  const members = ref<Members>([]);
  const { responsibles, updateResponsibles } = useResponsibleTable();
@@ -25,7 +23,8 @@ export function useMemberTable() {
    lastName: true,
    birthday: true,
    age: true,
-    address: false,
+    address: true,
+    comment: true,
    town: true,
    zip: true,
    phone: true,
@@ -68,6 +67,13 @@ export function useMemberTable() {
        field: 'age',
        sortable: true,
      },
+      {
+        name: 'comment',
+        align: 'left' as const,
+        label: i18n.global.t('comment'),
+        field: 'comment',
+        sortable: true,
+      },
      {
        name: 'address',
        align: 'left' as const,
@@ -191,7 +197,7 @@ export function useMemberTable() {
  }

  //updates member list from database
-  async function updateMembers() {
+  async function updateMembers(filter?: Members, filterbyName?: boolean) {
    loading.value = true;

    await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
@@ -224,6 +230,18 @@ export function useMemberTable() {
      })
      .finally(() => {
        loading.value = false;
+        //filter same members out so list is shorter
+        if (filter) {
+          members.value = members.value.filter(
+            (m1) =>
+              !filter.some((m2) => {
+                if (filterbyName) {
+                  return m1.firstName === m2.firstName && m1.lastName === m2.lastName;
+                }
+                return m1.id === m2.id;
+              }),
+          );
+        }
      });
  }

@@ -234,6 +252,7 @@ export function useMemberTable() {
      }
    });
  }
+
  return {
    members,
    responsibles,
--- a/src/vueLib/tables/members/MembersTable.vue
+++ b/src/vueLib/tables/members/MembersTable.vue
@@ -192,7 +192,7 @@

 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, type PropType } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/MemberEditAllDialog.vue';
@@ -201,7 +201,7 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
 import UploadDialog from 'src/components/UploadDialog.vue';
 import AddToEvent from 'src/components/AddToEvent.vue';
-import { databaseName } from './MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';

@@ -209,6 +209,7 @@ const inProps = defineProps({
  addAttendees: { type: Boolean },
  addResponsible: { type: Boolean },
  eventId: { type: Number },
+  compareMembers: { type: Object as PropType<Members> },
 });
 export interface MemberDialog {
  getSelected: () => Members;
@@ -248,6 +249,7 @@ onMounted(() => {
    disableColumns(
      'birthday',
      'age',
+      'comment',
      'town',
      'zip',
      'email',
@@ -265,7 +267,9 @@ onMounted(() => {
  appApi
    .post('database/open', { dbPath: databaseName.value, create: true })
    .then(() => {
-      updateMembers().catch((err) => NotifyResponse(err, 'error'));
+      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
+        NotifyResponse(err, 'error'),
+      );
    })
    .catch((err) => NotifyResponse(err, 'error'))

@@ -296,7 +300,7 @@ function openRemoveDialog(...members: Members) {
    }
    deleteText.value += "'";
  } else {
-    deleteText.value = String(members.length) + ' members';
+    deleteText.value = String(members.length) + ' ' + i18n.global.t('members');
  }
  okDialog.value?.open(members);
 }
--- a/src/vueLib/tables/responsible/ResponsibleTable.vue
+++ b/src/vueLib/tables/responsible/ResponsibleTable.vue
@@ -28,7 +28,7 @@
            dense
            flat
            icon="add"
-            @click="openAllValueDialog(null)"
+            @click="openResponsibleDialog"
          >
            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
          </q-btn>
@@ -49,9 +49,6 @@
        <div v-if="selectOption && selected.length > 0">
          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-            <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
-              $t('addToEvent')
-            }}</q-item>
            <q-item
              v-if="user.isPermittedTo('responsible', 'delete')"
              clickable
@@ -74,14 +71,7 @@
        </q-input>
      </template>
      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :style="user.isPermittedTo('responsible', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('responsible', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
+        <q-td :props="props">
          {{ props.value }}
        </q-td>
      </template>
@@ -98,14 +88,6 @@
            @click="openSubmenu = true"
          />
          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('responsible', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
            <q-item
              v-if="user.isPermittedTo('responsible', 'delete')"
              clickable
@@ -120,13 +102,18 @@
      </template>
    </q-table>
  </div>
-  <EditOneDialog
-    ref="editOneDialog"
-    endpoint="Responsibles/edit"
-    query-id
-    v-on:update="updateResponsibles"
-  ></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:updated="updateResponsibles"></EditAllDialog>
+  <DialogFrame
+    ref="responsibleDialog"
+    :header-title="$t('addNewResponsible')"
+    :height="600"
+    :width="500"
+  >
+    <MembersTable
+      add-responsible
+      :compare-members="responsibles"
+      v-on:update-event="updateResponsibles"
+    />
+  </DialogFrame>
  <OkDialog
    ref="okDialog"
    :dialog-label="$t('delete')"
@@ -143,13 +130,13 @@
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
 import { ref, onMounted } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import MembersTable from '../members/MembersTable.vue';
 import type { Member, Members } from 'src/vueLib/models/member';
-import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/ResponsibleEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
-import { databaseName } from '../members/MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';

@@ -158,9 +145,7 @@ export interface ResponsibleDialog {
 }

 const { NotifyResponse } = useNotify();
-const editOneDialog = ref();
-const editAllDialog = ref();
-const addToEventDialog = ref();
+const responsibleDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -189,14 +174,9 @@ onMounted(() => {
    });
 });

-// opens dialog for all Responsible values
-function openSingleValueDialog(label: string, field: string, Responsible: Member) {
-  editOneDialog.value?.open(label, field, Responsible);
-}
-
 //opens dialog for one value
-function openAllValueDialog(Responsible: Member | null) {
-  editAllDialog.value?.open(Responsible);
+function openResponsibleDialog() {
+  responsibleDialog.value?.open();
 }

 //opens remove dialog
@@ -211,7 +191,7 @@ function openRemoveDialog(...Responsibles: Members) {
    }
    deleteText.value += "'";
  } else {
-    deleteText.value = String(Responsibles.length) + ' Responsibles';
+    deleteText.value = String(Responsibles.length) + ' ' + i18n.global.t('responsibles');
  }
  okDialog.value?.open(Responsibles);
 }
@@ -237,10 +217,6 @@ function removeResponsible(...removeResponsibles: Members) {
      loading.value = false;
    });
 }
-
-function addToEvent() {
-  addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
-}
 </script>

 <style>
--- a/src/vueLib/tables/roles/RoleTable.vue
+++ b/src/vueLib/tables/roles/RoleTable.vue
@@ -196,7 +196,7 @@ function openRemoveDialog(...roles: Roles) {
  if (roles.length === 1) {
    deleteText.value = "'" + roles[0]?.role + "'";
  } else {
-    deleteText.value = String(roles.length) + ' roles';
+    deleteText.value = String(roles.length) + ' ' + i18n.global.t('roles');
  }
  okDialog.value?.open(roles);
 }
--- a/src/vueLib/tables/users/UserTable.vue
+++ b/src/vueLib/tables/users/UserTable.vue
@@ -206,7 +206,7 @@ function openRemoveDialog(...users: Users) {
  if (users.length === 1) {
    deleteText.value = "'" + users[0]?.user + "'";
  } else {
-    deleteText.value = String(users.length) + ' users';
+    deleteText.value = String(users.length) + ' ' + i18n.global.t('users');
  }
  okDialog.value?.open(users);
 }
Author	SHA1	Message	Date
Adrian Zürcher	87297a3b97	add tooltip	2025-11-12 10:22:22 +01:00
Adrian Zürcher	b12574994c	make drawer size change for smaller screens	2025-11-12 10:22:12 +01:00
Adrian Zürcher	66bb7c1942	fix darkmode for dialog and add tooltip translation close #20	2025-11-12 10:21:42 +01:00
Adrian Zürcher	f8b79de6a2	make app name changable and move settings parameter to settings close #19	2025-11-12 10:20:44 +01:00
Adrian Zürcher	c7fe7490f1	change to new logo with icongenie form quasar close #17	2025-11-12 10:18:29 +01:00
Adrian Zürcher	334c14a307	add login logout translation	2025-11-11 16:05:25 +01:00
Adrian Zürcher	b9f009162d	remove console logs	2025-11-11 16:05:07 +01:00
Adrian Zürcher	b844f487bc	make darkmode persistent close #15	2025-11-11 16:04:55 +01:00
Adrian Zürcher	829dc074e2	change to personal favicon (could be improved) close #14	2025-11-11 16:04:22 +01:00
Adrian Zürcher	63c7e89dd4	new release All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m22s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m26s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m40s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m22s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m15s Details	2025-11-11 08:13:54 +01:00
Adrian Zürcher	53a6408466	change birthay as non required	2025-11-11 08:13:01 +01:00
Adrian Zürcher	0793bb5e31	fix missing translation	2025-11-11 08:12:44 +01:00
Adrian Zürcher	8d243302f0	add filter function to exclude existing records	2025-11-11 08:12:23 +01:00
Adrian Zürcher	2cce310fc4	add fallback language to first match if language not avaiable	2025-11-11 08:10:52 +01:00
Adrian Zürcher	a9707dc799	change notification from top left to top center	2025-11-11 08:10:24 +01:00
Adrian Zürcher	67dee7a746	add new column comment close #13	2025-11-11 08:09:41 +01:00
Adrian Zürcher	c7c1b6c7c6	move notification with new marging and close button close #7	2025-11-10 08:09:09 +01:00
Adrian Zürcher	f7d5d9d019	fix localstorage not working on phone close #8	2025-11-09 22:32:22 +01:00
Adrian Zürcher	f1d7d3617d	fix column address missing close #10	2025-11-09 22:31:49 +01:00