Revize fbb0d123

Getting min and max date for date slider (refs #7465)

sources/imiger-core/src/main/webapp/css/components/modal-window.css

@@ -11 +11 @@
 
 .modal-content {
 	position: relative;
-	max-width: 440px;
+	max-width: 540px;
 	min-height: 40px;
 	max-height: 100%;
 	margin-left: auto;

sources/imiger-core/src/main/webapp/js/components/filterModalWindow.js

@@ -5 +5 @@
 	constructor() {
 		super();
 
+		this._sliderString = "$(\"#slider\").dateRangeSlider({valueLabels:\"change\", step:{days:1}});";
 		this._baseFilterOptions = {
 			nodeType: 'Node type',
 			vertexArchetype: 'Vertex archetype',
@@ -76 +77 @@
 				type: 'hidden',
 				name: 'dataType',
 			}),
-			DOM.h('table', {}, [
+			DOM.h('table', {
+				style: "width:100%;"
+			}, [
 				DOM.h('tr', {}, [
 					DOM.h('td', {}, [
 						DOM.h('label', {
@@ -135 +138 @@
 					]),
 				]),
 			]),
-			DOM.h('script', {}, [
-				DOM.t("$(\"#slider\").dateRangeSlider();")
-			]),
 		]);
 		this._bodyElement.appendChild(this._form);
 
@@ -180 +180 @@
 
 		this._dateRangeField = DOM.h('div', {
 			id: "slider"
-		}, []);
+		}, [/*
+			DOM.h('input', {
+				type: 'date',
+				name: 'value-from',
+			}),
+			DOM.t(' - '),
+			DOM.h('input', {
+				type: 'date',
+				name: 'value-to',
+			}),*/
+		]);
+
+		this._showSlider = DOM.h('script', {
+			id: "sliderScript",
+		}, [
+				DOM.t(this._sliderString)
+			]),
 
 		// number
 		this._numberField = DOM.h('input', {
@@ -302 +318 @@
 			case FilterDataType.DATE:
 				if (value === DateFilterOperation.RANGE) {
 					this._valueCell.appendChild(this._dateRangeField);
+					this._valueCell.appendChild(this._showSlider);
 				} else {
 					this._valueCell.appendChild(this._dateField);
 				}
@@ -421 +438 @@
 			node.isFound = true;
 		});
 	}
+
+	setDateBounds(minDate, maxDate) {
+		if(minDate !== null && maxDate !== null) {
+			this._sliderString = "$(\"#slider\").dateRangeSlider({valueLabels:\"change\", step:{days:1}, bounds:{min: new Date(" + minDate.toString() + "), max: new Date(" + maxDate.toString() + ")}});";
+			var element = document.getElementById("sliderScript");
+		}
+	}
 }

sources/imiger-core/src/main/webapp/js/showGraphApp.js

@@ -257 +257 @@
 
 			this.spinLoaderComponent.disable();
 
+			// find date in graph data
+			this.checkDate();
 		} catch (error) {
 			if (error instanceof HttpError) {
 				switch (error.response.status) {
@@ -284 +286 @@
 			window.location.replace('./');
 		}
 	}
+
+	/**
+	 * Checks for date bounds and set them to filter
+	 */
+	checkDate() {
+		var dateAttributes = [];
+		var minDate = null;
+		var maxDate = null;
+		this.attributeTypeList.forEach(function (attribute) {
+			if(attribute.dataType === "DATE") {
+				dateAttributes.push(attribute.name);
+			}
+		});
+		if(dateAttributes.length > 0) {
+			this.vertexList.forEach(function (vertex) {
+				vertex.attributes.forEach(function (a) {
+					var index = dateAttributes.indexOf(a[0]);
+					if(index > -1) {
+						var date = Date.parse(a[1]);
+						if(isNaN(date)) {
+							date = new Date(Number(a[1]));
+						}
+
+						if(date !== 'Invalid Date') {
+							if(minDate === null || date < minDate) {
+								minDate = date;
+							}
+							if(maxDate === null || date > maxDate) {
+								maxDate = date;
+							}
+						}
+					}
+				});
+			});
+		}
+		this.filterModalWindowComponent.setDateBounds(minDate, maxDate);
+	}
 }
 
 export default ShowGraphApp;