yamaray/monitorRPi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganizar formulario de dispositivos

Browse Source
This commit is contained in:
Yamaray
2026-06-03 09:04:25 +02:00
parent 2a781e7859
commit 28e95c6e1b
1 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.html
+48 -31
View File
@@ -179,7 +179,7 @@
.device {
display: grid;
grid-template-columns: 76px 1.35fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px;
align-items: end;
border: 1px solid var(--line);
@@ -188,17 +188,23 @@
background: var(--panel-2);
}
.field-name { grid-column: span 2; }
.field-active { grid-column: span 2; }
.field-name { grid-column: span 3; }
.field-id { grid-column: span 2; }
.field-role { grid-column: span 2; }
.field-role { grid-column: span 3; }
.field-model { grid-column: span 2; }
.field-location { grid-column: span 2; }
.field-auth { grid-column: span 1; }
.password-credential, .key-credential { grid-column: span 2; }
.field-host { grid-column: span 3; }
.field-port { grid-column: span 1; }
.field-username { grid-column: span 2; }
.field-auth { grid-column: span 2; }
.password-credential, .key-credential { grid-column: span 4; }
.field-delete { grid-column: span 2; }
.device[data-auth-method="password"] .key-credential { display: none; }
.device[data-auth-method="key"] .password-credential { display: none; }
.credential-note {
grid-column: span 2;
grid-column: span 8;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
@@ -233,6 +239,10 @@
accent-color: var(--ok);
}
.field-active input[type="checkbox"] {
align-self: center;
}
.actions {
display: flex;
gap: 10px;
@@ -374,7 +384,11 @@
}
@media (max-width: 1180px) {
.device { grid-template-columns: repeat(3, 1fr); align-items: start; }
.device { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.field-name, .field-role, .field-host, .password-credential, .key-credential { grid-column: span 3; }
.field-id, .field-model, .field-location, .field-username, .field-auth, .field-active, .field-delete { grid-column: span 2; }
.field-port { grid-column: span 1; }
.credential-note { grid-column: span 4; }
.top-grid { grid-template-columns: repeat(2, 1fr); }
.threshold-row { grid-template-columns: 90px repeat(3, minmax(100px, 1fr)); }
}
@@ -383,6 +397,9 @@
header { flex-direction: column; align-items: flex-start; padding: 18px; }
main { padding: 16px; }
.top-grid, .device { grid-template-columns: 1fr; }
.field-active, .field-name, .field-id, .field-role, .field-model, .field-location,
.field-host, .field-port, .field-username, .field-auth, .password-credential,
.key-credential, .credential-note, .field-delete { grid-column: span 1; }
.threshold-row { grid-template-columns: 1fr; }
}
</style>
@@ -565,17 +582,31 @@
const authMethod = device.privateKeyPath ? "key" : "password";
return `
<div class="device" data-index="${index}" data-auth-method="${authMethod}">
<label title="Si esta activo, este dispositivo se consulta por SSH. Si esta inactivo, se muestra deshabilitado y no se escanea.">Activo
<input data-field="active" type="checkbox" ${device.active ? "checked" : ""}>
</label>
<label class="field-name" title="Nombre visible de la tarjeta en el dashboard.">Nombre
<input data-field="name" value="${device.name || ""}">
<input data-field="name" maxlength="35" value="${device.name || ""}">
</label>
<label title="IP o nombre DNS usado para conectar por SSH.">IP / host
<label class="field-id" title="Identificador interno unico. Se usa para tracking de metricas como red.">ID
<input data-field="id" maxlength="30" value="${device.id || ""}">
</label>
<label class="field-role" title="Funcion del equipo: Docker, Home Assistant, MQTT, Nginx, Gitea, etc.">Rol
<input data-field="role" value="${device.role || ""}">
</label>
<label class="field-model" title="Modelo de Raspberry usado como informacion visual.">Modelo
<select data-field="model">
${["RPi 3", "RPi 4", "RPi 5"].map((model) => `<option ${device.model === model ? "selected" : ""}>${model}</option>`).join("")}
</select>
</label>
<label class="field-location" title="Ubicacion fisica o logica del dispositivo.">Ubicacion
<input data-field="location" maxlength="20" value="${device.location || ""}">
</label>
<label class="field-host" title="IP o nombre DNS usado para conectar por SSH.">IP / host
<input data-field="host" value="${device.host || ""}">
</label>
<label title="Usuario SSH para este dispositivo.">Usuario
<input data-field="username" value="${device.username || ""}">
<label class="field-port" title="Puerto SSH. Normalmente 22; en Home Assistant con add-on puede ser 2222.">Puerto
<input data-field="port" type="number" min="1" max="65535" maxlength="10" value="${device.port || 22}">
</label>
<label class="field-username" title="Usuario SSH para este dispositivo.">Usuario
<input data-field="username" maxlength="30" value="${device.username || ""}">
</label>
<label class="field-auth" title="Metodo de autenticacion SSH que usara el monitor para este dispositivo.">Auth SSH
<select data-auth-method>
@@ -592,24 +623,10 @@
<div class="credential-note">
Metodo activo: <strong>${authMethod === "key" ? "Clave privada" : "Password"}</strong>
</div>
<label class="field-id" title="Identificador interno unico. Se usa para tracking de metricas como red.">ID
<input data-field="id" value="${device.id || ""}">
<label class="field-active" title="Si esta activo, este dispositivo se consulta por SSH. Si esta inactivo, se muestra deshabilitado y no se escanea.">Activo
<input data-field="active" type="checkbox" ${device.active ? "checked" : ""}>
</label>
<label title="Funcion del equipo: Docker, Home Assistant, MQTT, Nginx, Gitea, etc.">Rol
<input data-field="role" value="${device.role || ""}">
</label>
<label title="Puerto SSH. Normalmente 22; en Home Assistant con add-on puede ser 2222.">Puerto
<input data-field="port" type="number" min="1" value="${device.port || 22}">
</label>
<label title="Modelo de Raspberry usado como informacion visual.">Modelo
<select data-field="model">
${["RPi 3", "RPi 4", "RPi 5"].map((model) => `<option ${device.model === model ? "selected" : ""}>${model}</option>`).join("")}
</select>
</label>
<label class="field-location" title="Ubicacion fisica o logica del dispositivo.">Ubicacion
<input data-field="location" value="${device.location || ""}">
</label>
<button class="danger" data-remove="${index}" type="button">Eliminar</button>
<button class="danger field-delete" data-remove="${index}" type="button">Eliminar</button>
</div>
`;
}