myio-js-library 0.1.141 → 0.1.142

package/dist/myio-js-library.umd.js

@@ -17972,13 +17972,13 @@ ${rangeText}`;
     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();
@@ -19978,8 +19978,12 @@ ${rangeText}`;
     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);
@@ -20320,8 +20324,10 @@ ${rangeText}`;
       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");
@@ -20717,16 +20723,52 @@ ${rangeText}`;
       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);
@@ -20766,6 +20808,41 @@ ${rangeText}`;
       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;
@@ -21086,6 +21163,532 @@ ${rangeText}`;
     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 };
+  }
+
   exports.CHART_COLORS = CHART_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
   exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
@@ -21172,6 +21775,7 @@ ${rangeText}`;
   exports.openRealTimeTelemetryModal = openRealTimeTelemetryModal;
   exports.openTemperatureComparisonModal = openTemperatureComparisonModal;
   exports.openTemperatureModal = openTemperatureModal;
+  exports.openTemperatureSettingsModal = openTemperatureSettingsModal;
   exports.parseInputDateToDate = parseInputDateToDate;
   exports.renderCardComponent = renderCardComponent;
   exports.renderCardComponentEnhanced = renderCardComponent2;