|
|
| <!DOCTYPE html> |
| <html lang="th"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title></title> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Roboto', sans-serif; |
| margin: 0; |
| padding: 0; |
| background-color: white; |
| line-height: 1.5; |
| font-size: 13px; |
| position: relative; |
| } |
| .container { |
| max-width: 892px; |
| margin: 0 auto; |
| } |
| .header { |
| display: flex; |
| background-color: white; |
| padding: 0; |
| justify-content: flex-start; |
| } |
| .header-image { |
| width: 50%; |
| max-width: 350px; |
| height: auto; |
| padding: 5px 0; |
| } |
| .blue-bar { |
| background-color: #55a2cc; |
| height: 25px; |
| width: 100%; |
| } |
| .title { |
| text-align: center; |
| padding: 10px 15px; |
| font-size: 13px; |
| font-weight: bold; |
| color: #284f7c; |
| line-height: 1.5; |
| } |
| .profile-image { |
| display: block; |
| width: 128px; |
| height: 160px; |
| object-fit: cover; |
| margin: 0 auto 15px; |
| border: 1px solid #ddd; |
| background-color: #f9f9f9; |
| } |
| .info-table { |
| width: 100%; |
| border-collapse: collapse; |
| table-layout: fixed; |
| } |
| .info-table td { |
| padding: 6px 5px; |
| vertical-align: top; |
| border-bottom: 1px solid #f0f0f0; |
| word-wrap: break-word; |
| font-size: 12px; |
| } |
| .info-table td:first-child { |
| width: 250px; |
| color: #284f7c; |
| font-weight: bold; |
| } |
| .info-table td:last-child { |
| color: #000000; |
| } |
| .section-header { |
| font-weight: bold; |
| color: #000000; |
| margin-top: 20px; |
| margin-bottom: 8px; |
| font-size: 12px; |
| } |
| .footer { |
| background-color: #2f3133; |
| color: white; |
| text-align: center; |
| padding: 12px 0; |
| font-size: 7px; |
| margin-top: 24px; |
| line-height: 1.6; |
| } |
| .navigation { |
| position: fixed; |
| top: 95%; |
| left: 80%; |
| transform: translate(-50%, -50%); |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| z-index: 1000; |
| pointer-events: none; |
| } |
| .nav-button { |
| background: rgba(0, 0, 0, 0); |
| border: none; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| cursor: pointer; |
| font-size: 24px; |
| color: rgba(0, 0, 0, 0); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| pointer-events: auto; |
| } |
| .nav-button:hover { |
| background: rgba(0, 0, 0, 0); |
| color: rgba(0, 0, 0, 0); |
| } |
| .nav-button:disabled { |
| opacity: 0.3; |
| cursor: not-allowed; |
| } |
| .position-indicator { |
| background: rgba(0, 0, 0, 0); |
| padding: 8px 16px; |
| border-radius: 20px; |
| font-size: 12px; |
| color: rgba(0, 0, 0, 0); |
| pointer-events: auto; |
| white-space: nowrap; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container" id="profile-container"> |
| <div class="header"> |
| <img src="https://i.postimg.cc/kGk7nBX9/1756976041773.png" alt="logo" class="header-image"> |
| </div> |
|
|
| <div class="blue-bar"></div> |
|
|
| <div class="title"> |
| ทะเบียนใบอนุญาตทำงานของคนต่างด้าว<br> |
| ตามมติคณะรัฐมนตรี เมื่อวันที่ 24 กันยายน 2567 (บต.50 อ.6) |
| </div> |
|
|
| <img class="profile-image" id="worker-image" src="" alt=""> |
|
|
| <table class="info-table"> |
| <tr> |
| <td>เลขคำขอ</td> |
| <td id="worker-id"></td> |
| </tr> |
| <tr> |
| <td>Version no</td> |
| <td>01</td> |
| </tr> |
| <tr> |
| <td>แบบคำขอ</td> |
| <td>บต.50 อ.6</td> |
| </tr> |
| </table> |
|
|
| <div class="section-header">รายละเอียดแรงงานต่างด้าวรายบุคคล</div> |
|
|
| <table class="info-table"> |
| <tr> |
| <td>เลขอ้างอิงคนต่างด้าว</td> |
| <td id="worker-alien-ref"></td> |
| </tr> |
| <tr> |
| <td>เลขประจำตัวคนต่างด้าว</td> |
| <td id="worker-person-id"></td> |
| </tr> |
| <tr> |
| <td>ใบอนุญาตเลขที่</td> |
| <td id="worker-license"></td> |
| </tr> |
| <tr> |
| <td>ออกให้ ณ จังหวัด</td> |
| <td>สำนักงานจัดหางานจังหวัดระยอง</td> |
| </tr> |
| <tr> |
| <td>ชื่อภาษาไทย</td> |
| <td id="worker-name-th"></td> |
| </tr> |
| <tr> |
| <td>ชื่อภาษาอังกฤษ</td> |
| <td id="worker-name-en"></td> |
| </tr> |
| <tr> |
| <td>อายุ (ปี)</td> |
| <td id="worker-age"></td> |
| </tr> |
| <tr> |
| <td>สัญชาติ</td> |
| <td id="worker-nationality"></td> |
| </tr> |
| <tr> |
| <td>เลขที่หนังสือเดินทาง</td> |
| <td>-</td> |
| </tr> |
| <tr> |
| <td>สถานที่ทำงาน</td> |
| <td>36/6 หมู่ที่ 8 ตำบลมาบข่า อำเภอนิคมพัฒนา จังหวัดระยอง 21180</td> |
| </tr> |
| <tr> |
| <td>ชื่อนายจ้าง หรือ สθานที่ทำงาน</td> |
| <td>บริษัท บาน กง เอ็นจิเนียริ่ง จำกัด</td> |
| </tr> |
| <tr> |
| <td>ที่ตั้งสำนักงาน</td> |
| <td>102 หมู่ที่ 8 ถนนอุดรธานี-ขอนแก่น ตำบลโนนสูง อำเภอเมืองอุดรธานี จังหวัดอุดรธานี 41000</td> |
| </tr> |
| <tr> |
| <td>ลักษณะงาน</td> |
| <td>กรรมกร (กิจการก่อสร้าง)</td> |
| </tr> |
| <tr> |
| <td>อนุญาตให้ทำงานถึงวันที่</td> |
| <td>31/03/2026</td> |
| </tr> |
| </table> |
|
|
| <div class="footer"> |
| สำนักบริหารแรงงานต่างด้าว กรมการจัดหางาน ถนนมิตรไมตรี แขวงดินแดง เขตดินแดง กรุงเทพมหานคร 10400<br> |
| ช่องทางการติดต่อกรมการจัดหางาน หมายเลข 1506 กด 2<br> |
| Copyright © Department of Employment. All rights reserved.<br> |
| displayed in 0.061 seconds, used 16.34/19.7 MB (server load 10.46%) |
| </div> |
| </div> |
|
|
| <div class="navigation"> |
| <button class="nav-button" id="prev-btn" onclick="showPreviousWorker()">‹</button> |
| <div class="position-indicator" id="position-indicator">1 / 1</div> |
| <button class="nav-button" id="next-btn" onclick="showNextWorker()">›</button> |
| </div> |
|
|
| <script> |
| let allWorkerData = []; |
| let currentIndex = 0; |
| |
| |
| const sampleData = [ |
| { |
| "requestNumber": "WP-68-1011897", |
| "englishName": "MRS.AYE SANDRA HTWE", |
| "profileImage": "bg1.svg", |
| "thaiName": "นาง เอ ซานดรา ตเว", |
| "age": "47", |
| "alienReferenceNumber": "2492102076039", |
| "personalID": "6682190040778", |
| "nationality": "เมียนมา", |
| "workPermitNumber": "2100689040199", |
| "birthDate": "25/02/1978", |
| "receiptNumber": "2100680035190", |
| "paymentNumber": "IV680329/002308" |
| } |
| ]; |
| |
| async function loadWorkersData() { |
| try { |
| const response = await fetch('combined-data.json'); |
| if (response.ok) { |
| allWorkerData = await response.json(); |
| } else { |
| throw new Error('Failed to fetch combined-data.json'); |
| } |
| } catch (error) { |
| console.warn('Using sample data as fallback due to error:', error.message); |
| allWorkerData = sampleData; |
| } |
| |
| if (!Array.isArray(allWorkerData) || allWorkerData.length === 0) { |
| console.warn('Loaded data is not an array or is empty, using sample data.'); |
| allWorkerData = sampleData; |
| } |
| |
| const urlParams = new URLSearchParams(window.location.search); |
| const workerIdFromUrl = urlParams.get('id'); |
| |
| if (workerIdFromUrl) { |
| const workerIndex = allWorkerData.findIndex(w => w.requestNumber === workerIdFromUrl); |
| if (workerIndex !== -1) { |
| currentIndex = workerIndex; |
| } else { |
| console.warn(`Worker with ID "${workerIdFromUrl}" not found in combined data. Displaying first worker.`); |
| |
| } |
| } |
| |
| displayCurrentWorker(); |
| updateNavigationButtons(); |
| } |
| |
| function displayCurrentWorker() { |
| if (allWorkerData.length === 0) { |
| console.error("No worker data available to display."); |
| |
| document.getElementById('profile-container').innerHTML = '<p style="text-align:center; padding: 20px;">No worker data found.</p>'; |
| return; |
| } |
| |
| const worker = allWorkerData[currentIndex]; |
| |
| document.getElementById('worker-image').src = worker.profileImage || "https://via.placeholder.com/128x160?text=No+Image"; |
| document.getElementById('worker-image').alt = worker.thaiName || worker.englishName || "Worker Image"; |
| document.getElementById('worker-id').textContent = worker.requestNumber || "N/A"; |
| document.getElementById('worker-alien-ref').textContent = worker.alienReferenceNumber || "N/A"; |
| document.getElementById('worker-person-id').textContent = worker.personalID || "N/A"; |
| document.getElementById('worker-license').textContent = worker.workPermitNumber || "N/A"; |
| document.getElementById('worker-name-th').textContent = worker.thaiName || "N/A"; |
| document.getElementById('worker-name-en').textContent = worker.englishName || "N/A"; |
| document.getElementById('worker-age').textContent = worker.age || "N/A"; |
| document.getElementById('worker-nationality').textContent = worker.nationality || "N/A"; |
| |
| |
| document.getElementById('position-indicator').textContent = `${currentIndex + 1} / ${allWorkerData.length}`; |
| |
| const newUrl = new URL(window.location.href); |
| newUrl.searchParams.set('id', worker.requestNumber || ''); |
| window.history.replaceState({}, '', newUrl); |
| } |
| |
| function updateNavigationButtons() { |
| const prevBtn = document.getElementById('prev-btn'); |
| const nextBtn = document.getElementById('next-btn'); |
| |
| if (!prevBtn || !nextBtn) return; |
| |
| prevBtn.disabled = currentIndex === 0; |
| nextBtn.disabled = currentIndex >= allWorkerData.length - 1; |
| } |
| |
| function showPreviousWorker() { |
| if (currentIndex > 0) { |
| currentIndex--; |
| displayCurrentWorker(); |
| updateNavigationButtons(); |
| } |
| } |
| |
| function showNextWorker() { |
| if (currentIndex < allWorkerData.length - 1) { |
| currentIndex++; |
| displayCurrentWorker(); |
| updateNavigationButtons(); |
| } |
| } |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.key === 'ArrowLeft') { |
| showPreviousWorker(); |
| } else if (e.key === 'ArrowRight') { |
| showNextWorker(); |
| } |
| }); |
| |
| document.addEventListener('DOMContentLoaded', loadWorkersData); |
| </script> |
| </body> |
| </html> |
|
|
