Finish BAPS menu design.

src/App.scss

@@ -122,16 +122,17 @@ $number-of-channels: 3;
     writing-mode: vertical-rl;
     height: 100%;
   }
-  .fa-spin {
-    animation: fa-spin 2s infinite linear;
+}
+
+.fa-spin {
+  animation: fa-spin 2s infinite linear;
+}
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
   }
-  @keyframes fa-spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(359deg);
-    }
+  100% {
+    transform: rotate(359deg);
   }
 }
 

src/api.ts

@@ -322,6 +322,8 @@ export interface Timeslot {
   time: number;
   start_time: string;
   title: string;
+  duration: string;
+  credits_string: string;
 }
 
 export function getCurrentApiTimeslot(): Promise<Timeslot> {

src/navbar/BAPSicleModal.scss

@@ -0,0 +1,6 @@
+.loading {
+  margin: 4em;
+}
+.logo {
+  max-width: 70%;
+}

src/navbar/BAPSicleModal.tsx

@@ -4,6 +4,8 @@ import Modal from "react-modal";
 import { Button } from "reactstrap";
 
 import { LoadShowDialogue } from "./loadshow";
+import "./BAPSicleModal.scss";
+import { SidebarDialogue } from "./sidebar";
 
 interface BAPSicleModalProps {
   isOpen: boolean;
@@ -13,7 +15,7 @@ interface BAPSicleModalProps {
 export function BAPSicleModal(props: BAPSicleModalProps) {
   return (
     <Modal isOpen={props.isOpen} onRequestClose={props.close}>
-      <h1 className="d-inline">Load a Show</h1>
+      <h1 className="d-inline">Menu</h1>
       <Button
         onClick={props.close}
         className="float-right pt-1"
@@ -22,7 +24,14 @@ export function BAPSicleModal(props: BAPSicleModalProps) {
         <FaTimes />
       </Button>
       <hr className="mt-1 mb-3" />
-      <LoadShowDialogue close={props.close} />
+      <div className="row">
+        <div className="col-8">
+          <LoadShowDialogue close={props.close} />
+        </div>
+        <div className="col-4">
+          <SidebarDialogue />
+        </div>
+      </div>
     </Modal>
   );
 }

src/navbar/index.tsx

@@ -12,7 +12,7 @@ import { closeAlert } from "./state";
 import { BAPSicleModal } from "./BAPSicleModal";
 
 export function NavBarMain() {
-  const [showBAPSicleModal, setShowBAPSicleModal] = useState(false);
+  const [showBAPSicleModal, setShowBAPSicleModal] = useState(true);
 
   return (
     <>
@@ -48,7 +48,7 @@ export function NavBarMain() {
             }}
           >
             <FaCompactDisc size={16} className="mr-2" />
-            <b>Load Show</b>
+            <b>Menu</b>
           </li>
         </ul>
       </div>

src/navbar/loadshow.tsx

@@ -1,11 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { getTimeslots, Timeslot } from "../api";
 
-import { FaCog, FaSearch, FaTimesCircle } from "react-icons/fa";
+import {
+  FaCog,
+  FaDownload,
+  FaSearch,
+  FaTimesCircle,
+  FaTrashAlt,
+} from "react-icons/fa";
 import { sendBAPSicleChannel } from "../bapsicle";
 
-//import "./libraries.scss";
-
 type searchingStateEnum = "searching" | "results" | "no-results" | "error";
 
 export function LoadShowDialogue(close: any) {
@@ -31,46 +35,72 @@ export function LoadShowDialogue(close: any) {
     });
   }, [state]);
   return (
-    <div className="">
-      <div className="border-top mt-2"></div>
+    <>
       <ResultsPlaceholder state={state} />
-      <div className="timeslot-item-list">
-        <ul>
-          {items.map((item, index) => (
-            <li
-              key={index}
-              onClick={() => {
-                sendBAPSicleChannel({
-                  command: "GET_PLAN",
-                  timeslotId: item.timeslot_id,
-                });
-              }}
-            >
-              {item.start_time} - {item.title}
-            </li>
-          ))}
-        </ul>
+      {state !== "searching" && (
+        <div
+          className="btn btn-outline-danger outline float-right"
+          onClick={() => {
+            sendBAPSicleChannel({
+              command: "CLEAR",
+            });
+          }}
+        >
+          <FaTrashAlt size={16} /> Clear All Channels
+        </div>
+      )}
+      <h2>Load Show</h2>
+      <div className="loadshow-list">
+        {items.map((item, index) => (
+          <div className="loadshow-result card text-dark" key={index}>
+            <div className="card-body">
+              <span
+                className="btn btn-outline-primary float-right"
+                onClick={() => {
+                  sendBAPSicleChannel({
+                    command: "GET_PLAN",
+                    timeslotId: item.timeslot_id,
+                  });
+                }}
+              >
+                <FaDownload size={15} /> Load Show Plan
+              </span>
+
+              <h5 className="card-title">{item.title}</h5>
+              <h6 className="card-subtitle mb-2 text-muted">
+                {item.start_time} - Duration: {item.duration}
+              </h6>
+              <p className="card-text">
+                <i>with {item.credits_string}</i>
+              </p>
+            </div>
+          </div>
+        ))}
       </div>
-    </div>
+    </>
   );
 }
 // <Item key={itemId(item)} item={item} index={index} column={-1} />
 export function ResultsPlaceholder({ state }: { state: string }) {
   return (
-    <span
-      className={state !== "results" ? "mt-5 text-center text-muted" : "d-none"}
+    <div
+      className={
+        "loading " + (state !== "results" ? "text-center text-muted" : "d-none")
+      }
     >
       {state === "not-searching" && <FaSearch size={56} />}
       {state === "searching" && <FaCog size={56} className="fa-spin" />}
       {state === "no-results" && <FaTimesCircle size={56} />}
       <br />
-      {state === "not-searching"
-        ? "Enter a search term."
-        : state === "searching"
-        ? "Searching..."
-        : state === "no-results"
-        ? "No results."
-        : "An error has occurred while getting shows."}
-    </span>
+      <span className="ml-3">
+        {state === "not-searching"
+          ? ""
+          : state === "searching"
+          ? "Searching..."
+          : state === "no-results"
+          ? "No results."
+          : "An error has occurred while getting shows."}
+      </span>
+    </div>
   );
 }

src/navbar/sidebar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { FaCog } from "react-icons/fa";
+import appLogo from "../assets/images/presenterlogo.png";
+
+export function SidebarDialogue(close: any) {
+  return (
+    <div className="mt-3 text-center">
+      <img className="logo px-5 mb-3" src={appLogo} alt="BAPS3" />
+      <h2 className="display-4">BAPS3</h2>
+      <h3 className="h3">Presenter</h3>
+      <p>
+        <strong>Broadcast And Presenting Suite</strong>
+      </p>
+      <hr />
+      <a href="/" target="_blank">
+        <div className="btn btn-outline-dark">
+          <FaCog size={15} /> Server Settings
+        </div>
+      </a>
+      <hr />
+      <p>
+        Brought to you by
+        <br />
+        <strong>The URY Computing Team</strong>
+        <br />
+        since 2020.
+      </p>
+      <hr />
+      <p>
+        Based on the legendary BAPS 1 &amp; 2
+        <br />
+        <strong>2004 - 2021</strong>
+        <br />
+        Build upon the ideas and learnings of the many previous attempts of
+        BAPS3.
+      </p>
+    </div>
+  );
+}