Add family layer to MapLibre maps

app/javascript/controllers/maps/maplibre/routes_manager.js

@@ -357,4 +357,28 @@ export class RoutesManager {
 
     SettingsManager.updateSetting('pointsVisible', visible)
   }
+
+  /**
+   * Toggle family members layer
+   */
+  async toggleFamily(event) {
+    const enabled = event.target.checked
+    SettingsManager.updateSetting('familyEnabled', enabled)
+
+    const familyLayer = this.layerManager.getLayer('family')
+    if (familyLayer) {
+      if (enabled) {
+        familyLayer.show()
+        // Load family members data
+        await this.controller.loadFamilyMembers()
+      } else {
+        familyLayer.hide()
+      }
+    }
+
+    // Show/hide the family members list
+    if (this.controller.hasFamilyMembersListTarget) {
+      this.controller.familyMembersListTarget.style.display = enabled ? 'block' : 'none'
+    }
+  }
 }

app/javascript/controllers/maps/maplibre/settings_manager.js

@@ -53,6 +53,7 @@ export class SettingsController {
       placesToggle: 'placesEnabled',
       fogToggle: 'fogEnabled',
       scratchToggle: 'scratchEnabled',
+      familyToggle: 'familyEnabled',
       speedColoredToggle: 'speedColoredRoutesEnabled'
     }
 
@@ -73,6 +74,11 @@ export class SettingsController {
       controller.placesFiltersTarget.style.display = controller.placesToggleTarget.checked ? 'block' : 'none'
     }
 
+    // Show/hide family members list based on initial toggle state
+    if (controller.hasFamilyToggleTarget && controller.hasFamilyMembersListTarget) {
+      controller.familyMembersListTarget.style.display = controller.familyToggleTarget.checked ? 'block' : 'none'
+    }
+
     // Sync route opacity slider
     if (controller.hasRouteOpacityRangeTarget) {
       controller.routeOpacityRangeTarget.value = (this.settings.routeOpacity || 1.0) * 100

app/javascript/controllers/maps/maplibre_controller.js

@@ -58,11 +58,15 @@ export default class extends Controller {
     'placesToggle',
     'fogToggle',
     'scratchToggle',
+    'familyToggle',
     // Speed-colored routes
     'routesOptions',
     'speedColoredToggle',
     'speedColorScaleContainer',
     'speedColorScaleInput',
+    // Family members
+    'familyMembersList',
+    'familyMembersContainer',
     // Area selection
     'selectAreaButton',
     'selectionActions',
@@ -347,6 +351,103 @@ export default class extends Controller {
   toggleSpeedColoredRoutes(event) { return this.routesManager.toggleSpeedColoredRoutes(event) }
   openSpeedColorEditor() { return this.routesManager.openSpeedColorEditor() }
   handleSpeedColorSave(event) { return this.routesManager.handleSpeedColorSave(event) }
+  toggleFamily(event) { return this.routesManager.toggleFamily(event) }
+
+  // Family Members methods
+  async loadFamilyMembers() {
+    try {
+      const response = await fetch(`/api/v1/families/locations?api_key=${this.apiKeyValue}`, {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      })
+
+      if (!response.ok) {
+        if (response.status === 403) {
+          console.warn('[Maps V2] Family feature not enabled or user not in family')
+          Toast.info('Family feature not available')
+          return
+        }
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const data = await response.json()
+      const locations = data.locations || []
+
+      // Update family layer with locations
+      const familyLayer = this.layerManager.getLayer('family')
+      if (familyLayer) {
+        familyLayer.loadMembers(locations)
+      }
+
+      // Render family members list
+      this.renderFamilyMembersList(locations)
+
+      Toast.success(`Loaded ${locations.length} family member(s)`)
+    } catch (error) {
+      console.error('[Maps V2] Failed to load family members:', error)
+      Toast.error('Failed to load family members')
+    }
+  }
+
+  renderFamilyMembersList(locations) {
+    if (!this.hasFamilyMembersContainerTarget) return
+
+    const container = this.familyMembersContainerTarget
+
+    if (locations.length === 0) {
+      container.innerHTML = '<p class="text-xs text-base-content/60">No family members sharing location</p>'
+      return
+    }
+
+    container.innerHTML = locations.map(location => {
+      const emailInitial = location.email?.charAt(0)?.toUpperCase() || '?'
+      const color = this.getFamilyMemberColor(location.user_id)
+      const lastSeen = new Date(location.updated_at).toLocaleString('en-US', {
+        timeZone: this.timezoneValue || 'UTC',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      })
+
+      return `
+        <div class="flex items-center gap-2 p-2 hover:bg-base-200 rounded-lg cursor-pointer transition-colors"
+             data-action="click->maps--maplibre#centerOnFamilyMember"
+             data-member-id="${location.user_id}">
+          <div style="background-color: ${color}; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; flex-shrink: 0;">
+            ${emailInitial}
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium truncate">${location.email || 'Unknown'}</div>
+            <div class="text-xs text-base-content/60">${lastSeen}</div>
+          </div>
+        </div>
+      `
+    }).join('')
+  }
+
+  getFamilyMemberColor(userId) {
+    const colors = [
+      '#3b82f6', '#10b981', '#f59e0b',
+      '#ef4444', '#8b5cf6', '#ec4899'
+    ]
+    // Use user ID to get consistent color
+    const hash = userId.toString().split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+    return colors[hash % colors.length]
+  }
+
+  centerOnFamilyMember(event) {
+    const memberId = event.currentTarget.dataset.memberId
+    if (!memberId) return
+
+    const familyLayer = this.layerManager.getLayer('family')
+    if (familyLayer) {
+      familyLayer.centerOnMember(parseInt(memberId))
+      Toast.success('Centered on family member')
+    }
+  }
 
   // Info Display methods
   showInfo(title, content, actions = []) {

app/javascript/maps_maplibre/layers/family_layer.js

@@ -148,4 +148,63 @@ export class FamilyLayer extends BaseLayer {
       features: filtered
     })
   }
+
+  /**
+   * Load all family members from API
+   * @param {Object} locations - Array of family member locations
+   */
+  loadMembers(locations) {
+    if (!Array.isArray(locations)) {
+      console.warn('[FamilyLayer] Invalid locations data:', locations)
+      return
+    }
+
+    const features = locations.map(location => ({
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [location.longitude, location.latitude]
+      },
+      properties: {
+        id: location.user_id,
+        name: location.email || 'Unknown',
+        email: location.email,
+        color: location.color || this.getMemberColor(location.user_id),
+        lastUpdate: Date.now(),
+        battery: location.battery,
+        batteryStatus: location.battery_status,
+        updatedAt: location.updated_at
+      }
+    }))
+
+    this.update({
+      type: 'FeatureCollection',
+      features
+    })
+  }
+
+  /**
+   * Center map on specific family member
+   * @param {string} memberId - ID of the member to center on
+   */
+  centerOnMember(memberId) {
+    const features = this.data?.features || []
+    const member = features.find(f => f.properties.id === memberId)
+
+    if (member && this.map) {
+      this.map.flyTo({
+        center: member.geometry.coordinates,
+        zoom: 15,
+        duration: 1500
+      })
+    }
+  }
+
+  /**
+   * Get all current family members
+   * @returns {Array} Array of member features
+   */
+  getMembers() {
+    return this.data?.features || []
+  }
 }

app/views/map/maplibre/_settings_panel.html.erb

@@ -317,6 +317,32 @@
             <p class="text-sm text-base-content/60 ml-14">Show scratched countries</p>
           </div>
 
+          <% if DawarichSettings.family_feature_enabled? %>
+            <div class="divider"></div>
+
+            <!-- Family Members Layer -->
+            <div class="form-control">
+              <label class="label cursor-pointer justify-start gap-3">
+                <input type="checkbox"
+                       class="toggle toggle-primary"
+                       data-maps--maplibre-target="familyToggle"
+                       data-action="change->maps--maplibre#toggleFamily" />
+                <span class="label-text font-medium">Family Members</span>
+              </label>
+              <p class="text-sm text-base-content/60 ml-14">Show family member locations</p>
+            </div>
+
+            <!-- Family Members List (conditionally shown) -->
+            <div class="ml-14 space-y-2" data-maps--maplibre-target="familyMembersList" style="display: none;">
+              <div class="text-xs text-base-content/60 mb-2">
+                Click to center on member
+              </div>
+              <div data-maps--maplibre-target="familyMembersContainer" class="space-y-1">
+                <!-- Family members will be dynamically inserted here -->
+              </div>
+            </div>
+          <% end %>
+
         </div>
       </div>
 

db/migrate/20251208210410_add_composite_index_to_stats.rb

@@ -3,17 +3,55 @@
 class AddCompositeIndexToStats < ActiveRecord::Migration[8.0]
   disable_ddl_transaction!
 
+  BATCH_SIZE = 1000
+
   def change
-    # Add composite index for the most common stats lookup pattern:
-    # Stat.find_or_initialize_by(year:, month:, user:)
-    # This query is called on EVERY stats calculation
-    #
-    # Using algorithm: :concurrently to avoid locking the table during index creation
-    # This is crucial for production deployments with existing data
+    total_duplicates = execute(<<-SQL.squish).first['count'].to_i
+      SELECT COUNT(*) as count
+      FROM stats s1
+      WHERE EXISTS (
+        SELECT 1 FROM stats s2
+        WHERE s2.user_id = s1.user_id
+          AND s2.year = s1.year
+          AND s2.month = s1.month
+          AND s2.id > s1.id
+      )
+    SQL
+
+    if total_duplicates.positive?
+      Rails.logger.info(
+        "Found #{total_duplicates} duplicate stats records. Starting cleanup in batches of #{BATCH_SIZE}..."
+      )
+    end
+
+    deleted_count = 0
+    loop do
+      batch_deleted = execute(<<-SQL.squish).cmd_tuples
+        DELETE FROM stats s1
+        WHERE EXISTS (
+          SELECT 1 FROM stats s2
+          WHERE s2.user_id = s1.user_id
+            AND s2.year = s1.year
+            AND s2.month = s1.month
+            AND s2.id > s1.id
+        )
+        LIMIT #{BATCH_SIZE}
+      SQL
+
+      break if batch_deleted.zero?
+
+      deleted_count += batch_deleted
+      Rails.logger.info("Cleaned up #{deleted_count}/#{total_duplicates} duplicate stats records")
+    end
+
+    Rails.logger.info("Completed cleanup: removed #{deleted_count} duplicate stats records") if deleted_count.positive?
+
     add_index :stats, %i[user_id year month],
               name: 'index_stats_on_user_id_year_month',
               unique: true,
               algorithm: :concurrently,
               if_not_exists: true
+
+    BulkStatsCalculatingJob.perform_later
   end
 end