235 lines
7.7 KiB
Svelte
235 lines
7.7 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
export let data: PageData;
|
|
let date = new Date().getFullYear();
|
|
import { env } from '$env/dynamic/public';
|
|
const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM + '/exam/';
|
|
import dayjs from 'dayjs';
|
|
import { each } from 'svelte/internal';
|
|
function formatDate(start: string, end: string | undefined = undefined) {
|
|
if (!end) return dayjs(start).add(543, 'year').format('DD MMM YYYY');
|
|
return (
|
|
dayjs(start).add(543, 'year').format('DD MMM YYYY') +
|
|
' - ' +
|
|
dayjs(end).add(543, 'year').format('DD MMM YYYY')
|
|
);
|
|
}
|
|
function isEndDatePassed(endDate: string | undefined) {
|
|
if (endDate) {
|
|
const today = new Date();
|
|
const endDateDate = new Date(endDate);
|
|
endDateDate.setDate(endDateDate.getDate() + 1);
|
|
return endDateDate.getTime() < today.getTime();
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function isRegistrationOpen() {
|
|
if (!data.register_startDate) return false;
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const startDate = data.register_startDate;
|
|
const endDate = data.register_endDate;
|
|
|
|
if (endDate) {
|
|
return today >= startDate && today <= endDate;
|
|
}
|
|
return today >= startDate;
|
|
}
|
|
|
|
function isRegistrationExpired() {
|
|
if (!data.register_endDate) return false;
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
return today > data.register_endDate;
|
|
}
|
|
|
|
function getRegistrationText() {
|
|
if (isRegistrationExpired()) return 'ดาวน์โหลดใบสมัคร';
|
|
if (isRegistrationOpen()) return 'ใบสมัคร';
|
|
return 'สมัครสอบ';
|
|
}
|
|
</script>
|
|
|
|
<section>
|
|
<div class="p-one parallax-inner">
|
|
<h2>การคัดเลือก</h2>
|
|
</div>
|
|
</section>
|
|
<section class="pb-40 relative bg-blueGray-100">
|
|
<div class="container mx-auto justify-center flex flex-wrap">
|
|
<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md">
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li class="text-pink-500 hover:text-pink-700">
|
|
<a href="/">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
><path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
/></svg
|
|
>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<span class="breadTaxt">ประกาศเกี่ยวกับการคัดเลือกบุคลากรของกทม.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
|
|
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
|
|
<div class="text-2xl mb-3 font-medium">{data.title}</div>
|
|
<div class="text-sm">
|
|
<i class="fa-regular fa-calendar mr-4 text-blue-500" /><span class="text-blue-500"
|
|
>วันประกาศ : {data.date}</span
|
|
>
|
|
</div>
|
|
{#if data.announcementExam}
|
|
<div class="text-md card-detail p-4 mt-5 space-y-2">
|
|
{#if data.register_startDate}
|
|
<div>
|
|
<span class="pr-1 font-semibold">สมัคร :</span>
|
|
{formatDate(data.register_startDate, data.register_endDate)}
|
|
</div>
|
|
{/if}
|
|
{#if data.payment_startDate}
|
|
<div>
|
|
<span class="pr-1 font-semibold">ชำระเงิน :</span>
|
|
{formatDate(data.payment_startDate, data.payment_endDate)}
|
|
</div>
|
|
{/if}
|
|
<!-- {#if data.examDate}
|
|
<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
|
|
{/if} -->
|
|
</div>
|
|
{/if}
|
|
<hr class="border-blueGray-200 my-7" />
|
|
<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.announcementExam && data.positions}
|
|
<div class="w-12/12 text-lg font-medium pt-6">
|
|
{getRegistrationText()}
|
|
</div>
|
|
|
|
<hr class="border-blueGray-200 my-2" />
|
|
<div class="grid grid-cols-2 justify-stretch ... gap-4">
|
|
<div>
|
|
{#if data.positionsTrue}
|
|
<div class="w-12/12 text-lg font-medium pt-6">ประเภทวิชาการ</div>
|
|
{#each data.positionsTrue as p}
|
|
<div class="text-lg py-1">
|
|
<div class="flex flex-wrap items-center">
|
|
{#if 'register_endDate' in data && data.canRegister}
|
|
<a
|
|
class="btn btn-sm btn-outline btn-info cursor-pointe"
|
|
href={positions_base_url + p.path}
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-pen-to-square text-sm pr-2" />
|
|
ใบสมัคร
|
|
</a>
|
|
{:else}
|
|
<a
|
|
class="btn btn-sm btn-outline btn-info cursor-pointe"
|
|
href={positions_base_url + p.path}
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-pen-to-square text-sm pr-2" />
|
|
{isRegistrationOpen() || isRegistrationExpired() ? 'ใบสมัคร' : ''}
|
|
</a>
|
|
{/if}
|
|
<div class="pl-2">
|
|
<span>{p.title}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
{#if data.positionsFalse}
|
|
<div class="w-12/12 text-lg font-medium pt-6">ประเภททั่วไป</div>
|
|
{#each data.positionsFalse as a}
|
|
<div class="text-lg py-1">
|
|
<div class="flex flex-wrap items-center">
|
|
<!-- {data.canRegister} -->
|
|
{#if 'register_endDate' in data && data.canRegister}
|
|
<a
|
|
class="btn btn-sm btn-outline btn-info cursor-pointe"
|
|
href={positions_base_url + a.path}
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-pen-to-square text-sm pr-2" />
|
|
ใบสมัคร
|
|
</a>
|
|
{:else}
|
|
<a
|
|
class="btn btn-sm btn-outline btn-info cursor-pointe"
|
|
href={positions_base_url + a.path}
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-pen-to-square text-sm pr-2" />
|
|
{isRegistrationOpen() || isRegistrationExpired() ? 'ใบสมัคร' : ''}
|
|
</a>
|
|
{/if}
|
|
<div class="pl-2">
|
|
<span>{a.title}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pb-7" />
|
|
{/if}
|
|
|
|
{#if data.files}
|
|
<div class={data.files.length == 0 ? 'display-none' : 'w-12/12 text-lg font-medium'}>
|
|
เอกสารประกอบ
|
|
</div>
|
|
{#each data.files as file}
|
|
<hr class="border-blueGray-200 my-2" />
|
|
|
|
<div class="text-lg py-1">
|
|
<div class="flex flex-wrap items-center">
|
|
<a
|
|
class="btn btn-sm btn-outline btn-primary cursor-pointe"
|
|
href={file.url}
|
|
target="_blank"
|
|
>
|
|
<i class="fa-solid fa-eye text-sm pr-2" />
|
|
อ่านเพิ่มเติม
|
|
</a>
|
|
<div class="pl-4">
|
|
<!-- <i class="fa-solid fa-bookmark mr-3 text-xs text-primary"></i> -->
|
|
<span>{file.title}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
<hr class="border-blueGray-200 my-7" />
|
|
<div>
|
|
<a href="/qualifying" class="btn btn-outline text-gray-500">
|
|
<i class="fa-solid fa-arrow-left mr-4" />
|
|
ย้อนกลับ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|