Revize 0356f5a9

Added vertex archetype initialization + hide of unused selectors

sources/src/main/webapp/js/app.js

@@ -23 +23 @@
 	this.cookies = new Cookies;
 	/** @prop {MarkSymbol} markSymbol */
 	this.markSymbol = new MarkSymbol;
+	/** @prop {Filter} filter */
+	this.filter = new Filter;
 
 	/** @prop {string} HOME_URL Application home URL. */
 	this.HOME_URL = null;
@@ -87 +89 @@
 	this.reset = function() {
 		app.viewportComponent.reset();
 		app.sidebarComponent.reset();
+        app.filter.resetSelectors();
 
 		app.edgeList = [];
 		app.nodeList = [];
@@ -159 +162 @@
 			document.getElementById('filters').classList.toggle('hidden');
 		});
 
+
+		document.getElementById('filterTypeSelection').addEventListener('change', function (e) {
+			var selected = this.value;
+			if(selected === 'Archetype') {
+                document.getElementById('vertexArchetypeSelection').classList.remove('hidden');
+                document.getElementById('logicOperationSelection').classList.add('hidden');
+                document.getElementById('attributeTypeSelection').classList.add('hidden');
+                document.getElementById('matchTypeSelection').classList.remove('hidden');
+
+            } else if (selected === 'Attribute') {
+                document.getElementById('vertexArchetypeSelection').classList.add('hidden');
+                document.getElementById('logicOperationSelection').classList.add('hidden');
+                document.getElementById('attributeTypeSelection').classList.remove('hidden');
+                document.getElementById('matchTypeSelection').classList.remove('hidden');
+
+			} else if (selected === 'Logical') {
+                document.getElementById('vertexArchetypeSelection').classList.add('hidden');
+				document.getElementById('logicOperationSelection').classList.remove('hidden');
+                document.getElementById('attributeTypeSelection').classList.add('hidden');
+                document.getElementById('matchTypeSelection').classList.add('hidden');
+            }
+        });
+
 		// search
 		document.getElementById('searchText').addEventListener('keyup', function(e) {
 			// enter key
@@ -344 +370 @@
 
 			self.loader.disable();
 
+			self.filter.initializeSelectors(self.archetype.vertex);
+
 		}, function() {
 			// go to the upload page
 			window.location.replace('./');

sources/src/main/webapp/js/filter.js

@@ +1 @@
+/**
+ * Class is used for manipulation with filters
+ * @constructor
+ */
+function Filter() {
+
+    /**
+     * Function add values from input list to archetype selector.
+     * @param vertexArchetypes list of vertex archetypes
+     */
+    this.initializeSelectors = function(vertexArchetypes) {
+
+        let vertexArchetypeSelection = document.getElementById('vertexArchetypeSelection');
+
+        vertexArchetypes.forEach(function(archetype) {
+            let option = document.createElement("option");
+            option.text = archetype.name;
+            option.value = archetype.name;
+            vertexArchetypeSelection.add(option);
+        });
+    };
+
+    /**
+     * Function remove all options from archetype selector.
+     */
+    this.resetSelectors = function () {
+        let vertexArchetypeSelection = document.getElementById('vertexArchetypeSelection');
+
+        while (vertexArchetypeSelection.length > 0){
+            vertexArchetypeSelection.remove(0);
+        }
+    }
+
+}

sources/src/main/webapp/showGraph.jsp

@@ -38 +38 @@
 
 		<script src="js/constants.js"></script>
 		<script src="js/coordinates.js"></script>
+		<script src="js/filter.js"></script>
 		<script src="js/forceDirected.js"></script>
 		<script src="js/graphLoader.js"></script>
 		<script src="js/graphExporter.js"></script>
@@ -163 +164 @@
 							<hr class="navbar-separator">
 						</li>
 						<li>
-							<button class="btn btn-block view-refresh-reset-diagram" id="view_refresh_reset_diagram" title="Refresh diagram - reset position"></a>
+							<button class="btn btn-block view-refresh-reset-diagram" id="view_refresh_reset_diagram" title="Refresh diagram - reset position"></button>
 						</li>
 					</ul>
 				</nav>
@@ -175 +176 @@
 					<button class="button buttonClassic" id="deleteFilter">Delete filter</button>
 					<select id="filterTypeSelection">
 						<option value="Archetype"> Archetype </option>
-						<option value="Atribute"> Atribute </option>
+						<option value="Attribute"> Attribute </option>
 						<option value="Logical"> Logical </option>
 					</select>
-					<select id="logicOperationSelection" disabled="disabled">
-						<option value="And"> And </option>
-						<option value="Or"> Or </option>
-						<option value="Xor"> Xor </option>
-					</select>
-					<select id="attributeTypeSelection" disabled="disabled">
+					<select id="vertexArchetypeSelection"></select>
+					<select class="hidden" id="attributeTypeSelection">
 						<option value="Enum"> Enum </option>
 						<option value="String"> String </option>
 						<option value="Number"> Number </option>
 						<option value="Date"> Date </option>
 					</select>
+					<select class="hidden" id="logicOperationSelection">
+						<option value="And"> And </option>
+						<option value="Or"> Or </option>
+						<option value="Xor"> Xor </option>
+					</select>
+					<select id="matchTypeSelection">
+						<option value="Match"> Match </option>
+						<option value="NotMatch"> Not Match </option>
+					</select>
 				</div>
 
 				<div class="vertex-tree" id="vertexTree">