HydroFlux 0.0.2

Hydroflux/app/src/main/assets/js/modules/notes.js

@@ -0,0 +1,89 @@
+export class NotesTracker {
+    constructor(containerId) {
+        this.container = document.getElementById(containerId);
+        this.STORAGE_KEY = 'hydroflux_notes';
+        this.notes = [];
+        this.loadState();
+        this.render();
+    }
+
+    loadState() {
+        const saved = localStorage.getItem(this.STORAGE_KEY);
+        if (saved) {
+            this.notes = JSON.parse(saved);
+        } else {
+            this.notes = [
+                { id: 1, text: "Feeling hydrated today. Remember to add those gym sessions!", date: new Date().toISOString() }
+            ];
+            this.saveState();
+        }
+    }
+
+    saveState() {
+        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.notes));
+    }
+
+    addNote(text) {
+        if (!text.trim()) return;
+        this.notes.unshift({
+            id: Date.now(),
+            text: text,
+            date: new Date().toISOString()
+        });
+        this.saveState();
+        this.render();
+    }
+
+    deleteNote(id) {
+        if (confirm("Delete this note?")) {
+            this.notes = this.notes.filter(n => n.id !== id);
+            this.saveState();
+            this.render();
+        }
+    }
+
+    render() {
+        if (!this.container) return;
+
+        this.container.innerHTML = `
+            <div class="notes-container">
+                <h2 class="section-title">NOTES</h2>
+                
+                <div class="note-input-area">
+                    <textarea id="new-note-text" placeholder="Write a thought..." rows="3" class="glow-input"></textarea>
+                    <button id="add-note-btn" class="connect-glow-btn full-width">SAVE NOTE</button>
+                </div>
+
+                <div class="notes-grid">
+                    ${this.notes.map(note => `
+                        <div class="sticky-note">
+                            <p class="note-content">${note.text}</p>
+                            <div class="note-footer">
+                                <span class="note-date">${new Date(note.date).toLocaleDateString()}</span>
+                                <button class="delete-note-btn" data-id="${note.id}">🗑</button>
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+
+        this.attachEvents();
+    }
+
+    attachEvents() {
+        const btn = this.container.querySelector('#add-note-btn');
+        const input = this.container.querySelector('#new-note-text');
+
+        btn.addEventListener('click', () => {
+            this.addNote(input.value);
+            input.value = '';
+        });
+
+        this.container.querySelectorAll('.delete-note-btn').forEach(b => {
+            b.addEventListener('click', (e) => {
+                this.deleteNote(parseInt(e.currentTarget.dataset.id));
+            });
+        });
+    }
+}