karung-counting-feedmill-semarang/templates/operator.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;
    }
</style>
{% endblock %}

{% block content %}
<!-- Non-blocking manual-mode prompt: status/counts stay visible below -->
<div id="modeBanner" class="mode-banner">
    <span>🟡 Mode OTOMATIS aktif. Alihkan ke MANUAL untuk kontrol tombol batch?</span>
    <button class="btn btn-yes" onclick="switchToManual()">Ya, Manual</button>
    <button class="btn btn-no" onclick="dismissModeBanner()">Tidak, Tetap Otomatis</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">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>

        <!-- 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>

        <!-- 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>

        <!-- Model mode -->
        <div class="model-row">
            <span>Model:</span>
            <strong id="opModelMode">--</strong>
            <select id="modelModeSelect" onchange="setModelMode(this.value)">
                <option value="">Ganti mode…</option>
            </select>
        </div>
        <p class="operator-subtitle" style="margin-top:6px;font-size:12px">Ganti mode model berlaku setelah service direstart.</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">Pastikan truk sudah siap di posisi pemuatan karung.</p>
        <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">Pemuatan untuk batch ini akan ditutup dan data akan disimpan.</p>
        <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()">Ya, Selesai</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let isBatchActive = false;

    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    // --- Non-blocking manual-mode prompt (banner, status stays visible) ---
    async function loadModeBanner() {
        try {
            const res = await fetch('/api/batch/mode');
            const data = await res.json();
            if (data.mode === 'auto' && !sessionStorage.getItem('mode_banner_dismissed')) {
                document.getElementById('modeBanner').style.display = 'flex';
            }
        } catch (e) {
            console.error('Mode load error:', e);
        }
    }

    function dismissModeBanner() {
        sessionStorage.setItem('mode_banner_dismissed', '1');
        document.getElementById('modeBanner').style.display = 'none';
    }

    async function switchToManual() {
        try {
            const res = await fetch('/api/batch/mode', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ mode: 'manual' })
            });
            const data = await res.json();
            if (data.success) {
                dismissModeBanner();
            } else {
                alert('Gagal alih mode: ' + (data.error || 'Terjadi kesalahan'));
            }
        } catch (e) {
            alert('Gagal terhubung ke server');
        }
    }

    // --- Model mode selector ---
    async function loadModelModes() {
        try {
            const res = await fetch('/api/model-modes');
            const data = await res.json();
            if (!data.success) return;
            const sel = document.getElementById('modelModeSelect');
            data.modes.forEach(m => {
                const opt = document.createElement('option');
                opt.value = m.id;
                opt.textContent = m.id + ' — ' + m.description;
                sel.appendChild(opt);
            });
        } catch (e) {
            console.error('Model modes load error:', e);
        }
    }

    async function setModelMode(mode) {
        if (!mode) return;
        if (!confirm('Ganti mode model ke ' + mode + '? Berlaku setelah service karung-counter direstart.')) {
            document.getElementById('modelModeSelect').value = '';
            return;
        }
        try {
            const res = await fetch('/api/batch/mode', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ model_mode: mode })
            });
            const data = await res.json();
            if (data.success) {
                document.getElementById('opModelMode').textContent = data.model_mode;
                alert('Mode model tersimpan: ' + data.model_mode + '. Restart service untuk berlaku.');
            } else {
                alert('Gagal ganti mode: ' + (data.error || 'Terjadi kesalahan'));
            }
        } catch (e) {
            alert('Gagal terhubung ke server');
        } finally {
            document.getElementById('modelModeSelect').value = '';
        }
    }

    function confirmStartBatch() {
        document.getElementById('modalStart').style.display = 'flex';
    }

    function confirmStopBatch() {
        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 {
            const res = await fetch('/api/batch/start', { method: 'POST' });
            const data = await res.json();
            if (data.success) {
                await pollStatus();
            } 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() {
        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' });
            const data = await res.json();
            if (data.success) {
                await pollStatus();
            } 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;
            sackCount.textContent = data.count || 0;
            boxCount.textContent = data.box_count || 0;

            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);
    pollStatus();
    loadModeBanner();
    loadModelModes();
</script>
{% endblock %}