show image list, use strong type for data from API

This commit is contained in:
schooltechx 2023-04-10 11:33:42 +07:00
parent 785ccc10a7
commit 0348e6b72e
7 changed files with 26 additions and 17 deletions

View file

@ -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)=>{

View file

@ -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
}

View file

@ -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" />