Merge remote-tracking branch 'origin/master'

app.py

@@ -211,16 +211,6 @@ def habit_create():
     # Back to index
     return redirect(url_for('index'))
 
-    """return render_template(
-        'habit.html',
-        title='Erstelle ein Habit',
-        name=name,
-        note=note,
-        times=times,
-        unit=unit,
-        errors=errors,
-    )"""
-
 
 @app.route('/profile')
 @login_required
@@ -300,28 +290,6 @@ def check_habit():
     for tracking in trackings:
         if tracking.created_at.date() == datetime.date.today():
             delete_tracking = tracking
-        """
-        # day
-        if habit.unit == 0:
-            if tracking.created_at.date() == datetime.date.today():
-                delete_tracking = tracking
-                break
-        # week
-        elif habit.unit == 1:
-            if tracking.created_at.date().isocalendar()[1] == datetime.date.today().isocalendar()[1]:
-                delete_tracking = tracking
-                break
-        # month
-        elif habit.unit == 2:
-            if tracking.created_at.date().month == datetime.date.today().month:
-                delete_tracking = tracking
-                break
-        # year
-        elif habit.unit == 3:
-            if tracking.created_at.date().year == datetime.date.today().year:
-                delete_tracking = tracking
-                break
-                """
 
     if not delete_tracking:
         HabitTrackings.create(habit_id, 1)

db/SQLiteClient.py

@@ -140,20 +140,22 @@ def get_slots(user_id: int):
     return slots
 
 
-def update_habit(id: int, name: str, note: str, times: int, unit: int):
-    query = f"UPDATE habits SET name = {name}, note = {note}, times = {times}, unit = {unit} WHERE id = {id};"
-    conn = con3()
-    cursor = conn.cursor()
-    cursor.execute(query)
-    conn.close()
-    return cursor.lastrowid
-
-
 def update_slot(id: int, slot: int):
     query = f"UPDATE habits SET slot = {slot} WHERE id = {id};"
     conn = con3()
     cursor = conn.cursor()
     cursor.execute(query)
+    conn.commit()
+    conn.close()
+    return cursor.lastrowid
+
+
+def update_habit(id: int, name: str, note: str, times: int, unit: int):
+    query = f"UPDATE habits SET name = {name}, note = {note}, times = {times}, unit = {unit} WHERE id = {id};"
+    conn = con3()
+    cursor = conn.cursor()
+    cursor.execute(query)
+    conn.commit()
     conn.close()
     return cursor.lastrowid
 
@@ -210,4 +212,6 @@ def delete_habitTrackings(id: int):
 
 
 if __name__ == "__main__":
-    pass
+    habits = get_habits(1)
+    for habit in habits:
+        print(habit[6])

models/Habit.py

@@ -108,3 +108,5 @@ class Habit:
         self.percentage = int(count / self.times * 100)
 
 
+    def to_json(self):
+        return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4)

templates/index.html

@@ -89,9 +89,12 @@
             </a>
         </div>
 
-        <ul class="task-list row">
+        <ul class="task-list row draggable-list" id="draggable-list">
             {% for habit in habits %}
-            <li class="row d-flex align-items-center mb-2" id="habit-{{habit.id}}">
+            <li class="row d-flex align-items-center mb-2 draggable" id="habit-{{habit.id}}" draggable="true">
+                <div class="col-auto drag-handle" style="cursor: grab;">
+                    <i class="bi bi-grip-vertical"></i>
+                </div>
                 <div class="col-auto">
                     <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox" id="{{habit.id}}" onclick="sendPostRequest('{{habit.id}}')">
                 </div>
@@ -154,7 +157,7 @@
             var progressBar = document.getElementById("progress-bar-" + habitId);
             var habitBlock = document.getElementById("habit-" + habitId);
 
-            if (percentage >= 100) {
+            if (percentage == 100) {
                 progressBar.style.backgroundColor = "green";
                 habitBlock.classList.add("animate-bounce");
                 setTimeout(function () {
@@ -214,6 +217,112 @@
             });
         }
     </script>
-</div>
 
+</div>
+<script>
+    const draggable_list = document.getElementById('draggable-list');
+    const check = document.getElementById('check');
+
+    const richestPeople = [
+        'Jeff Bezos',
+        'Bill Gates',
+        'Warren Buffett',
+        'Bernard Arnault',
+        'Carlos Slim Helu',
+        'Amancio Ortega',
+        'Larry Ellison',
+        'Mark Zuckerberg',
+        'Michael Bloomberg',
+        'Larry Page'
+    ];
+
+    // Store listitems
+    const listItems =
+
+    let dragStartIndex;
+
+    createList();
+
+    // Insert list items into DOM
+    function createList() {
+        [...richestPeople]
+            .map(a => ({ value: a, sort: Math.random() }))
+            .sort((a, b) => a.sort - b.sort)
+            .map(a => a.value)
+            .forEach((person, index) => {
+                const listItem = document.createElement('li');
+
+                listItem.setAttribute('data-index', index);
+
+                listItem.innerHTML = `
+        <span class="number">${index + 1}</span>
+        <div class="draggable" draggable="true">
+          <p class="person-name">${person}</p>
+          <i class="fas fa-grip-lines"></i>
+        </div>
+      `;
+
+                listItems.push(listItem);
+
+                draggable_list.appendChild(listItem);
+            });
+
+        addEventListeners();
+    }
+
+    function dragStart() {
+        // console.log('Event: ', 'dragstart');
+        dragStartIndex = +this.closest('li').getAttribute('data-index');
+    }
+
+    function dragEnter() {
+        // console.log('Event: ', 'dragenter');
+        this.classList.add('over');
+    }
+
+    function dragLeave() {
+        // console.log('Event: ', 'dragleave');
+        this.classList.remove('over');
+    }
+
+    function dragOver(e) {
+        // console.log('Event: ', 'dragover');
+        e.preventDefault();
+    }
+
+    function dragDrop() {
+        // console.log('Event: ', 'drop');
+        const dragEndIndex = +this.getAttribute('data-index');
+        swapItems(dragStartIndex, dragEndIndex);
+
+        this.classList.remove('over');
+    }
+
+    // Swap list items that are drag and drop
+    function swapItems(fromIndex, toIndex) {
+        const itemOne = listItems[fromIndex].querySelector('.draggable');
+        const itemTwo = listItems[toIndex].querySelector('.draggable');
+
+        listItems[fromIndex].appendChild(itemTwo);
+        listItems[toIndex].appendChild(itemOne);
+    }
+
+    function addEventListeners() {
+        const draggables = document.querySelectorAll('.draggable');
+        const dragListItems = document.querySelectorAll('.draggable-list li');
+
+        draggables.forEach(draggable => {
+            draggable.addEventListener('dragstart', dragStart);
+        });
+
+        dragListItems.forEach(item => {
+            item.addEventListener('dragover', dragOver);
+            item.addEventListener('drop', dragDrop);
+            item.addEventListener('dragenter', dragEnter);
+            item.addEventListener('dragleave', dragLeave);
+        });
+    }
+
+    check.addEventListener('click', checkOrder);
+</script>
 {% endblock %}

templates/layouts/main.html

@@ -5,10 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" >
     <title>{{ title }} - HabitTracker</title>
 
-    <!-- Bootstrap CSS -->
+    <!-- CSS -->
     <link rel="stylesheet" href="/static/main.css">
     <link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Axios Library-->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -53,6 +54,8 @@
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </div>
 </body>
 </html>