Merge pull request #13 from viiccwen/feature/sonner

Integrate `vue-sonner` for Toast Notifications

Author: WuSandWitch

package.json

@@ -15,7 +15,8 @@
     "@vuepic/vue-datepicker": "^8.1.1",
     "ics": "^3.7.2",
     "primevue": "^4.2.4",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-sonner": "^1.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

pnpm-lock.yaml

@@ -1,8 +1,10 @@
 <script setup>
-import DatePicker from "primevue/datepicker";
-import "@vuepic/vue-datepicker/dist/main.css";
-import { ref } from "vue";
-import * as ics from "ics";
+import DatePicker from 'primevue/datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+import { ref } from 'vue';
+import * as ics from 'ics';
+import { Toaster, toast } from 'vue-sonner';
+
 
 const startDate = ref();
 const endDate = ref();
@@ -220,15 +222,15 @@ function createEvents(courses, curriculum, classRooms) {
 
 function downloadFile() {
   if (!startDate.value || !endDate.value) {
-    alert("請選擇起始日期和結束日期！");
+    toast.error('請選擇起始日期和結束日期！');
     return;
   }
-  if (new Date(startDate.value) > new Date(endDate.value)) {
-    alert("結束日期需大於起始日期！");
+  if(new Date(startDate.value) > new Date(endDate.value)) {
+    toast('結束日期需大於起始日期！');
     return;
   }
   if (!curriculumFile.value || !curriculumFile.value.files[0]) {
-    alert("請上傳課表網頁檔案！");
+    toast('請上傳課表網頁檔案！');
     return;
   }
 
@@ -300,6 +302,7 @@ function downloadFile() {
 </script>
 
 <template>
+  <Toaster richColors />
   <img alt="Logo" src="./assets/ntust_so_hard.png" class="logo" />
   <h1 class="title">NTUST Calendar Maker</h1>
   <p>製作 .ics 檔案以匯入通用日曆軟體！</p>