From 956058eef96745f66188a0cce8c8f6040dec0739 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 18 Jun 2023 15:04:51 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implement=20duplication=20and=20del?=
 =?UTF-8?q?etion=20of=20timetables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/settings/timetable-card.vue | 22 ++++++++++++++++++++--
 src/views/settings/TimetableSettings.vue   | 16 ++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/timetable-card.vue b/src/components/settings/timetable-card.vue
index 7fca0b2..02efa1c 100644
--- a/src/components/settings/timetable-card.vue
+++ b/src/components/settings/timetable-card.vue
@@ -1,14 +1,24 @@
 <script setup>
+import { ref, watch } from "vue";
 import {
   CircleIcon,
   CheckCircleIcon,
   Edit2Icon,
   TrashIcon,
+  AlertCircleIcon,
   CopyIcon,
 } from "lucide-vue-next";
 
 defineProps(["timetable", "editable", "selected"]);
 defineEmits(["click", "edit", "delete", "copy"]);
+
+const deleteConfirm = ref(false);
+
+watch(deleteConfirm, (value) => {
+  if (value) {
+    setTimeout(() => (deleteConfirm.value = false), 2000);
+  }
+});
 </script>
 
 <template>
@@ -27,8 +37,16 @@ defineEmits(["click", "edit", "delete", "copy"]);
 
     <div class="buttons">
       <Edit2Icon v-if="editable" @click="$emit('edit')" />
-      <TrashIcon v-if="editable" @click="$emit('delete')" />
-      <CopyIcon v-if="!editable" @click="$emit('copy')" />
+      <CopyIcon @click="$emit('copy')" />
+      <TrashIcon
+        v-if="editable && !deleteConfirm"
+        @click="deleteConfirm = true"
+      />
+      <AlertCircleIcon
+        v-if="editable && deleteConfirm"
+        color="red"
+        @click="$emit('delete')"
+      />
     </div>
   </div>
 </template>
diff --git a/src/views/settings/TimetableSettings.vue b/src/views/settings/TimetableSettings.vue
index bb9f8e8..d04b6d7 100644
--- a/src/views/settings/TimetableSettings.vue
+++ b/src/views/settings/TimetableSettings.vue
@@ -1,6 +1,14 @@
 <script setup>
 import TimetableCard from "@/components/settings/timetable-card.vue";
 import { timetables, localTimetables, timetableId } from "@/store";
+import { toRaw } from "vue";
+
+function copyTimetable(timetable) {
+  const newTimetable = structuredClone(toRaw(timetable));
+  newTimetable.title = "Copy of " + timetable.title;
+  newTimetable.id = new Date().getTime();
+  localTimetables.value.push(newTimetable);
+}
 </script>
 
 <template>
@@ -13,6 +21,13 @@ import { timetables, localTimetables, timetableId } from "@/store";
       :selected="timetableId == timetable.id"
       :editable="true"
       @click="timetableId = timetable.id"
+      @copy="copyTimetable(timetable)"
+      @delete="
+        localTimetables.splice(
+          localTimetables.findIndex((e) => e.id == timetable.id),
+          1
+        )
+      "
     />
   </div>
   <h2>{{ $t("settings.heading.remoteTimetables") }}</h2>
@@ -24,6 +39,7 @@ import { timetables, localTimetables, timetableId } from "@/store";
       :selected="timetableId == timetable.id"
       :editable="false"
       @click="timetableId = timetable.id"
+      @copy="copyTimetable(timetable)"
     />
   </div>
 </template>