Merge pull request #5 from ceotjoe/DEV

Added usage stats

Author: ceotjoe

app.js

@@ -117,17 +117,36 @@ function formatTime(seconds) {
     return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
 }
 
+// Function to record usage data
+function recordUsage(deviceName, currentMa, duration, volume, ppm) {
+    const now = new Date();
+    const date = now.toLocaleDateString();
+    const time = now.toLocaleTimeString();
+    const usage = { date, time, device: deviceName, currentMa, duration, volume, ppm };
+
+    let stats = JSON.parse(localStorage.getItem('usageStats')) || [];
+    stats.push(usage);
+    localStorage.setItem('usageStats', JSON.stringify(stats));
+}
+
+// Updated calculateTime to record usage
 function calculateTime() {
-    const currentMa = parseFloat(document.getElementById('device').value) || 0; // Current in mA from dropdown
-    const volumeMl = parseFloat(document.getElementById('volume').value) || 0;   // Volume in mL
+    const deviceSelect = document.getElementById('device');
+    const currentMa = parseFloat(deviceSelect.value) || 0;
+    const volumeMl = parseFloat(document.getElementById('volume').value) || 0;
     const desiredPpm = parseFloat(document.getElementById('desiredPpm').value) || 0;
 
     if (currentMa > 0 && volumeMl > 0 && desiredPpm > 0) {
-        const current = currentMa / 1000; // mA to A
-        const volume = volumeMl / 1000;   // mL to L
+        const current = currentMa / 1000; // Convert mA to A
+        const volume = volumeMl / 1000;   // Convert mL to L
         timeInSeconds = (desiredPpm * volume * z * faradayConstant) / (1000 * current * molarMassSilver);
         remainingTime = timeInSeconds;
-        updateUIText({ time: formatTime(timeInSeconds) });
+        const duration = formatTime(timeInSeconds);
+        updateUIText({ time: duration });
+
+        // Record the usage
+        const deviceName = deviceSelect.options[deviceSelect.selectedIndex].text.split(' (')[0];
+        recordUsage(deviceName, currentMa, duration, volumeMl, desiredPpm);
     } else {
         alert(translations.error);
     }
@@ -218,6 +237,65 @@ function handleServiceWorkerUpdates() {
     }
 }
 
+// Function to show the statistics screen
+function showStatistics() {
+    const statsContainer = document.getElementById('statistics');
+    const mainContainer = document.querySelector('.container');
+    mainContainer.style.display = 'none';
+    statsContainer.style.display = 'block';
+
+    const statsBody = document.getElementById('statsBody');
+    statsBody.innerHTML = '';
+
+    const stats = JSON.parse(localStorage.getItem('usageStats')) || [];
+    stats.forEach(stat => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${stat.date}</td>
+            <td>${stat.time}</td>
+            <td>${stat.device}</td>
+            <td>${stat.currentMa}</td>
+            <td>${stat.duration}</td>
+            <td>${stat.volume}</td>
+            <td>${stat.ppm}</td>
+        `;
+        statsBody.appendChild(row);
+    });
+}
+
+// Function to hide the statistics screen
+function hideStatistics() {
+    const statsContainer = document.getElementById('statistics');
+    const mainContainer = document.querySelector('.container');
+    statsContainer.style.display = 'none';
+    mainContainer.style.display = 'block';
+}
+
+// Function to export statistics as CSV
+function exportCSV() {
+    const stats = JSON.parse(localStorage.getItem('usageStats')) || [];
+    if (stats.length === 0) {
+        alert(translations.noData);
+        return;
+    }
+
+    const headers = 'Date,Time,Device,Current (mA),Duration (hh:mm:ss),Volume (mL),PPM\n';
+    const csvRows = stats.map(stat => 
+        `${stat.date},${stat.time},${stat.device},${stat.currentMa},${stat.duration},${stat.volume},${stat.ppm}`
+    );
+    const csvContent = headers + csvRows.join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'SilverTimer_Usage_Statistics.csv';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
 // Initialize with translations, devices, and SW update handling
 window.onload = () => {
     loadTranslationsAndDevices();

index.html

@@ -20,6 +20,7 @@ <h2 data-i18n="appTitle">SilverTimer</h2>
         <div id="result" data-i18n="result" data-i18n-params="time:00:00:00">Time: 00:00:00</div>
         <button onclick="startTimer()" id="startBtn" data-i18n="startBtn"></button>
         <button onclick="stopTimer()" id="stopBtn" disabled data-i18n="stopBtn"></button>
+        <button onclick="showStatistics()" data-i18n="statsBtn">Statistics</button>
         <div id="timer" data-i18n="timer" data-i18n-params="time:00:00:00">Remaining: 00:00:00</div>
         <footer>
             <a href="https://github.com/ceotjoe/SilverTimer_PWA/blob/main/README.md" target="_blank" data-i18n="readmeLink">Readme</a>
@@ -34,6 +35,26 @@ <h3 data-i18n="modalTitle"></h3>
         </div>
     </div>
 
+    <div id="statistics" class="stats-container" style="display: none;">
+        <h2 data-i18n="statsTitle">Usage Statistics</h2>
+        <table id="statsTable">
+            <thead>
+                <tr>
+                    <th data-i18n="date">Date</th>
+                    <th data-i18n="time">Time</th>
+                    <th data-i18n="device">Device</th>
+                    <th data-i18n="current">Current (mA)</th>
+                    <th data-i18n="duration">Duration (hh:mm:ss)</th>
+                    <th data-i18n="volume">Volume (mL)</th>
+                    <th data-i18n="ppm">PPM</th>
+                </tr>
+            </thead>
+            <tbody id="statsBody"></tbody>
+        </table>
+        <button onclick="exportCSV()" data-i18n="exportBtn">Export to CSV</button>
+        <button onclick="hideStatistics()" data-i18n="backBtn">Back</button>
+    </div>
+
     <script src="/SilverTimer_PWA/app.js"></script>
     <script>
         if ('serviceWorker' in navigator) {

locales/de.json

@@ -12,5 +12,17 @@
     "modalText": "Die gewünschte Silber-PPM wurde erreicht.",
     "modalBtn": "Alarm Stoppen",
     "error": "Bitte wählen Sie ein Gerät und geben Sie gültige positive Zahlen für Volumen und PPM ein.",
-    "readmeLink": "Liesmich"
+    "readmeLink": "Liesmich",
+    "statsBtn": "Statistiken",
+    "statsTitle": "Nutzungsstatistiken",
+    "date": "Datum",
+    "time": "Uhrzeit",
+    "device": "Gerät",
+    "current": "Strom (mA)",
+    "duration": "Dauer (hh:mm:ss)",
+    "volume": "Volumen (mL)",
+    "ppm": "PPM",
+    "exportBtn": "Als CSV exportieren",
+    "backBtn": "Zurück",
+    "noData": "Keine Nutzungsdaten vorhanden."
 }

locales/en.json

@@ -12,5 +12,17 @@
     "modalText": "The desired silver PPM has been achieved.",
     "modalBtn": "Stop Alarm",
     "error": "Please select a device and enter valid positive numbers for volume and PPM.",
-    "readmeLink": "Readme"
+    "readmeLink": "Readme",
+    "statsBtn": "Statistics",
+    "statsTitle": "Usage Statistics",
+    "date": "Date",
+    "time": "Time",
+    "device": "Device",
+    "current": "Current (mA)",
+    "duration": "Duration (hh:mm:ss)",
+    "volume": "Volume (mL)",
+    "ppm": "PPM",
+    "exportBtn": "Export to CSV",
+    "backBtn": "Back",
+    "noData": "No usage data available."
 }

styles.css

@@ -72,6 +72,29 @@ footer a:hover {
     border-radius: 8px;
     text-align: center;
 }
+.stats-container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+    margin: 20px auto;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+th, td {
+    padding: 8px;
+    border: 1px solid #ddd;
+    text-align: left;
+}
+th {
+    background-color: #f4f4f4;
+}
 
 /* Dark Mode */
 @media (prefers-color-scheme: dark) {
@@ -103,4 +126,14 @@ footer a:hover {
     .modal-content {
         background: #2a2a2a;
     }
+    .stats-container {
+        background: #2a2a2a;
+        box-shadow: 0 2px 10px rgba(255,255,255,0.1);
+    }
+    th, td {
+        border-color: #555;
+    }
+    th {
+        background-color: #333;
+    }
 }