diff --git a/app/locale/de/LC_MESSAGES/django.po b/app/locale/de/LC_MESSAGES/django.po index deacd4d3..e380c847 100644 --- a/app/locale/de/LC_MESSAGES/django.po +++ b/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" diff --git a/app/projects/forms.py b/app/projects/forms.py index 57d89693..c752bcc5 100644 --- a/app/projects/forms.py +++ b/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( + '', + 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"), diff --git a/app/projects/templatetags/custom_filters.py b/app/projects/templatetags/custom_filters.py index 7c54cf49..b052c354 100644 --- a/app/projects/templatetags/custom_filters.py +++ b/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 diff --git a/app/static/css/main.css b/app/static/css/main.css index 4ac250f1..ea7f80ac 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -1189,6 +1189,37 @@ form .form-check-input:focus { form .form-check-input:checked { background-color: #1F567D; } +form .toggle-switch { + position: relative; + display: inline-block; + width: 48px; + height: 24px; } + form .toggle-switch input { + opacity: 0; + width: 0; + height: 0; } + form .toggle-switch .toggle-slider { + position: absolute; + cursor: pointer; + inset: 0; + background-color: #E3EAEE; + border-radius: 24px; + transition: 0.3s; } + form .toggle-switch .toggle-slider::before { + content: ""; + position: absolute; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: #fff; + border-radius: 50%; + transition: 0.3s; } + form .toggle-switch input:checked + .toggle-slider { + background-color: #1F567D; } + form .toggle-switch input:checked + .toggle-slider::before { + transform: translateX(24px); } + form .form-group { margin-bottom: 1rem; color: #343434; } diff --git a/app/static/scss/components/_forms.scss b/app/static/scss/components/_forms.scss index 47c2959f..94db7e92 100644 --- a/app/static/scss/components/_forms.scss +++ b/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; diff --git a/app/templates/asset/asset_create_form.html b/app/templates/asset/asset_create_form.html index 484bd4ba..16c66b1d 100644 --- a/app/templates/asset/asset_create_form.html +++ b/app/templates/asset/asset_create_form.html @@ -42,6 +42,23 @@