Add configurable tournament logo

GrappleRobotics · Aug 20, 2024 · d6c1f0f · d6c1f0f
1 parent c19c93c
commit d6c1f0f
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 10 deletions.
diff --git a/jms-core/jms-core-lib/src/models/event_details.rs b/jms-core/jms-core-lib/src/models/event_details.rs
@@ -6,7 +6,8 @@ pub struct EventDetails {
   pub event_name: Option<String>,
   pub webcasts: Vec<String>,
   pub av_chroma_key: String,
-  pub av_event_colour: String
+  pub av_event_colour: String,
+  pub event_logo: Option<String>    // Encoded as a HTML5 img src
 }
 
 #[async_trait::async_trait]
@@ -16,6 +17,6 @@ impl Singleton for EventDetails {
 
 impl Default for EventDetails {
   fn default() -> Self {
-    Self { code: None, event_name: None, webcasts: vec![], av_chroma_key: "#f0f".to_owned(), av_event_colour: "#e9ab01".to_owned() }
+    Self { code: None, event_name: None, webcasts: vec![], av_chroma_key: "#f0f".to_owned(), av_event_colour: "#e9ab01".to_owned(), event_logo: None }
   }
 }
diff --git a/jms-ui/app/audience/card.tsx b/jms-ui/app/audience/card.tsx
@@ -4,12 +4,13 @@ import { Col, Row } from "react-bootstrap";
 type AudienceCardProps = {
   className?: string,
   event_name?: string | null,
+  logo?: string | null,
   children: React.ReactNode
 };
 
 export default class AudienceCard extends React.PureComponent<AudienceCardProps> {
   render() {
-    const { className, event_name, children } = this.props;
+    const { className, event_name, logo, children } = this.props;
 
     return <div className={`audience-card ${className || ""}`}>
       <div className="audience-card-inner">
@@ -21,7 +22,10 @@ export default class AudienceCard extends React.PureComponent<AudienceCardProps>
             { event_name || "" }
           </Col>
           <Col md="auto">
-            <img src="/img/tourney_logo.png" />
+            {/* <img src="/img/tourney_logo.png" /> */}
+            {
+              logo && <img src={logo}></img>
+            }
           </Col>
         </Row>
 

diff --git a/jms-ui/app/audience/scenes/alliance-selections.tsx b/jms-ui/app/audience/scenes/alliance-selections.tsx
@@ -15,7 +15,7 @@ export default function AllianceSelectionScene({ eventDetails, alliances, rankin
     { team: r.team, rank: i + 1 }
   ));
 
-  return <AudienceCard event_name={eventDetails.event_name} className="audience-alliance-selection">
+  return <AudienceCard event_name={eventDetails.event_name} logo={eventDetails.event_logo} className="audience-alliance-selection">
     <Row>
       <Col md={7} className="audience-card-title"> Alliance Selection </Col>
       <Col className="audience-card-title text-end"> Remaining Teams </Col>

diff --git a/jms-ui/app/audience/scenes/award.tsx b/jms-ui/app/audience/scenes/award.tsx
@@ -15,7 +15,7 @@ interface AwardSceneProps {
 export default function AwardScene({ eventDetails, award_id, awards, teams }: AwardSceneProps) {
   const award = awards.find(a => a.id === award_id);
 
-  return award && <AudienceCard event_name={eventDetails.event_name} className="audience-award">
+  return award && <AudienceCard event_name={eventDetails.event_name} logo={eventDetails.event_logo} className="audience-award">
     <Row>
       <Col className="award-title" style={{ fontSize: ( award.name.length > 25 ? "1.25em" : "2em") }}>
         <FontAwesomeIcon icon={faTrophy} className="trophy" /> &nbsp;

diff --git a/jms-ui/app/audience/scenes/bracket.tsx b/jms-ui/app/audience/scenes/bracket.tsx
@@ -11,7 +11,7 @@ interface PlayoffBracketSceneProps {
 }
 
 export default function PlayoffBracketScene({ eventDetails, matches, next_match, teams, playoff_mode }: PlayoffBracketSceneProps) {
-  return <AudienceCard event_name={eventDetails?.event_name} className="audience-playoff-bracket">
+  return <AudienceCard event_name={eventDetails?.event_name} logo={eventDetails?.event_logo} className="audience-playoff-bracket">
     {
       playoff_mode && <PlayoffBracketGraph
         matches={matches}

diff --git a/jms-ui/app/audience/scenes/match-preview.tsx b/jms-ui/app/audience/scenes/match-preview.tsx
@@ -50,7 +50,7 @@ export default function MatchPreviewSceneInner({ eventDetails, currentMatch, mat
   }
 
 
-  return <AudienceCard event_name={eventDetails.event_name} className="audience-preview">
+  return <AudienceCard event_name={eventDetails.event_name} logo={eventDetails.event_logo} className="audience-preview">
     <Row>
       <Col className="audience-card-title" md="auto">
         { match?.name || currentMatch?.match_id }

diff --git a/jms-ui/app/audience/scenes/match-results.tsx b/jms-ui/app/audience/scenes/match-results.tsx
@@ -54,7 +54,7 @@ export default function MatchResultsScene({ eventDetails, match_id, matches, tea
                               .then(setScores));
   }, [ match_id ])
 
-  return <AudienceCard event_name={eventDetails.event_name} className="audience-results">
+  return <AudienceCard event_name={eventDetails.event_name} logo={eventDetails.event_logo} className="audience-results">
     <Row>
       <Col className="audience-card-title" md="auto">
         { match?.name || match_id }

diff --git a/jms-ui/app/audience/scenes/message.tsx b/jms-ui/app/audience/scenes/message.tsx
@@ -3,7 +3,7 @@ import AudienceCard from "../card";
 import { Col, Row } from "react-bootstrap";
 
 export default function MessageScene({ message, eventDetails }: { message: string, eventDetails: EventDetails }) {
-  return <AudienceCard event_name={eventDetails.event_name}>
+  return <AudienceCard event_name={eventDetails.event_name} logo={eventDetails.event_logo}>
     <Row>
       <Col className="audience-card-title" md="auto">
         Event Message

diff --git a/jms-ui/app/wizard/event/page.tsx b/jms-ui/app/wizard/event/page.tsx
@@ -220,6 +220,24 @@ export default withPermission(["ManageEvent"], function EventWizardUsers() {
           onChangeComplete={ c => updateDetails({ av_chroma_key: { $set: c.hex } }) }
         />
       </Col>
+      <Col md="auto" className="mx-2">
+        <h6> Tournament Logo </h6>
+        {
+          details?.event_logo ? <React.Fragment>
+            <img src={details.event_logo} width="200px" height="200px"></img> <br />
+            <Button variant="red" onClick={() => updateDetails({ event_logo: { $set: null } })}>Delete</Button>
+          </React.Fragment> : <input type="file" id="logo" name="logo" accept="image/png,image/jpeg" onChange={event => {
+            if (event.target.files === null)
+                return;
+            const f = event.target.files[0];
+            var reader = new FileReader();
+            reader.onloadend = function() {
+              updateDetails({ event_logo: { $set: reader.result } });
+            }
+            reader.readAsDataURL(f);
+          }} />
+        }
+      </Col>
     </Row>
     <br />
     <p className="text-muted">