From 89c1f18f0e986713b4dbbf35de734b9a10a8b25f Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Tue, 6 Jun 2023 23:23:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20timetable=20group=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/multiselect-buttons.vue          | 42 +++++++++++++++++++
 src/components/titlebar-element.vue           |  2 +-
 src/router/index.js                           |  6 +++
 src/strings.js                                |  2 +
 src/views/SettingsView.vue                    |  6 +++
 src/views/settings/TimetableGroupSettings.vue | 24 +++++++++++
 6 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/components/settings/multiselect-buttons.vue
 create mode 100644 src/views/settings/TimetableGroupSettings.vue

diff --git a/src/components/settings/multiselect-buttons.vue b/src/components/settings/multiselect-buttons.vue
new file mode 100644
index 0000000..d9b3317
--- /dev/null
+++ b/src/components/settings/multiselect-buttons.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { CircleIcon, CheckCircleIcon } from "lucide-vue-next";
+
+const props = defineProps(["options", "values", "modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+
+function toggleSelection(element) {
+  const selection = props.modelValue;
+  if (selection.includes(element)) {
+    const index = selection.indexOf(element);
+    if (index > -1) selection.splice(index, 1);
+  } else {
+    selection.push(element);
+  }
+  emit("update:modelValue", selection);
+}
+</script>
+
+<template>
+  <div
+    class="button"
+    v-for="(value, index) in values"
+    :key="value"
+    @click="toggleSelection(value)"
+  >
+    <CheckCircleIcon v-if="modelValue.includes(value)" />
+    <CircleIcon v-else />
+
+    <span class="text">{{ options[index] }}</span>
+  </div>
+</template>
+
+<style scoped>
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 5px;
+  cursor: pointer;
+  user-select: none;
+}
+</style>
diff --git a/src/components/titlebar-element.vue b/src/components/titlebar-element.vue
index a5d32fe..616af6e 100644
--- a/src/components/titlebar-element.vue
+++ b/src/components/titlebar-element.vue
@@ -44,11 +44,11 @@ function goBack() {
 .title {
   font-size: 25px;
   padding-left: 13px;
+  width: 100%;
 }
 
 .settings {
   display: flex;
-  width: 100%;
   justify-content: flex-end;
   padding-right: 13px;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 5b2c9bb..47b65ae 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import SettingsView from "@/views/SettingsView.vue";
 import LoginView from "@/views/LoginView.vue";
 import TokenView from "@/views/TokenView.vue";
 import FilteringSettings from "@/views/settings/FilteringSettings.vue";
+import TimetableGroupSettings from "@/views/settings/TimetableGroupSettings.vue";
 import AppearanceSettings from "@/views/settings/AppearanceSettings.vue";
 import AboutPage from "@/views/settings/AboutPage.vue";
 
@@ -52,6 +53,11 @@ const router = createRouter({
           name: "title.settings.filtering",
           component: FilteringSettings,
         },
+        {
+          path: "groups",
+          name: "title.settings.groups",
+          component: TimetableGroupSettings,
+        },
         {
           path: "appearance",
           name: "title.settings.appearance",
diff --git a/src/strings.js b/src/strings.js
index 45334ba..0e58975 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -9,6 +9,7 @@ export const strings = {
       settings: {
         main: "Settings",
         filtering: "Filtering",
+        groups: "Timetable Groups",
         appearance: "Appearance",
         about: "About",
       },
@@ -112,6 +113,7 @@ export const strings = {
       settings: {
         main: "Einstellungen",
         filtering: "Filter",
+        groups: "Stundenplan-Gruppen",
         appearance: "Aussehen",
         about: "Über",
       },
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 20e173a..1478116 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -3,6 +3,7 @@ import ScrollableContainer from "@/components/scrollable-container.vue";
 import PageCard from "@/components/settings/page-card.vue";
 import {
   FilterIcon,
+  CopyCheckIcon,
   PaletteIcon,
   InfoIcon,
   ChevronLeft,
@@ -18,6 +19,11 @@ import {
           :icon="FilterIcon"
           route="settings/filtering"
         />
+        <PageCard
+          :name="$t('title.settings.groups')"
+          :icon="CopyCheckIcon"
+          route="settings/groups"
+        />
         <PageCard
           :name="$t('title.settings.appearance')"
           :icon="PaletteIcon"
diff --git a/src/views/settings/TimetableGroupSettings.vue b/src/views/settings/TimetableGroupSettings.vue
new file mode 100644
index 0000000..d51f12f
--- /dev/null
+++ b/src/views/settings/TimetableGroupSettings.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { possibleTimetableGroups, timetableGroups } from "@/store";
+import MultiselectButtons from "@/components/settings/multiselect-buttons.vue";
+</script>
+
+<template>
+  <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
+  <p>{{ $t("settings.text.timetableGroups") }}</p>
+  <MultiselectButtons
+    :options="possibleTimetableGroups"
+    :values="possibleTimetableGroups"
+    v-model="timetableGroups"
+  />
+</template>
+
+<style scoped>
+h2 {
+  margin: 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+</style>