Merge pull request #31 from rl-institut/feature/fsm_roof_view

Feature/fsm roof view

.gitignore

@@ -170,6 +170,7 @@ typings/
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
+.idea/
 # User-specific stuff:
 .idea/**/workspace.xml
 .idea/**/tasks.xml

Makefile

@@ -0,0 +1,23 @@
+
+.PHONY : update_vendor_assets
+
+update_vendor_assets:
+	# Note: call this command from the same folder your Makefile is located
+	# Note: this run only update minor versions.
+	# Update major versions manually, you can use "ncu" for this.
+	# https://nodejs.dev/en/learn/update-all-the-nodejs-dependencies-to-their-latest-version/#update-all-packages-to-the-latest-version
+
+	# Update
+	npm update
+
+	# Bootstrap https://github.com/twbs/bootstrap
+	rm -r building_dialouge_webapp/static/vendors/bootstrap/scss/*
+	cp -r node_modules/bootstrap/scss/* building_dialouge_webapp/static/vendors/bootstrap/scss/
+	rm -r building_dialouge_webapp/static/vendors/bootstrap/js/*
+	cp node_modules/bootstrap/dist/js/bootstrap.min.js* building_dialouge_webapp/static/vendors/bootstrap/js/
+
+	# HTMX https://htmx.org/
+	rm -r building_dialouge_webapp/static/vendors/htmx/js/*
+	cp node_modules/htmx.org/dist/htmx.min.js building_dialouge_webapp/static/vendors/htmx/js/
+
+	# Done

README.md

@@ -86,3 +86,81 @@ The following details how to deploy this application.
 ### Docker
 
 See detailed [cookiecutter-django Docker documentation](http://cookiecutter-django.readthedocs.io/en/latest/deployment-with-docker.html).
+
+
+## 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="help-background"></div>
+        <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"),
+```