Использование веб-приложения

Веб-приложение работает по адресу washy-washy.ryankes.eu. Оно читает те же файлы таблицы и машины, что и CLI, но показывает их как страницу, а не как PDF.

Встроенная и активная конфигурация

Главная страница (/) поставляется с выдуманной примерной таблицей стирки и машиной — теми же тестовыми данными, что показаны и в README CLI. Это то, что видит новый посетитель, и то, к чему возвращается любая страница, когда ничего другого не активно.

Загрузка конфигурации заменяет её. Кнопка «Upload config» в шапке — присутствующая на каждой странице — и более полный раздел загрузки/скачивания на /config принимают один и тот же JSON-файл { machine, chart } (см. файлы таблицы и машины), проверяют его и сохраняют в localStorage браузера. С этого момента каждая страница читает эту конфигурацию вместо встроенной — пока вы её не очистите.

Редактирование на /config или /config/machine работает так же: сохранение записывает отредактированную конфигурацию в то же хранилище. Ничего из этого не отправляется на сервер — конфигурация никогда не покидает ваш браузер, а другой браузер или очищенные данные сайта снова начинают со встроенного примера.

На /config также есть ссылка для скачивания, которая выводит текущую активную конфигурацию — встроенную или собственную — обратно в том же JSON-формате, который вы бы загрузили. Это способ отредактировать копию в другом месте или передать вашу конфигурацию кому-то ещё.

Страница конфигурации: сводка машины только для чтения, элементы управления загрузкой/скачиванием и каждая стопка в виде редактируемой карточки

Переключатель темы

В шапке также есть переключатель светлой/тёмной темы, рядом с «Upload config» на каждой странице. Если его не трогать, сайт следует настройке prefers-color-scheme вашей ОС или браузера — так же, как и до появления этого переключателя. Клик по нему задаёт явный выбор, сохранённый в localStorage, который затем переопределяет эту настройку ОС на каждой странице и при каждом будущем визите — пока вы не нажмёте снова. Это двухпозиционный переключатель, а не выпадающий список: отдельного пункта «вернуться к системной настройке» нет.

Навигация с клавиатуры

Сайт также реагирует на несколько сочетаний клавиш в стиле vim, подключённых один раз в шапке, поэтому они работают на каждой странице — включая эту документацию:

j и k прокручивают страницу вниз и вверх.
g g (дважды нажать g) переходит в начало.
G (shift-g) переходит в конец.
/ переводит фокус на собственное поле поиска страницы — например, поиск по стопкам на главной странице — не вводя при этом символ слэша.
? (shift-?) открывает окно справки со списком всего этого; Esc или клик снаружи снова его закрывает.

То же окно можно открыть и кнопкой ? в шапке — для тех, кто использует мышь или программу чтения с экрана вместо клавиатуры. Ни одно из этих сочетаний не срабатывает, пока вы печатаете в текстовом поле, текстовой области, выпадающем списке или чём-либо ещё редактируемом — обычный ввод текста всегда имеет приоритет.

Фильтры

Главная страница фильтрует по нужному вам срезу (полная таблица, только стирка, только глажка) и по текстовому поиску стопок, плюс раскрывающийся блок «Advanced» — по умолчанию закрытый — для фильтрации по точной программе, температуре или отжиму, а также поиску по моющему средству. Все они сужают один и тот же список; чтобы отобразиться, стопка должна соответствовать каждому активному фильтру.

Списки выбора программы, температуры и отжима всегда предлагают только те значения, при которых с учётом поиска по стопкам и всего уже выбранного в Advanced останется хотя бы одна стопка — так что вы не можете выбрать сочетание, которое приведёт к пустой таблице. Списки обновляются на лету по мере изменения других фильтров, и если для поля больше не осталось подходящих значений, оно отключается само, вместо показа пустых вариантов.

Фильтры сохраняются в localStorage между визитами, так же как и конфигурация. Отфильтрованным видом также можно поделиться: адресная строка несёт cut, pile, program, temperature, spin и detergent как параметры запроса, и URL, содержащий любой из них, полностью перевешивает то, что было сохранено при предыдущем визите — см. раздел «Поделиться» ниже про кнопку, которая передаёт этот URL.

Открытые дополнительные фильтры с выбранным вариантом «только стирка»

Рядом с кнопками скачивания PDF находится Share this view — она отправляет текущий URL страницы как есть, вместе со всеми фильтрами, поскольку адресная строка уже несёт их как параметры запроса (см. раздел «Фильтры» выше), так что упаковывать дополнительно нечего.

Если у вас активна собственная машина или таблица (см. Встроенная и активная конфигурация), ссылка также передаёт всю эту настройку целиком, добавленную в виде сжатого фрагмента #config=. Тот, кто её откроет, получит именно вашу машину и таблицу, а не только фильтры — даже в браузере, который никогда не касался вашего localStorage. Здесь тоже ничто не обращается к серверу: фрагмент никогда не отправляется по сети, поэтому сама ссылка и остаётся единственным способом передачи, точно так же, как загруженный файл конфигурации. Как только страница прочитала и сохранила его, она убирает фрагмент из адресной строки — перезагрузка или повторный обмен оттуда дадут обычный короткий URL сайта, а не одноразовую ссылку. Повреждённая или отредактированная вручную ссылка показывает ту же ошибку с указанием строки и столбца, что и при недействительной загрузке конфигурации, и страница возвращается к тому, что уже было активно, вместо того чтобы сломаться. Если ничего собственного не активно, ссылка остаётся такой же, как раньше — только фильтры.

Сначала используется собственное системное меню «Поделиться» браузера (navigator.share — «Сообщения», WhatsApp, AirDrop, что бы ни предлагала ОС), и лишь потом — копирование URL в буфер обмена, с тем же сообщением «Copied!», что и у собственной кнопки «Copy link» карточки, — только если этот API недоступен или доступен, но действительно даёт сбой. Отмена системного меню «Поделиться» — не то и не другое: это просто отказ от одного конкретного способа, поэтому дальше ничего не происходит и ничего не копируется втихую.

Экспорт в PDF

На главной странице есть две кнопки скачивания, обе ограничены тем, что сейчас отфильтровано на странице, и рендерятся на стороне клиента тем же @washy-washy/pdf, что использует и bun run generate из CLI. Ни одна из них ничего не генерирует, пока вы её не нажмёте — фильтрация страницы никогда не запускает рендер в фоне.

Download for phone записывает тот же узкий, единый прокручиваемый лист, что и CLI — предназначенный для чтения с телефона рядом с машиной.
Download to print вместо этого записывает лист A4: справочную таблицу плюс подробную карточку на каждую стопку, предназначенные для печати и размещения на видном месте.

У отдельной карточки тоже есть своя кнопка Download, для одной стопки за раз. Она существует только в телефонном формате — макет для печати всегда рисует всю справочную таблицу плюс карточку каждой стопки, поэтому ограничить его одной стопкой, как в телефонном формате, нельзя.

Собственные кнопки скачивания и копирования ссылки отдельной карточки

Copy link, рядом с кнопкой скачивания карточки, помещает URL этого отфильтрованного вида в буфер обмена — тот же резервный способ через буфер обмена, что использует и кнопка «Поделиться» уровня страницы выше, только ограниченный одной карточкой.