917 lines
34 KiB
HTML
917 lines
34 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Kontrol Pemuatan Karung{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
.operator-container {
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.operator-card {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 24px;
|
|
box-shadow: var(--shadow-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.operator-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.operator-subtitle {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.status-badge-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 20px;
|
|
border-radius: 30px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.status-idle {
|
|
background-color: rgba(142, 142, 147, 0.15);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-active {
|
|
background-color: rgba(52, 199, 89, 0.15);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.batch-info-box {
|
|
background-color: var(--bg-base);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
margin-bottom: 32px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
text-align: left;
|
|
}
|
|
|
|
.info-item .info-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-item .info-val {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-action-large {
|
|
width: 100%;
|
|
padding: 20px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
border-radius: var(--radius-md);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
transition: transform 0.1s ease, filter 0.2s ease;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-action-large:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-start {
|
|
background-color: var(--accent-green);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-start:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.btn-stop {
|
|
background-color: var(--accent-red);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-stop:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.btn-disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Simple Confirmation Modal */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0,0,0,0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-box {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
max-width: 400px;
|
|
width: 100%;
|
|
text-align: center;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.modal-desc {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-actions .btn {
|
|
flex: 1;
|
|
padding: 12px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* Non-blocking mode banner (fixed top, status stays visible below) */
|
|
.mode-banner {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 500;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
background-color: rgba(255, 204, 0, 0.15);
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.mode-banner .btn {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
border-radius: var(--radius-md);
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mode-banner .btn-yes {
|
|
background-color: var(--accent-green);
|
|
color: #fff;
|
|
}
|
|
|
|
.mode-banner .btn-no {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.model-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.model-row select {
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* DO panel */
|
|
.do-panel {
|
|
display: none;
|
|
text-align: left;
|
|
margin-top: 20px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.do-panel.visible { display: block; }
|
|
.do-panel h4 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
.do-strip {
|
|
display: flex;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.do-thumb {
|
|
flex: 0 0 88px;
|
|
width: 88px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background: var(--bg-base);
|
|
cursor: pointer;
|
|
}
|
|
.do-thumb img { width: 100%; height: 64px; object-fit: cover; display: block; }
|
|
.do-thumb .cap {
|
|
font-size: 10px;
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.do-card {
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 10px;
|
|
margin-bottom: 8px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
}
|
|
.do-card label { display: block; font-size: 11px; color: var(--text-secondary); }
|
|
.do-card input {
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
box-sizing: border-box;
|
|
}
|
|
.do-card .full { grid-column: 1 / -1; }
|
|
.do-card .row-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
|
|
.do-chip {
|
|
display: inline-block;
|
|
background: rgba(0,113,227,0.12);
|
|
color: var(--accent-blue);
|
|
border-radius: 99px;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin: 2px 4px 2px 0;
|
|
}
|
|
.do-warn { color: var(--accent-orange); font-size: 12px; margin: 6px 0; }
|
|
.ocr-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-top: 8px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ocr-row select {
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
}
|
|
.mode-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 99px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
margin-top: 8px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
.mode-badge.do_manual { background: rgba(0,113,227,0.12); color: var(--accent-blue); border-color: var(--accent-blue); }
|
|
.mode-badge.auto { background: rgba(255,159,10,0.12); color: var(--accent-orange); }
|
|
.mode-badge.manual { background: rgba(52,199,89,0.12); color: var(--accent-green); }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Non-blocking mode info (office owns mode switch) -->
|
|
<div id="modeBanner" class="mode-banner">
|
|
<span id="modeBannerText">Mode diatur dari monitoring/kantor</span>
|
|
<button class="btn btn-no" onclick="dismissModeBanner()">Tutup</button>
|
|
</div>
|
|
<div class="operator-container">
|
|
<div class="operator-card">
|
|
<h1 class="operator-title"><i class="fa-solid fa-boxes-packing"></i> Kontrol Pemuatan Karung</h1>
|
|
<p class="operator-subtitle" id="opSubtitle">Tekan tombol saat proses muat truk dimulai dan selesai</p>
|
|
|
|
<!-- Status Indicator -->
|
|
<div id="statusBadge" class="status-badge-box status-idle">
|
|
<i id="statusIcon" class="fa-solid fa-circle-pause"></i>
|
|
<span id="statusText">Status: Standby (Tidak Memuat)</span>
|
|
</div>
|
|
<div><span id="modeBadge" class="mode-badge">Mode: --</span></div>
|
|
|
|
<!-- Info Detail -->
|
|
<div class="batch-info-box">
|
|
<div class="info-item">
|
|
<div class="info-label">Batch Berjalan</div>
|
|
<div class="info-val" id="opBatchNum">--</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Waktu Mulai</div>
|
|
<div class="info-val" id="opStartTime">--:--:--</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Karung Masuk</div>
|
|
<div class="info-val" id="opSackCount">0</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Box Masuk</div>
|
|
<div class="info-val" id="opBoxCount">0</div>
|
|
</div>
|
|
<div class="info-item" id="opNetSackItem" style="display:none">
|
|
<div class="info-label">Net Karung / Target</div>
|
|
<div class="info-val" id="opNetSack">--</div>
|
|
</div>
|
|
<div class="info-item" id="opNetBoxItem" style="display:none">
|
|
<div class="info-label">Net Box / Target</div>
|
|
<div class="info-val" id="opNetBox">--</div>
|
|
</div>
|
|
<div class="info-item" id="opPlateItem" style="display:none; grid-column: 1 / -1;">
|
|
<div class="info-label">Plat / No. DO</div>
|
|
<div class="info-val" id="opPlateDos" style="font-size:13px;">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<div id="actionContainer">
|
|
<button id="btnStartBatch" class="btn-action-large btn-start" onclick="confirmStartBatch()">
|
|
<i class="fa-solid fa-play"></i> MULAI BATCH BARU
|
|
</button>
|
|
<button id="btnStopBatch" class="btn-action-large btn-stop" style="display: none;" onclick="confirmStopBatch()">
|
|
<i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH
|
|
</button>
|
|
</div>
|
|
|
|
<!-- DO panel (only do_manual) -->
|
|
<div id="doPanel" class="do-panel">
|
|
<h4>
|
|
<span><i class="fa-solid fa-file-lines"></i> Foto DO (Smartphone)</span>
|
|
<span id="doEngineBadge" style="font-size:11px;font-weight:600;color:var(--text-secondary);"></span>
|
|
</h4>
|
|
<input type="file" id="doPhotoInput" accept="image/*" capture="environment" multiple
|
|
style="display:none" onchange="uploadDoPhotos(this.files)">
|
|
<button class="btn btn-primary btn-sm" style="width:100%;margin-bottom:8px;"
|
|
onclick="document.getElementById('doPhotoInput').click()">
|
|
<i class="fa-solid fa-camera"></i> Ambil / Pilih Foto DO
|
|
</button>
|
|
<div id="doStrip" class="do-strip"></div>
|
|
<div id="doCards"></div>
|
|
<div id="doGroupPreview"></div>
|
|
<div id="doWarn" class="do-warn" style="display:none;"></div>
|
|
<div class="ocr-row">
|
|
<span>OCR:</span>
|
|
<select id="ocrEngineSelect" onchange="setOcrEngine(this.value)">
|
|
<option value="tesseract">Tesseract</option>
|
|
<option value="paddle">PaddleOCR</option>
|
|
<option value="none">Off (manual)</option>
|
|
</select>
|
|
<span id="ocrEngineHint"></span>
|
|
</div>
|
|
<div id="doRequirePlateRow" class="ocr-row" style="display:none;">
|
|
<label><input type="checkbox" id="requirePlateChk" onchange="setRequirePlate(this.checked)"> Wajib plat nomor</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Model mode (read-only badge) -->
|
|
<div class="model-row">
|
|
<span>Model:</span>
|
|
<strong id="opModelMode">--</strong>
|
|
</div>
|
|
<p class="operator-subtitle" style="margin-top:6px;font-size:12px">
|
|
Mode batch & model diatur dari monitoring/kantor.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Konfirmasi Start -->
|
|
<div id="modalStart" class="modal-overlay">
|
|
<div class="modal-box">
|
|
<h3 class="modal-title"><i class="fa-solid fa-play" style="color: var(--accent-green);"></i> Mulai Batch Baru?</h3>
|
|
<p class="modal-desc" id="startModalDesc">Pastikan truk sudah siap di posisi pemuatan karung.</p>
|
|
<div id="startGateList" class="modal-desc" style="display:none;color:var(--accent-red);"></div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeModal('modalStart')">Batal</button>
|
|
<button class="btn btn-primary" style="background-color: var(--accent-green);" onclick="executeStartBatch()">Ya, Mulai</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Konfirmasi Stop -->
|
|
<div id="modalStop" class="modal-overlay">
|
|
<div class="modal-box">
|
|
<h3 class="modal-title"><i class="fa-solid fa-square" style="color: var(--accent-red);"></i> Selesai Batch?</h3>
|
|
<p class="modal-desc" id="stopModalDesc">Pemuatan untuk batch ini akan ditutup dan data akan disimpan.</p>
|
|
<div id="zoneBusyWarn" class="modal-desc" style="display:none;color:var(--accent-orange);">
|
|
Masih ada aktivitas di zona — akhir paksa?
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeModal('modalStop')">Batal</button>
|
|
<button class="btn btn-primary" style="background-color: var(--accent-red);" onclick="executeStopBatch(false)">Ya, Selesai</button>
|
|
<button id="btnForceStop" class="btn btn-primary" style="background-color: var(--accent-red); display:none;"
|
|
onclick="executeStopBatch(true)">Akhir Paksa</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
let isBatchActive = false;
|
|
let currentMode = 'auto';
|
|
let stagedDos = [];
|
|
let settings = { require_plate: false, require_do: true, ocr_engine: 'tesseract', editable: false };
|
|
|
|
function closeModal(id) {
|
|
document.getElementById(id).style.display = 'none';
|
|
}
|
|
|
|
async function loadModeBanner() {
|
|
try {
|
|
const res = await fetch('/api/batch/mode');
|
|
const data = await res.json();
|
|
updateModeUI(data.mode || 'auto');
|
|
if (data.mode === 'auto') {
|
|
document.getElementById('modeBannerText').textContent =
|
|
'Mode OTOMATIS aktif. Mode diatur dari monitoring/kantor.';
|
|
if (!sessionStorage.getItem('mode_banner_dismissed')) {
|
|
document.getElementById('modeBanner').style.display = 'flex';
|
|
}
|
|
} else {
|
|
document.getElementById('modeBanner').style.display = 'none';
|
|
}
|
|
} catch (e) {
|
|
console.error('Mode load error:', e);
|
|
}
|
|
}
|
|
|
|
function dismissModeBanner() {
|
|
sessionStorage.setItem('mode_banner_dismissed', '1');
|
|
document.getElementById('modeBanner').style.display = 'none';
|
|
}
|
|
|
|
function updateModeUI(mode) {
|
|
currentMode = mode;
|
|
const badge = document.getElementById('modeBadge');
|
|
const panel = document.getElementById('doPanel');
|
|
const sub = document.getElementById('opSubtitle');
|
|
if (badge) {
|
|
badge.textContent = 'Mode: ' + mode;
|
|
badge.className = 'mode-badge ' + mode;
|
|
}
|
|
if (panel) panel.classList.toggle('visible', mode === 'do_manual');
|
|
if (mode === 'do_manual') {
|
|
if (sub) sub.textContent = 'Foto DO → review → mulai batch';
|
|
loadStagedDos();
|
|
loadDoSettings();
|
|
} else if (mode === 'manual') {
|
|
if (sub) sub.textContent = 'Tekan tombol saat proses muat truk dimulai dan selesai';
|
|
} else {
|
|
if (sub) sub.textContent = 'Mode otomatis — batch dikontrol AI truk';
|
|
}
|
|
}
|
|
|
|
async function loadDoSettings() {
|
|
try {
|
|
const res = await fetch('/api/do/settings');
|
|
const data = await res.json();
|
|
if (!data.success) return;
|
|
settings = data;
|
|
const sel = document.getElementById('ocrEngineSelect');
|
|
if (sel && data.ocr_engine) sel.value = data.ocr_engine;
|
|
const hint = document.getElementById('ocrEngineHint');
|
|
if (hint) hint.textContent = 'engine: ' + (data.ocr_engine || 'tesseract');
|
|
const badge = document.getElementById('doEngineBadge');
|
|
if (badge) badge.textContent = (data.ocr_engine || 'tesseract');
|
|
const chk = document.getElementById('requirePlateChk');
|
|
const row = document.getElementById('doRequirePlateRow');
|
|
if (chk) chk.checked = !!data.require_plate;
|
|
if (row) row.style.display = data.editable ? 'flex' : 'none';
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
async function setOcrEngine(eng) {
|
|
try {
|
|
const res = await fetch('/api/do/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ocr_engine: eng })
|
|
});
|
|
const data = await res.json();
|
|
if (!data.success) {
|
|
alert('Gagal set OCR: ' + (data.error || res.status));
|
|
loadDoSettings();
|
|
return;
|
|
}
|
|
loadDoSettings();
|
|
} catch (e) {
|
|
alert('Gagal terhubung ke server');
|
|
loadDoSettings();
|
|
}
|
|
}
|
|
|
|
async function setRequirePlate(val) {
|
|
try {
|
|
const res = await fetch('/api/do/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ require_plate: val })
|
|
});
|
|
const data = await res.json();
|
|
if (!data.success) {
|
|
alert(data.error || 'Gagal (403 = office only)');
|
|
loadDoSettings();
|
|
} else {
|
|
loadDoSettings();
|
|
loadStagedDos();
|
|
}
|
|
} catch (e) { alert('Gagal terhubung ke server'); loadDoSettings(); }
|
|
}
|
|
|
|
async function loadModelModes() {
|
|
try {
|
|
const res = await fetch('/api/model-modes');
|
|
const data = await res.json();
|
|
if (!data.success) return;
|
|
const el = document.getElementById('opModelMode');
|
|
if (el) el.textContent = data.active || '--';
|
|
} catch (e) {
|
|
console.error('Model modes load error:', e);
|
|
}
|
|
}
|
|
|
|
async function uploadDoPhotos(fileList) {
|
|
if (!fileList || !fileList.length) return;
|
|
const fd = new FormData();
|
|
for (const f of fileList) fd.append('photos', f);
|
|
try {
|
|
const res = await fetch('/api/do/upload', { method: 'POST', body: fd });
|
|
const data = await res.json();
|
|
if (!data.success) {
|
|
alert('Upload gagal: ' + (data.error || res.status));
|
|
return;
|
|
}
|
|
await loadStagedDos();
|
|
await loadDoSettings();
|
|
} catch (e) {
|
|
alert('Upload gagal: tidak terhubung ke server');
|
|
} finally {
|
|
document.getElementById('doPhotoInput').value = '';
|
|
}
|
|
}
|
|
|
|
async function loadStagedDos() {
|
|
if (currentMode !== 'do_manual') return;
|
|
try {
|
|
const res = await fetch('/api/do/staged');
|
|
const data = await res.json();
|
|
if (!data.success) return;
|
|
stagedDos = data.items || [];
|
|
renderDoPanel();
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
function renderDoPanel() {
|
|
const strip = document.getElementById('doStrip');
|
|
const cards = document.getElementById('doCards');
|
|
const group = document.getElementById('doGroupPreview');
|
|
const warn = document.getElementById('doWarn');
|
|
if (!strip) return;
|
|
strip.innerHTML = '';
|
|
cards.innerHTML = '';
|
|
stagedDos.forEach(d => {
|
|
const th = document.createElement('div');
|
|
th.className = 'do-thumb';
|
|
th.innerHTML = `<img src="${d.photo_url}" alt=""><div class="cap">${d.no_do || 'DO?'}</div>`;
|
|
strip.appendChild(th);
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'do-card';
|
|
card.innerHTML = `
|
|
<div class="full"><label>No. DO</label>
|
|
<input data-id="${d.id}" data-k="no_do" value="${escapeHtml(d.no_do || '')}"></div>
|
|
<div><label>Plat</label>
|
|
<input data-id="${d.id}" data-k="plate" value="${escapeHtml(d.plate || '')}"></div>
|
|
<div><label>Ekspektasi karung</label>
|
|
<input data-id="${d.id}" data-k="expected_sack" type="number" min="0" value="${d.expected_sack || 0}"></div>
|
|
<div><label>Ekspektasi box</label>
|
|
<input data-id="${d.id}" data-k="expected_box" type="number" min="0" value="${d.expected_box || 0}"></div>
|
|
<div class="row-actions">
|
|
<button class="btn btn-primary btn-sm" data-act="save" data-id="${d.id}">Simpan</button>
|
|
<button class="btn btn-secondary btn-sm" data-act="del" data-id="${d.id}">Hapus</button>
|
|
<span style="font-size:11px;color:${d.ocr_ok ? 'var(--accent-green)' : 'var(--accent-orange)'};">
|
|
${d.ocr_ok ? 'OCR ok' : ('OCR: ' + (d.ocr_error || 'manual'))}
|
|
</span>
|
|
</div>`;
|
|
cards.appendChild(card);
|
|
});
|
|
cards.querySelectorAll('button[data-act="save"]').forEach(btn => {
|
|
btn.onclick = () => saveDo(parseInt(btn.dataset.id, 10));
|
|
});
|
|
cards.querySelectorAll('button[data-act="del"]').forEach(btn => {
|
|
btn.onclick = () => deleteDo(parseInt(btn.dataset.id, 10));
|
|
});
|
|
|
|
// group preview by plate
|
|
const byPlate = {};
|
|
stagedDos.forEach(d => {
|
|
const p = (d.plate || '').trim().toUpperCase() || 'tanpa plat';
|
|
if (!byPlate[p]) byPlate[p] = { n: 0, sack: 0, box: 0, nos: [] };
|
|
byPlate[p].n++;
|
|
byPlate[p].sack += d.expected_sack || 0;
|
|
byPlate[p].box += d.expected_box || 0;
|
|
if (d.no_do) byPlate[p].nos.push(d.no_do);
|
|
});
|
|
group.innerHTML = Object.entries(byPlate).map(([p, g]) =>
|
|
`<span class="do-chip">${escapeHtml(p)} · ${g.n} DO · ${g.sack} karung · ${g.box} box</span>`
|
|
).join('');
|
|
|
|
const plates = Object.keys(byPlate).filter(p => p !== 'tanpa plat');
|
|
let w = '';
|
|
if (plates.length > 1) w = 'Plat nomor berbeda — start diblokir.';
|
|
if (settings.require_do && stagedDos.length === 0 && currentMode === 'do_manual')
|
|
w = 'Butuh minimal satu foto DO sebelum mulai batch.';
|
|
if (warn) {
|
|
warn.textContent = w;
|
|
warn.style.display = w ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s).replace(/[&<>"']/g, c => ({
|
|
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
|
})[c]);
|
|
}
|
|
|
|
async function saveDo(id) {
|
|
const fields = {};
|
|
document.querySelectorAll(`.do-card input[data-id="${id}"]`).forEach(inp => {
|
|
fields[inp.dataset.k] = inp.dataset.k.startsWith('expected')
|
|
? parseInt(inp.value || '0', 10) : inp.value;
|
|
});
|
|
try {
|
|
const res = await fetch('/api/do/' + id, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(fields)
|
|
});
|
|
const data = await res.json();
|
|
if (!data.success) alert(data.error || 'Gagal simpan');
|
|
await loadStagedDos();
|
|
} catch (e) { alert('Gagal simpan'); }
|
|
}
|
|
|
|
async function deleteDo(id) {
|
|
if (!confirm('Hapus DO ini?')) return;
|
|
try {
|
|
const res = await fetch('/api/do/' + id, { method: 'DELETE' });
|
|
const data = await res.json();
|
|
if (!data.success) alert(data.error || 'Gagal hapus');
|
|
await loadStagedDos();
|
|
} catch (e) { alert('Gagal hapus'); }
|
|
}
|
|
|
|
async function fetchStagedForStart() {
|
|
const res = await fetch('/api/do/staged');
|
|
const data = await res.json();
|
|
return (data && data.items) || [];
|
|
}
|
|
|
|
function confirmStartBatch() {
|
|
const gate = document.getElementById('startGateList');
|
|
const desc = document.getElementById('startModalDesc');
|
|
if (currentMode === 'do_manual') {
|
|
fetchStagedForStart().then(items => {
|
|
stagedDos = items;
|
|
const problems = [];
|
|
if (settings.require_do && items.length === 0) problems.push('Butuh foto DO.');
|
|
if (items.some(d => !(d.no_do || '').trim())) problems.push('Ada DO tanpa No. DO.');
|
|
if (settings.require_plate && items.some(d => !(d.plate || '').trim()))
|
|
problems.push('Ada DO tanpa plat.');
|
|
const plates = new Set(items.map(d => (d.plate || '').trim().toUpperCase()).filter(Boolean));
|
|
if (plates.size > 1) problems.push('Plat DO berbeda.');
|
|
if (problems.length) {
|
|
gate.style.display = 'block';
|
|
gate.innerHTML = problems.map(p => '• ' + escapeHtml(p)).join('<br>');
|
|
document.getElementById('modalStart').style.display = 'flex';
|
|
return;
|
|
}
|
|
gate.style.display = 'none';
|
|
desc.textContent = items.length + ' DO akan disiapkan untuk batch ini.';
|
|
document.getElementById('modalStart').style.display = 'flex';
|
|
renderDoPanel();
|
|
}).catch(() => {
|
|
document.getElementById('modalStart').style.display = 'flex';
|
|
});
|
|
return;
|
|
}
|
|
gate.style.display = 'none';
|
|
desc.textContent = 'Pastikan truk sudah siap di posisi pemuatan karung.';
|
|
document.getElementById('modalStart').style.display = 'flex';
|
|
}
|
|
|
|
async function confirmStopBatch() {
|
|
document.getElementById('zoneBusyWarn').style.display = 'none';
|
|
document.getElementById('btnForceStop').style.display = 'none';
|
|
try {
|
|
const res = await fetch('/api/batch/stop-preview');
|
|
const data = await res.json();
|
|
if (data.success && data.zone_busy) {
|
|
document.getElementById('zoneBusyWarn').style.display = 'block';
|
|
document.getElementById('btnForceStop').style.display = 'flex';
|
|
}
|
|
} catch (e) { /* soft */ }
|
|
document.getElementById('modalStop').style.display = 'flex';
|
|
}
|
|
|
|
async function executeStartBatch() {
|
|
closeModal('modalStart');
|
|
const btn = document.getElementById('btnStartBatch');
|
|
btn.classList.add('btn-disabled');
|
|
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Memulai...';
|
|
try {
|
|
let body = null;
|
|
if (currentMode === 'do_manual') {
|
|
const items = await fetchStagedForStart();
|
|
body = JSON.stringify({ do_ids: items.map(d => d.id) });
|
|
}
|
|
const res = await fetch('/api/batch/start', {
|
|
method: 'POST',
|
|
headers: body ? { 'Content-Type': 'application/json' } : {},
|
|
body: body
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
await pollStatus();
|
|
await loadStagedDos();
|
|
} else {
|
|
alert('Gagal memulai batch: ' + (data.error || 'Terjadi kesalahan'));
|
|
}
|
|
} catch (e) {
|
|
alert('Gagal terhubung ke server');
|
|
} finally {
|
|
btn.classList.remove('btn-disabled');
|
|
btn.innerHTML = '<i class="fa-solid fa-play"></i> MULAI BATCH BARU';
|
|
}
|
|
}
|
|
|
|
async function executeStopBatch(force) {
|
|
closeModal('modalStop');
|
|
const btn = document.getElementById('btnStopBatch');
|
|
btn.classList.add('btn-disabled');
|
|
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Mengakhiri...';
|
|
try {
|
|
const res = await fetch('/api/batch/stop', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ force: !!force })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
await pollStatus();
|
|
await loadStagedDos();
|
|
} else {
|
|
alert('Gagal mengakhiri batch: ' + (data.error || 'Terjadi kesalahan'));
|
|
}
|
|
} catch (e) {
|
|
alert('Gagal terhubung ke server');
|
|
} finally {
|
|
btn.classList.remove('btn-disabled');
|
|
btn.innerHTML = '<i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH';
|
|
}
|
|
}
|
|
|
|
async function pollStatus() {
|
|
try {
|
|
const res = await fetch('/api/current-batch');
|
|
const data = await res.json();
|
|
|
|
const badge = document.getElementById('statusBadge');
|
|
const icon = document.getElementById('statusIcon');
|
|
const text = document.getElementById('statusText');
|
|
const batchNum = document.getElementById('opBatchNum');
|
|
const startTime = document.getElementById('opStartTime');
|
|
const sackCount = document.getElementById('opSackCount');
|
|
const boxCount = document.getElementById('opBoxCount');
|
|
const modelMode = document.getElementById('opModelMode');
|
|
const btnStart = document.getElementById('btnStartBatch');
|
|
const btnStop = document.getElementById('btnStopBatch');
|
|
|
|
if (data.model_mode) modelMode.textContent = data.model_mode;
|
|
if (data.mode) updateModeUI(data.mode);
|
|
sackCount.textContent = data.count || 0;
|
|
boxCount.textContent = data.box_count || 0;
|
|
|
|
const netSack = document.getElementById('opNetSack');
|
|
const netBox = document.getElementById('opNetBox');
|
|
const netSackItem = document.getElementById('opNetSackItem');
|
|
const netBoxItem = document.getElementById('opNetBoxItem');
|
|
const plateItem = document.getElementById('opPlateItem');
|
|
const plateDos = document.getElementById('opPlateDos');
|
|
const showNet = currentMode === 'do_manual' && data.success && data.batch_number;
|
|
if (netSackItem) netSackItem.style.display = showNet ? 'block' : 'none';
|
|
if (netBoxItem) netBoxItem.style.display = showNet ? 'block' : 'none';
|
|
if (plateItem) plateItem.style.display = showNet ? 'block' : 'none';
|
|
if (showNet) {
|
|
netSack.textContent = `${data.net_sack ?? data.count} / ${data.expected_sack ?? '-'}`;
|
|
netBox.textContent = `${data.net_box ?? data.box_count} / ${data.expected_box ?? '-'}`;
|
|
plateDos.textContent = (data.plate || 'tanpa plat') +
|
|
(data.do_numbers && data.do_numbers.length ? ' · ' + data.do_numbers.join(', ') : '');
|
|
}
|
|
|
|
if (data.success && data.batch_number) {
|
|
isBatchActive = true;
|
|
badge.className = 'status-badge-box status-active';
|
|
icon.className = 'fa-solid fa-circle-play';
|
|
text.textContent = 'Status: Sedang Memuat (Batch #' + data.batch_number + ')';
|
|
|
|
batchNum.textContent = '#' + data.batch_number;
|
|
if (data.start_time) {
|
|
const st = new Date(data.start_time);
|
|
startTime.textContent = st.toLocaleTimeString('id-ID', { hour12: false });
|
|
} else {
|
|
startTime.textContent = '--:--:--';
|
|
}
|
|
|
|
btnStart.style.display = 'none';
|
|
btnStop.style.display = 'flex';
|
|
} else {
|
|
isBatchActive = false;
|
|
badge.className = 'status-badge-box status-idle';
|
|
icon.className = 'fa-solid fa-circle-pause';
|
|
text.textContent = 'Status: Standby (Siap Memuat)';
|
|
|
|
batchNum.textContent = '--';
|
|
startTime.textContent = '--:--:--';
|
|
|
|
btnStart.style.display = 'flex';
|
|
btnStop.style.display = 'none';
|
|
}
|
|
} catch (e) {
|
|
console.error('Poll error:', e);
|
|
}
|
|
}
|
|
|
|
setInterval(pollStatus, 2000);
|
|
setInterval(loadModeBanner, 5000);
|
|
setInterval(() => { if (currentMode === 'do_manual') { loadStagedDos(); loadDoSettings(); } }, 4000);
|
|
pollStatus();
|
|
loadModeBanner();
|
|
loadModelModes();
|
|
</script>
|
|
{% endblock %}
|