CimeyClust/HabitTracker
1
1
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

Merge branch 'master' of https://repo.cimeyclust.com/CimeyClust/HabitTracker

Browse Source
This commit is contained in:
Yapollon 2024-02-28 14:14:20 +01:00
commit 8f57c2d9e3
2 changed files with 70 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
templates/components/habit_lists.html
View File

@ -1,6 +1,6 @@
<div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
<! -- Listen erstellen -->
<!-- Listen erstellen -->
<div class="row mb-3">
<h5 class="col-9">
📋 Gewohnheiten
@ -11,7 +11,7 @@
</a>
</div>
<! -- Tabs zur Auswahl -->
<!-- Tabs zur Auswahl -->
<ul class="nav nav-tabs card-header-tabs" role="tablist">
{% for habit_list in habit_lists %}
@ -25,6 +25,39 @@
</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 %}
@ -32,7 +65,7 @@
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 -->
<!-- Personen die zur Liste gehören -->
<div class="col-2">
<div class="avatar-stack">
<img class="avatar" src="/images/avatar/1.jpg"/>
@ -42,7 +75,7 @@
</div>
</div>
<! -- Knopf für das Hinzufügen einer Person zur gemeinsamen Liste -->
<!-- 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;">
@ -54,7 +87,7 @@
<div class="col-6"></div>
<! -- neue Gewohnheiten erstellen -->
<!-- neue Gewohnheiten erstellen -->
<a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">
Gewohnheit erstellen
</a>
@ -64,30 +97,30 @@
{% for habit in habit_list.habits %}
<li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
<! -- Handle zum verschieben -->
<!-- Handle zum verschieben -->
<div class="col-auto drag-handle" style="cursor: grab;">
<i class="bi bi-grip-vertical"></i>
</div>
<! -- Checkbox -->
<!-- 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 -->
<!-- Name -->
<div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{{ habit.name }}
</div>
<! -- Beschreibung -->
<!-- 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 -->
<!-- Streak -->
<div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{% if not habit.streak == 0 %}
{{ habit.streak }} 🔥
@ -95,14 +128,14 @@
</div>
<! -- Knopf für das Löschen einer Gewohnheit -->
<!-- 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 -->
<!-- Knopf für die Einstellungen einer Gewohnheit -->
<button type="button" class="btn"
style="width: 40px; height: 40px; min-height: 3em;">
@ -110,7 +143,7 @@
</button>
<! -- Progressbar -->
<!-- Progressbar -->
<div class="col-12">
<div class="progress" style="height: 2px; width: 90%">
<div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"

44
templates/components/scripts.html
View File

@ -66,27 +66,31 @@
document.addEventListener('DOMContentLoaded', (event) => {
var el = document.querySelector('.task-list');
Sortable.create(el, {
handle: '.drag-handle',
animation: 150,
onEnd: function (evt) {
var habitId = el.children[evt.newIndex].id.split('-')[1];
var oldIndex = evt.oldIndex;
var newIndex = evt.newIndex;
var elements = document.querySelectorAll('.task-list').values()
axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
// Handle the success response if needed
}).catch(function (error) {
// Handle the error if needed
console.error('Error:', error);
});
}
});
// loop through the elements
for (let el of elements) {
Sortable.create(el, {
handle: '.drag-handle',
animation: 150,
onEnd: function (evt) {
var habitId = el.children[evt.newIndex].id.split('-')[1];
var oldIndex = evt.oldIndex;
var newIndex = evt.newIndex;
axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
// Handle the success response if needed
}).catch(function (error) {
// Handle the error if needed
console.error('Error:', error);
});
}
});
}
});