mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
3ed415fb75
Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
notifications-admin
Application to handle the admin functions of the notifications application.
Features of this application:
- Register users
- Register services
- Download CSV for an email or sms batch
- Show history of notifications
- Reports
Create a virtual environment for this project
mkvirtualenv -p /usr/local/bin/python3 notifications-admin
Building the frontend
You need Node which will also get you NPM, Node's package management tool.
brew install node
Most of the frontend dependencies are managed using Git Submodules. Some are managed with NPM and Bower. To install or update all the things, run
git submodule init --update
npm install
If you want the front end assets to re-compile on changes, leave this running in a separate terminal from the app
npm run watch
Running the application:
pip install -r requirements.txt
./scripts/bootstrap.sh
./scripts/run_app.sh
Note: the ./scripts/bootstrap.sh script only needs to be run the first time to create the database.
URL to test app:
localhost:6012/helloworld
Domain model
All the domain models are defined in the models.py file.