Initial commit, 90% there
This commit is contained in:
mdares
@@ -0,0 +1,270 @@
|
||||
<!-- ============================================================================
|
||||
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>
|
||||
Reference in New Issue
Block a user