HydroFlux 0.0.6

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">
+                            <button id="syncHealthBtn" class="p-2 rounded-full bg-blue-50 hover:bg-blue-100 text-blue-500">
-                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+                                <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>
-                            </svg>
+                            </button>
-                            <svg class="w-5 h-5 fill-blue-400 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
+                            <div class="flex items-center gap-1 ml-1">
-                                <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+                                <svg class="w-5 h-5 fill-blue-500 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
-                            </svg>
+                                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-                            <span class="text-sm font-semibold text-gray-700 ml-1">14 Days</span>
+                                </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) {

Hydroflux/app/src/main/assets/js/modules/views/FitnessView.js

@@ -7,8 +7,9 @@ export class FitnessView {
     }
 
     render() {
-        // Mock Data
+        // Real Data
-        const steps = 8432;
+        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;

Hydroflux/app/src/main/assets/js/modules/views/SleepView.js

@@ -7,9 +7,11 @@ export class SleepView {
     }
 
     render() {
-        // Mock Sleep Data
+        // Real Sleep Data
-        const sleepHours = 7;
+        const healthData = JSON.parse(localStorage.getItem('hydroflux_health_data') || '{"steps": 0, "sleep": 0}');
-        const sleepMins = 20;
+        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">