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.
What it is for
A contact section for a company with more than one person to reach.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
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
- 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.
- 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.
- 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.
- 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.
- 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.
- A direct deskIts email and its phone as large links, mailto: and tel:, under the same head.
- 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.
- KeyboardThe desks are native radios: the arrow keys move through them, Tab goes on to the form.
- TabletTwo jacks across; the clock stacks over its words.
- PhoneTwo jacks across at 390px, the fields stacked, the key full width; no sideways scroll.
- Idle and off screenThe clock looks again every 20 s only while the block is on screen and the tab visible; otherwise nothing runs.
- Reduced motionNo seat, no draw, no arrival: the plug is there or it is not.
- FinishesAluminium and graphite by data-finish; the LCD keeps its grey-green glass in both.
Notes
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).
Anatomy
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
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| label | text | Label |
| title | text | Headline |
| lead | text | Lead |
| routes | text | Separated by “|”, two to six. Each is Name=who answers and how fast=email, and an optional =phone. Names as text. |
| direct | text | Names from the list, separated by “|”. They open their email and phone; every other desk opens a short form. Empty: every desk has a form. |
| always | text | Names from the list. Their lamp is always lit, whatever the hours say. Empty: every desk keeps the hours. |
| timezone | text | The desk’s own, as the platform names it: Europe/London, America/New_York. An unknown name falls back to Europe/London. |
| hours | text | From and to, on the desk’s own clock, in 24 hours: 09:00-17:30. The visitor is shown them in their own time. |
| days | text | A range, Mon-Fri, or a list, Mon,Wed,Fri. Sat-Mon runs over the week’s end. |
| action | text | An http(s) or relative URL that takes JSON. Empty: nothing is posted; listen for switchboard-send and send it yourself. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |
Methods
- selected
- status
- select
- update
- destroy
How it works
Original composition. Time zones are read with Intl, so they need no data file.