From: Calin Crisan Date: Fri, 16 Aug 2013 12:29:18 +0000 (+0300) Subject: added input js validators X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=e55ed20cb5bb550b6fad670b301f3e5cce7ecc58;p=motioneye-debian added input js validators --- diff --git a/artwork/validation-error.svg b/artwork/validation-error.svg new file mode 100644 index 0000000..c140f3b --- /dev/null +++ b/artwork/validation-error.svg @@ -0,0 +1,82 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/css/base-site.css b/static/css/base-site.css index 486a462..9e05412 100644 --- a/static/css/base-site.css +++ b/static/css/base-site.css @@ -138,6 +138,11 @@ span.settings-item-label { font-size: 0.9em; } +span.settings-item-unit { + font-size: 0.6em; + padding-left: 5px; +} + div.settings-item-separator { height: 1px; border-top: 1px solid #414141; diff --git a/static/css/ui.css b/static/css/ui.css index 628fa5d..61ea310 100644 --- a/static/css/ui.css +++ b/static/css/ui.css @@ -97,7 +97,14 @@ input[type=text].styled:FOCUS { } input[type=text].number { - width: 50px; + width: 100px; +} + +input[type=text].error, +input[type=password].error { + background-image: url(../img/validation-error.png); + background-position: center right; + background-repeat: no-repeat; } diff --git a/static/img/validation-error.png b/static/img/validation-error.png new file mode 100644 index 0000000..b67d576 Binary files /dev/null and b/static/img/validation-error.png differ diff --git a/static/js/base.js b/static/js/base.js index 6c3f006..46a272a 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -31,6 +31,11 @@ function initUI() { makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%'); makeSlider($('#frameChangeThresholdSlider'), 0, 10000, 0, null, 3, 0, 'px'); makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%'); + + makeNumberValidator($('#snapshotIntervalEntry'), 1, 86400, false, false); + makeNumberValidator($('#gapEntry'), 1, 86400, false, false); + makeNumberValidator($('#preCaptureEntry'), 0, 100, false, false); + makeNumberValidator($('#postCaptureEntry'), 0, 100, false, false); } function handleDocumentReady() { diff --git a/static/js/ui.js b/static/js/ui.js index 7e075cb..769a560 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -215,255 +215,83 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima return slider; } -//function makeComboBox($select) { -// var container = $('
'); -// var buttonDiv = $('
'); -// var opened = false; -// var fading = false; -// var defaultCaption = null; -// var searchStr = ''; -// -// container.append(buttonDiv); -// -// var captionSpan = $(''); -// buttonDiv.append(captionSpan); -// buttonDiv.css('text-align', 'left'); -// -// var arrowSpan = $('▼'); -// buttonDiv.append(arrowSpan); -// -// var itemContainer = $('
'); -// container.append(itemContainer); -// itemContainer.mousedown(function () { -// return false; -// }); -// -// itemContainer[0].tabIndex = 0; -// -// var itemDivs = []; -// var captions = {}; -// $select.find('option').each(function () { -// var option = $(this); -// var caption = option.html(); -// var value = option.val(); -// -// if (value == '') { -// defaultCaption = caption; -// } -// -// var itemDiv = $('
' + caption + '
'); -// itemContainer.append(itemDiv); -// -// itemDiv.click(function () { -// setSelectedValue(value); -// close(); -// }); -// itemDiv.mouseover(function () { -// selectItemDiv(itemDiv); -// }); -// -// itemDiv[0]._value = value; -// -// itemDivs.push(itemDiv); -// captions[value] = caption; -// }); -// -// $select.after(container); -// buttonDiv.width(itemContainer.width() - 12); -// -// $select.change(function () { -// setSelectedValue($select.val(), true); -// }).change(); -// -// function setSelectedValue(value, skipSelect) { -// var caption = captions[value]; -// if (caption == null) { -// if (defaultCaption == null) { -// return; -// } -// caption = defaultCaption; -// } -// captionSpan.html(caption); -// if (!skipSelect) { -// $select.val(value); -// } -// -// var itemDiv = getItemDivByValue(value); -// if (itemDiv) { -// selectItemDiv(itemDiv); -// } -// } -// -// function handleKeyDown(e) { -// if (e.which == 13) { /* enter */ -// var itemDiv = itemContainer.find('div.combo-box-item-selected'); -// if (!itemDiv.length) { -// return; -// } -// -// var value = getValueByItemDiv(itemDiv); -// setSelectedValue(value); -// close(); -// } -// else if (e.which == 8) { /* backspace */ -// if (searchStr.length) { -// searchStr = searchStr.substring(0, searchStr.length - 1); -// } -// } -// else if (e.which == 27) { /* escape */ -// close(); -// } -// else if (e.which == 38) { /* up */ -// selectPrev(); -// return false; -// } -// else if (e.which == 40) { /* down */ -// selectNext(); -// return false; -// } -// } -// -// function handleKeyPress(e) { -// searchStr += String.fromCharCode(e.which).toLowerCase(); -// -// itemContainer.find('div.combo-box-item').each(function () { -// var itemDiv = $(this); -// if (itemDiv.text().toLowerCase().startsWith(searchStr)) { -// selectItemDiv(itemDiv, true); -// return false; -// } -// }); -// } -// -// function getValueByItemDiv(itemDiv) { -// return itemDiv[0]._value; -// } -// -// function getItemDivByValue(value) { -// for (var i = 0; i < itemDivs.length; i++) { -// var itemDiv = itemDivs[i]; -// if (itemDiv[0]._value == value) { -// return itemDiv; -// } -// } -// -// return null; -// } -// -// function selectPrev() { -// var prevItemDiv = null; -// var itemDiv = itemContainer.find('div.combo-box-item-selected'); -// if (!itemDiv.length) { -// prevItemDiv = itemDivs.slice(-1)[0]; -// } -// else { -// for (var i = 0; i < itemDivs.length; i++) { -// if (i > 0 && itemDiv[0] == itemDivs[i][0]) { -// prevItemDiv = itemDivs[i - 1]; -// break; -// } -// } -// } -// -// if (prevItemDiv) { -// selectItemDiv(prevItemDiv, true); -// } -// -// searchStr = ''; -// } -// -// function selectNext() { -// var nextItemDiv = null; -// var itemDiv = itemContainer.find('div.combo-box-item-selected'); -// if (!itemDiv.length) { -// nextItemDiv = itemDivs[0]; -// } -// else { -// for (var i = 0; i < itemDivs.length; i++) { -// if (i < itemDivs.length - 1 && itemDiv[0] == itemDivs[i][0]) { -// nextItemDiv = itemDivs[i + 1]; -// break; -// } -// } -// } -// -// if (nextItemDiv) { -// selectItemDiv(nextItemDiv, true); -// } -// -// searchStr = ''; -// } -// -// function selectItemDiv(itemDiv, scroll) { -// var oldItemDiv = itemContainer.find('div.combo-box-item-selected'); -// if (oldItemDiv.length == 0 || oldItemDiv[0] !== itemDiv[0]) { -// oldItemDiv.removeClass('combo-box-item-selected'); -// itemDiv.addClass('combo-box-item-selected'); -// } -// -// if (scroll) { -// var scrollTop = itemDiv.offset().top - itemContainer.offset().top + itemContainer.scrollTop(); -// itemContainer.scrollTop(scrollTop); -// } -// } -// -// function open() { -// buttonDiv.unlock(); -// buttonDiv.setActive(); -// buttonDiv.lock(); -// opened = true; -// itemContainer.css('opacity', '0'); -// itemContainer.css('left', '0px'); -// fading = true; -// itemContainer.animate({'opacity': '1'}, Reshaped.Forms.ANIM_DELAY, function () { -// fading = false; -// }); -// //arrowSpan.html('▲'); -// -// $('html').mousedown(close); -// $('html').keydown(handleKeyDown); -// $('html').keypress(handleKeyPress); -// -// itemContainer.focus(); -// searchStr = ''; -// -// var itemDiv = getItemDivByValue(select.val()); -// if (itemDiv) { -// selectItemDiv(itemDiv, true); -// } -// } -// -// function close() { -// buttonDiv.unlock(); -// buttonDiv.setNormal(); -// //arrowSpan.html('▼'); -// opened = false; -// fading = true; -// itemContainer.animate({'opacity': '0'}, Reshaped.Forms.ANIM_DELAY, function () { -// itemContainer.css('left', '-9999px'); -// fading = false; -// }); -// -// $('html').unbind('mousedown', close); -// $('html').unbind('keydown', handleKeyDown); -// $('html').unbind('keypress', handleKeyPress); -// searchStr = ''; -// } -// -// buttonDiv.click(function () { -// if (fading) { -// return; -// } -// -// if (opened) { -// close(); -// } -// else { -// open(); -// } -// -// return false; -// }); -// -// return container; -//} +function makeNumberValidator($input, minVal, maxVal, floating, sign, required) { + if (minVal == null) { + minVal = -Infinity; + } + if (maxVal == null) { + maxVal = Infinity; + } + if (floating == null) { + floating = false; + } + if (sign == null) { + sign = false; + } + if (required == null) { + required = true; + } + + function isValid(strVal) { + if (strVal.length === 0 && !required) { + return true; + } + + var numVal = parseInt(strVal); + if ('' + numVal != strVal) { + return false; + } + + if (numVal < minVal || numVal > maxVal) { + return false; + } + + if (!sign && numVal < 0) { + return false; + } + + return true; + } + + var msg = ''; + if (!sign) { + msg = 'enter a positive'; + } + else { + msg = 'enter a' + } + if (floating) { + msg += ' number'; + } + else { + msg += ' integer number'; + } + if (isFinite(minVal)) { + if (isFinite(maxVal)) { + msg += ' between ' + minVal + ' and ' + maxVal; + } + else { + msg += ' greater than ' + minVal; + } + } + else { + if (isFinite(maxVal)) { + msg += ' smaller than ' + maxVal; + } + } + + function validate() { + var strVal = $input.val(); + if (isValid(strVal)) { + $input.attr('title', ''); + $input.removeClass('error'); + } + else { + $input.attr('title', msg); + $input.addClass('error'); + } + } + + $input.keyup(validate); + $input.change(validate); +} diff --git a/templates/base-site.html b/templates/base-site.html index 35811e3..baddc6b 100644 --- a/templates/base-site.html +++ b/templates/base-site.html @@ -242,7 +242,7 @@ Snapshot Interval - + seconds ? @@ -314,17 +314,17 @@ Motion Gap - + seconds ? - Frames Captured Before - + Captured Before + frames ? - Frames Captured After - + Captured After + frames ?