Add toggle switch boolean fields

app/locale/de/LC_MESSAGES/django.po

@@ -1008,6 +1008,9 @@ msgstr "Wirtschaftliche Parameter"
 msgid "Technical parameters"
 msgstr "Technische Parameter"
 
+msgid "Settings"
+msgstr "Einstellungen"
+
 #: templates/asset/asset_create_form.html:68
 msgid "Calculate COP from temperature"
 msgstr "COP aus Temperatur berechnen"

app/projects/forms.py

@@ -694,6 +694,18 @@ class Meta:
         labels = {"name": _("Name"), "type": _("Energy carrier")}
 
 
+class ToggleSwitchWidget(forms.CheckboxInput):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+    def render(self, name, value, attrs=None, renderer=None):
+        checkbox_html = super().render(name, value, attrs, renderer)
+        return format_html(
+            '<label class="toggle-switch">{}<span class="toggle-slider"></span></label>',
+            checkbox_html,
+        )
+
+
 class AssetCreateForm(OpenPlanModelForm):
     def __init__(self, *args, **kwargs):
         self.asset_type_name = kwargs.pop("asset_type", None)
@@ -1036,9 +1048,9 @@ class Meta:
         model = Asset
         exclude = ["scenario"]
         widgets = {
-            "optimize_cap": forms.Select(choices=BOOL_CHOICES),
-            "dispatchable": forms.Select(choices=TRUE_FALSE_CHOICES),
-            "renewable_asset": forms.Select(choices=BOOL_CHOICES),
+            "optimize_cap": ToggleSwitchWidget(),
+            "dispatchable": ToggleSwitchWidget(),
+            "renewable_asset": ToggleSwitchWidget(),
             "name": forms.TextInput(
                 attrs={
                     "placeholder": _("Asset Name"),

app/projects/templatetags/custom_filters.py

@@ -80,6 +80,16 @@ def has_field(form, key):
     return key in form.fields
 
 
+@register.filter
+def has_toggle_parameters(form):
+    answer = False
+    for field in form.fields:
+        if is_toggle_parameter(field):
+            answer = True
+            break
+    return answer
+
+
 @register.filter
 def has_economical_parameters(form):
     answer = False
@@ -100,6 +110,11 @@ def has_technical_parameters(form):
     return answer
 
 
+@register.filter
+def is_toggle_parameter(param):
+    return param in ["optimize_cap", "dispatchable", "renewable_asset"]
+
+
 @register.filter
 def is_economical_parameter(param):
     return param in [
@@ -116,8 +131,9 @@ def is_economical_parameter(param):
 def is_technical_parameter(param):
     if param == "name":
         return False
-    else:
-        return not is_economical_parameter(param)
+    if is_toggle_parameter(param):
+        return False
+    return not is_economical_parameter(param)
 
 
 @register.filter

app/static/scss/components/_forms.scss

@@ -21,6 +21,47 @@ form {
     background-color: $primary-color-1;
   }
 
+  .toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 48px;
+    height: 24px;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .toggle-slider {
+      position: absolute;
+      cursor: pointer;
+      inset: 0;
+      background-color: $primary-gray-color-2;
+      border-radius: 24px;
+      transition: 0.3s;
+
+      &::before {
+        content: "";
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: $white;
+        border-radius: 50%;
+        transition: 0.3s;
+      }
+    }
+
+    input:checked + .toggle-slider {
+      background-color: $primary-color-1;
+
+      &::before {
+        transform: translateX(24px);
+      }
+    }
+  }
   .form-group {
     margin-bottom: 1rem;
     color: $primary-color-2;

app/templates/asset/asset_create_form.html

@@ -42,6 +42,23 @@ <h3>{% translate "Results" %}</h3>
               {% endif %}
       </div>
     {% endif %}
+    {% if form|has_toggle_parameters %}
+      <div class="row">
+        <div class="col">
+          <h3>{% translate "Settings" %}</h3>
+          <div class="d-flex gap-5">
+            {% for field in form %}
+              {% if field.name|is_toggle_parameter %}
+                <div class="form-group{% if field.errors %} invalid{% endif %}">
+                  {{ field }}
+                  <label>{{ field.label }}</label>
+                </div>
+              {% endif %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endif %}
     <div class="row align-items-start">
       {% if form|has_economical_parameters %}
         <div class="col">