1218 lines
39 KiB
PHP
1218 lines
39 KiB
PHP
<?php
|
|
$title = 'Programacion - ESP Admin';
|
|
$cssVersion = '20251003-2307'; // Versión de estilos
|
|
ob_start();
|
|
?>
|
|
|
|
<style>
|
|
|
|
.panel-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
gap: 1rem;
|
|
height: calc(100vh - 200px);
|
|
min-height: 600px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.panel-container {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: 2px solid #e2e8f0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel-header {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: white;
|
|
padding: 1rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.panel-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pins-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.pin-card {
|
|
background: white;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
transition: all 0.3s;
|
|
cursor: grab;
|
|
position: relative;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
.pin-card:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.pin-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.pin-card.dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.pin-card.on {
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
|
|
border-color: #10b981 !important;
|
|
}
|
|
|
|
.pin-card.off {
|
|
background: #f8fafc !important;
|
|
border-color: #cbd5e1 !important;
|
|
}
|
|
|
|
.pin-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #10b981, #059669);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.pin-card.on::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pin-status-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.pin-status-indicator.on {
|
|
background: #10b981;
|
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
|
|
animation: pulse-dot 2s infinite;
|
|
}
|
|
|
|
.pin-status-indicator.off {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.pin-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.pin-name {
|
|
font-size: 0.75rem;
|
|
color: #64748b;
|
|
margin-bottom: 0.5rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.pin-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.pin-value.on {
|
|
color: #059669;
|
|
}
|
|
|
|
.pin-value.off {
|
|
color: #64748b;
|
|
}
|
|
|
|
.drop-zone {
|
|
min-height: 200px;
|
|
border: 3px dashed #cbd5e1;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background: #f8fafc;
|
|
transition: all 0.3s;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.drop-zone.drag-over {
|
|
border-color: #10b981;
|
|
background: #d1fae5;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.drop-zone-empty {
|
|
color: #94a3b8;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.rule-card {
|
|
background: white;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.rule-card:hover {
|
|
border-color: #10b981;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.rule-card.disabled {
|
|
opacity: 0.6;
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.rule-builder {
|
|
background: white;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.rule-builder-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.rule-builder-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dropped-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: #f1f5f9;
|
|
border: 2px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
margin: 0.25rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.dropped-item:hover {
|
|
border-color: #10b981;
|
|
background: #d1fae5;
|
|
}
|
|
|
|
.dropped-item .remove-btn {
|
|
cursor: pointer;
|
|
color: #ef4444;
|
|
font-weight: bold;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.flow-canvas {
|
|
background:
|
|
linear-gradient(90deg, #f1f5f9 1px, transparent 1px),
|
|
linear-gradient(#f1f5f9 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
min-height: 400px;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.flow-node {
|
|
position: absolute;
|
|
background: white;
|
|
border: 2px solid #10b981;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
min-width: 120px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
cursor: move;
|
|
user-select: none;
|
|
}
|
|
|
|
.flow-node.input {
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.flow-node.output {
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.flow-node.logic {
|
|
border-color: #8b5cf6;
|
|
}
|
|
</style>
|
|
|
|
<!-- Header con selector de dispositivo -->
|
|
<div class="mb-6">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-slate-900">Programación Visual</h1>
|
|
<p class="text-slate-600 mt-1">Crea reglas de automatización para tus dispositivos</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<select id="deviceSelector" class="px-4 py-2.5 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
|
|
<option value="">Selecciona un dispositivo...</option>
|
|
</select>
|
|
<button id="btnSaveRules" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm transition-all" disabled>
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
|
|
</svg>
|
|
Guardar Reglas
|
|
</button>
|
|
<button id="btnNewRule" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-white text-slate-700 hover:bg-slate-50 border border-slate-200 shadow-sm transition-all" disabled>
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Nueva Regla
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenedor de 3 paneles -->
|
|
<div class="panel-container">
|
|
<!-- Panel Izquierdo: Entradas -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span>Entradas</span>
|
|
<span id="inputCount" class="ml-auto bg-white/20 px-2 py-0.5 rounded-full text-xs">0</span>
|
|
</div>
|
|
<div class="panel-body" id="inputsPanel">
|
|
<div class="text-center text-slate-500 py-8">
|
|
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
<p class="text-sm">Selecciona un dispositivo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel Central: Reglas/Lógica -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
|
</svg>
|
|
<span>Reglas de Automatización</span>
|
|
<span id="ruleCount" class="ml-auto bg-white/20 px-2 py-0.5 rounded-full text-xs">0</span>
|
|
</div>
|
|
<div class="panel-body" id="rulesPanel">
|
|
<!-- Constructor visual de reglas -->
|
|
<div id="ruleBuilderContainer" class="hidden">
|
|
<div class="rule-builder">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-slate-900">Constructor Visual de Regla</h3>
|
|
<button id="btnCancelBuilder" class="text-sm text-slate-600 hover:text-slate-900">✕ Cancelar</button>
|
|
</div>
|
|
|
|
<!-- Trigger -->
|
|
<div class="rule-builder-section">
|
|
<div class="rule-builder-title">
|
|
🔔 Disparador (Trigger)
|
|
</div>
|
|
<div id="triggerDropZone" class="drop-zone" data-type="trigger">
|
|
<div class="drop-zone-empty">
|
|
Arrastra una ENTRADA aquí para usarla como disparador
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Condiciones -->
|
|
<div class="rule-builder-section">
|
|
<div class="rule-builder-title">
|
|
⚙️ Condiciones (opcional)
|
|
</div>
|
|
<div id="conditionsDropZone" class="drop-zone" data-type="conditions">
|
|
<div class="drop-zone-empty">
|
|
Arrastra ENTRADAS aquí para agregar condiciones
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Acciones -->
|
|
<div class="rule-builder-section">
|
|
<div class="rule-builder-title">
|
|
⚡ Acciones
|
|
</div>
|
|
<div id="actionsDropZone" class="drop-zone" data-type="actions">
|
|
<div class="drop-zone-empty">
|
|
Arrastra SALIDAS aquí para definir las acciones
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botones -->
|
|
<div class="flex items-center gap-3">
|
|
<input type="text" id="builderRuleName" placeholder="Nombre de la regla..." class="flex-1 px-4 py-2 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500">
|
|
<button id="btnSaveBuiltRule" class="px-6 py-2 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 transition-all">
|
|
Guardar Regla
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista de reglas guardadas -->
|
|
<div id="savedRulesList">
|
|
<div class="text-center text-slate-500 py-8">
|
|
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
<p class="text-sm">No hay reglas creadas</p>
|
|
<p class="text-xs mt-1">Arrastra pines o haz clic en "Nueva Regla"</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel Derecho: Salidas -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span>Salidas</span>
|
|
<span id="outputCount" class="ml-auto bg-white/20 px-2 py-0.5 rounded-full text-xs">0</span>
|
|
</div>
|
|
<div class="panel-body" id="outputsPanel">
|
|
<div class="text-center text-slate-500 py-8">
|
|
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
<p class="text-sm">Selecciona un dispositivo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Editor de Reglas -->
|
|
<div id="modalRuleEditor" class="fixed inset-0 z-50 hidden">
|
|
<div data-modal-overlay class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
|
|
<div class="relative mx-auto mt-10 max-w-4xl rounded-xl bg-white shadow-2xl" style="max-height: 90vh; overflow-y: auto;">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-gradient-to-r from-emerald-50 to-emerald-100 sticky top-0 z-10">
|
|
<h5 class="m-0 font-bold text-slate-900 text-lg">Editor de Reglas</h5>
|
|
<button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" data-modal-close>
|
|
<svg class="w-6 h-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="p-6">
|
|
<form id="formRule">
|
|
<input type="hidden" id="ruleId" name="id">
|
|
|
|
<!-- Nombre de la regla -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate-700 mb-2">Nombre de la Regla</label>
|
|
<input type="text" id="ruleName" name="name" placeholder="Ej: Riego automático nocturno" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all" required>
|
|
</div>
|
|
|
|
<!-- Estado activo/inactivo -->
|
|
<div class="mb-6 flex items-center gap-3">
|
|
<input type="checkbox" id="ruleEnabled" name="enabled" checked class="w-5 h-5 text-emerald-600 border-slate-300 rounded focus:ring-emerald-500">
|
|
<label for="ruleEnabled" class="text-sm font-medium text-slate-700">Regla activa</label>
|
|
</div>
|
|
|
|
<!-- Condiciones (Trigger) -->
|
|
<div class="mb-6">
|
|
<h6 class="text-md font-bold text-slate-900 mb-3">🔔 Disparador (Trigger)</h6>
|
|
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-4">
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Tipo</label>
|
|
<select id="triggerType" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm">
|
|
<option value="input_change">Cambio en entrada</option>
|
|
<option value="timer">Temporizador</option>
|
|
<option value="manual">Manual</option>
|
|
</select>
|
|
</div>
|
|
<div id="triggerPinContainer">
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Pin</label>
|
|
<select id="triggerPin" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm">
|
|
<option value="">Selecciona...</option>
|
|
</select>
|
|
</div>
|
|
<div id="triggerValueContainer">
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Valor</label>
|
|
<select id="triggerValue" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm">
|
|
<option value="ON">ON</option>
|
|
<option value="OFF">OFF</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Condiciones adicionales -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h6 class="text-md font-bold text-slate-900">⚙️ Condiciones (opcional)</h6>
|
|
<button type="button" id="btnAddCondition" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">+ Agregar condición</button>
|
|
</div>
|
|
<div id="conditionsContainer" class="space-y-2">
|
|
<!-- Las condiciones se agregan dinámicamente aquí -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Acciones -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h6 class="text-md font-bold text-slate-900">⚡ Acciones</h6>
|
|
<button type="button" id="btnAddAction" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">+ Agregar acción</button>
|
|
</div>
|
|
<div id="actionsContainer" class="space-y-2">
|
|
<!-- Las acciones se agregan dinámicamente aquí -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botones -->
|
|
<div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-200">
|
|
<button type="button" data-modal-close class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-all">Cancelar</button>
|
|
<button type="submit" class="px-6 py-2 text-sm font-semibold bg-emerald-600 text-white hover:bg-emerald-700 rounded-lg transition-all">Guardar Regla</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentChipId = null;
|
|
let currentPins = {};
|
|
let currentRules = [];
|
|
let pinStates = {}; // Estados en tiempo real desde MQTT WebSocket
|
|
|
|
// Cargar dispositivos en el selector
|
|
function loadDevices() {
|
|
$.get('/api/index.php?r=get_dispositivos', function(data) {
|
|
const $select = $('#deviceSelector');
|
|
$select.empty().append('<option value="">Selecciona un dispositivo...</option>');
|
|
|
|
for (const chipid in data) {
|
|
const d = data[chipid];
|
|
$select.append(`<option value="${chipid}">${d.tag} (${chipid})</option>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Cargar puertos del dispositivo seleccionado
|
|
function loadDevicePorts(chipid) {
|
|
currentChipId = chipid;
|
|
|
|
$.get(`/api/index.php?r=get_puertos&chipid=${chipid}`, function(data) {
|
|
currentPins = data;
|
|
renderPins();
|
|
loadRules(chipid);
|
|
|
|
// Habilitar botones
|
|
$('#btnSaveRules, #btnNewRule').prop('disabled', false);
|
|
|
|
}).fail(function() {
|
|
mostrarToast('Error al cargar puertos del dispositivo', { type: 'danger' });
|
|
});
|
|
}
|
|
|
|
// Renderizar pines en los paneles
|
|
function renderPins() {
|
|
const $inputsPanel = $('#inputsPanel');
|
|
const $outputsPanel = $('#outputsPanel');
|
|
|
|
$inputsPanel.empty();
|
|
$outputsPanel.empty();
|
|
|
|
let inputCount = 0;
|
|
let outputCount = 0;
|
|
|
|
// Crear contenedores de grilla
|
|
const $inputsGrid = $('<div class="pins-grid"></div>');
|
|
const $outputsGrid = $('<div class="pins-grid"></div>');
|
|
|
|
for (const pin in currentPins) {
|
|
if (pin === 'update') continue;
|
|
|
|
const p = currentPins[pin];
|
|
const state = pinStates[pin] || 'OFF';
|
|
const stateClass = (state === 'ON') ? 'on' : 'off';
|
|
|
|
if (p.modo === 'INPUT' || p.modo === 'INPUT_PULLUP') {
|
|
inputCount++;
|
|
$inputsGrid.append(`
|
|
<div class="pin-card ${stateClass}" draggable="true" data-pin="${pin}" data-type="input" data-name="${p.disp || 'Sin nombre'}">
|
|
<span class="pin-status-indicator ${stateClass}"></span>
|
|
<div class="pin-label">${pin}</div>
|
|
<div class="pin-name" title="${p.disp || 'Sin nombre'}">${p.disp || 'Sin nombre'}</div>
|
|
<div class="pin-value ${stateClass}">${state}</div>
|
|
</div>
|
|
`);
|
|
} else if (p.modo === 'OUTPUT') {
|
|
outputCount++;
|
|
$outputsGrid.append(`
|
|
<div class="pin-card ${stateClass}" draggable="true" data-pin="${pin}" data-type="output" data-name="${p.disp || 'Sin nombre'}">
|
|
<span class="pin-status-indicator ${stateClass}"></span>
|
|
<div class="pin-label">${pin}</div>
|
|
<div class="pin-name" title="${p.disp || 'Sin nombre'}">${p.disp || 'Sin nombre'}</div>
|
|
<button class="toggle-output w-full px-3 py-2 text-sm font-bold rounded-lg transition-all ${state === 'ON' ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}" data-pin="${pin}" data-state="${state}">
|
|
${state}
|
|
</button>
|
|
</div>
|
|
`);
|
|
}
|
|
}
|
|
|
|
$('#inputCount').text(inputCount);
|
|
$('#outputCount').text(outputCount);
|
|
|
|
if (inputCount === 0) {
|
|
$inputsPanel.html('<div class="text-center text-slate-500 py-4 text-sm">No hay entradas configuradas</div>');
|
|
} else {
|
|
$inputsPanel.append($inputsGrid);
|
|
initDragAndDrop();
|
|
}
|
|
|
|
if (outputCount === 0) {
|
|
$outputsPanel.html('<div class="text-center text-slate-500 py-4 text-sm">No hay salidas configuradas</div>');
|
|
} else {
|
|
$outputsPanel.append($outputsGrid);
|
|
initDragAndDrop();
|
|
}
|
|
}
|
|
|
|
// Sistema de Drag & Drop
|
|
let draggedElement = null;
|
|
let builderState = {
|
|
trigger: null,
|
|
conditions: [],
|
|
actions: []
|
|
};
|
|
|
|
function initDragAndDrop() {
|
|
// Drag start
|
|
$(document).on('dragstart', '.pin-card[draggable="true"]', function(e) {
|
|
draggedElement = {
|
|
pin: $(this).data('pin'),
|
|
type: $(this).data('type'),
|
|
name: $(this).data('name')
|
|
};
|
|
$(this).addClass('dragging');
|
|
e.originalEvent.dataTransfer.effectAllowed = 'copy';
|
|
});
|
|
|
|
// Drag end
|
|
$(document).on('dragend', '.pin-card[draggable="true"]', function() {
|
|
$(this).removeClass('dragging');
|
|
});
|
|
|
|
// Drag over drop zones
|
|
$(document).on('dragover', '.drop-zone', function(e) {
|
|
e.preventDefault();
|
|
e.originalEvent.dataTransfer.dropEffect = 'copy';
|
|
$(this).addClass('drag-over');
|
|
});
|
|
|
|
// Drag leave
|
|
$(document).on('dragleave', '.drop-zone', function() {
|
|
$(this).removeClass('drag-over');
|
|
});
|
|
|
|
// Drop
|
|
$(document).on('drop', '.drop-zone', function(e) {
|
|
e.preventDefault();
|
|
$(this).removeClass('drag-over');
|
|
|
|
if (!draggedElement) return;
|
|
|
|
const dropType = $(this).data('type');
|
|
|
|
// Validar tipo de pin según zona
|
|
if (dropType === 'trigger' || dropType === 'conditions') {
|
|
if (draggedElement.type !== 'input') {
|
|
mostrarToast('Solo puedes arrastrar ENTRADAS aquí', { type: 'warning' });
|
|
return;
|
|
}
|
|
} else if (dropType === 'actions') {
|
|
if (draggedElement.type !== 'output') {
|
|
mostrarToast('Solo puedes arrastrar SALIDAS aquí', { type: 'warning' });
|
|
return;
|
|
}
|
|
}
|
|
|
|
addToBuilder(dropType, draggedElement);
|
|
draggedElement = null;
|
|
});
|
|
}
|
|
|
|
function addToBuilder(zone, item) {
|
|
const $zone = $(`[data-type="${zone}"]`);
|
|
|
|
if (zone === 'trigger') {
|
|
// Solo un trigger
|
|
builderState.trigger = item;
|
|
$zone.html(`
|
|
<div class="dropped-item">
|
|
<strong>${item.pin}</strong> - ${item.name}
|
|
<span class="text-xs text-slate-500">cuando cambie</span>
|
|
<span class="remove-btn" onclick="removeFromBuilder('trigger')">✕</span>
|
|
</div>
|
|
`);
|
|
} else if (zone === 'conditions') {
|
|
// Múltiples condiciones
|
|
builderState.conditions.push(item);
|
|
const idx = builderState.conditions.length - 1;
|
|
$zone.find('.drop-zone-empty').remove();
|
|
$zone.append(`
|
|
<div class="dropped-item" data-idx="${idx}">
|
|
<strong>${item.pin}</strong> - ${item.name}
|
|
<select class="ml-2 px-2 py-1 border rounded text-xs condition-operator">
|
|
<option value="==">es igual a</option>
|
|
<option value="!=">es diferente de</option>
|
|
</select>
|
|
<select class="ml-2 px-2 py-1 border rounded text-xs condition-value">
|
|
<option value="ON">ON</option>
|
|
<option value="OFF">OFF</option>
|
|
</select>
|
|
<span class="remove-btn" onclick="removeFromBuilder('conditions', ${idx})">✕</span>
|
|
</div>
|
|
`);
|
|
} else if (zone === 'actions') {
|
|
// Múltiples acciones
|
|
builderState.actions.push(item);
|
|
const idx = builderState.actions.length - 1;
|
|
$zone.find('.drop-zone-empty').remove();
|
|
$zone.append(`
|
|
<div class="dropped-item" data-idx="${idx}">
|
|
<strong>${item.pin}</strong> - ${item.name}
|
|
<span class="text-xs text-slate-500">establecer a</span>
|
|
<select class="ml-2 px-2 py-1 border rounded text-xs action-value">
|
|
<option value="ON">ON</option>
|
|
<option value="OFF">OFF</option>
|
|
</select>
|
|
<span class="remove-btn" onclick="removeFromBuilder('actions', ${idx})">✕</span>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
// Mostrar constructor si estaba oculto
|
|
$('#ruleBuilderContainer').removeClass('hidden');
|
|
$('#savedRulesList').addClass('hidden');
|
|
}
|
|
|
|
function removeFromBuilder(zone, idx) {
|
|
if (zone === 'trigger') {
|
|
builderState.trigger = null;
|
|
$('#triggerDropZone').html('<div class="drop-zone-empty">Arrastra una ENTRADA aquí para usarla como disparador</div>');
|
|
} else if (zone === 'conditions') {
|
|
builderState.conditions.splice(idx, 1);
|
|
$(`#conditionsDropZone .dropped-item[data-idx="${idx}"]`).remove();
|
|
if (builderState.conditions.length === 0) {
|
|
$('#conditionsDropZone').html('<div class="drop-zone-empty">Arrastra ENTRADAS aquí para agregar condiciones</div>');
|
|
}
|
|
} else if (zone === 'actions') {
|
|
builderState.actions.splice(idx, 1);
|
|
$(`#actionsDropZone .dropped-item[data-idx="${idx}"]`).remove();
|
|
if (builderState.actions.length === 0) {
|
|
$('#actionsDropZone').html('<div class="drop-zone-empty">Arrastra SALIDAS aquí para definir las acciones</div>');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Botón Nueva Regla - mostrar constructor
|
|
$('#btnNewRule').on('click', function() {
|
|
$('#ruleBuilderContainer').removeClass('hidden');
|
|
$('#savedRulesList').addClass('hidden');
|
|
resetBuilder();
|
|
});
|
|
|
|
// Cancelar constructor
|
|
$('#btnCancelBuilder').on('click', function() {
|
|
$('#ruleBuilderContainer').addClass('hidden');
|
|
$('#savedRulesList').removeClass('hidden');
|
|
resetBuilder();
|
|
});
|
|
|
|
function resetBuilder() {
|
|
builderState = { trigger: null, conditions: [], actions: [] };
|
|
$('#triggerDropZone').html('<div class="drop-zone-empty">Arrastra una ENTRADA aquí para usarla como disparador</div>');
|
|
$('#conditionsDropZone').html('<div class="drop-zone-empty">Arrastra ENTRADAS aquí para agregar condiciones</div>');
|
|
$('#actionsDropZone').html('<div class="drop-zone-empty">Arrastra SALIDAS aquí para definir las acciones</div>');
|
|
$('#builderRuleName').val('');
|
|
}
|
|
|
|
// Guardar regla construida visualmente
|
|
$('#btnSaveBuiltRule').on('click', function() {
|
|
const ruleName = $('#builderRuleName').val().trim();
|
|
|
|
if (!ruleName) {
|
|
mostrarToast('Ingresa un nombre para la regla', { type: 'warning' });
|
|
return;
|
|
}
|
|
|
|
if (!builderState.trigger) {
|
|
mostrarToast('Debes agregar un disparador (trigger)', { type: 'warning' });
|
|
return;
|
|
}
|
|
|
|
if (builderState.actions.length === 0) {
|
|
mostrarToast('Debes agregar al menos una acción', { type: 'warning' });
|
|
return;
|
|
}
|
|
|
|
// Construir regla
|
|
const rule = {
|
|
id: 'r' + Date.now(),
|
|
name: ruleName,
|
|
enabled: true,
|
|
trigger: {
|
|
type: 'input_change',
|
|
pin: builderState.trigger.pin,
|
|
value: 'ON'
|
|
},
|
|
conditions: builderState.conditions.map((c, idx) => ({
|
|
pin: c.pin,
|
|
operator: $(`#conditionsDropZone .dropped-item[data-idx="${idx}"] .condition-operator`).val(),
|
|
value: $(`#conditionsDropZone .dropped-item[data-idx="${idx}"] .condition-value`).val()
|
|
})),
|
|
actions: builderState.actions.map((a, idx) => ({
|
|
type: 'set',
|
|
pin: a.pin,
|
|
value: $(`#actionsDropZone .dropped-item[data-idx="${idx}"] .action-value`).val()
|
|
}))
|
|
};
|
|
|
|
currentRules.push(rule);
|
|
renderRules();
|
|
|
|
$('#ruleBuilderContainer').addClass('hidden');
|
|
$('#savedRulesList').removeClass('hidden');
|
|
resetBuilder();
|
|
|
|
mostrarToast('Regla creada correctamente', { type: 'success' });
|
|
});
|
|
|
|
// Control manual de salidas
|
|
$(document).on('click', '.toggle-output', function() {
|
|
const pin = $(this).data('pin');
|
|
const currentState = $(this).data('state');
|
|
const newState = (currentState === 'ON') ? 'OFF' : 'ON';
|
|
|
|
const topic = `dispositivo/${currentChipId}/comando`;
|
|
const payload = { alias: pin, valor: newState };
|
|
|
|
const publisher = window.mqttRealtime
|
|
? window.mqttRealtime.publish(topic, payload, { qos: 0, retain: true })
|
|
: api.postJSON('/api/index.php?r=mqtt_publish', { topic, payload, qos: 0, retain: true });
|
|
|
|
publisher
|
|
.then(function() {
|
|
mostrarToast(`${pin} → ${newState}`, { type: 'success', delay: 1500 });
|
|
})
|
|
.catch(function() {
|
|
mostrarToast('Error al enviar comando', { type: 'danger' });
|
|
});
|
|
});
|
|
|
|
// Cargar reglas del dispositivo
|
|
function loadRules(chipid) {
|
|
$.get(`/api/index.php?r=get_reglas&chipid=${chipid}`, function(response) {
|
|
console.log('Respuesta get_reglas:', response);
|
|
if (response && response.success && Array.isArray(response.data)) {
|
|
currentRules = response.data;
|
|
} else {
|
|
currentRules = [];
|
|
console.warn('Respuesta inesperada:', response);
|
|
}
|
|
renderRules();
|
|
}).fail(function(xhr, status, error) {
|
|
console.error('Error al cargar reglas:', {
|
|
status: xhr.status,
|
|
statusText: xhr.statusText,
|
|
responseText: xhr.responseText,
|
|
error: error
|
|
});
|
|
currentRules = [];
|
|
renderRules();
|
|
|
|
let errorMsg = 'Error al cargar reglas';
|
|
try {
|
|
const resp = JSON.parse(xhr.responseText);
|
|
errorMsg = resp.message || errorMsg;
|
|
} catch(e) {
|
|
if (xhr.status === 404) errorMsg = 'Endpoint no encontrado';
|
|
else if (xhr.status === 401) errorMsg = 'No autenticado';
|
|
else if (xhr.status === 500) errorMsg = 'Error del servidor';
|
|
}
|
|
|
|
mostrarToast(errorMsg, { type: 'danger' });
|
|
});
|
|
}
|
|
|
|
// Renderizar reglas
|
|
function renderRules() {
|
|
const $list = $('#savedRulesList');
|
|
|
|
if (currentRules.length === 0) {
|
|
$list.html(`
|
|
<div class="text-center text-slate-500 py-8">
|
|
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
<p class="text-sm">No hay reglas creadas</p>
|
|
<p class="text-xs mt-1">Arrastra pines o haz clic en "Nueva Regla"</p>
|
|
</div>
|
|
`);
|
|
$('#ruleCount').text('0');
|
|
return;
|
|
}
|
|
|
|
$list.empty();
|
|
currentRules.forEach(rule => {
|
|
$list.append(`
|
|
<div class="rule-card ${rule.enabled ? '' : 'disabled'}">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" class="rule-toggle" data-rule-id="${rule.id}" ${rule.enabled ? 'checked' : ''}>
|
|
<h6 class="font-bold text-slate-900">${rule.name}</h6>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="delete-rule text-red-600 hover:text-red-700" data-rule-id="${rule.id}">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-slate-600">
|
|
<span class="font-medium">Trigger:</span> ${formatTrigger(rule.trigger)}
|
|
</div>
|
|
${rule.conditions && rule.conditions.length > 0 ? `
|
|
<div class="text-xs text-slate-600 mt-1">
|
|
<span class="font-medium">Condiciones:</span> ${rule.conditions.length}
|
|
</div>
|
|
` : ''}
|
|
<div class="text-xs text-slate-600 mt-1">
|
|
<span class="font-medium">Acciones:</span> ${rule.actions.length}
|
|
</div>
|
|
</div>
|
|
`);
|
|
});
|
|
|
|
$('#ruleCount').text(currentRules.length);
|
|
}
|
|
|
|
function formatTrigger(trigger) {
|
|
if (trigger.type === 'input_change') {
|
|
return `${trigger.pin} → ${trigger.value}`;
|
|
} else if (trigger.type === 'timer') {
|
|
return `Timer: ${trigger.time}`;
|
|
}
|
|
return trigger.type;
|
|
}
|
|
|
|
// Event listeners
|
|
$('#deviceSelector').on('change', function() {
|
|
const chipid = $(this).val();
|
|
if (chipid) {
|
|
loadDevicePorts(chipid);
|
|
}
|
|
});
|
|
|
|
$('#btnNewRule').on('click', function() {
|
|
openRuleEditor();
|
|
});
|
|
|
|
function openRuleEditor(ruleId = null) {
|
|
// Limpiar formulario
|
|
$('#formRule')[0].reset();
|
|
$('#ruleId').val('');
|
|
$('#conditionsContainer').empty();
|
|
$('#actionsContainer').empty();
|
|
|
|
// Poblar selector de pines para trigger
|
|
const $triggerPin = $('#triggerPin');
|
|
$triggerPin.empty().append('<option value="">Selecciona...</option>');
|
|
|
|
for (const pin in currentPins) {
|
|
if (pin === 'update') continue;
|
|
const p = currentPins[pin];
|
|
if (p.modo === 'INPUT' || p.modo === 'INPUT_PULLUP') {
|
|
$triggerPin.append(`<option value="${pin}">${pin} - ${p.disp || 'Sin nombre'}</option>`);
|
|
}
|
|
}
|
|
|
|
// Si es edición, cargar datos
|
|
if (ruleId) {
|
|
const rule = currentRules.find(r => r.id === ruleId);
|
|
if (rule) {
|
|
$('#ruleId').val(rule.id);
|
|
$('#ruleName').val(rule.name);
|
|
$('#ruleEnabled').prop('checked', rule.enabled);
|
|
$('#triggerType').val(rule.trigger.type);
|
|
$('#triggerPin').val(rule.trigger.pin);
|
|
$('#triggerValue').val(rule.trigger.value);
|
|
|
|
// TODO: Cargar condiciones y acciones
|
|
}
|
|
}
|
|
|
|
// Abrir modal
|
|
$('#modalRuleEditor').removeClass('hidden');
|
|
}
|
|
|
|
// Cerrar modal
|
|
$(document).on('click', '[data-modal-close]', function() {
|
|
$(this).closest('.fixed').addClass('hidden');
|
|
});
|
|
|
|
$(document).on('click', '[data-modal-overlay]', function() {
|
|
$(this).closest('.fixed').addClass('hidden');
|
|
});
|
|
|
|
// Agregar condición
|
|
$('#btnAddCondition').on('click', function() {
|
|
const html = `
|
|
<div class="condition-item bg-slate-50 border border-slate-200 rounded-lg p-3 flex items-center gap-2">
|
|
<select class="condition-pin flex-1 px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="">Pin...</option>
|
|
${getInputPinsOptions()}
|
|
</select>
|
|
<select class="condition-operator px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="==">=</option>
|
|
<option value="!=">≠</option>
|
|
</select>
|
|
<select class="condition-value px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="ON">ON</option>
|
|
<option value="OFF">OFF</option>
|
|
</select>
|
|
<button type="button" class="remove-condition text-red-600 hover:text-red-700">
|
|
<svg class="w-5 h-5" 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>
|
|
`;
|
|
$('#conditionsContainer').append(html);
|
|
});
|
|
|
|
// Agregar acción
|
|
$('#btnAddAction').on('click', function() {
|
|
const html = `
|
|
<div class="action-item bg-amber-50 border border-amber-200 rounded-lg p-3 flex items-center gap-2">
|
|
<select class="action-type px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="set">Establecer</option>
|
|
<option value="delay">Esperar</option>
|
|
</select>
|
|
<select class="action-pin flex-1 px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="">Pin...</option>
|
|
${getOutputPinsOptions()}
|
|
</select>
|
|
<select class="action-value px-3 py-2 border border-slate-300 rounded text-sm">
|
|
<option value="ON">ON</option>
|
|
<option value="OFF">OFF</option>
|
|
</select>
|
|
<button type="button" class="remove-action text-red-600 hover:text-red-700">
|
|
<svg class="w-5 h-5" 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>
|
|
`;
|
|
$('#actionsContainer').append(html);
|
|
});
|
|
|
|
function getInputPinsOptions() {
|
|
let html = '';
|
|
for (const pin in currentPins) {
|
|
if (pin === 'update') continue;
|
|
const p = currentPins[pin];
|
|
if (p.modo === 'INPUT' || p.modo === 'INPUT_PULLUP') {
|
|
html += `<option value="${pin}">${pin} - ${p.disp || 'Sin nombre'}</option>`;
|
|
}
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function getOutputPinsOptions() {
|
|
let html = '';
|
|
for (const pin in currentPins) {
|
|
if (pin === 'update') continue;
|
|
const p = currentPins[pin];
|
|
if (p.modo === 'OUTPUT') {
|
|
html += `<option value="${pin}">${pin} - ${p.disp || 'Sin nombre'}</option>`;
|
|
}
|
|
}
|
|
return html;
|
|
}
|
|
|
|
// Remover condición/acción
|
|
$(document).on('click', '.remove-condition', function() {
|
|
$(this).closest('.condition-item').remove();
|
|
});
|
|
|
|
$(document).on('click', '.remove-action', function() {
|
|
$(this).closest('.action-item').remove();
|
|
});
|
|
|
|
// Guardar regla
|
|
$('#formRule').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const rule = {
|
|
id: $('#ruleId').val() || 'r' + Date.now(),
|
|
name: $('#ruleName').val(),
|
|
enabled: $('#ruleEnabled').is(':checked'),
|
|
trigger: {
|
|
type: $('#triggerType').val(),
|
|
pin: $('#triggerPin').val(),
|
|
value: $('#triggerValue').val()
|
|
},
|
|
conditions: [],
|
|
actions: []
|
|
};
|
|
|
|
// Recopilar condiciones
|
|
$('.condition-item').each(function() {
|
|
rule.conditions.push({
|
|
pin: $(this).find('.condition-pin').val(),
|
|
operator: $(this).find('.condition-operator').val(),
|
|
value: $(this).find('.condition-value').val()
|
|
});
|
|
});
|
|
|
|
// Recopilar acciones
|
|
$('.action-item').each(function() {
|
|
rule.actions.push({
|
|
type: $(this).find('.action-type').val(),
|
|
pin: $(this).find('.action-pin').val(),
|
|
value: $(this).find('.action-value').val()
|
|
});
|
|
});
|
|
|
|
// Agregar o actualizar regla
|
|
const existingIndex = currentRules.findIndex(r => r.id === rule.id);
|
|
if (existingIndex >= 0) {
|
|
currentRules[existingIndex] = rule;
|
|
} else {
|
|
currentRules.push(rule);
|
|
}
|
|
|
|
renderRules();
|
|
$('#modalRuleEditor').addClass('hidden');
|
|
mostrarToast('Regla guardada correctamente', { type: 'success' });
|
|
});
|
|
|
|
// Editar regla
|
|
$(document).on('click', '.edit-rule', function() {
|
|
const ruleId = $(this).data('rule-id');
|
|
openRuleEditor(ruleId);
|
|
});
|
|
|
|
// Eliminar regla
|
|
$(document).on('click', '.delete-rule', function() {
|
|
const ruleId = $(this).data('rule-id');
|
|
if (confirm('¿Eliminar esta regla?')) {
|
|
currentRules = currentRules.filter(r => r.id !== ruleId);
|
|
renderRules();
|
|
mostrarToast('Regla eliminada', { type: 'success' });
|
|
}
|
|
});
|
|
|
|
// Toggle regla activa/inactiva
|
|
$(document).on('change', '.rule-toggle', function() {
|
|
const ruleId = $(this).data('rule-id');
|
|
const enabled = $(this).is(':checked');
|
|
const rule = currentRules.find(r => r.id === ruleId);
|
|
if (rule) {
|
|
rule.enabled = enabled;
|
|
renderRules();
|
|
}
|
|
});
|
|
|
|
// Guardar todas las reglas
|
|
$('#btnSaveRules').on('click', function() {
|
|
if (!currentChipId) return;
|
|
|
|
const $btn = $(this);
|
|
const originalText = $btn.html();
|
|
$btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Guardando...');
|
|
|
|
const payload = {
|
|
chipid: currentChipId,
|
|
rules: currentRules
|
|
};
|
|
|
|
api.postJSON('/api/index.php?r=save_reglas', payload)
|
|
.done(function(response) {
|
|
if (response.success) {
|
|
mostrarToast('Reglas guardadas correctamente', { type: 'success' });
|
|
} else {
|
|
mostrarToast(response.message || 'Error al guardar', { type: 'danger' });
|
|
}
|
|
})
|
|
.fail(function(xhr) {
|
|
const msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Error al guardar reglas';
|
|
mostrarToast(msg, { type: 'danger' });
|
|
})
|
|
.always(function() {
|
|
$btn.prop('disabled', false).html(originalText);
|
|
});
|
|
});
|
|
|
|
// Inicialización
|
|
$(function() {
|
|
loadDevices();
|
|
});
|
|
</script>
|
|
|
|
<?php
|
|
$content = ob_get_clean();
|
|
if (!defined('RENDER_PARTIAL')) {
|
|
include __DIR__ . '/../layouts/layout.php';
|
|
}
|
|
?>
|