Finish BAPS menu design.
This commit is contained in:
parent
de5c13172e
commit
582f48ed56
7 changed files with 132 additions and 45 deletions
|
@ -122,17 +122,18 @@ $number-of-channels: 3;
|
|||
writing-mode: vertical-rl;
|
||||
height: 100%;
|
||||
}
|
||||
.fa-spin {
|
||||
}
|
||||
|
||||
.fa-spin {
|
||||
animation: fa-spin 2s infinite linear;
|
||||
}
|
||||
@keyframes fa-spin {
|
||||
}
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#uploadIframe {
|
||||
|
|
|
@ -322,6 +322,8 @@ export interface Timeslot {
|
|||
time: number;
|
||||
start_time: string;
|
||||
title: string;
|
||||
duration: string;
|
||||
credits_string: string;
|
||||
}
|
||||
|
||||
export function getCurrentApiTimeslot(): Promise<Timeslot> {
|
||||
|
|
6
src/navbar/BAPSicleModal.scss
Normal file
6
src/navbar/BAPSicleModal.scss
Normal file
|
@ -0,0 +1,6 @@
|
|||
.loading {
|
||||
margin: 4em;
|
||||
}
|
||||
.logo {
|
||||
max-width: 70%;
|
||||
}
|
|
@ -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" />
|
||||
<div className="row">
|
||||
<div className="col-8">
|
||||
<LoadShowDialogue close={props.close} />
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<SidebarDialogue />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,14 +35,27 @@ 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>
|
||||
{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) => (
|
||||
<li
|
||||
key={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",
|
||||
|
@ -46,31 +63,44 @@ export function LoadShowDialogue(close: any) {
|
|||
});
|
||||
}}
|
||||
>
|
||||
{item.start_time} - {item.title}
|
||||
</li>
|
||||
<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>
|
||||
))}
|
||||
</ul>
|
||||
</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 />
|
||||
<span className="ml-3">
|
||||
{state === "not-searching"
|
||||
? "Enter a search term."
|
||||
? ""
|
||||
: state === "searching"
|
||||
? "Searching..."
|
||||
: state === "no-results"
|
||||
? "No results."
|
||||
: "An error has occurred while getting shows."}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
39
src/navbar/sidebar.tsx
Normal file
39
src/navbar/sidebar.tsx
Normal file
|
@ -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 & 2
|
||||
<br />
|
||||
<strong>2004 - 2021</strong>
|
||||
<br />
|
||||
Build upon the ideas and learnings of the many previous attempts of
|
||||
BAPS3.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue