Skip to the object
TACTILE UI

Switchboard

A contact section made as an operator's switchboard. A row of labelled jacks, one per desk, each with a lamp that is lit when someone is there; choosing one seats a plug and draws a cord, and opens that desk's short form or its direct email and phone. The desk hours sit on an LCD clock in the visitor's own time zone.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Native radio jacks, Css seat animation, Svg cord draw, Lamp from desk hours, Visitor timezone clock, Intl zone arithmetic, Kit lcd, Switchboard events with until, Honeypot field, No loop at rest, Watched clock timer, Reduced motion static plug, Finish following
Stack
Vanilla ES modules, CSS, SVG, Container queries
Needs
Nothing — no dependencies
States
13 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restFour jacks in a machined panel, each with its lamp, its desk, who answers, and “Free” with “Staffed” or “Closed”; the LCD showing the visitor's time and DESKS OPEN or CLOSED; a line saying to choose a desk. Nothing moves.
  2. Open hoursInside the hours, on the desk's own clock and days, every lamp is lit green and the words beside the LCD say the desks are staffed, with the hours in the visitor's own time.
  3. Closed hoursOutside them the lamps are dark, except for a desk kept at every hour, and the words say when the desks open again, in the visitor's time.
  4. PatchedChoose a desk: the plug comes down and seats over 260 ms, the cord is drawn from the slot up to it, the state reads “Patched”, and the desk's panel arrives under the row. Another desk lets the first plug go.
  5. A form deskName, email and message, and a Send key that locks amber while the message goes and shows green when it has. Wrong fields say how to fix them; a honeypot catches bots.
  6. A direct deskIts email and its phone as large links, mailto: and tel:, under the same head.
  7. FailedWith an action, a non-2xx answer or a rejected until() promise unlocks the key, keeps the words and says “Not sent: …”; switchboard-fail fires.
  8. KeyboardThe desks are native radios: the arrow keys move through them, Tab goes on to the form.
  9. TabletTwo jacks across; the clock stacks over its words.
  10. PhoneTwo jacks across at 390px, the fields stacked, the key full width; no sideways scroll.
  11. Idle and off screenThe clock looks again every 20 s only while the block is on screen and the tab visible; otherwise nothing runs.
  12. Reduced motionNo seat, no draw, no arrival: the plug is there or it is not.
  13. FinishesAluminium and graphite by data-finish; the LCD keeps its grey-green glass in both.

What it is for

A contact section for a company with more than one person to reach. Each desk (Sales, Support, Press, Security) is a jack with a lamp and one line saying who answers and how fast; the lamp is lit while the configured hours say someone is at the desk, in the desk's own time zone, and always for a desk kept at every hour. The visitor is shown the same facts in their own time on the kit's LCD and in a sentence beside it, so nobody does the sum. Choosing a desk patches a cord into it and opens that desk's own panel: a short form for most, and for a desk that would rather be rung, its email and phone. The block fires switchboard-route and switchboard-send and posts if given an action, so a page wires it to any backend.

Original composition; Lode, its desks, the people named on them, the addresses at lode.example and the 020 7946 numbers (a range reserved for fiction) are invented. Built from the kit alone (00.13): DOM, CSS and SVG, no object; the LCD is drawn in the kit's own liquid-crystal look from its tokens. Time zones are read with Intl, so they need no data file. Faces: Geist Mono and Instrument Sans (SIL OFL 1.1).