Don't randomize sponsor order

static/js/audience_display.js

@@ -315,54 +315,45 @@ var transitionSponsorToScore = function(callback) {
 };
 
 // Load and Prioritize Sponsor Data
-var sponsors;
-var sponsorIndex = [];
-var lastSponsor;
-
 var initializeSponsorDisplay = function() {
-  $.getJSON("/api/sponsor_slides", function(data) {
-    sponsors = data;
+  $.getJSON("/api/sponsor_slides", function(sponsors) {
 
-    // Invert Priorities
+    // Populate Tiles
     $.each(sponsors, function(index){
-      var priorityCount = 10 / sponsors[index]["Priority"];
-      for(i=0; i<priorityCount; i++){
-        sponsorIndex.push(index);
-      }
+      var active = 'active';
+      if(index)
+        active = '';
+
+      if(sponsors[index]['Image'].length)
+        $('#sponsorContainer').append('<div class="item '+active+'" data-interval="'+sponsors[index]["Priority"]*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]["Priority"]*1000+'"><h2>'+sponsors[index]['Line1']+'<br />'+sponsors[index]['Line2']+'</h2><h1>'+sponsors[index]['Subtitle']+'</h1></div>');
+
     });
 
-    // Load Tiles
-    loadNextSponsor(true);
-    if(sponsors.length > 1)
-      loadNextSponsor();
-    $(".carousel#sponsor").on("slid.bs.carousel", function(){
-      loadNextSponsor();
-      $("#sponsorContainer").children()[0].remove();
+    // Start Carousel
+    var t;
+    var start = $('.carousel#sponsor').find('.active').attr('data-interval');
+    t = setTimeout("$('.carousel#sponsor').carousel({interval: 1000});", start-1000);
+
+    $('.carousel#sponsor').on('slid.bs.carousel', function () {   
+         clearTimeout(t);  
+         var duration = $(this).find('.active').attr('data-interval');
+
+         $('.carousel#sponsor').carousel('pause');
+         t = setTimeout("$('.carousel#sponsor').carousel();", duration-1000);
+    })
+
+    $('.carousel-control.right').on('click', function(){
+        clearTimeout(t);   
     });
+
+    $('.carousel-control.left').on('click', function(){
+        clearTimeout(t);   
+    });
+
   });
-};
-
-var loadNextSponsor = function(active) {
-  // Don't load same sponsor twice in a row
-  var currentSponsor = sponsorIndex[Math.round(Math.random() * sponsorIndex.length)];
-  while(currentSponsor == lastSponsor) {
-    currentSponsor = sponsorIndex[Math.round(Math.random() * sponsorIndex.length)];
-  }
-  lastSponsor = currentSponsor;
-  currentSponsor = sponsors[currentSponsor];
-
-  if (active == true) {
-    active = "active"
-  } else {
-    active = "";
-  }
-
-  if (currentSponsor["Image"].length) {
-    $("#sponsorContainer").append('<div class="item '+active+'"><img src="/static/img/sponsors/'+currentSponsor['Image']+'" /><h1>'+currentSponsor['Subtitle']+'</h1></div>');
-  } else {
-    $("#sponsorContainer").append('<div class="item '+active+'"><h2>'+currentSponsor['Line1']+'<br />'+currentSponsor['Line2']+'</h2><h1>'+currentSponsor['Subtitle']+'</h1></div>');
-  }
-};
+}
 
 
 $(function() {

templates/audience_display.html

@@ -99,7 +99,7 @@
           <span class="pull-right" id="finalMatchName"></span>
         </div>
       </div>
-      <div id="sponsor" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="10000">
+      <div id="sponsor" class="carousel slide">
         <div class="carousel-inner" id="sponsorContainer">
         </div>
       </div>

templates/sponsor_slides.html

@@ -10,32 +10,43 @@
           <div class="form-group">
             <div class="col-lg-7">
               <input type="hidden" name="id" value="{{$sponsorSlide.Id}}" />
-              <input type="text" class="form-control" name="image" value="{{$sponsorSlide.Image}}" placeholder="Image File Name" />
-              <div class='form-inline'>
-                <input type="text" class="form-control" name="line1" value="{{$sponsorSlide.Line1}}" placeholder="Line 1 Text" />
-                <input type="text" class="form-control" name="line2" value="{{$sponsorSlide.Line2}}" placeholder="Line 2 Text" />
+                <div class="form-group imagetoggle">
+                  <label for="image" 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" value="{{$sponsorSlide.Image}}">
+                  </div>
+                </div>
+                <div class="form-group hidden imagetoggle">
+                  <label for="line1" class="col-sm-5 control-label">Line 1 Text</label>
+                  <div class="col-sm-7">
+                    <input type="text" class="form-control" value="{{$sponsorSlide.Line1}}" name="line1" placeholder="Chezy">
+                  </div>
+                </div>
+                <div class="form-group hidden imagetoggle">
+                  <label for="line2" class="col-sm-5 control-label">Line 2 Text</label>
+                  <div class="col-sm-7">
+                    <input type="text" class="form-control" value="{{$sponsorSlide.Line2}}" name="line2" placeholder="Industries">
+                  </div>
+                </div>
+              <div class="form-group">
+                <label for="subtitle" class="col-sm-5 control-label">Subtitle Text</label>
+                <div class="col-sm-7">
+                  <input type="text" class="form-control" name="subtitle" value="{{$sponsorSlide.Subtitle}}" placeholder="Gold Sponsor">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="priority" class="col-sm-5 control-label">Display Time (s)</label>
+                <div class="col-sm-7">
+                  <input type="number" class="form-control" name="priority" value="{{$sponsorSlide.Priority}}" placeholder="10">
+                </div>
               </div>
-              <input type="text" class="form-control" name="subtitle" value="{{$sponsorSlide.Subtitle}}" placeholder="Subtitle Text" />
-              <label class="radio-inline">
-                <input type="radio" name="priority" value="1"> 1 (Show Often)
-              </label>
-              <label class="radio-inline">
-                <input type="radio" name="priority" value="2"> 2
-              </label>
-              <label class="radio-inline">
-                <input type="radio" name="priority" value="3"> 3
-              </label>
-              <label class="radio-inline">
-                <input type="radio" name="priority" value="4"> 4
-              </label>
-              <label class="radio-inline">
-                <input type="radio" name="priority" value="5"> 5 (Show Rarely)
-              </label>
             </div>
             <div class="col-lg-5">
               <button type="submit" class="btn btn-info btn-lower-third" name="action" value="save">Save</button>
               <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>
             </div>
           </div>
         </form>
@@ -43,30 +54,41 @@
       <form class="form-horizontal" action="/setup/sponsor_slides" method="POST">
         <div class="form-group">
           <div class="col-lg-7">
-            <input type="text" class="form-control" name="image" placeholder="Image File Name" />
-            <div class='form-inline'>
-              <input type="text" class="form-control" name="line1" placeholder="Line 1 Text" />
-              <input type="text" class="form-control" name="line2" placeholder="Line 2 Text" />
+            <div class="form-group imagetoggle">
+              <label for="image" 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 for="line1" 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 for="line2" 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 for="subtitle" 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 for="priority" class="col-sm-5 control-label">Display Time (s)</label>
+              <div class="col-sm-7">
+                <input type="number" class="form-control" name="priority" placeholder="10">
+              </div>
             </div>
-            <input type="text" class="form-control" name="subtitle" placeholder="Subtitle Text" />
-            <label class="radio-inline">
-              <input type="radio" name="priority" value="1"> 1 (Show Often)
-            </label>
-            <label class="radio-inline">
-              <input type="radio" name="priority" value="2"> 2
-            </label>
-            <label class="radio-inline">
-              <input type="radio" name="priority" value="3"> 3
-            </label>
-            <label class="radio-inline">
-              <input type="radio" name="priority" value="4"> 4
-            </label>
-            <label class="radio-inline">
-              <input type="radio" name="priority" value="5"> 5 (Show Rarely)
-            </label>
           </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>
@@ -76,10 +98,17 @@
 {{end}}
 {{define "script"}}
 <script type='text/javascript'>
-$(function(){
-  $('form.existing').each(function(){
-    $(this).find('input[name=priority][value='+$(this).attr('data-priority')+']').attr('checked','true');
+  $(function(){
+    $('form.existing').each(function(index){
+      if(!$(this).find('input[name=image]').val().length && ($(this).find('input[name=line2]').val().length || $(this).find('input[name=line1]').val().length))
+        $(this).find('.imagetoggle').toggleClass('hidden');
+    });
+
+    $('button[name=toggleImage]').click(function(event){
+      event.preventDefault();
+      $(this).parents('form').find('.imagetoggle').toggleClass('hidden');
+      $(this).parents('form').find('.imagetoggle input').val('');
+    });
   });
-});
 </script>
 {{end}}