network info

client/src/features/info/Info.jsx

@@ -3,6 +3,7 @@ import { useSocket } from 'app/context/socketContext';
 import style from './Info.module.css';
 import InfoTitle from './InfoTitle';
 import InfoLogger from './InfoLogger';
+import InfoNif from './InfoNif';
 import { useState } from 'react';
 
 export default function Info() {
@@ -71,6 +72,7 @@ export default function Info() {
     <>
       <div className={style.main}>{selected}</div>
       <InfoLogger logData={logData} />
+      <InfoNif />
       <InfoTitle title={'Now'} data={titlesNow} />
       <InfoTitle title={'Next'} data={titlesNext} />
     </>

client/src/features/info/Info.module.css

@@ -30,6 +30,15 @@
   color: #ccc;
 }
 
+.if {
+  font-size: 0.8em;
+  color: #4bffabcc;
+  background-color: rgba(0, 0, 0, 0.13);
+  border-radius: 2px;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
+}
+
 ul > li {
   font-size: 0.9em;
   color: #fff;
@@ -37,7 +46,7 @@ ul > li {
 
 .log {
   overflow-y: scroll;
-  height: 40vh;
+  height: 30vh;
 }
 
 .info {

client/src/features/info/InfoNif.jsx

@@ -0,0 +1,49 @@
+import { Icon } from '@chakra-ui/react';
+import { useState } from 'react';
+import { FiChevronUp } from 'react-icons/fi';
+import { APP_TABLE } from 'app/api/apiConstants';
+import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
+import { useFetch } from 'app/hooks/useFetch';
+import style from './Info.module.css';
+
+export default function InfoNif() {
+  const { data, status } = useFetch(APP_TABLE, getInfo, {
+    placeholderData: ontimePlaceholderInfo,
+  });
+  const [collapsed, setCollapsed] = useState(false);
+
+  const isDev = process.env.NODE_ENV === 'development';
+  const baseURL = `http://__IP__:${isDev ? 3000 : 4001}`;
+
+  return (
+    <div className={style.container}>
+      <div className={style.header}>
+        Network Info
+        <Icon
+          className={collapsed ? style.moreCollapsed : style.moreExpanded}
+          as={FiChevronUp}
+          onClick={() => setCollapsed((c) => !c)}
+        />
+      </div>
+
+      {!collapsed && (
+        <div>
+          {status === 'success' && (
+            <>
+              {data?.networkInterfaces.map((e) => {
+                return (
+                  <a
+                    href={baseURL.replace('__IP__', e.address)}
+                    target='_blank'
+                    rel='noreferrer'
+                    className={style.if}
+                  >{`${e.name} - ${e.address}`}</a>
+                );
+              })}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}