HabitTracker/templates/components/habit_lists.html

<div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">

    <!-- Listen erstellen -->
    <div class="row mb-3">
        <h5 class="col-9">
            📋 Gewohnheiten
        </h5>

        <a class="col-3 btn btn-primary p" role="button" href="/habit-list">
            Neue Liste erstellen
        </a>
    </div>

    <!-- Tabs zur Auswahl -->
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
        {% for habit_list in habit_lists %}

        <li class="nav-item" role="presentation">
            <a class="nav-link {% if habit_list == habit_lists[0] %} active {% endif %}"
               id="simple-tab-{{habit_list.id}}"
               data-bs-toggle="tab" href="#simple-tabpanel-{{habit_list.id}}" role="tab"
               aria-controls="simple-tabpanel-{{habit_list.id}}" aria-selected="true">
                {{habit_list.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Select all the tab links
            const tabLinks = document.querySelectorAll('.nav-link');

            tabLinks.forEach(function(link) {
                // Add a click event listener to each tab link
                link.addEventListener('click', function(e) {
                    // Prevent the default action
                    e.preventDefault();

                    // Get the tab ID
                    const tabId = this.getAttribute('href').match(/simple-tabpanel-(\d+)/)[1];

                    // Update the URL with the new query parameter
                    const newUrl = updateQueryStringParameter(window.location.href, 'list', tabId);
                    window.history.pushState({path:newUrl}, '', newUrl);
                });
            });

            // Update the URL with the new query parameter
            function updateQueryStringParameter(uri, key, value) {
                var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
                if (uri.match(re)) {
                    return uri.replace(re, '$1' + key + "=" + value + '$2');
                }
                else {
                    return uri + separator + key + "=" + value;
                }
            }
        });
    </script>

    <div class="tab-content pt-5" id="tab-content">
        {% for habit_list in habit_lists %}
        <div class="tab-pane {% if habit_list == habit_lists[0] %} active {% endif %}"
             id="simple-tabpanel-{{habit_list.id}}" role="tabpanel" aria-labelledby="simple-tab-{{habit_list.id}}">
            <div class="row mb-3 align-items-center">

                <!-- Personen die zur Liste gehören -->
                <div class="col-2">
                    <div class="avatar-stack">
                        <img class="avatar" src="/images/avatar/1.jpg"/>
                        <img class="avatar" src="/images/avatar/2.jpg"/>
                        <img class="avatar" src="/images/avatar/4.jpg"/>
                        <img class="avatar" src="/images/avatar/5.jpg"/>
                    </div>
                </div>

                <!-- Knopf für das Hinzufügen einer Person zur gemeinsamen Liste -->
                <div class="col-1">
                    <button type="button" class="btn"
                            style="width: 40px; height: 40px; min-height: 3em;">

                        <i class="bi bi-plus"></i>

                    </button>
                </div>

                <div class="col-6"></div>

                <!-- neue Gewohnheiten erstellen -->
                <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">
                    Gewohnheit erstellen
                </a>
            </div>

            <ul class="task-list row">
                {% for habit in habit_list.habits %}
                <li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">

                    <!-- Handle zum verschieben -->
                    <div class="col-auto drag-handle" style="cursor: grab;">
                        <i class="bi bi-grip-vertical"></i>
                    </div>

                    <!-- Checkbox -->
                    <div class="col-auto">
                        <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
                               id="{{ habit.id }}"
                               onclick="sendPostRequest('{{ habit.id }}')">
                    </div>

                    <!-- Name -->
                    <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                        {{ habit.name }}
                    </div>

                    <!-- Beschreibung -->
                    <div class="col-md-3 d-none d-md-block text-black text-opacity-50"
                         style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                        {{ habit.note }}
                    </div>

                    <!-- Streak -->
                    <div class="col-2" id="streak-{{ habit.id }}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                        {% if not habit.streak == 0 %}
                        {{ habit.streak }} 🔥
                        {% endif %}
                    </div>

                    <!-- Knopf für das Löschen einer Gewohnheit -->
                    <button type="button" class="btn btn-xs me-3" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" style="width: 40px; height: 40px"
                            onclick="setSelectedHabitId({{ habit.id }})">
                        <i class="bi bi-trash3"></i>
                    </button>

                    <!--  -->
                    <a type="button" class="btn" href="{{ url_for('edit_habit') }}?habit={{ habit.id }}" aria-current="page"
                            style="width: 40px; height: 40px; min-height: 3em;">

                        <i class="bi bi-pencil"></i>
                    </a>

                    <!-- Progressbar -->
                    <div class="col-12">
                        <div class="progress" style="height: 2px; width: 90%">
                            <div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"
                                 style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}"
                                 aria-valuenow="{{ habit.percentage }}" aria-valuemin="0"
                                 aria-valuemax="100"></div>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>

</div>

<script>
            var selectedHabitId = null;

            function setSelectedHabitId(habitId) {
                selectedHabitId = habitId;
            }


</script>