425 lines
No EOL
15 KiB
Svelte
425 lines
No EOL
15 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
export let data: PageData;
|
|
//import events from "$lib/data/activities_events.json"
|
|
const qualify_exams = data.qualify_exams;
|
|
const competitive_exams = data.competitive_exams;
|
|
const detail = data.detail;
|
|
const patternVue = "/images/pattern.png";
|
|
const sel1 = "/images/sel1.png";
|
|
const sel2 = "/images/sel2.png";
|
|
const sel3 = "/images/sel3.png";
|
|
const com1 = "/images/com1.jpg";
|
|
const com2 = "/images/com2.jpg";
|
|
const com3 = "/images/com3.jpg";
|
|
/* import FullCalendar from '$lib/components/FullCalendar.svelte';
|
|
import daygridPlugin from '@fullcalendar/daygrid';
|
|
import interactionPlugin from '@fullcalendar/interaction';
|
|
import type { EventClickArg } from '@fullcalendar/core';
|
|
let calendarRef;
|
|
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
|
|
);
|
|
|
|
// change the border color just for fun
|
|
info.el.style.borderColor = 'red';
|
|
|
|
}
|
|
let options = {
|
|
initialView: 'dayGridMonth',
|
|
plugins: [daygridPlugin,interactionPlugin],
|
|
locale: 'th',
|
|
headerToolbar: {
|
|
start: 'prev,next',
|
|
center: 'title'
|
|
},
|
|
contentHeight:"auto",
|
|
selectable: true,
|
|
buttonText: {
|
|
month: 'เดือน',
|
|
agendaDay: 'วัน',
|
|
agendaWeek: 'สัปดาห์',
|
|
today: 'วันนี้'
|
|
},
|
|
events:[
|
|
{ "id": "1","title": "ทำความสะอาด", "start": new Date() },
|
|
{ "id": "2","title": "กิจกรรมบางอย่าง", "start": "2023-03-28" },
|
|
{ "id": "3", "start": "2023-03-08T13:00:00", "end": "2023-03-10T12:00:00", "title": "ค่ายรักการอ่าน" }
|
|
],
|
|
dateClick: clickDate,
|
|
eventClick: clickEvent,
|
|
}; */
|
|
|
|
</script>
|
|
<section class="header relative items-start mt-12 flex max-h-860-px">
|
|
<div class="container mx-auto items-start flex flex-wrap">
|
|
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
|
|
<div class="pt-16 sm:pt-18">
|
|
<h2 class="font-semibold text-3xl text-blueGray-600">
|
|
กองสรรหาบุคคล
|
|
</h2>
|
|
<h2 class="pt-1 text-2xl text-red-400">
|
|
Recruitment Division
|
|
</h2>
|
|
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
|
|
การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
|
|
ชุมชน
|
|
</p>
|
|
<div class="mt-12">
|
|
<a
|
|
href="/qualifying"
|
|
target="_blank"
|
|
class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
|
>
|
|
การสอบคัดเลือก
|
|
</a>
|
|
<a
|
|
href="/competitive"
|
|
class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
|
target="_blank"
|
|
>
|
|
การสอบแข่งขัน
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
class="absolute top-0 b-auto right-0 sm:w-5/12 -mt-48 sm:mt-0 w-9/12 hidden md:flex"
|
|
src="{patternVue}"
|
|
alt="..."
|
|
/>
|
|
</section>
|
|
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
|
|
<div
|
|
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
|
|
style="transform: translateZ(0);"
|
|
>
|
|
<svg
|
|
class="absolute bottom-0 overflow-hidden"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
preserveAspectRatio="none"
|
|
version="1.1"
|
|
viewBox="0 0 2560 100"
|
|
x="0"
|
|
y="0"
|
|
>
|
|
<polygon
|
|
class="text-blueGray-100 fill-current"
|
|
points="2560 0 2560 100 0 100"
|
|
></polygon>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม. -->
|
|
<div class="container mx-auto">
|
|
<div class="flex flex-wrap px-6">
|
|
<div
|
|
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
|
|
<h6 class="text-2xl font-semibold ">
|
|
ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
|
|
</h6>
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
|
|
>
|
|
ประกาศทั้งหมด
|
|
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full lg:w-6/12 cardxl"
|
|
>
|
|
<div class="card bg-white shadow-xl w-full ">
|
|
<figure style="height: 250px;" class="img-hover-zoom--brightness">
|
|
<img src="{sel1}" alt="1" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 24 มี.ค. 2566
|
|
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-6/12">
|
|
<div class="flex flex-wrap space-y-8">
|
|
<div class="flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
|
|
<img src="{sel2}" alt="1" class="h-full" />
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<h2 class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 3 มี.ค. 2566
|
|
</h2>
|
|
<div class="card-title font-medium">
|
|
ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
|
|
<img src="{sel3}" alt="1" class="h-full"/>
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 20 ธันวาคม 2566
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ประกาศเกี่ยวกับการสอบแข่งขัน -->
|
|
<div class="container mx-auto mt-4">
|
|
<div class="flex flex-wrap px-6">
|
|
<div
|
|
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
|
|
<h6 class="text-2xl font-semibold ">
|
|
ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
|
|
</h6>
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
|
|
>
|
|
ประกาศทั้งหมด
|
|
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full lg:w-6/12 cardxl"
|
|
>
|
|
<div class="card bg-white shadow-xl w-full ">
|
|
<figure style="height: 250px;" class="img-hover-zoom--brightness">
|
|
<img src="{com1}" alt="1" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 24 มี.ค. 2566
|
|
<div class="badge badge-secondary text-white ml-4">NEW</div>
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-6/12">
|
|
<div class="flex flex-wrap space-y-8">
|
|
<div class="flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
|
|
<img src="{com2}" alt="1" class="h-full" />
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<h2 class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 13 มี.ค. 2566
|
|
</h2>
|
|
<div class="card-title font-medium">
|
|
ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" flex flex-col w-full">
|
|
<div class="card card-side bg-white shadow-xl w-full">
|
|
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
|
|
<img src="{com3}" alt="1" class="h-full"/>
|
|
</figure>
|
|
<div class="card-body w-full lg:w-7/12">
|
|
<div class="text-sm font-medium text-gray-500">
|
|
ข่าววันที่ : 9 มี.ค. 2566
|
|
</div>
|
|
<div class="card-title font-medium">
|
|
แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
|
|
</div>
|
|
<div class="mt-4 text-sm row-auto no-wrap">
|
|
<i class="fab fa-twitter text-blue-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-facebook-f text-blue-700"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
|
|
<i class="fab fa-line text-green-500"></i>
|
|
<span class="pl-2 pr-4 text-gray-400">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- <h1 class="p-5 text-center text-orange-800">กองสรรหาบุคคล</h1>
|
|
|
|
<div class="w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0" >
|
|
<div class="md:w-2/5 lg:w-2/5 px-3">
|
|
<FullCalendar bind:this={calendarRef} {options} />
|
|
</div>
|
|
<di class="md:w-3/5 lg:w-3/5 px-3">
|
|
{@html detail}
|
|
</di>
|
|
</div>
|
|
<div class="p-5">
|
|
<h2 class="text-2xl">ประกาศเกี่ยวกับการคัดเลือก</h2>
|
|
<table class="table table-compact w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>วันที่</th>
|
|
<th>การสอบ</th>
|
|
<th>หน่วยงาน</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each qualify_exams as exam}
|
|
<tr>
|
|
<th><a href={'/qualify_exams/' + exam.id}>{exam.date}</a></th>
|
|
<td>{exam.detail}</td>
|
|
<td>{exam.institute}</td>
|
|
</tr>{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-5">
|
|
<h2 class="text-2xl">ประกาศเกี่ยวกับการสอบแข่งขัน</h2>
|
|
<table class="table table-compact w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>วันที่</th>
|
|
<th>การสอบ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each competitive_exams as exam}
|
|
<tr>
|
|
<th><a href={'/competitive_exams/' + exam.id}>{exam.date}</a></th>
|
|
<td>{exam.detail}</td>
|
|
</tr>{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
้
|
|
<div class="px-5">
|
|
<h2>Full Size Calendar</h2>
|
|
<FullCalendar bind:this={calendarRef} {options} />
|
|
</div> -->
|
|
|
|
<style>
|
|
@media only screen and (max-width: 1024px) {
|
|
.card-side{
|
|
flex-direction: column !important;
|
|
}
|
|
.cardxl{
|
|
padding-right: 0rem !important;
|
|
padding-bottom: 2rem;
|
|
}
|
|
.imgCard{
|
|
height: 250px;
|
|
}
|
|
}
|
|
.card-side{
|
|
flex-direction: row;
|
|
}
|
|
.cardxl{
|
|
padding-right: 2rem;
|
|
}
|
|
.card-title{
|
|
height: 80px;
|
|
align-items: start;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
.imgCard{
|
|
max-height: 220px;
|
|
}
|
|
.img-hover-zoom--brightness img {
|
|
transition: transform 2s, filter 1.5s ease-in-out;
|
|
transform-origin: center center;
|
|
filter: brightness(97%);
|
|
}
|
|
|
|
/* The Transformation */
|
|
.img-hover-zoom--brightness:hover img {
|
|
filter: brightness(100%);
|
|
transform: scale(1.3);
|
|
}
|
|
</style> |