code4romania/seismic-risc

Web app for keeping track of buildings in danger of collapsing in the event of an earthquake

seismic-risc's Issues

[CMS] Create general style for the all articles ("toate articolele") interface

The page should contain a list of existing articles with the data from the UX specifications

Current page address: /admin/cms/page/
UX Specs: https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=588%3A256

[Map] Display on map entries from building database

As a user visiting the application, I want to be able to view on map the buildings that are saved in the map_app_building table.
The information on the map should be displayed based on the latitude/longitude saved in the database.
The UX wireframes give more details about the look and feel:
https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=2%3A2

Makefile installation of Docker fails on Ubuntu 19.10

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(shell lsb_release -cs) stable", on Ubuntu 19.10, will add the repository for "ubuntu eoan stable", but Docker.com does not provide packages for Ubuntu Eoan: docker/for-linux#833

I've worked around this by using the Docker repository for the previous version of Ubuntu:
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu disco stable"

[Discussion] API and client interaction in the blog

Blog posts are generated in the same way as other pages through the Django CMS
The Django REST API should be able to return these articles
The React client should be able to add a style over them

We would need to form a better opinion on how such an architecture might look
Anyone with experience in this area is welcome to contribute to the discussion

[Map] Filter map location based on seismic risk

As an user of the platform I want to be able to filter locations on the map based on the severity:
risk I/II/III

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[Frontend] Create blog posts page

As a user, I want to see blog posts written on the platform, through the CMS, all in one page, so that I can inform myself about the risks of an earthquake.

The articles should support tags so that I can filter them by city.

For reference, see the third mockup image.

[Initialization] Initialize Django project

The Seismic Alert will be built on the Django platform.
As a base for starting the project, the Django project structure needs to be initialized.

[api] Add tests to the buildings api

Create a api/tests/test_buildings_api.py file that tests the basic CRUD functionality of the buildings api.

We used the pytest testing framework, make sure you use of all its awesome features. :)

[client] Build files should be placed in the ./api folder

Because some of the CSS will be shared between the client and the api, we need to have a way for the api code to be able to serve those files from within it's container.

For now we should just build the client files into the ./api/public/ folder. That folder is already in the git ignore list so it should be fine.

[CMS] Build page for "Bucurestiul vulnerabil" page

As part of the platform will be a page called "Bucurestiul vulnerabil" that contains information about buildings in Bucuresti and their state.

The content of the page should be editable from the admin panel.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[client] Make use of the API to get map data

Right now the client uses an outdated json dump of the data and the json-server package to serve it.

The client code should be able to take an environment variable with the site domain and get the data directly from the api.

You can load some dummy data into the buildings api by running the make init-db (this will also create a superuser for you in the django admin).

[Map] Display a map containing seismic risk information

The information about buildings that is saved in the database should be displayed on a map, using pins to highlight the seismic risk of the building. The pins colour changes according to the severity.

The map provider should be OpenStreetMaps.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[Initialization] Dev setup data load fails

On a fresh clone

$  python3 manage.py loaddata buildings

Traceback (most recent call last):
  File "/usr/local/lib/python3.7/site-packages/django/db/models/options.py", line 565, in get_field
    return self.fields_map[field_name]
KeyError: 'nr_cadastral'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/local/lib/python3.7/site-packages/django/core/serializers/json.py", line 69, in Deserializer
    yield from PythonDeserializer(objects, **options)
  File "/usr/local/lib/python3.7/site-packages/django/core/serializers/python.py", line 118, in Deserializer
    field = Model._meta.get_field(field_name)
  File "/usr/local/lib/python3.7/site-packages/django/db/models/options.py", line 567, in get_field
    raise FieldDoesNotExist("%s has no field named '%s'" % (self.object_name, field_name))
django.core.exceptions.FieldDoesNotExist: Building has no field named 'nr_cadastral'

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "manage.py", line 21, in <module>
    main()
  File "manage.py", line 17, in main
    execute_from_command_line(sys.argv)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()
  File "/usr/local/lib/python3.7/site-packages/django/core/management/__init__.py", line 375, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/base.py", line 323, in run_from_argv
    self.execute(*args, **cmd_options)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/base.py", line 364, in execute
    output = self.handle(*args, **options)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/commands/loaddata.py", line 72, in handle
    self.loaddata(fixture_labels)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/commands/loaddata.py", line 114, in loaddata
    self.load_label(fixture_label)
  File "/usr/local/lib/python3.7/site-packages/django/core/management/commands/loaddata.py", line 172, in load_label
    for obj in objects:
  File "/usr/local/lib/python3.7/site-packages/django/core/serializers/json.py", line 73, in Deserializer
    raise DeserializationError() from exc
django.core.serializers.base.DeserializationError: Problem installing fixture '/Users/iuliux/seismic-risc/seismic_site/map_app/fixtures/buildings.json':

[CMS] Create general style for the admin interface

The Django admin interface should be implemented so that it looks according to the specifications

UX Specs Link: https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=586%3A0

[Map] Navigate to a single map entry and display information

As an user of the platform, I want to be able to drill down to a single location on the map and see complete information about that location.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[CMS] Build page for "Toolkit asociatii proprietari" page

A new page must be part of the platform - Toolkit asociatii proprietari
The page will contain content and a pdf file to be downloaded.
The content for the page and the pdf file should be editable by the admin panel in the content editing section.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[Map] Add CSV import page on admin panel

As an admin of the application, I want to have a page on the admin panel to be able to upload the csv containing the building information.

The CSV file being imported is
LISTA.imobile.PMB.completa_2018.xlsx

[Django] Clean up the old unused API

Also called the "legacy API". We're at that stage where we don't have to keep legacy.

Should be safe to just completely nuke the seismic_site/api folder and remove this one line https://github.com/code4romania/seismic-risc/blob/master/seismic_site/seismic_site/urls.py#L27

While at it, the seismic_site/map_app/serializers.py is a complete duplicate (unused) of seismic_site/buildings/serializers.py (left-over from #61, my bad). This one would actually give an error if it were to be used.

[frontend] Create detailed building view

As a user, when I click on a building, I want to see a side-view on the right-hand side of the map where I can read all the details about the currently selected building, in order to understand the context in which it was marked as being a risk.

As reference, use the second mockup image.

[CMS] Admin can approve/reject new information inserted by visitors

As an admin of the platform I want to be able to approve or reject the information that is inserted by visitors in the platform.
When a new entry is accepted, we need to retrieve the geo location based on the address and display the new information on the map.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[api] Add blog tags api endpoint

This should be done after the blog api has been merged.

[api] Add an api documentation generation solution

We should have a way to document the api and a way to test or interact with it dynamically.

Lucky for us, most of the work is done in the form of drf-yasg - Yet another Swagger generator, so we could try to use this.

We are also opened to suggestions from the community.

[api] Add tests to the blog api

Create a api/tests/test_blog_api.py file that tests the basic read functionality of the blog api.

We used the pytest testing framework, make sure you use of all its awesome features. :)

[api] Add fixtures for the pages api

Create a few pages in Django admin and populate them using lipsum text. Then create fixtures using Django's manage.py dumpdata command.

Internationalise the interface

All the text displayed should be multilingual, allowing us to deploy the application in different languages
This also allows the display of Romanian strings while at the same time allowing developers to easily understand what those strings represent

Languages supported: en-GB (code language), ro-RO

Mock text can be used in the beginning to not spend much time on translating everything

Django i18n docs: https://docs.djangoproject.com/en/3.0/topics/i18n/

[api] Make the pages api read-only

The create/update functionality should only be available in the django admin.
Add tests showing this is not possible from the client facing api.

Data model refactoring

The data model of the application needs to be refactored:

• translate data model to english
• make the data model more general, as currently the model is mostly designed for Bucharest

[CMS] Build page content menu in admin panel

In the admin panel the admin user should see a menu for editing page content.

Navigating to this menu item will display a list with all the pages in the platform.

The admin user can navigate to each element in the list and view details for the page content.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[DevOps] GitHub Actions pipeline for basic checks on master branch for Python

In order to make sure that the master branch is safe, we need to put in place a basic pipeline, using GitHub Actions, for running the basic scripts. The purpose of the pipeline is to ensure we don't push broken functionality in the repository.

The pipeline should make sure that the following scripts can be properly run:

python3 manage.py loaddata buildings
python3 manage.py runserver

[api] Add blog search endpoint

We can consider using a lightweight indexing Django app like https://github.com/etianen/django-watson if the full-text search capabilities of PostgreSQL are insufficient. I would not recommend looking into adding more complexity to our infrastructure, like Elastic or Solr.

[API] Create API for accepted buildings

The API should expose an endpoint from where you can retrieve accepted buildings.

The endpoint should permit filtering based on building "class"

[DevOps] Consider configuring the app through environment variables

Rather than hard-coding things like database host, name, user, Django secret key and other things, we could take them from the environment.

This ensures that our app follows the 12-factor app design principles and makes our lives easier, because it will be easier to pass different configuration depending on the deployment.

Here is how this looks: https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/

Basically, the database settings would look something like this:

DATABASES = {
    "default": {
        "ENGINE": os.environ.get("SQL_ENGINE", "django.db.backends.sqlite3"),
        "NAME": os.environ.get("SQL_DATABASE", os.path.join(BASE_DIR, "db.sqlite3")),
        "USER": os.environ.get("SQL_USER", "user"),
        "PASSWORD": os.environ.get("SQL_PASSWORD", "password"),
        "HOST": os.environ.get("SQL_HOST", "localhost"),
        "PORT": os.environ.get("SQL_PORT", "5432"),
    }
}

We could use django-configurations, which makes it easier to read from the environment. Additionally, it gives us a way to separate development and production settings.

[Map] Dynamically generate the menu for newly-added pages from the CMS

The only pages that should always appear in the top menu are "Despre" (About) and "Contact" pages. The rest of the pages should be generated from the pages created in the CMS

https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk

[CMS] Build maps admin menu

As an admin user of the platform, I want to be able to customise different information for the maps displayed on the frontpage.
For this, I need to have a section in the admin menu where I can upload csv file with locations details, or accept / reject new information about buildings.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[api] Add tests to the pages api

Create a api/tests/test_pages_api.py file that tests the basic view functionality of the pages api. No need to test the create/update methods as those will be removed from the client facing api.

We use the pytest testing framework, make sure you use of all its awesome features. :)

[api] Add S3 settings to the prod config

This is mainly used for storing the blog inline images, but could be used for all other image/file uploads.

[CMS] Import CSV file with details about location of buildings

As an admin user of the platform I want to be able to import a CSV file with the location of buildings, state, seismic risk and other additional information.

The file is the one attached to this issue:.
LISTA imobile PMB completa_2018.xlsx

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[CMS] Build content editing page

As an admin user I want to be able to edit the text content of the pages in the platform, or if there are any files to download from that particular page.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

Implement Django REST framework

To have a more streamlined communication between front-end and back-end, a better, more flexible API should be created to handle the information

[Initialization] Add Postgres database to project

The database for the project will be Postgres.
We need to setup the project to use a local Postgres database.

[CMS] Build page for "Legislatie" page

As part of the platform there will be a page "Legislatie" where much of the legal projects pertaining to the subject will be published

The content of the page should be enabled from the content editing menu of the admin page, including any pages that need attaching.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[Users] Build login form

As an admin user for the project I need to be able to login to the admin platform.
A simple login form needs to be made available, that will display a form containing username/email and password.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

[DevOps] Deploy image to Docker Hub and run image on AWS ECS

Setup a pipeline using Github Actions to:

• deploy docker image to ECR
• create ECS tasks to run image on EC2

[Map] Search locations on map based on address

As a user of the platform, I want to be able to search location on the map based on the address.

Update: The search bar is implemented in the client but there is no connection to the backend. Functionality should be implemented in Django, on the backend.

[Map] Make the map filters dynamic

The map filters made to select the risk level of a building should be generated dynamically, based on the date we have in the database.

https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=2%3A2

[api] Enable the generic authenticaiton views in Django admin

More context here: https://docs.djangoproject.com/en/2.2/topics/auth/default/#module-django.contrib.auth.views

This should allow admins and staff members to reset their passwords in case they forget.

[Map] Add form for inserting new information about building

As a visitor of the platform, I want to be able to have a form where I can fill in details about new buildings, that are not in the platform.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1

Internationalise the interface

All the text displayed should be multilingual, allowing us to deploy the application in different languages
This also allows the display of Romanian strings while at the same time allowing developers to easily understand what those strings represent

Languages supported: en-GB (code language), ro-RO

Mock text can be used in the beginning to not spend much time on translating everything

Relevant React i18n docs:

• https://github.com/i18next/react-i18next
• https://www.freecodecamp.org/news/setting-up-internationalization-in-react-from-start-to-finish-6cb94a7af725

[DevOps] Docker container for running Seismic Risk solution

In order to be able to run the solution, we would need a container running the server.
We are already using a container to run the database.
A Dockerfile should be implemented in order to run both containers.

[Users] Seed initial admin username and password

As part of the project setup, we need to seed the username and password for the admin user.

For the look and feel of the UI check out https://www.figma.com/file/qOyFrU8T6LXnJw7YcoVW85/Seismic-Risk?node-id=0%3A1