jessikitty/ha-parental-controls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: use OPNsense DHCP lease sensor for discovery/status, fix save error handling, add HA+DHCP status indicators, cleaner UI

Browse Source
This commit is contained in:
jessikitty
2026-05-16 15:13:24 +10:00
parent 7c258e731e
commit 4ecdda5322
1 changed files with 219 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/parental_controls.html
+219 -185
View File
@@ -5,179 +5,182 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parental Controls</title> <title>Parental Controls</title>
<style> <style>
:root{--bg:#0d1117;--surface:#161b24;--surface2:#1e2535;--surface3:#252d3d;--border:#2a3347;--text:#dde3f0;--text-muted:#6b7a99;--accent:#6b8bef;--accent-h:#7e9cf5;--success:#3ecf8e;--danger:#f56565;--warning:#f6ad55;--r:14px;--r-sm:8px;--shadow:0 8px 32px rgba(0,0,0,.55);--tr:.18s ease} :root{--bg:#0d1117;--sur:#161b24;--sur2:#1e2535;--sur3:#252d3d;--bdr:#2a3347;--txt:#dde3f0;--muted:#6b7a99;--acc:#6b8bef;--ach:#7e9cf5;--ok:#3ecf8e;--ng:#f56565;--warn:#f6ad55;--r:14px;--rs:8px;--sh:0 8px 32px rgba(0,0,0,.55);--tr:.18s ease}
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px} html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--txt);font-size:15px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
#setup-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px} #setup{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:36px;width:min(440px,100%);box-shadow:var(--shadow)} .sc{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:36px;width:min(440px,100%);box-shadow:var(--sh)}
.setup-logo{font-size:2.8rem;margin-bottom:12px;display:block} .sc-logo{font-size:2.8rem;display:block;margin-bottom:12px}
.setup-card h1{font-size:1.5rem;font-weight:700;margin-bottom:6px;letter-spacing:-.02em} .sc h1{font-size:1.5rem;font-weight:700;margin-bottom:6px;letter-spacing:-.02em}
.setup-card p{color:var(--text-muted);font-size:.875rem;line-height:1.6;margin-bottom:24px} .sc p{color:var(--muted);font-size:.875rem;line-height:1.6;margin-bottom:22px}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100} #app{display:none;height:100vh;flex-direction:column}#app.on{display:flex}
.h-left{display:flex;align-items:center;gap:10px}.h-left h1{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}.logo-icon{font-size:1.4rem}.h-right{display:flex;align-items:center;gap:8px} header{background:var(--sur);border-bottom:1px solid var(--bdr);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:10px}
.badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:20px} .hl{display:flex;align-items:center;gap:10px;min-width:0}.hl h1{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.logo{font-size:1.35rem}.hr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.badge.connected{background:rgba(62,207,142,.12);color:var(--success);border:1px solid rgba(62,207,142,.3)} main{flex:1;overflow-y:auto;padding:20px}
.badge.connecting{background:rgba(246,173,85,.12);color:var(--warning);border:1px solid rgba(246,173,85,.3)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;align-items:start}
.badge.disconnected{background:rgba(245,101,101,.12);color:var(--danger);border:1px solid rgba(245,101,101,.3)} .status-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.btn{padding:7px 16px;border-radius:var(--r-sm);border:none;cursor:pointer;font-size:.85rem;font-weight:600;transition:all var(--tr);white-space:nowrap;line-height:1.4} .sdot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px)} .sdot.ok{background:var(--ok);box-shadow:0 0 4px var(--ok)}.sdot.err{background:var(--ng)}.sdot.conn{background:var(--warn)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{background:var(--surface2);color:var(--text)} .btn{padding:7px 14px;border-radius:var(--rs);border:none;cursor:pointer;font-size:.83rem;font-weight:600;transition:all var(--tr);white-space:nowrap;line-height:1.4}
.btn-sm{padding:5px 12px;font-size:.78rem}.btn-full{width:100%;margin-top:6px;padding:10px} .btn-p{background:var(--acc);color:#fff}.btn-p:hover{background:var(--ach);transform:translateY(-1px)}
.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--r-sm);width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all var(--tr)}.icon-btn:hover{background:var(--surface2);color:var(--text)} .btn-g{background:transparent;color:var(--muted);border:1px solid var(--bdr)}.btn-g:hover{background:var(--sur2);color:var(--txt)}
.tog-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none} .btn-sm{padding:4px 10px;font-size:.78rem}.btn-full{width:100%;margin-top:6px;padding:10px}
.tog{position:relative;width:42px;height:23px;flex-shrink:0}.tog input{opacity:0;width:0;height:0;position:absolute} .ibtn{background:transparent;border:1px solid var(--bdr);color:var(--muted);border-radius:var(--rs);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all var(--tr)}.ibtn:hover{background:var(--sur2);color:var(--txt)}
.tog-track{position:absolute;inset:0;border-radius:12px;background:var(--border);transition:background var(--tr)} .tw{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.tog-thumb{position:absolute;width:17px;height:17px;top:3px;left:3px;background:var(--text-muted);border-radius:50%;transition:transform var(--tr),background var(--tr)} .tog{position:relative;width:40px;height:22px;flex-shrink:0}.tog input{opacity:0;width:0;height:0;position:absolute}
.tog input:checked~.tog-track{background:var(--danger)}.tog input:checked~.tog-thumb{transform:translateX(19px);background:#fff} .tt{position:absolute;inset:0;border-radius:11px;background:var(--bdr);transition:background var(--tr)}
.tog.grn input:checked~.tog-track{background:var(--success)}.tog.sm{width:34px;height:19px}.tog.sm .tog-thumb{width:13px;height:13px}.tog.sm input:checked~.tog-thumb{transform:translateX(15px)} .th{position:absolute;width:16px;height:16px;top:3px;left:3px;background:var(--muted);border-radius:50%;transition:transform var(--tr),background var(--tr)}
#app{display:none;height:100vh;flex-direction:column}#app.visible{display:flex}main{flex:1;overflow-y:auto;padding:24px} .tog input:checked~.tt{background:var(--ng)}.tog input:checked~.th{transform:translateX(18px);background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;align-items:start} .tog.grn input:checked~.tt{background:var(--ok)}
.user-card{background:var(--surface);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;transition:box-shadow var(--tr),border-color var(--tr)}.user-card.blocked{border-color:rgba(245,101,101,.4)}.user-card:hover{box-shadow:var(--shadow)} .tog.sm{width:32px;height:18px}.tog.sm .th{width:12px;height:12px}.tog.sm input:checked~.th{transform:translateX(14px)}
.card-head{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--surface2)} .card{background:var(--sur);border-radius:var(--r);border:1px solid var(--bdr);overflow:hidden;transition:box-shadow var(--tr),border-color var(--tr)}
.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.user-name-el{flex:1;font-weight:700;font-size:1rem;letter-spacing:-.01em} .card.blocked{border-color:rgba(245,101,101,.4)}.card:hover{box-shadow:var(--sh)}
.status-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.status-lbl.blocked{color:var(--danger)} .ch{padding:13px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bdr);background:var(--sur2)}
.del-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:4px;transition:all var(--tr);line-height:1}.del-btn:hover{color:var(--danger);background:rgba(245,101,101,.1)} .cdot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.card-body{padding:16px 18px} .cname{flex:1;font-weight:700;font-size:.95rem;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center} .slbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);flex-shrink:0}.slbl.blocked{color:var(--ng)}
.dev-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px} .delbtn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.95rem;padding:2px 5px;border-radius:4px;transition:all var(--tr);line-height:1;flex-shrink:0}.delbtn:hover{color:var(--ng);background:rgba(245,101,101,.1)}
.dev-item{background:var(--surface2);border-radius:var(--r-sm);padding:9px 12px;display:flex;align-items:center;gap:9px;border:1px solid transparent;transition:border-color var(--tr)}.dev-item.blocked{border-color:rgba(245,101,101,.3)} .cb{padding:14px 16px}
.online-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}.online-dot.on{background:var(--success);box-shadow:0 0 5px var(--success)} .stitle{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.dev-info{flex:1;min-width:0}.dev-name{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .devlist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dev-sub{font-size:.7rem;color:var(--text-muted);font-family:monospace;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ditem{background:var(--sur2);border-radius:var(--rs);padding:8px 11px;display:flex;align-items:center;gap:8px;border:1px solid transparent;transition:border-color var(--tr)}.ditem.blocked{border-color:rgba(245,101,101,.3)}
.dev-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}.no-dev{color:var(--text-muted);font-size:.85rem;text-align:center;padding:10px 0} .odot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted)}.odot.on{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.sched-section{border-top:1px solid var(--border);padding-top:14px;margin-top:14px} .dinfo{flex:1;min-width:0}.dname{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-bottom:0} .dsub{font-size:.69rem;color:var(--muted);font-family:monospace;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)} .dacts{display:flex;align-items:center;gap:5px;flex-shrink:0}.nodev{color:var(--muted);font-size:.83rem;text-align:center;padding:10px 0}
.sched-chev{color:var(--text-muted);transition:transform var(--tr);font-size:.7rem;line-height:1}.sched-chev.open{transform:rotate(180deg)} .sched{border-top:1px solid var(--bdr);padding-top:13px;margin-top:13px}
.sched-body{display:none;margin-top:12px}.sched-body.open{display:block} .shed-hd{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.sched-en-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .shed-ttl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sched-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sched-row label{font-size:.78rem;color:var(--text-muted);width:68px;flex-shrink:0} .shed-chev{color:var(--muted);transition:transform var(--tr);font-size:.68rem;line-height:1}.shed-chev.open{transform:rotate(180deg)}
.time-in{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:5px 8px;font-size:.82rem;width:88px;transition:border-color var(--tr)}.time-in:focus{outline:none;border-color:var(--accent)} .shed-body{display:none;margin-top:11px}.shed-body.open{display:block}
.time-sep{color:var(--text-muted);font-size:.78rem}.sched-hint{font-size:.72rem;color:var(--text-muted);margin-top:4px;line-height:1.4} .shed-en{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.add-user-tile{background:var(--surface);border-radius:var(--r);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;min-height:200px;cursor:pointer;transition:all var(--tr)}.add-user-tile:hover{border-color:var(--accent);background:rgba(107,139,239,.05)} .shed-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}.shed-row label{font-size:.76rem;color:var(--muted);width:65px;flex-shrink:0}
.add-user-tile-inner{text-align:center;color:var(--text-muted)}.add-user-tile-inner .plus{font-size:2rem;margin-bottom:6px;line-height:1}.add-user-tile-inner p{font-size:.85rem} .tin{background:var(--sur3);border:1px solid var(--bdr);color:var(--txt);border-radius:var(--rs);padding:4px 7px;font-size:.8rem;width:84px;transition:border-color var(--tr)}.tin:focus{outline:none;border-color:var(--acc)}
.empty{text-align:center;padding:64px 20px;grid-column:1/-1;color:var(--text-muted)}.empty .big{font-size:3rem;margin-bottom:14px}.empty h2{font-size:1.1rem;color:var(--text);margin-bottom:6px}.empty p{font-size:.875rem} .tsep{color:var(--muted);font-size:.76rem}.shed-hint{font-size:.7rem;color:var(--muted);margin-top:3px;line-height:1.4}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--tr)}.overlay.open{opacity:1;pointer-events:all} .addtile{background:var(--sur);border-radius:var(--r);border:2px dashed var(--bdr);display:flex;align-items:center;justify-content:center;min-height:180px;cursor:pointer;transition:all var(--tr)}.addtile:hover{border-color:var(--acc);background:rgba(107,139,239,.05)}
.modal{background:var(--surface);border-radius:var(--r);border:1px solid var(--border);padding:26px;width:min(460px,100%);box-shadow:var(--shadow);transform:translateY(16px);transition:transform var(--tr)}.overlay.open .modal{transform:translateY(0)} .addtile-in{text-align:center;color:var(--muted)}.addtile-in .plus{font-size:1.8rem;margin-bottom:5px;line-height:1}.addtile-in p{font-size:.83rem}
.modal h2{font-size:1.1rem;font-weight:700;margin-bottom:18px;letter-spacing:-.01em}.fg{margin-bottom:14px} .empty{text-align:center;padding:56px 20px;grid-column:1/-1;color:var(--muted)}.empty .big{font-size:2.8rem;margin-bottom:12px}.empty h2{font-size:1.05rem;color:var(--txt);margin-bottom:5px}.empty p{font-size:.85rem}
.fg label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:5px} .ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--tr)}.ov.open{opacity:1;pointer-events:all}
.fi{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:9px 12px;font-size:.875rem;transition:border-color var(--tr)}.fi:focus{outline:none;border-color:var(--accent)} .modal{background:var(--sur);border-radius:var(--r);border:1px solid var(--bdr);padding:24px;width:min(460px,100%);box-shadow:var(--sh);transform:translateY(14px);transition:transform var(--tr)}.ov.open .modal{transform:translateY(0)}
.modal-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:20px} .modal h2{font-size:1.05rem;font-weight:700;margin-bottom:16px;letter-spacing:-.01em}
.col-row{display:flex;gap:8px;flex-wrap:wrap}.col-opt{width:26px;height:26px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all var(--tr)}.col-opt.sel{border-color:#fff;transform:scale(1.18)} .fg{margin-bottom:12px}.fg label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.disc-list{max-height:210px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:6px;background:var(--surface2)} .fi{width:100%;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt);border-radius:var(--rs);padding:8px 11px;font-size:.875rem;transition:border-color var(--tr)}.fi:focus{outline:none;border-color:var(--acc)}
.disc-item{padding:9px 12px;cursor:pointer;transition:background var(--tr);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border)}.disc-item:last-child{border-bottom:none}.disc-item:hover{background:var(--surface3)}.disc-item.sel{background:rgba(107,139,239,.18)} .macts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.disc-name{font-size:.875rem;font-weight:600}.disc-sub{font-size:.72rem;color:var(--text-muted);font-family:monospace;margin-top:1px} .col-row{display:flex;gap:7px;flex-wrap:wrap}.copt{width:24px;height:24px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all var(--tr)}.copt.sel{border-color:#fff;transform:scale(1.18)}
#toasts{position:fixed;bottom:22px;right:22px;z-index:400;display:flex;flex-direction:column;gap:7px;pointer-events:none} .dlist{max-height:200px;overflow-y:auto;border:1px solid var(--bdr);border-radius:var(--rs);margin-top:5px;background:var(--sur2)}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 16px;font-size:.85rem;font-weight:500;box-shadow:var(--shadow);max-width:300px;transition:opacity .3s;border-left:3px solid var(--border)} .dlist-item{padding:8px 11px;cursor:pointer;transition:background var(--tr);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bdr)}.dlist-item:last-child{border-bottom:none}.dlist-item:hover{background:var(--sur3)}.dlist-item.sel{background:rgba(107,139,239,.18)}
.toast.s{border-left-color:var(--success)}.toast.e{border-left-color:var(--danger)}.toast.w{border-left-color:var(--warning)} .dl-name{font-size:.85rem;font-weight:600}.dl-sub{font-size:.7rem;color:var(--muted);font-family:monospace;margin-top:1px}
@keyframes ti{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}.toast{animation:ti .25s ease} #toasts{position:fixed;bottom:20px;right:20px;z-index:400;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rs);padding:10px 14px;font-size:.83rem;font-weight:500;box-shadow:var(--sh);max-width:300px;transition:opacity .3s;border-left:3px solid var(--bdr)}
.toast.s{border-left-color:var(--ok)}.toast.e{border-left-color:var(--ng)}.toast.w{border-left-color:var(--warn)}
@keyframes ti{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}.toast{animation:ti .22s ease}
.ibox{background:rgba(107,139,239,.1);border:1px solid rgba(107,139,239,.3);border-radius:var(--rs);padding:10px 13px;font-size:.82rem;color:var(--muted);margin-bottom:12px;line-height:1.5}.ibox strong{color:var(--txt)}
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.5)} input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.5)}
@media(max-width:600px){header{padding:12px 16px}main{padding:14px}.grid{grid-template-columns:1fr}} @media(max-width:580px){header{padding:10px 14px}main{padding:14px}.grid{grid-template-columns:1fr}}
</style> </style>
</head> </head>
<body> <body>
<div id="setup-screen"> <div id="setup">
<div class="setup-card"> <div class="sc">
<span class="setup-logo">🛡️</span> <span class="sc-logo">🛡️</span>
<h1>Parental Controls</h1> <h1>Parental Controls</h1>
<p>Connect to your Home Assistant instance. You'll need a <strong>Long-Lived Access Token</strong> from your HA profile page (Profile → Security → Long-Lived Access Tokens).</p> <p>Enter your Home Assistant URL and a Long-Lived Access Token (HA Profile → Security → Long-Lived Access Tokens).</p>
<div class="fg"><label>Home Assistant URL</label><input id="s-url" class="fi" type="text" placeholder="https://ha.example.com" autocomplete="off"/></div> <div class="fg"><label>Home Assistant URL</label><input id="s-url" class="fi" type="text" placeholder="https://ha.example.com" autocomplete="off"/></div>
<div class="fg"><label>Long-Lived Access Token</label><input id="s-tok" class="fi" type="password" placeholder="eyJ..." autocomplete="off"/></div> <div class="fg"><label>Long-Lived Access Token</label><input id="s-tok" class="fi" type="password" placeholder="eyJ..." autocomplete="off"/></div>
<button class="btn btn-primary btn-full" onclick="doSetup()">Connect →</button> <button class="btn btn-p btn-full" onclick="doSetup()">Connect →</button>
</div> </div>
</div> </div>
<div id="app"> <div id="app">
<header> <header>
<div class="h-left"><span class="logo-icon">🛡️</span><h1>Parental Controls</h1></div> <div class="hl"><span class="logo">🛡️</span><h1>Parental Controls</h1></div>
<div class="h-right"> <div class="hr">
<span id="conn-badge" class="badge connecting">Connecting</span> <div class="status-row">
<button class="icon-btn" onclick="openModal('settings-modal')" title="Settings">⚙</button> <span class="sdot" id="ha-dot"></span>
<button class="btn btn-primary" onclick="openModal('add-user-modal')">＋ Add User</button> <span id="ha-lbl" style="font-size:.74rem;color:var(--muted)">HA</span>
<span class="sdot" id="dhcp-dot" style="margin-left:4px"></span>
<span id="dhcp-lbl" style="font-size:.74rem;color:var(--muted)">DHCP</span>
</div>
<button class="ibtn" onclick="openModal('settings-modal')" title="Settings">⚙</button>
<button class="btn btn-p" onclick="openModal('add-user-modal')">＋ Add User</button>
</div> </div>
</header> </header>
<main><div id="grid" class="grid"></div></main> <main><div id="grid" class="grid"></div></main>
</div> </div>
<div id="toasts"></div> <div id="toasts"></div>
<div id="add-user-modal" class="overlay" onclick="overlayClick(event,'add-user-modal')"> <div id="add-user-modal" class="ov" onclick="ovc(event,'add-user-modal')">
<div class="modal"><h2>Add User</h2> <div class="modal"><h2>Add User</h2>
<div class="fg"><label>Name</label><input id="u-name" class="fi" type="text" placeholder="e.g. Alex"/></div> <div class="fg"><label>Name</label><input id="u-name" class="fi" type="text" placeholder="e.g. William"/></div>
<div class="fg"><label>Colour</label><div class="col-row" id="col-picker"></div></div> <div class="fg"><label>Colour</label><div class="col-row" id="col-picker"></div></div>
<div class="modal-acts"><button class="btn btn-ghost" onclick="closeModal('add-user-modal')">Cancel</button><button class="btn btn-primary" onclick="createUser()">Create User</button></div> <div class="macts"><button class="btn btn-g" onclick="closeModal('add-user-modal')">Cancel</button><button class="btn btn-p" onclick="createUser()">Create</button></div>
</div> </div>
</div> </div>
<div id="add-dev-modal" class="overlay" onclick="overlayClick(event,'add-dev-modal')"> <div id="add-dev-modal" class="ov" onclick="ovc(event,'add-dev-modal')">
<div class="modal"><h2>Add Device</h2> <div class="modal"><h2>Add Device</h2>
<div class="fg"><label>Device Name</label><input id="d-name" class="fi" type="text" placeholder="e.g. Alex's iPad"/></div> <div id="dhcp-note"></div>
<div class="fg"><label>Device Name</label><input id="d-name" class="fi" type="text" placeholder="e.g. William's Phone"/></div>
<div class="fg"><label>MAC Address</label><input id="d-mac" class="fi" type="text" placeholder="aa:bb:cc:dd:ee:ff" autocomplete="off"/></div> <div class="fg"><label>MAC Address</label><input id="d-mac" class="fi" type="text" placeholder="aa:bb:cc:dd:ee:ff" autocomplete="off"/></div>
<div class="fg"><label>Or pick a discovered device</label><div id="disc-list" class="disc-list"></div></div> <div class="fg"><label>Or pick from network</label><div id="disc-list" class="dlist"></div></div>
<div class="modal-acts"><button class="btn btn-ghost" onclick="closeModal('add-dev-modal')">Cancel</button><button class="btn btn-primary" onclick="addDevice()">Add Device</button></div> <div class="macts"><button class="btn btn-g" onclick="closeModal('add-dev-modal')">Cancel</button><button class="btn btn-p" onclick="addDevice()">Add Device</button></div>
</div> </div>
</div> </div>
<div id="settings-modal" class="overlay" onclick="overlayClick(event,'settings-modal')"> <div id="settings-modal" class="ov" onclick="ovc(event,'settings-modal')">
<div class="modal"><h2>⚙ Settings</h2> <div class="modal"><h2>⚙ Settings</h2>
<div class="fg"><label>Home Assistant URL</label><input id="set-url" class="fi" type="text"/></div> <div class="fg"><label>Home Assistant URL</label><input id="set-url" class="fi" type="text"/></div>
<div class="fg"><label>Long-Lived Access Token</label><input id="set-tok" class="fi" type="password"/></div> <div class="fg"><label>Long-Lived Access Token</label><input id="set-tok" class="fi" type="password"/></div>
<div class="modal-acts"><button class="btn btn-ghost" onclick="closeModal('settings-modal')">Cancel</button><button class="btn btn-primary" onclick="saveSettings()">Save &amp; Reconnect</button></div> <div class="ibox"><strong>Config not saving?</strong> Go to HA → Developer Tools → Services → call <code>input_text.reload</code>, then hard-refresh this page.</div>
<div class="macts"><button class="btn btn-g" onclick="closeModal('settings-modal')">Cancel</button><button class="btn btn-p" onclick="saveSettings()">Save &amp; Reconnect</button></div>
</div> </div>
</div> </div>
<script> <script>
const CFG_ENTITY='input_text.parental_control_config'; const CFG='input_text.parental_control_config';
const DHCP='sensor.opnsense_dhcp_leases';
const COLORS=['#ef5350','#ff7043','#ffa726','#66bb6a','#26c6da','#42a5f5','#7e57c2','#ec407a','#26a69a','#e6c229']; const COLORS=['#ef5350','#ff7043','#ffa726','#66bb6a','#26c6da','#42a5f5','#7e57c2','#ec407a','#26a69a','#e6c229'];
const MAC_RE=/^([0-9a-f]{2}:){5}[0-9a-f]{2}$/i; const MAC_RE=/^([0-9a-f]{2}:){5}[0-9a-f]{2}$/i;
let ws,wsId=1,pending={},retryTimer; let ws,wsId=1,pending={},retryTimer;
let states={},cfg={users:[]},prefs={url:'',token:''}; let states={},cfg={users:[]},prefs={url:'',token:''};
let devModalUserId=null,schedOpen={},renderTimer=null; let devTargetUser=null,schedOpen={},renderTimer=null;
function loadPrefs(){try{const p=localStorage.getItem('pc_prefs');if(p){prefs=JSON.parse(p);return true;}}catch(e){}return false;} function loadPrefs(){try{const p=localStorage.getItem('pc2_prefs');if(p){prefs=JSON.parse(p);return true;}}catch(e){}return false;}
function persistPrefs(){localStorage.setItem('pc_prefs',JSON.stringify(prefs));} function savePrefs(){localStorage.setItem('pc2_prefs',JSON.stringify(prefs));}
function doSetup(){ function doSetup(){
const url=document.getElementById('s-url').value.trim().replace(/\/+$/,''); const url=document.getElementById('s-url').value.trim().replace(/\/+$/,'');
const tok=document.getElementById('s-tok').value.trim(); const tok=document.getElementById('s-tok').value.trim();
if(!url||!tok){toast('Fill in both fields','e');return;} if(!url||!tok){toast('Fill in both fields','e');return;}
prefs={url,token:tok};persistPrefs(); prefs={url,token:tok};savePrefs();
document.getElementById('setup-screen').style.display='none'; document.getElementById('setup').style.display='none';
document.getElementById('app').classList.add('visible'); document.getElementById('app').classList.add('on');
connect(); connect();
} }
function saveSettings(){ function saveSettings(){
const url=document.getElementById('set-url').value.trim().replace(/\/+$/,''); const url=document.getElementById('set-url').value.trim().replace(/\/+$/,'');
const tok=document.getElementById('set-tok').value.trim(); const tok=document.getElementById('set-tok').value.trim();
if(!url||!tok){toast('Fill in both fields','e');return;} if(!url||!tok){toast('Fill in both fields','e');return;}
prefs={url,token:tok};persistPrefs(); prefs={url,token:tok};savePrefs();
closeModal('settings-modal');if(ws)ws.close();connect(); closeModal('settings-modal');if(ws)ws.close();connect();
} }
function connect(){ function connect(){
setBadge('connecting');clearTimeout(retryTimer); setHA('conn');clearTimeout(retryTimer);
const wsUrl=prefs.url.replace(/^https?/,m=>m==='https'?'wss':'ws')+'/api/websocket'; const wsUrl=prefs.url.replace(/^https?/,m=>m==='https'?'wss':'ws')+'/api/websocket';
try{ try{
ws=new WebSocket(wsUrl); ws=new WebSocket(wsUrl);
ws.onmessage=e=>dispatch(JSON.parse(e.data)); ws.onmessage=e=>dispatch(JSON.parse(e.data));
ws.onerror=()=>{}; ws.onerror=()=>{};
ws.onclose=()=>{setBadge('disconnected');retryTimer=setTimeout(connect,6000);}; ws.onclose=()=>{setHA('err');retryTimer=setTimeout(connect,6000);};
}catch(ex){setBadge('disconnected');retryTimer=setTimeout(connect,6000);} }catch(ex){setHA('err');retryTimer=setTimeout(connect,6000);}
} }
function dispatch(msg){ function dispatch(msg){
switch(msg.type){ switch(msg.type){
// Auth uses ws.send directly — HA responds with auth_ok/auth_invalid (no id field), case 'auth_required': ws.send(JSON.stringify({type:'auth',access_token:prefs.token})); break;
// so using send() would create an unresolved promise that times out after 60s
case 'auth_required':
ws.send(JSON.stringify({type:'auth',access_token:prefs.token}));
break;
case 'auth_ok': onAuth(); break; case 'auth_ok': onAuth(); break;
case 'auth_invalid': setBadge('disconnected'); toast('HA auth failed — check your token','e'); break; case 'auth_invalid': setHA('err'); toast('HA auth failed — check token','e'); break;
case 'result': case 'result':
if(pending[msg.id]){ if(pending[msg.id]){const{res,rej}=pending[msg.id];delete pending[msg.id];msg.success?res(msg):rej(new Error(msg.error?.message||'HA error'));}
const{res,rej}=pending[msg.id];delete pending[msg.id];
msg.success?res(msg):rej(new Error(msg.error?.message||'HA error'));
}
break; break;
case 'event': if(msg.event?.event_type==='state_changed')onStateChange(msg.event.data); break; case 'event': if(msg.event?.event_type==='state_changed')onStateChange(msg.event.data); break;
} }
} }
function send(msg){ function send(msg){
return new Promise((res,rej)=>{ return new Promise((res,rej)=>{
const id=wsId++;msg.id=id;pending[id]={res,rej}; const id=wsId++;msg.id=id;pending[id]={res,rej};
@@ -185,113 +188,126 @@ function send(msg){
ws.send(JSON.stringify(msg)); ws.send(JSON.stringify(msg));
}); });
} }
async function onAuth(){ async function onAuth(){
setBadge('connected'); setHA('ok');
// Use REST API for initial state load — much more reliable for large HA instances
try{ try{
const resp=await fetch(`${prefs.url}/api/states`,{headers:{Authorization:`Bearer ${prefs.token}`}}); const r=await fetch(`${prefs.url}/api/states`,{headers:{Authorization:`Bearer ${prefs.token}`}});
if(resp.ok){const all=await resp.json();all.forEach(s=>{states[s.entity_id]=s;});} if(r.ok){const all=await r.json();all.forEach(s=>{states[s.entity_id]=s;});}
}catch(e){ }catch(e){
try{const r=await send({type:'get_states'});r.result.forEach(s=>{states[s.entity_id]=s;});} try{const r=await send({type:'get_states'});r.result.forEach(s=>{states[s.entity_id]=s;});}
catch(e2){console.warn('Could not load states:',e2);} catch(e2){console.warn('states failed',e2);}
} }
try{await send({type:'subscribe_events',event_type:'state_changed'});} try{await send({type:'subscribe_events',event_type:'state_changed'});}catch(e){}
catch(e){console.warn('Could not subscribe:',e);} parseCfg(states[CFG]?.state);
parseCfg(states[CFG_ENTITY]?.state); updateDHCP();
render(); render();
} }
function onStateChange({entity_id,new_state}){ function onStateChange({entity_id,new_state}){
states[entity_id]=new_state; states[entity_id]=new_state;
if(entity_id===CFG_ENTITY){parseCfg(new_state?.state);schedRender();return;} if(entity_id===CFG){parseCfg(new_state?.state);schedRender();return;}
if(entity_id.startsWith('device_tracker.')){ if(entity_id===DHCP){updateDHCP();schedRender();return;}
if(new_state?.state==='home')handleReconnect(new_state); if(entity_id.startsWith('device_tracker.')){schedRender();}
schedRender();
}
}
async function handleReconnect(t){
const mac=normMac(t.attributes?.mac||t.attributes?.mac_address||'');
const newIp=t.attributes?.ip||t.attributes?.ip_address||'';
if(!mac||!newIp)return;
for(const user of cfg.users)for(const dev of user.devices)
if(normMac(dev.mac)===mac&&dev.blocked){dev.last_ip=newIp;await callBlock(newIp);await callApply();toast(`Re-blocked ${dev.name}(reconnected)`,'w');await saveCfg();}
} }
function parseCfg(val){ function parseCfg(val){
try{if(val&&val!=='unknown'&&val!=='unavailable'&&val.trim()[0]==='{'){cfg=JSON.parse(val);if(!cfg.users)cfg.users=[];}}catch(e){} try{if(val&&val!=='unknown'&&val!=='unavailable'&&val.trim()[0]==='{'){cfg=JSON.parse(val);if(!cfg.users)cfg.users=[];}}catch(e){}
} }
async function saveCfg(){ async function saveCfg(){
const json=JSON.stringify(cfg); const json=JSON.stringify(cfg);
if(json.length>9500)toast('Config nearing size limit','w'); try{localStorage.setItem('pc2_backup',json);}catch(e){}
try{await send({type:'call_service',domain:'input_text',service:'set_value',service_data:{entity_id:CFG_ENTITY,value:json}});} try{await send({type:'call_service',domain:'input_text',service:'set_value',service_data:{entity_id:CFG,value:json}});}
catch(e){toast('Failed to save config','e');} catch(e){toast('Save failed — try input_text.reload (see ⚙)','e');}
} }
function normMac(m){return m.toLowerCase().replace(/-/g,':');} /* ── DHCP LEASES ── */
function getLeases(){return states[DHCP]?.attributes?.rows||[];}
function updateDHCP(){
const s=states[DHCP];
const dot=document.getElementById('dhcp-dot');const lbl=document.getElementById('dhcp-lbl');
if(!dot||!lbl)return;
if(!s||s.state==='unavailable'||s.state==='unknown'){dot.className='sdot err';lbl.textContent='DHCP ✗';}
else{dot.className='sdot ok';lbl.textContent=`DHCP (${s.state})`;}
}
function getLease(mac){
const m=normMac(mac);
return getLeases().find(r=>normMac(r.mac||r.mac_address||'')===m)||null;
}
function deviceInfo(mac){ function deviceInfo(mac){
const lease=getLease(mac);
if(lease){
const ip=lease.ipaddr||lease.address||lease.ip||'';
const online=lease.online==='1'||lease.online===true||lease.state==='active'||lease.state==='online';
return{online,ip,label:lease.hostname||lease.descr||mac};
}
// fallback: GPS device trackers
const m=normMac(mac); const m=normMac(mac);
for(const[eid,s]of Object.entries(states)){ for(const[eid,s]of Object.entries(states)){
if(!eid.startsWith('device_tracker.'))continue; if(!eid.startsWith('device_tracker.'))continue;
const a=s.attributes||{}; const a=s.attributes||{};
const sm=normMac(a.mac||a.mac_address||a.macaddress||''); const sm=normMac(a.mac||a.mac_address||a.macaddress||'');
if(sm===m)return{online:s.state==='home',ip:a.ip||a.ip_address||'',label:a.friendly_name||a.hostname||eid.replace('device_tracker.',''),eid}; if(sm===m)return{online:s.state==='home',ip:a.ip||a.ip_address||'',label:a.friendly_name||a.hostname||eid.replace('device_tracker.','')};
} }
return{online:false,ip:'',label:'',eid:null}; return{online:false,ip:'',label:''};
} }
function discoveredDevices(){ function discoveredDevices(){
const assigned=new Set(cfg.users.flatMap(u=>u.devices.map(d=>normMac(d.mac)))); const assigned=new Set(cfg.users.flatMap(u=>u.devices.map(d=>normMac(d.mac))));
const out=[]; const out=[];
for(const r of getLeases()){
const mac=normMac(r.mac||r.mac_address||'');
if(!mac||assigned.has(mac))continue;
out.push({mac,name:r.hostname||r.descr||mac,ip:r.ipaddr||r.address||r.ip||'',online:r.online==='1'||r.online===true||r.state==='active'});
}
// also GPS trackers
for(const[eid,s]of Object.entries(states)){ for(const[eid,s]of Object.entries(states)){
if(!eid.startsWith('device_tracker.'))continue; if(!eid.startsWith('device_tracker.'))continue;
const a=s.attributes||{};const mac=normMac(a.mac||a.mac_address||a.macaddress||''); const a=s.attributes||{};const mac=normMac(a.mac||a.mac_address||a.macaddress||'');
if(!mac||assigned.has(mac))continue; if(mac&&!assigned.has(mac)&&!out.find(x=>x.mac===mac))
out.push({mac,eid,name:a.friendly_name||a.hostname||eid.replace('device_tracker.',''),ip:a.ip||a.ip_address||'',online:s.state==='home'}); out.push({mac,name:a.friendly_name||a.hostname||eid.replace('device_tracker.',''),ip:a.ip||a.ip_address||'',online:s.state==='home'});
} }
return out.sort((a,b)=>b.online-a.online); return out.sort((a,b)=>b.online-a.online);
} }
/* ── BLOCKING ── */
async function callBlock(ip){await send({type:'call_service',domain:'script',service:'parental_block_ip',service_data:{ip}});} async function callBlock(ip){await send({type:'call_service',domain:'script',service:'parental_block_ip',service_data:{ip}});}
async function callUnblock(ip){await send({type:'call_service',domain:'script',service:'parental_unblock_ip',service_data:{ip}});} async function callUnblock(ip){await send({type:'call_service',domain:'script',service:'parental_unblock_ip',service_data:{ip}});}
async function callApply(){try{await send({type:'call_service',domain:'script',service:'parental_apply_firewall',service_data:{}});}catch(e){}} async function callApply(){try{await send({type:'call_service',domain:'script',service:'parental_apply_firewall',service_data:{}});}catch(e){}}
function resolveIp(mac,dev){return deviceInfo(mac).ip||dev.last_ip||'';}
async function toggleUser(userId){ async function toggleUser(userId){
const user=cfg.users.find(u=>u.id===userId);if(!user)return; const user=cfg.users.find(u=>u.id===userId);if(!user)return;
const block=!user.blocked;user.blocked=block;let ok=0,fail=0; const block=!user.blocked;user.blocked=block;let ok=0,fail=0;
for(const dev of user.devices){ for(const dev of user.devices){
const info=deviceInfo(dev.mac);const ip=info.ip||dev.last_ip; const ip=resolveIp(dev.mac,dev);
if(ip){try{block?await callBlock(ip):await callUnblock(ip);dev.blocked=block;if(info.ip)dev.last_ip=info.ip;ok++;}catch(e){fail++;}} if(ip){try{block?await callBlock(ip):await callUnblock(ip);dev.blocked=block;dev.last_ip=ip;ok++;}catch(e){fail++;}}
else{dev.blocked=block;if(block)toast(`${dev.name}: no IP yet — will block when it connects`,'w');} else{dev.blocked=block;if(block)toast(`${dev.name}: no IP yet — will block when online`,'w');}
} }
await callApply();await saveCfg();render(); await callApply();await saveCfg();render();
if(fail===0)toast(`${user.name} ${block?'blocked 🔒':'unblocked ✓'}`,block?'w':'s'); toast(`${user.name} ${block?'blocked 🔒':'unblocked ✓'}`,block?'w':'s');
else toast(`${ok} ok, ${fail} failed`,'e');
} }
async function toggleDevice(userId,mac){ async function toggleDevice(userId,mac){
const user=cfg.users.find(u=>u.id===userId);const dev=user?.devices.find(d=>d.mac===mac);if(!dev)return; const user=cfg.users.find(u=>u.id===userId);const dev=user?.devices.find(d=>d.mac===mac);if(!dev)return;
const block=!dev.blocked;const info=deviceInfo(mac);const ip=info.ip||dev.last_ip; const block=!dev.blocked;const ip=resolveIp(mac,dev);
if(!ip){dev.blocked=block;await saveCfg();render();toast(block?`${dev.name}: no IP yet — will apply when online`:`${dev.name} marked unblocked`,block?'w':'s');return;} if(!ip){dev.blocked=block;await saveCfg();render();toast(block?`${dev.name}: no IP — will apply when online`:`${dev.name} unblocked`,block?'w':'s');return;}
try{ try{block?await callBlock(ip):await callUnblock(ip);dev.blocked=block;dev.last_ip=ip;await callApply();await saveCfg();render();toast(`${dev.name} ${block?'blocked 🔒':'unblocked ✓'}`,block?'w':'s');}
block?await callBlock(ip):await callUnblock(ip);dev.blocked=block;if(info.ip)dev.last_ip=info.ip; catch(e){toast(`Failed to ${block?'block':'unblock'} ${dev.name}`,'e');}
await callApply();await saveCfg();render();toast(`${dev.name} ${block?'blocked 🔒':'unblocked ✓'}`,block?'w':'s');
}catch(e){toast(`Failed to ${block?'block':'unblock'} ${dev.name}`,'e');}
} }
/* ── SCHEDULE ── */
setInterval(runSchedules,60000); setInterval(runSchedules,60000);
async function runSchedules(){ async function runSchedules(){
const now=new Date();const hhmm=pad2(now.getHours())+':'+pad2(now.getMinutes()); const now=new Date();const hhmm=pad2(now.getHours())+':'+pad2(now.getMinutes());
const weekend=now.getDay()===0||now.getDay()===6;let changed=false; const wknd=now.getDay()===0||now.getDay()===6;let changed=false;
for(const user of cfg.users){ for(const user of cfg.users){
if(!user.schedule?.enabled)continue; if(!user.schedule?.enabled)continue;
const slot=weekend?user.schedule.weekend:user.schedule.weekday; const slot=wknd?user.schedule.weekend:user.schedule.weekday;
const shouldBlock=inRange(hhmm,slot.block_time,slot.unblock_time); const sb=inRange(hhmm,slot.block_time,slot.unblock_time);
if(shouldBlock===user.blocked)continue; if(sb===user.blocked)continue;
user.blocked=shouldBlock; user.blocked=sb;
for(const dev of user.devices){ for(const dev of user.devices){
const info=deviceInfo(dev.mac);const ip=info.ip||dev.last_ip; const ip=resolveIp(dev.mac,dev);
if(ip){try{shouldBlock?await callBlock(ip):await callUnblock(ip);dev.blocked=shouldBlock;if(info.ip)dev.last_ip=info.ip;}catch(e){}} if(ip){try{sb?await callBlock(ip):await callUnblock(ip);dev.blocked=sb;dev.last_ip=ip;}catch(e){}}else{dev.blocked=sb;}
else{dev.blocked=shouldBlock;}
} }
toast(`${user.name} ${shouldBlock?'blocked by schedule 🕐':'unblocked by schedule ✓'}`,shouldBlock?'w':'s');changed=true; toast(`${user.name} ${sb?'blocked by schedule 🕐':'unblocked by schedule ✓'}`,sb?'w':'s');changed=true;
} }
if(changed){await callApply();await saveCfg();render();} if(changed){await callApply();await saveCfg();render();}
} }
@@ -304,76 +320,94 @@ async function onSchedChange(userId,field,value){
await saveCfg(); await saveCfg();
} }
/* ── USERS ── */
function uid(){return 'u'+Date.now().toString(36)+Math.random().toString(36).slice(2,6);} function uid(){return 'u'+Date.now().toString(36)+Math.random().toString(36).slice(2,6);}
function openAddUserModal(){document.getElementById('u-name').value='';buildColorPicker(COLORS[cfg.users.length%COLORS.length]);document.getElementById('add-user-modal').classList.add('open');} function openAddUserModal(){document.getElementById('u-name').value='';buildColorPicker(COLORS[cfg.users.length%COLORS.length]);document.getElementById('add-user-modal').classList.add('open');}
function createUser(){ function createUser(){
const name=document.getElementById('u-name').value.trim();if(!name){toast('Enter a name','e');return;} const name=document.getElementById('u-name').value.trim();if(!name){toast('Enter a name','e');return;}
const sel=document.querySelector('#col-picker .col-opt.sel');const color=sel?sel.dataset.c:COLORS[0]; const sel=document.querySelector('#col-picker .copt.sel');const color=sel?sel.dataset.c:COLORS[0];
cfg.users.push({id:uid(),name,color,blocked:false,devices:[],schedule:{enabled:false,weekday:{block_time:'21:00',unblock_time:'07:00'},weekend:{block_time:'22:00',unblock_time:'08:00'}}}); cfg.users.push({id:uid(),name,color,blocked:false,devices:[],schedule:{enabled:false,weekday:{block_time:'21:00',unblock_time:'07:00'},weekend:{block_time:'22:00',unblock_time:'08:00'}}});
saveCfg();render();closeModal('add-user-modal');toast(`${name} added`,'s'); saveCfg();render();closeModal('add-user-modal');toast(`${name} added`,'s');
} }
async function deleteUser(userId){ async function deleteUser(userId){
const user=cfg.users.find(u=>u.id===userId);if(!user||!confirm(`Remove ${user.name} and unblock all their devices?`))return; const user=cfg.users.find(u=>u.id===userId);if(!user||!confirm(`Remove ${user.name}?`))return;
let anyBlocked=false; for(const dev of user.devices.filter(d=>d.blocked)){const ip=resolveIp(dev.mac,dev);if(ip)try{await callUnblock(ip);}catch(e){}}
for(const dev of user.devices.filter(d=>d.blocked)){const ip=deviceInfo(dev.mac).ip||dev.last_ip;if(ip){try{await callUnblock(ip);anyBlocked=true;}catch(e){}}} if(user.devices.some(d=>d.blocked))await callApply();
if(anyBlocked)await callApply();
cfg.users=cfg.users.filter(u=>u.id!==userId);await saveCfg();render();toast(`${user.name} removed`,'s'); cfg.users=cfg.users.filter(u=>u.id!==userId);await saveCfg();render();toast(`${user.name} removed`,'s');
} }
/* ── DEVICES ── */
function openAddDeviceModal(userId){ function openAddDeviceModal(userId){
devModalUserId=userId;document.getElementById('d-name').value='';document.getElementById('d-mac').value=''; devTargetUser=userId;
document.getElementById('d-name').value='';document.getElementById('d-mac').value='';
const disc=discoveredDevices();const list=document.getElementById('disc-list'); const disc=discoveredDevices();const list=document.getElementById('disc-list');
if(!disc.length){list.innerHTML='<div style="padding:12px;text-align:center;font-size:.82rem;color:var(--text-muted)">No unassigned devices found</div>';} const hasDHCP=states[DHCP]&&states[DHCP].state!=='unavailable'&&states[DHCP].state!=='unknown';
else{list.innerHTML=disc.map(d=>`<div class="disc-item" data-mac="${d.mac}" data-name="${esc(d.name)}" onclick="pickDisc(this)"><span style="width:7px;height:7px;border-radius:50%;background:${d.online?'var(--success)':'var(--text-muted)'};flex-shrink:0"></span><div><div class="disc-name">${esc(d.name)}</div><div class="disc-sub">${d.mac}${d.ip?' · '+d.ip:''}</div></div></div>`).join('');} document.getElementById('dhcp-note').innerHTML=hasDHCP?'':
'<div class="ibox">DHCP sensor not loaded — add <code>opnsense_leases_url</code> to secrets.yaml and restart HA. You can still enter a MAC manually.</div>';
if(!disc.length){list.innerHTML=`<div style="padding:10px;text-align:center;font-size:.8rem;color:var(--muted)">${hasDHCP?'All found devices are assigned':'No DHCP data yet'}</div>`;}
else{list.innerHTML=disc.map(d=>`<div class="dlist-item" data-mac="${d.mac}" data-name="${esc(d.name)}" onclick="pickDisc(this)"><span style="width:7px;height:7px;border-radius:50%;background:${d.online?'var(--ok)':'var(--muted)'};flex-shrink:0"></span><div><div class="dl-name">${esc(d.name)}</div><div class="dl-sub">${d.mac}${d.ip?' · '+d.ip:''}</div></div></div>`).join('');}
openModal('add-dev-modal'); openModal('add-dev-modal');
} }
function pickDisc(el){document.querySelectorAll('.disc-item').forEach(i=>i.classList.remove('sel'));el.classList.add('sel');document.getElementById('d-name').value=el.dataset.name;document.getElementById('d-mac').value=el.dataset.mac;} function pickDisc(el){document.querySelectorAll('.dlist-item').forEach(i=>i.classList.remove('sel'));el.classList.add('sel');document.getElementById('d-name').value=el.dataset.name;document.getElementById('d-mac').value=el.dataset.mac;}
async function addDevice(){ async function addDevice(){
const name=document.getElementById('d-name').value.trim();const mac=document.getElementById('d-mac').value.trim().toLowerCase(); const name=document.getElementById('d-name').value.trim();const mac=document.getElementById('d-mac').value.trim().toLowerCase();
if(!name){toast('Enter a device name','e');return;}if(!MAC_RE.test(mac)){toast('Invalid MAC (format: aa:bb:cc:dd:ee:ff)','e');return;} if(!name){toast('Enter a device name','e');return;}if(!MAC_RE.test(mac)){toast('Invalid MAC (aa:bb:cc:dd:ee:ff)','e');return;}
if(cfg.users.some(u=>u.devices.some(d=>normMac(d.mac)===normMac(mac)))){toast('That MAC is already assigned','e');return;} if(cfg.users.some(u=>u.devices.some(d=>normMac(d.mac)===normMac(mac)))){toast('MAC already assigned','e');return;}
const user=cfg.users.find(u=>u.id===devModalUserId);if(!user)return; const user=cfg.users.find(u=>u.id===devTargetUser);if(!user)return;
const info=deviceInfo(mac);user.devices.push({name,mac:mac.toLowerCase(),blocked:false,last_ip:info.ip||''}); const info=deviceInfo(mac);user.devices.push({name,mac:mac.toLowerCase(),blocked:false,last_ip:info.ip||''});
await saveCfg();render();closeModal('add-dev-modal');toast(`${name} added to ${user.name}`,'s'); await saveCfg();render();closeModal('add-dev-modal');toast(`${name} added to ${user.name}`,'s');
} }
async function removeDevice(userId,mac){ async function removeDevice(userId,mac){
const user=cfg.users.find(u=>u.id===userId);const dev=user?.devices.find(d=>d.mac===mac);if(!dev)return; const user=cfg.users.find(u=>u.id===userId);const dev=user?.devices.find(d=>d.mac===mac);if(!dev)return;
if(dev.blocked){const ip=deviceInfo(mac).ip||dev.last_ip;if(ip){try{await callUnblock(ip);await callApply();}catch(e){}}} if(dev.blocked){const ip=resolveIp(mac,dev);if(ip){try{await callUnblock(ip);await callApply();}catch(e){}}}
user.devices=user.devices.filter(d=>d.mac!==mac);await saveCfg();render();toast(`${dev.name} removed`,'s'); user.devices=user.devices.filter(d=>d.mac!==mac);await saveCfg();render();toast(`${dev.name} removed`,'s');
} }
/* ── RENDER ── */
function schedRender(){clearTimeout(renderTimer);renderTimer=setTimeout(render,400);} function schedRender(){clearTimeout(renderTimer);renderTimer=setTimeout(render,400);}
function render(){ function render(){
const grid=document.getElementById('grid'); const grid=document.getElementById('grid');
if(!cfg.users.length){grid.innerHTML='<div class="empty"><div class="big">👨‍👩‍👧‍👦</div><h2>No users yet</h2><p>Add a user to start managing internet access.</p><button class="btn btn-primary" style="margin-top:14px" onclick="openModal(\'add-user-modal\')">＋ Add First User</button></div>';return;} if(!cfg.users.length){grid.innerHTML='<div class="empty"><div class="big">👨‍👩‍👧‍👦</div><h2>No users yet</h2><p>Add a family member to start managing their internet access.</p><button class="btn btn-p" style="margin-top:12px" onclick="openModal(\'add-user-modal\')">＋ Add First User</button></div>';return;}
grid.innerHTML=cfg.users.map(u=>renderUser(u)).join('')+'<div class="add-user-tile" onclick="openModal(\'add-user-modal\')"><div class="add-user-tile-inner"><div class="plus">＋</div><p>Add User</p></div></div>'; grid.innerHTML=cfg.users.map(u=>renderUser(u)).join('')+'<div class="addtile" onclick="openModal(\'add-user-modal\')"><div class="addtile-in"><div class="plus">＋</div><p>Add User</p></div></div>';
} }
function renderUser(user){ function renderUser(user){
const sched=user.schedule||{enabled:false,weekday:{block_time:'21:00',unblock_time:'07:00'},weekend:{block_time:'22:00',unblock_time:'08:00'}}; const sched=user.schedule||{enabled:false,weekday:{block_time:'21:00',unblock_time:'07:00'},weekend:{block_time:'22:00',unblock_time:'08:00'}};
const open=!!schedOpen[user.id]; const open=!!schedOpen[user.id];
const devHtml=user.devices.length?user.devices.map(d=>renderDev(user.id,d)).join(''):'<div class="no-dev">No devices assigned</div>'; const devHtml=user.devices.length?user.devices.map(d=>renderDev(user.id,d)).join(''):'<div class="nodev">No devices — click Add Device</div>';
return `<div class="user-card${user.blocked?' blocked':''}"><div class="card-head"><span class="color-dot" style="background:${user.color}"></span><span class="user-name-el">${esc(user.name)}</span><span class="status-lbl${user.blocked?' blocked':''}">${user.blocked?'Blocked':'Online'}</span><label class="tog-wrap" title="${user.blocked?'Unblock':'Block'} all"><div class="tog"><input type="checkbox" ${user.blocked?'checked':''} onchange="toggleUser('${user.id}')"><div class="tog-track"></div><div class="tog-thumb"></div></div></label><button class="del-btn" onclick="deleteUser('${user.id}')" title="Remove user">✕</button></div><div class="card-body"><div class="sec-title">Devices (${user.devices.length})</div><div class="dev-list">${devHtml}</div><button class="btn btn-ghost btn-sm" onclick="openAddDeviceModal('${user.id}')">＋ Add Device</button><div class="sched-section"><div class="sched-head" onclick="toggleSched('${user.id}')"><span class="sched-title">🕐 Schedule${sched.enabled?' (active)':''}</span><span class="sched-chev${open?' open':''}">▼</span></div><div class="sched-body${open?' open':''}"><div class="sched-en-row"><label class="tog-wrap"><div class="tog sm grn"><input type="checkbox" ${sched.enabled?'checked':''} onchange="onSchedChange('${user.id}','enabled',this.checked)"><div class="tog-track"></div><div class="tog-thumb"></div></div><span style="font-size:.78rem;color:var(--text-muted)">Enable schedule blocking</span></label></div><div class="sched-row"><label>Weekdays</label><input class="time-in" type="time" value="${sched.weekday.block_time}" onchange="onSchedChange('${user.id}','weekday.block_time',this.value)"/><span class="time-sep">→</span><input class="time-in" type="time" value="${sched.weekday.unblock_time}" onchange="onSchedChange('${user.id}','weekday.unblock_time',this.value)"/></div><div class="sched-row"><label>Weekend</label><input class="time-in" type="time" value="${sched.weekend.block_time}" onchange="onSchedChange('${user.id}','weekend.block_time',this.value)"/><span class="time-sep">→</span><input class="time-in" type="time" value="${sched.weekend.unblock_time}" onchange="onSchedChange('${user.id}','weekend.unblock_time',this.value)"/></div><p class="sched-hint">Block starts at first time, unblocks at second. Overnight ranges work (e.g. 21:00 → 07:00).</p></div></div></div></div>`; return `<div class="card${user.blocked?' blocked':''}">
<div class="ch"><span class="cdot" style="background:${user.color}"></span><span class="cname">${esc(user.name)}</span><span class="slbl${user.blocked?' blocked':''}">${user.blocked?'Blocked':'Online'}</span><label class="tw" title="${user.blocked?'Unblock':'Block'} all"><div class="tog"><input type="checkbox" ${user.blocked?'checked':''} onchange="toggleUser('${user.id}')"><div class="tt"></div><div class="th"></div></div></label><button class="delbtn" onclick="deleteUser('${user.id}')" title="Remove">✕</button></div>
<div class="cb"><div class="stitle">Devices (${user.devices.length})</div><div class="devlist">${devHtml}</div><button class="btn btn-g btn-sm" onclick="openAddDeviceModal('${user.id}')">＋ Add Device</button>
<div class="sched"><div class="shed-hd" onclick="toggleSched('${user.id}')"><span class="shed-ttl">🕐 Schedule${sched.enabled?' (active)':''}</span><span class="shed-chev${open?' open':''}">▼</span></div>
<div class="shed-body${open?' open':''}"><div class="shed-en"><label class="tw"><div class="tog sm grn"><input type="checkbox" ${sched.enabled?'checked':''} onchange="onSchedChange('${user.id}','enabled',this.checked)"><div class="tt"></div><div class="th"></div></div><span style="font-size:.76rem;color:var(--muted)">Enable schedule blocking</span></label></div>
<div class="shed-row"><label>Weekdays</label><input class="tin" type="time" value="${sched.weekday.block_time}" onchange="onSchedChange('${user.id}','weekday.block_time',this.value)"/><span class="tsep">→</span><input class="tin" type="time" value="${sched.weekday.unblock_time}" onchange="onSchedChange('${user.id}','weekday.unblock_time',this.value)"/></div>
<div class="shed-row"><label>Weekend</label><input class="tin" type="time" value="${sched.weekend.block_time}" onchange="onSchedChange('${user.id}','weekend.block_time',this.value)"/><span class="tsep">→</span><input class="tin" type="time" value="${sched.weekend.unblock_time}" onchange="onSchedChange('${user.id}','weekend.unblock_time',this.value)"/></div>
<p class="shed-hint">Blocked between first and second time. Overnight works (e.g. 21:00 → 07:00).</p></div></div></div></div>`;
} }
function renderDev(userId,dev){ function renderDev(userId,dev){
const info=deviceInfo(dev.mac);const sub=[dev.mac,info.ip||dev.last_ip].filter(Boolean).join(' · '); const info=deviceInfo(dev.mac);const ip=info.ip||dev.last_ip;const sub=[dev.mac,ip].filter(Boolean).join(' · ');
return `<div class="dev-item${dev.blocked?' blocked':''}"><span class="online-dot${info.online?' on':''}" title="${info.online?'Online':'Offline'}"></span><div class="dev-info"><div class="dev-name">${esc(dev.name)}</div><div class="dev-sub">${sub}</div></div><div class="dev-acts"><label class="tog-wrap" title="${dev.blocked?'Unblock':'Block'}"><div class="tog sm"><input type="checkbox" ${dev.blocked?'checked':''} onchange="toggleDevice('${userId}','${dev.mac}')"><div class="tog-track"></div><div class="tog-thumb"></div></div></label><button class="del-btn" onclick="removeDevice('${userId}','${dev.mac}')" title="Remove device">✕</button></div></div>`; return `<div class="ditem${dev.blocked?' blocked':''}"><span class="odot${info.online?' on':''}" title="${info.online?'Online':'Offline'}"></span><div class="dinfo"><div class="dname">${esc(dev.name)}</div><div class="dsub">${sub}</div></div><div class="dacts"><label class="tw" title="${dev.blocked?'Unblock':'Block'}"><div class="tog sm"><input type="checkbox" ${dev.blocked?'checked':''} onchange="toggleDevice('${userId}','${dev.mac}')"><div class="tt"></div><div class="th"></div></div></label><button class="delbtn" onclick="removeDevice('${userId}','${dev.mac}')" title="Remove">✕</button></div></div>`;
} }
function toggleSched(userId){schedOpen[userId]=!schedOpen[userId];render();} function toggleSched(userId){schedOpen[userId]=!schedOpen[userId];render();}
function buildColorPicker(presel){document.getElementById('col-picker').innerHTML=COLORS.map(c=>`<span class="col-opt${c===presel?' sel':''}" data-c="${c}" style="background:${c}" onclick="pickColor(this)"></span>`).join('');} function buildColorPicker(presel){document.getElementById('col-picker').innerHTML=COLORS.map(c=>`<span class="copt${c===presel?' sel':''}" data-c="${c}" style="background:${c}" onclick="pickColor(this)"></span>`).join('');}
function pickColor(el){document.querySelectorAll('.col-opt').forEach(o=>o.classList.remove('sel'));el.classList.add('sel');} function pickColor(el){document.querySelectorAll('.copt').forEach(o=>o.classList.remove('sel'));el.classList.add('sel');}
function openModal(id){if(id==='add-user-modal')openAddUserModal();else{if(id==='settings-modal'){document.getElementById('set-url').value=prefs.url;document.getElementById('set-tok').value=prefs.token;}document.getElementById(id).classList.add('open');}} function openModal(id){if(id==='add-user-modal')openAddUserModal();else{if(id==='settings-modal'){document.getElementById('set-url').value=prefs.url;document.getElementById('set-tok').value=prefs.token;}document.getElementById(id).classList.add('open');}}
function closeModal(id){document.getElementById(id).classList.remove('open');} function closeModal(id){document.getElementById(id).classList.remove('open');}
function overlayClick(e,id){if(e.target===e.currentTarget)closeModal(id);} function ovc(e,id){if(e.target===e.currentTarget)closeModal(id);}
function setHA(state){
const dot=document.getElementById('ha-dot');const lbl=document.getElementById('ha-lbl');if(!dot||!lbl)return;
dot.className='sdot'+(state==='ok'?' ok':state==='err'?' err':' conn');
lbl.textContent=state==='ok'?'HA ✓':state==='err'?'HA ✗':'HA…';
}
function toast(msg,type='s'){ function toast(msg,type='s'){
const c=document.getElementById('toasts');const el=document.createElement('div'); const c=document.getElementById('toasts');const el=document.createElement('div');
el.className=`toast ${type}`;el.textContent=msg;c.appendChild(el); el.className=`toast ${type}`;el.textContent=msg;c.appendChild(el);
setTimeout(()=>{el.style.opacity='0';setTimeout(()=>el.remove(),300);},3800); setTimeout(()=>{el.style.opacity='0';setTimeout(()=>el.remove(),300);},4000);
} }
function setBadge(state){const el=document.getElementById('conn-badge');el.className=`badge ${state}`;el.textContent=state.charAt(0).toUpperCase()+state.slice(1);} function normMac(m){return String(m||'').toLowerCase().replace(/-/g,':');}
function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');} function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function pad2(n){return String(n).padStart(2,'0');} function pad2(n){return String(n).padStart(2,'0');}
document.addEventListener('DOMContentLoaded',()=>{ document.addEventListener('DOMContentLoaded',()=>{
if(loadPrefs()){document.getElementById('setup-screen').style.display='none';document.getElementById('app').classList.add('visible');connect();} if(loadPrefs()){document.getElementById('setup').style.display='none';document.getElementById('app').classList.add('on');connect();}
else{document.getElementById('s-url').value=window.location.origin;} else{document.getElementById('s-url').value=window.location.origin;}
}); });
</script> </script>