RASCSI/python/web
nucleogenic 3627b39af4
New theme for web UI (#957)
* Docker environment fixes

* New theme for web UI

* Apply breaking wrap to filenames only

* Reduce font sizes, whitespace and padding

* Right align action fields/buttons

* Improve mobile header, hide superfluous UI elements when logged out, drop placeholders from login labels, various other adjustments

* Force footer to bottom of screen

* Show manual link to logged out users

* Reduce header text size on desktop

* Fix incorrect selector ID

* Fix selector referencing old class name

* Fix right-aligned message when images table empty

* Add CSS linter/auto-formatter

* Run Stylelint + Prettier against modern theme CSS

* Select default theme based on browser’s user agent

* Style inputs on mobile/tablet devices

* Fixes for Safari 14 on iOS + iPad OS

* Explicitly define mobile browser support, switch to bare ua-parser without user-agent wrapper

* Add LICENSE file for modern theme icons

* Improve theme selection query string/field naming.

* Remove patch workaround from Docker build

* Update log level for UAs to info

* Move Bootstrap Reboot CSS to CDN

* Account for LUN column in attached devices table

* Prevent wrapping of config forms on small viewports

* Fix Stylelint issues

* Auto-format CSS with Prettier
2022-11-14 09:32:15 -08:00
..
mock/bin
service-infra More refactoring of Python code to address Sonar issues (#906) 2022-10-12 12:59:01 -07:00
src New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
tests New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
__init__.py restructuring towards python client library #455 (#613) 2022-01-21 15:08:29 -08:00
.flake8 Setup pytest, flake8, black + add API tests 2022-09-26 00:00:18 +01:00
.prettierrc.json New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
.stylelintrc.json New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
babel.cfg
package-lock.json New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
package.json New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
pyproject.toml Setup pytest, flake8, black + add API tests 2022-09-26 00:00:18 +01:00
README.md Allow custom drive sizes in bespoke UI; other sundry improvements (#813) 2022-08-27 20:38:23 -05:00
requirements-dev.txt Docker container for Pytest (#901) 2022-10-14 19:30:08 -07:00
requirements.txt New theme for web UI (#957) 2022-11-14 09:32:15 -08:00
start.sh Fix shell exit issue in web/start.sh 2022-09-26 00:00:19 +01:00

RaSCSI Web

Setup local dev env

# Change to python/web/src
$ cd python/web
# Make a virtual env named venv
$ python3 -m venv venv
# Use that virtual env in this shell
$ source venv/bin/activate
# Install requirements
$ pip install -r requirements.txt
# Use mocks and a temp dir - start the web server
$ BASE_DIR=/tmp/images/ PATH=$PATH:`pwd`/mock/bin/ cd python/web && PYTHON_COMMON_PATH=$(dirname $PWD)/common/src PYTHONPATH=$PWD/src:${PYTHON_COMMON_PATH} python3 src/web.py

Mocks for local development

You may edit the files under mock/bin to simulate Linux command responses. TODO: rascsi-web uses protobuf commands to send and receive data from rascsi. A separate mocking solution will be needed for this interface.

(Optional) Pushing to the Pi via git

This is a setup for pushing code changes from your local development environment to the Raspberry Pi without a roundtrip to the remote GitHub repository.

Setup a bare repo on the rascsi

$ ssh pi@rascsi
$ mkdir /home/pi/dev.git && cd /home/pi/dev.git
$ git --bare init
Initialized empty Git repository in /home/pi/dev.git

Locally

$ cd ~/source/RASCSI
$ git remote add pi ssh://pi@rascsi/home/pi/dev.git
$ git push pi master

Localizing the Web Interface

We use the Flask-Babel library and Flask/Jinja2 extension for internationalization (i18n).

It uses the 'pybabel' command line tool for extracting and compiling localizations. The Web Interface start script will automatically compile localizations upon launch.

Activate the Python venv in src/web/ to use it:

$ cd python/web
$ source venv/bin/activate
$ pybabel --help

To create a new localization, it needs to be added to the LANGAUGES constant in web/settings.py. To localize messages coming from the RaSCSI backend, update also code in raspberrypi/localizer.cpp in the RaSCSI C++ code.

Once this is done, it is time to localize the Python code. The below steps are derived from the Flask-Babel documentation.

First, generate the raw messages.pot file containing extracted strings.

$ pybabel extract -F babel.cfg -o messages.pot .

Initialize a new localization

When adding a localization for a new language, initialize the directory structure. Replace 'xx' with the two character code for the language.

$ pybabel init -i messages.pot -d src/translations -l xx

Update an existing loclization

After strings have been added or changed in the code, update the existing localizations.

pybabel update -i messages.pot -d src/translations

Then edit the updated messages.po file for your language. Make sure to update fuzzy strings and translate new ones.

When you are ready to contribute new or updated localizations, use the same Gitflow Workflow as used for any code contributions to submit PRs against the develop branch.

Working with PO files

See the GNU gettext documentation for an introduction to the PO file format.

We make heavy use of python-format for formatting, for instance:

#: file_cmds.py:353
#, python-format
msgid "%(file_name)s downloaded to %(save_dir)s"
msgstr "Laddade ner %(file_name)s till %(save_dir)s"

There are also a few instances of formatting in JavaScript:

#: templates/index.html:381
msgid "Server responded with code: {{statusCode}}"
msgstr "Servern svarade med kod: {{statusCode}}"

And with html tags:

#: templates/index.html:304
#, python-format
msgid ""
"Emulates a SCSI DaynaPORT Ethernet Adapter. <a href=\"%(url)s\">Host "
"drivers and configuration required</a>."
msgstr ""
"Emulerar en SCSI DaynaPORT ethernet-adapter. <a href=\"%(url)s\">Kräver "
"drivrutiner och inställningar</a>."

Contributing to the project

New or updated localizations are treated just like any other code change. See the project README for further information.

(Optional) See translation stats for a localization

Install the gettext package and use msgfmt to see the translation progress.

$ sudo apt install gettext
$ cd python/web/src
$ msgfmt --statistics translations/sv/LC_MESSAGES/messages.po
215 translated messages, 1 untranslated message.