Accounts (flo, andi, lolo), presence, activity log, spending split
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -135,6 +135,14 @@ input[type=url],input[type=text]{width:100%;border:1px solid var(--line);backgro
|
||||
|
||||
/* photos, viewer, mobile */
|
||||
.pin::after{content:"";position:absolute;inset:-8px}
|
||||
.who{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
|
||||
.who a{color:var(--muted)}
|
||||
.who .chip{padding:2px 9px}
|
||||
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
|
||||
.sum{background:var(--soft);border-radius:8px;padding:8px 10px}
|
||||
.sum b{display:block;font-size:18px;font-family:var(--f-mono)}
|
||||
.pos{color:var(--have)}.neg{color:var(--miss)}
|
||||
.item .amt{font-family:var(--f-mono);font-weight:600;white-space:nowrap}
|
||||
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
|
||||
.pgrid.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
|
||||
.ph{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;background:var(--soft);aspect-ratio:1}
|
||||
@@ -199,6 +207,7 @@ input[type=url],input[type=text]{width:100%;border:1px solid var(--line);backgro
|
||||
<div class="tally" id="tally"></div>
|
||||
<div class="bar" id="bar"></div>
|
||||
<div style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center"><span class="savebadge" id="savebadge">Loading saved progress…</span><a class="savebadge" href="api/export">Download backup</a></div>
|
||||
<div class="who" id="who"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -251,7 +260,7 @@ function bestName(ref){
|
||||
}
|
||||
|
||||
// ---------- state ----------
|
||||
const EMPTY=()=>({parts:{}, links:{}, comments:{}, drawings:{}, photos:{}});
|
||||
const EMPTY=()=>({parts:{}, links:{}, comments:{}, drawings:{}, photos:{}, users:[], me:"", spending:[], activity:[]});
|
||||
let state = EMPTY();
|
||||
let current=GROUPS[0].key, selRef=null, filter="all", query="", zoom=1, editing=false, confirmBulk=false, online=false;
|
||||
const pid=(g,r)=>g+"__"+r;
|
||||
@@ -264,6 +273,7 @@ async function api(method,url,body,isRaw){
|
||||
let res;
|
||||
try{ res=await fetch(url,opt); }catch(_){ const er=new Error("You’re offline"); er.offline=true; throw er; }
|
||||
if(res.status===401){ location.href="/login"; throw new Error("Please sign in again"); }
|
||||
if(res.status===403){ location.href="/password"; throw new Error("Set a new password first"); }
|
||||
const data=await res.json().catch(()=>({}));
|
||||
if(!res.ok) throw new Error(data.error||("Server answered "+res.status));
|
||||
return data;
|
||||
@@ -343,6 +353,7 @@ function counts(keys){
|
||||
}
|
||||
function renderHead(){
|
||||
const c=counts();
|
||||
$("#who").innerHTML=`<span>Online:</span>${(state.users||[]).map(u=>`<span class="chip" title="${u.online?"online now":(u.last?"last seen "+when(u.last):"never signed in")}"><span class="dot" style="background:${u.online?"var(--have)":"var(--none)"}"></span>${esc(u.name)}${u.name===state.me?" (you)":""}</span>`).join("")}<span>· <a href="/password">Password</a> · <a href="/logout">Log out</a></span>`;
|
||||
$("#tally").innerHTML = ["have","miss","ord","skip","none"].map(s=>`<span class="chip s-${s}"><span class="dot"></span>${s==="none"?"Unchecked":STATUS[s]} <b class="mono">${c[s]}</b></span>`).join("");
|
||||
$("#bar").innerHTML = ["have","skip","ord","miss"].map(s=>`<i style="width:${c[s]/c.total*100}%;background:var(--${s})"></i>`).join("");
|
||||
}
|
||||
@@ -355,6 +366,8 @@ function renderTabs(){
|
||||
<span class="bar">${["have","skip","ord","miss"].map(s=>`<i style="width:${c[s]/c.total*100}%;background:var(--${s})"></i>`).join("")}</span>
|
||||
<span class="m"><span>${done}/${c.total} done</span><span>${c.miss?`<span style="color:var(--miss)">${c.miss} missing</span>`:(imageFor(G.key)?"drawing":"no drawing yet")}</span></span></button>`;
|
||||
}).join("") + `<button class="tab photos" role="tab" aria-selected="${current==="gallery"}" data-g="gallery"><span class="t">Photos</span><span class="m"><span>${Object.values(state.photos||{}).reduce((n,l)=>n+l.length,0)} photos</span><span></span></span></button>`
|
||||
+ `<button class="tab" role="tab" aria-selected="${current==="spending"}" data-g="spending"><span class="t">Spending</span><span class="m"><span>${eur((state.spending||[]).reduce((n,x)=>n+x.cents,0))}</span><span></span></span></button>`
|
||||
+ `<button class="tab" role="tab" aria-selected="${current==="activity"}" data-g="activity"><span class="t">Activity</span><span class="m"><span>who did what</span><span></span></span></button>`
|
||||
+ `<button class="tab shop" role="tab" aria-selected="${current==="shop"}" data-g="shop"><span class="t">Shopping list</span><span class="m"><span>${shopN} parts to get</span><span></span></span></button>`;
|
||||
}
|
||||
function visibleRefs(G){
|
||||
@@ -368,6 +381,8 @@ function visibleRefs(G){
|
||||
function renderMain(){
|
||||
if(current==="shop") return renderShop();
|
||||
if(current==="gallery") return renderGallery();
|
||||
if(current==="spending") return renderSpending();
|
||||
if(current==="activity") return renderActivity();
|
||||
const G=GROUPS.find(x=>x.key===current);
|
||||
const img=imageFor(G.key); const pins=pinsFor(G.key);
|
||||
const refset=new Set(G.refs.map(r=>r.r));
|
||||
@@ -386,12 +401,12 @@ function renderMain(){
|
||||
}
|
||||
const c=counts([G.key]);
|
||||
const rows=visibleRefs(G).map(r=>{
|
||||
const s=statusOf(G.key,r.r); const note=(state.parts[pid(G.key,r.r)]||{}).note;
|
||||
const s=statusOf(G.key,r.r); const pr=state.parts[pid(G.key,r.r)]||{}; const note=pr.note;
|
||||
const onDraw = pins[r.r]?"":" · not on drawing";
|
||||
const nl=linksOf(G.key,r.r).length, nc=commentsOf(G.key,r.r).length;
|
||||
const extra=(nl?` · ${nl} link${nl>1?"s":""}`:"")+(nc?` · ${nc} comment${nc>1?"s":""}`:"");
|
||||
let html=`<button class="row s-${s}${selRef===r.r?" sel":""}" data-r="${r.r}"><span class="ref">${r.r}</span>
|
||||
<span style="min-width:0"><span class="rname">${esc(bestName(r))}</span><br><span class="rsub mono">${r.v.length>1?r.v.length+" variants":esc(r.v[0].o)}${img?onDraw:""}${extra}${note?" · "+esc(note):""}</span></span>
|
||||
<span style="min-width:0"><span class="rname">${esc(bestName(r))}</span><br><span class="rsub mono">${r.v.length>1?r.v.length+" variants":esc(r.v[0].o)}${img?onDraw:""}${extra}${pr.by&&s!=="none"?" · "+esc(pr.by):""}${note?" · "+esc(note):""}</span></span>
|
||||
<span class="stat"><span class="dot s-${s}" style="display:inline-block;vertical-align:middle"></span> ${s==="none"?"":STATUS[s]}</span></button>`;
|
||||
if(selRef===r.r) html+=detailHtml(G,r);
|
||||
return html;
|
||||
@@ -430,17 +445,18 @@ function detailHtml(G,r){
|
||||
<label class="lbl" for="note">Note</label>
|
||||
<textarea id="note" rows="2" placeholder="Where it is, condition, where you ordered it…">${esc(p.note||"")}</textarea>
|
||||
<div class="sub"><span class="lbl">Links</span>
|
||||
${linksOf(G.key,r.r).map(l=>`<div class="item"><span><a href="${esc(l.url)}" target="_blank" rel="noopener noreferrer">${esc(l.label||host(l.url))}</a><br><span class="when">${esc(host(l.url))} · added ${when(l.at)}</span></span>${l.id>0?`<button class="x" data-dellink="${l.id}" aria-label="Remove link">×</button>`:`<span class="when">waiting</span>`}</div>`).join("")}
|
||||
${linksOf(G.key,r.r).map(l=>`<div class="item"><span><a href="${esc(l.url)}" target="_blank" rel="noopener noreferrer">${esc(l.label||host(l.url))}</a><br><span class="when">${esc(host(l.url))} · added ${l.by?"by "+esc(l.by)+" ":""}${when(l.at)}</span></span>${l.id>0?`<button class="x" data-dellink="${l.id}" aria-label="Remove link">×</button>`:`<span class="when">waiting</span>`}</div>`).join("")}
|
||||
<form class="addrow" data-form="link"><input type="url" id="lurl" placeholder="https://… (eBay listing, shop, forum post)" required><input type="text" id="llabel" placeholder="Label (optional)"><button class="btn primary" type="submit">Add link</button></form>
|
||||
</div>
|
||||
<div class="sub"><span class="lbl">Comments</span>
|
||||
${commentsOf(G.key,r.r).map(c=>`<div class="item"><span><p>${esc(c.text)}</p><span class="when">${when(c.at)}</span></span>${c.id>0?`<button class="x" data-delcomment="${c.id}" aria-label="Delete comment">×</button>`:`<span class="when">waiting</span>`}</div>`).join("")}
|
||||
${commentsOf(G.key,r.r).map(c=>`<div class="item"><span><p>${esc(c.text)}</p><span class="when">${c.by?esc(c.by)+" · ":""}${when(c.at)}</span></span>${c.id>0?`<button class="x" data-delcomment="${c.id}" aria-label="Delete comment">×</button>`:`<span class="when">waiting</span>`}</div>`).join("")}
|
||||
<form class="sub" data-form="comment"><textarea id="ctext" rows="2" placeholder="Write a comment, e.g. “Ordered from Motostion, 12 € + shipping”" required></textarea><div><button class="btn primary" type="submit">Add comment</button></div></form>
|
||||
</div>
|
||||
<div class="sub"><span class="lbl">Photos</span>
|
||||
<div class="pgrid">${photoItems(pid(G.key,r.r)).map((p,i)=>`<button class="ph" data-ph="${pid(G.key,r.r)}|${i}" aria-label="Open photo"><img loading="lazy" src="${p.thumb}" alt="">${p.pending?`<i class="pend">waiting</i>`:""}</button>`).join("")}</div>
|
||||
<div><label class="btn" for="pupl">＋ Add photo</label><input type="file" id="pupl" accept="image/*" multiple hidden></div>
|
||||
</div>
|
||||
<div class="sub"><span class="lbl">History</span>${state.activity.filter(a=>a.part===pid(G.key,r.r)).slice(0,8).map(a=>`<div class="rsub"><b>${esc(a.by)}</b> ${esc(actText(a))} · ${when(a.at)}</div>`).join("")||`<div class="rsub">No changes yet.</div>`}</div>
|
||||
${editing&&pinsFor(G.key)[r.r]?`<button class="btn" data-act="delpin">Remove this part’s markers</button>`:""}
|
||||
</div>`;
|
||||
}
|
||||
@@ -465,6 +481,9 @@ function toast(t){const el=$("#toast"); el.textContent=t; el.hidden=false; clear
|
||||
document.addEventListener("click",async e=>{
|
||||
if(e.target.closest("#stage") && !editing && !e.target.closest(".pin")){ openDrawing(current); return; }
|
||||
const t=e.target.closest("button,[data-g]"); if(!t) return;
|
||||
if(t.dataset.go){ const [g,r]=t.dataset.go.split("|"); current=g; selRef=r; filter="all"; render(); try{localStorage.setItem(LS+"-tab",current)}catch(_){} return; }
|
||||
if(t.dataset.delspend){ const id=+t.dataset.delspend; if(!confirm("Remove this spending entry?")) return;
|
||||
try{ const r=await send("DELETE","api/spending/"+id,undefined,()=>{ state.spending=state.spending.filter(x=>x.id!==id); }); if(!r.queued) await reload(); }catch(err){ toast("Couldn’t remove: "+err.message); } return; }
|
||||
if(t.dataset.ph){ const [sc,i]=t.dataset.ph.split("|"); openPhotos(photoItems(sc),+i); return; }
|
||||
if(t.dataset.g){ current=t.dataset.g; selRef=null; editing=false; confirmBulk=false; zoom=1; render(); try{localStorage.setItem(LS+"-tab",current)}catch(_){} return; }
|
||||
if(t.classList.contains("pin")){ if(dragMoved) return; selRef=t.dataset.r; filter="all"; render(); return; }
|
||||
@@ -500,7 +519,7 @@ document.addEventListener("change",async e=>{
|
||||
}
|
||||
});
|
||||
document.addEventListener("submit",async e=>{
|
||||
const f=e.target.closest("form[data-form]"); if(!f) return; e.preventDefault();
|
||||
const f=e.target.closest("form[data-form]"); if(!f) return; e.preventDefault(); if(f.dataset.form==="spend") return;
|
||||
const id=pid(current,selRef);
|
||||
try{
|
||||
let r;
|
||||
@@ -531,6 +550,52 @@ document.addEventListener("pointerup",()=>{ if(!drag) return;
|
||||
else { selRef=drag.r; render(); }
|
||||
drag=null; setTimeout(()=>dragMoved=false,0); });
|
||||
|
||||
// ---------- spending, activity ----------
|
||||
const eur=c=>(c/100).toLocaleString("de-DE",{style:"currency",currency:"EUR"});
|
||||
function groupTitle(k){ const G=GROUPS.find(x=>x.key===k); return G?G.title:k; }
|
||||
function actText(a){
|
||||
const d=a.detail||"";
|
||||
switch(a.action){
|
||||
case "status": return "set the status to "+(STATUS[d]||"unchecked");
|
||||
case "note": return "edited the note";
|
||||
case "link_add": return `added the link “${d}”`;
|
||||
case "link_del": return `removed the link “${d}”`;
|
||||
case "comment_add": return `commented “${d}”`;
|
||||
case "comment_del": return "deleted a comment";
|
||||
case "photo_add": return "added a photo"+(d?` “${d}”`:"");
|
||||
case "photo_del": return "deleted a photo";
|
||||
case "markers": return "moved markers on "+groupTitle(d);
|
||||
case "spend_add": { const [m,...w]=d.split(" · "); return `spent €${m} on ${w.join(" · ")}`; }
|
||||
case "spend_del": { const [m,...w]=d.split(" · "); return `removed the spending €${m} ${w.join(" · ")}`; }
|
||||
default: return a.action;
|
||||
}
|
||||
}
|
||||
function settlements(bal){
|
||||
const give=bal.filter(b=>b.v<-0.5).map(b=>({n:b.n,v:-b.v})).sort((a,b)=>b.v-a.v), get=bal.filter(b=>b.v>0.5).map(b=>({n:b.n,v:b.v})).sort((a,b)=>b.v-a.v), out=[];
|
||||
let i=0,j=0; while(i<give.length&&j<get.length){ const m=Math.min(give[i].v,get[j].v); out.push({from:give[i].n,to:get[j].n,c:Math.round(m)}); give[i].v-=m; get[j].v-=m; if(give[i].v<0.5) i++; if(get[j].v<0.5) j++; }
|
||||
return out;
|
||||
}
|
||||
function renderSpending(){
|
||||
const sp=state.spending||[]; const names=(state.users||[]).map(u=>u.name); const n=Math.max(1,names.length);
|
||||
const total=sp.reduce((a,x)=>a+x.cents,0), share=total/n;
|
||||
const paid=Object.fromEntries(names.map(u=>[u,0])); for(const x of sp) paid[x.by]=(paid[x.by]||0)+x.cents;
|
||||
const bal=names.map(u=>({n:u,v:(paid[u]||0)-share})); const pay=settlements(bal);
|
||||
$("#main").innerHTML=`<section class="card shop">
|
||||
<div><h2 style="font-size:20px">Spending</h2><p class="rsub" style="margin:4px 0 0">Everyone adds what they paid for the bike. The total is split equally between ${n} people (${names.map(esc).join(", ")}).</p></div>
|
||||
<form class="addrow" data-form="spend"><input type="text" inputmode="decimal" id="samt" placeholder="Amount in €" required autocomplete="off"><input type="text" id="swhat" placeholder="What was it for?" required maxlength="200" autocomplete="off"><button class="btn primary" type="submit">Add</button></form>
|
||||
<div class="sumgrid"><div class="sum"><span class="rsub">Total spent</span><b>${eur(total)}</b></div><div class="sum"><span class="rsub">Fair share each</span><b>${eur(Math.round(share))}</b></div>
|
||||
${bal.map(b=>`<div class="sum"><span class="rsub">${esc(b.n)} paid ${eur(paid[b.n]||0)}</span><b class="${b.v>=0.5?"pos":b.v<=-0.5?"neg":""}">${b.v>=0.5?"+":""}${eur(Math.round(b.v))}</b></div>`).join("")}</div>
|
||||
<div><span class="lbl">Settle up</span>${pay.length?pay.map(x=>`<div class="item"><span><b>${esc(x.from)}</b> pays <b>${esc(x.to)}</b></span><span class="amt">${eur(x.c)}</span></div>`).join(""):`<div class="rsub">${total?"Everyone is even.":"Nothing spent yet."}</div>`}</div>
|
||||
<div class="sub"><span class="lbl">All entries</span>${sp.map(x=>`<div class="item"><span><b>${esc(x.what)}</b><br><span class="when">${esc(x.by)} · ${when(x.at)}${x.id<0?" · waiting to upload":""}</span></span><span style="display:flex;gap:6px;align-items:center"><span class="amt">${eur(x.cents)}</span>${x.by===state.me&&x.id>0?`<button class="x" data-delspend="${x.id}" aria-label="Remove entry">×</button>`:""}</span></div>`).join("")||`<div class="rsub">No entries yet.</div>`}</div>
|
||||
</section>`;
|
||||
}
|
||||
function renderActivity(){
|
||||
const list=state.activity||[];
|
||||
$("#main").innerHTML=`<section class="card shop"><div><h2 style="font-size:20px">Activity</h2><p class="rsub" style="margin:4px 0 0">The latest changes by everyone. Tap a part to jump to it.</p></div>
|
||||
<div class="sub">${list.map(a=>{ const [g,r]=(a.part||"").split("__"); const G=GROUPS.find(x=>x.key===g);
|
||||
return `<div class="item"><span><b>${esc(a.by)}</b> ${esc(actText(a))}${G?` · <button class="btn" style="padding:1px 8px;font-size:12px" data-go="${a.part.replace("__","|")}">${esc(G.title)} #${esc(r)}</button>`:""}<br><span class="when">${when(a.at)}</span></span></div>`; }).join("")||`<div class="empty">Nothing yet.</div>`}</div></section>`;
|
||||
}
|
||||
|
||||
// ---------- photos ----------
|
||||
function partLabel(k){ const [g,r]=k.split("__"); const G=GROUPS.find(x=>x.key===g); return G?`${G.title} #${r}`:k; }
|
||||
function photoItems(scope){
|
||||
@@ -692,12 +757,17 @@ document.addEventListener("click",async e=>{
|
||||
})();
|
||||
|
||||
// ---------- boot ----------
|
||||
try{ const t=localStorage.getItem(LS+"-tab"); if(t && (t==="shop"||t==="gallery"||GROUPS.some(g=>g.key===t))) current=t; }catch(_){}
|
||||
try{ const t=localStorage.getItem(LS+"-tab"); if(t && (t==="shop"||t==="gallery"||t==="spending"||t==="activity"||GROUPS.some(g=>g.key===t))) current=t; }catch(_){}
|
||||
if("serviceWorker" in navigator) navigator.serviceWorker.register("sw.js").catch(()=>{});
|
||||
window.addEventListener("online",()=>reload());
|
||||
window.addEventListener("offline",()=>{ online=false; badgeNow(); });
|
||||
render();
|
||||
(async()=>{ try{ const c=await kvGet("state"); if(c&&!online) state=Object.assign(EMPTY(),c); pendingN=(await qAll()).length; }catch(_){} render(); reload(); })();
|
||||
setInterval(()=>{
|
||||
if(document.hidden||!navigator.onLine) return;
|
||||
const typing=document.activeElement&&document.activeElement.matches("textarea,input");
|
||||
if(typing||vw.open||drag) api("GET","api/ping").catch(()=>{}); else reload();
|
||||
},30000);
|
||||
// pick up changes made on another device when you come back to the tab
|
||||
document.addEventListener("visibilitychange",()=>{ if(!document.hidden && !drag && !document.activeElement.matches("textarea,input")) reload(); });
|
||||
</script>
|
||||
|
||||
@@ -14,7 +14,7 @@ self.addEventListener("activate", (e) => {
|
||||
self.addEventListener("fetch", (e) => {
|
||||
const req = e.request, url = new URL(req.url);
|
||||
if (req.method !== "GET" || url.origin !== location.origin) return;
|
||||
if (url.pathname.startsWith("/api/") || url.pathname === "/login" || url.pathname === "/logout") return;
|
||||
if (url.pathname.startsWith("/api/") || url.pathname === "/login" || url.pathname === "/logout" || url.pathname === "/password") return;
|
||||
if (url.pathname.startsWith("/uploads/photo-") || url.pathname.startsWith("/img/")) {
|
||||
e.respondWith(caches.match(req).then((hit) => hit || fetch(req).then((r) => { if (okToCache(r)) { const c = r.clone(); caches.open(V).then((ch) => ch.put(req, c)); } return r; })));
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user