checkpoint

frontend/src/components/AddSpendingModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import IconPlus from '@/components/icons/IconPlusCircle.vue'
 import IconX from '@/components/icons/IconX.vue'
+import IconPlus from '@/components/icons/IconPlusCircle.vue'
 import { useBoardStore } from '@/stores/boardStore'
 
 import { computed, ref } from 'vue'

frontend/src/components/BoardMenu.vue

@@ -2,6 +2,7 @@
 import IconUser from '@/components/icons/IconUser.vue'
 import IconInfo from '@/components/icons/IconInfo.vue'
 import IconStats from '@/components/icons/IconStats.vue'
+import IconGear from './icons/IconGear.vue'
 
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -10,6 +11,7 @@ const route = useRoute()
 const InfoPath = computed(() => '/boards/' + route.params.boardId)
 const UsersPath = computed(() => '/boards/' + route.params.boardId + '/users')
 const SpendingsPath = computed(() => '/boards/' + route.params.boardId + '/spendings')
+const SettingsPath = computed(() => '/boards/' + route.params.boardId + '/settings')
 </script>
 
 <template>
@@ -18,20 +20,28 @@ const SpendingsPath = computed(() => '/boards/' + route.params.boardId + '/spend
       <RouterLink
         :to="InfoPath"
         :class="[{ 'menu-active': route.path == InfoPath || route.path == InfoPath + '/' }]"
-        ><IconInfo
-      /></RouterLink>
+        ><IconInfo />
+      </RouterLink>
     </li>
     <li>
       <RouterLink :to="UsersPath" :class="[{ 'menu-active': route.path.startsWith(UsersPath) }]"
-        ><IconUser
-      /></RouterLink>
+        ><IconUser />
+      </RouterLink>
     </li>
     <li>
       <RouterLink
         :to="SpendingsPath"
         :class="[{ 'menu-active': route.path.startsWith(SpendingsPath) }]"
-        ><IconStats
-      /></RouterLink>
+        ><IconStats />
+      </RouterLink>
+    </li>
+    <li>
+      <RouterLink
+        :to="SettingsPath"
+        :class="[{ 'menu-active': route.path.startsWith(SettingsPath) }]"
+      >
+        <IconGear />
+      </RouterLink>
     </li>
   </ul>
 </template>

frontend/src/components/icons/IconGear.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-4"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+    />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+  </svg>
+</template>

frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import BoardUsersView from '@/views/BoardUsersView.vue'
 import BoardInfoView from '@/views/BoardInfoView.vue'
 import BoardSpendingsView from '@/views/BoardSpendingsView.vue'
+import BoardSettingsView from '@/views/BoardSettingsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,6 +36,11 @@ const router = createRouter({
           name: 'BoardEntries',
           component: BoardSpendingsView,
         },
+        {
+          path: 'settings',
+          name: 'BoardSettings',
+          component: BoardSettingsView,
+        },
       ],
     },
   ],

frontend/src/views/BoardSettingsView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ItemList from '@/components/ItemList.vue'
+
+import { useBoardStore } from '@/stores/boardStore'
+</script>
+
+<template>
+  <ItemList title="Einstellungen"> </ItemList>
+</template>

frontend/src/views/BoardUsersView.vue

@@ -20,7 +20,7 @@ const users = ref(store.getCurrentBoard().users)
       :subtitle="(user.getTotalSpending() / 100).toFixed(2) + '€'"
       subtitle-class="text-green-700"
     >
-      <AddSpendingModal :user-name="user.name"></AddSpendingModal>
+      <AddSpendingModal :user-name="user.name" />
     </ItemListElement>
   </ItemList>
 </template>