✨ Allow updating remote timetables with permission

src/views/settings/TimetableSettings.vue

@@ -1,9 +1,18 @@
 <script setup>
 import TimetableCard from "@/components/settings/timetable-card.vue";
-import { timetables, localTimetables, timetableId } from "@/store";
+import {
+  timetable,
+  timetables,
+  localTimetables,
+  timetableId,
+  baseUrl,
+  fetchTimetables,
+} from "@/store";
+import { canEditTimetable } from "@/permission";
 import { PlusIcon, PaperclipIcon } from "lucide-vue-next";
 import { toRaw, ref } from "vue";
 import download from "downloadjs";
+import { loading, loadingProgress } from "@/store";
 
 function copyTimetable(timetable) {
   const newTimetable = structuredClone(toRaw(timetable));
@@ -47,6 +56,34 @@ function exportTimetable(timetable) {
     "application/json"
   );
 }
+
+async function uploadTimetable(id) {
+  loadingProgress.value = 0.1;
+  loading.value = true;
+
+  const timetableData = timetable.value;
+  const response = await fetch(
+    baseUrl + "/timetable?id=" + encodeURIComponent(id),
+    {
+      method: "put",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(timetableData),
+    }
+  );
+
+  if (response.status != 201) {
+    alert("Failed uploading timetable!");
+  } else {
+    loadingProgress.value = 0.5;
+    await fetchTimetables();
+    timetableId.value = id;
+  }
+
+  loadingProgress.value = 1;
+  loading.value = false;
+}
 </script>
 
 <template>
@@ -59,6 +96,7 @@ function exportTimetable(timetable) {
         :timetable="timetable"
         :selected="timetableId == timetable.id"
         :editable="true"
+        :remote="false"
         @click="timetableId = timetable.id"
         @edit="$router.push('timetable/edit/' + timetable.id)"
         @copy="copyTimetable(timetable)"
@@ -92,10 +130,12 @@ function exportTimetable(timetable) {
         :key="timetable.id"
         :timetable="timetable"
         :selected="timetableId == timetable.id"
-        :editable="false"
+        :editable="canEditTimetable(timetable.id)"
+        :remote="true"
         @click="timetableId = timetable.id"
         @copy="copyTimetable(timetable)"
         @export="exportTimetable(timetable)"
+        @upload="uploadTimetable(timetable.id)"
       />
     </div>
   </div>