hrms-bangkok/hrms-exam
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แก้ไข ui สมัครสอบ

Browse source 
-เพิ่ม positionsTrue,positionsfalse
This commit is contained in:
AnandaTon 2023-10-03 10:49:46 +07:00
parent acc69e81b5
commit ae1bbf0b8a
2 changed files with 165 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

68
cms/src/lib/data/CMSDataType.ts
View file

@ -1,38 +1,40 @@
export interface Exam { export interface Exam {
id:string; id: string;
title:string; title: string;
detail?:string; detail?: string;
date?:string; date?: string;
announcement_startDate?:string; announcement_startDate?: string;
announcement_endDate?:string; announcement_endDate?: string;
announcementExam?:boolean; announcementExam?: boolean;
register_startDate?:string; register_startDate?: string;
register_endDate?:string; register_endDate?: string;
payment_startDate?:string; payment_startDate?: string;
payment_endDate?:string; payment_endDate?: string;
examDate?:string; examDate?: string;
categoryId?:string categoryId?: string;
category?:string category?: string;
image?:string; image?: string;
images?:{title:string,url:string}[]; images?: { title: string; url: string }[];
files?:{title:string,url:string}[]; files?: { title: string; url: string }[];
positions?:{id:string,title:string,path:string}[]; positions?: { id: string; title: string; path: string }[];
positionsTrue?: { id: string; title: string; path: string }[];
positionsFalse?: { id: string; title: string; path: string }[];
} }
export interface CalendarEvent { export interface CalendarEvent {
id:string; id: string;
title:string; title: string;
start:Date|string; start: Date | string;
end?:Date|string; end?: Date | string;
url?:string; url?: string;
backgroundColor?:string; backgroundColor?: string;
}
export interface CMSInfo {
logo_url: string;
title: string;
subtitle: string;
supervised: string;
address: string;
divisions: { title: string; url: string }[];
institutes: { title: string; url: string }[];
} }
export interface CMSInfo{
logo_url:string;
title:string;
subtitle:string;
supervised:string;
address:string;
divisions:{title:string,url:string}[];
institutes:{title:string,url:string}[];
}

206
cms/src/routes/qualifying/[id]/+page.svelte
View file

@ -1,114 +1,168 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types' import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
import { env } from '$env/dynamic/public' import { env } from '$env/dynamic/public';
const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM+"/exam/" const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM + '/exam/';
import dayjs from 'dayjs' import dayjs from 'dayjs';
function formatDate(start:string,end:string|undefined=undefined){ import { each } from 'svelte/internal';
if(!end) function formatDate(start: string, end: string | undefined = undefined) {
return dayjs(start).format("DD MMM BBBB") if (!end) return dayjs(start).format('DD MMM BBBB');
return dayjs(start).format("DD MMM BBBB")+" - "+dayjs(end).format("DD MMM BBBB") return dayjs(start).format('DD MMM BBBB') + ' - ' + dayjs(end).format('DD MMM BBBB');
} }
</script> </script>
<section> <section>
<div class="p-one parallax-inner"> <div class="p-one parallax-inner">
<h2>การคัดเลือก</h2> <h2>การคัดเลือก</h2>
</div> </div>
</section> </section>
<section class="pb-40 relative bg-blueGray-100"> <section class="pb-40 relative bg-blueGray-100">
<div class="container mx-auto justify-center flex flex-wrap "> <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=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md">
<div class="text-sm breadcrumbs"> <div class="text-sm breadcrumbs">
<ul> <ul>
<li class="text-pink-500 hover:text-pink-700 "> <li class="text-pink-500 hover:text-pink-700">
<a href="/" > <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> <svg
</a> xmlns="http://www.w3.org/2000/svg"
</li> class="h-4 w-4"
<li> fill="none"
<span class="breadTaxt">ประกาศเกี่ยวกับการคัดเลือกบุคลากรของกทม.</span> viewBox="0 0 24 24"
</li> 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> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center"> <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="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-2xl mb-3 font-medium">{data.title}</div>
<div class="text-sm"> <div class="text-sm">
<i class="fa-regular fa-calendar mr-4 text-blue-500"></i><span class="text-blue-500">วันประกาศ : {data.date}</span> <i class="fa-regular fa-calendar mr-4 text-blue-500" /><span class="text-blue-500"
>วันประกาศ : {data.date}</span
>
</div> </div>
{#if data.announcementExam} {#if data.announcementExam}
<div class="text-md card-detail p-4 mt-5 space-y-2"> <div class="text-md card-detail p-4 mt-5 space-y-2">
{#if data.register_startDate} {#if data.register_startDate}
<div><span class="pr-1 font-semibold ">สมัคร :</span> {formatDate(data.register_startDate,data.register_endDate)}</div> <div>
{/if} <span class="pr-1 font-semibold">สมัคร :</span>
{#if data.payment_startDate} {formatDate(data.register_startDate, data.register_endDate)}
<div><span class="pr-1 font-semibold">ชำระเงิน :</span> {formatDate(data.payment_startDate,data.payment_endDate)} </div> </div>
{/if} {/if}
{#if data.examDate } {#if data.payment_startDate}
<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div> <div>
{/if} <span class="pr-1 font-semibold">ชำระเงิน :</span>
</div> {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} {/if}
<hr class="border-blueGray-200 my-7" /> <hr class="border-blueGray-200 my-7" />
<div class=""> <div class="">
{@html data.detail} {@html data.detail}
</div> </div>
{#if data.images} {#if data.images}
{#each data.images as i} {#each data.images as i}
<div><img src={i.url} alt={i.title}></div> <div><img src={i.url} alt={i.title} /></div>
{/each} {/each}
{/if} {/if}
{#if data.announcementExam  && data.positions} {#if data.announcementExam && data.positions}
<div class="w-12/12 text-lg font-medium pt-6">สมัครสอบ</div> <div class="w-12/12 text-lg font-medium pt-6">สมัครสอบ</div>
{#each data.positions as p}
<hr class="border-blueGray-200 my-2" /> <hr class="border-blueGray-200 my-2" />
<div class="grid grid-flow-col justify-stretch ...">
<div class="text-lg py-1"> {#if data.positionsTrue}
<div class="flex flex-wrap items-center"> {#each data.positionsTrue as p}
<a class="btn btn-sm btn-outline btn-info cursor-pointe" href={positions_base_url+p.path} target="_blank"> <div class="text-lg py-1">
<i class="fa-solid fa-pen-to-square text-sm pr-2"></i> <div class="w-12/12 text-lg font-medium pt-6">ปริญญาบัตรขึ้นไป</div>
สมัครสอบ <div class="flex flex-wrap items-center">
</a> <a
<div class="pl-4"> class="btn btn-sm btn-outline btn-info cursor-pointe"
<span>{p.title}</span> href={positions_base_url + p.path}
</div> target="_blank"
</div> >
<i class="fa-solid fa-pen-to-square text-sm pr-2" />
สมัครสอบ
</a>
<div class="pl-4">
<span>{p.title}</span>
</div>
</div>
</div>
{/each}
{/if}
{#if data.positionsFalse}
{#each data.positionsFalse as a}
<div class="text-lg py-1">
<div class="w-12/12 text-lg font-medium pt-6">ต่ำกว่าปริญญาบัตร</div>
<div class="flex flex-wrap items-center">
<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>
<div class="pl-4">
<span>{a.title}</span>
</div>
</div>
</div>
{/each}
{/if}
</div> </div>
{/each}
<div class="pb-7"></div> <div class="pb-7" />
{/if} {/if}
{#if data.files} {#if data.files}
<div class="{data.files.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium'}">เอกสารประกอบ</div> <div class={data.files.length == 0 ? 'display-none' : 'w-12/12 text-lg font-medium'}>
{#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"></i>
อ่านเพิ่มเติม
</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> </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} {/each}
{/if} {/if}
<hr class="border-blueGray-200 my-7" /> <hr class="border-blueGray-200 my-7" />
<div> <div>
<a href="/qualifying" class="btn btn-outline text-gray-500"> <a href="/qualifying" class="btn btn-outline text-gray-500">
<i class="fa-solid fa-arrow-left mr-4"></i> <i class="fa-solid fa-arrow-left mr-4" />
ย้อนกลับ ย้อนกลับ
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>