Spaces:
Running
Running
| /** | |
| * Script cliente de AgroVisión: navegación por pestañas, estado efímero, | |
| * mapa Leaflet, gráficos Chart.js, modales y llamadas al gateway. | |
| */ | |
| // ===== Estado EFÍMERO (solo memoria; se borra al refrescar) ===== | |
| let creds = {}; | |
| let parcels = []; | |
| let drawnGeojson = null; | |
| let map = null, drawnItems = null, parcelsLayer = null; | |
| let chartResumen = null, chartSatelite = null, chartWeather = null, chartAnalysis = null; | |
| const sessionId = "sess-" + Math.random().toString(36).slice(2); | |
| let backendOk = false; | |
| let appEnv = "development"; | |
| const VALID_INDICES = ["ndvi", "evi", "savi", "ndwi", "ndre"]; | |
| const INDEX_LABELS = { ndvi: "NDVI", evi: "EVI", savi: "SAVI", ndwi: "NDWI", ndre: "NDRE" }; | |
| const RECOMMENDED_INDICES_BY_CROP = { | |
| "Arándanos": ["ndvi", "ndwi", "ndre"], | |
| "Uva": ["ndvi", "savi", "ndwi"], | |
| "Uvas": ["ndvi", "savi", "ndwi"], | |
| "Paltos": ["ndvi", "evi", "ndre"], | |
| "Cítricos": ["ndvi", "evi", "ndre"], | |
| "Espárragos": ["ndvi", "savi"], | |
| "Otros": ["ndvi"], | |
| }; | |
| let activeParcelIndices = []; | |
| // Perfiles y Modos de Sesión (Fase 15) | |
| let profileId = null; | |
| let currentProfile = null; | |
| let fingerprint = null; | |
| let isSharedMode = false; | |
| async function sha256(message) { | |
| const msgBuffer = new TextEncoder().encode(message); | |
| const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); | |
| const hashArray = Array.from(new Uint8Array(hashBuffer)); | |
| return hashArray.map((b) => b.toString(16).padStart(2, "0")).join(""); | |
| } | |
| const $ = (id) => document.getElementById(id); | |
| function authHeaders() { | |
| const h = {}; | |
| if (creds.groq) h["X-User-Groq-Key"] = creds.groq; | |
| if (creds.copId) h["X-User-Copernicus-Id"] = creds.copId; | |
| if (creds.copSecret) h["X-User-Copernicus-Secret"] = creds.copSecret; | |
| if (creds.sbUrl) h["X-User-Supabase-Url"] = creds.sbUrl; | |
| if (creds.sbKey) h["X-User-Supabase-Key"] = creds.sbKey; | |
| if (creds.dbUrl) h["X-User-Database-Url"] = creds.dbUrl; | |
| return h; | |
| } | |
| function notify(title, body) { | |
| $("notif-title").innerText = title; $("notif-body").innerText = body || ""; | |
| const n = $("notif"); n.classList.remove("translate-x-[150%]"); | |
| setTimeout(() => n.classList.add("translate-x-[150%]"), 3500); | |
| } | |
| function updateStatus() { | |
| const el = $("db-status-text"); | |
| const dot = $("db-status").querySelector("span.relative"); | |
| if (!backendOk) { | |
| el.innerText = "Backend no disponible"; | |
| el.className = "text-red-500"; | |
| dot.className = "relative inline-flex rounded-full h-2 w-2 bg-red-500"; | |
| return; | |
| } | |
| fetch("./api/credentials/status", { headers: authHeaders() }) | |
| .then((r) => r.ok ? r.json() : null) | |
| .then((s) => { | |
| if (!s) { | |
| el.innerText = "Backend conectado · Status desconocido"; | |
| el.className = "text-amber-400"; | |
| dot.className = "relative inline-flex rounded-full h-2 w-2 bg-amber-500"; | |
| return; | |
| } | |
| const missing = []; | |
| if (!s.groq) missing.push("Groq"); | |
| if (!s.copernicus) missing.push("Copernicus"); | |
| if (!s.supabase) missing.push("Supabase"); | |
| if (missing.length === 0) { | |
| el.innerText = "Backend conectado · Todo OK"; | |
| el.className = "text-emerald-400"; | |
| dot.className = "relative inline-flex rounded-full h-2 w-2 bg-emerald-500"; | |
| } else { | |
| el.innerText = `Backend conectado · Faltan: ${missing.join(", ")}`; | |
| el.className = "text-amber-400"; | |
| dot.className = "relative inline-flex rounded-full h-2 w-2 bg-amber-500"; | |
| } | |
| }) | |
| .catch(() => { | |
| el.innerText = "Backend conectado · Error al verificar credenciales"; | |
| el.className = "text-amber-400"; | |
| dot.className = "relative inline-flex rounded-full h-2 w-2 bg-amber-500"; | |
| }); | |
| } | |
| // ===== Telemetría (Fase 9) ===== | |
| function track(action, meta = {}) { | |
| try { | |
| fetch("./api/events", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ action, meta, session_id: sessionId, ts: new Date().toISOString() }), | |
| keepalive: true, | |
| }).catch(() => {}); | |
| } catch { /* la telemetría nunca debe propagar errores */ } | |
| } | |
| window.addEventListener("error", (e) => track("js_error", { message: String(e.message || e), where: "window" })); | |
| window.addEventListener("unhandledrejection", (e) => track("js_error", { message: String(e.reason || ""), where: "promise" })); | |
| async function api(path, opts = {}) { | |
| try { | |
| const res = await fetch("./api" + path, { | |
| ...opts, | |
| headers: { ...(opts.body ? { "Content-Type": "application/json" } : {}), ...authHeaders(), ...(opts.headers || {}) }, | |
| }); | |
| if (!res.ok) track("api_error", { where: path, status: res.status, method: opts.method || "GET" }); | |
| return res; | |
| } catch (e) { | |
| track("api_error", { where: path, status: "network", method: opts.method || "GET" }); | |
| throw e; | |
| } | |
| } | |
| function getCheckedIndices(selector) { | |
| return Array.from(document.querySelectorAll(`${selector}:checked`)).map((checkbox) => checkbox.value); | |
| } | |
| function setCheckedIndices(selector, indices) { | |
| const selected = new Set(indices || []); | |
| document.querySelectorAll(selector).forEach((checkbox) => { | |
| checkbox.checked = selected.has(checkbox.value); | |
| }); | |
| } | |
| function normalizeIndices(indices) { | |
| const valid = Array.isArray(indices) ? indices.filter((index) => VALID_INDICES.includes(index)) : []; | |
| return valid.length ? [...new Set(valid)] : ["ndvi"]; | |
| } | |
| function formatIndices(indices) { | |
| return (indices || []).map((index) => INDEX_LABELS[index] || index.toUpperCase()).join(", "); | |
| } | |
| function getParcelIndices(fieldId) { | |
| const parcel = parcels.find((item) => item.id === fieldId); | |
| return normalizeIndices(parcel?.selected_indices); | |
| } | |
| function setParcelIndices(fieldId, indices) { | |
| const normalized = normalizeIndices(indices); | |
| const parcel = parcels.find((item) => item.id === fieldId); | |
| if (parcel) parcel.selected_indices = normalized; | |
| activeParcelIndices = normalized; | |
| return normalized; | |
| } | |
| function renderActiveIndexBadges(indices) { | |
| const container = $("parcel-active-indices"); | |
| if (!container) return; | |
| const selected = new Set(indices || []); | |
| container.innerHTML = VALID_INDICES.map((index) => { | |
| const isActive = selected.has(index); | |
| const badgeClass = isActive | |
| ? "bg-emerald-100 text-emerald-800 border-emerald-200" | |
| : "bg-stone-100 text-stone-400 border-stone-200"; | |
| const icon = isActive ? "fa-circle-check" : "fa-circle"; | |
| return `<span class="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-full border ${badgeClass}" title="${isActive ? "Variable activa" : "Variable no activa"}"><i class="fa-solid ${icon} text-[9px]"></i>${INDEX_LABELS[index]}</span>`; | |
| }).join(""); | |
| } | |
| function updateIndexSelectOptions(indices) { | |
| const selected = new Set(indices || []); | |
| document.querySelectorAll("#select-index option").forEach((option) => { | |
| const baseLabel = option.dataset.indexLabel || option.textContent.replace(/ · (activa|agregar)$/, ""); | |
| option.textContent = `${baseLabel} · ${selected.has(option.value) ? "activa" : "agregar"}`; | |
| }); | |
| } | |
| function syncSatelliteIndexControls(fieldId, field = null) { | |
| const indices = fieldId ? normalizeIndices(field?.selected_indices ?? getParcelIndices(fieldId)) : []; | |
| activeParcelIndices = indices; | |
| setCheckedIndices(".attr-index-checkbox", indices); | |
| setCheckedIndices(".reprocess-index-checkbox", indices); | |
| renderActiveIndexBadges(indices); | |
| updateIndexSelectOptions(indices); | |
| } | |
| function applyCreatorIndices(indices) { | |
| setCheckedIndices(".creator-index-checkbox", normalizeIndices(indices)); | |
| $("creator-indices-error")?.classList.add("hidden"); | |
| } | |
| // ===== Navegación ===== | |
| const TITLES = { | |
| "tab-resumen": ["Resumen de Campo", "Visión analítica unificada de parcelas."], | |
| "tab-satelite": ["Teledetección (GIS)", "NDVI 5 años + clima + heatmap (solo lectura)."], | |
| "tab-weather": ["Meteorología y Clima", "Historial agroclimático mensual de Open-Meteo."], | |
| "tab-analysis": ["Análisis Cruzado", "Correlación temporal entre índices y variables climáticas."], | |
| "tab-vision": ["Detección por Dron", "Conteo de plantas — EN DESARROLLO."], | |
| "tab-data": ["Explorador de Datos", "Consulta tus datos directamente (Fase 11)."], | |
| "tab-config": ["Credenciales & APIs", "Llaves efímeras (solo en esta sesión)."], | |
| "tab-settings": ["Ajustes de Perfil", "Gestión del modo de sesión y preferencias de usuario."], | |
| }; | |
| function showSection2Chat() { | |
| const form = $("section2-form"); | |
| const chat = $("section2-chat"); | |
| const icon = $("branding-icon"); | |
| const btn = $("btn-branding-toggle"); | |
| if (form && chat) { | |
| form.classList.add("hidden"); | |
| chat.classList.remove("hidden"); | |
| } | |
| if (icon) icon.className = "fa-solid fa-sliders text-base"; | |
| if (btn) btn.title = "Mostrar Ajustes de Parcela"; | |
| loadChatHistory(); | |
| } | |
| function switchTab(id) { | |
| document.querySelectorAll(".tab-content").forEach((s) => s.classList.remove("active")); | |
| document.querySelectorAll(".nav-btn").forEach((b) => b.classList.remove("nav-btn-active")); | |
| const sec = $(id); if (!sec) return; | |
| sec.classList.add("active"); | |
| // Mantener seleccionada la opción correcta del menú lateral | |
| document.querySelector(`.nav-btn[data-tab="${id}"]`)?.classList.add("nav-btn-active"); | |
| if (location.hash !== "#" + id) history.replaceState(null, "", "#" + id); | |
| track("nav", { tab: id }); | |
| if (id === "tab-resumen") { | |
| setTimeout(initMap, 50); | |
| loadResumen(); | |
| showSection2Chat(); | |
| } | |
| if (id === "tab-satelite") { | |
| loadTeledeteccion(); | |
| } | |
| if (id === "tab-weather") { | |
| loadWeather(); | |
| } | |
| if (id === "tab-analysis") { | |
| loadAnalysis(); | |
| } | |
| if (id === "tab-data") loadDataExplorer(); | |
| if (id === "tab-chat") loadChatHistory(); | |
| } | |
| document.querySelectorAll(".nav-btn").forEach((b) => | |
| b.addEventListener("click", () => switchTab(b.dataset.tab)) | |
| ); | |
| // Botón "Volver al Mapa" para regresar al visor principal del mapa | |
| document.querySelectorAll(".btn-volver-mapa").forEach((btn) => { | |
| btn.addEventListener("click", () => switchTab("tab-resumen")); | |
| }); | |
| // ===== Sidebar colapsable manual (Sección 1) ===== | |
| $("btn-sidebar-toggle").addEventListener("click", () => { | |
| const isExpanded = $("sidebar").classList.toggle("expanded"); | |
| $("toggle-icon").className = isExpanded ? "fa-solid fa-angles-left" : "fa-solid fa-bars"; | |
| track("sidebar_toggle", { expanded: isExpanded }); | |
| if (map) setTimeout(() => map.invalidateSize(), 300); | |
| }); | |
| $("btn-footer").addEventListener("click", () => { | |
| $("footer-body").classList.toggle("hidden"); | |
| $("footer-chevron").classList.toggle("fa-chevron-up"); | |
| $("footer-chevron").classList.toggle("fa-chevron-down"); | |
| }); | |
| // ===== Alternador de Chat y Formulario en Sección 2 ===== | |
| $("btn-branding-toggle").addEventListener("click", () => { | |
| const isFormVisible = !$("section2-form").classList.contains("hidden"); | |
| if (isFormVisible) { | |
| $("section2-form").classList.add("hidden"); | |
| $("section2-chat").classList.remove("hidden"); | |
| $("branding-icon").className = "fa-solid fa-sliders text-base"; | |
| $("btn-branding-toggle").title = "Mostrar Ajustes de Parcela"; | |
| loadChatHistory(); | |
| track("chat_toggle", { state: "open" }); | |
| } else { | |
| $("section2-form").classList.remove("hidden"); | |
| $("section2-chat").classList.add("hidden"); | |
| $("branding-icon").className = "fa-solid fa-robot text-base"; | |
| $("btn-branding-toggle").title = "Mostrar Chat con Asistente"; | |
| track("chat_toggle", { state: "closed" }); | |
| } | |
| }); | |
| // ===== Gestión de Atributos de Ajustes de Parcela (Sección 2) ===== | |
| async function loadFieldAttributes(fid) { | |
| if (!fid) { | |
| clearFieldAttributes(); | |
| return; | |
| } | |
| try { | |
| const res = await api(`/fields/${fid}`); | |
| if (res.ok) { | |
| const field = await res.json(); | |
| $("attr-crop-variety").value = field.crop_variety || ""; | |
| $("attr-field-type").value = field.field_type || ""; | |
| $("attr-soil-type").value = field.soil_type || ""; | |
| $("attr-irrigation-system").value = field.irrigation_system || ""; | |
| $("attr-pests-diseases").value = field.pests_diseases || ""; | |
| $("attr-plantation-date").value = field.plantation_date || ""; | |
| $("attr-num-plants").value = field.num_plants || ""; | |
| $("attr-historical-yield").value = field.historical_yield || ""; | |
| $("attr-target-market").value = field.target_market || ""; | |
| $("attr-document-metadata").value = field.document_metadata || ""; | |
| const fieldIndices = Array.isArray(field.selected_indices) ? field.selected_indices : getParcelIndices(fid); | |
| setParcelIndices(fid, fieldIndices); | |
| syncSatelliteIndexControls(fid); | |
| $("active-parcel-name-display").innerText = field.name; | |
| } | |
| } catch (e) { | |
| console.error("Error al cargar atributos de la parcela", e); | |
| } | |
| } | |
| function clearFieldAttributes() { | |
| $("attr-crop-variety").value = ""; | |
| $("attr-field-type").value = ""; | |
| $("attr-soil-type").value = ""; | |
| $("attr-irrigation-system").value = ""; | |
| $("attr-pests-diseases").value = ""; | |
| $("attr-plantation-date").value = ""; | |
| $("attr-num-plants").value = ""; | |
| $("attr-historical-yield").value = ""; | |
| $("attr-target-market").value = ""; | |
| $("attr-document-metadata").value = ""; | |
| syncSatelliteIndexControls(null); | |
| $("active-parcel-name-display").innerText = "—"; | |
| } | |
| async function saveFieldAttributes(fid, isAutosave) { | |
| if (!fid) return; | |
| const previousIndices = getParcelIndices(fid); | |
| const selectedIndices = getCheckedIndices(".attr-index-checkbox"); | |
| const nextIndices = selectedIndices.length ? normalizeIndices(selectedIndices) : ["ndvi"]; | |
| const body = { | |
| crop_variety: $("attr-crop-variety").value.trim() || null, | |
| field_type: $("attr-field-type").value.trim() || null, | |
| soil_type: $("attr-soil-type").value.trim() || null, | |
| irrigation_system: $("attr-irrigation-system").value.trim() || null, | |
| pests_diseases: $("attr-pests-diseases").value.trim() || null, | |
| plantation_date: $("attr-plantation-date").value || null, | |
| num_plants: $("attr-num-plants").value ? parseInt($("attr-num-plants").value, 10) : null, | |
| historical_yield: $("attr-historical-yield").value.trim() || null, | |
| target_market: $("attr-target-market").value.trim() || null, | |
| document_metadata: $("attr-document-metadata").value.trim() || null, | |
| selected_indices: nextIndices | |
| }; | |
| try { | |
| const res = await api(`/fields/${fid}`, { | |
| method: "PATCH", | |
| body: JSON.stringify(body) | |
| }); | |
| if (res.ok) { | |
| const addedIndices = nextIndices.filter((index) => !previousIndices.includes(index)); | |
| setParcelIndices(fid, nextIndices); | |
| syncSatelliteIndexControls(fid); | |
| if (!isAutosave) { | |
| if (addedIndices.length) { | |
| notify("Ajustes guardados", `Se agregaron ${formatIndices(addedIndices)}. El cálculo satelital continúa en segundo plano.`); | |
| } else { | |
| notify("Ajustes guardados", "Los atributos de la parcela se han guardado."); | |
| } | |
| } else if (addedIndices.length) { | |
| notify("Nuevas variables satelitales", `Calculando ${formatIndices(addedIndices)} en segundo plano.`); | |
| } | |
| track("field_attributes_saved", { | |
| field_id: fid, | |
| autosave: isAutosave, | |
| selected_indices: nextIndices, | |
| added_indices: addedIndices | |
| }); | |
| } else { | |
| const e = await res.json().catch(() => ({})); | |
| if (!isAutosave) { | |
| notify("Error al guardar", e.detail || "Error desconocido"); | |
| } | |
| } | |
| } catch (e) { | |
| if (!isAutosave) { | |
| notify("Error de red", String(e)); | |
| } | |
| } | |
| } | |
| let autosaveTimeout = null; | |
| function triggerAutosave() { | |
| const fid = $("select-parcela").value; | |
| if (!fid) return; | |
| if (autosaveTimeout) clearTimeout(autosaveTimeout); | |
| autosaveTimeout = setTimeout(() => { | |
| saveFieldAttributes(fid, true); | |
| }, 1200); // 1.2s debounced auto-save | |
| } | |
| // Conectar eventos de autosave (input change o blur) | |
| [ | |
| "attr-crop-variety", "attr-field-type", "attr-soil-type", "attr-irrigation-system", | |
| "attr-pests-diseases", "attr-plantation-date", "attr-num-plants", "attr-historical-yield", | |
| "attr-target-market", "attr-document-metadata" | |
| ].forEach(id => { | |
| $(id).addEventListener("input", triggerAutosave); | |
| $(id).addEventListener("blur", () => { | |
| const fid = $("select-parcela").value; | |
| if (fid) saveFieldAttributes(fid, false); // guardar inmediatamente al perder el foco | |
| }); | |
| }); | |
| document.querySelectorAll(".attr-index-checkbox").forEach((checkbox) => { | |
| checkbox.addEventListener("change", triggerAutosave); | |
| }); | |
| $("btn-save-attributes").addEventListener("click", (e) => { | |
| e.preventDefault(); | |
| const fid = $("select-parcela").value; | |
| if (!fid) return notify("Error", "Selecciona una parcela primero."); | |
| saveFieldAttributes(fid, false); | |
| }); | |
| // ===== Gestión de Parcelas y Mapa (Sección 3) ===== | |
| function renderFloatingParcels() { | |
| const list = $("floating-parcelas-list"); | |
| if (!list) return; | |
| const activeId = $("select-parcela").value; | |
| list.innerHTML = parcels.length | |
| ? parcels.map((p) => { | |
| const isActive = p.id === activeId; | |
| const circleIcon = isActive | |
| ? '<i class="fa-solid fa-circle-dot text-emerald-500"></i>' | |
| : '<i class="fa-regular fa-circle text-stone-500"></i>'; | |
| const bgClass = isActive | |
| ? 'bg-stone-900 border-emerald-800/40' | |
| : 'hover:bg-stone-900/50 border-transparent'; | |
| return ` | |
| <div data-pid="${p.id}" class="floating-parcel-item flex items-center justify-between p-2 rounded-lg border ${bgClass} cursor-pointer transition-all"> | |
| <div class="flex items-center gap-2 select-item-click"> | |
| ${circleIcon} | |
| <span class="text-xs font-semibold text-stone-200">${p.name}</span> | |
| </div> | |
| <i class="fa-solid fa-gear text-stone-500 hover:text-stone-300 cursor-pointer btn-gear-click" title="Ajustes de Parcela"></i> | |
| </div> | |
| `; | |
| }).join("") | |
| : '<div class="text-xs text-stone-500 py-2">Sin parcelas aún.</div>'; | |
| // Actualizar el botón principal y el estado en el widget | |
| const activeParcel = parcels.find(p => p.id === activeId); | |
| if (activeParcel) { | |
| $("current-farm-name").innerText = activeParcel.name; | |
| if ($("floating-parcel-name")) $("floating-parcel-name").innerText = activeParcel.name; | |
| if ($("floating-parcel-area")) $("floating-parcel-area").innerText = `${activeParcel.area_ha != null ? activeParcel.area_ha.toFixed(1) : "—"} ha`; | |
| } else { | |
| $("current-farm-name").innerText = "Seleccionar Parcela"; | |
| if ($("floating-parcel-name")) $("floating-parcel-name").innerText = "Ninguna seleccionada"; | |
| if ($("floating-parcel-area")) $("floating-parcel-area").innerText = "— ha"; | |
| } | |
| } | |
| function selectParcel(id) { | |
| const sel = $("select-parcela"); | |
| if (sel) { | |
| sel.value = id; | |
| sel.dispatchEvent(new Event("change")); | |
| } | |
| } | |
| async function refreshParcels() { | |
| const previousIndices = new Map(parcels.map((parcel) => [parcel.id, parcel.selected_indices])); | |
| try { | |
| const r = await api("/fields"); | |
| parcels = r.ok ? await r.json() : []; | |
| } catch { parcels = []; } | |
| parcels = parcels.map((parcel) => { | |
| const backendIndices = Array.isArray(parcel.selected_indices) ? parcel.selected_indices : null; | |
| const fallbackIndices = previousIndices.get(parcel.id); | |
| const indices = backendIndices?.length ? backendIndices : fallbackIndices; | |
| return { ...parcel, selected_indices: normalizeIndices(indices) }; | |
| }); | |
| const sel = $("select-parcela"); | |
| const previousActiveId = sel.value; | |
| sel.innerHTML = parcels.length | |
| ? parcels.map((p) => `<option value="${p.id}">${p.name}</option>`).join("") | |
| : '<option value="">(sin parcelas)</option>'; | |
| if (previousActiveId && sel.querySelector(`option[value="${previousActiveId}"]`)) { | |
| sel.value = previousActiveId; | |
| } | |
| if ($("parcelas-list")) { | |
| $("parcelas-list").innerHTML = parcels.length | |
| ? parcels.map((p) => `<li data-pid="${p.id}" title="Ir a la parcela" class="flex items-center justify-between bg-stone-50 border border-stone-200 rounded px-2.5 py-1.5 cursor-pointer hover:bg-stone-100"><span class="font-semibold text-stone-700 text-[11px]"><i class="fa-solid fa-location-dot text-emerald-600 mr-1"></i>${p.name}</span><i class="fa-solid fa-crosshairs text-stone-400"></i></li>`).join("") | |
| : '<li class="text-stone-500">Sin parcelas aún.</li>'; | |
| } | |
| renderFloatingParcels(); | |
| renderParcelsOnMap(); | |
| } | |
| // Recarga canónica de parcelas (Fase 10: delega en refreshParcels). | |
| const loadParcels = refreshParcels; | |
| function initMap() { | |
| if (map) { map.invalidateSize(); return; } | |
| const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap" }); | |
| const sat = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { attribution: "© Esri World Imagery", maxZoom: 19 }); | |
| const topo = L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", { attribution: "© OpenTopoMap", maxZoom: 17 }); | |
| map = L.map("map", { center: [-11.37, -77.37], zoom: 11, layers: [sat] }); // Lomas de Lachay | |
| L.control.layers({ "Satélite": sat, "Normal": osm, "Relieve": topo }).addTo(map); | |
| drawnItems = new L.FeatureGroup().addTo(map); | |
| parcelsLayer = L.geoJSON(null, { | |
| style: { color: "#15803d", weight: 2, fillColor: "#15803d", fillOpacity: 0.15 }, | |
| onEachFeature: (f, layer) => layer.bindPopup(f.properties.name), | |
| }).addTo(map); | |
| renderParcelsOnMap(); | |
| const drawControl = new L.Control.Draw({ | |
| draw: { polygon: true, marker: false, polyline: false, circle: false, rectangle: false, circlemarker: false }, | |
| edit: { featureGroup: drawnItems, edit: false, remove: true }, | |
| }); | |
| map.addControl(drawControl); | |
| map.on(L.Draw.Event.CREATED, (e) => { | |
| drawnItems.clearLayers(); | |
| drawnItems.addLayer(e.layer); | |
| drawnGeojson = e.layer.toGeoJSON().geometry; | |
| let areaHa = 1.25; | |
| try { | |
| const latlngs = e.layer.getLatLngs()[0]; | |
| const areaM2 = L.GeometryUtil.geodesicArea(latlngs); | |
| areaHa = areaM2 / 10000; | |
| } catch(err) { | |
| console.log("No L.GeometryUtil, using default estimation."); | |
| } | |
| $("creator-area-ha").innerText = `${areaHa.toFixed(2)} ha`; | |
| $("creator-name-input").value = `Lote_${parcels.length + 1}`; | |
| // Cambiar a Paso B (Detalles) en Seccion 2 | |
| $("creator-step-drawing").classList.add("hidden"); | |
| $("creator-step-details").classList.remove("hidden"); | |
| // Ocultar banner de dibujo | |
| $("map-draw-banner").classList.add("hidden"); | |
| if (polygonDrawer) { | |
| try { polygonDrawer.disable(); } catch(err){} | |
| } | |
| }); | |
| map.on(L.Draw.Event.DRAWSTART, () => { | |
| $("map-draw-banner").classList.remove("hidden"); | |
| $("map-draw-banner-text").innerText = "Haz clic en el mapa para marcar tu primer punto."; | |
| }); | |
| map.on(L.Draw.Event.DRAWVERTEX, () => { | |
| $("map-draw-banner-text").innerText = "Completa tu lote marcando los puntos restantes en el mapa. Haz doble clic o cierra para terminar."; | |
| }); | |
| } | |
| function renderParcelsOnMap() { | |
| if (!parcelsLayer) return; | |
| parcelsLayer.clearLayers(); | |
| const feats = parcels | |
| .filter((p) => p.geojson) | |
| .map((p) => ({ type: "Feature", properties: { name: p.name, id: p.id }, geometry: p.geojson })); | |
| if (!feats.length) return; | |
| parcelsLayer.addData({ type: "FeatureCollection", features: feats }); | |
| try { map.fitBounds(parcelsLayer.getBounds(), { maxZoom: 14, padding: [25, 25] }); } catch {} | |
| } | |
| function flyToParcel(id) { | |
| const p = parcels.find((x) => x.id === id); | |
| if (!p || !p.geojson || !map) return; | |
| try { map.flyToBounds(L.geoJSON(p.geojson).getBounds(), { maxZoom: 15, padding: [25, 25] }); } catch {} | |
| } | |
| // Control del selector flotante de parcelas | |
| if ($("btn-farm-selector-toggle")) { | |
| $("btn-farm-selector-toggle").addEventListener("click", (e) => { | |
| e.stopPropagation(); | |
| $("farm-selector-dropdown").classList.toggle("hidden"); | |
| }); | |
| } | |
| document.addEventListener("click", (e) => { | |
| const dropdown = $("farm-selector-dropdown"); | |
| const toggle = $("btn-farm-selector-toggle"); | |
| if (dropdown && !dropdown.classList.contains("hidden") && !dropdown.contains(e.target) && e.target !== toggle && !toggle?.contains(e.target)) { | |
| dropdown.classList.add("hidden"); | |
| } | |
| }); | |
| let polygonDrawer = null; | |
| function enableDrawingMode() { | |
| // Mostrar panel de creación | |
| $("section2-form").classList.add("hidden"); | |
| $("section2-chat").classList.add("hidden"); | |
| $("section2-creator").classList.remove("hidden"); | |
| // Poner Paso A activo (Instrucciones) | |
| $("creator-step-drawing").classList.remove("hidden"); | |
| $("creator-step-details").classList.add("hidden"); | |
| $("creator-step-loading").classList.add("hidden"); | |
| // Activar el dibujador de polígonos de Leaflet | |
| if (polygonDrawer) { | |
| try { polygonDrawer.disable(); } catch(err){} | |
| } | |
| drawnItems.clearLayers(); | |
| drawnGeojson = null; | |
| polygonDrawer = new L.Draw.Polygon(map, { | |
| shapeOptions: { color: "#15803d", weight: 2, fillColor: "#15803d", fillOpacity: 0.15 } | |
| }); | |
| polygonDrawer.enable(); | |
| } | |
| function disableDrawingMode() { | |
| if (polygonDrawer) { | |
| try { polygonDrawer.disable(); } catch(err){} | |
| } | |
| $("map-draw-banner").classList.add("hidden"); | |
| drawnItems.clearLayers(); | |
| drawnGeojson = null; | |
| $("section2-creator").classList.add("hidden"); | |
| // Regresar a la vista correspondiente | |
| showSection2Chat(); | |
| } | |
| if ($("btn-floating-add-parcel")) { | |
| $("btn-floating-add-parcel").addEventListener("click", () => { | |
| $("farm-selector-dropdown").classList.add("hidden"); | |
| enableDrawingMode(); | |
| }); | |
| } | |
| if ($("btn-cancel-draw")) { | |
| $("btn-cancel-draw").addEventListener("click", () => { | |
| disableDrawingMode(); | |
| }); | |
| } | |
| if ($("btn-creator-cancel")) { | |
| $("btn-creator-cancel").addEventListener("click", () => { | |
| disableDrawingMode(); | |
| }); | |
| } | |
| if ($("btn-show-creator")) { | |
| $("btn-show-creator").addEventListener("click", () => { | |
| enableDrawingMode(); | |
| }); | |
| } | |
| if ($("btn-draw-undo")) { | |
| $("btn-draw-undo").addEventListener("click", (e) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| if (polygonDrawer && typeof polygonDrawer.deleteLastVertex === 'function') { | |
| polygonDrawer.deleteLastVertex(); | |
| } | |
| }); | |
| } | |
| if ($("creator-crop-select")) { | |
| $("creator-crop-select").addEventListener("change", () => { | |
| const crop = $("creator-crop-select").value; | |
| applyCreatorIndices(RECOMMENDED_INDICES_BY_CROP[crop] || ["ndvi"]); | |
| }); | |
| } | |
| if ($("btn-creator-select-recommended-indices")) { | |
| $("btn-creator-select-recommended-indices").addEventListener("click", () => { | |
| const crop = $("creator-crop-select").value; | |
| applyCreatorIndices(RECOMMENDED_INDICES_BY_CROP[crop] || ["ndvi"]); | |
| }); | |
| } | |
| if ($("btn-creator-select-all-indices")) { | |
| $("btn-creator-select-all-indices").addEventListener("click", () => { | |
| applyCreatorIndices(VALID_INDICES); | |
| }); | |
| } | |
| if ($("btn-creator-save")) { | |
| $("btn-creator-save").addEventListener("click", async () => { | |
| const name = $("creator-name-input").value.trim(); | |
| const crop = $("creator-crop-select").value; | |
| const selectedIndices = getCheckedIndices(".creator-index-checkbox"); | |
| if (!drawnGeojson) return notify("Falta el polígono", "Dibuja un polígono en el mapa."); | |
| if (!name) return notify("Falta el nombre", "Escribe un nombre."); | |
| if (!selectedIndices.length) { | |
| $("creator-indices-error")?.classList.remove("hidden"); | |
| return notify("Falta una variable satelital", "Marca al menos una variable satelital para calcular."); | |
| } | |
| $("creator-indices-error")?.classList.add("hidden"); | |
| // Mostrar pantalla de carga (Paso C) | |
| $("creator-step-details").classList.add("hidden"); | |
| $("creator-step-loading").classList.remove("hidden"); | |
| try { | |
| track("parcel_draw_save", { name, crop, indices: selectedIndices }); | |
| // 1. Crear la parcela en la base de datos | |
| const r = await api("/fields", { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| name, | |
| geojson: drawnGeojson, | |
| crop_variety: crop || null, | |
| selected_indices: selectedIndices | |
| }) | |
| }); | |
| if (r.ok) { | |
| const field = await r.json(); | |
| const newFieldId = field.id; | |
| // 2. Si seleccionó cultivo o variables, guardarlas vía PATCH | |
| if (crop || selectedIndices.length) { | |
| await api(`/fields/${newFieldId}`, { | |
| method: "PATCH", | |
| body: JSON.stringify({ crop_variety: crop || null, selected_indices: selectedIndices }) | |
| }); | |
| } | |
| track("parcel_create_wizard_success", { name, crop, indices: selectedIndices }); | |
| // 3. Simular procesamiento para esperar recálculo e iniciar notificaciones escalonadas | |
| setTimeout(async () => { | |
| // Limpiar cargando | |
| $("section2-creator").classList.add("hidden"); | |
| showSection2Chat(); | |
| // Notificaciones escalonadas (toasts en la esquina superior derecha) | |
| setTimeout(() => { | |
| notify("Meteorología Lista", `El clima histórico de Open-Meteo para ${name} está disponible.`, "success"); | |
| }, 100); | |
| setTimeout(() => { | |
| notify("Teledetección Lista", `Sentinel-2 calculará ${formatIndices(selectedIndices)} en ${name}.`, "success"); | |
| }, 800); | |
| setTimeout(() => { | |
| notify("Asistente Listo", `El agente RAG de AgroVisión ya tiene cargado el contexto completo de ${name}.`, "success"); | |
| }, 1500); | |
| drawnGeojson = null; | |
| drawnItems.clearLayers(); | |
| await refreshParcels(); | |
| setParcelIndices(newFieldId, selectedIndices); | |
| selectParcel(newFieldId); | |
| flyToParcel(newFieldId); | |
| }, 3000); | |
| } else { | |
| const e = await r.json().catch(() => ({})); | |
| notify("Error " + r.status, e.detail || ""); | |
| $("creator-step-loading").classList.add("hidden"); | |
| $("creator-step-details").classList.remove("hidden"); | |
| } | |
| } catch (e) { | |
| notify("Error de red", String(e)); | |
| $("creator-step-loading").classList.add("hidden"); | |
| $("creator-step-details").classList.remove("hidden"); | |
| } | |
| }); | |
| } | |
| if ($("floating-parcelas-list")) { | |
| $("floating-parcelas-list").addEventListener("click", (e) => { | |
| const item = e.target.closest(".floating-parcel-item"); | |
| if (!item) return; | |
| const pid = item.dataset.pid; | |
| const gear = e.target.closest(".btn-gear-click"); | |
| selectParcel(pid); | |
| flyToParcel(pid); | |
| if (gear) { | |
| // Mostrar formulario de Ajustes | |
| $("section2-form").classList.remove("hidden"); | |
| $("section2-chat").classList.add("hidden"); | |
| $("section2-creator").classList.add("hidden"); | |
| $("branding-icon").className = "fa-solid fa-robot text-base"; | |
| $("btn-branding-toggle").title = "Mostrar Chat con Asistente"; | |
| } | |
| $("farm-selector-dropdown").classList.add("hidden"); | |
| }); | |
| } | |
| // ===== Resumen KPIs y Gráfico NDVI ===== | |
| async function loadResumen() { | |
| renderFloatingParcels(); | |
| } | |
| // ===== Teledetección (GIS + Heatmap + Índices) ===== | |
| const INDEX_RANGES = { ndvi: [0, 1], evi: [0, 1], savi: [-0.4, 0.8], ndwi: [-0.6, 0.7], ndre: [0, 0.5] }; | |
| let currentIndex = "ndvi"; | |
| $("select-index").addEventListener("change", () => { | |
| currentIndex = $("select-index").value; | |
| loadTeledeteccion(); | |
| }); | |
| $("btn-add-satellite-var").addEventListener("click", async () => { | |
| const fid = $("select-parcela").value; | |
| if (!fid) return notify("Selecciona una parcela", "Elige una parcela antes de agregar variables satelitales."); | |
| const index = $("select-index").value; | |
| const currentIndices = getParcelIndices(fid); | |
| if (!currentIndices.includes(index)) { | |
| const nextIndices = normalizeIndices([...currentIndices, index]); | |
| try { | |
| const res = await api(`/fields/${fid}`, { | |
| method: "PATCH", | |
| body: JSON.stringify({ selected_indices: nextIndices }) | |
| }); | |
| if (!res.ok) { | |
| const error = await res.json().catch(() => ({})); | |
| return notify("No se pudo agregar la variable", error.detail || `Error ${res.status}`); | |
| } | |
| setParcelIndices(fid, nextIndices); | |
| syncSatelliteIndexControls(fid); | |
| track("satellite_index_added", { field_id: fid, index }); | |
| notify("Variable satelital habilitada", `${INDEX_LABELS[index] || index.toUpperCase()} se agregó a la parcela. Puedes calcularla ahora.`); | |
| } catch (error) { | |
| return notify("Error de red", String(error)); | |
| } | |
| } else { | |
| notify("Variable ya activa", `${INDEX_LABELS[index] || index.toUpperCase()} ya está activa en la parcela. Puedes reprocesarla.`); | |
| } | |
| showReprocessModal(index); | |
| }); | |
| async function loadTeledeteccion() { | |
| const fid = $("select-parcela").value; | |
| if (!fid) { $("satelite-empty").classList.remove("hidden"); return; } | |
| $("satelite-empty").classList.add("hidden"); | |
| const parcelIndices = getParcelIndices(fid); | |
| activeParcelIndices = parcelIndices; | |
| renderActiveIndexBadges(parcelIndices); | |
| updateIndexSelectOptions(parcelIndices); | |
| const rI = await api("/vegetation/" + currentIndex, { method: "POST", body: JSON.stringify({ field_id: fid }) }); | |
| const series = rI.ok ? (await rI.json()).series : []; | |
| if (!series.length) { $("satelite-empty").classList.remove("hidden"); return; } | |
| const label = INDEX_LABELS[currentIndex] || currentIndex.toUpperCase(); | |
| const range = INDEX_RANGES[currentIndex] || [0, 1]; | |
| chartSatelite?.destroy(); | |
| chartSatelite = new Chart($("chart-satelite"), { | |
| type: "line", | |
| data: { | |
| labels: series.map((p) => p.date), | |
| datasets: [ | |
| { label: label, data: series.map((p) => p.mean_value), borderColor: "#15803d", tension: 0.3, fill: false } | |
| ], | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, scales: { y: { min: range[0], max: range[1], title: { display: true, text: label } } } }, | |
| }); | |
| track("chart_view", { chart: "teledeteccion", index: currentIndex, points: series.length }); | |
| } | |
| $("btn-heatmap").addEventListener("click", async () => { | |
| const fid = $("select-parcela").value; | |
| if (!fid) return notify("Selecciona una parcela", ""); | |
| const idx = currentIndex; | |
| track("heatmap", { field_id: fid, index: idx }); | |
| $("heatmap-box").innerHTML = '<span class="text-xs text-stone-500">Generando…</span>'; | |
| try { | |
| const r = await api("/vegetation/" + idx + "/raster", { method: "POST", body: JSON.stringify({ field_id: fid }) }); | |
| if (r.ok) { const url = URL.createObjectURL(await r.blob()); $("heatmap-box").innerHTML = `<img src="${url}" class="max-w-full rounded shadow" />`; } | |
| else { $("heatmap-box").innerHTML = '<span class="text-xs text-red-500">No se pudo generar. Verifica Copernicus.</span>'; } | |
| } catch (e) { $("heatmap-box").innerHTML = '<span class="text-xs text-red-500">Error de red.</span>'; } | |
| }); | |
| // ===== Meteorología (Weather) ===== | |
| let currentGranularity = 'horario'; | |
| let currentWeatherVariable = 'temperatures'; | |
| let currentBottomChartFilter = 'water_balance'; | |
| let weatherRawData = []; | |
| let weatherCampaignStart = ""; | |
| let activeFieldId = ""; | |
| let chartWaterBalance = null; // Store bottom chart instance globally in this block | |
| // Helper to calculate Dew Point (Punto de Rocío) using Magnus-Tetens formula: | |
| // Td = (b * alpha(T,RH)) / (a - alpha(T,RH)) where alpha(T,RH) = (a*T)/(b+T) + ln(RH/100) | |
| // Standard values: a = 17.27, b = 237.7 | |
| function calculateDewPoint(temp, rh) { | |
| if (temp === null || temp === undefined || rh === null || rh === undefined || rh <= 0) return temp; | |
| const a = 17.27; | |
| const b = 237.7; | |
| const alpha = ((a * temp) / (b + temp)) + Math.log(rh / 100); | |
| const dewPoint = (b * alpha) / (a - alpha); | |
| return parseFloat(dewPoint.toFixed(1)); | |
| } | |
| // Helper for VPD (Déficit de Presión de Vapor) in kPa: | |
| // Es = 0.6108 * exp((17.27 * T) / (T + 237.3)) | |
| // Ea = Es * (RH / 100) | |
| // VPD = Es - Ea | |
| function calculateVPD(temp, rh) { | |
| if (temp === null || temp === undefined || rh === null || rh === undefined) return 0; | |
| const Es = 0.6108 * Math.exp((17.27 * temp) / (temp + 237.3)); | |
| const Ea = Es * (rh / 100); | |
| return parseFloat(Math.max(0, Es - Ea).toFixed(2)); | |
| } | |
| // Agronomic stressors definitions & note strings | |
| const weatherNotesData = { | |
| gdd: { | |
| title: "Grados Día Acumulados (GDD)", | |
| icon: "fa-fire-flame-simple text-orange-600", | |
| bg: "bg-orange-50 border-orange-100 text-orange-950", | |
| text: "Los Grados Día acumulados miden el calor total que la planta ha absorbido por encima de una temperatura base (10°C). Es un indicador clave para predecir las fases de brotación, floración y maduración del cultivo." | |
| }, | |
| chill_hours: { | |
| title: "Horas Frío (HF)", | |
| icon: "fa-snowflake text-blue-600", | |
| bg: "bg-blue-50 border-blue-100 text-blue-950", | |
| text: "Mide las horas acumuladas con temperaturas inferiores a 7.2°C. Es fundamental para variedades caducifolias o de bajo requerimiento frío para romper el letargo invernal de forma uniforme." | |
| }, | |
| thermal_stress: { | |
| title: "Horas de Estrés Térmico", | |
| icon: "fa-triangle-exclamation text-red-650", | |
| bg: "bg-red-50 border-red-100 text-red-950", | |
| text: "Registra las horas acumuladas con temperaturas superiores a 32°C. Provoca un aumento drástico en la tasa de respiración de la planta, deshidratación foliar y posible aborto de flores o frutos tiernos." | |
| }, | |
| dpv_stress: { | |
| title: "Horas de Estrés por DPV", | |
| icon: "fa-wind text-amber-600", | |
| bg: "bg-amber-50 border-amber-100 text-amber-950", | |
| text: "Suma de horas con Déficit de Presión de Vapor superior a 2.0 kPa. Bajo un aire muy seco, las plantas cierran estomas para retener agua, lo que detiene la fotosíntesis y ralentiza el crecimiento." | |
| }, | |
| frost_hours: { | |
| title: "Horas Heladas", | |
| icon: "fa-temperature-arrow-down text-indigo-700", | |
| bg: "bg-indigo-50 border-indigo-100 text-indigo-950", | |
| text: "Horas acumuladas por debajo de 0°C. Representa un riesgo inminente de congelación celular y necrosis de brotes nuevos, flores expuestas y frutos en desarrollo." | |
| }, | |
| et0_accum: { | |
| title: "Evapotranspiración (ET0) Acumulada", | |
| icon: "fa-droplet-slash text-emerald-600", | |
| bg: "bg-emerald-50 border-emerald-100 text-emerald-950", | |
| text: "La ET0 acumulada estima la demanda hídrica teórica del suelo y vegetación (FAO-56 Penman-Monteith). Es la referencia base para planificar los tiempos y volúmenes de riego semanales." | |
| }, | |
| balance: { | |
| title: "Estimación de Balance Hídrico", | |
| icon: "fa-wand-magic-sparkles text-emerald-600", | |
| bg: "bg-emerald-50 border-emerald-100 text-emerald-950", | |
| text: "Muestra la diferencia acumulada entre precipitaciones y evapotranspiración. Un balance negativo indica déficit hídrico neto que debe compensarse mediante riego programado." | |
| } | |
| }; | |
| function updateAgronomicNote(type) { | |
| const note = weatherNotesData[type] || weatherNotesData.balance; | |
| const box = $("agronomic-note-box"); | |
| const icon = $("agronomic-note-icon"); | |
| const title = $("agronomic-note-title"); | |
| const text = $("agronomic-note-text"); | |
| if (box && icon && title && text) { | |
| box.className = `${note.bg} border rounded-xl p-3 text-[10px] leading-relaxed flex gap-2 cursor-pointer transition-all duration-300 hover:shadow-sm`; | |
| icon.className = `fa-solid ${note.icon} text-xs shrink-0 mt-0.5`; | |
| title.textContent = note.title; | |
| text.textContent = note.text; | |
| } | |
| } | |
| function setupWeatherEventListeners() { | |
| // Toggle buttons for granularity | |
| const btnHorario = $("btn-gran-horario"); | |
| const btnDiario = $("btn-gran-diario"); | |
| const btnSemanal = $("btn-gran-semanal"); | |
| const updateGranularityUI = (selected) => { | |
| currentGranularity = selected; | |
| [btnHorario, btnDiario, btnSemanal].forEach(btn => { | |
| if (btn) { | |
| const isSelected = btn.id === `btn-gran-${selected}`; | |
| btn.className = isSelected | |
| ? "flex-1 text-center py-2 bg-white text-emerald-800 font-extrabold rounded-lg text-xs shadow-sm transition-all" | |
| : "flex-1 text-center py-2 text-stone-500 hover:text-stone-850 font-bold rounded-lg text-xs transition-all"; | |
| } | |
| }); | |
| const dateFilter = $("filter-date-container"); | |
| const campInfo = $("campaign-info-container"); | |
| if (selected === 'horario') { | |
| dateFilter?.classList.remove('hidden'); | |
| campInfo?.classList.add('hidden'); | |
| } else { | |
| dateFilter?.classList.add('hidden'); | |
| campInfo?.classList.remove('hidden'); | |
| } | |
| renderDynamicKPIs(); | |
| drawTopWeatherChart(); | |
| }; | |
| if (btnHorario) btnHorario.addEventListener("click", () => updateGranularityUI("horario")); | |
| if (btnDiario) btnDiario.addEventListener("click", () => updateGranularityUI("diario")); | |
| if (btnSemanal) btnSemanal.addEventListener("click", () => updateGranularityUI("semanal")); | |
| // Historical Date Picker | |
| const datePicker = $("historical-date-picker"); | |
| if (datePicker) { | |
| datePicker.addEventListener("change", () => { | |
| if (currentGranularity === "horario") { | |
| renderDynamicKPIs(); | |
| drawTopWeatherChart(); | |
| } | |
| }); | |
| } | |
| // Top chart variable selector | |
| const varSelect = $("weather-variable-select"); | |
| if (varSelect) { | |
| varSelect.addEventListener("change", (e) => { | |
| currentWeatherVariable = e.target.value; | |
| drawTopWeatherChart(); | |
| }); | |
| } | |
| // Bottom chart selector | |
| const bottomSelect = $("bottom-chart-filter-select"); | |
| if (bottomSelect) { | |
| bottomSelect.addEventListener("change", (e) => { | |
| currentBottomChartFilter = e.target.value; | |
| drawBottomWeatherChart(); | |
| }); | |
| } | |
| // Setup Agronomic Stress Cards Clicks | |
| const bindCardClick = (id, type) => { | |
| const card = $(id); | |
| if (card) { | |
| card.addEventListener("click", () => updateAgronomicNote(type)); | |
| } | |
| }; | |
| bindCardClick("btn-indicator-gdd", "gdd"); | |
| bindCardClick("btn-indicator-chill", "chill_hours"); | |
| bindCardClick("btn-indicator-thermal", "thermal_stress"); | |
| bindCardClick("btn-indicator-dpv", "dpv_stress"); | |
| bindCardClick("btn-indicator-frost", "frost_hours"); | |
| bindCardClick("btn-indicator-et0", "et0_accum"); | |
| const noteBox = $("agronomic-note-box"); | |
| if (noteBox) { | |
| noteBox.addEventListener("click", () => updateAgronomicNote("balance")); | |
| } | |
| } | |
| // Group records helpers | |
| function getAggregatedData() { | |
| if (!weatherRawData || !weatherRawData.length) return { labels: [], datasets: [] }; | |
| if (currentGranularity === 'horario') { | |
| // Filter records by historical-date-picker value (YYYY-MM-DD) | |
| const datePicker = $("historical-date-picker"); | |
| let selectedDateStr = datePicker ? datePicker.value : ""; | |
| if (!selectedDateStr) { | |
| // Default to latest date in raw data | |
| const dates = weatherRawData.map(r => r.date.split("T")[0]); | |
| selectedDateStr = dates.reduce((max, d) => d > max ? d : max, dates[0]); | |
| if (datePicker) datePicker.value = selectedDateStr; | |
| } | |
| const filtered = weatherRawData.filter(r => { | |
| if (!r.date) return false; | |
| const d = new Date(r.date); | |
| const y = d.getFullYear(); | |
| const m = String(d.getMonth() + 1).padStart(2, "0"); | |
| const dateStr = String(d.getDate()).padStart(2, "0"); | |
| return `${y}-${m}-${dateStr}` === selectedDateStr; | |
| }); | |
| // Produce 24 points (hours 0-23) | |
| const hoursData = Array.from({ length: 24 }, (_, hour) => { | |
| const match = filtered.find(r => { | |
| if (!r.date) return false; | |
| return new Date(r.date).getHours() === hour; | |
| }); | |
| return match || { | |
| temp_c: 0, | |
| relative_humidity_percentage: 0, | |
| soil_temperature_0_to_7cm_c: 0, | |
| soil_moisture_0_to_7cm_m3_m3: 0, | |
| precip_mm: 0, | |
| solar_radiation_w_m2: 0, | |
| wind_speed_10m_km_h: 0, | |
| et0_fao_evapotranspiration: 0 | |
| }; | |
| }); | |
| const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`); | |
| return { labels, rawRecords: hoursData, mode: 'horario' }; | |
| } else if (currentGranularity === 'diario') { | |
| // Group by day YYYY-MM-DD | |
| const dailyMap = new Map(); | |
| weatherRawData.forEach(r => { | |
| const day = r.date.split("T")[0]; | |
| if (!dailyMap.has(day)) dailyMap.set(day, []); | |
| dailyMap.get(day).push(r); | |
| }); | |
| const sortedDays = Array.from(dailyMap.keys()).sort(); | |
| const dailyRecords = sortedDays.map(day => { | |
| const records = dailyMap.get(day); | |
| const temps = records.map(r => r.temp_c).filter(v => v !== null && v !== undefined); | |
| const rhs = records.map(r => r.relative_humidity_percentage).filter(v => v !== null && v !== undefined); | |
| const winds = records.map(r => r.wind_speed_10m_km_h).filter(v => v !== null && v !== undefined); | |
| const rads = records.map(r => r.solar_radiation_w_m2).filter(v => v !== null && v !== undefined); | |
| const soils = records.map(r => r.soil_moisture_0_to_7cm_m3_m3).filter(v => v !== null && v !== undefined); | |
| const maxTemp = temps.length ? Math.max(...temps) : 0; | |
| const minTemp = temps.length ? Math.min(...temps) : 0; | |
| const meanTemp = temps.length ? (temps.reduce((s, v) => s + v, 0) / temps.length) : 0; | |
| const maxRH = rhs.length ? Math.max(...rhs) : 0; | |
| const minRH = rhs.length ? Math.min(...rhs) : 0; | |
| const meanRH = rhs.length ? (rhs.reduce((s, v) => s + v, 0) / rhs.length) : 0; | |
| const precip = records.reduce((s, r) => s + (r.precip_mm || 0), 0); | |
| const maxRad = rads.length ? Math.max(...rads) : 0; | |
| const maxWind = winds.length ? Math.max(...winds) : 0; | |
| const minWind = winds.length ? Math.min(...winds) : 0; | |
| const meanWind = winds.length ? (winds.reduce((s, v) => s + v, 0) / winds.length) : 0; | |
| const meanSoil = soils.length ? (soils.reduce((s, v) => s + v, 0) / soils.length) : 0; | |
| // VPD stress calculation inside daily aggregator | |
| const vpds = records.map(r => calculateVPD(r.temp_c, r.relative_humidity_percentage)); | |
| const meanVPD = vpds.length ? (vpds.reduce((s, v) => s + v, 0) / vpds.length) : 0; | |
| return { | |
| day, | |
| maxTemp, | |
| minTemp, | |
| meanTemp, | |
| maxRH, | |
| minRH, | |
| meanRH, | |
| precip, | |
| maxRad, | |
| maxWind, | |
| minWind, | |
| meanWind, | |
| meanSoil, | |
| meanVPD | |
| }; | |
| }); | |
| return { labels: sortedDays, records: dailyRecords, mode: 'diario' }; | |
| } else { | |
| // Semanal: Group raw records by 7-day calendar windows starting from the campaign start date | |
| const campaignStartMs = new Date(weatherCampaignStart).getTime(); | |
| const weeklyMap = new Map(); | |
| weatherRawData.forEach(r => { | |
| const recordMs = new Date(r.date).getTime(); | |
| const diffDays = Math.floor((recordMs - campaignStartMs) / (1000 * 60 * 60 * 24)); | |
| const weekIndex = Math.max(0, Math.floor(diffDays / 7)) + 1; | |
| if (!weeklyMap.has(weekIndex)) weeklyMap.set(weekIndex, []); | |
| weeklyMap.get(weekIndex).push(r); | |
| }); | |
| const sortedWeeks = Array.from(weeklyMap.keys()).sort((a, b) => a - b); | |
| const weeklyRecords = sortedWeeks.map(wIdx => { | |
| const records = weeklyMap.get(wIdx); | |
| const temps = records.map(r => r.temp_c).filter(v => v !== null && v !== undefined); | |
| const rhs = records.map(r => r.relative_humidity_percentage).filter(v => v !== null && v !== undefined); | |
| const winds = records.map(r => r.wind_speed_10m_km_h).filter(v => v !== null && v !== undefined); | |
| const rads = records.map(r => r.solar_radiation_w_m2).filter(v => v !== null && v !== undefined); | |
| const soils = records.map(r => r.soil_moisture_0_to_7cm_m3_m3).filter(v => v !== null && v !== undefined); | |
| const maxTemp = temps.length ? Math.max(...temps) : 0; | |
| const minTemp = temps.length ? Math.min(...temps) : 0; | |
| const meanTemp = temps.length ? (temps.reduce((s, v) => s + v, 0) / temps.length) : 0; | |
| const maxRH = rhs.length ? Math.max(...rhs) : 0; | |
| const minRH = rhs.length ? Math.min(...rhs) : 0; | |
| const precip = records.reduce((s, r) => s + (r.precip_mm || 0), 0); | |
| const maxRad = rads.length ? Math.max(...rads) : 0; | |
| const maxWind = winds.length ? Math.max(...winds) : 0; | |
| const minWind = winds.length ? Math.min(...winds) : 0; | |
| const meanSoil = soils.length ? (soils.reduce((s, v) => s + v, 0) / soils.length) : 0; | |
| const vpds = records.map(r => calculateVPD(r.temp_c, r.relative_humidity_percentage)); | |
| const meanVPD = vpds.length ? (vpds.reduce((s, v) => s + v, 0) / vpds.length) : 0; | |
| return { | |
| weekIndex, | |
| maxTemp, | |
| minTemp, | |
| meanTemp, | |
| maxRH, | |
| minRH, | |
| precip, | |
| maxRad, | |
| maxWind, | |
| minWind, | |
| meanSoil, | |
| meanVPD | |
| }; | |
| }); | |
| return { labels: sortedWeeks.map(w => `Semana ${w}`), records: weeklyRecords, mode: 'semanal' }; | |
| } | |
| } | |
| function renderDynamicKPIs() { | |
| const data = getAggregatedData(); | |
| const container = $("kpis-container"); | |
| if (!container) return; | |
| let kpis = []; | |
| if (data.mode === 'horario') { | |
| // Find latest record or active record matching picker | |
| const list = data.rawRecords; | |
| // Calculate values for "Current hour" (we take the last record from the subset, which would correspond to 23:00 or closest) | |
| // To make it dynamic, let's grab the last record in this filtered day that is non-zero, or just the last record. | |
| const currentRec = list[list.length - 1] || {}; | |
| kpis = [ | |
| { label: 'Temperatura actual', value: `${(currentRec.temp_c || 0).toFixed(1)} °C`, icon: 'fa-temperature-half', color: 'orange' }, | |
| { label: 'Humedad Suelo', value: `${((currentRec.soil_moisture_0_to_7cm_m3_m3 || 0) * 100).toFixed(1)} %`, icon: 'fa-droplet', color: 'blue' }, | |
| { label: 'Viento actual', value: `${(currentRec.wind_speed_10m_km_h || 0).toFixed(1)} km/h`, icon: 'fa-wind', color: 'cyan' }, | |
| { label: 'Radiación Solar', value: `${(currentRec.solar_radiation_w_m2 || 0).toFixed(0)} W/m²`, icon: 'fa-sun', color: 'yellow' }, | |
| { label: 'Precipitación', value: `${(currentRec.precip_mm || 0).toFixed(1)} mm`, icon: 'fa-cloud-rain', color: 'indigo' }, | |
| { label: 'DPV actual', value: `${calculateVPD(currentRec.temp_c, currentRec.relative_humidity_percentage).toFixed(2)} kPa`, icon: 'fa-droplet-slash', color: 'teal' } | |
| ]; | |
| } else if (data.mode === 'diario') { | |
| const list = data.records; | |
| // Compute average/max stats over the entire list of daily records | |
| const maxTemps = list.map(r => r.maxTemp); | |
| const minTemps = list.map(r => r.minTemp); | |
| const maxTemp = maxTemps.length ? Math.max(...maxTemps) : 0; | |
| const minTemp = minTemps.length ? Math.min(...minTemps) : 0; | |
| const maxRHs = list.map(r => r.maxRH); | |
| const minRHs = list.map(r => r.minRH); | |
| const maxRH = maxRHs.length ? Math.max(...maxRHs) : 0; | |
| const minRH = minRHs.length ? Math.min(...minRHs) : 0; | |
| const maxRads = list.map(r => r.maxRad); | |
| const maxRad = maxRads.length ? Math.max(...maxRads) : 0; | |
| const totalPrecip = list.reduce((s, r) => s + r.precip, 0); | |
| const maxWinds = list.map(r => r.maxWind); | |
| const minWinds = list.map(r => r.minWind); | |
| const maxWind = maxWinds.length ? Math.max(...maxWinds) : 0; | |
| const minWind = minWinds.length ? Math.min(...minWinds) : 0; | |
| const meanVPDs = list.map(r => r.meanVPD); | |
| const avgVPD = meanVPDs.length ? (meanVPDs.reduce((s, v) => s + v, 0) / meanVPDs.length) : 0; | |
| kpis = [ | |
| { label: 'Temp Máx / Mín', value: `${maxTemp.toFixed(1)}°C / ${minTemp.toFixed(1)}°C`, icon: 'fa-temperature-half', color: 'orange' }, | |
| { label: 'HR Máx / Mín', value: `${maxRH.toFixed(0)}% / ${minRH.toFixed(0)}%`, icon: 'fa-droplet', color: 'blue' }, | |
| { label: 'Radiación Máx', value: `${maxRad.toFixed(0)} W/m²`, icon: 'fa-sun', color: 'yellow' }, | |
| { label: 'Precipitación Acum.', value: `${totalPrecip.toFixed(1)} mm`, icon: 'fa-cloud-showers-water', color: 'indigo' }, | |
| { label: 'Viento Máx / Mín', value: `${maxWind.toFixed(1)} / ${minWind.toFixed(1)} km/h`, icon: 'fa-wind', color: 'cyan' }, | |
| { label: 'DPV Promedio', value: `${avgVPD.toFixed(2)} kPa`, icon: 'fa-droplet-slash', color: 'teal' } | |
| ]; | |
| } else { | |
| // Semanal | |
| const list = data.records; | |
| const maxTemps = list.map(r => r.maxTemp); | |
| const minTemps = list.map(r => r.minTemp); | |
| const maxTempProm = maxTemps.length ? (maxTemps.reduce((s, v) => s + v, 0) / maxTemps.length) : 0; | |
| const minTempProm = minTemps.length ? (minTemps.reduce((s, v) => s + v, 0) / minTemps.length) : 0; | |
| const maxRHs = list.map(r => r.maxRH); | |
| const minRHs = list.map(r => r.minRH); | |
| const maxRHProm = maxRHs.length ? (maxRHs.reduce((s, v) => s + v, 0) / maxRHs.length) : 0; | |
| const minRHProm = minRHs.length ? (minRHs.reduce((s, v) => s + v, 0) / minRHs.length) : 0; | |
| const maxRads = list.map(r => r.maxRad); | |
| const maxRadHist = maxRads.length ? Math.max(...maxRads) : 0; | |
| const totalPrecip = list.reduce((s, r) => s + r.precip, 0); | |
| const maxWinds = list.map(r => r.maxWind); | |
| const minWinds = list.map(r => r.minWind); | |
| const maxWindProm = maxWinds.length ? (maxWinds.reduce((s, v) => s + v, 0) / maxWinds.length) : 0; | |
| const minWindProm = minWinds.length ? (minWinds.reduce((s, v) => s + v, 0) / minWinds.length) : 0; | |
| const meanVPDs = list.map(r => r.meanVPD); | |
| const avgVPD = meanVPDs.length ? (meanVPDs.reduce((s, v) => s + v, 0) / meanVPDs.length) : 0; | |
| kpis = [ | |
| { label: 'Temp Máx/Mín Prom.', value: `${maxTempProm.toFixed(1)}°C / ${minTempProm.toFixed(1)}°C`, icon: 'fa-temperature-half', color: 'orange' }, | |
| { label: 'HR Máx/Mín Prom.', value: `${maxRHProm.toFixed(0)}% / ${minRHProm.toFixed(0)}%`, icon: 'fa-droplet', color: 'blue' }, | |
| { label: 'Radiación Máx Hist.', value: `${maxRadHist.toFixed(0)} W/m²`, icon: 'fa-sun', color: 'yellow' }, | |
| { label: 'Precipitación Acum.', value: `${totalPrecip.toFixed(1)} mm`, icon: 'fa-cloud-showers-water', color: 'indigo' }, | |
| { label: 'Viento Prom. Máx/Mín', value: `${maxWindProm.toFixed(1)} / ${minWindProm.toFixed(1)} km/h`, icon: 'fa-wind', color: 'cyan' }, | |
| { label: 'DPV Promedio Sem.', value: `${avgVPD.toFixed(2)} kPa`, icon: 'fa-droplet-slash', color: 'teal' } | |
| ]; | |
| } | |
| container.innerHTML = ''; | |
| kpis.forEach(kpi => { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white p-4 rounded-xl border border-stone-200/80 shadow-sm flex items-center justify-between'; | |
| let iconBg = ''; | |
| let iconColor = ''; | |
| if (kpi.color === 'orange') { iconBg = 'bg-orange-50'; iconColor = 'text-orange-600'; } | |
| else if (kpi.color === 'blue') { iconBg = 'bg-blue-50'; iconColor = 'text-blue-600'; } | |
| else if (kpi.color === 'cyan') { iconBg = 'bg-cyan-50'; iconColor = 'text-cyan-600'; } | |
| else if (kpi.color === 'yellow') { iconBg = 'bg-yellow-50'; iconColor = 'text-yellow-600'; } | |
| else if (kpi.color === 'indigo') { iconBg = 'bg-indigo-50'; iconColor = 'text-indigo-600'; } | |
| else { iconBg = 'bg-teal-50'; iconColor = 'text-teal-600'; } | |
| card.innerHTML = ` | |
| <div> | |
| <span class="text-[9px] font-bold text-stone-400 uppercase tracking-wide block">${kpi.label}</span> | |
| <h4 class="text-sm font-extrabold text-stone-800 mt-1">${kpi.value}</h4> | |
| </div> | |
| <div class="w-8 h-8 rounded-lg ${iconBg} ${iconColor} flex items-center justify-center text-sm shrink-0"> | |
| <i class="fa-solid ${kpi.icon}"></i> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| } | |
| function drawTopWeatherChart() { | |
| const ctx = $("main-weather-chart")?.getContext('2d'); | |
| if (!ctx) return; | |
| chartWeather?.destroy(); | |
| const data = getAggregatedData(); | |
| let labels = data.labels; | |
| let datasets = []; | |
| let scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', grid: { color: '#f3f4f6' } } | |
| }; | |
| if (data.mode === 'horario') { | |
| const recs = data.rawRecords; | |
| if (currentWeatherVariable === 'temperatures') { | |
| datasets = [ | |
| { label: 'Temperatura (°C)', data: recs.map(r => r.temp_c), borderColor: '#ea580c', tension: 0.3, borderWidth: 2 }, | |
| { label: 'Punto de Rocío (°C)', data: recs.map(r => calculateDewPoint(r.temp_c, r.relative_humidity_percentage)), borderColor: '#3b82f6', borderDash: [4, 4], tension: 0.3, borderWidth: 1.5 } | |
| ]; | |
| } else if (currentWeatherVariable === 'humidity') { | |
| datasets = [ | |
| { label: 'Humedad Relativa (%)', data: recs.map(r => r.relative_humidity_percentage), borderColor: '#06b6d4', tension: 0.3, borderWidth: 2 }, | |
| { label: 'Humedad del Suelo (0-7cm %)', data: recs.map(r => (r.soil_moisture_0_to_7cm_m3_m3 || 0) * 100), borderColor: '#2563eb', tension: 0.3, borderWidth: 2 } | |
| ]; | |
| } else if (currentWeatherVariable === 'water') { | |
| datasets = [ | |
| { label: 'Precipitación Horaria (mm)', type: 'bar', data: recs.map(r => r.precip_mm), backgroundColor: '#3b82f6', yAxisID: 'y' }, | |
| { label: 'Déficit de Presión de Vapor DPV (kPa)', data: recs.map(r => calculateVPD(r.temp_c, r.relative_humidity_percentage)), borderColor: '#0d9488', tension: 0.3, borderWidth: 2, yAxisID: 'y1' } | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación (mm)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'DPV (kPa)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } else { | |
| datasets = [ | |
| { label: 'Radiación Solar Directa (W/m²)', data: recs.map(r => r.solar_radiation_w_m2), borderColor: '#eab308', tension: 0.3, borderWidth: 2, yAxisID: 'y' }, | |
| { label: 'Velocidad de Viento Promedio (km/h)', data: recs.map(r => r.wind_speed_10m_km_h), borderColor: '#06b6d4', tension: 0.3, borderWidth: 1.5, yAxisID: 'y1' } | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Radiación Directa (W/m²)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Viento Promedio (km/h)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } | |
| } else if (data.mode === 'diario') { | |
| const recs = data.records; | |
| if (currentWeatherVariable === 'temperatures') { | |
| datasets = [ | |
| { label: 'Temp Máxima Diario (°C)', data: recs.map(r => r.maxTemp), borderColor: '#dc2626', tension: 0.3, borderWidth: 2 }, | |
| { label: 'Temp Mínima Diario (°C)', data: recs.map(r => r.minTemp), borderColor: '#2563eb', tension: 0.3, borderWidth: 1.5 } | |
| ]; | |
| } else if (currentWeatherVariable === 'humidity') { | |
| datasets = [ | |
| { label: 'HR Máxima Diario (%)', data: recs.map(r => r.maxRH), borderColor: '#0d9488', tension: 0.3 }, | |
| { label: 'HR Mínima Diario (%)', data: recs.map(r => r.minRH), borderColor: '#06b6d4', tension: 0.3, borderDash: [3, 3] }, | |
| { label: 'Humedad Suelo Media (%)', data: recs.map(r => (r.meanSoil || 0) * 100), borderColor: '#2563eb', tension: 0.3 } | |
| ]; | |
| } else if (currentWeatherVariable === 'water') { | |
| datasets = [ | |
| { label: 'Precipitación Acumulada Diario (mm)', type: 'bar', data: recs.map(r => r.precip), backgroundColor: '#3b82f6', yAxisID: 'y' }, | |
| { label: 'DPV Promedio Diario (kPa)', data: recs.map(r => r.meanVPD), borderColor: '#0ea5e9', tension: 0.3, yAxisID: 'y1' } | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación (mm)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'DPV (kPa)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } else { | |
| datasets = [ | |
| { label: 'Radiación Máxima Diaria (W/m²)', data: recs.map(r => r.maxRad), borderColor: '#eab308', tension: 0.3, yAxisID: 'y' }, | |
| { label: 'Viento Promedio Diario (km/h)', data: recs.map(r => /** @type {any} */ (r).meanWind), borderColor: '#06b6d4', tension: 0.3, yAxisID: 'y1' } | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Radiación Directa (W/m²)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Viento Promedio (km/h)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } | |
| } else { | |
| // Semanal | |
| const recs = data.records; | |
| if (currentWeatherVariable === 'temperatures') { | |
| datasets = [ | |
| { label: 'Temp Máxima Promedio Semanal (°C)', data: recs.map(r => r.maxTemp), borderColor: '#dc2626', tension: 0.3, borderWidth: 2 }, | |
| { label: 'Temp Mínima Promedio Semanal (°C)', data: recs.map(r => r.minTemp), borderColor: '#2563eb', tension: 0.3, borderWidth: 1.5 } | |
| ]; | |
| } else if (currentWeatherVariable === 'humidity') { | |
| datasets = [ | |
| { label: 'HR Máxima Promedio Semanal (%)', data: recs.map(r => r.maxRH), borderColor: '#0d9488', tension: 0.3 }, | |
| { label: 'HR Mínima Promedio Semanal (%)', data: recs.map(r => r.minRH), borderColor: '#06b6d4', tension: 0.3, borderDash: [3, 3] }, | |
| { label: 'Humedad Suelo Semanal (%)', data: recs.map(r => (r.meanSoil || 0) * 100), borderColor: '#2563eb', tension: 0.3 } | |
| ]; | |
| } else if (currentWeatherVariable === 'water') { | |
| datasets = [ | |
| { label: 'Precipitación Total Semanal (mm)', type: 'bar', data: recs.map(r => r.precip), backgroundColor: '#3b82f6', yAxisID: 'y' }, | |
| { label: 'DPV Promedio Semanal (kPa)', data: recs.map(r => r.meanVPD), borderColor: '#0ea5e9', tension: 0.3, yAxisID: 'y1' } | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación (mm)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'DPV (kPa)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } else { | |
| datasets = [ | |
| { label: 'Radiación Máxima Semanal (W/m²)', data: recs.map(r => r.maxRad), borderColor: '#eab308', tension: 0.3, yAxisID: 'y' }, | |
| { label: 'Viento Promedio Semanal (km/h)', data: recs.map(r => r.minWind), borderColor: '#06b6d4', tension: 0.3, yAxisID: 'y1' } // using minWind as a filler or let's use a mean of winds | |
| ]; | |
| scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Radiación Directa (W/m²)', font: { size: 9, family: 'Plus Jakarta Sans' } } }, | |
| y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Viento Promedio (km/h)', font: { size: 9, family: 'Plus Jakarta Sans' } }, grid: { drawOnChartArea: false } } | |
| }; | |
| } | |
| } | |
| chartWeather = new Chart(ctx, { | |
| type: 'line', | |
| data: { labels, datasets }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { boxWidth: 12, font: { size: 10, family: 'Plus Jakarta Sans' } } | |
| } | |
| }, | |
| scales: scalesConfig | |
| } | |
| }); | |
| } | |
| function drawBottomWeatherChart() { | |
| const ctx = $("water-balance-chart")?.getContext('2d'); | |
| const titleEl = $("bottom-chart-title"); | |
| const subtitleEl = $("bottom-chart-subtitle"); | |
| if (!ctx) return; | |
| chartWaterBalance?.destroy(); | |
| // Calculations are strictly weekly, starting from the campaign start date | |
| const campaignStartMs = new Date(weatherCampaignStart).getTime(); | |
| const weeklyMap = new Map(); | |
| weatherRawData.forEach(r => { | |
| const recordMs = new Date(r.date).getTime(); | |
| const diffDays = Math.floor((recordMs - campaignStartMs) / (1000 * 60 * 60 * 24)); | |
| const weekIndex = Math.max(0, Math.floor(diffDays / 7)) + 1; | |
| if (!weeklyMap.has(weekIndex)) weeklyMap.set(weekIndex, []); | |
| weeklyMap.get(weekIndex).push(r); | |
| }); | |
| const sortedWeeks = Array.from(weeklyMap.keys()).sort((a, b) => a - b); | |
| const labelsSemanas = sortedWeeks.map(w => `Sem <sup></sup>${w}`); | |
| let datasets = []; | |
| let yTitleLeft = ''; | |
| let yTitleRight = ''; | |
| let showY1 = true; | |
| if (currentBottomChartFilter === 'water_balance') { | |
| if (titleEl) titleEl.innerHTML = '<i class="fa-solid fa-droplet text-blue-600"></i> Balance Hídrico Acumulado Semanal'; | |
| if (subtitleEl) subtitleEl.textContent = "Diferencia entre Precipitación (ingreso) y Evapotranspiración ET0 (pérdida)."; | |
| yTitleLeft = 'Semanal (mm)'; | |
| yTitleRight = 'Acumulado (mm)'; | |
| const et0s = []; | |
| const precips = []; | |
| const deficits = []; | |
| let accDeficit = 0; | |
| sortedWeeks.forEach(w => { | |
| const list = weeklyMap.get(w); | |
| const wET0 = list.reduce((s, r) => s + (r.et0_fao_evapotranspiration || 0), 0); | |
| const wPrecip = list.reduce((s, r) => s + (r.precip_mm || 0), 0); | |
| et0s.push(parseFloat(wET0.toFixed(1))); | |
| precips.push(parseFloat(wPrecip.toFixed(1))); | |
| const diff = wPrecip - wET0; | |
| accDeficit += diff; | |
| deficits.push(parseFloat(accDeficit.toFixed(1))); | |
| }); | |
| datasets = [ | |
| { | |
| type: 'line', | |
| label: 'Evapotranspiración FAO-56 (ET0 - mm)', | |
| data: et0s, | |
| borderColor: '#ea580c', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| label: 'Precipitación Semanal (mm)', | |
| data: precips, | |
| backgroundColor: '#3b82f6', | |
| borderRadius: 4, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| type: 'line', | |
| label: 'Déficit Hídrico Acumulado (mm)', | |
| data: deficits, | |
| borderColor: '#dc2626', | |
| borderWidth: 2, | |
| fill: false, | |
| tension: 0.3, | |
| yAxisID: 'y1', | |
| borderDash: [3, 3] | |
| } | |
| ]; | |
| } else if (currentBottomChartFilter === 'gdd') { | |
| if (titleEl) titleEl.innerHTML = '<i class="fa-solid fa-fire-flame-simple text-orange-500"></i> Grados Día Acumulados (GDD)'; | |
| if (subtitleEl) subtitleEl.textContent = "Acumulación de calor por encima de la temperatura base de la variedad (Base 10°C)."; | |
| yTitleLeft = 'Semanal (GD)'; | |
| yTitleRight = 'Acumulado (GD)'; | |
| // Daily GDD is computed as max(0, (max_temp + min_temp)/2 - 10) | |
| // We group by day first to get correct GDD values | |
| const dailyGDDMap = new Map(); | |
| weatherRawData.forEach(r => { | |
| const day = r.date.split("T")[0]; | |
| if (!dailyGDDMap.has(day)) dailyGDDMap.set(day, []); | |
| dailyGDDMap.get(day).push(r.temp_c); | |
| }); | |
| const dailyGDDList = Array.from(dailyGDDMap.keys()).sort().map(day => { | |
| const temps = dailyGDDMap.get(day).filter(v => v !== null && v !== undefined); | |
| if (!temps.length) return { day, gdd: 0 }; | |
| const max = Math.max(...temps); | |
| const min = Math.min(...temps); | |
| const val = Math.max(0, ((max + min) / 2) - 10); | |
| return { day, gdd: val }; | |
| }); | |
| // Sum GDDs per week index | |
| const weeklyGDDSums = []; | |
| const weeklyGDDAccs = []; | |
| let accGDD = 0; | |
| sortedWeeks.forEach(w => { | |
| const list = weeklyMap.get(w); | |
| const weekDays = new Set(list.map(r => r.date.split("T")[0])); | |
| const wSum = dailyGDDList | |
| .filter(d => weekDays.has(d.day)) | |
| .reduce((s, d) => s + d.gdd, 0); | |
| weeklyGDDSums.push(parseFloat(wSum.toFixed(1))); | |
| accGDD += wSum; | |
| weeklyGDDAccs.push(parseFloat(accGDD.toFixed(1))); | |
| }); | |
| datasets = [ | |
| { | |
| label: 'Grados Día Semanales (GD)', | |
| data: weeklyGDDSums, | |
| backgroundColor: '#f97316', | |
| borderRadius: 4, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| type: 'line', | |
| label: 'GDD Acumulados (GD)', | |
| data: weeklyGDDAccs, | |
| borderColor: '#dc2626', | |
| borderWidth: 2.5, | |
| tension: 0.2, | |
| yAxisID: 'y1' | |
| } | |
| ]; | |
| } else if (currentBottomChartFilter === 'chill_hours') { | |
| if (titleEl) titleEl.innerHTML = '<i class="fa-solid fa-snowflake text-blue-500"></i> Horas Frío Acumuladas'; | |
| if (subtitleEl) subtitleEl.textContent = "Suma de horas bajo el umbral crítico de vernalización (< 7.2°C) en la campaña."; | |
| yTitleLeft = 'Semanales (Horas)'; | |
| yTitleRight = 'Acumuladas (Horas)'; | |
| const weeklyChillSums = []; | |
| const weeklyChillAccs = []; | |
| let accChill = 0; | |
| sortedWeeks.forEach(w => { | |
| const list = weeklyMap.get(w); | |
| const wSum = list.filter(r => r.temp_c !== null && r.temp_c < 7.2).length; | |
| weeklyChillSums.push(wSum); | |
| accChill += wSum; | |
| weeklyChillAccs.push(accChill); | |
| }); | |
| datasets = [ | |
| { | |
| label: 'Horas Frío Semanales', | |
| data: weeklyChillSums, | |
| backgroundColor: '#60a5fa', | |
| borderRadius: 4, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| type: 'line', | |
| label: 'Horas Frío Acumuladas', | |
| data: weeklyChillAccs, | |
| borderColor: '#4f46e5', | |
| borderWidth: 2.5, | |
| tension: 0.2, | |
| yAxisID: 'y1' | |
| } | |
| ]; | |
| } else if (currentBottomChartFilter === 'stress_hours') { | |
| if (titleEl) titleEl.innerHTML = '<i class="fa-solid fa-triangle-exclamation text-red-500"></i> Horas de Estrés de Campaña'; | |
| if (subtitleEl) subtitleEl.textContent = "Horas acumuladas semanales de estrés por calor (> 32°C) y déficit de presión de vapor (> 2.0 kPa)."; | |
| yTitleLeft = 'Horas de Estrés'; | |
| showY1 = false; | |
| const weeklyThermal = []; | |
| const weeklyDPV = []; | |
| sortedWeeks.forEach(w => { | |
| const list = weeklyMap.get(w); | |
| const wThermal = list.filter(r => r.temp_c !== null && r.temp_c > 32).length; | |
| const wDPV = list.filter(r => calculateVPD(r.temp_c, r.relative_humidity_percentage) > 2.0).length; | |
| weeklyThermal.push(wThermal); | |
| weeklyDPV.push(wDPV); | |
| }); | |
| datasets = [ | |
| { | |
| label: 'Estrés Térmico (> 32°C)', | |
| data: weeklyThermal, | |
| backgroundColor: '#ef4444', | |
| borderRadius: 4, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| label: 'Estrés por DPV (> 2.0 kPa)', | |
| data: weeklyDPV, | |
| backgroundColor: '#f59e0b', | |
| borderRadius: 4, | |
| yAxisID: 'y' | |
| } | |
| ]; | |
| } | |
| const scalesConfig = { | |
| x: { grid: { color: '#f3f4f6' } }, | |
| y: { | |
| type: 'linear', | |
| display: true, | |
| position: 'left', | |
| title: { display: true, text: yTitleLeft, font: { size: 9, family: 'Plus Jakarta Sans' } }, | |
| grid: { color: '#f3f4f6' } | |
| } | |
| }; | |
| if (showY1) { | |
| scalesConfig.y1 = { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| title: { display: true, text: yTitleRight, font: { size: 9, family: 'Plus Jakarta Sans' } }, | |
| grid: { drawOnChartArea: false } | |
| }; | |
| } | |
| chartWaterBalance = new Chart(ctx, { | |
| type: 'bar', | |
| data: { labels: labelsSemanas, datasets }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { boxWidth: 10, font: { size: 9, family: 'Plus Jakarta Sans' } } | |
| } | |
| }, | |
| scales: scalesConfig | |
| } | |
| }); | |
| } | |
| async function loadWeather() { | |
| const fid = $("select-parcela").value; | |
| if (!fid) { | |
| $("weather-empty")?.classList.remove("hidden"); | |
| return; | |
| } | |
| const parcel = parcels.find((p) => p.id === fid); | |
| if (!parcel) { | |
| $("weather-empty")?.classList.remove("hidden"); | |
| return; | |
| } | |
| $("weather-empty")?.classList.add("hidden"); | |
| // Compute campaign start date: use parcel.plantation_date or default to Jan 1st of current year | |
| const plantationDate = parcel.plantation_date; | |
| if (plantationDate) { | |
| weatherCampaignStart = plantationDate.split("T")[0]; | |
| } else { | |
| const currentYear = new Date().getFullYear(); | |
| weatherCampaignStart = `${currentYear}-01-01`; | |
| } | |
| // Update Campaign Start UI element | |
| const startBadge = $("campaign-start-badge"); | |
| if (startBadge) { | |
| // Format start date nicely | |
| try { | |
| const parts = weatherCampaignStart.split("-"); | |
| startBadge.textContent = `${parts[2]}/${parts[1]}/${parts[0]}`; | |
| } catch { | |
| startBadge.textContent = weatherCampaignStart; | |
| } | |
| } | |
| const today = new Date().toISOString().split("T")[0]; | |
| try { | |
| const rW = await api("/weather", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| ...authHeaders() | |
| }, | |
| body: JSON.stringify({ | |
| field_id: fid, | |
| start: weatherCampaignStart, | |
| end: today, | |
| raw: true | |
| }) | |
| }); | |
| if (!rW.ok) { | |
| console.error("Failed to load weather data"); | |
| return; | |
| } | |
| const responseData = await rW.json(); | |
| const rawSeries = responseData.series || []; | |
| weatherRawData = rawSeries.map(r => ({ | |
| date: r.timestamp || "", | |
| temp_c: r.temperature_2m, | |
| relative_humidity_percentage: r.relative_humidity_2m, | |
| soil_temperature_0_to_7cm_c: r.soil_temperature_0_to_7cm, | |
| soil_moisture_0_to_7cm_m3_m3: r.soil_moisture_0_to_7cm, | |
| precip_mm: r.precipitation, | |
| solar_radiation_w_m2: r.shortwave_radiation, | |
| wind_speed_10m_km_h: r.wind_speed_10m, | |
| et0_fao_evapotranspiration: r.et0_fao_evapotranspiration, | |
| vapour_pressure_deficit: r.vapour_pressure_deficit | |
| })); | |
| if (!weatherRawData.length) { | |
| console.warn("No weather raw records returned"); | |
| return; | |
| } | |
| // Calculate Campaign Agronomic KPIs | |
| // GDD (Base 10°C): sum of daily max(0, (max_temp + min_temp)/2 - 10) | |
| const dailyTempsMap = new Map(); | |
| weatherRawData.forEach(r => { | |
| const day = r.date.split("T")[0]; | |
| if (!dailyTempsMap.has(day)) dailyTempsMap.set(day, []); | |
| dailyTempsMap.get(day).push(r.temp_c); | |
| }); | |
| let totalGDD = 0; | |
| dailyTempsMap.forEach((temps) => { | |
| const validTemps = temps.filter(v => v !== null && v !== undefined); | |
| if (validTemps.length) { | |
| const max = Math.max(...validTemps); | |
| const min = Math.min(...validTemps); | |
| totalGDD += Math.max(0, ((max + min) / 2) - 10); | |
| } | |
| }); | |
| // Chill hours: sum of hours where temp < 7.2°C | |
| const chillHours = weatherRawData.filter(r => r.temp_c !== null && r.temp_c < 7.2).length; | |
| // Heat stress hours: sum of hours where temp > 32°C | |
| const heatStressHours = weatherRawData.filter(r => r.temp_c !== null && r.temp_c > 32).length; | |
| // VPD stress hours: sum of hours where VPD > 2.0 kPa | |
| const vpdStressHours = weatherRawData.filter(r => { | |
| const vpd = calculateVPD(r.temp_c, r.relative_humidity_percentage); | |
| return vpd > 2.0; | |
| }).length; | |
| // Frost hours: sum of hours where temp < 0°C | |
| const frostHours = weatherRawData.filter(r => r.temp_c !== null && r.temp_c < 0).length; | |
| // ET0 accumulation: sum of et0_fao_evapotranspiration | |
| const et0Accum = weatherRawData.reduce((s, r) => s + (r.et0_fao_evapotranspiration || 0), 0); | |
| // Net Water Balance: sum of precip_mm - sum of et0_fao_evapotranspiration | |
| const totalPrecip = weatherRawData.reduce((s, r) => s + (r.precip_mm || 0), 0); | |
| const netWaterBalance = totalPrecip - et0Accum; | |
| // Bind Elements | |
| const bindText = (id, val) => { | |
| const el = $(id); | |
| if (el) el.textContent = val; | |
| }; | |
| bindText("val-gdd", `${totalGDD.toFixed(1)} GD`); | |
| bindText("val-chill", `${chillHours} horas`); | |
| bindText("val-thermal", `${heatStressHours} horas`); | |
| bindText("val-dpv", `${vpdStressHours} horas`); | |
| bindText("val-frost", `${frostHours} horas`); | |
| bindText("val-et0", `${et0Accum.toFixed(1)} mm`); | |
| // Update agronomic notes with actual balance deficit | |
| weatherNotesData.balance.text = `El déficit hídrico neto acumulado de esta campaña es de ${netWaterBalance.toFixed(1)} mm. Se aconseja ajustar la telemetría del sistema de riego por goteo para compensar la alta evapotranspiración de esta semana.`; | |
| // If active field changed, reset selectors to default or setup event listeners first time | |
| if (activeFieldId !== fid) { | |
| activeFieldId = fid; | |
| currentGranularity = 'horario'; | |
| currentWeatherVariable = 'temperatures'; | |
| currentBottomChartFilter = 'water_balance'; | |
| // Set defaults on selector elements | |
| const selectVar = $("weather-variable-select"); | |
| if (selectVar) selectVar.value = "temperatures"; | |
| const selectBottom = $("bottom-chart-filter-select"); | |
| if (selectBottom) selectBottom.value = "water_balance"; | |
| // Set historical date picker to default (latest date in the dataset) | |
| const datePicker = $("historical-date-picker"); | |
| if (datePicker && weatherRawData.length) { | |
| const dates = weatherRawData.map(r => r.date.split("T")[0]); | |
| const latestDate = dates.reduce((max, d) => d > max ? d : max, dates[0]); | |
| datePicker.value = latestDate; | |
| } | |
| // Bind listeners only once or when field is changed | |
| setupWeatherEventListeners(); | |
| // Set default active note | |
| updateAgronomicNote("balance"); | |
| } | |
| // Initial Render | |
| renderDynamicKPIs(); | |
| drawTopWeatherChart(); | |
| drawBottomWeatherChart(); | |
| track("chart_view", { chart: "weather_advanced", points: weatherRawData.length }); | |
| } catch (error) { | |
| console.error("Error in loadWeather: ", error); | |
| } | |
| } | |
| // ===== Análisis Cruzado (Correlación) ===== | |
| async function loadAnalysis() { | |
| const fid = $("select-parcela").value; | |
| if (!fid) { $("analysis-empty").classList.remove("hidden"); return; } | |
| const parcel = parcels.find((p) => p.id === fid); | |
| if (!parcel) { $("analysis-empty").classList.remove("hidden"); return; } | |
| $("analysis-empty").classList.add("hidden"); | |
| const rI = await api("/vegetation/ndvi", { method: "POST", body: JSON.stringify({ field_id: fid }) }); | |
| const series = rI.ok ? (await rI.json()).series : []; | |
| let weather = []; | |
| if (parcel.lat != null) { | |
| const rW = await api("/weather", { method: "POST", body: JSON.stringify({ field_id: fid }) }); | |
| weather = rW.ok ? (await rW.json()).series : []; | |
| } | |
| if (!series.length && !weather.length) { $("analysis-empty").classList.remove("hidden"); return; } | |
| const weatherMap = new Map(weather.map(w => [w.date, w])); | |
| const labels = series.map(s => s.date); | |
| const ndviData = series.map(s => s.mean_value); | |
| const tempMeanData = series.map(s => { | |
| const w = weatherMap.get(s.date); | |
| return w ? w.temp_mean_c : null; | |
| }); | |
| const precipData = series.map(s => { | |
| const w = weatherMap.get(s.date); | |
| return w ? w.precip_mm : null; | |
| }); | |
| const ctx = $("chart-analysis"); | |
| chartAnalysis?.destroy(); | |
| chartAnalysis = new Chart(ctx, { | |
| data: { | |
| labels: labels, | |
| datasets: [ | |
| { type: "line", label: "NDVI", data: ndviData, borderColor: "#15803d", tension: 0.3, yAxisID: "y" }, | |
| { type: "line", label: "Temp Media (°C)", data: tempMeanData, borderColor: "#f97316", tension: 0.3, yAxisID: "y2" }, | |
| { type: "bar", label: "Precipitación (mm)", data: precipData, backgroundColor: "rgba(59,130,246,0.4)", yAxisID: "y2" } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { position: "left", min: 0, max: 1, title: { display: true, text: "NDVI" } }, | |
| y2: { position: "right", grid: { drawOnChartArea: false }, title: { display: true, text: "Clima (°C / mm)" } } | |
| } | |
| } | |
| }); | |
| track("chart_view", { chart: "analysis", points: series.length }); | |
| } | |
| // ===== Reprocesar Modal ===== | |
| function showReprocessModal(preselectIndex = null) { | |
| const fid = $("select-parcela").value; | |
| if (!fid) return notify("Selecciona una parcela", ""); | |
| const indices = getParcelIndices(fid); | |
| setCheckedIndices(".reprocess-index-checkbox", indices); | |
| if (VALID_INDICES.includes(preselectIndex)) { | |
| document.querySelectorAll(".reprocess-index-checkbox").forEach((checkbox) => { | |
| if (checkbox.value === preselectIndex) checkbox.checked = true; | |
| }); | |
| } | |
| $("reprocess-indices-error")?.classList.add("hidden"); | |
| $("reprocess-modal").classList.remove("hidden"); | |
| $("reprocess-modal").classList.add("flex"); | |
| $("reprocess-status").classList.add("hidden"); | |
| $("reprocess-status").innerText = ""; | |
| track("reprocess_modal_open", { field_id: fid, indices }); | |
| } | |
| function closeReprocessModal() { | |
| $("reprocess-modal").classList.add("hidden"); | |
| $("reprocess-modal").classList.remove("flex"); | |
| } | |
| $("btn-reprocess").addEventListener("click", () => showReprocessModal()); | |
| $("btn-close-reprocess").addEventListener("click", closeReprocessModal); | |
| $("btn-cancel-reprocess").addEventListener("click", closeReprocessModal); | |
| $("reprocess-modal").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeReprocessModal(); }); | |
| $("btn-reprocess-select-all-indices").addEventListener("click", () => { | |
| setCheckedIndices(".reprocess-index-checkbox", VALID_INDICES); | |
| }); | |
| $("btn-run-reprocess").addEventListener("click", async () => { | |
| const fid = $("select-parcela").value; | |
| const mode = document.querySelector('input[name="reprocess-mode"]:checked')?.value || "all"; | |
| const selectedIndices = getCheckedIndices(".reprocess-index-checkbox"); | |
| const indicesError = $("reprocess-indices-error"); | |
| if (mode !== "weather" && !selectedIndices.length) { | |
| indicesError?.classList.remove("hidden"); | |
| return notify("Falta una variable satelital", "Marca al menos una variable para reprocesar."); | |
| } | |
| indicesError?.classList.add("hidden"); | |
| const btn = $("btn-run-reprocess"); | |
| btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Procesando…'; | |
| $("reprocess-status").classList.remove("hidden"); | |
| $("reprocess-status").innerText = "Reprocesando… esto puede tomar varios minutos."; | |
| const payload = { field_id: fid, mode }; | |
| if (mode !== "weather") payload.indices = selectedIndices; | |
| track("reprocess_start", { field_id: fid, mode, indices: selectedIndices }); | |
| try { | |
| const r = await api("/vegetation/reprocess", { method: "POST", body: JSON.stringify(payload) }); | |
| if (r.ok) { | |
| const data = await r.json(); | |
| const idxCount = data.indices?.length || 0; | |
| const totalPoints = data.indices?.reduce((s, i) => s + i.points, 0) || 0; | |
| const mergedIndices = mode === "weather" ? getParcelIndices(fid) : normalizeIndices([...getParcelIndices(fid), ...selectedIndices]); | |
| const indexSummary = mode === "weather" ? "" : ` (${formatIndices(selectedIndices)})`; | |
| setParcelIndices(fid, mergedIndices); | |
| syncSatelliteIndexControls(fid); | |
| $("reprocess-status").innerText = `Reproceso completado: ${idxCount} índices${indexSummary}, ${totalPoints} puntos.${data.weather ? " Clima actualizado." : ""}`; | |
| $("reprocess-status").className = "mt-3 text-xs text-emerald-600"; | |
| track("reprocess_done", { field_id: fid, mode, indices: idxCount, points: totalPoints, selected_indices: selectedIndices }); | |
| setTimeout(async () => { | |
| closeReprocessModal(); | |
| await refreshParcels(); | |
| setParcelIndices(fid, mergedIndices); | |
| syncSatelliteIndexControls(fid); | |
| await loadFieldAttributes(fid); | |
| if (document.querySelector(".tab-content.active")?.id === "tab-satelite") await loadTeledeteccion(); | |
| }, 1500); | |
| } else { | |
| const err = await r.json().catch(() => ({})); | |
| $("reprocess-status").innerText = "Error: " + (err.detail || r.status); | |
| $("reprocess-status").className = "mt-3 text-xs text-red-600"; | |
| track("reprocess_error", { field_id: fid, mode, status: r.status }); | |
| } | |
| } catch (e) { | |
| $("reprocess-status").innerText = "Error de red: " + e; | |
| $("reprocess-status").className = "mt-3 text-xs text-red-600"; | |
| } finally { | |
| btn.disabled = false; btn.innerHTML = '<i class="fa-solid fa-play"></i> Ejecutar'; | |
| } | |
| }); | |
| // ===== Chat ===== | |
| function appendChat(who, text, tools) { | |
| const div = document.createElement("div"); | |
| const mine = who === "user"; | |
| div.className = "p-3 rounded border max-w-[85%] " + (mine ? "bg-white border-stone-200 ml-auto text-right" : "bg-stone-900 text-stone-100 border-stone-800 text-left"); | |
| div.innerHTML = `<p class="font-bold text-[9px] uppercase mb-1 ${mine ? "text-stone-500" : "text-emerald-400"}">${mine ? "🧑 Tú" : "🤖 Asistente"}${tools && tools.length ? " · " + tools.join(", ") : ""}</p><p class="leading-relaxed whitespace-pre-wrap">${text}</p>`; | |
| $("chat-history").appendChild(div); $("chat-history").scrollTop = 1e9; | |
| } | |
| async function loadChatHistory() { | |
| const historyEl = $("chat-history"); | |
| historyEl.innerHTML = '<span class="text-xs text-stone-500">Cargando historial...</span>'; | |
| const fid = $("select-parcela")?.value || ""; | |
| try { | |
| let url = "/chat/history/" + sessionId; | |
| if (fid) url += "?field_id=" + fid; | |
| const r = await api(url); | |
| if (r.ok) { | |
| const data = await r.json(); | |
| historyEl.innerHTML = ""; | |
| if (data.length === 0) { | |
| historyEl.innerHTML = `<p class="text-stone-500">Pregúntame sobre el NDVI, el clima o la densidad de tus parcelas.</p>`; | |
| } else { | |
| data.forEach((msg) => { | |
| appendChat(msg.role, msg.content); | |
| }); | |
| } | |
| } else { | |
| historyEl.innerHTML = '<p class="text-stone-500">Error al cargar historial.</p>'; | |
| } | |
| } catch (e) { | |
| historyEl.innerHTML = `<p class="text-stone-500">Error de red al cargar historial: ${e}</p>`; | |
| } | |
| } | |
| async function sendChat() { | |
| const msg = $("chat-input").value.trim(); if (!msg) return; | |
| const fid = $("select-parcela")?.value || null; | |
| track("chat_send", { len: msg.length, field_id: fid }); | |
| appendChat("user", msg); $("chat-input").value = ""; | |
| try { | |
| const r = await api("/chat", { method: "POST", body: JSON.stringify({ session_id: sessionId, message: msg, field_id: fid }) }); | |
| if (r.ok) { const d = await r.json(); appendChat("assistant", d.reply, (d.tool_logs || []).map((t) => t.tool)); } | |
| else { const e = await r.json().catch(() => ({})); appendChat("assistant", "Error: " + (e.detail || r.status)); } | |
| } catch (e) { appendChat("assistant", "Error de red: " + e); } | |
| } | |
| $("btn-chat").addEventListener("click", sendChat); | |
| $("chat-input").addEventListener("keydown", (e) => { if (e.key === "Enter") sendChat(); }); | |
| // ===== Telemetría Modal ===== | |
| function openTelemetryModal() { | |
| $("telemetry-modal").classList.remove("hidden"); | |
| $("telemetry-modal").classList.add("flex"); | |
| $("telemetry-session-id").innerText = sessionId; | |
| loadTelemetryEvents(); | |
| track("telemetry_open", {}); | |
| } | |
| function closeTelemetryModal() { | |
| $("telemetry-modal").classList.add("hidden"); | |
| $("telemetry-modal").classList.remove("flex"); | |
| } | |
| async function loadTelemetryEvents() { | |
| const content = $("telemetry-content"); | |
| content.innerHTML = '<p class="text-xs text-stone-500">Cargando eventos...</p>'; | |
| try { | |
| let events = []; | |
| try { | |
| const r = await api("/events/all?limit=200"); | |
| if (r.ok) { | |
| events = await r.json(); | |
| } | |
| } catch {} | |
| if (!events || events.length === 0) { | |
| try { | |
| const r2 = await api("/events/recent?limit=200"); | |
| if (r2.ok) { | |
| events = await r2.json(); | |
| } | |
| } catch {} | |
| } | |
| if (!events || events.length === 0) { | |
| content.innerHTML = '<p class="text-xs text-stone-500">Sin eventos en esta sesión.</p>'; | |
| return; | |
| } | |
| renderTelemetryEvents(events, content); | |
| } catch (e) { | |
| content.innerHTML = `<p class="text-xs text-red-500">Error al cargar eventos: ${e}</p>`; | |
| } | |
| } | |
| function renderTelemetryEvents(events, container) { | |
| const html = events.map((ev) => { | |
| const ts = ev.created_at || ev.ts || ""; | |
| const time = ts ? new Date(ts).toLocaleTimeString() : ""; | |
| const isError = ev.action.includes("error"); | |
| const bg = isError ? "bg-red-50 border-red-200" : "bg-stone-50 border-stone-200"; | |
| const icon = isError ? "fa-circle-exclamation text-red-500" : "fa-circle-dot text-emerald-500"; | |
| const metaStr = ev.meta && Object.keys(ev.meta).length ? JSON.stringify(ev.meta).slice(0, 120) : ""; | |
| return `<div class="border ${bg} rounded-lg px-3 py-2 text-[10px]"> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <i class="fa-solid ${icon}"></i> | |
| <span class="font-bold text-stone-700">${ev.action}</span> | |
| <span class="text-stone-400 ml-auto">${time}</span> | |
| </div> | |
| ${metaStr ? `<div class="text-stone-500 font-mono truncate">${metaStr}</div>` : ""} | |
| </div>`; | |
| }).join(""); | |
| container.innerHTML = html; | |
| } | |
| $("btn-telemetry").addEventListener("click", openTelemetryModal); | |
| $("btn-close-telemetry").addEventListener("click", closeTelemetryModal); | |
| $("btn-refresh-telemetry").addEventListener("click", loadTelemetryEvents); | |
| $("telemetry-modal").addEventListener("click", (e) => { if (e.target === $("telemetry-modal")) closeTelemetryModal(); }); | |
| // ===== Explorador de Datos ===== | |
| const TABLES = ["fields", "vegetation_indices", "weather_data", "chat_messages", "events", "plant_counts"]; | |
| async function loadDataExplorer() { | |
| loadSchema(); | |
| const list = $("tables-list"); | |
| list.innerHTML = TABLES.map((t) => | |
| `<button data-table="${t}" class="w-full text-left text-xs px-3 py-2 rounded-lg border border-stone-200 bg-stone-50 hover:bg-stone-100 font-semibold text-stone-700"><i class="fa-solid fa-table mr-1 text-emerald-600"></i>${t}</button>` | |
| ).join(""); | |
| list.querySelectorAll("button").forEach((b) => | |
| b.addEventListener("click", () => loadTableData(b.dataset.table)) | |
| ); | |
| } | |
| async function loadSchema() { | |
| const el = $("er-diagram"); | |
| try { | |
| const r = await api("/data/schema"); | |
| if (!r.ok) { el.innerHTML = '<p class="text-xs text-stone-500">Error al cargar esquema.</p>'; return; } | |
| const d = await r.json(); | |
| const tables = d.tables || {}; | |
| const shortType = (t) => { | |
| if (t.includes("timestamp")) return "timestamptz"; | |
| if (t.includes("double")) return "float"; | |
| if (t === "USER-DEFINED") return "geometry"; | |
| return t; | |
| }; | |
| let mmd = "erDiagram\n"; | |
| for (const [name, cols] of Object.entries(tables)) { | |
| mmd += ` ${name} {\n`; | |
| for (const c of cols) { | |
| const ann = c.name === "id" ? " PK" : c.name.endsWith("_id") ? " FK" : ""; | |
| mmd += ` ${shortType(c.type)} ${c.name}${ann}\n`; | |
| } | |
| mmd += " }\n"; | |
| } | |
| mmd += ' fields ||--o{ vegetation_indices : "tiene"\n'; | |
| mmd += ' fields ||--o{ weather_data : "registra clima"\n'; | |
| mmd += ' fields ||--o{ plant_counts : "tiene"\n'; | |
| mmd += ' fields ||--o{ events : "genera"\n'; | |
| mmd += ' fields ||--o{ chat_messages : "genera"\n'; | |
| const id = "er-" + Date.now(); | |
| const { svg } = await mermaid.render(id, mmd); | |
| el.innerHTML = svg; | |
| } catch (e) { | |
| el.innerHTML = '<p class="text-xs text-red-500">Error al renderizar diagrama ER: ' + String(e?.message || e) + '</p>'; | |
| } | |
| } | |
| async function loadTableData(table) { | |
| $("data-view-title").innerText = `Tabla: ${table}`; | |
| $("data-view-content").innerHTML = '<p class="text-xs text-stone-500">Cargando...</p>'; | |
| try { | |
| const r = await api(`/data/${table}`); | |
| if (!r.ok) { $("data-view-content").innerHTML = '<p class="text-xs text-red-500">Error al cargar. Verifica credenciales.</p>'; return; } | |
| const d = await r.json(); | |
| const rows = d.rows || []; | |
| $("data-view-count").innerText = `${rows.length} registros`; | |
| if (!rows.length) { $("data-view-content").innerHTML = '<p class="text-xs text-stone-500">Sin registros.</p>'; return; } | |
| const cols = Object.keys(rows[0]); | |
| const html = `<table class="w-full text-[10px] border-collapse"><thead><tr>${cols.map((c) => `<th class="border border-stone-200 px-2 py-1 bg-stone-100 font-bold text-stone-700">${c}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${cols.map((c) => `<td class="border border-stone-200 px-2 py-1">${formatCell(row[c])}</td>`).join("")}</tr>`).join("")}</tbody></table>`; | |
| $("data-view-content").innerHTML = html; | |
| } catch (e) { $("data-view-content").innerHTML = `<p class="text-xs text-red-500">Error: ${e}</p>`; } | |
| } | |
| function formatCell(v) { | |
| if (v === null || v === undefined) return '<span class="text-stone-400">NULL</span>'; | |
| if (typeof v === "object") return `<code class="text-[9px] bg-stone-100 px-1 rounded">${JSON.stringify(v).slice(0, 80)}</code>`; | |
| return String(v).slice(0, 100); | |
| } | |
| $("btn-run-query").addEventListener("click", async () => { | |
| const sql = $("sql-query").value.trim(); | |
| if (!sql) return notify("Falta la consulta", "Escribe una consulta SQL."); | |
| $("query-result").innerHTML = '<p class="text-xs text-stone-500">Ejecutando...</p>'; | |
| try { | |
| const r = await api("/data/query", { method: "POST", body: JSON.stringify({ sql }) }); | |
| if (!r.ok) { const e = await r.json().catch(() => ({})); $("query-result").innerHTML = `<p class="text-xs text-red-500">Error: ${e.detail || r.status}</p>`; return; } | |
| const d = await r.json(); | |
| const rows = d.rows || []; | |
| if (!rows.length) { $("query-result").innerHTML = '<p class="text-xs text-stone-500">Sin registros.</p>'; return; } | |
| const cols = Object.keys(rows[0]); | |
| const html = `<table class="w-full text-[10px] border-collapse"><thead><tr>${cols.map((c) => `<th class="border border-stone-200 px-2 py-1 bg-stone-100 font-bold text-stone-700">${c}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${cols.map((c) => `<td class="border border-stone-200 px-2 py-1">${formatCell(row[c])}</td>`).join("")}</tr>`).join("")}</tbody></table>`; | |
| $("query-result").innerHTML = html; | |
| } catch (e) { $("query-result").innerHTML = `<p class="text-xs text-red-500">Error: ${e}</p>`; } | |
| }); | |
| $("btn-clear-query").addEventListener("click", () => { $("sql-query").value = ""; $("query-result").innerHTML = ""; }); | |
| // ===== Credenciales ===== | |
| async function connectUserDatabase() { | |
| if (!creds.dbUrl) return null; | |
| track("connect_db_attempt", {}); | |
| try { | |
| const r = await fetch("./api/credentials/connect-db", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json", ...authHeaders() }, | |
| body: JSON.stringify({ database_url: creds.dbUrl }) | |
| }); | |
| if (!r.ok) { | |
| const e = await r.json().catch(() => ({})); | |
| track("connect_db_error", { status: r.status }); | |
| notify( | |
| r.status === 404 ? "Auto-conexión no disponible" : "Error al conectar la base de datos", | |
| r.status === 404 | |
| ? "El backend todavía no expone connect-db (pendiente Fase 9)." | |
| : (e.detail || `Error ${r.status} al conectar con tu Supabase.`) | |
| ); | |
| return null; | |
| } | |
| const data = await r.json(); | |
| const migraciones = Array.isArray(data.migrations_applied) ? data.migrations_applied.length : 0; | |
| if (migraciones > 0) { | |
| notify("Esquema inicializado", `Se creó la arquitectura PostGIS automáticamente (${migraciones} migración(es) aplicadas).`); | |
| } else if ((data.existing_parcels ?? 0) > 0) { | |
| notify("Base de datos conectada", `Se detectaron ${data.existing_parcels} parcela(s) existentes en tu Supabase.`); | |
| } else { | |
| notify("Base de datos conectada", "Tu Supabase se conectó correctamente."); | |
| } | |
| track("connect_db_success", { migraciones, existing_parcels: data.existing_parcels ?? 0 }); | |
| updateStatus(); | |
| return data; | |
| } catch (e) { | |
| track("connect_db_error", { error: String(e) }); | |
| notify("Error de red", `No se pudo conectar a tu base de datos: ${e}`); | |
| return null; | |
| } | |
| } | |
| $("btn-save-creds").addEventListener("click", async () => { | |
| creds = { groq: $("in-groq").value, copId: $("in-copid").value, copSecret: $("in-copsecret").value, sbUrl: $("in-sburl").value, sbKey: $("in-sbkey").value, dbUrl: $("cred-db-url").value }; | |
| const n = Object.values(creds).filter(Boolean).length; | |
| track("creds_set", { count: n }); | |
| $("creds-state").innerText = `${n} llave(s) activas (se borran al refrescar)`; | |
| notify("Credenciales en sesión", `${n} llave(s) activas solo en esta sesión.`); | |
| updateStatus(); | |
| checkMissingCredentials(); | |
| await connectUserDatabase(); | |
| await refreshParcels(); | |
| await connectUserProfile(); | |
| }); | |
| $("btn-check-env").addEventListener("click", async () => { | |
| try { | |
| const r = await fetch("./api/credentials/status"); | |
| if (!r.ok) return notify("No disponible", "No se pudo consultar el .env del servidor."); | |
| const s = await r.json(); | |
| appEnv = s.env || "development"; | |
| const have = Object.entries({ Groq: s.groq, Copernicus: s.copernicus, Supabase: s.supabase }).filter(([, v]) => v).map(([k]) => k); | |
| track("env_check", { have, env: appEnv }); | |
| if (appEnv === "production") { | |
| $("env-status").innerHTML = " <b>Producción:</b> cada usuario debe ingresar sus propias credenciales."; | |
| } else { | |
| $("env-status").innerHTML = have.length | |
| ? `✅ En el servidor (.env): <b>${have.join(", ")}</b>. Se usan automáticamente; no necesitas reescribirlas aquí.` | |
| : "No se detectaron credenciales en el .env del servidor."; | |
| } | |
| } catch { notify("Error", "No se pudo consultar el .env del servidor."); } | |
| }); | |
| // ===== Perfiles y Modos de Sesión ===== | |
| $("btn-profile-menu").addEventListener("click", (e) => { | |
| e.stopPropagation(); | |
| $("profile-dropdown").classList.toggle("hidden"); | |
| }); | |
| document.addEventListener("click", () => { | |
| $("profile-dropdown").classList.add("hidden"); | |
| }); | |
| $("profile-dropdown").addEventListener("click", (e) => { | |
| e.stopPropagation(); | |
| }); | |
| document.querySelectorAll(".dropdown-btn").forEach((btn) => { | |
| btn.addEventListener("click", () => { | |
| $("profile-dropdown").classList.add("hidden"); | |
| switchTab(btn.dataset.action); | |
| }); | |
| }); | |
| $("dropdown-telemetry").addEventListener("click", () => { | |
| $("profile-dropdown").classList.add("hidden"); | |
| openTelemetryModal(); | |
| }); | |
| $("dropdown-logout").addEventListener("click", () => { | |
| $("profile-dropdown").classList.add("hidden"); | |
| logout(); | |
| }); | |
| $("btn-save-settings").addEventListener("click", async () => { | |
| if (isSharedMode) return notify("Modo compartido", "No puedes editar ajustes en modo de solo lectura."); | |
| const displayName = $("settings-display-name").value.trim(); | |
| const sessionMode = $("settings-session-mode").value; | |
| const cfgDbUrl = ($("cfg-db-url")?.value || "").trim(); | |
| if (cfgDbUrl) { | |
| creds.dbUrl = cfgDbUrl; | |
| updateStatus(); | |
| } | |
| if (!displayName) return notify("Falta el nombre", "Escribe un nombre para el perfil."); | |
| if (!profileId) return notify("Error", "No hay un perfil conectado."); | |
| try { | |
| track("profile_update_attempt", { displayName, sessionMode }); | |
| const r = await api(`/profiles/${profileId}`, { | |
| method: "PATCH", | |
| body: JSON.stringify({ | |
| display_name: displayName, | |
| session_mode: sessionMode | |
| }) | |
| }); | |
| if (r.ok) { | |
| currentProfile = await r.json(); | |
| notify("Ajustes guardados", "El perfil se ha actualizado correctamente."); | |
| updateProfileUI(); | |
| if (sessionMode === "saved") { | |
| localStorage.setItem("agrovision_profile_id", profileId); | |
| } else { | |
| localStorage.removeItem("agrovision_profile_id"); | |
| } | |
| track("profile_update_success", { displayName, sessionMode }); | |
| if (creds.dbUrl) { | |
| await connectUserDatabase(); | |
| await refreshParcels(); | |
| } | |
| } else { | |
| const e = await r.json().catch(() => ({})); | |
| notify("Error " + r.status, e.detail || "No se pudo actualizar el perfil."); | |
| } | |
| } catch (e) { | |
| notify("Error de red", String(e)); | |
| } | |
| }); | |
| $("btn-delete-profile").addEventListener("click", async () => { | |
| if (isSharedMode) return notify("Modo compartido", "No puedes eliminar perfiles en modo de solo lectura."); | |
| if (!profileId) return; | |
| if (!confirm("¿Estás seguro de que deseas eliminar permanentemente tu perfil? Se perderán todas tus preferencias.")) return; | |
| try { | |
| track("profile_delete_attempt", { profileId }); | |
| const r = await api(`/profiles/${profileId}`, { method: "DELETE" }); | |
| if (r.ok) { | |
| track("profile_delete_success", { profileId }); | |
| notify("Perfil eliminado", "Tu perfil ha sido eliminado. Volviendo a sesión efímera."); | |
| logout(); | |
| } else { | |
| const e = await r.json().catch(() => ({})); | |
| notify("Error " + r.status, e.detail || "No se pudo eliminar el perfil."); | |
| } | |
| } catch (e) { | |
| notify("Error de red", String(e)); | |
| } | |
| }); | |
| function logout() { | |
| track("session_logout", { profileId }); | |
| localStorage.removeItem("agrovision_profile_id"); | |
| profileId = null; | |
| currentProfile = null; | |
| creds = {}; | |
| $("in-groq").value = ""; | |
| $("in-copid").value = ""; | |
| $("in-copsecret").value = ""; | |
| $("in-sburl").value = ""; | |
| $("in-sbkey").value = ""; | |
| $("cred-db-url").value = ""; | |
| $("cfg-db-url").value = ""; | |
| $("creds-state").innerText = "0 llaves activas (se borran al refrescar)"; | |
| $("settings-display-name").value = "Agrónomo"; | |
| $("settings-session-mode").value = "ephemeral"; | |
| updateProfileUI(); | |
| updateStatus(); | |
| checkMissingCredentials(); | |
| refreshParcels(); | |
| switchTab("tab-resumen"); | |
| notify("Sesión cerrada", "Se han limpiado todas las llaves y preferencias."); | |
| } | |
| async function connectUserProfile() { | |
| if (isSharedMode) return; | |
| let sbUrl = creds.sbUrl || creds.dbUrl; | |
| if (!sbUrl) { | |
| try { | |
| const r = await fetch("./api/credentials/status", { headers: authHeaders() }); | |
| if (r.ok) { | |
| const s = await r.json(); | |
| if (s.supabase_url) sbUrl = s.supabase_url; | |
| } | |
| } catch {} | |
| } | |
| if (!sbUrl) { | |
| profileId = null; | |
| currentProfile = null; | |
| updateProfileUI(); | |
| return; | |
| } | |
| try { | |
| fingerprint = await sha256(sbUrl); | |
| track("profile_connect_attempt", { hash: fingerprint }); | |
| const r = await fetch("./api/profiles/connect", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ supabase_url_hash: fingerprint, display_name: $("settings-display-name").value || "Agrónomo" }) | |
| }); | |
| if (r.ok) { | |
| currentProfile = await r.json(); | |
| profileId = currentProfile.id; | |
| updateProfileUI(); | |
| if (currentProfile.active_field_id) { | |
| localStorage.setItem("agrovision_last_field_id", currentProfile.active_field_id); | |
| } | |
| if (currentProfile.session_mode === "saved") { | |
| localStorage.setItem("agrovision_profile_id", profileId); | |
| } else { | |
| localStorage.removeItem("agrovision_profile_id"); | |
| } | |
| track("profile_connect_success", { profileId, mode: currentProfile.session_mode }); | |
| } | |
| } catch (e) { | |
| track("profile_connect_error", { error: String(e) }); | |
| } | |
| } | |
| async function loadSharedProfile(id) { | |
| isSharedMode = true; | |
| profileId = id; | |
| track("shared_mode_start", { profileId }); | |
| document.body.classList.add("shared-read-only"); | |
| $("btn-save-parcela").disabled = true; | |
| $("btn-save-parcela").classList.add("opacity-50", "cursor-not-allowed"); | |
| $("btn-demo").style.display = "none"; | |
| $("btn-save-creds").style.display = "none"; | |
| $("btn-save-settings").style.display = "none"; | |
| $("btn-delete-profile").style.display = "none"; | |
| const droneBtn = document.querySelector('[data-tab="tab-vision"]'); | |
| if (droneBtn) droneBtn.style.display = "none"; | |
| const settingsBtn = document.querySelector('[data-action="tab-settings"]'); | |
| if (settingsBtn) settingsBtn.style.display = "none"; | |
| const logoutBtn = $("dropdown-logout"); | |
| if (logoutBtn) logoutBtn.style.display = "none"; | |
| $("btn-telemetry").style.display = "none"; | |
| try { | |
| const r = await fetch(`./api/profiles/${id}`); | |
| if (r.ok) { | |
| currentProfile = await r.json(); | |
| updateProfileUI(); | |
| notify("Modo compartido", `Visualizando perfil de: ${currentProfile.display_name}`); | |
| } else { | |
| notify("Error", "No se pudo cargar el perfil compartido."); | |
| } | |
| } catch (e) { | |
| notify("Error de red", String(e)); | |
| } | |
| } | |
| function updateProfileUI() { | |
| if (currentProfile) { | |
| $("user-display-name").innerText = currentProfile.display_name; | |
| $("avatar-circle").innerText = currentProfile.display_name.slice(0, 2).toUpperCase(); | |
| $("settings-display-name").value = currentProfile.display_name; | |
| $("settings-session-mode").value = currentProfile.session_mode; | |
| let modeText = "Sesión efímera (BYOK)"; | |
| if (isSharedMode) { | |
| modeText = "Modo compartido (Lectura)"; | |
| } else if (currentProfile.session_mode === "saved") { | |
| modeText = "Modo guardado temporal"; | |
| } | |
| $("user-session-mode").innerText = modeText; | |
| // Sincronizar con widget flotante | |
| if ($("floating-user-name")) $("floating-user-name").innerText = currentProfile.display_name; | |
| if ($("floating-avatar")) $("floating-avatar").innerText = currentProfile.display_name.slice(0, 2).toUpperCase(); | |
| if ($("floating-user-email")) { | |
| $("floating-user-email").innerText = currentProfile.display_name.toLowerCase().replace(/\s+/g, "") === "alexprieto" | |
| ? "alexprieto1997@gmail.com" | |
| : `${currentProfile.display_name.toLowerCase().replace(/\s+/g, ".")}@agrovision.com`; | |
| } | |
| } else { | |
| $("user-display-name").innerText = "Agrónomo"; | |
| $("avatar-circle").innerText = "AG"; | |
| $("settings-display-name").value = "Agrónomo"; | |
| $("settings-session-mode").value = "ephemeral"; | |
| $("user-session-mode").innerText = "Sesión efímera (BYOK)"; | |
| // Valores por defecto para widget flotante | |
| if ($("floating-user-name")) $("floating-user-name").innerText = "Agrónomo"; | |
| if ($("floating-avatar")) $("floating-avatar").innerText = "AG"; | |
| if ($("floating-user-email")) $("floating-user-email").innerText = "alexprieto1997@gmail.com"; | |
| } | |
| } | |
| async function checkMissingCredentials() { | |
| try { | |
| const r = await fetch("./api/credentials/status", { headers: authHeaders() }); | |
| if (!r.ok) return; | |
| const s = await r.json(); | |
| appEnv = s.env || "development"; | |
| if (appEnv === "production") { | |
| const missing = []; | |
| const hasGroq = creds.groq || s.groq; | |
| const hasCop = (creds.copId && creds.copSecret) || s.copernicus; | |
| const hasSb = Boolean(creds.dbUrl || (creds.sbUrl && creds.sbKey) || s.supabase); | |
| if (!hasGroq) missing.push("Groq API Key"); | |
| if (!hasCop) missing.push("Copernicus Credentials"); | |
| if (!hasSb) missing.push("Supabase Connection"); | |
| const toast = $("creds-toast-warning"); | |
| if (missing.length > 0) { | |
| toast.innerHTML = `<div class="bg-amber-500 text-stone-950 p-4 rounded-xl shadow-2xl border border-amber-400 flex flex-col gap-2"> | |
| <div class="flex items-center gap-2"> | |
| <i class="fa-solid fa-triangle-exclamation text-lg"></i> | |
| <span class="font-bold text-xs">Faltan credenciales críticas:</span> | |
| </div> | |
| <p class="text-[10px] text-stone-900 leading-tight">Para la funcionalidad completa necesitas configurar: ${missing.join(", ")}.</p> | |
| <button onclick="switchTab('tab-config')" class="mt-1 bg-stone-900 text-amber-400 font-bold text-[10px] px-3 py-1.5 rounded-lg border border-stone-800 hover:bg-stone-800 transition-all"> | |
| Configurar Credenciales | |
| </button> | |
| </div>`; | |
| toast.classList.remove("hidden"); | |
| } else { | |
| toast.classList.add("hidden"); | |
| } | |
| } | |
| } catch {} | |
| } | |
| // ===== Sincronización del Selector de Parcela ===== | |
| $("select-parcela").addEventListener("change", async () => { | |
| const fid = $("select-parcela").value; | |
| if (fid) { | |
| localStorage.setItem("agrovision_last_field_id", fid); | |
| loadFieldAttributes(fid); | |
| syncSatelliteIndexControls(fid); | |
| if (profileId && !isSharedMode) { | |
| try { | |
| await api(`/profiles/${profileId}`, { | |
| method: "PATCH", | |
| body: JSON.stringify({ active_field_id: fid }) | |
| }); | |
| } catch {} | |
| } | |
| } else { | |
| clearFieldAttributes(); | |
| } | |
| const active = document.querySelector(".tab-content.active")?.id; | |
| if (active === "tab-satelite") loadTeledeteccion(); | |
| else if (active === "tab-weather") loadWeather(); | |
| else if (active === "tab-analysis") loadAnalysis(); | |
| else loadResumen(); | |
| }); | |
| (async function init() { | |
| track("session_start", { w: window.innerWidth, h: window.innerHeight }); | |
| const hashParams = new URLSearchParams(location.hash.slice(1)); | |
| const sharedProfileId = hashParams.get("profile"); | |
| try { | |
| const r = await fetch("./api/status"); | |
| backendOk = r.ok; | |
| $("db-status-text").innerText = backendOk ? "Backend conectado" : "Backend no disponible"; | |
| if (backendOk) { $("db-status-text").classList.replace("text-stone-400", "text-emerald-400"); } | |
| } catch { $("db-status-text").innerText = "Backend no disponible"; } | |
| try { | |
| const r = await fetch("./api/credentials/status"); | |
| if (r.ok) { | |
| const s = await r.json(); | |
| appEnv = s.env || "development"; | |
| if (appEnv === "production") { | |
| $("creds-production-warning").classList.remove("hidden"); | |
| $("btn-check-env").style.display = "none"; | |
| } | |
| } | |
| } catch {} | |
| if (sharedProfileId) { | |
| await loadSharedProfile(sharedProfileId); | |
| } else { | |
| const savedProfileId = localStorage.getItem("agrovision_profile_id"); | |
| if (savedProfileId) { | |
| try { | |
| const r = await fetch(`./api/profiles/${savedProfileId}`); | |
| if (r.ok) { | |
| currentProfile = await r.json(); | |
| profileId = currentProfile.id; | |
| updateProfileUI(); | |
| track("profile_reconnect_success", { profileId }); | |
| } else { | |
| localStorage.removeItem("agrovision_profile_id"); | |
| } | |
| } catch (e) { | |
| track("profile_reconnect_error", { error: String(e) }); | |
| } | |
| } else { | |
| await connectUserProfile(); | |
| } | |
| } | |
| updateStatus(); | |
| checkMissingCredentials(); | |
| await refreshParcels(); | |
| const lastFieldId = localStorage.getItem("agrovision_last_field_id") || (currentProfile ? currentProfile.active_field_id : null); | |
| if (lastFieldId && $("select-parcela").querySelector(`option[value="${lastFieldId}"]`)) { | |
| $("select-parcela").value = lastFieldId; | |
| loadFieldAttributes(lastFieldId); | |
| } | |
| const initialFieldId = $("select-parcela").value; | |
| if (initialFieldId) syncSatelliteIndexControls(initialFieldId); | |
| let initial = "tab-resumen"; | |
| if (location.hash && location.hash.startsWith("#tab-")) { | |
| initial = location.hash.slice(1); | |
| } | |
| switchTab(document.getElementById(initial) ? initial : "tab-resumen"); | |
| })(); | |