Virtual-Box/.claude/file-history/19ed0c79-1296-4f71-b1d1-78f2ea67aa8b/fda15e0fa3c5281b@v2

<!-- ============================================================================
     STOP REASON PROMPT UI - Dashboard Template
     Purpose: Show modal prompt when STOP button is clicked (Issue 4)
     Type: ui_template node
     ============================================================================ -->

<style>
.stop-reason-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.stop-reason-modal.show {
    display: flex;
}

.stop-reason-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.stop-reason-content h2 {
    margin-top: 0;
    color: #d32f2f;
    font-size: 24px;
}

.stop-reason-section {
    margin: 20px 0;
}

.stop-reason-section h3 {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
    font-weight: 600;
}

.stop-reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stop-reason-btn {
    padding: 12px 16px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-size: 14px;
}

.stop-reason-btn:hover {
    border-color: #2196F3;
    background: #E3F2FD;
}

.stop-reason-btn.selected {
    border-color: #2196F3;
    background: #2196F3;
    color: white;
}

.stop-reason-btn.planned {
    border-left: 4px solid #4CAF50;
}

.stop-reason-btn.unplanned {
    border-left: 4px solid #f44336;
}

.stop-reason-notes {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.stop-reason-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.stop-reason-submit {
    padding: 10px 24px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.stop-reason-submit:hover {
    background: #1976D2;
}

.stop-reason-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.stop-reason-cancel {
    padding: 10px 24px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.stop-reason-cancel:hover {
    background: #e0e0e0;
}
</style>

<div id="stopReasonModal" class="stop-reason-modal">
    <div class="stop-reason-content">
        <h2>⚠️ Production Stopped</h2>
        <p>Please select the reason for stopping production:</p>

        <div class="stop-reason-section">
            <h3>Planned Stops (will not affect downtime KPI)</h3>
            <div class="stop-reason-options">
                <button class="stop-reason-btn planned" data-category="planned" data-reason="Lunch break">
                    🍽️ Lunch break
                </button>
                <button class="stop-reason-btn planned" data-category="planned" data-reason="Scheduled break">
                    ☕ Scheduled break
                </button>
                <button class="stop-reason-btn planned" data-category="planned" data-reason="Shift change">
                    🔄 Shift change
                </button>
                <button class="stop-reason-btn planned" data-category="planned" data-reason="Planned maintenance">
                    🔧 Planned maintenance
                </button>
            </div>
        </div>

        <div class="stop-reason-section">
            <h3>Unplanned Stops (will affect availability KPI)</h3>
            <div class="stop-reason-options">
                <button class="stop-reason-btn unplanned" data-category="unplanned" data-reason="Machine malfunction">
                    ⚙️ Machine malfunction
                </button>
                <button class="stop-reason-btn unplanned" data-category="unplanned" data-reason="Material shortage">
                    📦 Material shortage
                </button>
                <button class="stop-reason-btn unplanned" data-category="unplanned" data-reason="Quality issue">
                    ❌ Quality issue
                </button>
                <button class="stop-reason-btn unplanned" data-category="unplanned" data-reason="Operator error">
                    👤 Operator error
                </button>
                <button class="stop-reason-btn unplanned" data-category="unplanned" data-reason="Other">
                    ❓ Other
                </button>
            </div>
        </div>

        <div class="stop-reason-section">
            <h3>Additional Notes (optional)</h3>
            <textarea id="stopReasonNotes" class="stop-reason-notes" placeholder="Enter any additional details..."></textarea>
        </div>

        <div class="stop-reason-actions">
            <button class="stop-reason-cancel" onclick="cancelStopReason()">Cancel</button>
            <button class="stop-reason-submit" id="submitStopReason" onclick="submitStopReason()" disabled>Submit</button>
        </div>
    </div>
</div>

<script>
(function(scope) {
    let selectedCategory = null;
    let selectedReason = null;

    // Listen for stop-prompt messages from Node-RED
    scope.$watch('msg', function(msg) {
        if (msg && msg._mode === 'stop-prompt') {
            showStopReasonModal();
        }
    });

    // Show modal
    window.showStopReasonModal = function() {
        document.getElementById('stopReasonModal').classList.add('show');
        selectedCategory = null;
        selectedReason = null;
        document.getElementById('stopReasonNotes').value = '';
        document.getElementById('submitStopReason').disabled = true;

        // Remove all selections
        document.querySelectorAll('.stop-reason-btn').forEach(btn => {
            btn.classList.remove('selected');
        });
    };

    // Hide modal
    window.cancelStopReason = function() {
        document.getElementById('stopReasonModal').classList.remove('show');
    };

    // Handle reason selection
    document.querySelectorAll('.stop-reason-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // Remove previous selection
            document.querySelectorAll('.stop-reason-btn').forEach(b => {
                b.classList.remove('selected');
            });

            // Select this button
            this.classList.add('selected');

            selectedCategory = this.dataset.category;
            selectedReason = this.dataset.reason;

            // Enable submit button
            document.getElementById('submitStopReason').disabled = false;
        });
    });

    // Submit stop reason
    window.submitStopReason = function() {
        if (!selectedCategory || !selectedReason) {
            alert('Please select a stop reason');
            return;
        }

        const notes = document.getElementById('stopReasonNotes').value;

        // Send to Node-RED
        scope.send({
            action: 'stop-reason',
            payload: {
                category: selectedCategory,
                reason: selectedReason,
                notes: notes
            }
        });

        // Hide modal
        cancelStopReason();
    };

})(scope);
</script>