Standings page in progress

view-webapp/src/main/webapp/js/tour-standings.inc.js

@@ -0,0 +1,42 @@
+onLoad(() => {
+  $('.criterium').on('click', e => {
+    let alreadyOpen = e.target.closest('select');
+    if (alreadyOpen) return;
+    let select = e.target.closest('.criterium').find('select');
+    $('.criterium select').removeClass('active');
+    select.toggleClass('active');
+  });
+  document.on('click', e => {
+    let crit = e.target.closest('.criterium');
+    if (!crit) $('.criterium select').removeClass('active');
+  });
+  $('.criterium select').on('input', e => {
+    let select = e.target.closest('select');
+    let info = select.previousElementSibling;
+    info.textContent = select.selectedOptions[0].value;
+    $('.criterium select').removeClass('active');
+    $('#params-submit').removeClass('hidden');
+  });
+  $('#params-form .cancel.button').on('click', e => {
+    $('.criterium select').removeClass('active').forEach(elem => {
+      elem.value = elem.data('initial');
+      elem.previousElementSibling.textContent = elem.value;
+    });
+    $('#params-submit').addClass('hidden');
+  });
+  $('#params-form').on('submit', e => {
+    if (!$('#params-submit').hasClass('hidden')) {
+      api.putJson(`tour/${tour_id}`, {
+        pairing: {
+          placement: $('.criterium select').map(elem => elem.value)
+        }
+      }).then(rst => {
+        if (rst !== 'error') {
+          document.location.reload();
+        }
+      })
+    }
+    e.preventDefault();
+    return false;
+  });
+});

view-webapp/src/main/webapp/tour-pairing.inc.html

@@ -15,7 +15,7 @@
 #end
 <div class="tab-content" id="pairing">
   <div id="pairing-content">
-    <div id="pairing-round">
+    <div id="pairing-round" class="active-round"-box>
       Pairings for round
       <button class="ui floating choose-round prev-round button">&laquo;</button>
       <span class="active-round">$round</span>

view-webapp/src/main/webapp/tour-results.inc.html

@@ -1,5 +1,5 @@
 <div class="tab-content" id="results">
-  <div id="results-round">
+  <div id="results-round" class="active-round-box">
     Results for round
     <button class="ui floating choose-round prev-round button">&laquo;</button>
     <span class="active-round">$round</span>

view-webapp/src/main/webapp/tour-standings.inc.html

@@ -1,3 +1,52 @@
+#macro(placement $i, $p)
+  <span class="info"></span>
+  <select name="crit-$i" data-initial="$p" class="short-value">
+  #foreach($crit in $$utils.criteria.entrySet())
+    <option value="$crit.key" data-tooltip="$crit.value" #if($p == $crit.key)selected#end>$crit.key - $crit.value</option>
+  #end
+  </select>
+#end
 <div class="tab-content" id="standings">
-  Standings...
+  <div id="standings-round" class="active-round-box">
+    Standings after round
+    <button class="ui floating choose-round prev-round button">&laquo;</button>
+    <span class="active-round">$round</span>
+    <button class="ui floating choose-round next-round button">&raquo;</button>
+  </div>
+  <div id="standings-params" class="roundbox">
+    <form id="params-form" class="ui form">
+      <div class="inline fields">
+#foreach($placement in $tour.pairing.placement)
+        <div class="criterium field">
+  #set($num = $foreach.index + 1)
+          <label>Criterium #$num</label>
+  #placement($num $placement)
+        </div>
+#end
+      </div>
+      <div id="params-submit" class="hidden centered inline fields">
+        <button type="button" class="ui gray floating cancel button">Cancel</button>
+        <button type="submit" class="ui blue floating button">Change</button>
+      </div>
+    </form>
+  </div>
+  <div id="standings-container" class="roundbox">
+#set($standings = $api.get("tour/${params.id}/standings/$round"))
+#if($standings.isObject() && ($standings.error || $standings.message))
+  #if($standings.error)
+    #set($error = $standings.error)
+  #else
+    #set($error = $standings.message)
+  #end
+    <script type="text/javascript">
+      onLoad(() => {
+        showError("$error")
+      });
+    </script>
+  #set($standings = [])
+#end
+#foreach($line in $standings)
+    <div class="standings-line">$line</div>
+#end
+  </div>
 </div>

view-webapp/src/main/webapp/tour.html

@@ -132,7 +132,11 @@
         if (input.tagName === 'SELECT') {
           let sel = input.selectedOptions;
           if (sel && sel.length === 1) {
-            info.textContent = sel[0].textContent;
+            let txt = sel[0].textContent
+            if (input.hasClass('short-value')) {
+              txt = txt.replace(/ - .*$/, '');
+            }
+            info.textContent = txt;
           }
         } else {
           if (input.attr('name') === 'location' && $('input[name="online"]')[0].checked) {
@@ -169,6 +173,7 @@
 #include('/js/tour-registration.inc.js')
 #include('/js/tour-pairing.inc.js')
 #include('/js/tour-results.inc.js')
+#include('/js/tour-standings.inc.js')
 </script>
 <div id="invalid_character" class="hidden">Invalid character</div>
 <script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full.min.js"></script>