From 0348e6b72e5374e0a398c60df788e991eb07775b Mon Sep 17 00:00:00 2001
From: schooltechx <schooltechx@gmail.com>
Date: Mon, 10 Apr 2023 11:33:42 +0700
Subject: [PATCH] show image list, use strong type for data from API

---
 cms/src/routes/+page.server.ts                  |  1 -
 cms/src/routes/competitive/+page.server.ts      |  5 ++---
 cms/src/routes/competitive/[id]/+page.server.ts |  3 ++-
 cms/src/routes/competitive/[id]/+page.svelte    | 14 +++++++++-----
 cms/src/routes/qualifying/+page.server.ts       |  3 +--
 cms/src/routes/qualifying/[id]/+page.server.ts  |  3 ++-
 cms/src/routes/qualifying/[id]/+page.svelte     | 14 ++++++++++----
 7 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/cms/src/routes/+page.server.ts b/cms/src/routes/+page.server.ts
index 6613e95..d51e569 100644
--- a/cms/src/routes/+page.server.ts
+++ b/cms/src/routes/+page.server.ts
@@ -13,7 +13,6 @@ export const load: PageServerLoad = async ({fetch}) => {
 	if(!res.ok)
 		throw error(500, 'ไม่สามารถอ่านเนื้อหาหน้าหลักได้');
 	const {content,image} = await res.json()
-	console.log("xxx",image)
 	//Inner function reduce code and able to throw here 
 	async function loadExam(api_path:string,err_msg:string){
 		const res = await fetch(api_path)
diff --git a/cms/src/routes/competitive/+page.server.ts b/cms/src/routes/competitive/+page.server.ts
index bfe3f87..a185cff 100644
--- a/cms/src/routes/competitive/+page.server.ts
+++ b/cms/src/routes/competitive/+page.server.ts
@@ -4,12 +4,11 @@ import type {CalendarEvent,Exam} from '$lib/data/CMSDataType'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {
-    let exams:Exam[] = []
 	const res = await fetch(competitiveBase+"/competitive")
 	if(!res.ok)
         throw error(res.status, 'ไม่สามารถอ่านข้อมูลการสอบได้');
-    exams = await res.json()
-    
+        
+    const exams:Exam[] = await res.json()
     const events:CalendarEvent[]=[]
     exams.forEach((ex)=>{
         const {id,title,start,end,category_id} = ex
diff --git a/cms/src/routes/competitive/[id]/+page.server.ts b/cms/src/routes/competitive/[id]/+page.server.ts
index 5c1ae47..8d4d313 100644
--- a/cms/src/routes/competitive/[id]/+page.server.ts
+++ b/cms/src/routes/competitive/[id]/+page.server.ts
@@ -1,4 +1,5 @@
 import {competitiveBase} from '$lib/data/CMSDataType'
+import type {Exam} from '$lib/data/CMSDataType'
 import { error } from '@sveltejs/kit'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
@@ -11,7 +12,7 @@ export const load: PageServerLoad = async ({params,fetch}) => {
 	if(!res.ok){
 		throw error(500,{message:`พบข้อผิดพลาดเกี่ยวกับข้อมูลสอบคัดเลือก ${id}`})
 	}
-    const post = await res.json()
+    const post:Exam = await res.json()
 	post.date= post.start? dayjs(post.start).format("DD MMM BBBB"):""
     return post
 }
diff --git a/cms/src/routes/competitive/[id]/+page.svelte b/cms/src/routes/competitive/[id]/+page.svelte
index 9de01e4..ed4a7d4 100644
--- a/cms/src/routes/competitive/[id]/+page.svelte
+++ b/cms/src/routes/competitive/[id]/+page.svelte
@@ -34,12 +34,17 @@
             <div class="">
                 {@html data.detail}
             </div>
+			{#if data.images}
+				{#each data.images as i}
+			<div><img src={i.url} alt={i.title}></div>
+				{/each}
+			{/if}
 			{#if data.files}
 				{#each data.files as file}
-				<hr class="border-blueGray-200 mb-4 mt-4" />
-				<div class="text-lg py-1">
-					<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-				</div>
+			<hr class="border-blueGray-200 mb-4 mt-4" />
+			<div class="text-lg py-1">
+				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
+			</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />
@@ -51,5 +56,4 @@
 			</div>
         </div>
     </div>
-
 </section>
\ No newline at end of file
diff --git a/cms/src/routes/qualifying/+page.server.ts b/cms/src/routes/qualifying/+page.server.ts
index c2b1230..70ef6dd 100644
--- a/cms/src/routes/qualifying/+page.server.ts
+++ b/cms/src/routes/qualifying/+page.server.ts
@@ -4,11 +4,10 @@ import type {CalendarEvent,Exam} from '$lib/data/CMSDataType'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {
-    let exams:Exam[] = []
 	const res = await fetch(qualifyingBase+"/qualifying")
 	if(!res.ok)
         throw error(res.status, 'ไม่สามารถอ่านข้อมูลการสอบได้');
-    exams = await res.json()
+    const exams:Exam[] = await res.json()
     
     const events:CalendarEvent[]=[]
     exams.forEach((ex)=>{
diff --git a/cms/src/routes/qualifying/[id]/+page.server.ts b/cms/src/routes/qualifying/[id]/+page.server.ts
index b5cfaa2..785672e 100644
--- a/cms/src/routes/qualifying/[id]/+page.server.ts
+++ b/cms/src/routes/qualifying/[id]/+page.server.ts
@@ -1,4 +1,5 @@
 import {qualifyingBase} from '$lib/data/CMSDataType'
+import type {Exam} from '$lib/data/CMSDataType'
 import { error } from '@sveltejs/kit'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
@@ -11,7 +12,7 @@ export const load: PageServerLoad = async ({params,fetch}) => {
 	if(!res.ok){
 		throw error(500,{message:`พบข้อผิดพลาดเกี่ยวกับข้อมูลสอบคัดเลือก ${id}`})
 	}
-    const post = await res.json()
+    const post:Exam = await res.json()
 	post.date= post.start? dayjs(post.start).format("DD MMM BBBB"):""
     return post
 }
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index 699cc18..2ef78e6 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -34,12 +34,18 @@
             <div class="">
                 {@html data.detail}
             </div>
+			{#if data.images}
+				{#each data.images as i}
+			<div><img src={i.url} alt={i.title}></div>
+				{/each}
+			{/if}
+
 			{#if data.files}
 				{#each data.files as file}
-				<hr class="border-blueGray-200 mb-4 mt-4" />
-				<div class="text-lg py-1">
-					<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-				</div>
+			<hr class="border-blueGray-200 mb-4 mt-4" />
+			<div class="text-lg py-1">
+				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
+			</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />