From 5b411e292b27a156fd0a5beaa471f6d604cc26bd Mon Sep 17 00:00:00 2001
From: Lars Berger <lars.berger@yahoo.com>
Date: Wed, 11 Sep 2024 17:54:35 +0800
Subject: [PATCH] feat: show network status in examples

---
 examples/starter/styles.css         |  1 +
 examples/starter/vanilla.html       | 75 +++++++++++++++++++++++------
 examples/starter/with-glazewm.html  | 56 ++++++++++++++++++---
 examples/starter/with-komorebi.html | 56 ++++++++++++++++++---
 4 files changed, 160 insertions(+), 28 deletions(-)

diff --git a/examples/starter/styles.css b/examples/starter/styles.css
index a7ef7efc..a42fb93a 100644
--- a/examples/starter/styles.css
+++ b/examples/starter/styles.css
@@ -52,6 +52,7 @@ body,
 .logo,
 .binding-mode,
 .tiling-direction,
+.network,
 .memory,
 .cpu,
 .battery {
diff --git a/examples/starter/vanilla.html b/examples/starter/vanilla.html
index 0faa475d..825c3bad 100644
--- a/examples/starter/vanilla.html
+++ b/examples/starter/vanilla.html
@@ -28,21 +28,24 @@
 
       const zebarCtx = await init();
 
-      const [cpu, date, battery, memory, weather] = await Promise.all([
-        zebarCtx.createProvider({ type: 'cpu' }),
-        zebarCtx.createProvider({
-          type: 'date',
-          formatting: 'EEE d MMM t',
-        }),
-        zebarCtx.createProvider({ type: 'battery' }),
-        zebarCtx.createProvider({ type: 'memory' }),
-        zebarCtx.createProvider({ type: 'weather' }),
-      ]);
+      const [network, cpu, date, battery, memory, weather] =
+        await Promise.all([
+          zebarCtx.createProvider({ type: 'network' }),
+          zebarCtx.createProvider({ type: 'cpu' }),
+          zebarCtx.createProvider({
+            type: 'date',
+            formatting: 'EEE d MMM t',
+          }),
+          zebarCtx.createProvider({ type: 'battery' }),
+          zebarCtx.createProvider({ type: 'memory' }),
+          zebarCtx.createProvider({ type: 'weather' }),
+        ]);
 
       createRoot(document.getElementById('root')).render(<App />);
 
       function App() {
         const [outputs, setOutputs] = useState({
+          network: network.output,
           cpu: cpu.output,
           date: date.output,
           battery: battery.output,
@@ -51,6 +54,9 @@
         });
 
         useEffect(() => {
+          network.onOutput(network =>
+            setOutputs(outputs => ({ ...outputs, network })),
+          );
           cpu.onOutput(cpu =>
             setOutputs(outputs => ({ ...outputs, cpu })),
           );
@@ -68,6 +74,36 @@
           );
         }, []);
 
+        // Get icon to show for current network status.
+        function getNetworkIcon() {
+          switch (outputs.network.defaultInterface?.type) {
+            case 'ethernet':
+              return <i className="nf nf-md-ethernet_cable"></i>;
+            case 'wifi':
+              if (outputs.network.defaultGateway?.signalStrength >= 80) {
+                return <i className="nf nf-md-wifi_strength_4"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 65
+              ) {
+                return <i className="nf nf-md-wifi_strength_3"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 40
+              ) {
+                return <i className="nf nf-md-wifi_strength_2"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 25
+              ) {
+                return <i className="nf nf-md-wifi_strength_1"></i>;
+              } else {
+                return <i className="nf nf-md-wifi_strength_outline"></i>;
+              }
+            default:
+              return (
+                <i className="nf nf-md-wifi_strength_off_outline"></i>
+              );
+          }
+        }
+
         // Get icon to show for how much of the battery is charged.
         function getBatteryIcon() {
           if (outputs.battery.chargePercent > 90)
@@ -81,7 +117,7 @@
           return <i className="nf nf-fa-battery_0"></i>;
         }
 
-        // Get icon to show for how much of the battery is charged.
+        // Get icon to show for current weather status.
         function getWeatherIcon() {
           switch (outputs.weather.status) {
             case 'clear_day':
@@ -120,6 +156,13 @@
             <div className="center">{outputs.date.formatted}</div>
 
             <div className="right">
+              {outputs.network && (
+                <div className="network">
+                  {getNetworkIcon()}
+                  {outputs.network.defaultGateway?.ssid}
+                </div>
+              )}
+
               <div className="memory">
                 <i className="nf nf-fae-chip"></i>
                 {Math.round(outputs.memory.usage)}%
@@ -147,10 +190,12 @@
                 </div>
               )}
 
-              <div className="weather">
-                {getWeatherIcon()}
-                {Math.round(outputs.weather.celsiusTemp)}°C
-              </div>
+              {outputs.weather && (
+                <div className="weather">
+                  {getWeatherIcon()}
+                  {Math.round(outputs.weather.celsiusTemp)}°C
+                </div>
+              )}
             </div>
           </div>
         );
diff --git a/examples/starter/with-glazewm.html b/examples/starter/with-glazewm.html
index a53f26b2..33e3c3bc 100644
--- a/examples/starter/with-glazewm.html
+++ b/examples/starter/with-glazewm.html
@@ -28,8 +28,9 @@
 
       const zebarCtx = await init();
 
-      const [glazewm, cpu, date, battery, memory, weather] =
+      const [network, glazewm, cpu, date, battery, memory, weather] =
         await Promise.all([
+          zebarCtx.createProvider({ type: 'network' }),
           zebarCtx.createProvider({ type: 'glazewm' }),
           zebarCtx.createProvider({ type: 'cpu' }),
           zebarCtx.createProvider({
@@ -45,6 +46,7 @@
 
       function App() {
         const [outputs, setOutputs] = useState({
+          network: network.output,
           glazewm: glazewm.output,
           cpu: cpu.output,
           date: date.output,
@@ -54,6 +56,9 @@
         });
 
         useEffect(() => {
+          network.onOutput(network =>
+            setOutputs(outputs => ({ ...outputs, network })),
+          );
           glazewm.onOutput(glazewm =>
             setOutputs(outputs => ({ ...outputs, glazewm })),
           );
@@ -71,6 +76,36 @@
           );
         }, []);
 
+        // Get icon to show for current network status.
+        function getNetworkIcon() {
+          switch (outputs.network.defaultInterface?.type) {
+            case 'ethernet':
+              return <i className="nf nf-md-ethernet_cable"></i>;
+            case 'wifi':
+              if (outputs.network.defaultGateway?.signalStrength >= 80) {
+                return <i className="nf nf-md-wifi_strength_4"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 65
+              ) {
+                return <i className="nf nf-md-wifi_strength_3"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 40
+              ) {
+                return <i className="nf nf-md-wifi_strength_2"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 25
+              ) {
+                return <i className="nf nf-md-wifi_strength_1"></i>;
+              } else {
+                return <i className="nf nf-md-wifi_strength_outline"></i>;
+              }
+            default:
+              return (
+                <i className="nf nf-md-wifi_strength_off_outline"></i>
+              );
+          }
+        }
+
         // Get icon to show for how much of the battery is charged.
         function getBatteryIcon() {
           if (outputs.battery.chargePercent > 90)
@@ -84,7 +119,7 @@
           return <i className="nf nf-fa-battery_0"></i>;
         }
 
-        // Get icon to show for how much of the battery is charged.
+        // Get icon to show for current weather status.
         function getWeatherIcon() {
           switch (outputs.weather.status) {
             case 'clear_day':
@@ -160,6 +195,13 @@
                 </>
               )}
 
+              {outputs.network && (
+                <div className="network">
+                  {getNetworkIcon()}
+                  {outputs.network.defaultGateway?.ssid}
+                </div>
+              )}
+
               <div className="memory">
                 <i className="nf nf-fae-chip"></i>
                 {Math.round(outputs.memory.usage)}%
@@ -187,10 +229,12 @@
                 </div>
               )}
 
-              <div className="weather">
-                {getWeatherIcon()}
-                {Math.round(outputs.weather.celsiusTemp)}°C
-              </div>
+              {outputs.weather && (
+                <div className="weather">
+                  {getWeatherIcon()}
+                  {Math.round(outputs.weather.celsiusTemp)}°C
+                </div>
+              )}
             </div>
           </div>
         );
diff --git a/examples/starter/with-komorebi.html b/examples/starter/with-komorebi.html
index 370b6bc9..273f83be 100644
--- a/examples/starter/with-komorebi.html
+++ b/examples/starter/with-komorebi.html
@@ -28,8 +28,9 @@
 
       const zebarCtx = await init();
 
-      const [komorebi, cpu, date, battery, memory, weather] =
+      const [network, komorebi, cpu, date, battery, memory, weather] =
         await Promise.all([
+          zebarCtx.createProvider({ type: 'network' }),
           zebarCtx.createProvider({ type: 'komorebi' }),
           zebarCtx.createProvider({ type: 'cpu' }),
           zebarCtx.createProvider({
@@ -45,6 +46,7 @@
 
       function App() {
         const [outputs, setOutputs] = useState({
+          network: network.output,
           komorebi: komorebi.output,
           cpu: cpu.output,
           date: date.output,
@@ -54,6 +56,9 @@
         });
 
         useEffect(() => {
+          network.onOutput(network =>
+            setOutputs(outputs => ({ ...outputs, network })),
+          );
           komorebi.onOutput(komorebi =>
             setOutputs(outputs => ({ ...outputs, komorebi })),
           );
@@ -74,7 +79,35 @@
           );
         }, []);
 
-        console.log('outputs.komorebi', outputs.komorebi);
+        // Get icon to show for current network status.
+        function getNetworkIcon() {
+          switch (outputs.network.defaultInterface?.type) {
+            case 'ethernet':
+              return <i className="nf nf-md-ethernet_cable"></i>;
+            case 'wifi':
+              if (outputs.network.defaultGateway?.signalStrength >= 80) {
+                return <i className="nf nf-md-wifi_strength_4"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 65
+              ) {
+                return <i className="nf nf-md-wifi_strength_3"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 40
+              ) {
+                return <i className="nf nf-md-wifi_strength_2"></i>;
+              } else if (
+                outputs.network.defaultGateway?.signalStrength >= 25
+              ) {
+                return <i className="nf nf-md-wifi_strength_1"></i>;
+              } else {
+                return <i className="nf nf-md-wifi_strength_outline"></i>;
+              }
+            default:
+              return (
+                <i className="nf nf-md-wifi_strength_off_outline"></i>
+              );
+          }
+        }
 
         // Get icon to show for how much of the battery is charged.
         function getBatteryIcon() {
@@ -89,7 +122,7 @@
           return <i className="nf nf-fa-battery_0"></i>;
         }
 
-        // Get icon to show for how much of the battery is charged.
+        // Get icon to show for current weather status.
         function getWeatherIcon() {
           switch (outputs.weather.status) {
             case 'clear_day':
@@ -141,6 +174,13 @@
             <div className="center">{outputs.date.formatted}</div>
 
             <div className="right">
+              {outputs.network && (
+                <div className="network">
+                  {getNetworkIcon()}
+                  {outputs.network.defaultGateway?.ssid}
+                </div>
+              )}
+
               <div className="memory">
                 <i className="nf nf-fae-chip"></i>
                 {Math.round(outputs.memory.usage)}%
@@ -168,10 +208,12 @@
                 </div>
               )}
 
-              <div className="weather">
-                {getWeatherIcon()}
-                {Math.round(outputs.weather.celsiusTemp)}°C
-              </div>
+              {outputs.weather && (
+                <div className="weather">
+                  {getWeatherIcon()}
+                  {Math.round(outputs.weather.celsiusTemp)}°C
+                </div>
+              )}
             </div>
           </div>
         );