common code

SearchFrontend/search_ui/src/components/StatusDisplay.jsx

@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+export default function StatusesDisplayHUD({ statusMessages }) {
+  
+
+    const msg = {};
+
+    statusMessages.forEach((m) => {
+        let when_key = 'other'
+        if (m['task'] == 'SCHEDULED')
+            m['when'].forEach(( w ) => {   msg[w] = 'Scheduled' })
+        else {
+            if ('when' in m)
+                when_key = m['when']
+            msg[when_key] = m['task']
+        }
+        
+        
+        
+    });
+
+    return (
+    <div>
+      {Object.entries(msg).map(([when, messages], idx) => (
+        <StatusDisplay key={when} when={when} message={messages} />
+      ))}
+    </div>
+  );
+}
+
+
+export function StatusDisplay({when, message }) {
+    let msg_show = ''
+    
+    msg_show = when + ': ' + message
+
+
+
+  return (
+    <div
+      className="status-message"
+      style={{
+        color: "#fff",
+        background: "#23272f",
+        padding: "8px",
+        margin: "4px 0",
+        borderRadius: "4px",
+        minHeight: "20px",
+      }}
+    >
+      {msg_show}
+    </div>
+  );
+    
+}
+
+
+
+
+//   <div
+//         className="status-messages"
+//         style={{
+//           color: "#fff",
+//           background: "#23272f",
+//           padding: "8px",
+//           margin: "8px 0",
+//           borderRadius: "4px",
+//           minHeight: "40px",
+//         }}
+//       >
+//         {statusMessages.map((msg, idx) => (
+//           <div key={idx}>{msg}</div>
+//         ))}
+//       </div>