103 lines
3.9 KiB
JavaScript
103 lines
3.9 KiB
JavaScript
(function (glb) {
|
|
var gTypeDomMap = new Map();//column type --> which condition area show/hide and use
|
|
var gAllDomRange = new Map();//range1 div, range2 div
|
|
function initTypeMap() {
|
|
let numRangeDomRef = null, startNumDomRef = null, endNumDomRef = null;
|
|
let dateRangeDomRef = null, startDateDomRef = null, endDateDomRef = null;
|
|
numRangeDomRef = document.querySelector('#numRangePicker');
|
|
if (numRangeDomRef) {
|
|
startNumDomRef = numRangeDomRef.children[0];
|
|
endNumDomRef = numRangeDomRef.children[2];
|
|
}
|
|
dateRangeDomRef = document.querySelector('#dateRangePicker');
|
|
if (dateRangeDomRef) {
|
|
startDateDomRef = dateRangeDomRef.children[0];
|
|
endDateDomRef = dateRangeDomRef.children[2];
|
|
}
|
|
let arrNum = [numRangeDomRef, startNumDomRef, endNumDomRef];
|
|
let arrDate = [dateRangeDomRef, startDateDomRef, endDateDomRef];
|
|
//Dom area information
|
|
gAllDomRange.set('NUM_ELE', arrNum);
|
|
gAllDomRange.set('DATE_ELE', arrDate);
|
|
//Database data type --> Dom area
|
|
gTypeDomMap.set('INT', 'NUM_ELE');
|
|
gTypeDomMap.set('TINYINT', 'NUM_ELE');
|
|
gTypeDomMap.set('VARCHAR', 'NUM_ELE');//use number temporary for string
|
|
gTypeDomMap.set('DATETIME', 'DATE_ELE');
|
|
gTypeDomMap.set('OtherOutofScope', 'NUM_ELE');
|
|
|
|
//every time column changed, show/hide the area based on column data type.
|
|
$("#column").on("change", onChangeRangeByQueryConditionType);
|
|
|
|
//call it for 1st time hide/show selected value.
|
|
onChangeRangeByQueryConditionType();
|
|
};
|
|
function onChangeRangeByQueryConditionType() {
|
|
let showAreaKey = getAreaKey();
|
|
gAllDomRange.forEach(function (curval, curkey, mapitself) {
|
|
let curDomTmp = $(curval[0]);
|
|
if (curkey === showAreaKey) {
|
|
if (curDomTmp.hasClass("hidden"))
|
|
curDomTmp.removeClass("hidden");
|
|
//if (!curDomTmp.hasClass("show"))
|
|
// curDomTmp.addClass("show");
|
|
}
|
|
else //hide
|
|
{
|
|
//if (curDomTmp.hasClass("show"))
|
|
// curDomTmp.removeClass("show");
|
|
if (!curDomTmp.hasClass("hidden")) {
|
|
curDomTmp.addClass("hidden");
|
|
|
|
//clear value when turn to hidden ???
|
|
$(curval[1]).val = '';
|
|
$(curval[2]).val = '';
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
function getAreaKey() {
|
|
let conditionType = "INT";
|
|
let showAreaKey = 'NUM_ELE';
|
|
if (document.querySelector("#column").selectedOptions && document.querySelector("#column").selectedOptions.length > 0)
|
|
conditionType = document.querySelector("#column").selectedOptions[0].dataset.coltype;
|
|
if (gTypeDomMap.has(conditionType)) {
|
|
showAreaKey = gTypeDomMap.get(conditionType);
|
|
}
|
|
else {
|
|
showAreaKey = gTypeDomMap.get('OtherOutofScope');
|
|
}
|
|
return showAreaKey;
|
|
};
|
|
function getASelected() {
|
|
let showAreaKey = getAreaKey();
|
|
let domRefArr = gAllDomRange.get(showAreaKey);
|
|
if (showAreaKey === 'DATE_ELE')
|
|
return "'" + $(domRefArr[1]).val() + "'"; //for database mysql: between '2023-06-01' and '2023-06-06'
|
|
else
|
|
return $(domRefArr[1]).val();
|
|
};
|
|
function getBSelected() {
|
|
let showAreaKey = getAreaKey();
|
|
let domRefArr = gAllDomRange.get(showAreaKey);
|
|
if (showAreaKey === 'DATE_ELE')
|
|
return "'" + $(domRefArr[2]).val() + "'"; //for database mysql: between '2023-06-01' and '2023-06-06'
|
|
else
|
|
return $(domRefArr[2]).val();
|
|
};
|
|
|
|
let retObj = {
|
|
initTypeMap: initTypeMap,
|
|
getASelected: getASelected,
|
|
getBSelected: getBSelected
|
|
}
|
|
glb.SwitchNumDateRange = retObj;
|
|
})(window);
|
|
|
|
|
|
|
|
|
|
|