pfisjs/views/OLG-locationselection_inlay.jade

include mixins

- var actual_background = "yellow";

mixin do_location(location)
	- style="cursor: pointer; padding-top: 5px; padding-bottom: 5px;";
	- style_text="";
	- if(actual_location_id === location.id) { style+="background-color: " + actual_background; style_text="font-weight: bold;" }
	li(class="list-group-item" style=style, onclick="select_location('#{location.id}');")
		table(width="100%")
			tr
				td(style="width: 80%;")
					span(id="#{location.id}", style=style_text, data-location="true") #{location.name}
				td
					span(id="#{location.id}_sign", style=style_text) #{location.sign}
			

mixin do_unit(unit)
	li(class="list-group-item")
		<b>#{unit.name}</b>
	if unit.locations.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each location in unit.locations
				+do_location(location)
	if unit.subunits.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each sub in unit.subunits
				+do_unit(sub)

.subroot
	.new_flex_zero(style="margin-bottom: 20px;")
		.container-fluid
			h4 Ort aus der Liste hinzufügen

			form(class="form-horizontal", id="form-filter")
				button(type="submit", style="display: none;")
				.form-group()
					label(for='edit_filter', class="col-sm-1 control-label") Filter
					.col-sm-11
						input(id="edit_filter", type="text", class="form-control", oninput="adjust_visible_locations(this);")
						
			script.
				$("#form-filter").on('submit', function(e){
					console.log('FILTER SUBMIT');
					var actual_location_name = $("#actual_location_name").val();
					console.log(actual_location_name);
					if(actual_location_name !== "" && $("#edit_filter").val() ===  actual_location_name) {
						console.log("DO SUBMIT");
						$("#form-locationselector").submit();
					}
					e.preventDefault();
				});
				
				function set_visibility_according_to_filter(substrRegex, elems) {
					var actual_id = $("#actual_location_id").val();
					elems.each(function(index) {
						my_span = $(this);
						var txt = my_span.text();
						var id = my_span.prop('id');
						
						if(substrRegex.test(txt)) {
							$(this).closest('li').show();
							if(actual_id === id)
								$("#submit_button").prop('disabled', false);
						}
						else {	
							$(this).closest('li').hide();
							if(actual_id === id)
								$("#submit_button").prop('disabled', true);
						}
					});
				}
				
				function adjust_visible_locations(my_input) {
					console.log(my_input.value);
					
					// regex used to determine if a string contains the substring `q`
					substrRegex = new RegExp(my_input.value, 'i');
					
					set_visibility_according_to_filter(substrRegex, $("[data-location='true']"));
				}

			form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/add_predefined_location", id="form-locationselector")
				input(type="hidden", name="actual_location_id", id="actual_location_id", value="#{actual_location_id}")
				input(type="hidden", name="actual_location_name", id="actual_location_name", value="#{actual_location_name}")
				input(type="hidden", name="actual_location_sign", id="actual_location_sign", value="#{actual_location_sign}")
				button(class="btn btn-success btn-sm", type="submit", id="submit_button") 
					span(class="glyphicon glyphicon-ok", aria-hidden="true")
					span 
					span Übernehmen
					
				button(class="btn btn-warning btn-sm", type="button", onclick="goto_mainpage();") 
					span(class="glyphicon glyphicon-remove-circle", aria-hidden="true")
					span 
					span Abbrechen

	.new_flex_one(style="padding-bottom: 200px;")
		.container-fluid
			ul(class="list-group")
				for unit in units
					+do_unit(unit)
									
		script.
			if("#{actual_location_id}" === "")
				$("#submit_button").prop('disabled', true);
										
			select_location = function(location_id)
			{
				console.log("SELECTED: " + location_id)
				actual = $("#actual_location_id").val();
				if(actual === location_id)
				{
					console.log("NOTHIN CHANGED");
					return;
				}
				
				$("#"+actual).css("font-weight", "normal");
				$("#"+actual+"_sign").css("font-weight", "normal");
				$("#"+actual).closest("li").css("background-color", "#fff");
										
				$("#"+location_id).css("font-weight", "bold");
				$("#"+location_id+"_sign").css("font-weight", "bold");
				$("#"+location_id).closest("li").css("background-color", "#{actual_background}");
										
				$("#actual_location_id").val(location_id);
				$("#actual_location_name").val($("#"+location_id).text());
				$("#actual_location_sign").val($("#"+location_id+"_sign").text());
										
				$("#submit_button").prop('disabled', false);
			}
			
			var all_locations = [];
			
			var locationMatcher = function(locations) {
				return function findMatches(q, cb) {
					var matches, substringRegex;

					// an array that will be populated with substring matches
					matches = [];

					// regex used to determine if a string contains the substring `q`
					substrRegex = new RegExp(q, 'i');

					// iterate through the pool of strings and for any string that
					// contains the substring `q`, add it to the `matches` array
					$.each(locations, function(i, loc) {
						console.log('location: ', loc);
						if (substrRegex.test(loc.name)) {
							matches.push(loc);
						}
					});

					cb(matches);
				};
			};
			
			$(document).ready(function() {
				$("[data-location='true']").each(function(index){
					all_locations.push({id: this.id, name: this.innerText});
				});
				
				console.log(all_locations);
				
				$("#edit_filter").typeahead({
					hint: true,
					highlight: true,
					minLength: 1
				},
				{
					name: 'locations',
					source: locationMatcher(all_locations),
					display: 'name',
					limit: 15
				}).bind('typeahead:select typeahead:autocomplete', function(ev, suggestion) {
					console.log(suggestion);
					select_location(suggestion.id);
				});
				
				$("#edit_filter").focus();
				
			});
			
			$("#form-locationselector").on('submit', function(e) {
				var data = {
					name : $("#actual_location_name").val(),
					sign : $("#actual_location_sign").val(),
					id   : $("#actual_location_id").val()
				};
				add_location(data);
				
				e.preventDefault();
			});