roof view if else

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

building_dialouge_webapp/heat/forms.py

@@ -1,6 +1,62 @@
 from django import forms
 
 
+class RoofTypeForm(forms.Form):
+    roof_type = forms.ChoiceField(
+        label="roof_type",
+        choices=[
+            ("flachdach", "Flachdach"),
+            ("satteldach", "Satteldach"),
+            ("walmdach", "Walmdach"),
+        ],
+        widget=forms.RadioSelect,
+    )
+
+
+class RoofDetailsForm(forms.Form):
+    roof_area = forms.IntegerField(
+        label="roof_area",
+        widget=forms.NumberInput(attrs={"class": "form-control"}),
+    )
+    roof_orientation = forms.ChoiceField(
+        label="In welcher Richtung ist ihr Dach ausgerichtet?",
+        choices=[
+            ("n", "N"),
+            ("no", "NO"),
+            ("o", "O"),
+            ("so", "SO"),
+            ("sw", "SW"),
+            ("s", "S"),
+            ("w", "W"),
+            ("nw", "NW"),
+        ],
+        widget=forms.RadioSelect,
+    )
+    number_roof_windows = forms.IntegerField(
+        label="number_of_windows",
+        widget=forms.NumberInput(attrs={"class": "form-control"}),
+    )
+
+
+class RoofInsulationForm(forms.Form):
+    roof_insulation_exists = forms.ChoiceField(
+        label="roof_insulation_exists",
+        choices=[(True, "Yes"), (False, "No")],
+    )
+
+
+class WindowAreaForm(forms.Form):
+    window_area = forms.ChoiceField(
+        label="roof_type",
+        choices=[
+            ("niedrig", "Niedrig"),
+            ("mittel", "Mittel"),
+            ("hoch", "Hoch"),
+        ],
+        widget=forms.RadioSelect,
+    )
+
+
 class ElectricityConsumptionForm(forms.Form):
     household_members = forms.ChoiceField(
         label="Wie viele Personen leben in ihrem Haushalt?",

building_dialouge_webapp/heat/urls.py

@@ -6,4 +6,6 @@
 
 urlpatterns = [
     path("forms/", views.handle_forms, name="forms"),
+    path("roof/", views.roof_view, name="roof"),
+    path("window/", views.window_view, name="window"),
 ]

building_dialouge_webapp/heat/views.py

@@ -8,6 +8,10 @@
 from .forms import HeatGenerationForm
 from .forms import HeatGenerationForm2
 from .forms import HeatStorageForm
+from .forms import RoofDetailsForm
+from .forms import RoofInsulationForm
+from .forms import RoofTypeForm
+from .forms import WindowAreaForm
 
 
 def handle_forms(request):
@@ -52,3 +56,142 @@ def handle_forms(request):
         }
 
     return render(request, "pages/heat_forms.html", context)
+
+
+roof_form_steps = {
+    "roof_type": ["pages/roof.html", "roof_type_form", RoofTypeForm],
+    "roof_details": [
+        "partials/roof_details_partial.html",
+        "roof_details_form",
+        RoofDetailsForm,
+    ],
+    "roof_insulation": [
+        "partials/roof_insulation_partial.html",
+        "roof_insulation_form",
+        RoofInsulationForm,
+    ],
+}
+
+
+def roof_view(request):  # noqa: C901
+    """
+    This view renders the first roof-page load with its forms (GET)
+    or it renders partials with the next forms depending on the input (POST).
+
+    Parameters:
+    - request: HttpRequest object representing the client's request.
+
+    Returns:
+    - render, with the fitting partial and form
+    """
+    session_dict = request.session.get("all_user_answers", {})
+    if request.method == "GET":
+        # needed for simulating a fresh start of the view,
+        # don't use when testing reloading input data
+        request.session.pop("all_user_answers", None)
+        if request.session.get("all_user_answers", {}):
+            forms_to_render = []
+
+            for step, (
+                partial_name,
+                template_variable,
+                form_class,
+            ) in roof_form_steps.items():
+                form_fields = form_class().fields.keys()
+
+                # Check if all fields in this form already have data in the session
+                if all(field in session_dict for field in form_fields):
+                    initial_data = {field: session_dict[field] for field in form_fields}
+                    form = form_class(initial=initial_data)
+                    with open(  # noqa: PTH123
+                        "building_dialouge_webapp/templates/" + partial_name,
+                    ) as file:
+                        partial_as_string = file.read()
+                    forms_to_render.append(
+                        (step, partial_as_string, template_variable, form),
+                    )
+                else:
+                    # If any missing, render this form next without initial data
+                    form = form_class()
+                    with open(  # noqa: PTH123
+                        "building_dialouge_webapp/templates/" + partial_name,
+                    ) as file:
+                        partial_as_string = file.read()
+                    forms_to_render.append(
+                        (step, partial_as_string, template_variable, form),
+                    )
+                    break
+            context = {
+                **{
+                    template_variable: form
+                    for _, _, template_variable, form in forms_to_render
+                },
+                **{
+                    partial_name: partial_as_string
+                    for partial_name, partial_as_string, _, _ in forms_to_render
+                },
+            }
+            return render(request, "pages/roof.html", context)
+
+        partial_name, template_variable, form_class = roof_form_steps["roof_type"]
+
+    if request.htmx:
+        request_dict = request.POST.dict()
+        compare_dict = session_dict | request_dict
+
+        if "flachdach" in compare_dict.values():
+            form = RoofTypeForm(request.POST)
+            if form.is_valid():
+                form_input = form.cleaned_data
+                session_dict.update(form_input)
+                request.session["all_user_answers"] = session_dict
+            partial_name, template_variable, form_class = roof_form_steps[
+                "roof_insulation"
+            ]
+
+        elif (
+            "satteldach" in compare_dict.values() or "walmdach" in compare_dict.values()
+        ) and "roof_area" not in compare_dict:
+            form = RoofTypeForm(request.POST)
+            if form.is_valid():
+                form_input = form.cleaned_data
+                session_dict.update(form_input)
+                request.session["all_user_answers"] = session_dict
+            partial_name, template_variable, form_class = roof_form_steps[
+                "roof_details"
+            ]
+            form_instance = form_class()
+        else:
+            form = RoofDetailsForm(request.POST)
+            if form.is_valid():
+                form_input = form.cleaned_data
+                session_dict.update(form_input)
+                request.session["all_user_answers"] = session_dict
+            partial_name, template_variable, form_class = roof_form_steps[
+                "roof_insulation"
+            ]
+
+    form_instance = form_class()
+    return render(request, partial_name, {template_variable: form_instance})
+
+
+window_form_steps = {
+    "window_area": ["pages/window.html", "window_area_form", WindowAreaForm],
+}
+
+
+def window_view(request):
+    """
+    This view renders the first window-page load with its forms (GET)
+    or it renders partials with the next forms depending on the input (POST).
+
+    Parameters:
+    - request: HttpRequest object representing the client's request.
+
+    Returns:
+    - render, with the fitting partial and form
+    """
+
+    partial_name, template_variable, form_class = window_form_steps["window_area"]
+    form_instance = form_class()
+    return render(request, partial_name, {template_variable: form_instance})

building_dialouge_webapp/static/css/base/_base.scss

@@ -0,0 +1,6 @@
+@import '../base/variables';
+
+body {
+  font-family: Roboto, system-ui, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: $body-color;
+}

building_dialouge_webapp/static/css/base/_variables.scss

@@ -0,0 +1,52 @@
+// Primary palette
+$blue-050: #eff7ff;
+$blue-100: #dcecfd;
+$blue-200: #c1dffc;
+$blue-300: #96ccfa;
+$blue-400: #65aff5;
+$blue-500: #418ff0;
+$blue-600: #2a71e5;
+$blue-700: #235dd2;
+$blue-800: #224bab;
+$blue-900: #214387;
+$blue-950: #192a52;
+
+/* Secondary & Neutral palette */
+$grey-050: #fafafa;
+$grey-100: #f5f5f5;
+$grey-200: #e5e5e5;
+$grey-300: #d4d4d4;
+$grey-400: #a3a3a3;
+$grey-500: #737373;
+$grey-600: #525252;
+$grey-700: #404040;
+$grey-800: #262626;
+$grey-900: #171717;
+$grey-950: #0a0a0a;
+
+$primary-color: $grey-900;
+$secondary-color: $blue-800;
+$body-color: $grey-900;
+$color-white: #ffffff;
+
+// Breakpoints
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-2xl: 1400px;
+$breakpoint-3xl: 1600px;
+
+// Typography
+$font-size-2xl: 2rem;
+$font-size-xl: 1.5rem;
+$font-size-lg: 1.25rem;
+$font-size-md: 1rem;
+$font-size-sm: 0.875rem;
+$font-size-xs: 0.75rem;
+
+$font-weight-bold: 600;
+$font-weight-regular: 400;
+$font-weight-light: 300;
+
+// Border
+$border-color: $grey-400;

building_dialouge_webapp/static/css/components/_buttons.scss

@@ -0,0 +1,44 @@
+@import '../base/variables';
+
+.btn {
+  border-radius: 100px !important;
+
+  &.btn-primary {
+    background-color: $blue-600;
+    color: $color-white;
+    border: 1px solid $blue-600;
+
+    &:hover,
+    &:active {
+      background-color: $blue-800;
+      color: $color-white;
+      border: 1px solid $blue-800;
+    }
+  }
+
+  &.btn-secondary {
+    background-color: $grey-800;
+    color: $color-white;
+    border: 1px solid $grey-800;
+
+    &:hover,
+    &:active {
+      background-color: $grey-950;
+      color: $color-white;
+      border: 1px solid $grey-950;
+    }
+  }
+
+  &.btn-light {
+    background-color: $blue-050;
+    color: $blue-900;
+    border: 1px solid $blue-050;
+
+    &:hover,
+    &:active {
+      background-color: $blue-100;
+      color: $blue-800;
+      border: 1px solid $blue-100;
+    }
+  }
+}

building_dialouge_webapp/static/css/components/_forms.scss

@@ -0,0 +1,25 @@
+@import '../base/variables';
+
+.input-unit {
+  display: flex;
+  align-items: center;
+
+  span {
+    padding: 0 1rem;
+  }
+}
+
+.form-control,
+.form-select {
+  &--sm {
+    max-width:12.5rem;
+  }
+
+  &--md {
+    max-width: 24rem;
+  }
+}
+
+fieldset legend {
+  font-size: $font-size-md;
+}