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>

    <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" 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>

                    <! -- Knopf für die Einstellungen einer Gewohnheit -->
                    <button type="button" class="btn"
                            style="width: 40px; height: 40px; min-height: 3em;">

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

                    </button>

                    <! -- 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>