X-Git-Url: https://code.citadel.org/?a=blobdiff_plain;f=webcit-ng%2Fstatic%2Fjs%2Fview_calendar.js;h=28fcbd68cbb028ffc8344db3a321d9bbfd5fb4b9;hb=HEAD;hp=b6d135d368be13e6ba0fcea1ad816f08dd563eab;hpb=eae58320fe6fabe7ae035c18561c90bb5138fb82;p=citadel.git

diff --git a/webcit-ng/static/js/view_calendar.js b/webcit-ng/static/js/view_calendar.js
index b6d135d36..76de28902 100644
--- a/webcit-ng/static/js/view_calendar.js
+++ b/webcit-ng/static/js/view_calendar.js
@@ -1,12 +1,227 @@
 // 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
-// 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() {
-	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();
 }