Spaces:
Runtime error
Runtime error
| <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 = []; // Changed variable name | |
| let currentIndex = 0; | |
| // Sample data as fallback | |
| 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'); // Load from the combined file | |
| 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.`); | |
| // Optionally, inform the user that the specific ID was not found. | |
| } | |
| } | |
| displayCurrentWorker(); | |
| updateNavigationButtons(); | |
| } | |
| function displayCurrentWorker() { | |
| if (allWorkerData.length === 0) { | |
| console.error("No worker data available to display."); | |
| // Display a message to the user in the UI | |
| 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"; | |
| // Note: 'birthDate' is in combined-data.json but not displayed in current worker.html layout. | |
| 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> | |