webcit-ng/static/js/view_calendar.js

   1 // This module handles the view for "calendar" rooms.
   2 //
   3 // Copyright (c) 2016-2024 by the citadel.org team
   4 //
   5 // This program is open source software.  Use, duplication, or
   6 // disclosure is subject to the GNU General Public License v3.
   7
   8
   9 function XXXXXview_render_calendar() {
  10
  11         let options = {
  12                 method: "REPORT",
  13                 headers: {
  14                         "Content-Type" : "application/xml; charset=utf-8"
  15                 },
  16                 body: `
  17                         <CAL:calendar-query xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav">
  18                                 <allprop />
  19                                 <CAL:filter>
  20                                         <CAL:comp-filter name="VCALENDAR">
  21                                         <CAL:comp-filter name="VEVENT" />
  22                                         </CAL:comp-filter>
  23                                 </CAL:filter>
  24                         </CAL:calendar-query>
  25                 `
  26         };
  27
  28         fetch("/ctdl/r/" + escapeHTMLURI(current_room), options)
  29         .then(response => {
  30                 if (response.ok) {
  31                         return(response.text());
  32                 }
  33                 else {
  34                         throw new Error(`${response.status} ${response.statusText}`);
  35                 }
  36         })
  37         //.then(str => document.getElementById("ctdl-main").innerHTML = escapeHTML(str))
  38         .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  39         .then(xmlcal => {
  40                 document.getElementById("ctdl-main").innerHTML = "calendar items:<br>";
  41                 let root = xmlcal.documentElement;
  42                 let children = root.childNodes;
  43                 for (let i=0; i<children.length; ++i) {
  44                         let child = children[i];
  45                         if (child.nodeType == Node.ELEMENT_NODE) {
  46                                 var getetag_e = child.getElementsByTagName("DAV:href")[0];
  47                                 var getetag_s = getetag_e.textContent;
  48                                 document.getElementById("ctdl-main").innerHTML += getetag_s + "<br>";
  49                         }
  50                 }
  51
  52         })
  53         .catch(error => {
  54                 console.log(error);
  55                 document.getElementById("ctdl-main").innerHTML = `<div class="ctdl-fatal-error">${error}</div>`;
  56         });
  57 }
  58
  59 var date_being_displayed = new Date();
  60 var days_being_displayed = 7;           /* 1 = day view; 5 = work week view; 7 = week view */
  61 var start_of_week = 1;                  /* 0 = Sunday; 1 = Monday */
  62
  63 // Update the calendar display (we might have changed dates, or added/removed data)
  64 function update_calendar_display() {
  65
  66         // Clone the "date_being_displayed" and scope it locally for this function.
  67         let this_column_date = new Date(date_being_displayed);
  68
  69         // If displaying a whole week, start the week on the correct day of the week (usually Sunday or Monday)
  70         if (days_being_displayed == 7) {
  71                 while (this_column_date.getDay() != start_of_week) {
  72                         this_column_date.setDate(this_column_date.getDate() - 1);
  73                 }
  74         }
  75
  76         // If displaying a work week, start the week on Monday
  77         if (days_being_displayed == 5) {
  78                 while (this_column_date.getDay() != 1) {
  79                         this_column_date.setDate(this_column_date.getDate() - 1);
  80                 }
  81         }
  82
  83         // Go through every day on the screen (up to a week I guess)
  84         for (let i=0; i<days_being_displayed; ++i) {
  85
  86                 // Populate the columns
  87                 let year = this_column_date.getFullYear();
  88                 let month = this_column_date.getMonth() + 1;
  89                 let day_of_month = this_column_date.getDate();
  90                 let weekday = this_column_date.toLocaleString("default", { weekday: "short" })
  91                 let monthname = this_column_date.toLocaleString("default", { month: "short" })
  92                 document.getElementById("ctdl-cal-label" + i).innerHTML = weekday + " " + year + "-" + monthname + "-" + day_of_month;
  93                 document.getElementById("ctdl-cal-day" + i).innerHTML = "This is the content for " + this_column_date;
  94
  95                 // Get ready for the next column
  96                 this_column_date.setDate(this_column_date.getDate() + 1);
  97         }
  98 }
  99
 100
 101 // Set the week view to 1-day (day), 3-day, 5-day (work week), or 7-day (week).
 102 // Any value is possible but the above are ones which seem to make sense.
 103 // You could for example do 14 for a "two week view" but it would start to look compressed.
 104 function set_week_days(days) {
 105         days_being_displayed = days;
 106         view_render_calendar();
 107 }
 108
 109
 110 // Go back by one year.
 111 function go_back_one_year() {
 112         date_being_displayed.setYear(date_being_displayed.getFullYear() - 1 );
 113         update_calendar_display();
 114 }
 115
 116
 117 // Go back by one month.
 118 function go_back_one_month() {
 119         date_being_displayed.setMonth(date_being_displayed.getMonth() - 1 );
 120         update_calendar_display();
 121 }
 122
 123
 124 // Go back by one week.
 125 function go_back_one_week() {
 126         date_being_displayed.setDate(date_being_displayed.getDate() - 7 );
 127         update_calendar_display();
 128 }
 129
 130
 131 // Go back by one day.
 132 function go_back_one_day() {
 133         date_being_displayed.setDate(date_being_displayed.getDate() - 1);
 134         update_calendar_display();
 135 }
 136
 137
 138 // Flip the calendar to today's date.
 139 function go_to_today() {
 140         date_being_displayed = new Date();
 141         update_calendar_display();
 142 }
 143
 144
 145 // Advance the calendar by one day.
 146 function go_forward_one_day() {
 147         date_being_displayed.setDate(date_being_displayed.getDate() + 1);
 148         update_calendar_display();
 149 }
 150
 151
 152 // Advance the calendar by one week.
 153 function go_forward_one_week() {
 154         date_being_displayed.setDate(date_being_displayed.getDate() + 7);
 155         update_calendar_display();
 156 }
 157
 158
 159 // Advance the calendar by one month.
 160 function go_forward_one_month() {
 161         date_being_displayed.setMonth(date_being_displayed.getMonth() + 1 );
 162         update_calendar_display();
 163 }
 164
 165
 166 // Advance the calendar by one year.
 167 function go_forward_one_year() {
 168         date_being_displayed.setYear(date_being_displayed.getFullYear() + 1 );
 169         update_calendar_display();
 170 }
 171
 172
 173 // RENDERER FOR THIS VIEW
 174 function view_render_calendar() {
 175
 176         // These are TEMPORARY navigation buttons.
 177         document.getElementById("ctdl-calendar-nav").innerHTML = `
 178                 <a href="javascript:set_week_days(1);">Day</a>&nbsp;|&nbsp;
 179                 <a href="javascript:set_week_days(3);">3-Day</a>&nbsp;|&nbsp;
 180                 <a href="javascript:set_week_days(5);">WorkWeek</a>&nbsp;|&nbsp;
 181                 <a href="javascript:set_week_days(7);">Week</a>&nbsp;|&nbsp;
 182                 <a href="javascript:go_back_one_year();">←Y</a>&nbsp;|&nbsp;
 183                 <a href="javascript:go_back_one_month();">←M</a>&nbsp;|&nbsp;
 184                 <a href="javascript:go_back_one_week();">←W</a>&nbsp;|&nbsp;
 185                 <a href="javascript:go_back_one_day();">←D</a>&nbsp;|&nbsp;
 186                 <a href="javascript:go_to_today();">today</a>&nbsp;|&nbsp;
 187                 <a href="javascript:go_forward_one_day();">D→</a>&nbsp;|&nbsp;
 188                 <a href="javascript:go_forward_one_week();">W→</a>&nbsp;|&nbsp;
 189                 <a href="javascript:go_forward_one_month();">M→</a>&nbsp;|&nbsp;
 190                 <a href="javascript:go_forward_one_year();">Y→</a>&nbsp;
 191         `;
 192         document.getElementById("ctdl-calendar-nav").style.display = "block";
 193
 194         let caldisplay = "";
 195         caldisplay += `<div class="ctdl-calendar-container">`;          // top level container
 196         caldisplay += `<div class="ctdl-calendar-toplabels">`;          // the row of labels above the calendar content
 197
 198         // This section renders the day labels at the top of the screen
 199         caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
 200         caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
 201         caldisplay += "</div>";                                         // closes ctdl-calendar-ruler
 202         for (let i=0; i<days_being_displayed; ++i) {
 203                 caldisplay += `<div id="ctdl-cal-label` + i + `" class="ctdl-calendar-label">Hi!</div>`;
 204         }
 205         caldisplay += "</div>";                                         // closes ctdl-calendar-week
 206
 207         caldisplay += `</div>`;                                         // closes ctdl-calendar-toplabels
 208         caldisplay += `<div class="ctdl-calendar-content">`;            // the actual boxes of content below the labels
 209         caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
 210         caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
 211         for (let i=0; i<24; ++i) {
 212                 caldisplay += i + "<br>";
 213         };
 214         caldisplay += `</div>`;                                         // closes ctdl-calendar-ruler
 215
 216         // This section renders the day boxes.
 217         for (let i=0; i<days_being_displayed; ++i) {
 218                 caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
 219         }
 220         caldisplay += "</div>";                                         // closes ctdl-calendar-week
 221         caldisplay += "</div>";                                         // closes ctdl-calendar-content
 222         caldisplay += "</div>";                                         // closes ctdl-calendar-container
 223         document.getElementById("ctdl-main").innerHTML = caldisplay;
 224
 225         // Start on today.
 226         go_to_today();
 227 }