Refactor sponsor slides to not require reloading the audience display to pick up changes.

static/css/audience_display.css

@@ -369,6 +369,12 @@ html {
 #sponsor .carousel-inner, #sponsor .item {
   height: 100%;
 }
+.sponsor-image-container {
+  width: 1000px;
+  height: 500px;
+  display: table-cell;
+  vertical-align: middle;
+}
 #sponsor h1, #sponsor h2 {
   font-family: "FuturaLTBold";
   margin: 0;
@@ -386,13 +392,12 @@ html {
 }
 #sponsor h2 {
   font-size: 6em;
-  padding-top: 150px;
+  padding-top: 145px;
+  line-height: 110px;
 }
 #sponsor img {
   max-width: 800px;
-  height: 400px;
+  max-height: 400px;
-  margin-top: 50px;
-  display: inline-block;
 }
 #allianceSelectionCentering {
   position: absolute;

static/js/audience_display.js

@@ -8,6 +8,8 @@ var websocket;
 var transitionMap;
 var currentScreen = "blank";
 var allianceSelectionTemplate = Handlebars.compile($("#allianceSelectionTemplate").html());
+var sponsorImageTemplate = Handlebars.compile($("#sponsorImageTemplate").html());
+var sponsorTextTemplate = Handlebars.compile($("#sponsorTextTemplate").html());
 
 // Handles a websocket message to change which screen is displayed.
 var handleAudienceDisplayMode = function(targetScreen) {
@@ -15,6 +17,10 @@ var handleAudienceDisplayMode = function(targetScreen) {
     return;
   }
 
+  if (targetScreen === "sponsor") {
+    initializeSponsorDisplay();
+  }
+
   transitions = transitionMap[currentScreen][targetScreen];
   if (transitions == null) {
     // There is no direct transition defined; need to go to the blank screen first.
@@ -356,22 +362,21 @@ var transitionSponsorToScore = function(callback) {
 
 // Loads sponsor slide data and builds the slideshow HTML.
 var initializeSponsorDisplay = function() {
-  $.getJSON("/api/sponsor_slides", function(sponsors) {
+  $.getJSON("/api/sponsor_slides", function(slides) {
-    if (!sponsors) {
+    $("#sponsorContainer").empty();
-      return;
-    }
 
-    // Populate Tiles
+    // Inject the HTML for each slide into the DOM.
-    $.each(sponsors, function(index){
+    $.each(slides, function(index, slide) {
-      var active = 'active';
+      slide.DisplayTimeMs = slide.DisplayTimeSec * 1000;
-      if(index)
+      slide.First = index === 0;
-        active = '';
-
-      if(sponsors[index]['Image'].length)
-        $('#sponsorContainer').append('<div class="item '+active+'" data-interval="'+sponsors[index]["DisplayTimeSec"]*1000+'"><img src="/static/img/sponsors/'+sponsors[index]['Image']+'" /><h1>'+sponsors[index]['Subtitle']+'</h1></div>');
-      else
-        $('#sponsorContainer').append('<div class="item '+active+'" data-interval="'+sponsors[index]["DisplayTimeSec"]*1000+'"><h2>'+sponsors[index]['Line1']+'<br />'+sponsors[index]['Line2']+'</h2><h1>'+sponsors[index]['Subtitle']+'</h1></div>');
 
+      var slideHtml;
+      if (slide.Image) {
+        slideHtml = sponsorImageTemplate(slide);
+      } else {
+        slideHtml = sponsorTextTemplate(slide);
+      }
+      $("#sponsorContainer").append(slideHtml);
     });
 
     // Start Carousel
@@ -416,8 +421,6 @@ $(function() {
     scorePosted: function(event) { handleScorePosted(event.data); }
   });
 
-  initializeSponsorDisplay();
-
   // Map how to transition from one screen to another. Missing links between screens indicate that first we
   // must transition to the blank screen and then to the target screen.
   transitionMap = {

templates/audience_display.html

@@ -167,6 +167,20 @@
         {{"{{/each}}"}}
       </table>
     </script>
+    <script id="sponsorImageTemplate" type="text/x-handlebars-template">
+      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
+        <div class="sponsor-image-container">
+          <img src="/static/img/sponsors/{{"{{Image}}"}}" />
+        </div>
+        <h1>{{"{{Subtitle}}"}}</h1>
+      </div>
+    </script>
+    <script id="sponsorTextTemplate" type="text/x-handlebars-template">
+      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
+        <h2>{{"{{Line1}}"}}<br />{{"{{Line2}}"}}</h2>
+        <h1>{{"{{Subtitle}}"}}</h1>
+      </div>
+    </script>
     <audio id="match-warmup" src="/static/audio/match_warmup.wav" preload="auto"></audio>
     <audio id="match-start" src="/static/audio/match_start.wav" preload="auto"></audio>
     <audio id="match-end" src="/static/audio/match_end.wav" preload="auto"></audio>

templates/setup_sponsor_slides.html

@@ -57,52 +57,11 @@
               <br />
               <button type="submit" class="btn btn-primary btn-lower-third" name="action" value="delete">Delete</button>
               <br />
-              <button class="btn btn-warning" name="toggleImage">Toggle Image</button>
+              <button class="btn btn-warning" name="toggleImage">Toggle Image/Text</button>
             </div>
           </div>
         </form>
       {{end}}
-      <form class="form-horizontal" action="/setup/sponsor_slides" method="POST">
-        <div class="form-group">
-          <div class="col-lg-7">
-            <div class="form-group imagetoggle">
-              <label class="col-sm-5 control-label">Image File Name</label>
-              <div class="col-sm-7">
-                <input type="text" class="form-control" name="image" placeholder="image.svg">
-              </div>
-            </div>
-            <div class="form-group hidden imagetoggle">
-              <label class="col-sm-5 control-label">Line 1 Text</label>
-              <div class="col-sm-7">
-                <input type="text" class="form-control" name="line1" placeholder="Chezy">
-              </div>
-            </div>
-            <div class="form-group hidden imagetoggle">
-              <label class="col-sm-5 control-label">Line 2 Text</label>
-              <div class="col-sm-7">
-                <input type="text" class="form-control" name="line2" placeholder="Industries">
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="col-sm-5 control-label">Subtitle Text</label>
-              <div class="col-sm-7">
-                <input type="text" class="form-control" name="subtitle" placeholder="Gold Sponsor">
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="col-sm-5 control-label">Display Time (s)</label>
-              <div class="col-sm-7">
-                <input type="number" class="form-control" name="displayTimeSec" placeholder="10">
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-5">
-            <button type="submit" class="btn btn-info btn-lower-third" name="action" value="save">Save</button>
-            <br />
-            <button class="btn btn-warning" name="toggleImage">Toggle Image</button>
-          </div>
-        </div>
-      </form>
     </div>
   </div>
 </div>

web/api.go

@@ -85,6 +85,10 @@ func (web *Web) sponsorSlidesApiHandler(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
+	if sponsors == nil {
+		// Go marshals an empty slice to null, so explicitly create it so that it appears as an empty JSON array.
+		sponsors = make([]model.SponsorSlide, 0)
+	}
 	jsonData, err := json.MarshalIndent(sponsors, "", "  ")
 	if err != nil {
 		handleWebErr(w, err)

web/setup_sponsor_slides.go

@@ -27,6 +27,10 @@ func (web *Web) sponsorSlidesGetHandler(w http.ResponseWriter, r *http.Request)
 		handleWebErr(w, err)
 		return
 	}
+
+	// Append a blank slide to the end that can be used to add a new one.
+	sponsorSlides = append(sponsorSlides, model.SponsorSlide{DisplayTimeSec: 10})
+
 	data := struct {
 		*model.EventSettings
 		SponsorSlides []model.SponsorSlide