HydroFlux 0.0.6

2026-02-09 21:10:20 +11:00
parent 65ffd626a1
commit bc2e6f70cc
4 changed files with 70 additions and 19 deletions
--- a/Hydroflux/app/src/main/assets/js/modules/dashboard.js
+++ b/Hydroflux/app/src/main/assets/js/modules/dashboard.js
@@ -10,13 +10,17 @@ export class Dashboard {
    render() {
        if (!this.container) return;

-        // Data Retrieval (Keeping persistence)
        // Data Retrieval (Keeping persistence)
        const waterData = JSON.parse(localStorage.getItem('hydroflux_data') || '{"current":0,"goal":3.0}');
-        const stepsData = 8432;
+
+        // Real Health Data (Default to 0 until synced)
+        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
+        const stepsData = healthData.steps;
+        const sleepHoursTotal = healthData.sleep;
+        const sleepHours = Math.floor(sleepHoursTotal);
+        const sleepMins = Math.round((sleepHoursTotal - sleepHours) * 60);
+
        const goalData = 10000;
-        const sleepHours = 7;
-        const sleepMins = 20;

        const goalsData = JSON.parse(localStorage.getItem('hydroflux_goals') || JSON.stringify([
            { id: '1', text: 'Drink 3L of water', completed: true },
@@ -56,13 +60,15 @@ export class Dashboard {

                        <!-- Streak -->
                        <div class="flex items-center gap-1">
-                            <svg class="w-5 h-5 fill-blue-500 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-                            </svg>
-                            <svg class="w-5 h-5 fill-blue-400 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-                            </svg>
-                            <span class="text-sm font-semibold text-gray-700 ml-1">14 Days</span>
+                            <button id="syncHealthBtn" class="p-2 rounded-full bg-blue-50 hover:bg-blue-100 text-blue-500">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+                            </button>
+                            <div class="flex items-center gap-1 ml-1">
+                                <svg class="w-5 h-5 fill-blue-500 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
+                                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+                                </svg>
+                                <span class="text-sm font-semibold text-gray-700 ml-1">14 Days</span>
+                            </div>
                        </div>
                    </div>
                </div>
@@ -102,7 +108,7 @@ export class Dashboard {
                                    <circle id="stepsCircle" cx="64" cy="64" r="45" stroke="#60A5FA" stroke-width="8" fill="none" stroke-linecap="round" style="transition: stroke-dashoffset 0.5s;" />
                                </svg>
                                <div class="absolute inset-0 flex flex-col items-center justify-center">
-                                    <span class="text-2xl font-bold text-gray-800">${stepsData.toLocaleString()}</span>
+                                    <span id="stepsCount" class="text-2xl font-bold text-gray-800">${stepsData.toLocaleString()}</span>
                                    <span class="text-xs text-gray-500">steps</span>
                                </div>
                            </div>
@@ -131,7 +137,7 @@ export class Dashboard {
                        </svg>
                    </div>
                    <div class="flex items-center justify-between">
-                        <span class="text-xl font-bold text-gray-800">${sleepHours}h ${sleepMins}m</span>
+                        <span id="sleepTime" class="text-xl font-bold text-gray-800">${sleepHours}h ${sleepMins}m</span>
                        <span class="text-sm text-blue-600 font-medium">Light Sleep</span>
                    </div>
                </div>
@@ -157,6 +163,34 @@ export class Dashboard {

        this.updateDynamicElements(stepsData, goalData);
        this.renderGoals(goalsData);
+
+        // Expose Native Callback
+        window.updateHealthData = (steps, sleepHoursTotal) => {
+            console.log("Received Health Data:", steps, sleepHoursTotal);
+
+            // Save to Storage
+            localStorage.setItem('hydroflux_health_data', JSON.stringify({ steps: steps, sleep: sleepHoursTotal }));
+
+            // Update UI directly
+            const stepsCount = this.container.querySelector('#stepsCount');
+            if (stepsCount) stepsCount.textContent = steps.toLocaleString();
+
+            const sh = Math.floor(sleepHoursTotal);
+            const sm = Math.round((sleepHoursTotal - sh) * 60);
+            const sleepTime = this.container.querySelector('#sleepTime');
+            if (sleepTime) sleepTime.textContent = `${sh}h ${sm}m`;
+
+            this.updateDynamicElements(steps, 10000);
+        };
+
+        // Trigger initial sync if native interface exists
+        if (window.HydroFluxNative) {
+            try {
+                window.HydroFluxNative.requestHealthPermissions();
+            } catch (e) {
+                console.error("Native sync error", e);
+            }
+        }
    }

    updateDynamicElements(steps, goal) {
@@ -170,7 +204,7 @@ export class Dashboard {
            circle.style.strokeDashoffset = strokeDashoffset;
        }

-        // Sleep Chart Logic
+        // Sleep Chart Logic (Static for now, but could be dynamic)
        const sleepData = [30, 35, 25, 40, 55, 45, 60, 75, 70, 80, 65, 55, 50, 45, 40];
        const chartWidth = 300;
        const chartHeight = 100;
@@ -308,6 +342,20 @@ export class Dashboard {
            });
        }

+        // Sync Health Listener
+        const syncBtn = this.container.querySelector('#syncHealthBtn');
+        if (syncBtn) {
+            syncBtn.addEventListener('click', () => {
+                if (window.HydroFluxNative) {
+                    window.HydroFluxNative.requestHealthPermissions();
+                } else {
+                    alert("Health Sync only available on Android App");
+                    // Mock data for browser testing
+                    window.updateHealthData(12500, 7.8);
+                }
+            });
+        }
+
        // Notes Save
        const noteArea = this.container.querySelector('#notesInput');
        if (noteArea) {
--- a/Hydroflux/app/src/main/assets/js/modules/views/FitnessView.js
+++ b/Hydroflux/app/src/main/assets/js/modules/views/FitnessView.js
@@ -7,8 +7,9 @@ export class FitnessView {
    }

    render() {
-        // Mock Data
-        const steps = 8432;
+        // Real Data
+        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
+        const steps = healthData.steps;
        const goal = 10000;
        const pct = Math.min((steps / goal) * 100, 100);
        const radius = 80;
--- a/Hydroflux/app/src/main/assets/js/modules/views/SleepView.js
+++ b/Hydroflux/app/src/main/assets/js/modules/views/SleepView.js
@@ -7,9 +7,11 @@ export class SleepView {
    }

    render() {
-        // Mock Sleep Data
-        const sleepHours = 7;
-        const sleepMins = 20;
+        // Real Sleep Data
+        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
+        const sleepHoursTotal = healthData.sleep;
+        const sleepHours = Math.floor(sleepHoursTotal);
+        const sleepMins = Math.round((sleepHoursTotal - sleepHours) * 60);

        this.container.innerHTML = `
             <div class="w-full max-w-md bg-white min-h-screen relative overflow-hidden mx-auto bg-gradient-to-br from-blue-50 to-white flex flex-col p-6">
--- a/Hydroflux/releases/HydroFlux_v2.apk
+++ b/Hydroflux/releases/HydroFlux_v2.apk