SyllasGS/V-Fire-Monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enviar arquivos para "templates"

Browse Source
This commit is contained in:
SyllasGS
2026-03-13 22:34:56 +00:00
parent 6dc3a9d9f2
commit f35cb8db48
2 changed files with 191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+169
View File
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Notifier Master - Voltec</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #0b0b0b; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; }
.header-panel { background: #151515; padding: 20px; border-bottom: 2px solid #222; margin-bottom: 30px; }
.node-group { background: #111; border: 1px solid #222; border-radius: 15px; padding: 20px; margin-bottom: 30px; }
.node-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 10px; }
.node-title { border-left: 4px solid #d9534f; padding-left: 15px; color: #fff; font-weight: bold; margin: 0; }
.node-status-badge { font-size: 0.7em; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; font-weight: bold; }
.card-sensor { background: #1a1a1a; border-radius: 12px; margin-bottom: 15px; padding: 15px; border-left: 5px solid #333; position: relative; }
.badge-status { font-size: 0.75em; padding: 4px 10px; border-radius: 10px; font-weight: bold; }
.edit-btn { position: absolute; top: 8px; right: 8px; cursor: pointer; opacity: 0.3; }
.edit-btn:hover { opacity: 1; }
.node-row { background: #1a1a1a; padding: 15px; border-radius: 10px; margin-bottom: 10px; border: 1px solid #333; }
.loading-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); display:none; z-index:9999; justify-content:center; align-items:center; flex-direction:column; }
</style>
</head>
<body>
<div id="loader" class="loading-overlay">
<div class="spinner-border text-danger"></div>
<h5 class="mt-3 text-white">Varrendo central (1-600)...</h5>
</div>
<div class="header-panel shadow-sm">
<div class="container d-flex justify-content-between align-items-center">
<h2 class="mb-0 text-danger fw-bold">🔥 Notifier Voltec</h2>
<div class="btn-group">
<button class="btn btn-dark btn-sm" onclick="abrirModalNodes()">⚙️ Config</button>
<a href="/logout" class="btn btn-outline-danger btn-sm">Sair</a>
</div>
</div>
</div>
<div class="container">
{% if not licenciado %}
<div class="row justify-content-center mt-5">
<div class="col-md-6 bg-dark p-5 rounded border border-danger text-center shadow-lg">
<h2 class="text-danger">🔒 Sistema Bloqueado</h2>
<p class="text-muted">ID: <code class="bg-black p-2 d-block my-2">{{ hwid }}</code></p>
<textarea id="serial-in" class="form-control bg-black text-white mb-3" rows="3" placeholder="Serial"></textarea>
<button class="btn btn-danger w-100" onclick="ativar()">ATIVAR</button>
</div>
</div>
{% else %}
<div class="d-flex justify-content-between align-items-center mb-4 p-2 bg-dark rounded border border-secondary" style="gap: 15px; background-color: #151515 !important;">
<div class="flex-shrink-0">
<span class="badge {% if dias_restantes < 15 %}bg-danger text-white{% else %}bg-secondary text-white{% endif %} p-2 shadow-sm">
⏳ {{ dias_restantes }} dias restantes
</span>
</div>
<div class="flex-grow-1 text-end text-truncate" style="max-width: 400px;">
<span class="text-white fw-bold small" title="{{ lic_msg }}" style="letter-spacing: 0.5px; opacity: 0.9;">
{{ lic_msg }}
</span>
</div>
</div>
<div id="main-container"></div>
{% endif %}
</div>
<div class="modal fade" id="modalNodes" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark border-secondary">
<div class="modal-header border-secondary"><h5 class="modal-title">Config</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-6"><label>Zabbix Server</label><input type="text" id="zab-server" class="form-control bg-black text-white border-secondary" value="{{config.zabbix_server}}"></div>
<div class="col-md-6"><label>Hostname Zabbix</label><input type="text" id="zab-host" class="form-control bg-black text-white border-secondary" value="{{config.hostname_zabbix}}"></div>
</div>
<div class="d-flex justify-content-between mb-2"><h6>Nodes</h6><button class="btn btn-success btn-sm" onclick="addNodeRow()">+ Central</button></div>
<div id="nodes-list"></div>
</div>
<div class="modal-footer border-secondary"><button class="btn btn-danger w-100" onclick="salvarTudo()">Salvar e Reiniciar</button></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const modalNodes = new bootstrap.Modal(document.getElementById('modalNodes'));
let nodesAtuais = {{ config.nodes | tojson }};
async function ativar() {
const serial = document.getElementById('serial-in').value.trim();
const res = await fetch('/api/license', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({serial}) });
if(res.ok) { alert("Sucesso!"); location.reload(); } else { alert("Erro!"); }
}
function abrirModalNodes() {
const list = document.getElementById('nodes-list');
list.innerHTML = '';
nodesAtuais.forEach((node, idx) => {
const div = document.createElement('div');
div.className = 'node-row';
div.innerHTML = `
<div class="row g-2 align-items-end">
<div class="col-md-3"><input type="text" class="form-control form-control-sm n-nome" value="${node.nome}"></div>
<div class="col-md-4"><input type="text" class="form-control form-control-sm n-ip" value="${node.ip}"></div>
<div class="col-md-2"><input type="number" class="form-control form-control-sm n-unit" value="${node.unit}"></div>
<div class="col-md-3 d-flex gap-1"><button class="btn btn-warning btn-sm flex-grow-1" onclick="scanIndividual(${idx})">Scan</button><button class="btn btn-danger btn-sm" onclick="this.closest('.node-row').remove()">❌</button></div>
</div>`;
list.appendChild(div);
});
modalNodes.show();
}
function addNodeRow() {
const div = document.createElement('div');
div.className = 'node-row';
div.innerHTML = `<div class="row g-2 align-items-end"><div class="col-md-3"><input type="text" class="form-control form-control-sm n-nome" placeholder="Nome"></div><div class="col-md-4"><input type="text" class="form-control form-control-sm n-ip" placeholder="IP"></div><div class="col-md-2"><input type="number" class="form-control form-control-sm n-unit" value="3"></div><div class="col-md-3"><button class="btn btn-danger btn-sm w-100" onclick="this.closest('.node-row').remove()">❌</button></div></div>`;
document.getElementById('nodes-list').appendChild(div);
}
async function salvarTudo() {
const nodes = [];
document.querySelectorAll('.node-row').forEach(r => {
const n = r.querySelector('.n-nome').value;
const i = r.querySelector('.n-ip').value;
const u = r.querySelector('.n-unit').value;
if(n && i) nodes.push({ nome: n, ip: i, unit: parseInt(u) });
});
const res = await fetch('/api/nodes', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ zabbix_server: document.getElementById('zab-server').value, hostname_zabbix: document.getElementById('zab-host').value, nodes: nodes }) });
if(res.ok) location.reload();
}
async function scanIndividual(idx) {
const rows = document.querySelectorAll('.node-row');
const node = { nome: rows[idx].querySelector('.n-nome').value, ip: rows[idx].querySelector('.n-ip').value, unit: parseInt(rows[idx].querySelector('.n-unit').value) };
modalNodes.hide();
document.getElementById('loader').style.display = 'flex';
await fetch('/api/rescan_node', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(node) });
location.reload();
}
async function renomear(key, atual) {
const novo = prompt("Novo nome:", atual);
if(novo && novo !== atual) { await fetch('/api/rename', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({addr: key, label: novo}) }); atualizar(); }
}
async function atualizar() {
try {
const res = await fetch('/api/data');
const data = await res.json();
const main = document.getElementById('main-container');
if(!main) return;
const nodesMap = {};
data.sensores.forEach(s => { if(!nodesMap[s.node]) nodesMap[s.node] = []; nodesMap[s.node].push(s); });
main.innerHTML = '';
for(const n in nodesMap) {
const st = data.nodes_status[n] || "Offline";
let h = `<div class="node-group"><div class="node-header"><h4 class="node-title">📍 ${n}</h4><span class="node-status-badge ${st==='Online'?'bg-success':'bg-danger'}">${st}</span></div><div class="row">`;
nodesMap[n].forEach(s => {
h += `<div class="col-md-3"><div class="card-sensor" style="border-left-color: ${s.color}"><span class="edit-btn" onclick="renomear('${s.key}', '${s.label}')">✏️</span><div class="fw-bold text-white small">${s.label}</div><div class="mt-2"><span class="badge-status" style="background: ${s.color}22; color: ${s.color}; border: 1px solid ${s.color}">${s.status_text}</span></div><div class="time-upd text-end">⏱ ${s.last}</div></div></div>`;
});
main.innerHTML += h + `</div></div>`;
}
} catch(e){}
}
setInterval(atualizar, 3000); atualizar();
</script>
</body>
</html>
templates/login.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Login - Notifier</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #0f0f0f; color: white; display: flex; align-items: center; height: 100vh; justify-content: center; }
.login-card { background: #1a1a1a; padding: 30px; border-radius: 15px; border: 1px solid #333; width: 320px; }
</style>
</head>
<body>
<div class="login-card shadow">
<h4 class="text-center text-danger mb-4">Acesso Notifier</h4>
<form method="POST">
<div class="mb-3"><label>Usuário</label><input type="text" name="username" class="form-control bg-dark text-white border-secondary" required></div>
<div class="mb-3"><label>Senha</label><input type="password" name="password" class="form-control bg-dark text-white border-secondary" required></div>
<button type="submit" class="btn btn-danger w-100">Entrar</button>
{% with messages = get_flashed_messages() %}{% if messages %}<div class="text-warning mt-2 small text-center">{{ messages[0] }}</div>{% endif %}{% endwith %}
</form>
</div>
</body>
</html>