Mobile Push Settings Block for React

Edit the constants at the top. DEVICES lists each device with its name, its kind, whether it is a tablet and the ISO day it last reached your server; the dates are written in UTC, so they read the same in every time zone. SAVED is what the account has stored when the page opens: the quiet start and end as two-digit hours, whether critical alerts break through, and the toggles that are on, written as a device and a kind ("work:push"). The counts, the strip and the sentence are worked out from those, so nothing is typed twice.

Each of the 24 cells is shaded when its hour falls inside the quiet window. When the start is later than the end, as in 22:00 to 07:00, the window wraps: the cells from the start to midnight and from midnight to the end are both shaded, and the sentence says how many hours that is. The shading is a tint with a bar under it, so it reads in light and dark themes and in every colour preset. The strip itself is drawn left to right in every language, since time on it runs one way, and it is named for a screen reader with the same sentence that is printed under it. If the start and the end are the same hour the strip has nothing shaded and the sentence asks for a different end.

It decides whether a critical alert (smoke, a leak, a door opened while you are away) is held with the rest during quiet hours. On, the sentence says critical alerts still sound; off, it says they wait too. The block only keeps the choice and the wording: to make it real, send the flag with the quiet window to your push service and mark critical notifications with your platform's critical or time-sensitive level, which is what lets them through a phone's own do-not-disturb setting.

Nothing leaves the page. The block keeps two copies of the settings, the saved one and the one being edited, and counts how many settings differ, so the status line can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited copy to your API in the save handler and update the saved copy from the response, showing the error in the same status line if it fails. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus; pressing one then says there is nothing to do.

They only mean something while that device receives push, so turning its Push toggle off disables the other two and shows them off. The choices you made for them are kept, so turning Push back on brings them back as they were, and unsaved changes are counted from what you actually set. Each toggle's name for a screen reader includes the device ("Sound for Work phone"), since three devices share the same visible words.

Below the medium breakpoint the strip and its sentence come first and the hour menus and the critical switch follow under them, then the devices. Each device's name and last-seen date sit over a row of three equal toggles, and the save bar sticks to the bottom of the screen while you scroll, then settles at the panel's foot. At 320 pixels the strip's hour labels keep their place, the cells shrink and nothing scrolls sideways.