myio-js-library 0.1.141 → 0.1.142

package/dist/index.js

@@ -18148,13 +18148,13 @@ function openGoalsPanel(params) {
   function initializeModal() {
     if (data) {
       modalState.goalsData = data;
-      renderModal3();
+      renderModal4();
     } else {
-      renderModal3();
+      renderModal4();
       loadGoalsData();
     }
   }
-  function renderModal3() {
+  function renderModal4() {
     const existing = document.getElementById("myio-goals-panel-modal");
     if (existing) {
       existing.remove();
@@ -20154,8 +20154,12 @@ function drawChart(modalId, state) {
   const paddingBottom = 55;
   const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
   const values = chartData.map((d) => d.y);
-  const minY = Math.min(...values) - 1;
-  const maxY = Math.max(...values) + 1;
+  const dataMin = Math.min(...values);
+  const dataMax = Math.max(...values);
+  const thresholdMin = state.temperatureMin !== null ? state.temperatureMin : dataMin;
+  const thresholdMax = state.temperatureMax !== null ? state.temperatureMax : dataMax;
+  const minY = Math.min(dataMin, thresholdMin) - 1;
+  const maxY = Math.max(dataMax, thresholdMax) + 1;
   const chartWidth = width - paddingLeft - paddingRight;
   const chartHeight = height - paddingTop - paddingBottom;
   const scaleY = chartHeight / (maxY - minY || 1);
@@ -20496,8 +20500,10 @@ async function openTemperatureComparisonModal(params) {
     deviceData: [],
     isLoading: true,
     dateRangePicker: null,
-    selectedPeriods: ["madrugada", "manha", "tarde", "noite"]
+    selectedPeriods: ["madrugada", "manha", "tarde", "noite"],
     // All periods selected by default
+    temperatureMin: params.temperatureMin ?? null,
+    temperatureMax: params.temperatureMax ?? null
   };
   const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
   const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
@@ -20893,16 +20899,52 @@ function drawComparisonChart(modalId, state) {
     return;
   }
   const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
-  let globalMinY = Infinity;
-  let globalMaxY = -Infinity;
+  let dataMinY = Infinity;
+  let dataMaxY = -Infinity;
   processedData.forEach(({ points }) => {
     points.forEach((point) => {
-      if (point.y < globalMinY) globalMinY = point.y;
-      if (point.y > globalMaxY) globalMaxY = point.y;
+      if (point.y < dataMinY) dataMinY = point.y;
+      if (point.y > dataMaxY) dataMaxY = point.y;
+    });
+  });
+  const rangeMap = /* @__PURE__ */ new Map();
+  state.deviceData.forEach((dd, index) => {
+    const device = dd.device;
+    const min = device.temperatureMin;
+    const max = device.temperatureMax;
+    if (min !== void 0 && min !== null && max !== void 0 && max !== null) {
+      const key = `${min}-${max}`;
+      if (!rangeMap.has(key)) {
+        rangeMap.set(key, {
+          min,
+          max,
+          customerName: device.customerName || "",
+          color: CHART_COLORS[index % CHART_COLORS.length],
+          deviceLabels: [device.label]
+        });
+      } else {
+        rangeMap.get(key).deviceLabels.push(device.label);
+      }
+    }
+  });
+  if (rangeMap.size === 0 && state.temperatureMin !== null && state.temperatureMax !== null) {
+    rangeMap.set("global", {
+      min: state.temperatureMin,
+      max: state.temperatureMax,
+      customerName: "Global",
+      color: colors.success,
+      deviceLabels: []
     });
+  }
+  const temperatureRanges = Array.from(rangeMap.values());
+  let thresholdMinY = dataMinY;
+  let thresholdMaxY = dataMaxY;
+  temperatureRanges.forEach((range) => {
+    if (range.min < thresholdMinY) thresholdMinY = range.min;
+    if (range.max > thresholdMaxY) thresholdMaxY = range.max;
   });
-  globalMinY = Math.floor(globalMinY) - 1;
-  globalMaxY = Math.ceil(globalMaxY) + 1;
+  const globalMinY = Math.floor(Math.min(dataMinY, thresholdMinY)) - 1;
+  const globalMaxY = Math.ceil(Math.max(dataMaxY, thresholdMaxY)) + 1;
   const chartWidth = width - paddingLeft - paddingRight;
   const chartHeight = height - paddingTop - paddingBottom;
   const scaleY = chartHeight / (globalMaxY - globalMinY || 1);
@@ -20942,6 +20984,41 @@ function drawComparisonChart(modalId, state) {
     ctx.lineTo(width - paddingRight, y);
     ctx.stroke();
   }
+  const rangeColors = [
+    { fill: "rgba(76, 175, 80, 0.12)", stroke: "#4CAF50" },
+    // Green
+    { fill: "rgba(33, 150, 243, 0.12)", stroke: "#2196F3" },
+    // Blue
+    { fill: "rgba(255, 152, 0, 0.12)", stroke: "#FF9800" },
+    // Orange
+    { fill: "rgba(156, 39, 176, 0.12)", stroke: "#9C27B0" }
+    // Purple
+  ];
+  temperatureRanges.forEach((range, index) => {
+    const rangeMinY = height - paddingBottom - (range.min - globalMinY) * scaleY;
+    const rangeMaxY = height - paddingBottom - (range.max - globalMinY) * scaleY;
+    const colorSet = rangeColors[index % rangeColors.length];
+    ctx.fillStyle = colorSet.fill;
+    ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
+    ctx.strokeStyle = colorSet.stroke;
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, rangeMinY);
+    ctx.lineTo(width - paddingRight, rangeMinY);
+    ctx.moveTo(paddingLeft, rangeMaxY);
+    ctx.lineTo(width - paddingRight, rangeMaxY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    if (temperatureRanges.length > 1 || range.customerName) {
+      ctx.fillStyle = colorSet.stroke;
+      ctx.font = "10px system-ui, sans-serif";
+      ctx.textAlign = "left";
+      const labelY = (rangeMinY + rangeMaxY) / 2;
+      const labelText = range.customerName || `${range.min}\xB0-${range.max}\xB0C`;
+      ctx.fillText(labelText, width - paddingRight + 5, labelY + 3);
+    }
+  });
   processedData.forEach(({ device, points }) => {
     ctx.strokeStyle = device.color;
     ctx.lineWidth = 2.5;
@@ -21261,6 +21338,532 @@ function exportComparisonCSV(state) {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 }
+
+// src/components/temperature/TemperatureSettingsModal.ts
+var DARK_THEME2 = {
+  modalBg: "linear-gradient(180deg, #1e1e2e 0%, #151521 100%)",
+  headerBg: "#3e1a7d",
+  textPrimary: "#ffffff",
+  textSecondary: "rgba(255, 255, 255, 0.7)",
+  textMuted: "rgba(255, 255, 255, 0.5)",
+  inputBg: "rgba(255, 255, 255, 0.08)",
+  inputBorder: "rgba(255, 255, 255, 0.2)",
+  inputText: "#ffffff",
+  buttonPrimary: "#3e1a7d",
+  buttonPrimaryHover: "#5a2da8",
+  buttonSecondary: "rgba(255, 255, 255, 0.1)",
+  success: "#4CAF50",
+  error: "#f44336",
+  overlay: "rgba(0, 0, 0, 0.85)"
+};
+var LIGHT_THEME2 = {
+  modalBg: "#ffffff",
+  headerBg: "#3e1a7d",
+  textPrimary: "#1a1a2e",
+  textSecondary: "rgba(0, 0, 0, 0.7)",
+  textMuted: "rgba(0, 0, 0, 0.5)",
+  inputBg: "#f5f5f5",
+  inputBorder: "rgba(0, 0, 0, 0.2)",
+  inputText: "#1a1a2e",
+  buttonPrimary: "#3e1a7d",
+  buttonPrimaryHover: "#5a2da8",
+  buttonSecondary: "rgba(0, 0, 0, 0.05)",
+  success: "#4CAF50",
+  error: "#f44336",
+  overlay: "rgba(0, 0, 0, 0.5)"
+};
+function getColors(theme) {
+  return theme === "dark" ? DARK_THEME2 : LIGHT_THEME2;
+}
+async function fetchCustomerAttributes(customerId, token) {
+  const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE`;
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Authorization": `Bearer ${token}`
+    }
+  });
+  if (!response.ok) {
+    if (response.status === 404 || response.status === 400) {
+      return { minTemperature: null, maxTemperature: null };
+    }
+    throw new Error(`Failed to fetch attributes: ${response.status}`);
+  }
+  const attributes = await response.json();
+  let minTemperature = null;
+  let maxTemperature = null;
+  if (Array.isArray(attributes)) {
+    for (const attr of attributes) {
+      if (attr.key === "minTemperature") {
+        minTemperature = Number(attr.value);
+      } else if (attr.key === "maxTemperature") {
+        maxTemperature = Number(attr.value);
+      }
+    }
+  }
+  return { minTemperature, maxTemperature };
+}
+async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature) {
+  const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/SERVER_SCOPE`;
+  const attributes = {
+    minTemperature,
+    maxTemperature
+  };
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Authorization": `Bearer ${token}`
+    },
+    body: JSON.stringify(attributes)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to save attributes: ${response.status}`);
+  }
+}
+function renderModal3(container, state, modalId, onClose, onSave) {
+  const colors = getColors(state.theme);
+  const minValue = state.minTemperature !== null ? state.minTemperature : "";
+  const maxValue = state.maxTemperature !== null ? state.maxTemperature : "";
+  container.innerHTML = `
+    <style>
+      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+      #${modalId} {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: ${colors.overlay};
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: fadeIn 0.2s ease-out;
+      }
+
+      #${modalId} .modal-content {
+        background: ${colors.modalBg};
+        border-radius: 16px;
+        width: 90%;
+        max-width: 480px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        animation: slideIn 0.3s ease-out;
+        overflow: hidden;
+      }
+
+      #${modalId} .modal-header {
+        background: ${colors.headerBg};
+        padding: 20px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #${modalId} .modal-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      #${modalId} .close-btn {
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        color: #fff;
+        font-size: 18px;
+      }
+
+      #${modalId} .close-btn:hover {
+        background: rgba(255, 68, 68, 0.25);
+        border-color: rgba(255, 68, 68, 0.5);
+      }
+
+      #${modalId} .modal-body {
+        padding: 24px;
+      }
+
+      #${modalId} .customer-info {
+        margin-bottom: 24px;
+        padding: 12px 16px;
+        background: ${colors.inputBg};
+        border-radius: 8px;
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .customer-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 4px;
+      }
+
+      #${modalId} .customer-name {
+        font-size: 16px;
+        font-weight: 500;
+        color: ${colors.textPrimary};
+      }
+
+      #${modalId} .form-group {
+        margin-bottom: 20px;
+      }
+
+      #${modalId} .form-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${colors.textSecondary};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .form-input {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 16px;
+        background: ${colors.inputBg};
+        border: 1px solid ${colors.inputBorder};
+        border-radius: 8px;
+        color: ${colors.inputText};
+        outline: none;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+      }
+
+      #${modalId} .form-input:focus {
+        border-color: ${colors.buttonPrimary};
+      }
+
+      #${modalId} .form-input::placeholder {
+        color: ${colors.textMuted};
+      }
+
+      #${modalId} .form-hint {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-top: 6px;
+      }
+
+      #${modalId} .temperature-range {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+
+      #${modalId} .range-preview {
+        margin-top: 20px;
+        padding: 16px;
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px dashed ${colors.success};
+        border-radius: 8px;
+        text-align: center;
+      }
+
+      #${modalId} .range-preview-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .range-preview-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: ${colors.success};
+      }
+
+      #${modalId} .modal-footer {
+        padding: 16px 24px;
+        border-top: 1px solid ${colors.inputBorder};
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+      }
+
+      #${modalId} .btn {
+        padding: 10px 24px;
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      #${modalId} .btn-secondary {
+        background: ${colors.buttonSecondary};
+        color: ${colors.textSecondary};
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .btn-secondary:hover {
+        background: ${colors.inputBg};
+      }
+
+      #${modalId} .btn-primary {
+        background: ${colors.buttonPrimary};
+        color: #fff;
+      }
+
+      #${modalId} .btn-primary:hover {
+        background: ${colors.buttonPrimaryHover};
+      }
+
+      #${modalId} .btn-primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      #${modalId} .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255,255,255,0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      #${modalId} .message {
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 14px;
+      }
+
+      #${modalId} .message-error {
+        background: rgba(244, 67, 54, 0.1);
+        border: 1px solid ${colors.error};
+        color: ${colors.error};
+      }
+
+      #${modalId} .message-success {
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px solid ${colors.success};
+        color: ${colors.success};
+      }
+
+      #${modalId} .loading-overlay {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: ${colors.textSecondary};
+      }
+
+      #${modalId} .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid ${colors.inputBorder};
+        border-top-color: ${colors.buttonPrimary};
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 16px;
+      }
+    </style>
+
+    <div id="${modalId}" class="modal-overlay">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 class="modal-title">
+            <span>\u{1F321}\uFE0F</span>
+            Configurar Temperatura
+          </h2>
+          <button class="close-btn" id="${modalId}-close">&times;</button>
+        </div>
+
+        <div class="modal-body">
+          ${state.isLoading ? `
+            <div class="loading-overlay">
+              <div class="loading-spinner"></div>
+              <div>Carregando configura\xE7\xF5es...</div>
+            </div>
+          ` : `
+            ${state.error ? `
+              <div class="message message-error">${state.error}</div>
+            ` : ""}
+
+            ${state.successMessage ? `
+              <div class="message message-success">${state.successMessage}</div>
+            ` : ""}
+
+            <div class="customer-info">
+              <div class="customer-label">Shopping / Cliente</div>
+              <div class="customer-name">${state.customerName || "N\xE3o identificado"}</div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label">Faixa de Temperatura Ideal</label>
+              <div class="temperature-range">
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-min"
+                    class="form-input"
+                    placeholder="M\xEDnima"
+                    value="${minValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xEDnima (\xB0C)</div>
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-max"
+                    class="form-input"
+                    placeholder="M\xE1xima"
+                    value="${maxValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xE1xima (\xB0C)</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="range-preview" id="${modalId}-preview">
+              <div class="range-preview-label">Faixa configurada</div>
+              <div class="range-preview-value" id="${modalId}-preview-value">
+                ${minValue && maxValue ? `${minValue}\xB0C - ${maxValue}\xB0C` : "N\xE3o definida"}
+              </div>
+            </div>
+          `}
+        </div>
+
+        ${!state.isLoading ? `
+          <div class="modal-footer">
+            <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
+            <button class="btn btn-primary" id="${modalId}-save" ${state.isSaving ? "disabled" : ""}>
+              ${state.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            </button>
+          </div>
+        ` : ""}
+      </div>
+    </div>
+  `;
+  const closeBtn = document.getElementById(`${modalId}-close`);
+  const cancelBtn = document.getElementById(`${modalId}-cancel`);
+  const saveBtn = document.getElementById(`${modalId}-save`);
+  const minInput = document.getElementById(`${modalId}-min`);
+  const maxInput = document.getElementById(`${modalId}-max`);
+  const previewValue = document.getElementById(`${modalId}-preview-value`);
+  const overlay = document.getElementById(modalId);
+  closeBtn?.addEventListener("click", onClose);
+  cancelBtn?.addEventListener("click", onClose);
+  overlay?.addEventListener("click", (e) => {
+    if (e.target === overlay) onClose();
+  });
+  const updatePreview = () => {
+    if (previewValue && minInput && maxInput) {
+      const min = minInput.value;
+      const max = maxInput.value;
+      if (min && max) {
+        previewValue.textContent = `${min}\xB0C - ${max}\xB0C`;
+      } else {
+        previewValue.textContent = "N\xE3o definida";
+      }
+    }
+  };
+  minInput?.addEventListener("input", updatePreview);
+  maxInput?.addEventListener("input", updatePreview);
+  saveBtn?.addEventListener("click", async () => {
+    if (!minInput || !maxInput) return;
+    const min = parseFloat(minInput.value);
+    const max = parseFloat(maxInput.value);
+    if (isNaN(min) || isNaN(max)) {
+      state.error = "Por favor, preencha ambos os valores.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    if (min >= max) {
+      state.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    if (min < 0 || max > 50) {
+      state.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    await onSave(min, max);
+  });
+}
+function openTemperatureSettingsModal(params) {
+  const modalId = `myio-temp-settings-${Date.now()}`;
+  const state = {
+    customerId: params.customerId,
+    customerName: params.customerName || "",
+    token: params.token,
+    theme: params.theme || "dark",
+    minTemperature: null,
+    maxTemperature: null,
+    isLoading: true,
+    isSaving: false,
+    error: null,
+    successMessage: null
+  };
+  const container = document.createElement("div");
+  container.id = `${modalId}-container`;
+  document.body.appendChild(container);
+  const destroy = () => {
+    container.remove();
+    params.onClose?.();
+  };
+  const handleSave = async (min, max) => {
+    state.isSaving = true;
+    state.error = null;
+    state.successMessage = null;
+    renderModal3(container, state, modalId, destroy, handleSave);
+    try {
+      await saveCustomerAttributes(state.customerId, state.token, min, max);
+      state.minTemperature = min;
+      state.maxTemperature = max;
+      state.isSaving = false;
+      state.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+      renderModal3(container, state, modalId, destroy, handleSave);
+      params.onSave?.({ minTemperature: min, maxTemperature: max });
+      setTimeout(() => {
+        destroy();
+      }, 1500);
+    } catch (error) {
+      state.isSaving = false;
+      state.error = `Erro ao salvar: ${error.message}`;
+      renderModal3(container, state, modalId, destroy, handleSave);
+    }
+  };
+  renderModal3(container, state, modalId, destroy, handleSave);
+  fetchCustomerAttributes(state.customerId, state.token).then(({ minTemperature, maxTemperature }) => {
+    state.minTemperature = minTemperature;
+    state.maxTemperature = maxTemperature;
+    state.isLoading = false;
+    renderModal3(container, state, modalId, destroy, handleSave);
+  }).catch((error) => {
+    state.isLoading = false;
+    state.error = `Erro ao carregar: ${error.message}`;
+    renderModal3(container, state, modalId, destroy, handleSave);
+  });
+  return { destroy };
+}
 export {
   CHART_COLORS,
   ConnectionStatusType,
@@ -21349,6 +21952,7 @@ export {
   openRealTimeTelemetryModal,
   openTemperatureComparisonModal,
   openTemperatureModal,
+  openTemperatureSettingsModal,
   parseInputDateToDate,
   renderCardComponent,
   renderCardComponent2 as renderCardComponentEnhanced,