include mixins

- var generateUID = function() { return ("000000" + (Math.random()*Math.pow(36,6) << 0).toString(36)).slice(-6) };

mixin do_person(elem)
	- var my_uid = generateUID();
	.panel.panel-info(id=my_uid, data-elemname=elem.name, data-elemkontext=elem.kontext, data-parishdb="", data-dn=elem.dn, data-elemtype="person")
		.panel-heading
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{elem.name}
		.panel-collapse.collapse.panel-parishdb-details-person(id="PANEL_"+my_uid)
			
mixin do_groupmember(elem, group)
	- var my_uid = generateUID();
	.panel.panel-info(id=my_uid, data-elemname=elem.name, data-dn=elem.person_dn)
		.panel-heading
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{elem.name}
				if elem.role !== ''
					p.parishdbelemspane_elem_role #{elem.role}
		.panel-collapse.collapse.panel-parishdb-details-person(id="PANEL_"+my_uid)

mixin do_group(elem)
	- var my_uid = generateUID();
	.panel.panel-success.panel_group_and_unit(id=my_uid, data-elemname=elem.name, data-elemkontext=elem.kontext, data-parishdb="", data-dn=elem.dn, data-elemtype="group")
		.panel-heading
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{elem.name}
			//-	table(width="100%")
			//-		tr
			//-			td #{elem.name}
			//-			td(align="right", onclick="var event = arguments[0] || window.event; event.stopPropagation(); $('#PANEL_#{my_uid}').collapse('toggle'); return false;")
			//-				a(role="button", style="font-size: 10px; line-height: 1;", data-toggle="collapse", data-target="#PANEL_#{my_uid}", aria-expanded="false", aria-controls="PANEL_#{my_uid}", onclick="$(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');")
			//-					span(class="glyphicon glyphicon-chevron-down", aria-hidden="true")
		.panel-collapse.collapse(id="PANEL_"+my_uid)
			.panel-body(style="padding: 7px;")
				each member in elem.members
					+do_groupmember(member, elem)

mixin do_unit(elem)
	- var my_uid = generateUID();
	- var my_border_color = elem.is_pastoral ? "border-color: "+ elem.color +"; " : "";
	- var my_background_image = elem.is_pastoral ? "background-image: linear-gradient(to bottom,"+elem.color+" 50%, #ffffff 100%); border-color: #ffffff; background-color: #ffffff; border-top-left-radius: 0px; border-top-right-radius: 0px;" : "";
	- var my_border_top_color = elem.is_pastoral ? "border-top-color: #ffffff;" : "";
	.panel.panel-default.panel_group_and_unit(id=my_uid, data-elemname=elem.name, data-elemkontext=elem.kontext, data-parishdb="", data-dn=elem.dn, data-elemtype="unit", data-depth=elem.depth, style=my_border_color )
		.panel-heading(style=my_background_image)
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{elem.name}
			//-  border-bottom: 2px solid #{elem.color};
		.panel-collapse.collapse(id="PANEL_"+my_uid)
			.panel-body(style="padding: 10px; "+my_border_top_color)
				for child in elem.childs
					if(child.type === "unit")
						+do_unit(child)
					if(child.type === "person")
						+do_person(child)
					if(child.type === "group")
						+do_group(child)

doctype strict
html
	include header
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/parishdb_person.js')
	script(src='/javascripts/runtime.js')
	style.
		.panel { margin-bottom: 5px; }
		.panel-title { cursor: pointer; }
		.panel_group_and_unit { border-width: 3px; }
	body

		.root

			.new_flex_zero
				+nav_with_form("PfarrInfoSystem", "PfIS", "parishdbnav")
				.container-fluid
					h1 Pfarrdatenbank
			.new_flex_one
				.container-fluid
					for elem in parishdb.tree
						if(elem.type === "unit")
							+do_unit(elem)

		script.
			$("#parishdbnav-form").on('submit', function(e){
				e.preventDefault();
			});

			function show_searchbar(functiontocall) {
				$("#parishdbnav-form").append("<div class='input-group'><div class='input-group-addon'><span class='glyphicon glyphicon-search'></span></div><input class='form-control' type='text' placeholder='Suche'  style='display: inline;' oninput='" + functiontocall + "'></input></div>");
			}
			show_searchbar("adjust_visible_elems(this);"); // can always be on!!!

			var units_are_shown = false;
			function adjust_visible_elems(my_input) {
				substrRegex = new RegExp(my_input.value, 'i');
				
				if(!units_are_shown) {
					$("[data-elemtype='unit']").each(function(index) {
						var panel_id = "#PANEL_" + $(this).prop('id');
						$(panel_id).collapse('show');
					});
					console.log('SHOW ALL UNITS');
					units_are_shown = true;
				}
			
				set_visibility_according_to_filter(substrRegex, $("[data-parishdb][data-elemtype!='unit']"));
				
				for(var d = #{parishdb.max_depth}; d > 0; d--) {
					$("[data-depth="+d+"]").each(function(index){
						var parishdb_childs = $(this).children(".panel-collapse").children(".panel-body").children("[data-parishdb]");
						var visible = false;
						parishdb_childs.each(function(index) {
							if($(this).css("display") !== "none") {
								visible = true;
								return false;
							}
						});
						if(visible)
							$(this).show();
						else
							$(this).hide();
					});
				}
			}
			
			function set_visibility_according_to_filter(substrRegex, elems) {
				console.log(elems.length)
				elems.each(function(index) {
					var show = substrRegex.test($(this).data('elemname'));
					if(!show)
						show = substrRegex.test($(this).data('elemkontext'));
					
					if($(this).data('elemtype') === "group") {
						var childelems = $(this).find('[data-elemname]');
						childelems.each(function(index) {
							if(substrRegex.test($(this).data('elemname'))) {
								show = true;
								return false;
							}
						});
					}
					if(show) {
						$(this).show();
					}
					else {	
						$(this).hide();
					}
				});
			}
			
			var ws = new PfISWebSocket("#{sessionuuid}");
			ws.bind_standard_close_handler();
			
			$(".panel-parishdb-details-person").on("show.bs.collapse", function(event) {
				if($(event.target).children().length === 0) {
					console.log("Loading person from DB ...");
					ws.send('get_parishdb_person', {dn: $(event.target).parent().data('dn')});
				}
			});
			
			ws.bind('get_parishdb_person_result', function(data) {
				console.log(data.person);
				if(data.result === "OK")
					$("[data-dn='"+data.person.dn+"']").children('.panel-collapse').html(parishdb_person_template(data));
				else
					$("[data-dn='"+data.person.dn+"']").children('.panel-collapse').html("<div class='.panel-body'><p style='color: red;'>Fehler beim Abrufen der Pfarrdatenbank!</p></div>")
			});