UX-13 P2: the Installer settings view
- Settings tab: the Installer view (app/static/settings.js), drawn from
app/uilayout.py through the new app/uipage.py: search, six collapsible
groups with "n to fix / n to check / n changed" badges and an "applies
after a restart" chip, radio cards, segmented choices, sliders with units
(the peak limit in kW), entity pickers with search and the live reading,
inverter cards, solar rows, locked measured values behind "Change", and
the add-on's refusals, warnings and info beside the field they name.
- Save path: the page posts its model to the existing config/validate and
config/save; uimodel turns it into options before the shipped validator,
so nothing it refuses is saved. No route added. A value equal to the
stored one is written as stored, so a save that changed nothing writes an
identical blob. Save bar, then the restart dialog that names 0 W.
- The region choice shows its preset year; Wallonia and Brussels are listed
as having no preset yet (TARIFF-22). "Classic settings" keeps /config.
- P1 test findings: (a) "Going to 0 W" until the last accepted power request
is 0 W; (b) the trade blocks and the price line name the feed's own points
("Lowest published price"), the hour bars say "hour average"; (c) the entity
list's WARNING gives a reason on a timeout.
- test_settings.py; test_home, test_haentities, test_uilayout extended.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LyR88rXETvwhTgx6yHE39p
This commit is contained in:
Claude
@@ -135,3 +135,84 @@ dialog::backdrop{background:rgba(0,0,0,.45)}
|
||||
.chart [data-tip]{cursor:default}
|
||||
.chart [data-tip]:hover,.chart [data-tip]:focus,.chart .hot{outline:2px solid var(--ink);outline-offset:-1px}
|
||||
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
||||
/* UX-13 P2: Settings, the Installer view (mockup version 2) */
|
||||
.btn.link{border:0;background:none;color:var(--accent);padding:6px 0;min-height:0}
|
||||
.search{width:100%;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;min-height:44px;margin-bottom:10px}
|
||||
.key{font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);overflow-wrap:anywhere}
|
||||
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:999px;padding:1px 8px;background:var(--info-bg);color:var(--muted);white-space:nowrap}
|
||||
.chip.now{background:var(--ok-bg);color:var(--ok)} .chip.rs{background:var(--warn-bg);color:var(--warn)}
|
||||
.chip.bad{background:var(--bad-bg);color:var(--bad)} .chip.changed{background:var(--accent-soft);color:var(--accent)}
|
||||
details.grp{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;box-shadow:var(--shadow)}
|
||||
details.grp>summary{list-style:none;cursor:pointer;padding:14px;display:flex;gap:10px;align-items:center;min-height:56px;flex-wrap:wrap}
|
||||
details.grp>summary::-webkit-details-marker{display:none}
|
||||
details.grp>summary .grow{flex:1 1 200px}
|
||||
details.grp>summary .gdesc{display:block}
|
||||
details.grp>summary .chev{transition:transform .15s;flex:none;font-size:22px;line-height:1;width:18px;text-align:center;color:var(--muted)}
|
||||
details.grp[open]>summary .chev{transform:rotate(90deg)}
|
||||
.gchips,.gbadge{display:inline-flex;flex-wrap:wrap;gap:4px}
|
||||
details.grp .body{padding:0 14px 8px}
|
||||
details.sub{border-top:1px solid var(--line);margin-top:4px}
|
||||
details.sub>summary{cursor:pointer;padding:10px 0;color:var(--accent);font-size:14px;min-height:44px;display:flex;align-items:center}
|
||||
.subhead{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin:14px 0 0;font-weight:700}
|
||||
.f{padding:12px 0;border-top:1px solid var(--line);min-width:0}
|
||||
.part>.f:first-child,.subhead+.f{border-top:0}
|
||||
.f .lbl{font-weight:600;font-size:14px}
|
||||
.f .help{font-size:13px;color:var(--muted);margin-top:4px}
|
||||
.f .ctl{margin-top:8px;min-width:0}
|
||||
.f.inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
|
||||
.f.inline .ctl{margin-top:0;grid-row:1;grid-column:2}
|
||||
.f.inline .help,.f.inline .msgs{grid-column:1/-1}
|
||||
.f.changed>.head .lbl::after{content:" •";color:var(--accent)}
|
||||
.msg{font-size:13px;margin-top:6px;display:flex;gap:6px;align-items:flex-start;border-radius:8px;padding:6px 8px;overflow-wrap:anywhere}
|
||||
.msg .mi{font-weight:800;flex:none}
|
||||
.msg.bad{background:var(--bad-bg);color:var(--bad)} .msg.warn{background:var(--warn-bg);color:var(--warn)} .msg.info{background:var(--info-bg);color:var(--info)}
|
||||
.f.has-bad .ctl select,.f.has-bad .ctl input,.f.has-bad .ent-btn{border-color:var(--bad)}
|
||||
.switch{position:relative;width:52px;height:44px;border:0;background:none;cursor:pointer;flex:none;padding:0}
|
||||
.switch::before{content:"";position:absolute;left:2px;top:8px;width:48px;height:28px;border-radius:14px;background:var(--track);transition:background .15s}
|
||||
.switch::after{content:"";position:absolute;top:11px;left:5px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
|
||||
.switch[aria-checked="true"]::before{background:var(--accent)}
|
||||
.switch[aria-checked="true"]::after{left:25px}
|
||||
.swrap{display:inline-flex;align-items:center;gap:8px;min-height:44px}
|
||||
.swtext{font-size:13px;color:var(--muted)}
|
||||
select.sel,input.txt,input.num{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 10px;min-height:44px;max-width:100%}
|
||||
select.sel{width:100%}
|
||||
.row>select.sel{width:auto;flex:1 1 200px}
|
||||
input.num{width:110px;text-align:right;font-variant-numeric:tabular-nums}
|
||||
input.txt{width:100%}
|
||||
input:disabled{opacity:.6}
|
||||
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:100%;flex-wrap:wrap}
|
||||
.seg button{border:0;background:var(--card);padding:8px 12px;min-height:44px;cursor:pointer;border-left:1px solid var(--line)}
|
||||
.seg button:first-child{border-left:0}
|
||||
.seg button[aria-checked="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
|
||||
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;cursor:pointer;width:100%;text-align:left;background:var(--card);min-height:44px}
|
||||
.choice[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
|
||||
.choice .rad{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--faint);margin-top:2px}
|
||||
.choice[aria-checked="true"] .rad{border:5px solid var(--accent)}
|
||||
.slider{display:flex;align-items:center;gap:10px;width:100%}
|
||||
.slider input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:28px}
|
||||
.unit{color:var(--muted);font-size:13px;white-space:nowrap}
|
||||
.ent-btn{width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 10px;min-height:44px;cursor:pointer;display:flex;gap:8px;align-items:center}
|
||||
.ent-btn .grow{min-width:0}
|
||||
.ent-btn .grow>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.ent-pop{border:1px solid var(--line);border-radius:10px;margin-top:6px;background:var(--card);overflow:hidden}
|
||||
.ent-pop input[type=search]{border:0;border-bottom:1px solid var(--line);width:100%;padding:10px;background:var(--card);min-height:44px}
|
||||
.ent-note{padding:6px 10px}
|
||||
.ent-list{max-height:240px;overflow:auto}
|
||||
.ent-opt{display:flex;gap:8px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:8px 10px;cursor:pointer;min-height:44px}
|
||||
.ent-opt:hover,.ent-opt:focus{background:var(--accent-soft)}
|
||||
.ent-opt .grow{min-width:0}
|
||||
.ent-opt .grow>div{overflow-wrap:anywhere}
|
||||
.ent-opt .v{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);white-space:nowrap}
|
||||
.ent-all{display:flex;gap:6px;padding:6px 10px;align-items:center;min-height:44px}
|
||||
.elist .erow{padding:6px 0;border-bottom:1px dashed var(--line)}
|
||||
.elist>.btn{margin-top:8px}
|
||||
.inv{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin:10px 0}
|
||||
.inv>.hd{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;flex-wrap:wrap}
|
||||
.inv>.f:nth-child(2){border-top:0}
|
||||
.invs>.btn{margin:4px 0 8px}
|
||||
#savebar{position:fixed;left:0;right:0;bottom:0;z-index:15}
|
||||
#savebar .in{max-width:820px;margin:0 auto 10px;padding:10px 12px;background:var(--ink);color:var(--bg);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25);width:calc(100% - 32px)}
|
||||
#savebar .btn{min-height:44px;padding:6px 12px;background:transparent;color:var(--bg);border-color:rgba(127,127,127,.6)}
|
||||
#savebar .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
|
||||
@media (max-width:640px){#savebar{bottom:62px}}
|
||||
#s-set{padding-bottom:80px}
|
||||
|
||||
Reference in New Issue
Block a user