]> code.citadel.org Git - citadel.git/blobdiff - webcit-ng/static/js/view_calendar.js
Fix ansi auto-detect
[citadel.git] / webcit-ng / static / js / view_calendar.js
index b6d135d368be13e6ba0fcea1ad816f08dd563eab..76de28902e36dead5766c19586cc9bc20bc75a32 100644 (file)
 // This module handles the view for "calendar" rooms.
 //
 // This module handles the view for "calendar" rooms.
 //
-// Copyright (c) 2016-2023 by the citadel.org team
+// Copyright (c) 2016-2024 by the citadel.org team
 //
 // This program is open source software.  Use, duplication, or
 //
 // This program is open source software.  Use, duplication, or
-// disclosure are subject to the GNU General Public License v3.
+// disclosure is subject to the GNU General Public License v3.
+
+
+function XXXXXview_render_calendar() {
+
+       let options = {
+               method: "REPORT",
+               headers: {
+                       "Content-Type" : "application/xml; charset=utf-8"
+               },
+               body: `
+                       <CAL:calendar-query xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav">
+                               <allprop />
+                               <CAL:filter>
+                                       <CAL:comp-filter name="VCALENDAR">
+                                       <CAL:comp-filter name="VEVENT" />
+                                       </CAL:comp-filter>
+                               </CAL:filter>
+                       </CAL:calendar-query>
+               `
+       };
+
+       fetch("/ctdl/r/" + escapeHTMLURI(current_room), options)
+       .then(response => {
+               if (response.ok) {
+                       return(response.text());
+               }
+               else {
+                       throw new Error(`${response.status} ${response.statusText}`);
+               }
+       })
+       //.then(str => document.getElementById("ctdl-main").innerHTML = escapeHTML(str))
+       .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
+       .then(xmlcal => {
+               document.getElementById("ctdl-main").innerHTML = "calendar items:<br>";
+               let root = xmlcal.documentElement;
+               let children = root.childNodes;
+               for (let i=0; i<children.length; ++i) {
+                       let child = children[i];
+                       if (child.nodeType == Node.ELEMENT_NODE) {
+                               var getetag_e = child.getElementsByTagName("DAV:href")[0];
+                               var getetag_s = getetag_e.textContent;
+                               document.getElementById("ctdl-main").innerHTML += getetag_s + "<br>";
+                       }
+               }
+
+       })
+       .catch(error => {
+               console.log(error);
+               document.getElementById("ctdl-main").innerHTML = `<div class="ctdl-fatal-error">${error}</div>`;
+       });
+}
+
+var date_being_displayed = new Date();
+var days_being_displayed = 7;          /* 1 = day view; 5 = work week view; 7 = week view */
+var start_of_week = 1;                 /* 0 = Sunday; 1 = Monday */
+
+// Update the calendar display (we might have changed dates, or added/removed data)
+function update_calendar_display() {
+
+       // Clone the "date_being_displayed" and scope it locally for this function.
+       let this_column_date = new Date(date_being_displayed);
+
+       // If displaying a whole week, start the week on the correct day of the week (usually Sunday or Monday)
+       if (days_being_displayed == 7) {
+               while (this_column_date.getDay() != start_of_week) {
+                       this_column_date.setDate(this_column_date.getDate() - 1);
+               }
+       }
+
+       // If displaying a work week, start the week on Monday
+       if (days_being_displayed == 5) {
+               while (this_column_date.getDay() != 1) {
+                       this_column_date.setDate(this_column_date.getDate() - 1);
+               }
+       }
+
+       // Go through every day on the screen (up to a week I guess)
+       for (let i=0; i<days_being_displayed; ++i) {
+
+               // Populate the columns
+               let year = this_column_date.getFullYear();
+               let month = this_column_date.getMonth() + 1;
+               let day_of_month = this_column_date.getDate();
+               let weekday = this_column_date.toLocaleString("default", { weekday: "short" })
+               let monthname = this_column_date.toLocaleString("default", { month: "short" })
+               document.getElementById("ctdl-cal-label" + i).innerHTML = weekday + " " + year + "-" + monthname + "-" + day_of_month;
+               document.getElementById("ctdl-cal-day" + i).innerHTML = "This is the content for " + this_column_date;
+
+               // Get ready for the next column
+               this_column_date.setDate(this_column_date.getDate() + 1);
+       }
+}
+
+
+// Set the week view to 1-day (day), 3-day, 5-day (work week), or 7-day (week).
+// Any value is possible but the above are ones which seem to make sense.
+// You could for example do 14 for a "two week view" but it would start to look compressed.
+function set_week_days(days) {
+       days_being_displayed = days;
+       view_render_calendar();
+}
+
+
+// Go back by one year.
+function go_back_one_year() {
+       date_being_displayed.setYear(date_being_displayed.getFullYear() - 1 );
+       update_calendar_display();
+}
+
+
+// Go back by one month.
+function go_back_one_month() {
+       date_being_displayed.setMonth(date_being_displayed.getMonth() - 1 );
+       update_calendar_display();
+}
+
+
+// Go back by one week.
+function go_back_one_week() {
+       date_being_displayed.setDate(date_being_displayed.getDate() - 7 );
+       update_calendar_display();
+}
+
+
+// Go back by one day.
+function go_back_one_day() {
+       date_being_displayed.setDate(date_being_displayed.getDate() - 1);
+       update_calendar_display();
+}
+
+
+// Flip the calendar to today's date.
+function go_to_today() {
+       date_being_displayed = new Date();
+       update_calendar_display();
+}
+
+
+// Advance the calendar by one day.
+function go_forward_one_day() {
+       date_being_displayed.setDate(date_being_displayed.getDate() + 1);
+       update_calendar_display();
+}
+
+
+// Advance the calendar by one week.
+function go_forward_one_week() {
+       date_being_displayed.setDate(date_being_displayed.getDate() + 7);
+       update_calendar_display();
+}
+
+
+// Advance the calendar by one month.
+function go_forward_one_month() {
+       date_being_displayed.setMonth(date_being_displayed.getMonth() + 1 );
+       update_calendar_display();
+}
+
+
+// Advance the calendar by one year.
+function go_forward_one_year() {
+       date_being_displayed.setYear(date_being_displayed.getFullYear() + 1 );
+       update_calendar_display();
+}
 
 
 // RENDERER FOR THIS VIEW
 function view_render_calendar() {
 
 
 // RENDERER FOR THIS VIEW
 function view_render_calendar() {
-       document.getElementById("ctdl-main").innerHTML = `STUB RENDERER FOR CALENDAR ROOM`;
+
+       // These are TEMPORARY navigation buttons.
+       document.getElementById("ctdl-calendar-nav").innerHTML = `
+               <a href="javascript:set_week_days(1);">Day</a>&nbsp;|&nbsp;
+               <a href="javascript:set_week_days(3);">3-Day</a>&nbsp;|&nbsp;
+               <a href="javascript:set_week_days(5);">WorkWeek</a>&nbsp;|&nbsp;
+               <a href="javascript:set_week_days(7);">Week</a>&nbsp;|&nbsp;
+               <a href="javascript:go_back_one_year();">←Y</a>&nbsp;|&nbsp;
+               <a href="javascript:go_back_one_month();">←M</a>&nbsp;|&nbsp;
+               <a href="javascript:go_back_one_week();">←W</a>&nbsp;|&nbsp;
+               <a href="javascript:go_back_one_day();">←D</a>&nbsp;|&nbsp;
+               <a href="javascript:go_to_today();">today</a>&nbsp;|&nbsp;
+               <a href="javascript:go_forward_one_day();">D→</a>&nbsp;|&nbsp;
+               <a href="javascript:go_forward_one_week();">W→</a>&nbsp;|&nbsp;
+               <a href="javascript:go_forward_one_month();">M→</a>&nbsp;|&nbsp;
+               <a href="javascript:go_forward_one_year();">Y→</a>&nbsp;
+       `;
+       document.getElementById("ctdl-calendar-nav").style.display = "block";
+
+       let caldisplay = "";
+       caldisplay += `<div class="ctdl-calendar-container">`;          // top level container
+       caldisplay += `<div class="ctdl-calendar-toplabels">`;          // the row of labels above the calendar content
+
+       // This section renders the day labels at the top of the screen
+       caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
+       caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
+       caldisplay += "</div>";                                         // closes ctdl-calendar-ruler
+       for (let i=0; i<days_being_displayed; ++i) {
+               caldisplay += `<div id="ctdl-cal-label` + i + `" class="ctdl-calendar-label">Hi!</div>`;
+       }
+       caldisplay += "</div>";                                         // closes ctdl-calendar-week
+
+       caldisplay += `</div>`;                                         // closes ctdl-calendar-toplabels
+       caldisplay += `<div class="ctdl-calendar-content">`;            // the actual boxes of content below the labels
+       caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
+       caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
+       for (let i=0; i<24; ++i) {
+               caldisplay += i + "<br>";
+       };
+       caldisplay += `</div>`;                                         // closes ctdl-calendar-ruler
+
+       // This section renders the day boxes.
+       for (let i=0; i<days_being_displayed; ++i) {
+               caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
+       }
+       caldisplay += "</div>";                                         // closes ctdl-calendar-week
+       caldisplay += "</div>";                                         // closes ctdl-calendar-content
+       caldisplay += "</div>";                                         // closes ctdl-calendar-container
+       document.getElementById("ctdl-main").innerHTML = caldisplay;
+
+       // Start on today.
+       go_to_today();
 }
 }