Pairables list in progress

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

@@ -33,6 +33,12 @@ function success() {
   $('#error').addClass('hidden');
 }
 
+function showError(message) {
+  console.error(message);
+  $('#error')[0].innerText = message;
+  $('#error').removeClass('hidden');
+}
+
 function error(response) {
   const contentType = response.headers.get("content-type");
   let promise =
@@ -40,10 +46,8 @@ function error(response) {
     ? response.json().then(json => json.error || "unknown error")
     : Promise.resolve(response.statusText);
   promise.then(message => {
-    message = message.replaceAll(/([a-z])([A-Z])/g,"$1 $2").toLowerCase()
-    console.error(message);
-    $('#error')[0].innerText = message;
-    $('#error').removeClass('hidden');
+    message = message.replaceAll(/([a-z])([A-Z])/g,"$1 $2").toLowerCase();
+    showError(message);
   });
 }
 

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

@@ -66,17 +66,41 @@ Node.prototype.offset = function() {
 NodeList.prototype.offset = function() {
   this.item(0).offset();
 }
-Element.prototype.attr = function (key) {
-  return this.attributes[key].value;
+Element.prototype.attr = function (key, value) {
+  if (typeof(value) === 'undefined') {
+    return this.attributes[key].value;
+  } else {
+    this.setAttribute(key, value);
+    return this;
+  }
 }
-NodeList.prototype.attr = function(key) {
-  this.item(0).attr(key);
+NodeList.prototype.attr = function(key, value) {
+  if (typeof(value) === 'undefined') {
+    return this.item(0).attr(key);
+  } else {
+    this.forEach(elem => {
+      elem.attr(key, value);
+    });
+    return this;
+  }
 }
-Element.prototype.data = function (key) {
-  return this.attributes[`data-${key}`].value
+Element.prototype.data = function (key, value) {
+  if (typeof(value) === 'undefined') {
+    return this.attributes[`data-${key}`].value
+  } else {
+    this.setAttribute(`data-${key}`, value);
+    return this;
+  }
 }
-NodeList.prototype.data = function(key) {
-  this.item(0).data(key);
+NodeList.prototype.data = function(key, value) {
+  if (typeof(value) === 'undefined') {
+    this.item(0).data(key);
+  } else {
+    this.forEach(elem => {
+      elem.data(key, value);
+    })
+    return this;
+  }
 }
 NodeList.prototype.show = function() {
   this.item(0).show();
@@ -147,3 +171,25 @@ NodeList.prototype.focus = function() {
   let first = this.item(0);
   if (first) first.focus();
 }
+
+Element.prototype.index = function(selector) {
+  let i = 0;
+  let child = this;
+  while ((child = child.previousSibling) != null) {
+    if (typeof(selector) === 'undefined' || child.nodeType === Node.ELEMENT_NODE && child.matches(selector)) {
+      ++i;
+    }
+  }
+  return i;
+}
+
+NodeList.prototype.filter = function(selector) {
+  let result = [];
+  this.forEach(elem => {
+    if (elem.nodeType === Node.ELEMENT_NODE && elem.matches(selector)) {
+      result.push(elem);
+    }
+  });
+  return Reflect.construct(Array, result, NodeList);
+}
+

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

@@ -1,2 +1,23 @@
+let focused = undefined;
+
 onLoad(()=>{
+  $('.listitem').on('click', e => {
+    if (e.shiftKey && typeof(focused) !== 'undefined') {
+      let from = focused.index('.listitem');
+      let to = e.target.closest('.listitem').index('.listitem');
+      if (from > to) {
+        let tmp = from;
+        from = to;
+        to = tmp;
+      }
+      let parent = e.target.closest('.multi-select');
+      let children = parent.childNodes.filter('.listitem');
+      for (let j = from; j <= to; ++j) {
+        children.item(j).addClass('selected');
+        children.item(j).attr('draggable', true);
+      }
+    } else {
+      focused = e.target.closest('.listitem').toggleClass('selected').attr('draggable', true);
+    }
+  });
 });