diff options
Diffstat (limited to 'docs/prototypes')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 30 |
1 files changed, 19 insertions, 11 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 95b3719..a31f578 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -1154,16 +1154,23 @@ function gvCopy(btn){ Clicking a row jumps to the next card in that state (cycles), so a count that disagrees with a visual scan can be audited card by card. */ const VJUMP={green:0,amber:0,off:0}; +/* shared tally-row markup for the index panels (validation + policy): the same + dot/label/count row was written out per bucket in both tallies. attr names the + grouping attribute (data-v or data-g); dot is the .vdot state or '' for none. */ +function tallyRow(attr,key,dot,label,n){ + return `<div class="vrow" ${attr}="${key}"><span class="vdot"${dot?` data-v="${dot}"`:''}></span>${label}<span class="vn">${n}</span></div>`; +} +function tallyTotal(n){return `<div class="vrow vtot">total<span class="vn">${n}</span></div>`;} function updateVTally(){ const el=$('vtally'); if(!el)return; const lamps=[...document.querySelectorAll('.vlamp')]; const n={off:0,amber:0,green:0}; lamps.forEach(l=>{n[l.dataset.v]=(n[l.dataset.v]||0)+1;}); el.innerHTML= - `<div class="vrow" data-v="green"><span class="vdot" data-v="green"></span>done<span class="vn">${n.green}</span></div>`+ - `<div class="vrow" data-v="amber"><span class="vdot" data-v="amber"></span>in progress<span class="vn">${n.amber}</span></div>`+ - `<div class="vrow" data-v="off"><span class="vdot"></span>not done<span class="vn">${n.off}</span></div>`+ - `<div class="vrow vtot">total<span class="vn">${lamps.length}</span></div>`+ + tallyRow('data-v','green','green','done',n.green)+ + tallyRow('data-v','amber','amber','in progress',n.amber)+ + tallyRow('data-v','off','','not done',n.off)+ + tallyTotal(lamps.length)+ `<button class="vcopy" type="button">copy for source</button>`; el.querySelectorAll('.vrow[data-v]').forEach(row=>row.addEventListener('click',()=>{ VJUMP[row.dataset.v]=0; auditNext(row.dataset.v); @@ -1213,8 +1220,9 @@ function cardPolicy(html){ function card(host, no, name, html, note){ const isBuild=typeof html==='function'; const P=cardPolicy(html), kind=P&&P.kind; - const free=kind&&GW.POLICIES[kind]&&GW.POLICIES[kind].free; - const polTip=kind?(GW.POLICIES[kind].gist||''):'policy not yet classified'; + const meta=kind&&GW.POLICIES[kind]; + const free=meta&&meta.free; + const polTip=meta?(meta.gist||''):'policy not yet classified'; const c=document.createElement('div'); c.className='card'; c.id='card-'+no; c.dataset.cpol=kind||'none'; c.innerHTML=`<div class="wname"><span class="no">${no}</span>${name}`+ @@ -1232,7 +1240,7 @@ function card(host, no, name, html, note){ if(inf){const d=document.createElement('details'); d.className='winfo'; let rows=''; if(P){ - rows+=`<div class="ik">policy</div><div class="iv"><b>${kind}</b> — ${GW.POLICIES[kind].gist}</div>`; + rows+=`<div class="ik">policy</div><div class="iv"><b>${kind}</b> — ${meta.gist}</div>`; rows+=`<div class="ik">why</div><div class="iv">${P.why}</div>`; rows+=`<div class="ik">authentic</div><div class="iv">${P.authentic}</div>`; } else { @@ -1260,10 +1268,10 @@ function updatePolTally(){ const n={free:0,locked:0,none:0}; cards.forEach(c=>{n[grp(c.dataset.cpol)]++;}); el.innerHTML= - `<div class="vrow" data-g="free"><span class="vdot" data-v="green"></span>free<span class="vn">${n.free}</span></div>`+ - `<div class="vrow" data-g="locked"><span class="vdot" data-v="amber"></span>locked<span class="vn">${n.locked}</span></div>`+ - `<div class="vrow" data-g="none"><span class="vdot"></span>unclassified<span class="vn">${n.none}</span></div>`+ - `<div class="vrow vtot">total<span class="vn">${cards.length}</span></div>`; + tallyRow('data-g','free','green','free',n.free)+ + tallyRow('data-g','locked','amber','locked',n.locked)+ + tallyRow('data-g','none','','unclassified',n.none)+ + tallyTotal(cards.length); el.querySelectorAll('.vrow[data-g]').forEach(row=>row.addEventListener('click',()=>{ const g=row.dataset.g, hits=cards.filter(c=>grp(c.dataset.cpol)===g); if(!hits.length)return; const i=PJUMP[g]++%hits.length; |
