pfisjs/views/old/timeline.jade

337 lines
11 KiB
Plaintext

include mixins
include mixins_day
doctype html
html
include header
script(src='/javascripts/socket.io.js' )
link(href="/stylesheets/bootstrap-datepicker.min.css", rel="stylesheet")
script(src='/javascripts/bootstrap-datepicker.min.js' )
script(src='/javascripts/bootstrap-datepicker.de.min.js' )
style.
.block-relative { position: relative; width: 100%; }
.block-absolute { position: absolute; padding-left: 2px; padding-right: 2px; padding-bottom: 2px;}
.timepoint { font-size: 80%; position: absolute; border-top-style: dotted; border-top-width: 1px; border-top-color: grey; right: -15px; left: -15px; z-index: -5; }
.event_name { font-size: 85%; font-weight: bold; font-style: italic; margin-bottom: 0px;}
.event_name_secondary { font-size: 75%; font-weight: bold; }
.event_locations { font-size: 70%; color: darkblue; font-weight: bold; margin-bottom: 0px; }
.event_involved { font-size: 70%; color: green; font-style: italic; margin-bottom: 0px; }
body(style="overflow: hidden;")
script.
history.replaceState({direction: 'back'}, document.title, "/timeline/#{date.date}?back=false");
history.pushState({direction: 'mainpage', date: "#{date.date}", scrollto: ''}, document.title, "/timeline/#{date.date}");
.modal.fade(id="daypickerDialog", role="dialog", aria-labelledby="daypickerDialogLabel", 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="daypickerDialogLabel") Datum anspringen
.modal-body
#datepicker()
.modal-footer
button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
button(type="button", class="btn btn-success", id="confirm") Anspringen
.modal.fade(id="confirmDelete", role="dialog", aria-labelledby="confirmDeleteLabel", 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="confirmDeleteLabel") Löschen bestätigen
.modal-body
p Sind Sie sicher, dass Sie das Ereignis löschen wollen?
.modal-footer
button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
button(type="button", class="btn btn-danger", id="confirm") Löschen
.root(style="overflow: hidden;")
.new_flex_zero
+nav("PfarrInfoSystem", "dropdown_menu")
+nav_item( "/day/" + date.date ) Tag
+nav_item( "#", "active" ) TagZeitleiste
+nav_item( "/week/" + date.date) Woche
+nav_item( "/timeline/"+date.date+"/select_punits_for_view" ) Angezeigte Orte konfigurieren
+nav_item( "/info" ) Info
#dataparent.subroot(style="overflow: hidden; height: 100%;")
+timeline(date, litinfo, last_week, yesterday, tomorrow, next_week, messages, parishcal)
script.
var sockets;
var saved_messages = [];
var updown_button = {};
var updown_direction = "";
$(document).ready(function() {
console.log('NOW CONNECTING');
sockets = io.connect();
sockets.on('day_goto_result',function(data){
console.log('day_goto_result');
if(data.result === "OK") {
var html = $(data.html);
history.replaceState({direction: 'back'}, document.title, "/timeline/" + data.date + "?back=false");
history.pushState({direction: 'mainpage', date: data.date }, document.title, "/timeline/" + data.date) ;
$('#dataparent').html(data.html);
var day_elem = $('.navbar-collapse > ul > li:nth(0) > a');
day_elem.prop('href', '/day/' + data.date);
var week_elem = $('.navbar-collapse > ul > li:nth(2) > a');
week_elem.prop('href', '/week/' + data.date);
for(midx in saved_messages)
$('#daycontrol_parent').append(saved_messages[midx]);
saved_messages = [];
console.log(data.scrollto);
if((typeof data.scrollto !== 'undefined') && (data.scrollto !== '')) {
var the_elem = $("[data-event-uuid='" + data.scrollto + "']");
// this event (the_elem) might have been deleted!!!
if(the_elem.length > 0) {
$('#timelinebody').animate({
scrollTop: the_elem.offset().top - $("#timelinebody").offset().top
}, 1000);
}
}
}
else {
$('#dataparent').html("<div class='new_flex_one' style='padding-left: 15px; padding-right: 15px;'>"+data.html+"</div>");
}
});
sockets.on('day_show_event_result', function(data) {
console.log('day_show_event_result');
if(data.result === "OK") {
history.pushState({direction: 'day_show_event'}, document.title, location.pathname + '/' + data.event);
$('#dataparent').html(data.html);
}
else {
$('#dataparent').html("<div class='new_flex_one' style='padding-left: 15px; padding-right: 15px;'>"+data.html+"</div>");
}
});
sockets.on('pentry_delete_result', function(data) {
console.log("pentry_delete_result");
console.log(data);
if(data.pentrytype !== 'event') {
if(data.result === 'OK') {
var button = $('[data-pentry-uuid="'+ data.uuid + '"]');
var type = data.pentrytype;
var box = button.closest('.' + type);
box.remove();
}
$('#daycontrol_parent').append(data.message);
}
else {
saved_messages.push(data.message);
history.back();
}
$('#confirmDelete').modal('hide');
});
sockets.on('tevent_delete_result', function(data) {
console.log(data);
if(data.result === "OK") {
var delete_button = $('[data-event-uuid="'+ data.event + '"][data-tevent-uuid="'+ data.tevent + '"]');
console.log(delete_button);
var eventbox = delete_button.closest('.eventbox');
var number_of_children = eventbox.parent().children().length;
console.log('number_of_children: ', number_of_children);
if(number_of_children > 1) {
if(eventbox.is(':first-child')) { // disable up-button
$(eventbox.next().find("div > button:nth-child(2)")[0]).prop('disabled', true);
}
if(eventbox.is(':last-child')) { // disable down-ubtton
$(eventbox.prev().find("div > button:nth-child(3)")[0]).prop('disabled', true);
}
}
eventbox.remove();
}
else
console.log('tevent_delete_result: ', data);
$('#confirmDelete').modal('hide');
});
sockets.on('tevent_move_updown_result',function(data){
console.log(data);
/*window.location.reload();*/
/* http://stackoverflow.com/questions/3050830/reorder-list-elements-jquery */
var eventbox = updown_button.closest('.eventbox');
var other = {};
if(updown_direction === "down")
{
next = eventbox.next();
next.after(eventbox);
other = next;
}
else /* up */
{
prev = eventbox.prev();
prev.before(eventbox);
other = prev;
}
if(eventbox.is(':first-child'))
{
$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', true);
$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', false);
}
else
{
if(eventbox.is(':last-child'))
{
$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', false);
$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', true);
}
else
{
$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', false);
$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', false);
}
}
if(other.is(':first-child'))
{
$(other.find("div > button:nth-child(2)")[0]).prop('disabled', true);
$(other.find("div > button:nth-child(3)")[0]).prop('disabled', false);
}
else
{
if(other.is(':last-child'))
{
$(other.find("div > button:nth-child(2)")[0]).prop('disabled', false);
$(other.find("div > button:nth-child(3)")[0]).prop('disabled', true);
}
else
{
$(other.find("div > button:nth-child(2)")[0]).prop('disabled', false);
$(other.find("div > button:nth-child(3)")[0]).prop('disabled', false);
}
}
/* $('body').loading('stop'); */
});
if("#{event}" !== "")
day_show_event("#{date.date}", "#{event}");
if("#{scrollto}" !== "") {
$('#timelinebody').animate({
scrollTop: $("[data-event-uuid='#{scrollto}']").offset().top - $("#timelinebody").offset().top
}, 1000);
}
});
function day_goto(new_date, scrollto) {
console.log(new_date);
console.log('scrollto ', scrollto);
console.log((typeof scrollto !== 'undefined' ? scrollto : ''));
sockets.emit('day_goto_timeline', {date : new_date, scrollto: (typeof scrollto !== 'undefined' ? scrollto : '')});
}
function day_show_event(date, event) {
console.log('day_show_event', date, event);
history.replaceState({direction: 'mainpage', date: date, scrollto: event }, document.title, "/timeline/" + date) ;
sockets.emit('day_show_event', { date: date, event: event});
}
$('#datepicker').datepicker({format: "yyyy-mm-dd", language: "de", calendarWeeks: true, todayHighlight: true});
$('#daypickerDialog').on('show.bs.modal', function (e) {
date = $(e.relatedTarget).attr('data-date');
$('#datepicker').datepicker("update", date);
});
$('#daypickerDialog').find('.modal-footer #confirm').on('click', function() {
$('#daypickerDialog').modal('hide');
console.log('CLICKED');
day_goto($("#datepicker").datepicker('getFormattedDate'));
});
function toggle_pentrydetails_visibility(pentry) {
$(pentry).find(".pentry_details").toggle();
}
$('#confirmDelete').on('show.bs.modal', function (e) {
$etitle = $(e.relatedTarget).attr('data-pentry-title');
$(this).find('.modal-body p').text("Sind Sie sicher, dass Sie " + $etitle + " löschen wollen?");
$(this).find('.modal-footer #confirm').data('button', $(e.relatedTarget));
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function() {
var delete_button = $(this).data('button');
var date = delete_button.data('date');
var type = delete_button.data('pentry-type');
if(type === "tevent") {
console.log('delete tevent');
var event = delete_button.data('event-uuid');
var tevent = delete_button.data('tevent-uuid');
console.log(date, event, tevent);
sockets.emit('tevent_delete', { date: date, event: event, tevent: tevent });
return;
}
var uuid = delete_button.data('pentry-uuid');
/*if(type === "event") {
// special handling, because we can it not remove from the view, but have to go back to the view
// because this delete-button is only presented in the detail-view!!!
console.log('delete event');
sockets.emit('event_delete', { date: date, event: uuid });
return;
}*/
console.log(date, type, uuid);
sockets.emit('pentry_delete', { date: date, pentrytype: type, uuid: uuid });
});
do_tevent_move_updown = function(button, date, event, tevent, updown) {
updown_button = button;
updown_direction = updown;
sockets.emit('tevent_move_updown', { date: date, event: event, tevent: tevent, updown: updown });
}
window.addEventListener("popstate", function(e) {
console.log(e.state);
if(e.state !== null) {
if(e.state.direction === "back") {
history.go(1);
}
if(e.state.direction === "mainpage")
day_goto(e.state.date, e.state.scrollto);
}
}, false);