mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
073834a5dc
- Add image upload field to tea form with preview - Add image property to tea data model - Update addTea() to include image data (base64) - Update openTeaModal() to display image when editing - Display tea images on tea cards - Add handleImageUpload() method for file processing - Add migration for existing teas without image field - Add CSS styles for image preview and display on cards - Images stored as base64 in localStorage/Nextcloud Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
367 lines
17 KiB
HTML
367 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TeeTracker - Dein Tee-Konsum Tracker</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<header>
|
||
<h1>🍵 TeeTracker</h1>
|
||
<p>Verwalte deine Tee-Sorten und tracke deinen Konsum</p>
|
||
</header>
|
||
|
||
<nav class="tabs">
|
||
<button class="tab-button active" data-tab="dashboard">Dashboard</button>
|
||
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
||
<button class="tab-button" data-tab="track">Tracken</button>
|
||
<button class="tab-button" data-tab="stats">Statistiken</button>
|
||
<button class="tab-button" data-tab="settings">⚙️ Einstellungen</button>
|
||
</nav>
|
||
|
||
<main class="tab-content">
|
||
<!-- Dashboard Tab -->
|
||
<section id="dashboard" class="tab-pane active">
|
||
<div class="dashboard-cards">
|
||
<div class="card">
|
||
<h3>Gesamt getrunken</h3>
|
||
<div class="card-value" id="total-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Heute</h3>
|
||
<div class="card-value" id="today-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Diese Woche</h3>
|
||
<div class="card-value" id="week-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Tee-Sorten</h3>
|
||
<div class="card-value" id="total-teas">0 Sorten</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recent-activity">
|
||
<h3>Letzte Aktivitäten</h3>
|
||
<div id="recent-entries" class="activity-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tee-Sorten Tab -->
|
||
<section id="teas" class="tab-pane">
|
||
<div class="teas-header">
|
||
<h2>Tee-Sorten</h2>
|
||
<button id="add-tea-btn" class="btn btn-primary">➕ Tee hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="tea-filters">
|
||
<input type="text" id="tea-search" placeholder="Suche nach Tee-Sorten...">
|
||
<select id="tea-type-filter">
|
||
<option value="all">Alle Typen</option>
|
||
<option value="Schwarztee">Schwarztee</option>
|
||
<option value="Grüntee">Grüntee</option>
|
||
<option value="Weißtee">Weißtee</option>
|
||
<option value="Oolong">Oolong</option>
|
||
<option value="Pu-Erh">Pu-Erh</option>
|
||
<option value="Früchtetee">Früchtetee</option>
|
||
<option value="Krätertee">Krätertee</option>
|
||
<option value="Sonstiges">Sonstiges</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="teas-list" class="teas-grid"></div>
|
||
</section>
|
||
|
||
<!-- Tracken Tab -->
|
||
<section id="track" class="tab-pane">
|
||
<h2>Tee-Konsum tracken</h2>
|
||
|
||
<form id="track-form" class="track-form">
|
||
<div class="form-group">
|
||
<label for="track-tea">Tee-Sorte *</label>
|
||
<select id="track-tea" required>
|
||
<option value="">-- Wähle eine Tee-Sorte --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-date">Datum *</label>
|
||
<input type="date" id="track-date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-time">Uhrzeit</label>
|
||
<input type="time" id="track-time">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-amount">Menge (Tassen) *</label>
|
||
<input type="number" id="track-amount" min="1" max="10" value="1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-teaspoons">Menge Tee-Pulver (Teelöffel)</label>
|
||
<input type="number" id="track-teaspoons" min="0" max="10" value="1" step="0.5">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-notes">Notizen</label>
|
||
<textarea id="track-notes" rows="3" placeholder="z.B. Mit Honig, besonders stark..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">📝 Tracken</button>
|
||
<button type="button" id="cancel-track" class="btn btn-secondary">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="recent-tracked">
|
||
<h3>Letzte Einträge</h3>
|
||
<div id="track-recent-entries" class="activity-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Einstellungen Tab -->
|
||
<section id="settings" class="tab-pane">
|
||
<h2>⚙️ Einstellungen</h2>
|
||
|
||
<div class="settings-section">
|
||
<h3>🌐 Nextcloud-Synchronisation</h3>
|
||
<p>Verbinde TeeTracker mit deiner Nextcloud-Instanz für plattformübergreifende Synchronisation.</p>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label>
|
||
<input type="checkbox" id="nc-enabled">
|
||
<span class="checkmark"></span>
|
||
Nextcloud-Synchronisation aktivieren
|
||
</label>
|
||
</div>
|
||
|
||
<div id="nc-config" style="display: none;">
|
||
<div class="form-group">
|
||
<label for="nc-url">Nextcloud-URL *</label>
|
||
<input type="url" id="nc-url" placeholder="https://deine-nextcloud.de">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="nc-username">Benutzername *</label>
|
||
<input type="text" id="nc-username" placeholder="Dein Nextcloud-Benutzername">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="nc-password">App-Passwort *</label>
|
||
<input type="password" id="nc-password" placeholder="App-Passwort aus Nextcloud" autocomplete="current-password">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="nc-path">Speicherpfad</label>
|
||
<input type="text" id="nc-path" placeholder="/TeeTracker/" value="/TeeTracker/">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button id="test-nc-connection" class="btn btn-secondary">🔍 Verbindung testen</button>
|
||
<button id="save-nc-config" class="btn btn-primary">💾 Speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="nc-status" class="status-message"></div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h3>💾 Datenverwaltung</h3>
|
||
|
||
<div class="form-group">
|
||
<label>Synchronisationsstatus</label>
|
||
<div id="sync-status" class="status-badge">Lokaler Modus</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
|
||
<button id="import-data" class="btn btn-secondary">📥 Daten importieren</button>
|
||
<button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h3>📊 Statistik</h3>
|
||
<div class="stats-overview">
|
||
<div class="stat-item">
|
||
<span class="stat-label">Gesamt Tassen:</span>
|
||
<span id="settings-total-cups">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Tee-Sorten:</span>
|
||
<span id="settings-total-teas">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Erster Eintrag:</span>
|
||
<span id="settings-first-entry">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Letzter Eintrag:</span>
|
||
<span id="settings-last-entry">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Statistiken Tab -->
|
||
<section id="stats" class="tab-pane">
|
||
<h2>Statistiken</h2>
|
||
|
||
<div class="stats-filters">
|
||
<label for="stats-period">Zeitraum:</label>
|
||
<select id="stats-period">
|
||
<option value="today">Heute</option>
|
||
<option value="week">Letzte 7 Tage</option>
|
||
<option value="month">Letzter Monat</option>
|
||
<option value="year">Letztes Jahr</option>
|
||
<option value="all">Gesamt</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="stats-container">
|
||
<div class="chart-container">
|
||
<h3>Tee-Konsum nach Sorte</h3>
|
||
<canvas id="tea-type-chart"></canvas>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<h3>Tagesverlauf</h3>
|
||
<canvas id="daily-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-details">
|
||
<h3>Detaillierte Statistiken</h3>
|
||
<div id="stats-details" class="details-grid"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Modal für Tee hinzufügen/bearbeiten -->
|
||
<div id="tea-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">Tee hinzufügen</h2>
|
||
<button id="close-modal" class="close-btn">×</button>
|
||
</div>
|
||
|
||
<form id="tea-form" class="modal-form">
|
||
<input type="hidden" id="tea-id">
|
||
|
||
<div class="form-group">
|
||
<label for="tea-name">Name *</label>
|
||
<input type="text" id="tea-name" required placeholder="z.B. Earl Grey">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-type">Typ *</label>
|
||
<select id="tea-type" required>
|
||
<option value="">-- Wähle einen Typ --</option>
|
||
<option value="Schwarztee">Schwarztee</option>
|
||
<option value="Grüntee">Grüntee</option>
|
||
<option value="Weißtee">Weißtee</option>
|
||
<option value="Oolong">Oolong</option>
|
||
<option value="Pu-Erh">Pu-Erh</option>
|
||
<option value="Früchtetee">Früchtetee</option>
|
||
<option value="Krätertee">Krätertee</option>
|
||
<option value="Sonstiges">Sonstiges</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-brand">Marke</label>
|
||
<input type="text" id="tea-brand" placeholder="z.B. Twinings, Pukka">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-description">Beschreibung</label>
|
||
<textarea id="tea-description" rows="3" placeholder="Beschreibung des Tees..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label>
|
||
<input type="checkbox" id="tea-organic">
|
||
<span class="checkmark"></span>
|
||
Bio-Tee
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Bewertung</label>
|
||
<div class="star-rating" id="tea-rating">
|
||
<span class="star" data-value="1">★</span>
|
||
<span class="star" data-value="2">★</span>
|
||
<span class="star" data-value="3">★</span>
|
||
<span class="star" data-value="4">★</span>
|
||
<span class="star" data-value="5">★</span>
|
||
</div>
|
||
<input type="hidden" id="tea-rating-value" value="3">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-image-upload">Tee-Foto</label>
|
||
<input type="file" id="tea-image-upload" accept="image/*">
|
||
<div id="tea-image-preview" class="image-preview" style="display: none; margin-top: 10px;">
|
||
<img id="tea-image-preview-img" style="max-width: 150px; max-height: 150px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
|
||
</div>
|
||
<input type="hidden" id="tea-image-data" value="">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-color">Farbe</label>
|
||
<input type="color" id="tea-color" value="#8B4513">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">💾 Speichern</button>
|
||
<button type="button" id="delete-tea-btn" class="btn btn-danger" style="display: none;">🗑️ Löschen</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bestätigungsmodal -->
|
||
<div id="confirm-modal" class="modal">
|
||
<div class="modal-content" style="max-width: 400px;">
|
||
<div class="modal-header">
|
||
<h2>Bestätigung</h2>
|
||
<button id="close-confirm" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirm-message"></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="confirm-yes" class="btn btn-danger">Ja, löschen</button>
|
||
<button id="confirm-no" class="btn btn-secondary">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Import Modal -->
|
||
<div id="import-modal" class="modal">
|
||
<div class="modal-content" style="max-width: 600px;">
|
||
<div class="modal-header">
|
||
<h2>Daten importieren</h2>
|
||
<button id="close-import-modal" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Füge deine exportierten TeeTracker-Daten hier ein:</p>
|
||
<textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n \"teas\": [...],\n \"entries\": [...]\n}"></textarea>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="import-data-btn" class="btn btn-primary" onclick="window.app.handleImportData()">📥 Importieren</button>
|
||
<button id="cancel-import-btn" class="btn btn-secondary" onclick="window.app.closeImportModal()">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|