From f9869d19b478c82d86a423dd3b3948adcdc19d5e Mon Sep 17 00:00:00 2001 From: Alexandre Cloutier Date: Tue, 22 Apr 2014 17:47:29 -0400 Subject: [PATCH] Finished the view, need to display the eventsblock --- .../English.lproj/Localizable.strings | 3 +- UI/Scheduler/UIxCalViewPrint.m | 2 +- UI/Templates/SchedulerUI/UIxCalViewPrint.wox | 22 +- UI/WebServerResources/UIxCalViewPrint.css | 15 +- UI/WebServerResources/UIxCalViewPrint.js | 404 +++++++++++++----- 5 files changed, 315 insertions(+), 131 deletions(-) diff --git a/UI/Scheduler/English.lproj/Localizable.strings b/UI/Scheduler/English.lproj/Localizable.strings index 11690e651..68ad40111 100644 --- a/UI/Scheduler/English.lproj/Localizable.strings +++ b/UI/Scheduler/English.lproj/Localizable.strings @@ -147,6 +147,7 @@ /* Print view */ "LIST" = "List"; +"DAY" = "Daily"; "WEEK" = "Weekly"; "MONTH" = "Monthly"; "Print Settings" = "Print Settings"; @@ -166,7 +167,7 @@ "Tasks with no due date" = "Tasks with no due date"; "Completed tasks" = "Completed tasks"; "Display time:" = "Display time:"; - +"Calendar:" = "Calendar:"; /* Appointments */ diff --git a/UI/Scheduler/UIxCalViewPrint.m b/UI/Scheduler/UIxCalViewPrint.m index 8bd2d6da4..fcca440dd 100644 --- a/UI/Scheduler/UIxCalViewPrint.m +++ b/UI/Scheduler/UIxCalViewPrint.m @@ -33,7 +33,7 @@ static NSArray *layoutItems = nil; { if (!layoutItems) { - layoutItems = [NSArray arrayWithObjects: @"LIST", @"WEEK", @"MONTH", nil]; + layoutItems = [NSArray arrayWithObjects: @"LIST", @"DAY", @"WEEK", @"MONTH", nil]; [layoutItems retain]; } diff --git a/UI/Templates/SchedulerUI/UIxCalViewPrint.wox b/UI/Templates/SchedulerUI/UIxCalViewPrint.wox index 447f5856c..67b1629c0 100644 --- a/UI/Templates/SchedulerUI/UIxCalViewPrint.wox +++ b/UI/Templates/SchedulerUI/UIxCalViewPrint.wox @@ -19,7 +19,7 @@ - + @@ -45,18 +45,18 @@ @@ -86,10 +86,10 @@ @@ -97,20 +97,20 @@
- - - +
+
+
diff --git a/UI/WebServerResources/UIxCalViewPrint.css b/UI/WebServerResources/UIxCalViewPrint.css index bbc067030..8946fd4ac 100644 --- a/UI/WebServerResources/UIxCalViewPrint.css +++ b/UI/WebServerResources/UIxCalViewPrint.css @@ -17,7 +17,7 @@ DIV#rightSide position: absolute; left:230px; height:370px; - width:330px; + width:660px; } DIV#rightFrame { @@ -94,7 +94,7 @@ TABLE#eventsList .colorBox /**************************/ /****** RightSide ********/ -.divEventsPreview +.divEventsPreview, .divTasksPreview { border:solid black 2px; border-radius:5px; @@ -110,6 +110,17 @@ TABLE#eventsList .colorBox } +.overdueTasks { + color:red; +} +.completedTasks { + font-style:italic; +} + +.EventsTasksDate { + text-indent:20px; +} + /*******************************************/ /****** Overriding the general.css ********/ diff --git a/UI/WebServerResources/UIxCalViewPrint.js b/UI/WebServerResources/UIxCalViewPrint.js index c631c01b6..b740f8598 100644 --- a/UI/WebServerResources/UIxCalViewPrint.js +++ b/UI/WebServerResources/UIxCalViewPrint.js @@ -24,52 +24,60 @@ /******************************** Global variables *******************************************/ var firstDayOfWeek = window.opener.firstDayOfWeek; -var displayTime; -/*********************************************************************************************/ +var displayTime=true; +var printCompletedTasks=1; +var printNoDueDateTasks=1; +var eventsBlocks; +var currentView; +var sd, ed; -this.onAdjustTime = function(event) { - onAdjustDueTime(event); +/******************************************* Ajust Window position from his size ***********************************************************/ + +function ajustWindow(width, height) { + var left = (screen.width/2)-(width/2); + var top = (screen.height/2)-(height/2); + window.moveTo(left, top); } -this.onAdjustDueTime = function(event) { - /*var dateDelta = (window.getStartDate().valueOf() - window.getShadowStartDate().valueOf()); - var newDueDate = new Date(window.getDueDate().valueOf() + dateDelta); - window.setDueDate(newDueDate);*/ +/****************************************** Ajax Requests, callbacks & events/tasks drawings ***************************************************/ - window.timeWidgets['start']['date'].updateShadowValue(); -} - -this.initTimeWidgets = function (widgets) { - this.timeWidgets = widgets; - - jQuery(widgets['start']['date']).closest('.date').datepicker({autoclose: true, weekStart: 0}); - jQuery(widgets['end']['date']).closest('.date').datepicker({autoclose: true, weekStart: 0}); - - //jQuery(widgets['start']['date']).change(onAdjustTime); - - /*jQuery(widgets['startingDate']['date']).closest('.date').datepicker({autoclose: true, - weekStart: 0, - endDate: lastDay, - startDate: firstDay, - setStartDate: lastDay, - startView: 2, - position: "below-shifted-left"});*/ -} -function refreshCalendarDisplay(){ +function refreshCalendarDisplay() { refreshCalendarEvents(); refreshCalendarTasks(); } -function refreshCalendarTasks(){ +function updatePreviewDisplay() { + var url = ApplicationBaseURL + "/" + currentView; + + if (document.dayDisplayAjaxRequest) { + document.dayDisplayAjaxRequest.aborted = true; + document.dayDisplayAjaxRequest.abort(); + } + document.dayDisplayAjaxRequest + = triggerAjaxRequest(url, previewDisplayCallback, + {"startDate": sd, "endDate": ed }); + return false; +} + +function previewDisplayCallback(http) { + if (http.readyState == 4 + && http.status == 200) { + document.dayDisplayAjaxRequest = null; + $("rightFrameEvents").update(http.responseText); + + if ($("printLayoutList").value == "3") + _drawMonthEvents(eventsBlocks[2], eventsBlocks[0]); + else + _drawCalendarEvents(eventsBlocks[2], eventsBlocks[0]); + } + else + log ("calendarDisplayCallback Ajax error ("+ http.readyState + "/" + http.status + ")"); } function refreshCalendarEvents() { var todayDate = new Date(); - var sd; - var ed; var currentDay = window.parentvar("currentDay"); - var currentView = window.parentvar("currentView"); if (!currentDay) currentDay = todayDate.getDayString(); @@ -112,24 +120,35 @@ function refreshCalendarEvents() { {"startDate": sd, "endDate": ed}); } +function refreshCalendarTasks(){ + if (document.tasksListAjaxRequest) { + document.tasksListAjaxRequest.aborted = true; + document.tasksListAjaxRequest.abort(); + } + + url = window.parentvar("ApplicationBaseURL") + "/" + "taskslist?show-completed=" + printCompletedTasks + + "&asc=" + sorting["task-ascending"] + + "&sort=" + sorting["task-attribute"]; + var tasksList = window.parent$("tasksList"); + var selectedIds; + if (tasksList) + selectedIds = tasksList.getSelectedNodesId(); + else + selectedIds = null; + + document.tasksListAjaxRequest = triggerAjaxRequest(url, refreshCalendarTasksListCallback, selectedIds); +} + function refreshCalendarEventsCallback(http) { if (http.readyState == 4 && http.status == 200) { if (http.responseText.length > 0) { - var layout = $("printLayoutList").value; - var eventsBlocks = http.responseText.evalJSON(true); + eventsBlocks = http.responseText.evalJSON(true); $("rightFrameEvents").innerHTML = ""; - // 0 == listLayout - if (layout == "0"){ - _drawListEvents(eventsBlocks); - } - // 1 == weekLayout - if (layout == "1"){ - _drawWeekEvents(eventsBlocks); - } - // 2 == monthLayout - if (layout == "2"){ - _drawMonthEvents(eventsBlocks); + if ($("printLayoutList").value == "0") + _drawEventsCells(); + else { + updatePreviewDisplay(); } } } @@ -137,31 +156,75 @@ function refreshCalendarEventsCallback(http) { log("AJAX error when refreshing calendar events"); } -function _drawListEvents(eventsBlocks) { - for(var i=0; i 0) { + var tasksBlocks = http.responseText.evalJSON(true); + $("rightFrameTasks").innerHTML = ""; + var layout = $("printLayoutList").value; + if (layout == 0) + _drawTasksCells(tasksBlocks); + else + _drawTasksList(tasksBlocks); + } + } + else + log("AJAX error when refreshing calendar events"); +} + +function _drawEventsCells() { + for(var i=0; i < eventsBlocks[0].length; i++) { var event = _parseEvent(eventsBlocks[0][i]); $("rightFrameEvents").innerHTML += event; } } -function _parseEvent(event) -{ - var startDate = new Date(event[5] *1000); - var endDate = new Date(event[6] *1000); - var parsedEvent; - parsedEvent = "
"; - parsedEvent += ""; - if (displayTime) - parsedEvent += ""; - else - parsedEvent += ""; - parsedEvent += ""; - parsedEvent += "
"+ event[4] +"
"+ startDate.toLocaleString() + " - " + endDate.toLocaleString() + "
"+ startDate.toGMTString() + "
" + endDate.toGMTString() + "
Calendar : " + event[2] + "
"; - return parsedEvent; +function _drawTasksCells(tasksBlocks) { + for(var i=0; i < tasksBlocks.length; i++) + { + if (!(printNoDueDateTasks == 0 && tasksBlocks[i][5] == null)) { + var task = _parseTask(tasksBlocks[i]); + $("rightFrameTasks").innerHTML += task; + } + } } -function _drawMonthCalendarEvents(events, eventsData) { +function _drawTasksList(tasksBlocks) { + var tasksList; + tasksList = "
    "; + for(var i=0; i < tasksBlocks.length; i++) + { + if (!(printNoDueDateTasks == 0 && tasksBlocks[i][5] == null)) { + tasksList += "
  • " + tasksBlocks[i][4] + "
    • "; + } + } + tasksList += "
"; + $("rightFrameTasks").innerHTML = tasksList; +} + +function _drawCalendarEvents(events, eventsData) { + var daysView = $("daysView"); + var subdivs = daysView.childNodesWithTag("div"); + for (var i = 0; i < subdivs.length; i++) { + var subdiv = subdivs[i]; + if (subdiv.hasClassName("days")) { + var days = subdiv.childNodesWithTag("div"); + for (var j = 0; j < days.length; j++) { + var parentDiv = days[j].childNodesWithTag("div")[0]; + for (var k = 0; k < events[j].length; k++) { + var eventRep = events[j][k]; + var nbr = eventRep.nbr; + var eventCell = newEventDIV(eventRep, eventsData[nbr]); + parentDiv.appendChild(eventCell); + } + } + } + } +} + +function _drawMonthEvents(events, eventsData) { var daysView = $("monthDaysView"); var days = daysView.childNodesWithTag("div"); for (var i = 0; i < days.length; i++) { @@ -170,67 +233,127 @@ function _drawMonthCalendarEvents(events, eventsData) { var eventRep = events[i][j]; var nbr = eventRep.nbr; var eventCell = newMonthEventDIV(eventRep, eventsData[nbr]); - parentDiv.appendChild(eventCell); + parentDiv.innerHTML += eventCell; } } } -/*********************** Input Field, Checkboxes, Radio and listMenu *********************************/ - -function onInputTitle(event){ - var titleValue = $("title").value; - if (titleValue) - document.getElementById("rightFrameTitle").innerHTML = titleValue + "
"; +function newMonthEventDIV(eventRep, event) { + var eventText; + if (event[8]) // all-day event + eventText = event[4]; else - document.getElementById("rightFrameTitle").innerHTML = titleValue; + eventText = "" + eventRep.starthour + " - " + event[4] + ""; + + return eventText; } -function onPrintLayoutListChange(event) { - // TODO : Common filtering; what to display on the view +function _parseEvent(event) { + var parsedEvent; + var startDate = new Date(event[5] *1000); + var endDate = new Date(event[6] *1000); + parsedEvent = "
"; + parsedEvent += ""; + if (displayTime) + parsedEvent += ""; + else + parsedEvent += ""; + parsedEvent += ""; + parsedEvent += "
"+ event[4] +"
"+ startDate.toLocaleString() + " - " + endDate.toLocaleString() + "
"+ startDate.toGMTString() + "
" + endDate.toGMTString() + "
" + event[2] + "
"; + return parsedEvent; +} + +function _parseTask(task) { + var parsedTask; + var dueDate; - // legend for the events display; 0=list, 1=week, 2=month + parsedTask = "
"; + if (task[12] == "overdue") + parsedTask += ""; + else if (task[12] == "completed") { + parsedTask += ""; + } + else + parsedTask += ""; + + if (task[5] != null) { + dueDate = new Date(task[5] *1000); + if (displayTime) + parsedTask += ""; + else + parsedTask += ""; + } + parsedTask += ""; + parsedTask += "
"+ task[4] +"
"+ task[4] +"
"+ task[4] +"
"+ dueDate.toLocaleString() + "
"+ dueDate.toGMTString() + "
" + task[2] + "
"; + + return parsedTask; +} + +/*********************** Input Field, Checkboxes, Radio and listMenu *********************************/ + +function onInputTitleChange(event){ + var inputFieldTitle = $("inputFieldTitle").value; + if (inputFieldTitle) + document.getElementById("rightFrameTitle").innerHTML = inputFieldTitle + "
"; + else + document.getElementById("rightFrameTitle").innerHTML = inputFieldTitle; +} + +function onPrintLayoutListChange() { + var selectedLayout = $("printLayoutList").value; + var parentView = window.parentvar("currentView"); + switch(selectedLayout) { + case "0": // List view + window.resizeTo(660,500); + ajustWindow(660,500); + $("rightSide").style.width = "390px"; + currentView = parentView; + break; + + case "1": // Day view + window.resizeTo(660,500); + ajustWindow(660,500); + $("rightSide").style.width = "390px"; + currentView = "dayview"; + break; + + case "2": // Week view + window.resizeTo(1010,500); + ajustWindow(1010,500); + $("rightSide").style.width = "740px"; + currentView = "weekview"; + break; + + case "3": // Month view + window.resizeTo(1010,500); + ajustWindow(1010,500); + $("rightSide").style.width = "740px"; + currentView = "monthview"; + break; + } refreshCalendarDisplay(); } -function initializeLayoutList() { - var printLayoutList = $("printLayoutList"); - var title = $("title"); - if (printLayoutList) { - onPrintLayoutListChange(); - printLayoutList.observe("change", onPrintLayoutListChange); - - } - if (title){ - title.observe("change", onInputTitle); - } +function onEventsCheck(checkBox) { + if(checkBox.checked) + document.getElementById("rightFrameEvents").style.display = 'block'; + else + document.getElementById("rightFrameEvents").style.display = 'none'; } function onTasksCheck(checkBox) { - if (checkBox) { - var printOptions = document.getElementsByName("printOptions"); - for (var i = 0; i < printOptions.length; i++) - if (printOptions[i] != checkBox) - printOptions[i].disabled = !checkBox.checked; + var printOptions = document.getElementsByName("printOptions"); + for (var i = 0; i < printOptions.length; i++) + printOptions[i].disabled = !checkBox.checked; - if(checkBox.checked) - document.getElementById("rightFrameTasks").style.display = 'block'; - else - document.getElementById("rightFrameTasks").style.display = 'none'; - } + if(checkBox.checked) + document.getElementById("rightFrameTasks").style.display = 'block'; + else + document.getElementById("rightFrameTasks").style.display = 'none'; } -function onEventsCheck(checkBox) { - if (checkBox){ - if(checkBox.checked) - document.getElementById("rightFrameEvents").style.display = 'block'; - else - document.getElementById("rightFrameEvents").style.display = 'none'; - } - -} - -function printDateCheck() { +function onPrintDateCheck() { var dateRange = document.getElementsByName("dateRange"); var customDate = document.getElementById("customDate"); for (var i = 0; i < dateRange.length; i++) @@ -238,16 +361,53 @@ function printDateCheck() { dateRange[i].children[1].children[0].disabled = !customDate.checked; } -function displayTimeCheck(){ - var radioButtons = document.getElementsByName("printTime"); - if (radioButtons[0].checked) - displayTime = true; - else - displayTime = false; - +function onDisplayTimeFormatCheck(){ + var radioTimeFormat = document.getElementsByName("printTimeFormat"); + displayTime = (radioTimeFormat[0].checked ? true : false); refreshCalendarDisplay(); } +function onPrintCompletedTasksCheck(checkBox) { + printCompletedTasks = (checkBox.checked ? 1 : 0); + refreshCalendarTasks(); +} + +function onPrintNoDueDateTasksCheck(checkBox) { + printNoDueDateTasks = (checkBox.checked ? 1 : 0); + refreshCalendarTasks(); +} + +/************** Date picker functions *************/ +this.initTimeWidgets = function (widgets) { + this.timeWidgets = widgets; + + jQuery(widgets['start']['date']).closest('.date').datepicker({autoclose: true, weekStart: 0}); + jQuery(widgets['end']['date']).closest('.date').datepicker({autoclose: true, weekStart: 0}); + + //jQuery(widgets['start']['date']).change(onAdjustTime); + + /*jQuery(widgets['startingDate']['date']).closest('.date').datepicker({autoclose: true, + weekStart: 0, + endDate: lastDay, + startDate: firstDay, + setStartDate: lastDay, + startView: 2, + position: "below-shifted-left"});*/ +} + +this.onAdjustTime = function(event) { + onAdjustDueTime(event); +} + +this.onAdjustDueTime = function(event) { + /*var dateDelta = (window.getStartDate().valueOf() - window.getShadowStartDate().valueOf()); + var newDueDate = new Date(window.getDueDate().valueOf() + dateDelta); + window.setDueDate(newDueDate);*/ + + window.timeWidgets['start']['date'].updateShadowValue(); +} +/****************************************************/ + /******************************* Buttons ***********************************************/ function onPrintCancelClick(event) { @@ -263,16 +423,28 @@ function onPrintClick(event) { function init() { + initializePrintSettings(); + initializeWhatToPrint(); + //initializeOptions(); $("cancelButton").observe("click", onPrintCancelClick); $("printButton").observe("click", onPrintClick); + onPrintLayoutListChange(); +} + +function initializePrintSettings() { + $("inputFieldTitle").observe("change", onInputTitleChange); + $("printLayoutList").observe("change", onPrintLayoutListChange); +} + +function initializeWhatToPrint() { var widgets = {'start': {'date': $("startingDate")}, 'end': {'date': $("endingDate")}}; initTimeWidgets(widgets); - printDateCheck(); - displayTimeCheck(); - initializeLayoutList(); - refreshCalendarDisplay(); + onPrintDateCheck(); } +/*function initializeOptions() { +}*/ + document.observe("dom:loaded", init);