HabitTracker/templates/edit-habit.html

{% extends 'index.html' %}

{% block content %}
<div class="card bg-light p-5 mt-5">
    <h1>Habit Bearbeiten📋</h1>

    <form action="/edit-habit" method="POST">
        <div class="mb-3">
            <label for="name" class="form-label">Name der Gewohnheit</label>
            <input type="text" class="form-control {% if errors.get('name') %} is-invalid {% endif %}" id="name"
                   name="name" value="{{name}}">
            <div class="invalid-feedback">
                {{ errors.get('name', '') }}
            </div>
        </div>
        <div class="mb-3">
            <label for="note" class="form-label">Beschreibung</label>
            <input type="text" class="form-control {% if errors.get('note') %} is-invalid {% endif %}" id="note"
                   name="note" value="{{note}}">
            <div class="invalid-feedback">
                {{ errors.get('note', '') }}
            </div>
        </div>

        <div class="row">
            <div class="mb-3 col-2">
                <label for="times" class="form-label">Häufigkeit</label>
                <input type="number" min="1" class="form-control {% if errors.get('times') %} is-invalid {% endif %}"
                       id="times" name="times" value="{{times}}">
                <div class="invalid-feedback">
                    {{ errors.get('times', '') }}
                </div>
            </div>
            <div class="mb-3 col-10">
                <label for="unit" class="form-label">Im Zeitraum</label>
                <select class="form-select {% if errors.get('unit') %} is-invalid {% endif %}" id="unit" name="unit">
                    <option value="Tag">Tag</option>
                    <option value="Woche">Woche</option>
                    <option value="Monat">Monat</option>
                    <option value="Jahr">Jahr</option>
                </select>
                <script>
                document.addEventListener('DOMContentLoaded', (event) => {
                    let selectedElement = document.getElementById('unit');

                    for (let option of selectedElement.options) {
                        if (option.value == '{{ unit }}') {
                            option.selected = true;
                            break;
                        }
                    }
                });

                </script>
                <div class="invalid-feedback">
                    {{ errors.get('unit', '') }}
                </div>
            </div>
        </div>

        <input type="hidden" name="habit" id="habit" class="{% if errors.get('habit') %} is-invalid {% endif %}">
        <div class="invalid-feedback">
            {{ errors.get('list_query', '') }}
        </div>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Extracting the list-query from the URL
            var listQuery = new URLSearchParams(window.location.search).get('habit');

            if ("{{ habit }}" != "") {
                listQuery = "{{ habit }}";

                // Add the list_id to the URL
                var url = new URL(window.location.href);
                url.searchParams.set('habit', listQuery);
                // window.history.pushState({}, '', url);
            }

            // Setting the list-query as the value of the hidden input field
            document.getElementById('habit').value = listQuery;
        });

        </script>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
{% endblock %}