Initial commit

public/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> Cinnamon Buchhaltung </title>
+    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/style.css">
+    </href>
+</head>
+
+    <body>
+        <header>
+            <!-- Titel der Seite-->
+            <h1 class="title">Buchhaltung von <i>Cinnamon</i></h1>
+
+            <!-- Jahre/Monate -->
+           <div class="head">
+            <div class="auswahl">
+                <select id="jahr">
+                  <option value="2025">2025</option>
+                  <option value="2026">2026</option>
+                </select>
+                <select id="monat">
+                  <option value="1">Januar</option>
+                  <option value="2">Februar</option>
+                  <option value="3">März</option>
+                  <option value="4">April</option>
+                  <option value="5">Mai</option>
+                  <option value="6">Juni</option>
+                  <option value="7">Juli</option>
+                  <option value="8">August</option>
+                  <option value="9">September</option>
+                  <option value="10">Oktober</option>
+                  <option value="11">November</option>
+                  <option value="12">Dezember</option>
+                </select>
+            </div>
+          
+            <!-- Menüleiste/Werkzeuge -->
+            <div class="menu">
+                <input type="text" id="suche" placeholder="Kategorie suchen...">
+                <button id="export">📁 Datenbank Ordner</button>
+                <button id="path">📝 Pfad ändern</button>
+                <button id="mode">🦉 Hoot</button>
+            </div>
+          </div>
+        </header>
+
+        <main>
+            <!-- Tabelle -->
+            <div class="container">
+                <table id="buchhaltung-tabelle">
+                  <thead>
+                    <tr>
+                      <th>Ausgabe</th>
+                      <th>Kategorie</th>
+                      <th>Datum</th>
+                      <th>Aktionen</th>
+                    </tr>
+                  </thead>
+                  
+
+                  <!-- Dynamische Daten -->
+                  <tbody>
+
+                  </tbody>
+
+                  <tfoot>
+                    <tr id="eintrag">
+                      <td colspan="4">
+                        <button id="eintrag">➕ Neuer Eintrag</button>
+                      </td>
+                    </tr>
+
+                    <tr id="summe">
+                      <td id="summe-zelle" colspan="5">Summe: 0,00 €</td>
+                    </tr>
+                  </tfoot>
+                </table>
+            </div>
+              
+        </main>
+        
+        <footer>
+            <p>Hehe <3</p>
+        </footer>
+
+
+      <div id="nachricht-container" class="nachricht"></div>
+
+      <!-- Bestätigungs-Popup -->
+      <div id="confirm-popup" class="confirm-popup">
+        <div class="popup-content">
+            <p>Cinnamon u sure u wanna delete?</p>
+            <button id="confirm-yes" class="confirm-btn">Yes</button>
+            <button id="confirm-no" class="confirm-btn">NO!</button>
+        </div>
+      </div>
+
+
+      </body>
+
+    <script src="script.js"></script>
+
+
+</html>

public/script.js

@@ -0,0 +1,256 @@
+// Event-Listener für das Laden der Seite
+window.addEventListener('DOMContentLoaded', () => {
+    const savedYear = localStorage.getItem('selectedYear');
+    const savedMonth = localStorage.getItem('selectedMonth');
+
+    document.getElementById('jahr').value = savedYear || new Date().getFullYear();
+    document.getElementById('monat').value = savedMonth || String(new Date().getMonth() + 1).padStart(2, '0');
+
+    loadData();
+});
+
+document.getElementById('jahr').addEventListener('change', loadData);
+document.getElementById('monat').addEventListener('change', loadData);
+document.getElementById('eintrag').addEventListener('click', addNewEntry);
+document.getElementById('export').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/ordner-oeffnen');
+        const data = await res.json();
+        console.log(data.message);
+    } catch (err) {
+        console.error('Fehler beim Öffnen des Ordners:', err);
+        alert('Ordner konnte nicht geöffnet werden');
+    }
+});
+document.getElementById('path').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/pfad-aendern', { method: 'POST' });
+        const data = await res.json();
+        alert(`Pfad geändert: ${data.path || 'Abgebrochen'}`);
+    } catch (err) {
+        console.error(err);
+        alert('Fehler beim Ändern des Pfades');
+    }
+});
+
+
+function zeigeNachricht(text, typ = 'erfolg') {
+    const nachrichtContainer = document.getElementById('nachricht-container');
+    nachrichtContainer.textContent = text;
+    nachrichtContainer.className = `nachricht ${typ}`;
+    nachrichtContainer.style.display = 'block';
+    setTimeout(() => nachrichtContainer.style.display = 'none', 3000);
+}
+
+function getMonthName(monthNumber) {
+    const months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
+    return months[parseInt(monthNumber)-1];
+}
+
+async function loadData() {
+    const selectedYear = document.getElementById('jahr').value;
+    const selectedMonth = document.getElementById('monat').value;
+
+    localStorage.setItem('selectedYear', selectedYear);
+    localStorage.setItem('selectedMonth', selectedMonth);
+
+    const tableBody = document.querySelector('#buchhaltung-tabelle tbody');
+    tableBody.innerHTML = '';
+
+    try {
+        const response = await fetch(`/api/daten/${selectedYear}/${selectedMonth}`);
+        let data = [];
+
+        if (response.ok) {
+            data = await response.json();
+        } else {
+            console.warn('Daten nicht gefunden, erzeuge leere Tabelle');
+        }
+
+        if (!data || data.length === 0) {
+            addNewEntry(true);
+            zeigeNachricht(`Für den Monat ${getMonthName(selectedMonth)} gibt es keine Daten!`, 'fehler');
+        } else {
+            data.forEach((row, idx) => {
+                const tr = document.createElement('tr');
+                tr.dataset.rowIndex = idx;
+
+                row.forEach(cell => {
+                    const td = document.createElement('td');
+                    td.contentEditable = true;
+                    td.textContent = cell || '';
+                    tr.appendChild(td);
+                });
+
+                const betragZelle = tr.querySelector('td');
+                betragZelle.addEventListener('blur', () => {
+                    betragZelle.textContent = formatAsEuro(betragZelle.textContent);
+                });
+
+                tr.appendChild(createButtonCell(tr));
+                tableBody.appendChild(tr);
+            });
+        }
+
+        updateSumme();
+    } catch (err) {
+        console.error(err);
+        addNewEntry(true);
+        updateSumme();
+        zeigeNachricht('Keine Verbindung zum Server - arbeite offline.', 'fehler');
+    }
+}
+
+function addNewEntry(suppressMessage = false) {
+    const tableBody = document.querySelector('#buchhaltung-tabelle tbody');
+    const tr = document.createElement('tr');
+    const rowIndex = tableBody.children.length;
+    tr.dataset.rowIndex = rowIndex;
+
+    const today = new Date();
+    const formattedDate = `${String(today.getDate()).padStart(2,'0')}.${String(today.getMonth()+1).padStart(2,'0')}.${today.getFullYear()}`;
+
+    const ausgabeTd = createEditableCell();
+    ausgabeTd.addEventListener('blur', () => ausgabeTd.textContent = formatAsEuro(ausgabeTd.textContent));
+    const kategorieTd = createEditableCell();
+    const datumTd = document.createElement('td');
+    datumTd.textContent = formattedDate;
+    datumTd.contentEditable = false;
+
+    tr.appendChild(ausgabeTd);
+    tr.appendChild(kategorieTd);
+    tr.appendChild(datumTd);
+    tr.appendChild(createButtonCell(tr));
+
+    tableBody.appendChild(tr);
+    if (!suppressMessage) zeigeNachricht('Neue Zeile hinzugefügt!', 'erfolg');
+}
+
+function createEditableCell() {
+    const td = document.createElement('td');
+    td.contentEditable = true;
+    return td;
+}
+
+function createButtonCell(tr) {
+    const td = document.createElement('td');
+    td.style.textAlign = 'center';
+    td.innerHTML = `<button class="speichern-btn">Speichern</button><button class="loeschen-btn">Löschen</button>`;
+
+    td.querySelector('.speichern-btn').addEventListener('click', () => saveRowData(tr));
+    td.querySelector('.loeschen-btn').addEventListener('click', () => handleDeleteButtonClick(tr));
+
+    return td;
+}
+
+async function saveRowData(tr) {
+    const rowIndex = parseInt(tr.dataset.rowIndex, 10);
+    const updatedRowData = Array.from(tr.querySelectorAll('td')).slice(0, -1).map(td => td.textContent);
+
+    // Immer aktuelle Dropdown-Werte nehmen
+    const selectedYear = document.getElementById('jahr').value;
+    const selectedMonth = document.getElementById('monat').value;
+
+    // In LocalStorage speichern
+    localStorage.setItem('selectedYear', selectedYear);
+    localStorage.setItem('selectedMonth', selectedMonth);
+
+    try {
+        const response = await fetch('/api/zeile-speichern', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                rowIndex,
+                updatedRowData,
+                jahr: selectedYear,
+                monat: selectedMonth
+            })
+        });
+
+        if (!response.ok) {
+            const errData = await response.json();
+            throw new Error(errData.error || 'Fehler beim Speichern');
+        }
+
+        zeigeNachricht('Daten gespeichert!', 'erfolg');
+    } catch (err) {
+        console.error(err);
+        zeigeNachricht(`Fehler beim Speichern der Zeile: ${err.message}`, 'fehler');
+    }
+    updateSumme();
+}
+
+
+function handleDeleteButtonClick(tr) {
+    const popup = document.getElementById('confirm-popup');
+    const yes = document.getElementById('confirm-yes');
+    const no = document.getElementById('confirm-no');
+    if (!popup) return console.error('Popup nicht gefunden!');
+
+    popup.style.display = 'grid';
+    yes.replaceWith(yes.cloneNode(true));
+    no.replaceWith(no.cloneNode(true));
+
+    document.getElementById('confirm-yes').addEventListener('click', () => { deleteRow(tr); popup.style.display='none'; });
+    document.getElementById('confirm-no').addEventListener('click', () => popup.style.display='none');
+}
+
+async function deleteRow(tr) {
+    const rowIndex = parseInt(tr.dataset.rowIndex, 10);
+    const selectedYear = document.getElementById('jahr').value;
+    const selectedMonth = document.getElementById('monat').value;
+
+    try {
+        const response = await fetch('/api/zeile-loeschen', {
+            method: 'POST',
+            headers: {'Content-Type':'application/json'},
+            body: JSON.stringify({
+                zeileIndex: rowIndex,  // korrekt benennen
+                jahr: localStorage.getItem('selectedYear'),
+                monat: localStorage.getItem('selectedMonth')
+            })
+        });
+        if (!response.ok) throw new Error((await response.json()).error || 'Fehler beim Löschen');
+        tr.remove();
+        updateSumme();
+        zeigeNachricht('Zeile erfolgreich gelöscht!', 'erfolg');
+    } catch (err) {
+        console.error(err);
+        zeigeNachricht(`Fehler: ${err.message}`, 'fehler');
+    }
+}
+
+function updateSumme() {
+    const rows = document.querySelectorAll('#buchhaltung-tabelle tbody tr');
+    let summe = 0;
+
+    rows.forEach(row => {
+        let val = row.querySelector('td').textContent.trim();
+
+        // Punkte als Tausender-Trennzeichen entfernen
+        val = val.replace(/\./g, '');
+
+        // Komma als Dezimaltrennzeichen in Punkt konvertieren
+        val = val.replace(',', '.');
+
+        const num = parseFloat(val);
+        summe += isNaN(num) ? 0 : num;
+    });
+
+    const summeZelle = document.getElementById('summe-zelle');
+    if (summeZelle) summeZelle.textContent = `Summe: ${new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(summe)}`;
+}
+
+document.getElementById('suche').addEventListener('input', function() {
+    const term = this.value.toLowerCase().trim();
+    document.querySelectorAll('#buchhaltung-tabelle tbody tr').forEach(row => {
+        const kategorie = row.querySelectorAll('td')[1]?.textContent.toLowerCase().trim();
+        row.style.display = kategorie?.includes(term) ? '' : 'none';
+    });
+});
+
+function formatAsEuro(value) {
+    const parsed = parseFloat(value.replace(/[^\d,.-]/g,'').replace(',','.'));
+    if (isNaN(parsed)) return '';
+    return new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR',minimumFractionDigits:2,maximumFractionDigits:2}).format(parsed);
+}

public/style.css

@@ -0,0 +1,321 @@
+/* -------------------- HINTERGRUND & GRUNDLAYOUT -------------------- */
+body {
+    background: linear-gradient(135deg, #a0c4ff, #b5ead7, #cce3dc); /* Blau-Grün-Grau Verlauf */
+    background-size: 400% 400%;
+    animation: gradientShift 20s ease infinite;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #2c3e50;
+}
+
+/* -------------------- HEADER & TITEL -------------------- */
+.title {
+    margin-left: 20px;
+}
+header {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+}
+.head {
+    display: flex;
+    justify-content: space-between;
+}
+.menu {
+    text-align: center;
+    margin-right: 20px;
+}
+header button {
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transform: scale(1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: #f0f4f8;
+    border-radius: 8px;
+    padding: 6px 14px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #2c3e50;
+    border: none;
+}
+
+header button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+}
+
+/* -------------------- AUSWAHLFELDER -------------------- */
+.auswahl {
+    text-align: left;
+    margin-left: 20px;
+}
+#jahr, #monat, #suche {
+    border-radius: 8px;
+    border: none;
+    height: 32px;
+    padding: 0 10px;
+    background: #f9f9fb;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.3s ease;
+}
+#jahr:focus, #monat:focus, #suche:focus,
+#export:focus, #mode:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #88c0d0;
+}
+
+/* -------------------- TABELLEN-EINTRAG BUTTON (nur der Button klickbar, mittig) -------------------- */
+#eintrag-zeile {
+  background: none !important;      /* kein Hintergrund */
+  border: none !important;
+  box-shadow: none !important;
+}
+
+#eintrag-zeile:hover {
+  background: none !important;      /* Zeile reagiert nicht auf Hover */
+}
+
+#eintrag-zeile td {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  text-align: center;
+  padding: 16px 0;
+  cursor: default;                  /* Zeile zeigt keinen Pointer */
+}
+
+/* Der eigentliche Button */
+#eintrag {
+  background: linear-gradient(135deg, #cce3dc, #b5ead7);
+  color: #2c3e50;
+  font-weight: 500;
+  font-size: 14px;
+  border: none;
+  border-radius: 10px;
+  padding: 8px 20px;
+  cursor: pointer;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.25s ease-in-out;
+  display: inline-block;            /* bleibt mittig */
+}
+
+#eintrag:hover {
+  background: linear-gradient(135deg, #dff7ef, #cce3dc);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
+}
+
+#eintrag:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* -------------------- TABELLEN CONTAINER -------------------- */
+.container {
+    padding: 1rem;
+    transition: background-color 0.3s;
+    overflow-y: auto;
+    max-height: 80vh;
+}
+
+/* -------------------- MODERNE, TRANSPARENTE TABELLE -------------------- */
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: 1rem;
+    table-layout: fixed;
+    background-color: rgba(200, 230, 240, 0.15);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(100, 150, 170, 0.3);
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+thead > tr > th {
+    padding: 0.8rem;
+    text-align: left;
+    font-weight: 600;
+    background: rgba(180, 210, 220, 0.35);
+    backdrop-filter: blur(4px);
+    color: #2c3e50;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+tbody > tr {
+    background: rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+tbody > tr:hover {
+    background-color: rgba(100, 160, 180, 0.15);
+}
+
+tbody > tr > td {
+    padding: 0.8rem;
+    color: #2c3e50;
+    text-align: left;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+}
+tbody > tr > td:last-child {
+    border-right: none;
+}
+
+tfoot {
+    background: rgba(180, 210, 220, 0.25);
+    color: #2c3e50;
+    font-weight: bold;
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+}
+#summe-zelle {
+    padding: 0.8rem;
+    text-align: left;
+}
+
+/* -------------------- SPALTENBREITEN -------------------- */
+thead > tr > th:nth-child(1) { width: 10%; }
+thead > tr > th:nth-child(2) { width: 40%; }
+thead > tr > th:nth-child(3) { width: 25%; }
+thead > tr > th:nth-child(4) { width: 10%; }
+
+/* -------------------- BUTTONS -------------------- */
+#buchhaltung-tabelle td:last-child {
+    display: flex;
+    justify-content: flex-start;
+    gap: 6px;
+    padding-right: 0.5rem;
+}
+
+.speichern-btn, .loeschen-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    border: none;
+    border-radius: 6px;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    transform: scale(1);
+}
+
+.speichern-btn {
+    background: linear-gradient(145deg, #28a745, #218838);
+}
+
+.speichern-btn:hover {
+    transform: scale(1.06);
+    box-shadow: 0 6px 14px rgba(40, 167, 69, 0.4);
+}
+
+.loeschen-btn {
+    background: linear-gradient(145deg, #dc3545, #c82333);
+}
+
+.loeschen-btn:hover {
+    transform: scale(1.06);
+    box-shadow: 0 6px 14px rgba(220, 53, 69, 0.4);
+}
+
+/* -------------------- RESPONSIVE -------------------- */
+@media (max-width: 768px) {
+    #buchhaltung-tabelle td:last-child {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+    .speichern-btn, .loeschen-btn {
+        font-size: 12px;
+        padding: 4px 8px;
+        width: 100%;
+    }
+    table {
+        font-size: 12px;
+    }
+}
+
+/* -------------------- POPUPS / NACHRICHTEN -------------------- */
+.nachricht {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 15px 20px;
+    border-radius: 8px;
+    font-size: 16px;
+    z-index: 1000;
+    max-width: 90%;
+    text-align: center;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.nachricht.erfolg {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+.nachricht.fehler {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+/* -------------------- BESTÄTIGUNGSPOPUP -------------------- */
+.confirm-popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 50vh;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.popup-content {
+    background-color: #d8eefe;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+.confirm-btn {
+    margin: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+}
+.confirm-btn:hover {
+    background-color: #7c5555;
+}
+#confirm-yes {
+    background-color: #28a745;
+    color: white;
+}
+#confirm-no {
+    background-color: #dc3545;
+    color: white;
+}
+
+/* -------------------- FOOTER -------------------- */
+footer {
+    text-align: center;
+    font-size: 15px;
+    font-style: italic;
+    margin-top: 20px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
+}
+
+/* -------------------- SCHNEEFLOCKEN -------------------- */
+.snowflake {
+    color: #e0f7ff;
+    font-size: 1em;
+    font-family: Arial, sans-serif;
+    text-shadow: 0 0 5px #000;
+}