Switchboard

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.

Copy the switchboard folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="switchboard/switchboard.css">
<div id="switchboard"></div>

<script type="module">
  import { mount } from './switchboard/switchboard.mjs';

  const switchboard = mount(document.getElementById('switchboard'), {
    label: 'Contact',
    title: 'Patch through to the right desk.',
    lead: 'Four desks, one switchboard. The lamp says who is at their desk now; plug in and say what you need.',
  });

  // switchboard.update({ … });   change any option in place
  // switchboard.destroy();        and take it away again
</script>

mount(element, options)

Builds the block inside the element and returns its handle.

handle.selected

handle.status

handle.select(id)

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

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.

Made of: 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.

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).