show banner PVs under runstate

Author: rerpha

app/components/Instrument.ts

@@ -29,6 +29,16 @@ export class Instrument {
     this.dashboard.set(`${this.prefix}DAE:WDUSERS`, {
       pvaddress: `${this.prefix}DAE:WDUSERS`,
     });
+
+    for (const place of ["LEFT", "MIDDLE", "RIGHT"]) {
+      this.dashboard.set(`${this.prefix}CS:DASHBOARD:BANNER:${place}:LABEL`, {
+        pvaddress: `${this.prefix}CS:DASHBOARD:BANNER:${place}:LABEL`,
+      });
+      this.dashboard.set(`${this.prefix}CS:DASHBOARD:BANNER:${place}:VALUE`, {
+        pvaddress: `${this.prefix}CS:DASHBOARD:BANNER:${place}:VALUE`,
+      });
+    }
+
     for (const col of [1, 2]) {
       for (const row of [1, 2, 3]) {
         this.dashboard.set(`${this.dashboard_prefix}${row}:${col}:LABEL`, {

app/components/TopBar.tsx

@@ -44,18 +44,32 @@ const TopBar = function TopBar({
         id="instNameDiv"
         className="w-full flex justify-center items-center flex-col"
       >
-        <h2
-          className={`text-center p-4 text-xl rounded-t-lg w-full 
-          ${getStatusColour(getRunstate(prefix, runInfoPVs))}
-           
-           ${getForegroundColour(getRunstate(prefix, runInfoPVs))}
-          
-          `}
-          id={"instNameLabel"}
+        <div
+          id={"runstateDiv"}
+          className={`p-2 rounded-t-lg w-full flex-col justify-center items-center text-center ${getStatusColour(getRunstate(prefix, runInfoPVs))} ${getForegroundColour(getRunstate(prefix, runInfoPVs))}`}
         >
-          {instName.toUpperCase()} is{" "}
-          <span id={"runStateSpan"}>{getRunstate(prefix, runInfoPVs)}</span>
-        </h2>
+          <h2 className={"text-xl"} id={"instNameLabel"}>
+            {instName.toUpperCase()} is{" "}
+            <span id={"runStateSpan"}>{getRunstate(prefix, runInfoPVs)}</span>
+          </h2>
+          <div
+            id={"banner"}
+            className={"flex flex-col md:flex-row text-center w-full"}
+          >
+            {["LEFT", "MIDDLE", "RIGHT"].map((place) => (
+              <div key={place} className={"flex-row md:w-1/3"}>
+                {
+                  dashboard.get(`${prefix}CS:DASHBOARD:BANNER:${place}:LABEL`)!
+                    .value
+                }{" "}
+                {
+                  dashboard.get(`${prefix}CS:DASHBOARD:BANNER:${place}:VALUE`)!
+                    .value
+                }
+              </div>
+            ))}
+          </div>
+        </div>
         <h3 className="text-black text-wrap max-w-full break-all py-2 font-semibold">
           Config:{" "}
           <span id={"configNameSpan"}>