Vespa-watch

Django app for the monitoring and management of Vespa velutina, an invasive species in Belgium.

Installation

Setup database

1. Create an empty PostgreSQL database (e.g. vespa-watch)
2. Enable PostGIS: CREATE EXTENSION postgis;

Define settings

1. Clone this repository: git clone https://github.com/inbo/vespa-watch
2. Copy djangoproject/settings/settings_local.template.py to djangoproject/settings/settings_local.py
3. In that file, verify the database settings are correct and set SECRET_KEY to a non-empty value

Setup python environment

1. Create a virtual environment, e.g. conda create -n vespawatch python=3.6
2. Activate the environment, e.g. source activate vespawatch
3. Navigate to the project directory and install the requirements: pip install -r requirements.txt
4. Tell Django to use the local settings: export DJANGO_SETTINGS_MODULE=djangoproject.settings.settings_local

Node package manager

Make sure you have npm installed. You'll need to run an npm script to build all static files.

Apply database migrations

python manage.py migrate

Create superuser

• In development (this will prompt for a username, email and password):

  python manage.py createsuperuser

• In production:

  python manage.py create_su
  

Create fire brigade users

1. Fire brigade users are responsible for a specific geographic area (= zone). Import the polygons for those zones:

   python manage.py import_firefighters_zones data/Brandweerzones_2019.geojson

   File source

   The initial fire brigade zone data was received as an ESRI shapefile and converted to GeoJSON with:

   ogr2ogr -f GeoJSON -t_srs EPSG:4326 data/Brandweerzones_2019.geojson <path_to_received_shapefile>/Brandweerzones_2019.shp

2. Create a fire brigade user for each zone (this will return passwords for each account, so best to catch those):

   python manage.py create_firefighters_accounts

Load data from iNaturalist

Initialize the database with observations from iNaturalist (optional):

python manage.py sync_pull

Generate static files

The repository contains a number of raw static files that need to be processed before deployment. You can build all static files with an npm script:

npm run build:all

Run the application

In your virtual environment:

python manage.py runserver

Go to http://localhost:8000 to see the application.

Development

Update HTML

HTML is defined in templates at vespawatch/templates/vespawatch. base.html is the main template, almost all other templates build upon it. The HTML is structured around Bootstrap v4.0 classes for layout, components and utilities: use these before writing custom html and css.

Node package manager (npm) for static files

Important: static files in the Django accessible directory vespawatch/static/vespawatch should not be edited manually: those are all generated! They are managed in static_src and copied or compiled with Node Package Manager using npm run build:all. To start:

1. Verify npm is installed: node -v
2. Go to the root of this repository
3. Install all dependencies with: npm install (will read package.json to create the node_modules directory)

Update CSS

CSS is managed as SCSS, starting from Bootstrap's SCSS, with custom variable overwrites in _variables.scss and custom CSS in main.scss. These get bundled together with Bootstrap in a single vespawatch/static/vespawatch/css/main.css.

1. Go to static_src/scss
2. Update the relevant .scss files
3. Generate the CSS automatically on every change with npm run watch:css (or once with npm run create:css).

Update libraries

External Javascript libraries (and their CSS) are defined in package.json. To add a library:

1. Add the library and version in package.json under dependencies
2. Install the library with npm install
3. Create a new script in package.json under scripts to move the necessary JS & CSS files to vespawatch/static/vespawatch/libraries (see the other scripts for inspiration) and add your script to copy:libraries
4. Move the files with npm run copy:libraries
5. Link to the files in your template with:

   <link rel="stylesheet" href="{% static 'vespawatch/libraries/my_library/my_library.min.css' %}">
   <script src="{% static 'vespawatch/libraries/my_library/my_library.min.js' %}"></script>

Update Javascript

1. Go to static_src/js
2. Update the relevant .js files
3. Copy the files automatically on every changes with npm run watch:js (or once with npm run copy:custom-js)

Update images

1. Go to static_src/img
2. Add or update the relevant image files
3. Copy the files with npm run copy:img

Translations

1. Extract the translations from the code to .po files

   $ python manage.py makemessages -l nl
   $ python manage.py makemessages -d djangojs -l nl

2. Complete the translations in locale/nl/LC_MESSAGES/django.po and locale/nl/LC_MESSAGES/djangojs.po. A simple text editor is enough, but more advanced tools such as Qt Linguist can more convenient.

3. Compile .po => .mo

   $ python manage.py compilemessages

4. Rince and repeat.

Contributors

List of contributors

License

MIT License