From c9efd095e74ce483bfc236338e3363da18adde8f Mon Sep 17 00:00:00 2001
From: Proddy <paul@derbyshire.nl>
Date: Wed, 3 Jan 2024 23:56:23 +0100
Subject: [PATCH] show network hostname in webui

---
 CHANGELOG_LATEST.md                                   |  1 +
 interface/src/framework/network/NetworkStatusForm.tsx | 10 ++++++++++
 lib/framework/NetworkStatus.cpp                       |  6 ++++--
 mock-api/Handler.ts                                   |  9 +++++----
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG_LATEST.md b/CHANGELOG_LATEST.md
index 802232884..f47f97d78 100644
--- a/CHANGELOG_LATEST.md
+++ b/CHANGELOG_LATEST.md
@@ -12,6 +12,7 @@
 - checkbox for MQTT-TLS enable [#1474](https://github.com/emsesp/EMS-ESP32/issues/1474)
 - added SK (Slovenian) language. Thanks @misa1515
 - CPU info [#1497](https://github.com/emsesp/EMS-ESP32/pull/1497)
+- Show network hostname in Web UI under Network Status
 
 ## Fixed
 
diff --git a/interface/src/framework/network/NetworkStatusForm.tsx b/interface/src/framework/network/NetworkStatusForm.tsx
index 9d94d2490..3a731c4ca 100644
--- a/interface/src/framework/network/NetworkStatusForm.tsx
+++ b/interface/src/framework/network/NetworkStatusForm.tsx
@@ -1,5 +1,6 @@
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DnsIcon from '@mui/icons-material/Dns';
+import GiteIcon from '@mui/icons-material/Gite';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
@@ -115,6 +116,15 @@ const NetworkStatusForm: FC = () => {
             <ListItemText primary="Status" secondary={networkStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+                <GiteIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Hostname" secondary={data.hostname} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
           {isWiFi(data) && (
             <>
               <ListItem>
diff --git a/lib/framework/NetworkStatus.cpp b/lib/framework/NetworkStatus.cpp
index 6aea4580f..546e7f8b5 100644
--- a/lib/framework/NetworkStatus.cpp
+++ b/lib/framework/NetworkStatus.cpp
@@ -19,9 +19,11 @@ void NetworkStatus::networkStatus(AsyncWebServerRequest * request) {
 
     // see if Ethernet is connected
     if (ethernet_connected) {
-        root["status"] = 10; // custom code #10 - ETHERNET_STATUS_CONNECTED
+        root["status"]   = 10; // custom code #10 - ETHERNET_STATUS_CONNECTED
+        root["hostname"] = ETH.getHostname();
     } else {
-        root["status"] = (uint8_t)wifi_status;
+        root["status"]   = (uint8_t)wifi_status;
+        root["hostname"] = WiFi.getHostname();
     }
 
     // for both connections show ethernet
diff --git a/mock-api/Handler.ts b/mock-api/Handler.ts
index fc519a0eb..13c39e707 100644
--- a/mock-api/Handler.ts
+++ b/mock-api/Handler.ts
@@ -249,7 +249,8 @@ const network_status = {
   subnet_mask: '255.255.255.0',
   gateway_ip: '10.10.10.1',
   dns_ip_1: '10.10.10.1',
-  dns_ip_2: '0.0.0.0'
+  dns_ip_2: '0.0.0.0',
+  hostname: 'ems-esp'
 };
 const list_networks = {
   networks: [
@@ -650,9 +651,9 @@ const emsesp_devices = {
 };
 
 const emsesp_coredata = {
-  connected: true,
-  // devices: [],
-  devices: [
+  connected: false,
+  devices: [],
+  devices2: [
     {
       id: 7,
       t: 4,