README.md

Building Dialouge Webapp

Webapp für die Wärmewende

License: MIT

Settings

Moved to settings.

Deployment

The following details how to deploy this application.

Docker

See detailed cookiecutter-django Docker documentation.

Installation

Docker

Build dev container with

docker-compose -f local.yml up -d --build

or for production (requires manual creation of .envs/.production/.django):

docker-compose -f production.yml up -d --build

Local

1. Clone repo, setup virtual environment and install

git clone [email protected]:rl-institut/bd_app.git
cd bd_app
virtualenv venv
source venv/bin/activate
pip install uv
pip install -r ./requirements/local.txt
pip install git+https://github.com/oemof/oemof-tabular.git
pip install --upgrade django-compressor

2. Setup local PostgreSQL server and configure using pgadmin4 (Linux)

• Install: sudo apt install postgresql pgadmin4
• Start pgadmin4
  • Create database "building_dialouge_webapp"
  • Create user "bd_user" with some password, e.g. "my_bd_user_pass"
• Grant write permissions to this DB for the user
• Activate postGIS via SQL query: CREATE EXTENSION postgis;

3. Create .env file with the following content

# General
# ------------------------------------------------------------------------------
USE_DOCKER=yes
IPYTHONDIR=/app/.ipython
# Redis
# ------------------------------------------------------------------------------
REDIS_URL=redis://redis:6379/0

# Celery
# ------------------------------------------------------------------------------

CELERY_BROKER_URL=redis://redis:6379/0

# Flower
CELERY_FLOWER_USER=dVSdYOthZmldNnHOnGLAgKhnETvRbOXs
CELERY_FLOWER_PASSWORD=YbGI8ju9tsiODB0ACmcEGC1yMoOe3BI51PwV8niA6AH6oXLPMQ6Fahc3NWFHaQlK

# PostgreSQL
# ------------------------------------------------------------------------------
POSTGRES_HOST=postgres
POSTGRES_PORT=5432
POSTGRES_DB=building_dialouge_webapp
POSTGRES_USER=bd_user
POSTGRES_PASSWORD=my_bd_user_pass

DATABASE_URL=postgres://bd_user:GWzBcADhGhvhY0VRQvm9dD2LTMnEIplVmzNjAEkZNoF2T87leMSiRHiSReK2hlmC@localhost:5432/building_dialouge_webapp

(make sure you use the same password in POSTGRES_PASSWORD as in step 2)

4. Activate the .env file

Run export DJANGO_READ_DOT_ENV=True; - ff this fails, try source .env

5. Migrate and start app

python manage.py migrate
python manage.py runserver

6. Clone oeprom oemof datapackage into building_dialouge_webapp/media/oemof

cd building_dialouge_webapp/media/oemof
git clone https://github.com/elmo-z/buildingDialogue.git

7. In order to use django-oemof, you must start celery and redis parallel to runserver. You can use make command to do so

make celery

This will run celery app in background and wait for oemof simulations to run. You can trigger oemof simulation with following minimal script:

import requests

URL = "http://localhost:8000/oemof/simulate"
SCENARIO = "oeprom"
PARAMETERS = {}
SESSION_ID = "lqttrapsbrwdowjb9w5x392mdgkaibk5"  # look up in browser

data = {"scenario": SCENARIO, "parameters": PARAMETERS}
response = requests.post(URL, data=data, headers={"Cookie": f"sessionid={SESSION_ID}"})
print(response.status_code, response.text)

Add dependencies

This can be done in requirements/ folder by adding dependency to related *.in file and compile/lock dependencies. Via uv (you must install uv first - recommended!):

uv pip compile -o requirements/local.txt requirements/local.in
uv pip compile -o requirements/production.txt requirements/production.in

or via pip-compile (you must install pip-tools first):

pip-compile -o requirements/local.txt requirements/local.in
pip-compile -o requirements/production.txt requirements/production.in

Adding new Flows

1. Forms

add the forms needed for the flow. For each moment in the flow where a decision in the form / from the user will cause a diffrent form being rendered afterwards, that decision needs it's own form

2. Flow

start the Flow with a nice descriptive Name: for example "RoofFlow"

class RoofFlow(Flow):
template_name = "path_to_template/name_of_template.html"

    def __init__(self):
        super().__init__()
        self.start = State(
            ...
        ).transition(
            ...,
        )

        # add more States in here

        self.end = EndState(self, url="url_to_next_flow_or_view")

You can use these States:

• FormState(self, name="roof_type", form_class=forms.NameOfForm,)
• EndState(self, url="url_to_next_flow_or_view")
• if you want to add helptext to a Form, create a partial (a separate html file) and add it to the corresponding state with the template_name parameter

You can use these Transitions:

• Next("name_of_the_next_state")
• Switch("name_of_the_field_that_will_cause_the_switch").case("returned value of the field", "name of next state").default("name_of_the_next_state") you can add as many cases as you need

It is important, that the name_of_the_next_state in the transition is the same as a state that you are declaring later (self.name_of_the_next_state = State(...) )

3. Template

Create a template with a fitting name: for example roof.html use this base structure:

    {% extends "base.html" %}

    {% block content %}
    <section class="position-relative h-100 flex-grow-1 pb-5">
        <div class="step-title">
            <div class="step-container">
                <div class="main">
                    <h1>Title of Page</h1>
                </div>
            </div>
        <div class="help"></div>
        </div>
        <div id="name_attribute_of_state">{{ name_attribute_of_state.content | safe }}</div>
    </section>
    {% endblock content %}

For a helptext partial you can use this structure: for example roof_help.html

    <div class="step-question">
        <div class="step-container">
            <div class="main">{{ form }}</div>
        </div>
        <div class="help">
            <span>Flachdach:&nbsp;</span>Ein Flachdach ist ein Dach mit einer sehr geringen Neigung, das fast waagerecht verläuft.
        </div>
    </div>

4. URL

add the Flow to the url like this:

    path("roof/", flows.RoofFlow.as_view(), name="roof"),