WorkOrderCard

import ui/theme.qwe use theme_cssuse ui/work_order_card.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

component WorkOrderCardDemoLive() {    state said = "No change yet."    state status_said = ""    <div.demo-stack>        <WorkOrderCard offset={-240}                       order={{ id: "WO-2231", title: "Boiler will not fire", priority: "urgent", status: "open", site: "Riverside Flats, plant room", address: "4 Quay St, Montreal",                                phone: "+1 514 555 0100", due: "today by 16:00", description: "Tenant reports no heating since last night. Key with the caretaker.",                                steps: [{ id: "isolate", text: "Isolate the supply", required: true }, { id: "test", text: "Test the gas valve", required: true }, { id: "photo", text: "Clean the sensor" }],                                parts: [{ id: "valve", name: "Gas valve", planned: 1 }, { id: "seal", name: "Flue seal", planned: 2, used: 1 }] }}                       on_change={(o) => { said = `${o.status}: ${o.steps | filter((s) => s.done) | len()} steps, ${o.parts | map((p) => p.used) | sum()} parts, note "${o.note}"` }}                       on_status={(s, _o) => { status_said = s }}/>        <p.demo-note id="jobcard-demo-said">{said}</p>        <p.demo-note id="jobcard-demo-status">{status_said}</p>    </div>}view WorkOrderCardDemo() = <WorkOrderCardDemoLive/>

// WorkOrderCard: one job on a phone in a van: what it is, how urgent, what has to be done// and what parts it took, moved along with buttons big enough for a gloved thumb. The// big button always says the next thing to do. A job cannot be finished with required// steps left, and finishing takes a second press, so a stray thumb does not close it.////   import ui/work_order_card.qwe use WorkOrderCard////   <WorkOrderCard order={{ id: "WO-2231", title: "Boiler will not fire", priority: "urgent", status: "open",//                           site: "Riverside Flats", address: "4 Quay St", phone: "+15145550100",//                           steps: [{ id: "isolate", text: "Isolate the supply", required: true }],//                           parts: [{ id: "valve", name: "Gas valve", planned: 1 }] }}//                  on_change={(o) => { job = o }}/>//// order: { id, title, priority, status, site, address, phone, due, description, steps, parts,// log }. priority: "urgent", "high", "normal" or "low". status: "open", "travelling",// "on_site", "on_hold" or "done". steps: each { id, text, required, done }. parts: each// { id, name, planned, used }. log: past changes, as on_change gave them. note: the text// in the note box. guard: ms after a press in which another is ignored, so a double// tap cannot jump two statuses (1200). gloves: bigger targets still, 64 px (true).// id: a prefix for its ids. offset: minutes east of UTC for times shown (the device's).//// on_change(order): after each change, the whole order as it now stands.// on_status(status, order): when the status moves. on_hold's reason is in the log.//// A phone number is a tel: link in a browser. The phone apps let no tel: link out, so// there it offers the number through the system's share sheet, or on_call(phone) if given.//// work_order_card_next(status), work_order_card_blocks(steps) and// work_order_card_parts_used(parts) are the plain logic.import ui/theme.qwe use ui_clsimport ui/button.qwe use Buttonlet work_order_card_css = css`.ui-jobcard { --tap: 56px; display: grid; gap: 12px; min-width: 0; container-type: inline-size; color: var(--ui-fg); font: 15px/1.4 var(--ui-font); }.ui-jobcard-gloves { --tap: 64px; }.ui-jobcard-head { display: grid; gap: 4px; min-width: 0; padding: 12px; border-left: 6px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }.ui-jobcard-head[data-priority="urgent"] { border-color: var(--ui-danger); }.ui-jobcard-head[data-priority="high"] { border-color: var(--ui-warning); }.ui-jobcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }.ui-jobcard-no { font: 600 14px var(--ui-mono); }.ui-jobcard-tag { padding: 1px 8px; border-radius: 999px; background: var(--ui-bg); font-size: 13px; font-weight: 700; }.ui-jobcard-tag[data-priority="urgent"] { background: var(--ui-danger); color: #fff; }.ui-jobcard-tag[data-priority="high"] { background: var(--ui-warning-soft); }.ui-jobcard-tag[data-status] { border: 1px solid var(--ui-strong); }.ui-jobcard-head h3 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }.ui-jobcard-head p { margin: 0; overflow-wrap: anywhere; }.ui-jobcard-go { display: grid; place-items: center; width: 100%; min-height: calc(var(--tap) + 24px); padding: 0 12px; border: 2px solid transparent; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-fg); font: 700 22px/1.2 var(--ui-font); cursor: pointer; touch-action: manipulation; }.ui-jobcard-go[data-armed] { background: var(--ui-danger); color: #fff; }.ui-jobcard-go:focus-visible, .ui-jobcard-side:focus-visible, .ui-jobcard-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-jobcard-go:disabled { opacity: .55; cursor: default; }.ui-jobcard-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }.ui-jobcard-side { display: grid; place-items: center; box-sizing: border-box; min-height: var(--tap); padding: 0 10px; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 700 16px/1.2 var(--ui-font); text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; }.ui-jobcard-side:disabled { opacity: .5; cursor: default; }.ui-jobcard-said { min-height: 22px; margin: 0; font-weight: 600; }.ui-jobcard-said:empty { display: none; }.ui-jobcard-said[data-bad] { color: var(--ui-danger); }.ui-jobcard-cols { display: grid; gap: 14px; min-width: 0; }.ui-jobcard-col { display: grid; gap: 8px; min-width: 0; align-content: start; }.ui-jobcard-col h4 { margin: 0; font-size: 16px; }.ui-jobcard-tick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 12px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 600; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }.ui-jobcard-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }.ui-jobcard-tick:has(input:focus-visible) { box-shadow: var(--ui-focus); }.ui-jobcard-box { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ui-strong); border-radius: 6px; font-size: 20px; font-weight: 700; line-height: 1; }.ui-jobcard-tick:has(input:checked) { border-color: var(--ui-success); background: var(--ui-success-soft); }.ui-jobcard-tick:has(input:checked) .ui-jobcard-box { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }.ui-jobcard-tick:has(input:disabled) { opacity: .7; cursor: default; }.ui-jobcard-req { color: var(--ui-danger); font-size: 13px; font-weight: 700; }.ui-jobcard-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }.ui-jobcard-part-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }.ui-jobcard-part-name small { display: block; color: var(--ui-muted); font-size: 13px; font-weight: 500; }.ui-jobcard-qty { display: inline-flex; align-items: center; gap: 2px; }.ui-jobcard-step { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 2px solid var(--ui-strong); border-radius: var(--ui-radius-sm); background: var(--ui-bg); color: var(--ui-fg); font: 700 26px var(--ui-font); cursor: pointer; touch-action: manipulation; }.ui-jobcard-step:disabled { opacity: .4; cursor: default; }.ui-jobcard-n { min-width: 36px; text-align: center; font: 700 18px var(--ui-mono); }.ui-jobcard-label { display: grid; gap: 2px; color: var(--ui-muted); font-size: 13px; }/* 16 px: anything smaller and iOS zooms the page when the field is touched. */.ui-jobcard-label textarea { box-sizing: border-box; width: 100%; min-height: 80px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-fg); font: 16px/1.4 var(--ui-font); }.ui-jobcard-label textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }.ui-jobcard-hold { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-warning); border-radius: var(--ui-radius); background: var(--ui-surface); }.ui-jobcard-hold p { margin: 0; font-weight: 600; }.ui-jobcard-log { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: 14px; }.ui-jobcard-log b { color: var(--ui-fg); font-family: var(--ui-mono); }@container (min-width: 640px) {  .ui-jobcard-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }}`fn work_order_card_status_text(s) -> str = match s {    "open" => "Not started"    "travelling" => "Travelling"    "on_site" => "On site"    "on_hold" => "On hold"    "done" => "Done"    _ => "Not started"}fn work_order_card_priority_text(p) -> str = match p {    "urgent" => "Urgent"    "high" => "High"    "low" => "Low"    _ => "Normal"}// What the big button moves a status to: { to, label }, or null when there is nothing next.fn work_order_card_next(status) = match status {    "open" => { to: "travelling", label: "Start travelling" }    "travelling" => { to: "on_site", label: "Arrived on site" }    "on_site" => { to: "done", label: "Complete job" }    _ => null}// Steps as the card holds them: bad ones out, each with an id and a done flag.fn work_order_card_steps(steps) -> list {    if type_of(steps) != "list" { return [] }    steps | filter((s) => type_of(s) == "map" && get(s, "id") != null) | map((s) =>        ({ id: str(s.id), text: str(get(s, "text") ?? s.id), required: get(s, "required") == true, done: get(s, "done") == true }))}fn work_order_card_count(x) -> int = type_of(x) == "int" && x >= 0 ? x : (type_of(x) == "float" && x >= 0 ? floor(x) : 0)fn work_order_card_parts(parts) -> list {    if type_of(parts) != "list" { return [] }    parts | filter((p) => type_of(p) == "map" && get(p, "id") != null) | map((p) =>        ({ id: str(p.id), name: str(get(p, "name") ?? p.id), planned: work_order_card_count(get(p, "planned")), used: work_order_card_count(get(p, "used")) }))}// What stops the job being finished: the required steps not done, in words.fn work_order_card_blocks(steps: list) -> list = steps | filter((s) => s.required && !s.done) | map((s) => s.text)// Parts used, in all, for a line such as "3 parts used".fn work_order_card_parts_used(parts: list) -> int = parts | reduce(0, (a, p) => a + p.used)// 08:02, the 24-hour clock being the same in every language.fn work_order_card_time(ms, offset: int) -> str {    if type_of(ms) != "int" { return "" }    let minutes = floor((ms + offset * 60000) / 60000) % 1440    let h = floor(minutes / 60)    let m = minutes % 60    `${h < 10 ? "0" : ""}${h}:${m < 10 ? "0" : ""}${m}`}fn work_order_card_log_text(entry) -> str = get(entry, "why") != null    ? `${work_order_card_status_text(get(entry, "status"))}: ${entry.why}`    : work_order_card_status_text(get(entry, "status"))component WorkOrderCard(order: map = {}, gloves: bool = true, guard: int = 1200, id: str = "ui-jobcard", offset: int = 0, note: str = "", on_change = null, on_status = null,                        on_call = null, class: str? = null) {    style global work_order_card_css    state status = get(order, "status") ?? "open"    state before = "open"    // what a hold goes back to    state steps = work_order_card_steps(get(order, "steps"))    state parts = work_order_card_parts(get(order, "parts"))    state log = type_of(get(order, "log")) == "list" ? order.log : []    state text = note    state zone = offset    state said = ""    state bad = false    state armed = false      // Complete pressed once    state pressed = null    state holding = false    state why = ""    state in_app = false    let next = work_order_card_next(status)    let blocks = work_order_card_blocks(steps)    let phone = get(order, "phone")    let locked = status == "done"    let whole = () => set(set(set(set(set(order, "status", status), "steps", steps), "parts", parts), "log", log), "note", text)    let told = () => { on_change && on_change(whole()) }    let become = (to, reason) => {        let t = now()        log = log + [{ status: to, at: t, why: reason }]        status = to        armed = false        bad = false        said = `${work_order_card_status_text(to)}, ${work_order_card_time(t, zone)}`        told()        on_status && on_status(to, whole())    }    let forward = () => {        let t = now()        if next != null {            if pressed != null && t - pressed < guard {                null            } else if next.to == "done" {                pressed = t                if len(blocks) > 0 {                    bad = true                    armed = false                    said = `Still to do: ${join(blocks, ", ")}`                } else if armed {                    become("done", null)                } else {                    armed = true                    bad = false                    said = "Press again to complete the job."                }            } else {                pressed = t                become(next.to, null)            }        }    }    if armed { every(6000, () => { armed = false; said = "" }) }    let tick = (s) => {        steps = steps | map((x) => x.id == s.id ? set(x, "done", !x.done) : x)        armed = false        told()    }    let change_part = (p, by) => {        parts = parts | map((x) => x.id == p.id ? set(x, "used", max([0, x.used + by])) : x)        told()    }    <article class={ui_cls(["ui-jobcard", gloves && "ui-jobcard-gloves", class])}             @mount={(_el) => {                 in_app = js("window").quilloNative != null                 zone = 0 - js_new("Date").getTimezoneOffset()             }}>        <header.ui-jobcard-head data-priority={get(order, "priority") ?? "normal"}>            <div.ui-jobcard-top>                <span.ui-jobcard-no>{str(get(order, "id") ?? "")}</span>                <span.ui-jobcard-tag data-priority={get(order, "priority") ?? "normal"}>{work_order_card_priority_text(get(order, "priority"))}</span>                <span.ui-jobcard-tag data-status="">{work_order_card_status_text(status)}</span>            </div>            <h3>{str(get(order, "title") ?? "Job")}</h3>            {get(order, "site") != null && <p>{order.site}</p>}            {get(order, "address") != null && <p>{order.address}</p>}            {get(order, "due") != null && <p>Due {order.due}</p>}            {get(order, "description") != null && <p>{order.description}</p>}        </header>        {next != null && <button.ui-jobcard-go type="button" data-armed={armed ? "" : null} @click={forward}>{armed ? "Press again to complete" : next.label}</button>}        {status == "on_hold" && <button.ui-jobcard-go type="button" @click={() => { become(before, null) }}>Resume job</button>}        {status == "done" && <button.ui-jobcard-go type="button" disabled={true}>Job done</button>}        <p.ui-jobcard-said role="status" data-bad={bad ? "" : null}>{said}</p>        <div.ui-jobcard-sides>            {next != null && !holding && <button.ui-jobcard-side type="button" @click={() => {                holding = true                armed = false                said = ""            }}>Put on hold</button>}            {get(order, "address") != null && <a.ui-jobcard-side href={`https://www.google.com/maps/search/?api=1&query=${url_encode(order.address)}`}>Map</a>}            {phone != null && !in_app && <a.ui-jobcard-side href={`tel:${re.replace(str(phone), "[^0-9+]", "")}`}>Call</a>}            {phone != null && in_app && <button.ui-jobcard-side type="button" @click={() => {                if on_call != null {                    on_call(phone)                } else {                    // iOS answers { shared, to } and Android true, so only a refusal is looked at.                    let r = js("quilloNative.share", str(phone))                    if is_err(r) {                        bad = true                        said = `Call ${phone}.`                    }                }            }}>Call</button>}        </div>        {holding && <div.ui-jobcard-hold>            <p>Why is it on hold?</p>            <div.ui-jobcard-sides>                {for r in ["Waiting for parts", "No access", "Customer asked", "Weather"] =>                    <button.ui-jobcard-side type="button" key={r} aria-pressed={why == r ? "true" : "false"} @click={() => { why = r }}>{r}</button>}            </div>            <div.ui-jobcard-sides>                <button.ui-jobcard-side type="button" disabled={why == ""} @click={() => {                    before = status                    holding = false                    become("on_hold", why)                    why = ""                }}>Confirm hold</button>                <button.ui-jobcard-side type="button" @click={() => {                    holding = false                    why = ""                }}>Cancel</button>            </div>        </div>}        <div.ui-jobcard-cols>            <div.ui-jobcard-col>                <h4>Steps, {steps | filter((s) => s.done) | len()} of {len(steps)}</h4>                {for s in steps => <label class="ui-jobcard-tick" key={s.id}>                    <input type="checkbox" name={`${id}-step-${s.id}`} checked={s.done} disabled={locked} @change={() => { tick(s) }}/>                    <span.ui-jobcard-box aria-hidden="true">{s.done ? "✓" : ""}</span>                    <span>{s.text}{s.required && !s.done && <span.ui-jobcard-req> Required</span>}</span>                </label>}            </div>            <div.ui-jobcard-col>                <h4>Parts, {work_order_card_parts_used(parts)} used</h4>                {for p in parts => <div.ui-jobcard-part key={p.id}>                    <div.ui-jobcard-part-name>{p.name}<small>{p.used > p.planned ? `Planned ${p.planned}, ${p.used - p.planned} extra` : `Planned ${p.planned}`}</small></div>                    <div.ui-jobcard-qty role="group" aria-label={`Used of ${p.name}`}>                        <button.ui-jobcard-step type="button" aria-label={`One fewer ${p.name}`} disabled={locked || p.used <= 0} @click={() => { change_part(p, -1) }}>−</button>                        <span.ui-jobcard-n>{p.used}</span>                        <button.ui-jobcard-step type="button" aria-label={`One more ${p.name}`} disabled={locked} @click={() => { change_part(p, 1) }}>+</button>                    </div>                </div>}                <label class="ui-jobcard-label" for={`${id}-note`}>Notes                    <textarea id={`${id}-note`} name={`${id}-note`} rows="3" disabled={locked} value={text} @input={(e) => { text = e.value }} @change={() => { told() }}></textarea>                </label>                {len(log) > 0 && <ol.ui-jobcard-log>                    {for [i, l] in enumerate(log) => <li key={i}><b>{work_order_card_time(get(l, "at"), zone)}</b> {work_order_card_log_text(l)}</li>}                </ol>}            </div>        </div>    </article>}