include mixins

doctype strict
html
	include header
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/volunteerslist_result.js')
	script(src='/javascripts/runtime.js')
	style.
		.group_is_selected { background-color: yellow; }
		
		.person_divider { margin-bottom: 5px;}
		.person_name { font-weight: bold; margin-bottom: 0px; }
		.group_name { font-size: 10px; font-style: italic; margin-bottom: 0px; }
		
		.person_in_group { margin-bottom: 2px; }
		

	body
		.modal.fade(id="generateLettersDialog", role="dialog", aria-labelledby="generateLettersDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="generateLettersDialogLabel") Briefe erstellen
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während die Briefe erstellt werden:
						
						p(style="font-weigth: bold") Briefe ...
						.progress
							#progress_letters.progress-bar(role="progressbar", aria-valuenow="0", aria-valuemin="0", aria-valuemax="100", style="width: 0%;")

		
		#volunteerslist.sidewideoverlay(style="z-index: 5;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "volunteerslist_menu")
					.container-fluid
						h1 Ehrenamtlichenliste
							.small Zusammenstellung
						p Hier finden Sie die Liste der Ehrenamtlichen aus den gewählten Gruppen
						nav
							ul.pager
								li.previous
									span(onclick="$('#volunteerslist').hide(); $('html, body').scrollTop(0);") Zurück
								li.next.disabled
									span Extras
				.new_flex_one
					.container-fluid
						.panel.panel-primary(style="margin-bottom: 25px; border-bottom: 1px solid #ddd;")
							.panel-heading
								h3.panel-title(data-toggle="collapse", data-target="#generate_letters", style="cursor: pointer;") Briefe an die Ehrenamtlichen erstellen
							.panel-collapse.collapse(id="generate_letters")
								.panel-body
									label(for='fileinput', class="col-sm-2 control-label", style="padding-left: 0px;") Vorlage
									input#fileupload(type="file", accept=".pdf", style="padding-left: 15px;" class="form-control")
									div
										button.btn.btn-default.btn-xs(onclick="$('#fileupload').val(''); ", style="display: inline;") Zurücksetzen
										p#upload_pending_indicator(style='display: none; text-style: italic;') Datei wird hochgeladen...
										
									button.btn.btn-success#btn_generate_letters(style="padding-left: 20px; margin-top: 15px; margin-bottom: 15px;") Briefe erstellen
									br
									a#link_letters(href="/volunteerslist/#{taskuuid}/download/letters.pdf", target="_blank", style="margin-right: 15px; display: none;")
										img(src="/images/mail-read-32.png", style="margin-right: 2px;")
										span Erstellte Briefe
										
						#volunteerslist_list

		.root
			.new_flex_zero
				+nav("PfarrInfoSystem", "mainmenu")
				.container-fluid
					h1 Ehrenamtlichenliste erstellen
						.small Ehrenamtlichengruppen auswählen
					p Wählen Sie die Gruppen der Pfarrei aus, deren Mitglieder in die Liste aufgenommen werden sollen
					nav
						ul.pager
							li.previous.disabled
								span Zurück
							li.next.disabled#button_volunteergroupsselected
								span(onclick="volunteergroupsselected();") Weiter
			.new_flex_one
				.container-fluid.parish-marker
					form(class="form-horizontal", role="form", id="form")
						.form-group
							label(for='combo_sortorder', class="col-sm-2 control-label") Sortierreihenfolge
							.col-sm-10
								select.form-control(id='combo_sortorder')
									- var id=0;
									- each o in sortorder
										option(value=id) #{o}
										- id++;
						.row(style="margin-bottom: 20px;")
							.col-sm-4
								button.btn.btn-primary.btn-xs.button-select-all Alle auswählen
								button.btn.btn-default.btn-xs.button-deselect-all Alle abwählen
							
					- var parishid = 0;		
					each parish in parishes
						- var my_uid = generateUID();
						if(parish.volunteergroups.length > 0)
							.panel.panel-default.parish-marker(style="border-width: 3px;", data-parishid=parishid)
								.panel-heading
									h4.panel-title(data-toggle="collapse", data-target="#PANEL_#{my_uid}", aria-expanded="false", aria-controls="PANEL_#{my_uid}", style="cursor: pointer;") #{parish.name}
								.panel-collapse.collapse(id="PANEL_#{my_uid}")
									.panel-body(style="padding: 10px;")
										.container-fluid
											.row
												button.btn.btn-primary.btn-xs.button-select-all Alle auswählen
												button.btn.btn-default.btn-xs.button-deselect-all Alle abwählen
										table(width='100%', class='table table-condensed', style='margin-bottom: 10px;')
											thead
												tr
													td <b>Name</b>
											tbody
												for grp in parish.volunteergroups
													tr(onclick="$(this).toggleClass('group_is_selected'); update_button_volunteergroupsselected();", style="cursor: pointer;", data-dn="#{grp.dn}", data-group)
														td #{grp.name}
						- parishid++;
			
		script.
			$(".button-select-all").on('click', function(event) {
				$(event.target).closest('.parish-marker').find("[data-group]").addClass('group_is_selected'); 
				update_button_volunteergroupsselected();
			});
			
			$(".button-deselect-all").on('click', function(event) {
				$(event.target).closest('.parish-marker').find("[data-group]").removeClass('group_is_selected'); 
				update_button_volunteergroupsselected();
			});
			
			$("#form").on('submit', function(event){console.log('submit');event.preventDefault()});

			
			var ws = new PfISWebSocket("#{sessionuuid}", "#{taskuuid}");
			ws.bind_standard_close_handler();
			
			function update_button_volunteergroupsselected() {
				if($(".group_is_selected").length > 0)
					$("#button_volunteergroupsselected").removeClass("disabled");
				else 
					$("#button_volunteergroupsselected").addClass("disabled")
			}
			
			function volunteergroupsselected() {
				if($("#button_volunteergroupsselected").hasClass("disabled"))
					return;
			
				var selected_groups = [];
				
				$("[data-parishid]").each(function(index){
					var this_parish = { id: $(this).data('parishid'), selected_groups : [] };
					$(this).find(".group_is_selected").each(function(index) {
						this_parish.selected_groups.push($(this).data('dn'));
					});	
					selected_groups.push(this_parish);
				});
				
				console.log(selected_groups);
				console.log($("#combo_sortorder").val());
				
				ws.send('get_volunteerslist', {sortorder: parseInt($("#combo_sortorder").val()), groups : selected_groups});
			}
			
			ws.bind('get_volunteerslist_result', function(data) {
				console.log(data);
				
				if(data.result === "ERROR") {
					alert(data.message);
					return;
				}
				
				var html = volunteerslist_result_template(data);
				$("#volunteerslist_list").empty();
				$("#volunteerslist_list").html(html);
				$("#volunteerslist").show();
				$("#volunteerslist_list").parent().parent().scrollTop(0);
				
				$('html, body').scrollTop(0);
				
				$("#link_letters").hide();
			})
			
			$("#btn_generate_letters").on('click', function() {
				$("#link_letters").hide();
				
				$('#generateLettersDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
				
				var files=$("#fileupload").prop('files');
				if(files.length === 1) {
					console.log(files);
					console.log(files.length);
					
					$("#upload_pending_indicator").show();
					
					for (var i = 0, numFiles = files.length; i < numFiles; i++) {
						var file = files[i];
						console.log(file.name);
						console.log(file.size);
						console.log(file.type);
						
						var reader = new FileReader();
						reader.onload = (function(aFile) { return function(e) { 
								var data = {
									name : aFile.name,
									size : aFile.size,
									type : aFile.type,
									content : e.target.result
								};
								
								ws.send('fileupload', data);
							}})(file);
						reader.readAsDataURL(file);
					}
				}
				else
					common_generate_letters();
			});
			
			ws.bind('fileupload_result', function(data) { 
				console.log(data); 
				$("#upload_pending_indicator").hide();
				if(data.result === "ERROR") {
					alert(data.message);
					$("#generateLabelsDialog").modal('hide');
					return;
				}
				
				common_generate_letters()
			});

			function common_generate_letters() {
				console.log('common_generate_letters');
				var data = { reset_template : ($("#fileupload").prop('files').length === 1 ? false : true ) };
				ws.send('generate_letters', data);
			}
			
			ws.bind('generate_letters_progress', function(data) {
				console.log(data);
				var percent = Math.round(data.generated * 100 / data.total) ;
				console.log(percent);
				$("#progress_letters").prop("aria-valuenow", percent);
				$("#progress_letters").css("width", percent +"%");
				$("#progress_letters").html(percent +"%");
			});
			
			ws.bind('generate_letters_result', function(data) {
					console.log('generate_letters_result');
					$('#generateLettersDialog').modal('hide');
					
					if(data.result === "ERROR") {
						alert(data.message);
						return;
					}
					
					$("#link_letters").show();
				});