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

Block · With a Pass · https://tactileui.dev/blocks/switchboard

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: Four 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 hours**: Inside 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 hours**: Outside 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. **Patched**: Choose a desk. Another desk lets the first plug go.
5. **A form desk**: Name, 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 desk**: Its email and its phone as large links, mailto: and tel:, under the same head.
7. **Failed**: With 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. **Keyboard**: The desks are native radios: the arrow keys move through them, Tab goes on to the form.
9. **Tablet**: Two jacks across; the clock stacks over its words.
10. **Phone**: 
11. **Idle and off screen**: 
12. **Reduced motion**: No seat, no draw, no arrival: the plug is there or it is not.
13. **Finishes**: Aluminium and graphite by data-finish; the LCD keeps its grey-green glass in both.

## How it works

Original composition. Time zones are read with Intl, so they need no data file.