include mixins

doctype strict
html
	include header
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/pcalimport_changes.js')
	script(src='/templates/pcal/pentry_clone_move_parishday.js')
	script(src='/javascripts/runtime.js')
	link(href="/stylesheets/style_week.css", rel="stylesheet")
	style.
		.cell_element { display: table-cell; }
		.td_new_celebration { padding-top: 10px; }
		.give_margin_left { padding-left: 10px; }
		@media only screen and (max-width: 768px) {
			.cell_element {
				display: block;
				margin-bottom: 15px;
			}
			.td_new_celebration { padding-top: 0px; }
			.give_margin_left { padding-left: 0px; }
		}
		
		.changes_details {
			/*max-height: 300px;
			overflow-y: scroll;*/
			margin-top: 10px;
		}
		
		.day_details {
			max-height: 300px;
			min-height: 200px;
			overflow-y: scroll;
		}

	body
		.modal.fade(id="collectUserDataDialog", role="dialog", aria-labelledby="collectUserDataDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="collectUserDataDialogLabel") Benutzer-Einträge auslesen
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während die Einträge der Benutzer von PfIS zusammengestellt werden ...

		.modal.fade(id="fileUploadDialog", role="dialog", aria-labelledby="fileUploadDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="fileUploadDialogLabel") Datei hochladen und auswerten
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während die Datei hochgeladen und die Einträge ausgewertet werden ...

		.modal.fade(id="compileDialog", role="dialog", aria-labelledby="compileDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="compileDialogLabel") Pfarrkalender kompilieren
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während der Pfarrkalender neu kompiliert wird ...

		.modal.fade(id="messagesDialog", role="dialog", aria-labelledby="messagesDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
						h4(class="modal-title", id="confirmRejectLabel") Meldungen
					.modal-body(style="overflow-y: auto; max-height: calc(100vh - 210px);")
						p
							b Bitte beachten Sie folgende Meldungen!
						#messages
					.modal-footer
						button(type="button", class="btn btn-primary", data-dismiss="modal") Schließen

		.modal.fade(id="confirmReject", role="dialog", aria-labelledby="confirmRejectLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
						h4(class="modal-title", id="confirmRejectLabel") Ablehnung bestätigen
					.modal-body
						p Sind Sie sicher, dass Sie diese Änderung verwerfen wollen?
							br
							span Die entsprechende Datei wird vom Datenträger gelöscht!
					.modal-footer
						button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
						button(type="button", class="btn btn-danger", id="confirm_reject") Änderung tatsächlich ablehnen

		.modal.fade(id="confirmRemove", role="dialog", aria-labelledby="confirmRemoveLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
						h4(class="modal-title", id="confirmRemoveLabel") Löschen bestätigen
					.modal-body
						p Sind Sie sicher, dass Sie den aktuellen Kalendereintrag löschen wollen?
							br
							span Er wird unwiederbringlich gelöscht!
					.modal-footer
						button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
						button(type="button", class="btn btn-danger", id="confirm_remove") Kalendereintrag tatsächlich löschen

		.root
			.new_flex_zero
				+nav("PfarrInfoSystem", "mainmenu")
				.container-fluid
					h1 Elemente in den Pfarrkalender importieren
					p Lesen sie alle von den Nutzern von PfIS erstellten Kalender-Einträge aus bzw. importieren Sie eine Datei und entscheiden Sie, welche Einträge übernommen werden sollen.
					.btn-toolbar(style="margin-bottom: 20px;")
						.btn-group.btn-group-xs
							button.btn.btn-primary.button-import-userdata Einträge der Nutzer auslesen
						.btn-group.btn-group-xs
							button.btn.btn-primary.button-import-file(onclick="$('#fileinput').click();") Datei importieren
							input(type="file", id="fileinput", style="display: block; visibility: hidden; width: 0; height: 0;")
						.btn-group.btn-group-xs(style="margin-left: 25px;")
							button.btn.btn-warning#button_compile_calendar Pfarrkalender neu kompilieren
								
			.subroot#changes_parent(style="flex-direction: row; flex: 1;")
					//- height: 100%;
							
					//- 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.
			var ws = new PfISWebSocket("#{sessionuuid}", "#{taskuuid}");
			ws.bind_standard_close_handler();
		
			$(".button-import-userdata").on('click', function(event) {
				$('#collectUserDataDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
				ws.send('collect_userdata', {});
			});
			
			$("#fileinput").on('change', function(event) {
				
				var files=$("#fileinput").prop('files');
				if(files.length === 0)
					return 
				
				console.log(files);
				console.log(files.length);
				
				$('#fileUploadDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
					
				for (var i = 0, numFiles = files.length; i < numFiles; i++) {
					var file = files[i];
					
					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
							};
							$("#fileinput").val("");
							ws.send('fileupload', data);
						}})(file);
					reader.readAsDataURL(file);
				}
			});
			
			ws.bind("collected_changes", function(data) {
				var html = pcalimport_changes_template(data);
				if(data.source==="user-data")
					$('#collectUserDataDialog').modal('hide');
				else
					$('#fileUploadDialog').modal('hide');
				$("#changes_parent").empty();
				
				if(data.messages.length > 0) {
					var msg_elem = $('#messagesDialog').find('#messages');
					msg_elem.empty();
					$.each(data.messages, function(idx, elem){
						msg_elem.append('<div class="alert alert-' + elem.type + '" role="alert"><strong>'+ elem.title +'</strong> ' + elem.message + '</div>');
					});
					$('#messagesDialog').modal({
						backdrop: 'static',
						keyboard: false
					});					
				}
				
				$("#changes_parent").html(html);
				// install click-handler for new accept-buttons
				$("#changes_parent").find(".btn-success").on('click', on_click_accept);
				$('html, body').scrollTop(0);
			});
			
			function collect_change_data(elem) {
				var change = elem.closest('.tab-pane');
				var pentry = elem.closest('.pentry_marker');
				var pday   = elem.closest('.pday_marker');
				
				var data = {
					change_idx: change.data('change-idx'),
					change_type: change.data('change-type'),
					pentry_uuid: pentry.data('pentry-uuid'),
					pentry_type: pentry.data('pentry-type'),
					pday_date: pday.data('pday-date')
				};
				
				return data;
			}
			
			function find_pentry_change(data) {
				var pday = $('.pday_marker[data-pday-date="'+data.pday_date+'"]');
				var pentry = pday.find('.pentry_marker[data-pentry-uuid="'+data.pentry_uuid+'"]');
				var change = pentry.find('.tab-pane[data-change-idx="'+data.change_idx+'"]');
				return change;
			}
		
			function on_click_accept() {
				var data = collect_change_data($(this));
				
				if(data.change_type === "remove")
				{
					$('#confirmRemove').data('change_data', data);
					$('#confirmRemove').modal('show');
					return
				}

				$(this).closest('.btn-group').find('.btn').attr('disabled', 'disabled');
				
				ws.send('accept_change', data);
			}
			
			$('#confirmRemove').find('.modal-footer #confirm_remove').on('click', function() {
				$('#confirmRemove').modal('hide');
				var data = $('#confirmRemove').data('change_data');
				
				var elem = find_pentry_change(data);
				elem.find('.btn-group').find('.btn').attr('disabled', 'disabled');
				
				ws.send('accept_change', data);
			});
			
			$('#confirmReject').on('show.bs.modal', function (e) {
				$(this).data('related_button', e.relatedTarget);
			});
			
			$('#confirmReject').find('.modal-footer #confirm_reject').on('click', function() {
				var button = $('#confirmReject').data('related_button');
				$(button).closest('.btn-group').find('.btn').attr('disabled', 'disabled');
				
				$('#confirmReject').modal('hide');
				
				var data = collect_change_data($(button));
				
				ws.send('reject_change', data);
			});
			
			ws.bind('accept_change_result', function(data) {
				console.log('accept_change_result', data);
				
				var elem = find_pentry_change(data.data);
				
				if(data.result !== "OK") {
					alert("Das Annehmen der Änderung war nicht erfolgreich!")
					elem.find('.btn-group').find('.btn').removeAttr('disabled');
					return;
				}

				elem = elem.find('.change_info');
				elem.append('<span style="color: green;"><b>Diese Änderung wurde angenommen!</b></span>');
				elem.show();
				
				var html = pentry_clone_move_parishday_template({day: data.day } );
				
				var day_details = elem.closest('.pday_marker').closest('.tab-pane').find('.day_details');
				day_details.empty();
				day_details.html(html);
			});
			
			ws.bind('reject_change_result', function(data) {
				console.log('reject_change_result', data);
				
				var elem = find_pentry_change(data.data);
				
				if(data.result !== "OK") {
					alert("Das Zurückweisen der Änderung war nicht erfolgreich!")
					elem.find('.btn-group').find('.btn').removeAttr('disabled');
					return;
				}

				elem = elem.find('.change_info');
				elem.append('<span style="color: red;"><b>Diese Änderung wurde abgelehnt!</b></span>');
				elem.show();
			});
			
			$('#button_compile_calendar').on('click', function(){
				$('#compileDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
				
				ws.send('compile_calendar', {});
			});
			
			ws.bind('compile_calendar_result', function(data) {
				if(data.result !== "OK")
					alert("Fehler beim Kompilieren des Pfarrkalenders");
					
				$('#compileDialog').modal('hide');
			});