From 5aa3b2d72361ab02875db7a070f2c82addcfa396 Mon Sep 17 00:00:00 2001
From: schooltechx <schooltechx@gmail.com>
Date: Tue, 4 Apr 2023 18:31:50 +0700
Subject: [PATCH] Add Activity calendar and modify exam data to support
 calendar

---
 cms/README.md                                 |  2 +-
 .../lib/components/ActivityCalendar.svelte    | 20 ++++++--
 cms/src/lib/components/CalendarEvent.ts       |  8 +++
 cms/src/lib/data/competitive-exam.json        | 43 ++++++++++++++--
 cms/src/lib/data/qualify-exam.json            | 50 +++++++++++++------
 5 files changed, 98 insertions(+), 25 deletions(-)
 create mode 100644 cms/src/lib/components/CalendarEvent.ts

diff --git a/cms/README.md b/cms/README.md
index 5d5b38e..4314ce4 100644
--- a/cms/README.md
+++ b/cms/README.md
@@ -4,7 +4,7 @@
 - [TailWindCSS](https://tailwindcss.com/) ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss) 
 - [marked](https://marked.js.org/) รองรับ Markdown สำหรับเนื้อหาที่ซับซ้อน 
 - 
-- [Daisy UI ](https://daisyui.com/) UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework
+- [Daisy UI ](https://daisyui.com/) UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework มีวิธีการใช้ดูใน[ลิงค์นี้](https://github.com/schooltechx/youtube/blob/main/svelte/component/DaisyUI.md)
 - [PWA](https://web.dev/progressive-web-apps/) ทำให้ Web App เหมือนแอปมือถือ
 - [Playwright](https://playwright.dev/) เขียนโค้ดทำการทดสอบเวปแอปบน Browser 
 - [Vitest](https://vitest.dev/) ทำ Unit test สำหรับ Vite 
diff --git a/cms/src/lib/components/ActivityCalendar.svelte b/cms/src/lib/components/ActivityCalendar.svelte
index aa13824..4a7186a 100644
--- a/cms/src/lib/components/ActivityCalendar.svelte
+++ b/cms/src/lib/components/ActivityCalendar.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import FullCalendar from '$lib/components/FullCalendar.svelte';
 	import daygridPlugin from '@fullcalendar/daygrid';
-	// import timegridPlugin from '@fullcalendar/timegrid';
-	// import interactionPlugin from '@fullcalendar/interaction';
+	import type { EventClickArg } from '@fullcalendar/core';
+	import type {CalendarEvent} from './CalendarEvent'
 	let calendarRef;
-	export let events
-	export let options = {
+	export let events:CalendarEvent[]
+	let options = {
 		initialView: 'dayGridMonth',
 		plugins: [daygridPlugin],
 		locale: 'th',
@@ -23,9 +23,19 @@
         },
 		events,
 		dateClick: clickDate,
+		eventClick: clickEvent,
 	};
 	function clickDate(info: { dateStr: string; }){
 		alert('a day has been clicked!'+info.dateStr);
+	}
+	function clickEvent(info:EventClickArg){
+		alert(
+			'Event: ' + info.event.title +
+			'\nID: ' + info.event.id +
+			'\nCoordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY + 
+			'\nView: ' + info.view.type
+		);
 	}	
 </script>
-<FullCalendar bind:this={calendarRef} {options} />
\ No newline at end of file
+<FullCalendar bind:this={calendarRef} {options} />
+
diff --git a/cms/src/lib/components/CalendarEvent.ts b/cms/src/lib/components/CalendarEvent.ts
new file mode 100644
index 0000000..d947809
--- /dev/null
+++ b/cms/src/lib/components/CalendarEvent.ts
@@ -0,0 +1,8 @@
+export interface CalendarEvent {
+    id:string;
+    title:string;
+    start:Date|string;
+    end?:Date|string;
+    url?:string;
+    backgroundColor?:string;
+}
\ No newline at end of file
diff --git a/cms/src/lib/data/competitive-exam.json b/cms/src/lib/data/competitive-exam.json
index 0f57f39..a0b0610 100644
--- a/cms/src/lib/data/competitive-exam.json
+++ b/cms/src/lib/data/competitive-exam.json
@@ -1,7 +1,40 @@
 [
-    {"id":20,"date":"2023/03/25","detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 5/2566","institute":"สำนักอนามัย","time":"๕/๒๕๖๖"},
-    {"id":19,"date":"2023/03/23","detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 4/2566","institute":"สำนักการแพทย์","time":"๔/๒๕๖๖"},
-    {"id":18,"date":"2023/03/20","detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 3/2566","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๓/๒๕๖๖"},
-    {"id":17,"date":"2023/03/20","detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 2/2566","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๒/๒๕๖๖"},
-    {"id":16,"date":"2023/03/20","detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 1/2565","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๑/๒๕๖๖"}
+    {
+        "id":"20",
+        "institute":"สำนักอนามัย","time":"๕/๒๕๖๖",
+        "date":"2023/03/25",
+        "start":"2023-04-28T09:00:00",
+        "detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 5/2566",
+        "title":"ครั้งที่ 5/2566"
+    },
+    {
+        "id":"19",
+        "institute":"สำนักการแพทย์","time":"๔/๒๕๖๖",
+        "date":"2023/03/23",
+        "start":"2023-04-20T09:00:00",
+        "detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 4/2566",
+        "title":"ครั้งที่ 4/2566"
+    },
+    {
+        "id":"18","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๓/๒๕๖๖",
+        "date":"2023/03/20",
+        "start":"2023-04-10T09:00:00",
+        "detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 3/2566",
+        "title":"ครั้งที่ 3/2566"
+    },
+    {
+        "id":"17",
+        "institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๒/๒๕๖๖",
+        "date":"2023/03/20",
+        "start":"2023-04-10T09:00:00",
+        "detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 2/2566",
+        "title":"ครั้งที่ 2/2566"
+    },
+    {
+        "id":"16","date":"2023/03/20",
+        "institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๑/๒๕๖๖",
+        "start":"2023-04-10T09:00:00",
+        "detail":"การสอบแข่งขันเพื่อรรจุและแต่งตั้งบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ ครั้งที่ 1/2565",
+        "title":"ครั้งที่ 1/2565"
+    }
 ]
\ No newline at end of file
diff --git a/cms/src/lib/data/qualify-exam.json b/cms/src/lib/data/qualify-exam.json
index 756f25b..a8318e8 100644
--- a/cms/src/lib/data/qualify-exam.json
+++ b/cms/src/lib/data/qualify-exam.json
@@ -1,20 +1,42 @@
 [
-    {"id":20,"date":"2023/03/25",
-        "title":"ลูกจ้างและผู้ปฎิบัติงานในกรุงเทพมหานคร เป็นข้าราชการกรุงเทพมหานคร",
-        "detail":"ลูกจ้างและผู้ปฎิบัติงานในกรุงเทพมหานคร เป็นข้าราชการกรุงเทพมหานคร",
-        "institute":"สำนักอนามัย",
-        "time":"1/2565",
+    {
+        "id":"21",
+        "date":"2023/03/25","institute":"สำนักงาน ก.ก.","institute_id":1,
+        "start":"2023-04-28T09:00:00",
+        "title":"ลูกจ้างและผู้ปฎิบัติงาน 1/2565",
+        "detail":"ลูกจ้างและผู้ปฎิบัติงานในกรุงเทพมหานคร เป็นข้าราชการกรุงเทพมหานคร",       
         "docurl":"https://webportal.bangkok.go.th/public/user_files_editor/305/%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A8%E0%B8%84%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%88%E0%B9%89%E0%B8%B2%E0%B8%87.pdf"
     },
-    {"id":20,"date":"2023/03/25",
-        "title":"ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
-        "detail":"ประกาศรับสมัครสอบและคัดเลือกบุคคลเข้ารับราชการเป็นลูกจ้างชั่วคราว",
-        "institute":"สำนักอนามัย",
-        "time":"๕/๒๕๖๖",
+    {
+        "id":"20",
+        "date":"2023/03/25","institute":"สำนักอนามัย","institute_id":2,
+        "start":"2023-04-28T09:00:00",
+        "title":"วัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
+        "detail":"ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
         "docUrl":"https://webportal.bangkok.go.th/public/user_files_editor/305/%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A8%E0%B8%A7%E0%B8%B1%E0%B8%99%20%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20%E0%B8%AA%E0%B8%96%E0%B8%B2%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%88%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%AF.pdf"
     },
-    {"id":19,"date":"2023/03/23","detail":"ประกาศรายชื่อผู้มีสิทธิเข้ารับการสอบคัดเลือกบุคคลภายนอกช่วยปฎิบัติราชการ","institute":"สำนักการแพทย์","time":"๔/๒๕๖๖"},
-    {"id":18,"date":"2023/03/20","detail":"ประกาศกรุงเทพมหานคร เรื่อง ประกาศผู้ชนะการเสนอราคา จ้างเหมาซ่อมแซมป้ายชื่อ","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๓/๒๕๖๖"},
-    {"id":17,"date":"2023/03/20","detail":"ประกาศกรุงเทพมหานคร เรื่อง ประกาศผู้ชนะการเสนอราคา จ้างเหมาซ่อมแซมป้ายชื่อ","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๒/๒๕๖๖"},
-    {"id":16,"date":"2023/03/20","detail":"ประกาศกรุงเทพมหานคร เรื่อง ประกาศผู้ชนะการเสนอราคา จ้างเหมาซ่อมแซมป้ายชื่อ","institute":"สำนักวัฒนธรรม กีฬาและการท่องเที่ยว","time":"๑/๒๕๖๖"}
+    {
+        "id":"19",
+        "date":"2023/03/23","institute":"สำนักการแพทย์","institute_id":3,
+        "start":"2023-04-20",
+        "title":"วัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.",
+        "detail":"ประกาศรายชื่อผู้มีสิทธิเข้ารับการสอบคัดเลือกบุคคลภายนอกช่วยปฎิบัติราชการ"
+    },
+    {
+        "id":"18",
+        "date":"2023/03/25","institute":"สำนักอนามัย","institute_id":2,
+        "title":"ลูกจ้างและผู้ปฎิบัติงาน 1/2565",
+        "start":"2023-04-28T09:00:00",
+        "detail":"ลูกจ้างและผู้ปฎิบัติงานในกรุงเทพมหานคร เป็นข้าราชการกรุงเทพมหานคร",       
+        "docurl":"https://webportal.bangkok.go.th/public/user_files_editor/305/%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A8%E0%B8%84%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%88%E0%B9%89%E0%B8%B2%E0%B8%87.pdf"
+    },
+    {
+        "id":"17",
+        "date":"2023/03/25","institute":"สำนักงาน ก.ก.","institute_id":1,
+        "title":"ลูกจ้างและผู้ปฎิบัติงาน 1/2565",
+        "start":"2023-04-28T09:00:00",
+        "detail":"ลูกจ้างและผู้ปฎิบัติงานในกรุงเทพมหานคร เป็นข้าราชการกรุงเทพมหานคร",       
+        "docurl":"https://webportal.bangkok.go.th/public/user_files_editor/305/%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A8%E0%B8%84%E0%B8%B1%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%88%E0%B9%89%E0%B8%B2%E0%B8%87.pdf"
+    }
+ 
 ]
\ No newline at end of file