Pairing tab in progress

view-webapp/src/main/kotlin/org/jeudego/pairgoth/util/Translator.kt

@@ -149,7 +149,7 @@ class Translator private constructor(private val iso: String) {
         private val logger = LoggerFactory.getLogger("translation")
         private val translatedTemplates: MutableMap<Pair<String, String>, Template> = ConcurrentHashMap<Pair<String, String>, Template>()
         private val textExtractor = Pattern.compile(
-            "<[^>]+\\splaceholder=\"(?<placeholder>[^\"]*)\"[^>]*>|(?<=>)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?<text>[^<>]+?)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?=<|$)|(?<=>|^)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?<text2>[^<>]+?)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?=<)|^(?:[ \\r\\n\\t /–-]|&nbsp;|&dash;)*(?<text3>[^<>]+?)(?:[ \\r\\n\\t /–-]|&nbsp;|&dash;)*(?=$)",
+            "<[^>]+\\s(?:placeholder|title)=\"(?<placeholder>[^\"]*)\"[^>]*>|(?<=>)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?<text>[^<>]+?)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?=<|$)|(?<=>|^)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?<text2>[^<>]+?)(?:[ \\r\\n\\t\u00A0/–-]|&nbsp;|&dash;)*(?=<)|^(?:[ \\r\\n\\t /–-]|&nbsp;|&dash;)*(?<text3>[^<>]+?)(?:[ \\r\\n\\t /–-]|&nbsp;|&dash;)*(?=$)",
             Pattern.DOTALL
         )
         private val ignoredTags = setOf("head", "script", "style")

view-webapp/src/main/sass/tour.scss

@@ -133,4 +133,64 @@
   #player.popup {
     min-width: 65vw;
   }
+
+  /* pairing section */
+
+  #pairing-content {
+    display: flex;
+    flex-flow: column;
+    justify-content: start;
+    align-items: center;
+    gap: 1em;
+  }
+
+  #pairing-lists {
+    margin-top: 1em;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    gap: 1em;
+    align-items: start;
+  }
+  .multi-select {
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    overflow-x: hidden;
+    overflow-y: auto;
+    min-height: 30vh;
+    max-height: 60vh;
+    min-width: 20vw;
+    max-width: 40vw;
+    border: solid 2px darkgray;
+    border-radius: 5px;
+    padding-top: 1em;
+    &:before {
+      position: absolute;
+      content: attr(title);
+      top: -0.5em;
+      left: 50%;
+      transform: translate(-50%, 0px);
+      white-space: nowrap;
+      font-size: smaller;
+      font-weight: bold;
+    }
+  }
+  #pairing-buttons {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: start;
+    align-items: stretch;
+    gap: 1em;
+  }
+  #unpairables {
+    display: flex;
+    flex-flow: column nowrap;
+    min-height: 10vh;
+    max-height: 30vh;
+    min-width: 50vw;
+  }
+  .choose-round.button {
+    padding: 0.2em 0.8em;
+  }
 }

view-webapp/src/main/webapp/js/domhelper.js

@@ -47,14 +47,9 @@ Element.prototype.toggleClass = function(className) {
   return this;
 }
 NodeList.prototype.hasClass = function(className) {
-  console.log('nodelist.hasClass')
-  console.log(this.item(0));
   return this.item(0).classList.contains(className);
 }
 Element.prototype.hasClass = function(className) {
-  console.log('element.hasClass')
-  console.log(this.classList)
-  console.log(this.classList.contains(className))
   return this.classList.contains(className);
 }
 Node.prototype.offset = function() {

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

@@ -148,13 +148,4 @@ onLoad(() => {
         });
     }
   });
-
-  if (!window.location.hash && window.location.search) {
-    window.location.hash = '#information'
-  }
-  if (window.location.hash) {
-    let step = window.location.hash.substring(1);
-    chooseStep(step);
-  }
-
 });

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

@@ -0,0 +1,2 @@
+onLoad(()=>{
+});

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

@@ -1,3 +1,29 @@
+#set($paired = $api.get("tour/${params.id}/part"))
 <div class="tab-content" id="pairing">
-  Pairing...
+  <div id="pairing-content">
+    <div id="pairing-round">
+      Pairings for round
+      <button class="ui floating choose-round prev-round button">&laquo;</button>
+      <span class="active-round">1</span>
+      <button class="ui floating choose-round next-round button">&raquo;</button>
+    </div>
+    <div id="pairing-lists">
+      <div id="pairables" class="multi-select" title="pairable players">
+      </div>
+      <div id="pairing-buttons">
+        <button id="pair" class="ui blue right labeled icon floating button">
+          <i class="angle double right icon"></i>
+          Pair
+        </button>
+        <button id="unpair" class="ui orange right labeled icon floating button">
+          <i class="angle double left icon"></i>
+          Unpair
+        </button>
+      </div>
+      <div id="paired" class="multi-select" title="games">
+      </div>
+    </div>
+    <div id="unpairables" class="multi-select" title="unpairable players">
+    </div>
+  </div>
 </div>

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

@@ -65,6 +65,7 @@
 #if($tour)
   const tour_id = ${tour.id};
   const tour_rounds = ${tour.rounds};
+  let activeRound = 1;
 #end
 #set($datepickerLocale = $translate.datepickerLocale($request.lang, $request.loc))
   const datepickerLocale = '$datepickerLocale';
@@ -100,6 +101,20 @@
 
   onLoad(() => {
 
+    if (!window.location.hash && window.location.search) {
+      window.location.hash = '#information'
+    }
+    if (window.location.hash) {
+      let step = window.location.hash.substring(1);
+      let suffix = /^(.)+-(\d+)$/.exec(step);
+      if (suffix) {
+        step = suffix[1];
+        activeRound = parseInt(suffix[2]);
+        $('.active-round').forEach(e => e.innerHTML = `${activeRound}`);
+      }
+      chooseStep(step);
+    }
+
     $('.step').on('click', e => {
       let tab = e.target.closest('.step');
       if (tab.classList.contains('active')) return;
@@ -125,10 +140,28 @@
       }
     });
 
+    // prev/next round buttons
+    if (activeRound === 1) {
+      $('.prev-round').addClass('disabled');
+    }
+    if (activeRound === tour_rounds) {
+      $('.next-round').addClass('disabled');
+    }
+    $('.prev-round').on('click', e => {
+      let base = window.location.href.replace(/-\d+$/g, '');
+      window.location.href = `#${base}-${activeRound - 1}`;
+      window.location.reload();
+    });
+    $('.next-round').on('click', e => {
+      let base = window.location.href.replace(/-\d+$/g, '');
+      window.location.href = `#${base}-${activeRound + 1}`;
+      window.location.reload();
+    });
   });
   // ]]#
 #include('/js/tour-information.inc.js')
 #include('/js/tour-registration.inc.js')
+#include('/js/tour-pairing.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>