include mixins mixin do_location(location) - var my_class; - actual_location_id === location.id ? my_class = "panel-success" : my_class="panel-default"; .panel(class=my_class, id=location.id, data-locationname=location.name, data-locationsign=location.sign, data-location="") .panel-heading(onclick="select_location('#{location.id}');") h4.panel-title table(width="100%") tr td(style="width: 80%;") span(style=style_text) #{location.name} td span(style=style_text) #{location.sign} mixin do_city(city) - var my_uid = generateUID(); .panel.panel-primary.panel_group_and_unit(id=my_uid, data-elemname=city.name, data-parishdb="", data-elemtype="city") .panel-heading h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{city.name} //- border-bottom: 2px solid #{elem.color}; .panel-collapse.collapse(id="PANEL_"+my_uid) .panel-body(style="padding: 10px; "+my_border_top_color) each location in city.locations +do_location(location) mixin do_unit(unit) - var my_uid = generateUID(); - var my_border_color = unit.is_pastoral ? "border-color: "+ unit.color +"; " : ""; - var my_background_image = unit.is_pastoral ? "background-image: linear-gradient(to bottom,"+unit.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 = unit.is_pastoral ? "border-top-color: #ffffff;" : ""; - var in_class = unit.subunits.length > 0 ? "in" : ""; .panel.panel-default.panel_group_and_unit(id=my_uid, data-elemname=unit.name, data-parishdb="", data-dn=unit.dn, data-elemtype="unit", data-depth=unit.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) #{unit.name} //- border-bottom: 2px solid #{elem.color}; .panel-collapse.collapse(class=in_class, id="PANEL_"+my_uid) .panel-body(style="padding: 10px; "+my_border_top_color) if unit.cities.length > 0 //- ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;") //- each location in unit.locations //- +do_location(location) each city in unit.cities +do_city(city) 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 script. function set_visibility_according_to_filter(substrRegex, elems) { var units_are_shown = false; if(!units_are_shown) { $("[data-elemtype='unit'],[data-elemtype='city']").each(function(index) { var panel_id = "#PANEL_" + $(this).prop('id'); $(panel_id).collapse('show'); }); console.log('SHOW ALL UNITS'); units_are_shown = true; } var actual_id = $("#actual_location_id").val(); elems.each(function(index) { my_panel = $(this); var txt = my_panel.data("locationname"); var id = my_panel.prop('id'); if(substrRegex.test(txt)) { my_panel.show(); if(actual_id === id) { $("#submit_button").prop('disabled', false); $("#errorpane").empty(); } } else { my_panel.hide(); if(actual_id === id) { $("#submit_button").prop('disabled', true); $("#errorpane").html(get_compiled_message("danger", "Auswahl ungültig", "Durch die Filterangabe wurde Ihre Auswahl ungültig!")); } } }); } 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]")); } 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="history.back();") span(class="glyphicon glyphicon-remove-circle", aria-hidden="true") span span Abbrechen p.small(style="margin-top: 7px; margin-bottom: 0px; font-weight: bold;") Aktuell ausgewählt p(style="font-size: 100%; font-weight: bold; margin-bottom: 0px;") span#actual_name - #errorpane .new_flex_one(style="padding-bottom: 200px;") .container-fluid //- ul(class="list-group") for unit in units +do_unit(unit) script. pcal_pentry_edit_manager.show_searchbar("adjust_visible_locations(this);"); if("#{actual_location_id}" === "") $("#submit_button").prop('disabled', true); select_location = function(location_id) { console.log("SELECTED: " + location_id) actual_id = $("#actual_location_id").val(); if(actual_id === location_id) { console.log("NOTHIN CHANGED"); return; } if(actual_id !== '') $("#" + actual_id).closest('.panel').removeClass('panel-success').addClass('panel-default'); var new_panel = $("#" + location_id).closest('.panel'); new_panel.removeClass('panel-default').addClass('panel-success'); $("#actual_location_id").val(location_id); var locname = $("#"+location_id).data("locationname"); var locsign = $("#"+location_id).data("locationsign"); $("#actual_location_name").val(locname); $("#actual_location_sign").val(locsign); if(locsign != "") locname = locname + " (" + locsign + ")"; $("#actual_name").text(locname); $("#errorpane").empty(); $("#submit_button").prop('disabled', false); } $("#form-locationselector").on('submit', function(e) { var data = { name : $("#actual_location_name").val(), sign : $("#actual_location_sign").val(), id : $("#actual_location_id").val() }; pcal_pentry_edit_manager.add_location(data); e.preventDefault(); });