Feature: Setting new MonthGoal: Live Update Dashboard

app/static/app/js/home.js

@@ -3,6 +3,7 @@ const hours = document.getElementById('stunden');
 const mins = document.getElementById('minuten');
 const NewEntryButton = document.getElementById('newEntrySubmitButton')
 const SETStudySaveButton = document.getElementById('SETStudySaveButton')
+const SETMonthGoalSaveButton = document.getElementById('SETMonthGoalSaveButton')
 var allowToSend = false;
 
 
@@ -110,6 +111,48 @@ SETStudySaveButton.addEventListener('click', () => {
     SETStudySaveButton.classList.add('d-none')
 })
 
+SETMonthGoalSaveButton.addEventListener('click', () => {
+    getAllEntries('settings')
+        .then(function(result){
+
+            const SETDBData = result.find(element => element.SettingsID === 2)
+            actualSettingsEntryID = SETDBData ? SETDBData.id : undefined;
+            actualSettings = SETDBData ? SETDBData.SettingsValue : undefined;
+
+            // AKTUELLE DATEN AUS FELD ÜBERNHEMEN 
+            var ActInput = document.getElementById('MonthGoalInput').value
+
+            const StudySettingsData = {
+                SettingsID: 2,
+                SettingsValue: parseInt(ActInput),
+            }
+
+            // ÜBERPRÜFEN OB EIN EINTRAG MTI DER SETTINGS ID VORHANDEN IST - WENN JA DANN UPDATE WENN NEIN DANN NEUEN ERSTELLEN
+            if ( actualSettings != undefined  ) {
+                updateEntry(actualSettingsEntryID, 'settings', StudySettingsData)
+            } else {
+                addEntry(StudySettingsData, 'settings')
+            }
+
+            // UPDATE DER MONATSANSICHT
+
+            // Aktueller Monatsstand an Stunden
+            const GesamtStundenMonat = parseInt(document.getElementById('MonthSumHours').value)
+            document.getElementById('monthHours').innerText = GesamtStundenMonat + "/" + parseInt(ActInput) 
+            document.getElementById('prBarMonth').style.width = `${(100/parseInt(ActInput))*parseInt(GesamtStundenMonat)}%`
+
+            // Aktueller Rest an Stunden
+            const rest = parseInt(ActInput) - parseInt(GesamtStundenMonat)
+            if (rest > 0) {
+                document.getElementById('monthRest').innerText = rest
+            } else {
+                document.getElementById('monthRest').innerText = 0
+            }
+
+    })
+    SETMonthGoalSaveButton.classList.add('d-none')
+})
+
 
 async function getActualDataAndFillView() {
     try {
@@ -117,6 +160,19 @@ async function getActualDataAndFillView() {
         // Aktuelles Datum
         const currentDate = new Date();
 
+        // Settings vor ausfüllen
+        
+        // Monatswunsch-Stunden Abfragen
+        var MonthGoal = 50
+
+        //  DATEN VON SETTINGS ABFRAGEN
+        getAllEntries('settings')
+            .then(function(result) {
+                document.getElementById('studysinput').value = parseInt(result.find(element => element.SettingsID === 1).SettingsValue)
+                document.getElementById('MonthGoalInput').value = (result.find(element => element.SettingsID === 2) == undefined) ? 50 : parseInt(result.find(element => element.SettingsID === 2).SettingsValue)
+                MonthGoal = (result.find(element => element.SettingsID === 2) == undefined) ? 50 : parseInt(result.find(element => element.SettingsID === 2).SettingsValue)
+            });
+
         // Filter funktion aufrufen und entsprechend mit dem aktuellen Datum füllen
         const filteredEntries = await filterEntriesByMonthYear(currentDate.getMonth() + 1, currentDate.getFullYear());
 
@@ -130,11 +186,12 @@ async function getActualDataAndFillView() {
 
         // Aktueller Monatsstand an Stunden
         const GesamtStundenMonat = formatDuration(sumDurations(filteredEntries,null,true), true)
-        document.getElementById('monthHours').innerText = GesamtStundenMonat
-        document.getElementById('prBarMonth').style.width = `${(100/50)*parseInt(GesamtStundenMonat)}%`
+        document.getElementById('monthHours').innerText = GesamtStundenMonat + "/" + MonthGoal 
+        document.getElementById('prBarMonth').style.width = `${(100/MonthGoal)*parseInt(GesamtStundenMonat)}%`
+        document.getElementById('MonthSumHours').value = GesamtStundenMonat
 
         // Aktueller Rest an Stunden
-        const rest = 50 - parseInt(GesamtStundenMonat)
+        const rest = MonthGoal - parseInt(GesamtStundenMonat)
         if (rest > 0) {
             document.getElementById('monthRest').innerText = rest
         } else {
@@ -153,14 +210,6 @@ async function getActualDataAndFillView() {
         document.getElementById('yearRest').innerText = 600 - parseInt(yearData)
         document.getElementById('prBarYear').style.width = `${Math.round((100/600)*parseInt(yearData))}%`
 
-        // Settings vor ausfüllen
-
-        //  DATEN VON SETTINGS ABFRAGEN
-        getAllEntries('settings')
-        .then(function(result) {
-            document.getElementById('studysinput').value = parseInt(result.find(element => element.SettingsID === 1).SettingsValue)
-        });
-
     } catch (error) {
         console.error('Fehler bei der Initialisierung oder Filterung:', error);
     }

app/templates/app/base.html

@@ -38,6 +38,11 @@
                             <input type="number" class="w-25 btn btn-secondary" name="studysinput" id="studysinput" value="0" onfocus="document.getElementById('SETStudySaveButton').classList.remove('d-none')">
                             <button class="btn d-none" id="SETStudySaveButton">Sichern</button>
                         </li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            Monatsziel:
+                            <input type="number" class="w-25 btn btn-secondary" name="MonthGoalInput" id="MonthGoalInput" value="50" onfocus="document.getElementById('SETMonthGoalSaveButton').classList.remove('d-none')">
+                            <button class="btn d-none" id="SETMonthGoalSaveButton">Sichern</button>
+                        </li>
                     </ul>
                 </div>
             </div>

app/templates/app/home.html

@@ -47,7 +47,8 @@
         </div>
         <div class="col-11 mt-4" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
             <div class="row justify-content-between">
-                <p class="col-7" style="font-size: 1.25rem;"><b>Monat:</b> <span id="monthHours"></span>h/50h</p>
+                <p class="col-7" style="font-size: 1.25rem;"><b>Monat:</b> <span id="monthHours"></span>h</p>
+                <input type="number" class="d-none" id="MonthSumHours">
                 <p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> <span id="monthRest"></span>h</p>
             </div>
             <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem">