Browse Source

update upstream

Namdak Tonpa 3 years ago
parent
commit
ddb18d6f7b
6 changed files with 215 additions and 110 deletions
  1. 57 75
      priv/css/calendar.css
  2. 30 6
      priv/js/calendar.js
  3. 87 22
      priv/js/comboLookup.js
  4. 5 3
      priv/js/nitro.js
  5. 14 1
      priv/js/sortable.js
  6. 22 3
      priv/js/validation.js

+ 57 - 75
priv/css/calendar.css

@@ -1,32 +1,24 @@
 @charset "UTF-8";
 @charset "UTF-8";
 
 
-/*!
- * Pikaday
- * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
- */
-
 .pika-single {
 .pika-single {
     z-index: 9999;
     z-index: 9999;
     display: block;
     display: block;
     position: relative;
     position: relative;
-    color: #333;
     background: #fff;
     background: #fff;
-    border: 1px solid #ccc;
-    border-bottom-color: #bbb;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    border-radius: 4px;
 }
 }
 
 
-/*
-clear child float (pika-lendar), using the famous micro clearfix hack
-http://nicolasgallagher.com/micro-clearfix-hack/
-*/
-.pika-single:before,
-.pika-single:after {
-    content: " ";
-    display: table;
+.pika-single:before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: 7px;
+    width: 0;
+    height: 0;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ffffff;
 }
 }
-.pika-single:after { clear: both }
-.pika-single { *zoom: 1 }
 
 
 .pika-single.is-hidden {
 .pika-single.is-hidden {
     display: none;
     display: none;
@@ -46,6 +38,10 @@ http://nicolasgallagher.com/micro-clearfix-hack/
 .pika-title {
 .pika-title {
     position: relative;
     position: relative;
     text-align: center;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
 }
 }
 
 
 .pika-label {
 .pika-label {
@@ -56,11 +52,12 @@ http://nicolasgallagher.com/micro-clearfix-hack/
     overflow: hidden;
     overflow: hidden;
     margin: 0;
     margin: 0;
     padding: 5px 3px;
     padding: 5px 3px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: bold;
     background-color: #fff;
     background-color: #fff;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
 }
 }
+
 .pika-title select {
 .pika-title select {
     cursor: pointer;
     cursor: pointer;
     position: absolute;
     position: absolute;
@@ -76,42 +73,40 @@ http://nicolasgallagher.com/micro-clearfix-hack/
 .pika-next {
 .pika-next {
     display: block;
     display: block;
     cursor: pointer;
     cursor: pointer;
-    position: relative;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     outline: none;
     outline: none;
     border: 0;
     border: 0;
     padding: 0;
     padding: 0;
-    width: 20px;
-    height: 30px;
+    min-width: 16px;
+    max-width: 16px;
+    height: 16px;
     /* hide text using text-indent trick, using width value (it's enough) */
     /* hide text using text-indent trick, using width value (it's enough) */
     text-indent: 20px;
     text-indent: 20px;
-    white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
     background-color: transparent;
     background-color: transparent;
     background-position: center center;
     background-position: center center;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
-    background-size: 75% 75%;
-    opacity: .5;
-    *position: absolute;
-    *top: 0;
+    transition: 0.3s;
+}
+
+.pika-prev {
+    left: 0;
 }
 }
 
 
-.pika-prev:hover,
-.pika-next:hover {
-    opacity: 1;
+.pika-next {
+    right: 0;
 }
 }
 
 
 .pika-prev,
 .pika-prev,
 .is-rtl .pika-next {
 .is-rtl .pika-next {
-    float: left;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
-    *left: 0;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.47 11.06L7.41664 8L10.47 4.94L9.52997 4L5.52997 8L9.52997 12L10.47 11.06Z' fill='%23757575'/%3E%3C/svg%3E%0A");
 }
 }
 
 
 .pika-next,
 .pika-next,
 .is-rtl .pika-prev {
 .is-rtl .pika-prev {
-    float: right;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
-    *right: 0;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.53003 4.94L8.58336 8L5.53003 11.06L6.47003 12L10.47 8L6.47003 4L5.53003 4.94Z' fill='%23757575'/%3E%3C/svg%3E%0A");
 }
 }
 
 
 .pika-prev.is-disabled,
 .pika-prev.is-disabled,
@@ -132,53 +127,45 @@ http://nicolasgallagher.com/micro-clearfix-hack/
     border: 0;
     border: 0;
 }
 }
 
 
-.pika-table th,
-.pika-table td {
-    width: 14.285714285714286%;
-    padding: 0;
+.pika-table thead {
+    display: none;
 }
 }
 
 
-.pika-table th {
-    color: #999;
-    font-size: 12px;
-    line-height: 25px;
-    font-weight: bold;
-    text-align: center;
+.pika-table th,
+.pika-table td {
+    padding: 2px 0;
 }
 }
 
 
 .pika-button {
 .pika-button {
     cursor: pointer;
     cursor: pointer;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     box-sizing: border-box;
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     outline: none;
     outline: none;
     border: 0;
     border: 0;
-    margin: 0;
-    width: 100%;
     padding: 5px;
     padding: 5px;
-    color: #666;
+    font-weight: 500;
     font-size: 12px;
     font-size: 12px;
-    line-height: 15px;
-    text-align: right;
-    background: #f5f5f5;
-}
-
-.pika-week {
-    font-size: 11px;
-    color: #999;
+    line-height: 16px;
+    color: #000000;
+    min-width: 30px;
+    max-width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    margin: 0 auto;
+    transition: 0.3s;
 }
 }
 
 
 .is-today .pika-button {
 .is-today .pika-button {
-    color: #33aaff;
-    font-weight: bold;
+    color: #fff;
+    background: #0D63B3;
 }
 }
 
 
 .is-selected .pika-button {
 .is-selected .pika-button {
     color: #fff;
     color: #fff;
     font-weight: bold;
     font-weight: bold;
-    background: #33aaff;
-    box-shadow: inset 0 1px 3px #178fe5;
-    border-radius: 3px;
+    background: #0D63B3;
 }
 }
 
 
 .is-inrange .pika-button {
 .is-inrange .pika-button {
@@ -189,31 +176,26 @@ http://nicolasgallagher.com/micro-clearfix-hack/
     color: #fff;
     color: #fff;
     background: #6CB31D;
     background: #6CB31D;
     box-shadow: none;
     box-shadow: none;
-    border-radius: 3px;
 }
 }
 
 
 .is-endrange .pika-button {
 .is-endrange .pika-button {
     color: #fff;
     color: #fff;
-    background: #33aaff;
+    background: #0D63B3;
     box-shadow: none;
     box-shadow: none;
-    border-radius: 3px;
 }
 }
 
 
 .is-disabled .pika-button {
 .is-disabled .pika-button {
     pointer-events: none;
     pointer-events: none;
     cursor: default;
     cursor: default;
-    color: #999;
-    opacity: .3;
+    color: #F0F0F0;
 }
 }
 
 
 .pika-button:hover {
 .pika-button:hover {
     color: #fff;
     color: #fff;
-    background: #ff8000;
+    background: #0D63B3;
     box-shadow: none;
     box-shadow: none;
-    border-radius: 3px;
 }
 }
 
 
-/* styling for abbr */
 .pika-table abbr {
 .pika-table abbr {
     border-bottom: none;
     border-bottom: none;
     cursor: help;
     cursor: help;

+ 30 - 6
priv/js/calendar.js

@@ -30,7 +30,7 @@ var clLangs = {
     }
     }
 };
 };
 function getDateParamBySign(date,sign) {
 function getDateParamBySign(date,sign) {
-    sign = sign.toUpperCase();
+    //sign = sign.toUpperCase();
     var param;
     var param;
     switch(sign) {
     switch(sign) {
         case "YYYY":
         case "YYYY":
@@ -44,6 +44,15 @@ function getDateParamBySign(date,sign) {
         case "DD":
         case "DD":
             param = (date.getDate() >= 10) ? date.getDate().toString() : ("0"+date.getDate().toString());
             param = (date.getDate() >= 10) ? date.getDate().toString() : ("0"+date.getDate().toString());
             break;
             break;
+        case "hh":
+            param = (date.getHours().toString());
+            break;
+        case "mm":
+            param = (date.getMinutes().toString());
+            break;
+        case "ss":
+            param = (date.getSeconds() >= 10) ? date.getSeconds().toString() : ("0"+date.getSeconds().toString());
+            break;
         default:
         default:
             param = date.toDateString();
             param = date.toDateString();
     }
     }
@@ -52,13 +61,18 @@ function getDateParamBySign(date,sign) {
 
 
 function formatter(date, format) {
 function formatter(date, format) {
     date = date || new Date();
     date = date || new Date();
-    format = format || "DD.MM.YYYY";
-    var signs = format.match(/(Y{2,4})|(M{2})|(D{2})/g);
+    format = format || "DD.MM.YYYYThh:mm:ss";
+    var signs = format.match(/(Y{2,4})|(M{2})|(D{2})|(T{1})|(h{2})|(m{2})|(s{2})/g);
     var params = [];
     var params = [];
     var reStr = '';
     var reStr = '';
+    let time = signs.indexOf("T");
     for(var i=0; i<signs.length; ++i) {
     for(var i=0; i<signs.length; ++i) {
-        params.push(getDateParamBySign(date,signs[i]));
-        reStr += ((i+1) != signs.length) ? signs[i] + "(.)" : signs[i];
+        if(i !== time) {
+          params.push(getDateParamBySign(date,signs[i]));
+          reStr += (i+1 != time && (i+1) != signs.length) ? i > time && time !== -1 ? signs[i] + "(:)" : signs[i] + "(.)" : signs[i];
+        } else {
+          reStr += "(T)"
+        }
     }
     }
     var re = new RegExp(reStr,'g');
     var re = new RegExp(reStr,'g');
     var delimiters = re.exec(format);
     var delimiters = re.exec(format);
@@ -103,6 +117,16 @@ function parser(str, format) {
 //     }else{ return new Date(Date.parse(value)); }
 //     }else{ return new Date(Date.parse(value)); }
 // }
 // }
 
 
+function parseDate(value) {
+  let formattedDate = formatter(value, "YYYY.MM.DDThh:mm:ss");
+  let timeDelimiter = formattedDate.indexOf("T");
+  let date = formattedDate.slice(0, timeDelimiter);
+  let time = formattedDate.slice(timeDelimiter + 1);
+  return tuple(
+    tuple(...date.split(".").map(elem => number(elem))),
+    tuple(...time.split(":").map(elem => number(elem)))
+  )
+}
 
 
 (function (root, factory)
 (function (root, factory)
 {
 {
@@ -579,7 +603,7 @@ function parser(str, format) {
             }else {
             }else {
                 self.setDate(null);
                 self.setDate(null);
             }
             }
-            if (!self._v) {
+            if (!self._v && e.initFlag != true) {
                 self.show();
                 self.show();
             }
             }
         };
         };

+ 87 - 22
priv/js/comboLookup.js

@@ -1,56 +1,102 @@
+function comboOpenFormById(formId) {
+  var form = qi(formId);
+  form && comboOpenForm(form);
+}
+
+function comboCloseFormById(formId) {
+  var form = qi(formId);
+  form && comboCloseForm(form);
+}
+
+function comboOpenForm(container) {
+  var dropdown = container.parentNode.querySelector('.dropdown');
+  container.scrollTop = 0;
+  container.parentNode.classList.add('dropdown-open');
+  dropdown.classList.add('dropdown-open');
+  activeForm = container.id;
+};
+
+function comboCloseForm(container) {
+  container.parentNode.classList.remove('dropdown-open');
+  //container.previousSibling.classList.remove('dropdown-open');
+  activeForm = undefined;
+};
+
+function comboLookupTextApply(dom) {
+  let elem = qi(dom);
+  if (elem) {
+    let textareaSplit = dom.split('_');
+    textareaSplit.pop();
+    const textarea = qi(textareaSplit.join('_'));
+    textarea ? textarea.value = elem.value : null;
+  }
+}
+
 function comboClear(dom) {
 function comboClear(dom) {
     let elem = qi('comboContainer_' + dom)
     let elem = qi('comboContainer_' + dom)
+    var dropdown = qi(dom).closest('.dropdown');
     if (elem) { elem.style.display = 'none' }
     if (elem) { elem.style.display = 'none' }
+    dropdown.classList.remove('dropdown-open');
+    dropdown.classList.remove('is-reversed');
     activeCombo = undefined; currentItem = undefined;
     activeCombo = undefined; currentItem = undefined;
 }
 }
 
 
 function comboSelect(dom, row, feed, mod, id) {
 function comboSelect(dom, row, feed, mod, id) {
-    let elem = qi(dom); comboClear(dom);
+    let elem = qi(dom);
+    comboClear(dom);
     if (qi(id)) elem.setAttribute("data-bind", qi(id).getAttribute('data-bind'));
     if (qi(id)) elem.setAttribute("data-bind", qi(id).getAttribute('data-bind'));
     elem.value = row;
     elem.value = row;
     elem.style.backgroundColor = 'white';
     elem.style.backgroundColor = 'white';
+    var dropdown = qi(dom).closest('.dropdown');
+    dropdown.classList.remove('dropdown-open');
+    dropdown.classList.remove('is-reversed');
+    dropdown.classList.add('dropdown-bind');
+    let value = qi(id) ? dec(unbase64(qi(id).getAttribute('data-bind'))) : string(row);
     direct(tuple(atom('comboSelect'),
     direct(tuple(atom('comboSelect'),
+                 value,
                  string(dom),
                  string(dom),
-                 string(row),
                  string(feed),
                  string(feed),
                  atom(mod)));
                  atom(mod)));
+    comboLookupTextApply(dom);
 }
 }
 
 
 function comboLookupChange(dom) {
 function comboLookupChange(dom) {
   let elem = qi(dom);
   let elem = qi(dom);
-  if (elem && elem.value == "" && elem.getAttribute("data-bind")) {
+  if (elem) {
     elem.removeAttribute("data-bind");
     elem.removeAttribute("data-bind");
+    const dropdown = qi(dom).closest('.dropdown');
+    if (dropdown) { dropdown.classList.remove('dropdown-bind'); }
+    comboLookupTextApply(dom);
   }
   }
 }
 }
 
 
-function clearInput(dom) {
-  const input = qi(dom);
-  if (input) {
-    input.value = '';
-    input.removeAttribute('data-bind');
-  }
-  comboClear(dom);
-}
-
 function comboLookupClick(dom, feed, mod) {
 function comboLookupClick(dom, feed, mod) {
+  var dropdown = qi(dom).closest('.dropdown');
   var char = event.which || event.keyCode;
   var char = event.which || event.keyCode;
   if (char ==  1 && !activeCombo && qi(dom).value == '') {
   if (char ==  1 && !activeCombo && qi(dom).value == '') {
     activeCombo = dom;
     activeCombo = dom;
     currentItem = undefined;
     currentItem = undefined;
+    dropdown.classList.add('dropdown-open');
+    if (window.innerHeight - dropdown.getBoundingClientRect().bottom < 100)
+      dropdown.classList.add('is-reversed');
     direct(tuple(atom('comboKey'),
     direct(tuple(atom('comboKey'),
                 atom('all'),
                 atom('all'),
                 string(dom),
                 string(dom),
                 string(feed),
                 string(feed),
                 atom(mod)));
                 atom(mod)));
     return
     return
-  } else if(char ==  1 && activeCombo == dom){comboClear(dom);}
+  } else if (char ==  1 && activeCombo == dom) { comboClear(dom); }
 }
 }
 
 
 function comboLookupKeydown(dom, feed, mod) {
 function comboLookupKeydown(dom, feed, mod) {
+    var dropdown = qi(dom).closest('.dropdown');
     var char = event.which || event.keyCode;
     var char = event.which || event.keyCode;
     if (char == 40 && !activeCombo && qi(dom).value == '') {
     if (char == 40 && !activeCombo && qi(dom).value == '') {
         activeCombo = dom;
         activeCombo = dom;
         currentItem = undefined;
         currentItem = undefined;
+        dropdown.classList.add('dropdown-open');
+        if (window.innerHeight - dropdown.getBoundingClientRect().bottom < 100)
+          dropdown.classList.add('is-reversed');
         direct(tuple(atom('comboKey'),
         direct(tuple(atom('comboKey'),
                      atom('all'),
                      atom('all'),
                      string(dom),
                      string(dom),
@@ -58,29 +104,34 @@ function comboLookupKeydown(dom, feed, mod) {
                      atom(mod)));
                      atom(mod)));
         return
         return
     }
     }
-    if (activeCombo && [38, 40].includes(char)) {
+    if (activeCombo && [35, 36, 38, 40].includes(char)) {
         event.preventDefault();
         event.preventDefault();
-        console.log('Keycode: ' + char + ", DOM: " + dom);
         if (char == 40) { set_focus( currentItem && ( !cycleEnabled || currentItem.nextSibling)
         if (char == 40) { set_focus( currentItem && ( !cycleEnabled || currentItem.nextSibling)
                         ? currentItem.nextSibling : qi('comboContainer_' + dom).firstChild, true) }
                         ? currentItem.nextSibling : qi('comboContainer_' + dom).firstChild, true) }
+        if (char == 35) { set_focus( currentItem && ( !cycleEnabled || currentItem.nextSibling)
+                        ? currentItem.parentNode.lastChild : currentItem, true) }
+
         if (char == 38) { set_focus( currentItem && ( !cycleEnabled || currentItem.previousSibling)
         if (char == 38) { set_focus( currentItem && ( !cycleEnabled || currentItem.previousSibling)
                         ? currentItem.previousSibling : qi('comboContainer_' + dom).lastChild, true) }
                         ? currentItem.previousSibling : qi('comboContainer_' + dom).lastChild, true) }
+        if (char == 36) { set_focus( currentItem && ( !cycleEnabled || currentItem.previousSibling)
+                        ? currentItem.parentNode.firstChild : currentItem, true) }
     }
     }
+    if (char == 13) { event.preventDefault(); return }
 }
 }
 
 
 function comboLookupKeyup(dom, feed, mod) {
 function comboLookupKeyup(dom, feed, mod) {
+    var dropdown = qi(dom).closest('.dropdown')
     var char = event.which || event.keyCode;
     var char = event.which || event.keyCode;
-    if (char == 27 || (char == 8 || char == 46) && qi(dom).value == '') {
-        qi(dom).value = '';
-        comboClear(dom);
-        return
-    }
+    if (char == 27 || (char == 8 || char == 46) && qi(dom).value == '') { clearInput(dom); return }
     if (char == 13 && currentItem) { currentItem.click(); return }
     if (char == 13 && currentItem) { currentItem.click(); return }
-    if ([33, 34, 35, 36, 37, 39].includes(char)) { return }
-    if (activeCombo && [38, 40].includes(char)) { return }
+    if ([33, 34, 37, 39].includes(char)) { return }
+    if (activeCombo && [35, 36, 38, 40].includes(char)) { return }
     else {
     else {
         activeCombo = dom;
         activeCombo = dom;
         currentItem = undefined;
         currentItem = undefined;
+        dropdown.classList.add('dropdown-open');
+        if (window.innerHeight - dropdown.getBoundingClientRect().bottom < 100)
+          dropdown.classList.add('is-reversed');
         direct(tuple(atom('comboKey'),
         direct(tuple(atom('comboKey'),
                      bin(qi(dom).value),
                      bin(qi(dom).value),
                      string(dom),
                      string(dom),
@@ -102,11 +153,24 @@ function set_focus(elem, scroll) {
   }
   }
 }
 }
 
 
+function clearInput(dom) {
+  const input = qi(dom);
+  if (input) {
+    input.value = '';
+    input.removeAttribute('value');
+  }
+  comboLookupChange(dom);
+  comboClear(dom);
+}
+
 document.addEventListener("click", () => {
 document.addEventListener("click", () => {
   if (activeCombo && event.target.className != 'triangle' &&
   if (activeCombo && event.target.className != 'triangle' &&
     !event.target.closest('#comboContainer_' + activeCombo)) {
     !event.target.closest('#comboContainer_' + activeCombo)) {
     qi(activeCombo).value = '';
     qi(activeCombo).value = '';
     comboClear(activeCombo);
     comboClear(activeCombo);
+  } else if (activeForm && event.target.className != 'triangle' &&
+    !event.target.closest("#" + activeForm)) {
+    comboCloseFormById(activeForm);
   }
   }
 })
 })
 
 
@@ -115,5 +179,6 @@ function comboOnFocus(e) { }
 function comboLookupMouseOut(dom) { }
 function comboLookupMouseOut(dom) { }
 
 
 var activeCombo = undefined
 var activeCombo = undefined
+var activeForm = undefined
 var currentItem = undefined
 var currentItem = undefined
 var cycleEnabled = false
 var cycleEnabled = false

+ 5 - 3
priv/js/nitro.js

@@ -21,8 +21,7 @@ function querySourceRaw(Id) {
             val = qs('[id="'+Id+'"]:checked'); val = val ? val.value : ""; break;
             val = qs('[id="'+Id+'"]:checked'); val = val ? val.value : ""; break;
         case 'INPUT':
         case 'INPUT':
             switch (el.getAttribute("type")) {
             switch (el.getAttribute("type")) {
-                case 'radio': val = qs('input[name='+Id+']:checked'); val = val ? val.value : ""; break;
-                case 'checkbox': val = qs('input[id='+Id+']:checked'); val = val ? val.value : ""; break;
+                case 'radio': case 'checkbox': val = qs('input[name='+Id+']:checked'); val = val ? val.value : ""; break;
                 case 'date': val = Date.parse(el.value);  val = val && new Date(val) || ""; break;
                 case 'date': val = Date.parse(el.value);  val = val && new Date(val) || ""; break;
                 case 'calendar': val = pickers[el.id]._d || ""; break;
                 case 'calendar': val = pickers[el.id]._d || ""; break;
                 case 'comboLookup': case 'hidden':
                 case 'comboLookup': case 'hidden':
@@ -44,7 +43,10 @@ function querySourceRaw(Id) {
             else if (el.getAttribute('data-vector-input')) {
             else if (el.getAttribute('data-vector-input')) {
                 val = querySourceRaw(el.children[1].id);
                 val = querySourceRaw(el.children[1].id);
             } else if (el.getAttribute('data-edit-input')) {
             } else if (el.getAttribute('data-edit-input')) {
-                val = querySourceRaw(el.children[0].children[0].children[0].id);
+                let sortableList = el.children[1];
+                let sourceRaw = sortableList ? sortableList.id :
+                  el.children[0].children[0].children[0].id;
+                val = querySourceRaw(sourceRaw);
             } else if (el.getAttribute('data-sortable-list')) {
             } else if (el.getAttribute('data-sortable-list')) {
                 val = getSortableValues('#' + el.id);
                 val = getSortableValues('#' + el.id);
             } else if (el.contentEditable === 'true') {
             } else if (el.contentEditable === 'true') {

+ 14 - 1
priv/js/sortable.js

@@ -170,10 +170,18 @@ function () {
       var inputElement = document.getElementById(input);
       var inputElement = document.getElementById(input);
       if (bind !== '' && bind !== 'null') {
       if (bind !== '' && bind !== 'null') {
         if (inputElement) {
         if (inputElement) {
+          const dropdown = inputElement.parentNode;
+          if (dropdown && dropdown.classList.contains('dropdown')) { dropdown.classList.remove('dropdown-bind'); }
           inputElement.value = '';
           inputElement.value = '';
           inputElement.removeAttribute("data-bind");
           inputElement.removeAttribute("data-bind");
         }
         }
         appendItemFromBind(this.list.id,value,bind);
         appendItemFromBind(this.list.id,value,bind);
+      } else if(value && Date.prototype.isPrototypeOf(value)) {
+        appendItemFromBind(this.list.id,inputElement.value,pickers[input]._d || "");
+        if (inputElement) {
+          inputElement.value = '';
+          inputElement.removeAttribute("data-bind");
+        }
       }
       }
     }
     }
   }, {
   }, {
@@ -183,6 +191,7 @@ function () {
         let list = Array.from(item.children).find(x => x.getAttribute("list-item-content"));
         let list = Array.from(item.children).find(x => x.getAttribute("list-item-content"));
         let text = list.firstChild.innerHTML;
         let text = list.firstChild.innerHTML;
         let bind = item.getAttribute('data-bind');
         let bind = item.getAttribute('data-bind');
+        if(item.getAttribute('date-bind')) return new Date(item.getAttribute('date-bind'));
         if (bind) return { 'text': text, 'bind': bind };
         if (bind) return { 'text': text, 'bind': bind };
         return text;
         return text;
       }));
       }));
@@ -205,7 +214,7 @@ function removeSortableItem(list, item) {
 function addSortableItemFrom(list, input) {
 function addSortableItemFrom(list, input) {
   var value = querySourceRaw(input);
   var value = querySourceRaw(input);
   var isAdded = SortableMap.get(list).items.map(el => el.textContent).includes(value.text || value);
   var isAdded = SortableMap.get(list).items.map(el => el.textContent).includes(value.text || value);
-  if(qi(input).value != '' & !isAdded)
+  if(qi(input).value != '' && !isAdded)
     SortableMap.get(list).addItemFrom(input);
     SortableMap.get(list).addItemFrom(input);
 }
 }
 
 
@@ -228,6 +237,10 @@ function appendItemFromBind(dom,value,bind) {
        '<div class="list__item-handle" data-sortable-handle="data-sortable-handle"></div>' +
        '<div class="list__item-handle" data-sortable-handle="data-sortable-handle"></div>' +
     '</div>'
     '</div>'
   var new_item = template.content.firstChild;
   var new_item = template.content.firstChild;
+  if(bind instanceof Date) {
+    new_item.setAttribute("date-bind", bind);
+    new_item.setAttribute("data-bind", "");
+  }
   sortable.list.appendChild(new_item);
   sortable.list.appendChild(new_item);
   sortable.items.push(new_item);
   sortable.items.push(new_item);
 }
 }

+ 22 - 3
priv/js/validation.js

@@ -1,4 +1,3 @@
-
 function validateSources(list) {
 function validateSources(list) {
     return list.reduce(function(acc,x) {
     return list.reduce(function(acc,x) {
         var event = new CustomEvent('validation');
         var event = new CustomEvent('validation');
@@ -6,8 +5,12 @@ function validateSources(list) {
         var el = qi(x),
         var el = qi(x),
             listener = el && el.validation,
             listener = el && el.validation,
             res = !listener || listener && el.dispatchEvent(event);
             res = !listener || listener && el.dispatchEvent(event);
-        if (!res) { console.log("Validation failed:" + x); }
-        if (el) el.style.background = res ? '' : 'pink';
+        console.log(el && el.parentNode.lastChild);
+        if (!res) {
+          console.log("Validation failed:" + x);
+          scrollToValidationInputs();
+        }
+        //if (el) el.style.background = res ? '' : 'pink';
         return res && acc; },true); }
         return res && acc; },true); }
 
 
 (function () {
 (function () {
@@ -18,3 +21,19 @@ function validateSources(list) {
        return evt;  };
        return evt;  };
   CustomEvent.prototype = window.Event.prototype;
   CustomEvent.prototype = window.Event.prototype;
   window.CustomEvent = CustomEvent; })();
   window.CustomEvent = CustomEvent; })();
+
+function scrollToValidationInputs() {
+  const inputFields = document.querySelectorAll('.column')
+
+  for (let item of inputFields) {
+    if (item.classList.contains('error')) {
+      const errorInputField = document.querySelector('.column.error')
+      console.log(errorInputField)
+
+      errorInputField.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+    }
+  }
+}