You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
594 lines
31 KiB
HTML
594 lines
31 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Barrier Staff Interface | Container Depot</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.sidebar {
|
|
background: linear-gradient(180deg, #0f4c81 0%, #1a6baf 100%);
|
|
transition: all 0.3s;
|
|
}
|
|
.content-area {
|
|
transition: all 0.3s;
|
|
}
|
|
.nav-item {
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.nav-item.active {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-left: 4px solid white;
|
|
}
|
|
.card {
|
|
transition: all 0.3s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.tab {
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.form-section {
|
|
animation: slideIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.camera-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
z-index: 50;
|
|
display: none;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
.camera-frame {
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.image-preview {
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: #f3f4f6;
|
|
border: 2px dashed #d1d5db;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.image-preview svg {
|
|
color: #9ca3af;
|
|
}
|
|
.image-preview.has-image {
|
|
border: none;
|
|
}
|
|
.image-preview.has-image svg {
|
|
display: none;
|
|
}
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
|
|
}
|
|
70% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar -->
|
|
|
|
|
|
<!-- Main Content -->
|
|
<main class="content-area flex-1 overflow-y-auto">
|
|
<!-- Top Navigation -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="flex items-center justify-between px-6 py-4">
|
|
<div class="flex items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Receive Container</h2>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<span class="absolute top-0 right-0 -mt-1 -mr-1 flex h-4 w-4">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-xs text-white justify-center items-center">3</span>
|
|
</span>
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<span class="text-gray-700 font-medium">Gate North</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Container Reception Content -->
|
|
<div id="receiveContent" class="tab-content active p-6">
|
|
<div class="bg-white rounded-lg shadow mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Container Reception</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Process incoming containers</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Gate Open</span>
|
|
</div>
|
|
</div>
|
|
<form id="receiveForm" class="space-y-6" method="POST">
|
|
{% csrf_token %}
|
|
<div class="p-6">
|
|
<label for="id_number" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
|
|
{# <label for="id_number" >Container Number</label>#}
|
|
{# <input type="text" id="id_number" name="number" placeholder="Enter Container Number" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4">#}
|
|
{# <button type="button" id="check-preinfo-btn">Check Preinfo</button>#}
|
|
|
|
|
|
|
|
{# <label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>#}
|
|
{# <div class="flex">#}
|
|
{# <input type="text" id="id_number" name="number" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>#}
|
|
{# <button type="button" id="check-preinfo-btn" class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">#}
|
|
{# Search#}
|
|
{# </button>#}
|
|
{# </div>#}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="preinfoData">
|
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3 flex-1">
|
|
<h3 class="text-sm font-medium text-blue-800">Preinfo Found</h3>
|
|
<div class="mt-2 text-sm text-blue-700">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<div>
|
|
<span class="font-medium">Container Number:</span>
|
|
<input type="text" id="id_number" name="number" value="{{ preinfo.container_number }}" readonly>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Container Type:</span>
|
|
<input type="text" id="id_container_type" name="id_container_type" value="{{ preinfo.container_type }}" readonly>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Line Operator:</span>
|
|
<input type="text" id="id_line" name="id_line" value="{{ preinfo.line.name }}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# <p class="mt-2"><span class="font-medium">Notes:</span> <span id="preinfoNotes">Container reported with minor damage on right side panel.</span></p>#}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="id_receive_vehicle">Receive vehicle:</label>
|
|
<input type="text" name="receive_vehicle" maxlength="100" id="id_receive_vehicle">
|
|
</div>
|
|
<div>
|
|
<label for="id_damages">Damages:</label>
|
|
<textarea name="damages" cols="40" rows="10" id="id_damages"></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="id_heavy_damaged">Heavy damaged:</label>
|
|
<input type="checkbox" name="heavy_damaged" id="id_heavy_damaged">
|
|
</div>
|
|
<div>
|
|
<label for="id_position">Position:</label>
|
|
<input type="text" name="position" maxlength="100" id="id_position">
|
|
</div>
|
|
|
|
<div class="form-section flex justify-end">
|
|
<button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Complete Reception
|
|
</button>
|
|
</div>
|
|
|
|
<input type="hidden" name="preinfo_id" id="preinfo_id" value="{{ preinfo.pk }}">
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">Recent Container Movements</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Line</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
|
|
{# <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Direction</th>#}
|
|
{# <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>#}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
{% for container in containers %}
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
{{ container.number }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ container.container_type }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ container.line.name }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ container.received_on }}</td>
|
|
{# <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">IN</td>#}
|
|
{# <td class="px-4 py-3 whitespace-nowrap">#}
|
|
{# <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complete</span>#}
|
|
{# </td>#}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Expedition Content -->
|
|
</main>
|
|
|
|
<!-- Camera Overlay -->
|
|
<div id="cameraOverlay" class="camera-overlay">
|
|
<div class="h-full flex flex-col">
|
|
<div class="p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-white">Take Container Photo</h3>
|
|
<button id="closeCamera" class="text-white hover:text-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-grow flex items-center justify-center p-4">
|
|
<div class="relative">
|
|
<div class="camera-frame w-full max-w-2xl aspect-[4/3] bg-gray-800 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
|
|
<!-- Guide lines for container positioning -->
|
|
<div class="absolute inset-0 border-2 border-dashed border-white opacity-50 m-8"></div>
|
|
|
|
<!-- Positioning guides -->
|
|
<div class="absolute top-8 left-8 border-t-2 border-l-2 border-white w-8 h-8"></div>
|
|
<div class="absolute top-8 right-8 border-t-2 border-r-2 border-white w-8 h-8"></div>
|
|
<div class="absolute bottom-8 left-8 border-b-2 border-l-2 border-white w-8 h-8"></div>
|
|
<div class="absolute bottom-8 right-8 border-b-2 border-r-2 border-white w-8 h-8"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 flex justify-center">
|
|
<button id="capturePhoto" class="w-16 h-16 rounded-full bg-red-600 border-4 border-white flex items-center justify-center pulse">
|
|
<div class="w-12 h-12 rounded-full bg-red-600"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# <script>#}
|
|
{# // Set current date as default#}
|
|
{# const today = new Date().toISOString().split('T')[0];#}
|
|
{# document.getElementById('arrivalDate').value = today;#}
|
|
{# document.getElementById('expeditionDate').value = today;#}
|
|
{# #}
|
|
{# // Tab Navigation#}
|
|
{# const receiveContent = document.getElementById('receiveContent');#}
|
|
{# const expediteContent = document.getElementById('expediteContent');#}
|
|
{# #}
|
|
{# const receiveNav = document.getElementById('receiveNav');#}
|
|
{# const expediteNav = document.getElementById('expediteNav');#}
|
|
{# #}
|
|
{# receiveNav.addEventListener('click', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Update content visibility#}
|
|
{# receiveContent.classList.add('active');#}
|
|
{# expediteContent.classList.remove('active');#}
|
|
{# #}
|
|
{# // Update navigation styling#}
|
|
{# document.querySelector('.nav-item.active').classList.remove('active');#}
|
|
{# receiveNav.classList.add('active');#}
|
|
{# #}
|
|
{# // Update header title#}
|
|
{# document.querySelector('header h2').textContent = 'Receive Container';#}
|
|
{# });#}
|
|
{# #}
|
|
{# expediteNav.addEventListener('click', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Update content visibility#}
|
|
{# receiveContent.classList.remove('active');#}
|
|
{# expediteContent.classList.add('active');#}
|
|
{# #}
|
|
{# // Update navigation styling#}
|
|
{# document.querySelector('.nav-item.active').classList.remove('active');#}
|
|
{# expediteNav.classList.add('active');#}
|
|
{# #}
|
|
{# // Update header title#}
|
|
{# document.querySelector('header h2').textContent = 'Expedite Container';#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Container search functionality#}
|
|
{# document.getElementById('searchContainer').addEventListener('click', function() {#}
|
|
{# const containerNumber = document.getElementById('containerNumber').value;#}
|
|
{# if (containerNumber) {#}
|
|
{# document.getElementById('preinfoData').classList.remove('hidden');#}
|
|
{# } else {#}
|
|
{# alert('Please enter a container number');#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# document.getElementById('searchExpediteContainer').addEventListener('click', function() {#}
|
|
{# const containerNumber = document.getElementById('expediteContainerNumber').value;#}
|
|
{# if (containerNumber) {#}
|
|
{# document.getElementById('orderData').classList.remove('hidden');#}
|
|
{# } else {#}
|
|
{# alert('Please enter a container number');#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Camera functionality#}
|
|
{# const cameraOverlay = document.getElementById('cameraOverlay');#}
|
|
{# const takePhotoBtn = document.getElementById('takePhoto');#}
|
|
{# const expediteTakePhotoBtn = document.getElementById('expediteTakePhoto');#}
|
|
{# const closeCamera = document.getElementById('closeCamera');#}
|
|
{# const capturePhoto = document.getElementById('capturePhoto');#}
|
|
{# #}
|
|
{# let currentImageTarget = null;#}
|
|
{# #}
|
|
{# function openCamera(imageTarget) {#}
|
|
{# cameraOverlay.style.display = 'block';#}
|
|
{# currentImageTarget = imageTarget;#}
|
|
{# }#}
|
|
{# #}
|
|
{# takePhotoBtn.addEventListener('click', function() {#}
|
|
{# // Find the first empty preview slot#}
|
|
{# for (let i = 1; i <= 4; i++) {#}
|
|
{# const previewEl = document.getElementById(`preview${i}`);#}
|
|
{# if (!previewEl.classList.contains('has-image')) {#}
|
|
{# openCamera(`preview${i}`);#}
|
|
{# break;#}
|
|
{# }#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# expediteTakePhotoBtn.addEventListener('click', function() {#}
|
|
{# // Find the first empty preview slot#}
|
|
{# for (let i = 1; i <= 2; i++) {#}
|
|
{# const previewEl = document.getElementById(`expeditePreview${i}`);#}
|
|
{# if (!previewEl.classList.contains('has-image')) {#}
|
|
{# openCamera(`expeditePreview${i}`);#}
|
|
{# break;#}
|
|
{# }#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# closeCamera.addEventListener('click', function() {#}
|
|
{# cameraOverlay.style.display = 'none';#}
|
|
{# });#}
|
|
{# #}
|
|
{# capturePhoto.addEventListener('click', function() {#}
|
|
{# if (currentImageTarget) {#}
|
|
{# const previewEl = document.getElementById(currentImageTarget);#}
|
|
{# #}
|
|
{# // Create a container SVG image#}
|
|
{# const containerSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");#}
|
|
{# containerSvg.setAttribute("class", "w-full h-full");#}
|
|
{# containerSvg.setAttribute("viewBox", "0 0 120 120");#}
|
|
{# #}
|
|
{# // Random container color#}
|
|
{# const colors = ['#2563eb', '#059669', '#d97706', '#7c3aed'];#}
|
|
{# const randomColor = colors[Math.floor(Math.random() * colors.length)];#}
|
|
{# #}
|
|
{# // Create container body#}
|
|
{# const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");#}
|
|
{# rect.setAttribute("x", "10");#}
|
|
{# rect.setAttribute("y", "20");#}
|
|
{# rect.setAttribute("width", "100");#}
|
|
{# rect.setAttribute("height", "80");#}
|
|
{# rect.setAttribute("fill", randomColor);#}
|
|
{# containerSvg.appendChild(rect);#}
|
|
{# #}
|
|
{# // Add some container details#}
|
|
{# const detail1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");#}
|
|
{# detail1.setAttribute("x", "20");#}
|
|
{# detail1.setAttribute("y", "30");#}
|
|
{# detail1.setAttribute("width", "80");#}
|
|
{# detail1.setAttribute("height", "20");#}
|
|
{# detail1.setAttribute("fill", shadeColor(randomColor, -20));#}
|
|
{# containerSvg.appendChild(detail1);#}
|
|
{# #}
|
|
{# const detail2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");#}
|
|
{# detail2.setAttribute("x", "20");#}
|
|
{# detail2.setAttribute("y", "60");#}
|
|
{# detail2.setAttribute("width", "80");#}
|
|
{# detail2.setAttribute("height", "30");#}
|
|
{# detail2.setAttribute("fill", shadeColor(randomColor, -20));#}
|
|
{# containerSvg.appendChild(detail2);#}
|
|
{# #}
|
|
{# // Clear the preview and add the new SVG#}
|
|
{# previewEl.innerHTML = '';#}
|
|
{# previewEl.appendChild(containerSvg);#}
|
|
{# previewEl.classList.add('has-image');#}
|
|
{# #}
|
|
{# // Close the camera#}
|
|
{# cameraOverlay.style.display = 'none';#}
|
|
{# }#}
|
|
{# });#}
|
|
{# #}
|
|
{# // Helper function to darken/lighten colors#}
|
|
{# function shadeColor(color, percent) {#}
|
|
{# let R = parseInt(color.substring(1,3), 16);#}
|
|
{# let G = parseInt(color.substring(3,5), 16);#}
|
|
{# let B = parseInt(color.substring(5,7), 16);#}
|
|
{# #}
|
|
{# R = parseInt(R * (100 + percent) / 100);#}
|
|
{# G = parseInt(G * (100 + percent) / 100);#}
|
|
{# B = parseInt(B * (100 + percent) / 100);#}
|
|
{# #}
|
|
{# R = (R<255)?R:255; #}
|
|
{# G = (G<255)?G:255; #}
|
|
{# B = (B<255)?B:255; #}
|
|
{# #}
|
|
{# R = Math.round(R);#}
|
|
{# G = Math.round(G);#}
|
|
{# B = Math.round(B);#}
|
|
{# #}
|
|
{# const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));#}
|
|
{# const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));#}
|
|
{# const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));#}
|
|
{# #}
|
|
{# return "#"+RR+GG+BB;#}
|
|
{# }#}
|
|
{# #}
|
|
{# // Form submissions#}
|
|
{# document.getElementById('receiveForm').addEventListener('submit', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Check if container data is loaded#}
|
|
{# if (document.getElementById('preinfoData').classList.contains('hidden')) {#}
|
|
{# alert('Please search for a container first');#}
|
|
{# return;#}
|
|
{# }#}
|
|
{# #}
|
|
{# // In a real app, this would send data to the server#}
|
|
{# alert('Container reception completed successfully!');#}
|
|
{# this.reset();#}
|
|
{# document.getElementById('preinfoData').classList.add('hidden');#}
|
|
{# #}
|
|
{# // Reset image previews#}
|
|
{# for (let i = 1; i <= 4; i++) {#}
|
|
{# const previewEl = document.getElementById(`preview${i}`);#}
|
|
{# previewEl.classList.remove('has-image');#}
|
|
{# previewEl.innerHTML = `#}
|
|
{# <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">#}
|
|
{# <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />#}
|
|
{# </svg>#}
|
|
{# `;#}
|
|
{# }#}
|
|
{# #}
|
|
{# // Add the first two images back#}
|
|
{# document.getElementById('preview1').classList.add('has-image');#}
|
|
{# document.getElementById('preview1').innerHTML = `#}
|
|
{# <svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">#}
|
|
{# <rect x="10" y="20" width="100" height="80" fill="#2563eb" />#}
|
|
{# <rect x="20" y="30" width="30" height="20" fill="#1e40af" />#}
|
|
{# <rect x="70" y="30" width="30" height="20" fill="#1e40af" />#}
|
|
{# <rect x="20" y="60" width="80" height="30" fill="#1e40af" />#}
|
|
{# <circle cx="85" cy="45" r="8" fill="#ef4444" />#}
|
|
{# </svg>#}
|
|
{# `;#}
|
|
{# #}
|
|
{# document.getElementById('preview2').classList.add('has-image');#}
|
|
{# document.getElementById('preview2').innerHTML = `#}
|
|
{# <svg class="w-full h-full" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">#}
|
|
{# <rect x="10" y="20" width="100" height="80" fill="#2563eb" />#}
|
|
{# <rect x="20" y="30" width="80" height="20" fill="#1e40af" />#}
|
|
{# <rect x="20" y="60" width="80" height="30" fill="#1e40af" />#}
|
|
{# <path d="M85,40 Q95,50 85,60 Q75,50 85,40" fill="#ef4444" />#}
|
|
{# </svg>#}
|
|
{# `;#}
|
|
{# });#}
|
|
{# #}
|
|
{# document.getElementById('expediteForm').addEventListener('submit', function(e) {#}
|
|
{# e.preventDefault();#}
|
|
{# #}
|
|
{# // Check if order data is loaded#}
|
|
{# if (document.getElementById('orderData').classList.contains('hidden')) {#}
|
|
{# alert('Please search for a container first');#}
|
|
{# return;#}
|
|
{# }#}
|
|
{# #}
|
|
{# // In a real app, this would send data to the server#}
|
|
{# alert('Container expedition completed successfully!');#}
|
|
{# this.reset();#}
|
|
{# document.getElementById('orderData').classList.add('hidden');#}
|
|
{# #}
|
|
{# // Reset image previews#}
|
|
{# for (let i = 1; i <= 2; i++) {#}
|
|
{# const previewEl = document.getElementById(`expeditePreview${i}`);#}
|
|
{# previewEl.classList.remove('has-image');#}
|
|
{# previewEl.innerHTML = `#}
|
|
{# <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">#}
|
|
{# <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />#}
|
|
{# </svg>#}
|
|
{# `;#}
|
|
{# }#}
|
|
{# });#}
|
|
{# </script>#}
|
|
{#<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9498ddc2d702313f',t:'MTc0ODg4NzM5My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>#}
|
|
{##}
|
|
{#<script>#}
|
|
{#document.getElementById('check-preinfo-btn').onclick = function() {#}
|
|
{# const number = document.getElementById('id_number').value;#}
|
|
{# fetch(`/preinfo/check-preinfo/?number=${encodeURIComponent(number)}`)#}
|
|
{# .then(response => response.json())#}
|
|
{# .then(data => {#}
|
|
{# if (data.found) {#}
|
|
{# alert('Preinfo found ' + data.container_type);#}
|
|
{# document.getElementById('id_line').value = data.line;#}
|
|
{# document.getElementById('id_container_type').value = data.container_type;#}
|
|
{# document.getElementById('preinfo_id').value = data.preinfo_id;#}
|
|
{# } else {#}
|
|
{# alert('No preinfo found or already received.');#}
|
|
{# }#}
|
|
{# });#}
|
|
{#;#}
|
|
{#</script>#}
|
|
</body>
|
|
</html>
|