diff --git a/.DS_Store b/.DS_Store index 13d74f4..00ee53a 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/app/static/app/css/custom.css b/app/static/app/css/custom.css index b294ef0..1e83e8b 100644 --- a/app/static/app/css/custom.css +++ b/app/static/app/css/custom.css @@ -13,9 +13,26 @@ @keyframes fade-in { 0% { opacity: 0; + visibility:hidden; + position: absolute; } 100% { opacity: 1; + visibility: visible; + position: relative; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + visibility: visible; + position: relative; + } + 100% { + opacity: 0; + visibility:hidden; + position: absolute; } } @@ -28,6 +45,35 @@ } } +@keyframes openMonthArea { + 0% { + height: 15vh; + margin-top: 1.5rem; + } + 100% { + height: 20vh; + margin-top: 1.5rem; + } +} + +@keyframes shrinkActivitys { + 0% { + height: 40vh; + } + 100% { + height: 35vh; + } +} + +@keyframes growActivitys { + 0% { + height: 35vh; + } + 100% { + height: 40vh; + } +} + @keyframes openSettingscolor { 0% { height: 6vh; @@ -55,6 +101,17 @@ } } +@keyframes closeMonthArea { + 0% { + height: 20vh; + margin-top: 1.5rem; + } + 100% { + height: 15vh; + margin-top: 1.5rem; + } +} + .HeaderDefaultHeightbg { height: 7vh; } @@ -71,9 +128,31 @@ animation: fade-in 1s forwards; } +.fade-out { + animation: fade-out 1s forwards; +} + .openSettingsbg { animation: openSettingsbg 1s forwards; } + +.openMonthArea { + animation: openMonthArea 1s forwards; + /* margin-top: -3rem; */ +} + +.closeMonthArea { + animation: closeMonthArea 1s forwards; +} + +.shrinkActivitys { + animation: shrinkActivitys 1s forwards; +} + +.growActivitys { + animation: growActivitys 1s forwards; +} + .closeSettingsbg { animation: closeSettingsbg 1s forwards; } @@ -85,6 +164,15 @@ animation: closeSettingscolor 1s forwards; } +.monthEntrys { + opacity: 0; + position: absolute; +} + +#dashbord_month_area { + height: 15vh; +} + .header-bg-block { padding: 0; overflow: hidden; diff --git a/app/static/app/js/home.js b/app/static/app/js/home.js index 03977a4..513ffde 100644 --- a/app/static/app/js/home.js +++ b/app/static/app/js/home.js @@ -5,7 +5,10 @@ const NewEntryButton = document.getElementById('newEntrySubmitButton') const SETStudySaveButton = document.getElementById('SETStudySaveButton') const SETMonthGoalSaveButton = document.getElementById('SETMonthGoalSaveButton') var allowToSend = false; - +const monate = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]; +const aktuellerMonat = monate[new Date().getMonth()]; +// Aktuelles Datum +const currentDate = new Date(); // @@ -154,11 +157,11 @@ SETMonthGoalSaveButton.addEventListener('click', () => { }) -async function getActualDataAndFillView() { +async function getActualDataAndFillView(monat = currentDate.getMonth() + 1, jahr = currentDate.getFullYear()) { try { - // Aktuelles Datum - const currentDate = new Date(); + // Einfüfen des aktuellen Monats + document.getElementById('actualMonthName').innerHTML = monate[monat - 1]; // Settings vor ausfüllen @@ -174,7 +177,7 @@ async function getActualDataAndFillView() { }); // Filter funktion aufrufen und entsprechend mit dem aktuellen Datum füllen - const filteredEntries = await filterEntriesByMonthYear(currentDate.getMonth() + 1, currentDate.getFullYear()); + const filteredEntries = await filterEntriesByMonthYear(monat, jahr); // Tabelle mit den aktuellen informationen füllen (funktion triggern und Daten übergeben) fillTableWithEntries(filteredEntries) @@ -337,6 +340,64 @@ document.getElementById('DeleteEntryButton').addEventListener('click', () => { }) +// +// MONATSANSICHT Anpassen +// + +const monthEntrys = document.querySelectorAll('.monthEntrys'); +var diffMonth = 0 + +document.getElementById('dashbord_month_area').addEventListener('click', () =>{ + if (!document.getElementById('dashbord_month_area').classList.contains('ActiveMonth')) { + document.getElementById('dashbord_month_area').classList.replace('closeMonthArea', 'openMonthArea') + document.getElementById('dashbord_month_area').classList.add(['openMonthArea']) + document.getElementById('dashbord_month_area').classList.add(['ActiveMonth']) + document.getElementById('ActivitysTable').classList.add(['shrinkActivitys']) + document.getElementById('ActivitysTable').classList.replace('growActivitys', 'shrinkActivitys') + document.getElementById('dashbord_month_area').classList.remove('mt-4') + // document.getElementById('dashbord_year_area').classList.add('fade-out') + // Für jedes ausgewählte Element die neue Klasse hinzufügen + setTimeout(function() { + monthEntrys.forEach(element => { + if (element.classList.contains('fade-out')) { + element.classList.replace('fade-out', 'fade-in'); + } else { + element.classList.add('fade-in'); + } + }); + document.getElementById('MonthNameOfActual').innerHTML = "Aktuell:" + }, 300); + } else { + document.getElementById('dashbord_month_area').classList.remove('ActiveMonth') + document.getElementById('dashbord_month_area').classList.replace('openMonthArea', 'closeMonthArea') + document.getElementById('ActivitysTable').classList.replace('shrinkActivitys', 'growActivitys') + monthEntrys.forEach(element => { + element.classList.replace('fade-in', 'fade-out'); + }); + document.getElementById('MonthNameOfActual').innerHTML = "Monat:" + // document.getElementById('actualMonthName').innerHTML = monate[new Date().getMonth()]; + diffMonth = 0; + getActualDataAndFillView(new Date().getMonth() + diffMonth + 1) + } +}) + +document.getElementById('btn-month-before').addEventListener('click', () =>{ + diffMonth = ((monate[new Date().getMonth() + diffMonth]) != 'September') ? diffMonth - 1 : diffMonth; + // document.getElementById('actualMonthName').innerHTML = monate[new Date().getMonth() + diffMonth]; + getActualDataAndFillView(new Date().getMonth() + diffMonth + 1) +}); + +document.getElementById('btn-month-next').addEventListener('click', () =>{ + diffMonth = ((monate[new Date().getMonth() + diffMonth]) != 'August') ? diffMonth + 1 : diffMonth; + // document.getElementById('actualMonthName').innerHTML = monate[new Date().getMonth() + diffMonth]; + getActualDataAndFillView(new Date().getMonth() + diffMonth + 1) +}) + +function setNewCalsOfMonth(TheMonth) { + +} + + // // FUNKTIONEN LIBARY diff --git a/app/templates/app/home.html b/app/templates/app/home.html index a85ea93..09562da 100644 --- a/app/templates/app/home.html +++ b/app/templates/app/home.html @@ -43,7 +43,7 @@
-
+

Jahr: h/600h

Offen: h

@@ -52,20 +52,30 @@
-
+
+
-

Monat: h

+

Monat: h

Offen: h

+
+
+ +
+ < +

+ > +
+
@@ -82,7 +92,7 @@
-
+

Aktivitäten

diff --git a/app/templates/app/updateinfo.html b/app/templates/app/updateinfo.html index 9e743a4..481beb6 100644 --- a/app/templates/app/updateinfo.html +++ b/app/templates/app/updateinfo.html @@ -1,21 +1,21 @@

Update Time!

-
v1.1.0
+
+
v1.2.0

- Wie versproche geht es weiter! -
Ja kleine Schritte, aber ich hoffe hilfreich 😀 + WICHTIGE NEUIGKEIT! +
Wieder ein kleiner Schritt 😀

Was ist neu? -
1. Die Einstellungen oben Rechts -
2. Einstellugnen: Bibelstudien pflegen -
3. Einstellungen: Eigenes Monatsziel -
-
Fehlerbehebung: -
1. Einträge nach Datum sortieren nicht nach Hinzufügen +
Du kannst jetzt die Monate wechseln. +
+
Wie? +
Tippe dazu einfach auf die "Monats"-Kachel +
mit dem übersichtsbalken.

Viel Freude beim Testen und Gruß,
Samuel


- \ No newline at end of file + \ No newline at end of file