myio-js-library 0.1.64 → 0.1.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +50 -17
- package/dist/index.js +50 -17
- package/dist/myio-js-library.umd.js +50 -17
- package/dist/myio-js-library.umd.min.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2439,8 +2439,7 @@ function renderCardComponentV2({
|
|
|
2439
2439
|
deviceStatus,
|
|
2440
2440
|
centralName,
|
|
2441
2441
|
connectionStatusTime,
|
|
2442
|
-
timeVal
|
|
2443
|
-
valType
|
|
2442
|
+
timeVal
|
|
2444
2443
|
} = entityObject;
|
|
2445
2444
|
const MyIOToast = (function() {
|
|
2446
2445
|
let toastContainer = null;
|
|
@@ -2582,31 +2581,51 @@ function renderCardComponentV2({
|
|
|
2582
2581
|
};
|
|
2583
2582
|
const mapDeviceTypeToIcon = (deviceType2) => {
|
|
2584
2583
|
const typeMap = {
|
|
2584
|
+
"COMPRESSOR": "energy",
|
|
2585
|
+
"VENTILADOR": "energy",
|
|
2586
|
+
"ESCADA_ROLANTE": "energy",
|
|
2587
|
+
"ELEVADOR": "energy",
|
|
2585
2588
|
"MOTOR": "energy",
|
|
2586
2589
|
"3F_MEDIDOR": "energy",
|
|
2587
2590
|
"RELOGIO": "energy",
|
|
2588
|
-
"HIDROMETRO": "water",
|
|
2589
2591
|
"ENTRADA": "energy",
|
|
2592
|
+
"SUBESTACAO": "energy",
|
|
2593
|
+
"HIDROMETRO": "water",
|
|
2590
2594
|
"CAIXA_DAGUA": "water",
|
|
2591
2595
|
"TANK": "water"
|
|
2592
2596
|
};
|
|
2593
2597
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2594
2598
|
return typeMap[normalizedType] || "generic";
|
|
2595
2599
|
};
|
|
2596
|
-
const
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2600
|
+
const getValueTypeFromDeviceType = (deviceType2) => {
|
|
2601
|
+
const typeMap = {
|
|
2602
|
+
"COMPRESSOR": "ENERGY",
|
|
2603
|
+
"VENTILADOR": "ENERGY",
|
|
2604
|
+
"ESCADA_ROLANTE": "ENERGY",
|
|
2605
|
+
"ELEVADOR": "ENERGY",
|
|
2606
|
+
"MOTOR": "ENERGY",
|
|
2607
|
+
"3F_MEDIDOR": "ENERGY",
|
|
2608
|
+
"RELOGIO": "ENERGY",
|
|
2609
|
+
"ENTRADA": "ENERGY",
|
|
2610
|
+
"SUBESTACAO": "ENERGY",
|
|
2611
|
+
"HIDROMETRO": "WATER",
|
|
2612
|
+
"CAIXA_DAGUA": "WATER",
|
|
2613
|
+
"TANK": "TANK"
|
|
2614
|
+
};
|
|
2615
|
+
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2616
|
+
return typeMap[normalizedType] || "ENERGY";
|
|
2617
|
+
};
|
|
2618
|
+
const isEnergyDevice = (deviceType2) => {
|
|
2619
|
+
const energyDeviceTypes = ["COMPRESSOR", "VENTILADOR", "ESCADA_ROLANTE", "ELEVADOR", "MOTOR", "3F_MEDIDOR", "RELOGIO", "ENTRADA", "SUBESTACAO"];
|
|
2601
2620
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2602
2621
|
return energyDeviceTypes.includes(normalizedType);
|
|
2603
2622
|
};
|
|
2604
|
-
const formatCardValue = (value,
|
|
2623
|
+
const formatCardValue = (value, deviceType2) => {
|
|
2605
2624
|
const numValue = Number(value) || 0;
|
|
2606
|
-
if (isEnergyDevice(
|
|
2625
|
+
if (isEnergyDevice(deviceType2)) {
|
|
2607
2626
|
return formatEnergy(numValue);
|
|
2608
2627
|
} else {
|
|
2609
|
-
const unit = determineUnit(
|
|
2628
|
+
const unit = determineUnit(deviceType2);
|
|
2610
2629
|
const formattedValue = numValue.toLocaleString("pt-BR", {
|
|
2611
2630
|
minimumFractionDigits: 0,
|
|
2612
2631
|
maximumFractionDigits: 2
|
|
@@ -2614,8 +2633,9 @@ function renderCardComponentV2({
|
|
|
2614
2633
|
return `${formattedValue} ${unit}`;
|
|
2615
2634
|
}
|
|
2616
2635
|
};
|
|
2617
|
-
const determineUnit = (
|
|
2618
|
-
|
|
2636
|
+
const determineUnit = (deviceType2) => {
|
|
2637
|
+
const valueType = getValueTypeFromDeviceType(deviceType2);
|
|
2638
|
+
switch (valueType) {
|
|
2619
2639
|
case "ENERGY":
|
|
2620
2640
|
return "";
|
|
2621
2641
|
case "WATER":
|
|
@@ -2632,7 +2652,7 @@ function renderCardComponentV2({
|
|
|
2632
2652
|
icon: mapDeviceTypeToIcon(deviceType),
|
|
2633
2653
|
group: deviceIdentifier || entityType || "Dispositivo",
|
|
2634
2654
|
lastValue: Number(val) || 0,
|
|
2635
|
-
unit: determineUnit(
|
|
2655
|
+
unit: determineUnit(deviceType),
|
|
2636
2656
|
status: mapDeviceStatus(deviceStatus)
|
|
2637
2657
|
};
|
|
2638
2658
|
if (enableSelection && MyIOSelectionStore) {
|
|
@@ -2917,7 +2937,7 @@ function renderCardComponentV2({
|
|
|
2917
2937
|
<span class="flash-icon ${shouldFlashIcon ? "flash" : ""}">
|
|
2918
2938
|
${icon}
|
|
2919
2939
|
</span>
|
|
2920
|
-
<span class="consumption-value">${formatCardValue(cardEntity.lastValue,
|
|
2940
|
+
<span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
|
|
2921
2941
|
<span class="device-title-percent">(${perc.toFixed(1)}%)</span>
|
|
2922
2942
|
</div>
|
|
2923
2943
|
</div>
|
|
@@ -3230,9 +3250,22 @@ function renderCardComponentV2({
|
|
|
3230
3250
|
border-radius: 50%;
|
|
3231
3251
|
background: #22c55e;
|
|
3232
3252
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
3233
|
-
box-shadow:
|
|
3253
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
|
|
3254
|
+
0 1px 3px rgba(0, 0, 0, 0.1),
|
|
3255
|
+
inset 0 -2px 4px rgba(0, 0, 0, 0.1),
|
|
3256
|
+
inset 0 2px 3px rgba(255, 255, 255, 0.4) !important;
|
|
3234
3257
|
backdrop-filter: none !important;
|
|
3235
3258
|
z-index: 5;
|
|
3259
|
+
transform: translateZ(0);
|
|
3260
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
3261
|
+
}
|
|
3262
|
+
|
|
3263
|
+
.device-card-centered .connection-status-icon:hover {
|
|
3264
|
+
transform: translateZ(2px) scale(1.05);
|
|
3265
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
|
|
3266
|
+
0 2px 4px rgba(0, 0, 0, 0.12),
|
|
3267
|
+
inset 0 -2px 5px rgba(0, 0, 0, 0.15),
|
|
3268
|
+
inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
|
|
3236
3269
|
}
|
|
3237
3270
|
|
|
3238
3271
|
/* Map colors by connection or device state */
|
|
@@ -3371,7 +3404,7 @@ function renderCardComponentV2({
|
|
|
3371
3404
|
const infoBtn = document.createElement("button");
|
|
3372
3405
|
infoBtn.className = "card-action action-info";
|
|
3373
3406
|
infoBtn.title = "Informa\xE7\xF5es";
|
|
3374
|
-
infoBtn.innerHTML = "\
|
|
3407
|
+
infoBtn.innerHTML = "\u2139\uFE0F";
|
|
3375
3408
|
infoBtn.addEventListener("click", (e) => {
|
|
3376
3409
|
e.stopPropagation();
|
|
3377
3410
|
infoPanel.classList.toggle("active");
|
package/dist/index.js
CHANGED
|
@@ -2365,8 +2365,7 @@ function renderCardComponentV2({
|
|
|
2365
2365
|
deviceStatus,
|
|
2366
2366
|
centralName,
|
|
2367
2367
|
connectionStatusTime,
|
|
2368
|
-
timeVal
|
|
2369
|
-
valType
|
|
2368
|
+
timeVal
|
|
2370
2369
|
} = entityObject;
|
|
2371
2370
|
const MyIOToast = (function() {
|
|
2372
2371
|
let toastContainer = null;
|
|
@@ -2508,31 +2507,51 @@ function renderCardComponentV2({
|
|
|
2508
2507
|
};
|
|
2509
2508
|
const mapDeviceTypeToIcon = (deviceType2) => {
|
|
2510
2509
|
const typeMap = {
|
|
2510
|
+
"COMPRESSOR": "energy",
|
|
2511
|
+
"VENTILADOR": "energy",
|
|
2512
|
+
"ESCADA_ROLANTE": "energy",
|
|
2513
|
+
"ELEVADOR": "energy",
|
|
2511
2514
|
"MOTOR": "energy",
|
|
2512
2515
|
"3F_MEDIDOR": "energy",
|
|
2513
2516
|
"RELOGIO": "energy",
|
|
2514
|
-
"HIDROMETRO": "water",
|
|
2515
2517
|
"ENTRADA": "energy",
|
|
2518
|
+
"SUBESTACAO": "energy",
|
|
2519
|
+
"HIDROMETRO": "water",
|
|
2516
2520
|
"CAIXA_DAGUA": "water",
|
|
2517
2521
|
"TANK": "water"
|
|
2518
2522
|
};
|
|
2519
2523
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2520
2524
|
return typeMap[normalizedType] || "generic";
|
|
2521
2525
|
};
|
|
2522
|
-
const
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2526
|
+
const getValueTypeFromDeviceType = (deviceType2) => {
|
|
2527
|
+
const typeMap = {
|
|
2528
|
+
"COMPRESSOR": "ENERGY",
|
|
2529
|
+
"VENTILADOR": "ENERGY",
|
|
2530
|
+
"ESCADA_ROLANTE": "ENERGY",
|
|
2531
|
+
"ELEVADOR": "ENERGY",
|
|
2532
|
+
"MOTOR": "ENERGY",
|
|
2533
|
+
"3F_MEDIDOR": "ENERGY",
|
|
2534
|
+
"RELOGIO": "ENERGY",
|
|
2535
|
+
"ENTRADA": "ENERGY",
|
|
2536
|
+
"SUBESTACAO": "ENERGY",
|
|
2537
|
+
"HIDROMETRO": "WATER",
|
|
2538
|
+
"CAIXA_DAGUA": "WATER",
|
|
2539
|
+
"TANK": "TANK"
|
|
2540
|
+
};
|
|
2541
|
+
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2542
|
+
return typeMap[normalizedType] || "ENERGY";
|
|
2543
|
+
};
|
|
2544
|
+
const isEnergyDevice = (deviceType2) => {
|
|
2545
|
+
const energyDeviceTypes = ["COMPRESSOR", "VENTILADOR", "ESCADA_ROLANTE", "ELEVADOR", "MOTOR", "3F_MEDIDOR", "RELOGIO", "ENTRADA", "SUBESTACAO"];
|
|
2527
2546
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2528
2547
|
return energyDeviceTypes.includes(normalizedType);
|
|
2529
2548
|
};
|
|
2530
|
-
const formatCardValue = (value,
|
|
2549
|
+
const formatCardValue = (value, deviceType2) => {
|
|
2531
2550
|
const numValue = Number(value) || 0;
|
|
2532
|
-
if (isEnergyDevice(
|
|
2551
|
+
if (isEnergyDevice(deviceType2)) {
|
|
2533
2552
|
return formatEnergy(numValue);
|
|
2534
2553
|
} else {
|
|
2535
|
-
const unit = determineUnit(
|
|
2554
|
+
const unit = determineUnit(deviceType2);
|
|
2536
2555
|
const formattedValue = numValue.toLocaleString("pt-BR", {
|
|
2537
2556
|
minimumFractionDigits: 0,
|
|
2538
2557
|
maximumFractionDigits: 2
|
|
@@ -2540,8 +2559,9 @@ function renderCardComponentV2({
|
|
|
2540
2559
|
return `${formattedValue} ${unit}`;
|
|
2541
2560
|
}
|
|
2542
2561
|
};
|
|
2543
|
-
const determineUnit = (
|
|
2544
|
-
|
|
2562
|
+
const determineUnit = (deviceType2) => {
|
|
2563
|
+
const valueType = getValueTypeFromDeviceType(deviceType2);
|
|
2564
|
+
switch (valueType) {
|
|
2545
2565
|
case "ENERGY":
|
|
2546
2566
|
return "";
|
|
2547
2567
|
case "WATER":
|
|
@@ -2558,7 +2578,7 @@ function renderCardComponentV2({
|
|
|
2558
2578
|
icon: mapDeviceTypeToIcon(deviceType),
|
|
2559
2579
|
group: deviceIdentifier || entityType || "Dispositivo",
|
|
2560
2580
|
lastValue: Number(val) || 0,
|
|
2561
|
-
unit: determineUnit(
|
|
2581
|
+
unit: determineUnit(deviceType),
|
|
2562
2582
|
status: mapDeviceStatus(deviceStatus)
|
|
2563
2583
|
};
|
|
2564
2584
|
if (enableSelection && MyIOSelectionStore) {
|
|
@@ -2843,7 +2863,7 @@ function renderCardComponentV2({
|
|
|
2843
2863
|
<span class="flash-icon ${shouldFlashIcon ? "flash" : ""}">
|
|
2844
2864
|
${icon}
|
|
2845
2865
|
</span>
|
|
2846
|
-
<span class="consumption-value">${formatCardValue(cardEntity.lastValue,
|
|
2866
|
+
<span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
|
|
2847
2867
|
<span class="device-title-percent">(${perc.toFixed(1)}%)</span>
|
|
2848
2868
|
</div>
|
|
2849
2869
|
</div>
|
|
@@ -3156,9 +3176,22 @@ function renderCardComponentV2({
|
|
|
3156
3176
|
border-radius: 50%;
|
|
3157
3177
|
background: #22c55e;
|
|
3158
3178
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
3159
|
-
box-shadow:
|
|
3179
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
|
|
3180
|
+
0 1px 3px rgba(0, 0, 0, 0.1),
|
|
3181
|
+
inset 0 -2px 4px rgba(0, 0, 0, 0.1),
|
|
3182
|
+
inset 0 2px 3px rgba(255, 255, 255, 0.4) !important;
|
|
3160
3183
|
backdrop-filter: none !important;
|
|
3161
3184
|
z-index: 5;
|
|
3185
|
+
transform: translateZ(0);
|
|
3186
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
3187
|
+
}
|
|
3188
|
+
|
|
3189
|
+
.device-card-centered .connection-status-icon:hover {
|
|
3190
|
+
transform: translateZ(2px) scale(1.05);
|
|
3191
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
|
|
3192
|
+
0 2px 4px rgba(0, 0, 0, 0.12),
|
|
3193
|
+
inset 0 -2px 5px rgba(0, 0, 0, 0.15),
|
|
3194
|
+
inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
|
|
3162
3195
|
}
|
|
3163
3196
|
|
|
3164
3197
|
/* Map colors by connection or device state */
|
|
@@ -3297,7 +3330,7 @@ function renderCardComponentV2({
|
|
|
3297
3330
|
const infoBtn = document.createElement("button");
|
|
3298
3331
|
infoBtn.className = "card-action action-info";
|
|
3299
3332
|
infoBtn.title = "Informa\xE7\xF5es";
|
|
3300
|
-
infoBtn.innerHTML = "\
|
|
3333
|
+
infoBtn.innerHTML = "\u2139\uFE0F";
|
|
3301
3334
|
infoBtn.addEventListener("click", (e) => {
|
|
3302
3335
|
e.stopPropagation();
|
|
3303
3336
|
infoPanel.classList.toggle("active");
|
|
@@ -2371,8 +2371,7 @@
|
|
|
2371
2371
|
deviceStatus,
|
|
2372
2372
|
centralName,
|
|
2373
2373
|
connectionStatusTime,
|
|
2374
|
-
timeVal
|
|
2375
|
-
valType
|
|
2374
|
+
timeVal
|
|
2376
2375
|
} = entityObject;
|
|
2377
2376
|
const MyIOToast = (function() {
|
|
2378
2377
|
let toastContainer = null;
|
|
@@ -2508,31 +2507,51 @@
|
|
|
2508
2507
|
};
|
|
2509
2508
|
const mapDeviceTypeToIcon = (deviceType2) => {
|
|
2510
2509
|
const typeMap = {
|
|
2510
|
+
"COMPRESSOR": "energy",
|
|
2511
|
+
"VENTILADOR": "energy",
|
|
2512
|
+
"ESCADA_ROLANTE": "energy",
|
|
2513
|
+
"ELEVADOR": "energy",
|
|
2511
2514
|
"MOTOR": "energy",
|
|
2512
2515
|
"3F_MEDIDOR": "energy",
|
|
2513
2516
|
"RELOGIO": "energy",
|
|
2514
|
-
"HIDROMETRO": "water",
|
|
2515
2517
|
"ENTRADA": "energy",
|
|
2518
|
+
"SUBESTACAO": "energy",
|
|
2519
|
+
"HIDROMETRO": "water",
|
|
2516
2520
|
"CAIXA_DAGUA": "water",
|
|
2517
2521
|
"TANK": "water"
|
|
2518
2522
|
};
|
|
2519
2523
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2520
2524
|
return typeMap[normalizedType] || "generic";
|
|
2521
2525
|
};
|
|
2522
|
-
const
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2526
|
+
const getValueTypeFromDeviceType = (deviceType2) => {
|
|
2527
|
+
const typeMap = {
|
|
2528
|
+
"COMPRESSOR": "ENERGY",
|
|
2529
|
+
"VENTILADOR": "ENERGY",
|
|
2530
|
+
"ESCADA_ROLANTE": "ENERGY",
|
|
2531
|
+
"ELEVADOR": "ENERGY",
|
|
2532
|
+
"MOTOR": "ENERGY",
|
|
2533
|
+
"3F_MEDIDOR": "ENERGY",
|
|
2534
|
+
"RELOGIO": "ENERGY",
|
|
2535
|
+
"ENTRADA": "ENERGY",
|
|
2536
|
+
"SUBESTACAO": "ENERGY",
|
|
2537
|
+
"HIDROMETRO": "WATER",
|
|
2538
|
+
"CAIXA_DAGUA": "WATER",
|
|
2539
|
+
"TANK": "TANK"
|
|
2540
|
+
};
|
|
2541
|
+
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2542
|
+
return typeMap[normalizedType] || "ENERGY";
|
|
2543
|
+
};
|
|
2544
|
+
const isEnergyDevice = (deviceType2) => {
|
|
2545
|
+
const energyDeviceTypes = ["COMPRESSOR", "VENTILADOR", "ESCADA_ROLANTE", "ELEVADOR", "MOTOR", "3F_MEDIDOR", "RELOGIO", "ENTRADA", "SUBESTACAO"];
|
|
2527
2546
|
const normalizedType = deviceType2?.toUpperCase() || "";
|
|
2528
2547
|
return energyDeviceTypes.includes(normalizedType);
|
|
2529
2548
|
};
|
|
2530
|
-
const formatCardValue = (value,
|
|
2549
|
+
const formatCardValue = (value, deviceType2) => {
|
|
2531
2550
|
const numValue = Number(value) || 0;
|
|
2532
|
-
if (isEnergyDevice(
|
|
2551
|
+
if (isEnergyDevice(deviceType2)) {
|
|
2533
2552
|
return formatEnergy(numValue);
|
|
2534
2553
|
} else {
|
|
2535
|
-
const unit = determineUnit(
|
|
2554
|
+
const unit = determineUnit(deviceType2);
|
|
2536
2555
|
const formattedValue = numValue.toLocaleString("pt-BR", {
|
|
2537
2556
|
minimumFractionDigits: 0,
|
|
2538
2557
|
maximumFractionDigits: 2
|
|
@@ -2540,8 +2559,9 @@
|
|
|
2540
2559
|
return `${formattedValue} ${unit}`;
|
|
2541
2560
|
}
|
|
2542
2561
|
};
|
|
2543
|
-
const determineUnit = (
|
|
2544
|
-
|
|
2562
|
+
const determineUnit = (deviceType2) => {
|
|
2563
|
+
const valueType = getValueTypeFromDeviceType(deviceType2);
|
|
2564
|
+
switch (valueType) {
|
|
2545
2565
|
case "ENERGY":
|
|
2546
2566
|
return "";
|
|
2547
2567
|
case "WATER":
|
|
@@ -2558,7 +2578,7 @@
|
|
|
2558
2578
|
icon: mapDeviceTypeToIcon(deviceType),
|
|
2559
2579
|
group: deviceIdentifier || entityType || "Dispositivo",
|
|
2560
2580
|
lastValue: Number(val) || 0,
|
|
2561
|
-
unit: determineUnit(
|
|
2581
|
+
unit: determineUnit(deviceType),
|
|
2562
2582
|
status: mapDeviceStatus(deviceStatus)
|
|
2563
2583
|
};
|
|
2564
2584
|
if (enableSelection && MyIOSelectionStore) {
|
|
@@ -2843,7 +2863,7 @@
|
|
|
2843
2863
|
<span class="flash-icon ${shouldFlashIcon ? "flash" : ""}">
|
|
2844
2864
|
${icon}
|
|
2845
2865
|
</span>
|
|
2846
|
-
<span class="consumption-value">${formatCardValue(cardEntity.lastValue,
|
|
2866
|
+
<span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
|
|
2847
2867
|
<span class="device-title-percent">(${perc.toFixed(1)}%)</span>
|
|
2848
2868
|
</div>
|
|
2849
2869
|
</div>
|
|
@@ -3156,9 +3176,22 @@
|
|
|
3156
3176
|
border-radius: 50%;
|
|
3157
3177
|
background: #22c55e;
|
|
3158
3178
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
3159
|
-
box-shadow:
|
|
3179
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
|
|
3180
|
+
0 1px 3px rgba(0, 0, 0, 0.1),
|
|
3181
|
+
inset 0 -2px 4px rgba(0, 0, 0, 0.1),
|
|
3182
|
+
inset 0 2px 3px rgba(255, 255, 255, 0.4) !important;
|
|
3160
3183
|
backdrop-filter: none !important;
|
|
3161
3184
|
z-index: 5;
|
|
3185
|
+
transform: translateZ(0);
|
|
3186
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
3187
|
+
}
|
|
3188
|
+
|
|
3189
|
+
.device-card-centered .connection-status-icon:hover {
|
|
3190
|
+
transform: translateZ(2px) scale(1.05);
|
|
3191
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
|
|
3192
|
+
0 2px 4px rgba(0, 0, 0, 0.12),
|
|
3193
|
+
inset 0 -2px 5px rgba(0, 0, 0, 0.15),
|
|
3194
|
+
inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
|
|
3162
3195
|
}
|
|
3163
3196
|
|
|
3164
3197
|
/* Map colors by connection or device state */
|
|
@@ -3297,7 +3330,7 @@
|
|
|
3297
3330
|
const infoBtn = document.createElement("button");
|
|
3298
3331
|
infoBtn.className = "card-action action-info";
|
|
3299
3332
|
infoBtn.title = "Informa\xE7\xF5es";
|
|
3300
|
-
infoBtn.innerHTML = "\
|
|
3333
|
+
infoBtn.innerHTML = "\u2139\uFE0F";
|
|
3301
3334
|
infoBtn.addEventListener("click", (e) => {
|
|
3302
3335
|
e.stopPropagation();
|
|
3303
3336
|
infoPanel.classList.toggle("active");
|