20240507

Web UI: - Add CC2652 role select dialog on Zigbee page - Add Thread section to Zigbee firmware version select dialog Code:
xyzroe · May 7, 2024 · d299587 · d299587
1 parent b86f00d
commit d299587
Show file tree

Hide file tree

Showing 18 changed files with 380 additions and 39 deletions.
diff --git a/bin/XZG_20240507.full.bin b/bin/XZG_20240507.full.bin
diff --git a/bin/XZG_20240507.ota.bin b/bin/XZG_20240507.ota.bin
diff --git a/src/websrc/css/custom.css b/src/websrc/css/custom.css
@@ -563,4 +563,64 @@ body {
 
 .modal {
   --bs-modal-width: 600px !important;
+}
+
+.zb_cards {
+  --thread-color: 0, 0, 255;
+  --router-color: 0, 255, 0;
+  --coordinator-color: 255, 0, 0;
+  --default-opacity: 0.25;
+  --selected-opacity: 1.0;
+}
+
+.selectable-card {
+  cursor: pointer;
+  width: 100%;
+  padding-bottom: 100%;
+  position: relative;
+  border: 3px solid var(--card-background-color) !important;
+  border-radius: 1.2em !important;
+  transition: background-color 0.5s, border-color 0.25s;
+}
+
+.selectable-card .card-body {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.large-icon {
+  width: 3em;
+  height: 3em;
+  margin-bottom: 1em;
+}
+
+.card-label {
+  display: block;
+  font-size: 1.2em;
+  font-weight: bolder;
+}
+
+.selectable-card.selected, .selectable-card:hover {
+  border: 3px solid var(--text-color) !important;
+}
+
+.zfs_thread {
+  background-color: rgba(var(--thread-color), var(--default-opacity)) !important; 
+}
+.zfs_thread.selected, .zfs_thread:hover {
+  background-color: rgba(var(--thread-color), var(--selected-opacity)) !important;
+}
+.zfs_router {
+  background-color: rgba(var(--router-color), var(--default-opacity)) !important; 
+}
+.zfs_router.selected, .zfs_router:hover {
+  background-color: rgba(var(--router-color), var(--selected-opacity)) !important; 
+}
+.zfs_coordinator {
+  background-color: rgba(var(--coordinator-color), var(--default-opacity)) !important; 
+}
+.zfs_coordinator.selected, .zfs_coordinator:hover {
+  background-color: rgba(var(--coordinator-color), var(--selected-opacity)) !important; 
 }
diff --git a/src/websrc/html/PAGE_ZIGBEE.html b/src/websrc/html/PAGE_ZIGBEE.html
@@ -1,4 +1,119 @@
 <div id='main'>
+    <div class="col-12 cardPadding">
+        <div class='card'>
+            <div class="card-header fw-bold">
+                <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
+                    <use xlink:href="icons.svg#exclamation-triangle" />
+                </svg>
+                <span data-i18n="p.zi.fws.tt"></span>
+            </div>
+            <div class='card-body'>
+                <div class='col-sm-12'>
+                    <div class="alert alert-danger" role="alert" id="apAlert" data-i18n="p.zi.fws.alarm">
+                    </div>
+                    <div class="row justify-content-center my-4 zb_cards">
+                        <div class="col-2">
+                            <div class="card selectable-card zfs_coordinator">
+                                <div class="card-body text-center card-label">
+                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
+                                        <use xlink:href="icons.svg#zigbee" />
+                                    </svg>
+                                    <span>Coordinator</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-1"></div>
+                        <div class="col-2">
+                            <div class="card selectable-card zfs_router">
+                                <div class="card-body text-center card-label">
+                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
+                                        <use xlink:href="icons.svg#zigbee" />
+                                    </svg>
+                                    <span>Router</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-1"></div>
+                        <div class="col-2">
+                            <div class="card selectable-card zfs_thread">
+                                <div class="card-body text-center card-label">
+                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
+                                        <use xlink:href="icons.svg#thread" />
+                                    </svg>
+                                    <span>OpenThread</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 d-flex justify-content-center">
+                    <button class="btn btn-warning col-6" id="zbMode" onclick="getSelectedCard()" data-i18n="c.sure"
+                        disabled></button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.querySelectorAll('.selectable-card').forEach(card => {
+            card.addEventListener('click', function () {
+                document.querySelectorAll('.selectable-card').forEach(card => card.classList.remove('selected'));
+                this.classList.add('selected');
+
+                const zbModeButton = document.getElementById('zbMode');
+                if (zbModeButton) {
+                    zbModeButton.disabled = false;
+                }
+            });
+        });
+
+        function getSelectedCard() {
+            const selectedCard = document.querySelector('.selectable-card.selected');
+            if (!selectedCard) {
+                console.log("No card selected.");
+                return;
+            }
+
+            const classToFwMap = {
+                "coordinator": "coordinator",
+                "router": "router",
+                "thread": "thread"
+            };
+
+            const classToErrorMessage = {
+                "coordinator": i18next.t('md.zb.ncf'),
+                "router": i18next.t('md.zb.nrf'),
+                "thread": i18next.t('md.zb.ntf')
+            };
+
+            $.get(zbFwInfoUrl)
+                .then(data => JSON.parse(data))
+                .then(json => {
+                    return $.get(apiLink + api.actions.API_GET_PARAM + "&param=zbHwVer")
+                        .then(chip => findAllVersionsSorted(json, chip));
+                })
+                .then(fw => {
+                    const matchedClass = Object.keys(classToFwMap).find(cls => selectedCard.className.includes(cls));
+
+                    if (matchedClass && fw[classToFwMap[matchedClass]] && fw[classToFwMap[matchedClass]].length > 0) {
+                        const fileLink = fw[classToFwMap[matchedClass]][0].link;
+                        console.log(fileLink);
+                        modalConstructor("flashZBM");
+                        startZbFlash(fileLink);
+                    } else {
+                        const errorMessage = classToErrorMessage[matchedClass] || "No matching firmware available.";
+                        console.log(errorMessage);
+                        toastConstructor("noZbFw", errorMessage);
+                    }
+                })
+                .fail(error => {
+                    toastConstructor("noZbFw", "Error retrieving firmware data.");
+                    console.error(error);
+                });
+        }
+
+
+
+    </script>
     <div class="col-12 cardPadding">
         <div class='card'>
             <div class="card-header fw-bold">
@@ -67,8 +182,8 @@
                         <div class='col-sm-12 col-md-6 mb-4'>
                             <div class='form-group'>
                                 <label for='port' data-i18n="p.zi.sp"></label>
-                                <input data-r2v="socketPort" class='form-control' id='port' type='number'
-                                    name='port' min='100' max='65000'>
+                                <input data-r2v="socketPort" class='form-control' id='port' type='number' name='port'
+                                    min='100' max='65000'>
                             </div>
                         </div>
                     </div>

diff --git a/src/websrc/img/icons.svg b/src/websrc/img/icons.svg
diff --git a/src/websrc/js/functions.js b/src/websrc/js/functions.js
@@ -1172,7 +1172,6 @@ function toastConstructor(params, text) {
 				click: function () {
 					var url = "https://t.me/xzg_fw";
 					window.open(url, '_blank');
-					//$('.toast').toast('hide');
 				}
 			}).appendTo("#toastButtons");
 			$('<button>', {
@@ -1197,6 +1196,21 @@ function toastConstructor(params, text) {
 				}
 			}).appendTo("#toastButtons");
 			break;
+		case "noZbFw":
+			$("#toastHeaderText").text(i18next.t("ts.zb.nzfa.tt"));
+			$("#toastBody").text(text); //		$("#toastBody").text(i18next.t("ts.zb.nzfa.msg"));
+			$('<button>', {
+				type: "button",
+				"class": "btn btn-outline-primary",
+				text: i18next.t("c.cl"),
+				click: function () {
+					$('.toast').toast('hide');
+				}
+			}).appendTo("#toastButtons");
+			setTimeout(function () {
+				$('.toast').toast('hide');
+			}, 10000);
+			break;
 		default:
 			break;
 	}
@@ -1389,6 +1403,12 @@ function startZbFlash(link) {
 		class: "my-1 text-sm-center text-danger"
 	}).appendTo(modalBody);
 
+	let fileName = fileFromUrl(link);
+	$("<div>", {
+		text: fileName,
+		class: "my-1 text-sm-center"
+	}).appendTo(modalBody);
+
 	modalAddCancel();
 	$('<button>', {
 		type: "button",
@@ -1497,14 +1517,18 @@ function findLatestVersions(data, deviceName) {
 	return result;
 }
 
-function findAllVersionsSorted(data, deviceName) {
-	const categories = ['router', 'coordinator'];
+function findAllVersionsSorted(data, chip) {
+	const categories = ['router', 'coordinator', 'thread'];
 	const result = {};
 
+	const chipMap = { "CC2652P": "CC2652P2_launchpad", "CC2652P7": "CC2652P7", "CC2652RB": "CC2652RB" };
+	const deviceName = chipMap[chip];
+	if (!deviceName) throw new Error("Unsupported chip type or deviceName not set.");
+
 	categories.forEach(category => {
 		if (data[category]) {
 			Object.keys(data[category]).forEach(subCategory => {
-				if (subCategory.startsWith(deviceName)) {
+				if (subCategory == deviceName) {
 					Object.keys(data[category][subCategory]).forEach(file => {
 						const fileInfo = data[category][subCategory][file];
 						if (!result[category]) {
@@ -1538,12 +1562,16 @@ function createReleaseBlock(file, deviceType) {
 
 	if (deviceType == 1) {
 		deviceName = i18next.t('md.zb.dtc');
-		buttonClass = "btn btn-outline-success";
+		buttonClass = "btn btn-outline-danger";
 		deviceIcon = "📡";
 	} else if (deviceType == 2) {
 		deviceName = i18next.t('md.zb.dtr');
-		buttonClass = "btn btn-outline-danger";
+		buttonClass = "btn btn-outline-success";
 		deviceIcon = "🛰️";
+	} else if (deviceType == 3) {
+		deviceName = i18next.t('md.zb.dtt');
+		buttonClass = "btn btn-outline-primary";
+		deviceIcon = "🚀";
 	}
 
 	const releaseBlock = $("<div>", { "class": "release-block", "style": "margin-bottom: 20px;" });
@@ -1676,40 +1704,44 @@ function modalConstructor(type, params) {
 				console.error("Failed to fetch release data:", t)
 			})
 			break;
-		case "flashZB":
+		case "flashZBM":
 			$(headerText).text(i18next.t('md.zb.ot')).css("color", "red");
+			break;
 
+		case "flashZB":
+			$(headerText).text(i18next.t('md.zb.ot')).css("color", "red");
 
 			$(modalBody).html(i18next.t('md.zb.rfm'));
 			modalAddSpiner();
 
 			$.get(zbFwInfoUrl).then(data => {
 				const json = JSON.parse(data);
 				return $.get(apiLink + api.actions.API_GET_PARAM + "&param=zbHwVer").then(chip => {
-					const chipMap = { "CC2652P": "CC1352P2_CC2652P_launchpad", "CC2652P7": "CC1352P7" };
-					const fwNameChip = chipMap[chip];
-					if (!fwNameChip) throw new Error("Unsupported chip type or fwNameChip not set.");
-					return findAllVersionsSorted(json, fwNameChip);
+					return findAllVersionsSorted(json, chip);
 				});
 			}).then(fw => {
 				$(modalBody).html("");
 				$(modalBtns).html("");
 				modalAddClose();
 
-				// Check if there are any coordinators and append them
 				if (fw.coordinator && fw.coordinator.length > 0) {
 					fw.coordinator.forEach(file => createReleaseBlock(file, 1).appendTo(".modal-body"));
 				} else {
 					$("<div>", { "text": i18next.t('md.zb.ncf'), "class": "alert alert-warning" }).appendTo(".modal-body");
 				}
 
-				// Check if there are any routers and append them
 				if (fw.router && fw.router.length > 0) {
 					fw.router.forEach(file => createReleaseBlock(file, 2).appendTo(".modal-body"));
 				} else {
 					$("<div>", { "text": i18next.t('md.zb.nrf'), "class": "alert alert-warning" }).appendTo(".modal-body");
 				}
 
+				if (fw.thread && fw.thread.length > 0) {
+					fw.thread.forEach(file => createReleaseBlock(file, 3).appendTo(".modal-body"));
+				} else {
+					$("<div>", { "text": i18next.t('md.zb.ntf'), "class": "alert alert-warning" }).appendTo(".modal-body");
+				}
+
 			}).fail(error => {
 				$(modalBody).html(i18next.t('md.zb.efr')).css("color", "red");
 				$(modalBtns).html("");
@@ -2172,7 +2204,7 @@ function readFile(event, file) {
 function delFile(event, file) {
 	event.preventDefault();
 	$("#config_file").val("Deleted file: " + file);
-	$.get(apiLink + api.actions.API_DEL_FILE + "&filename=" + file, function (data) {});
+	$.get(apiLink + api.actions.API_DEL_FILE + "&filename=" + file, function (data) { });
 }
 
 function logRefresh(ms) {

diff --git a/src/websrc/json/de.json b/src/websrc/json/de.json
@@ -83,7 +83,9 @@
       "ncf": "Keine Koordinator-Firmware verfügbar.",
       "nrf": "Keine Router-Firmware verfügbar.",
       "ot": "Zigbee OTA-Update",
-      "rfm": "Firmware-Informationen werden abgerufen..."
+      "rfm": "Firmware-Informationen werden abgerufen...",
+      "dtt": "OpenThread",
+      "ntf": "Die Thread-Firmware fehlt."
     },
     "kw": {
       "msg": "Mit dieser Funktion können Sie einen der Kommunikationskanäle aktiv lassen und auf die Weboberfläche zugreifen. \nDas Gerät selbst wählt je nach Priorität einen verfügbaren Kanal aus: WIFI, ETHERNET, WIFI AP"
@@ -366,7 +368,11 @@
       },
       "so": "Serielle Konfiguration",
       "sp": "Socket-Anschluss",
-      "ss": "Socket-Geschwindigkeit"
+      "ss": "Socket-Geschwindigkeit",
+      "fws": {
+        "alarm": "Das Ändern der Firmware in einem laufenden Netzwerk führt zum Netzwerkausfall!",
+        "tt": "Rolle"
+      }
     },
     "ab": {
       "c": {
@@ -418,6 +424,11 @@
         "msg": "Neue Firmware ({{ver}}) wurde auf GitHub gefunden. \nEs wurde {{count}} Mal heruntergeladen.",
         "tt": "ESP32-Update verfügbar 🚀"
       }
+    },
+    "zb": {
+      "nzfa": {
+        "tt": "Keine Firmware gefunden"
+      }
     }
   }
 }