#8, added fullcalendar

static/js/node.mjs

@@ -986,6 +986,41 @@ class ProfileSettings extends Component {
 }
 
 class ScheduleEventList extends Component {
+	static CALENDAR = Symbol('CALENDAR')
+	static LIST = Symbol('LIST')
+	constructor() {//{{{
+		super()
+		this.tab = signal(ScheduleEventList.CALENDAR)
+	}//}}}
+	render() {//{{{
+		var tab
+		switch (this.tab.value) {
+			case ScheduleEventList.CALENDAR:
+				tab = html`<${ScheduleCalendarTab} />`
+				break;
+			case ScheduleEventList.LIST:
+				tab = html`<${ScheduleEventListTab} />`
+				break;
+		}
+
+		return html`
+		<div style="margin: 32px">
+			<div class="folder">
+				<div class="tabs">
+					<div onclick=${() => this.tab.value = ScheduleEventList.CALENDAR} class="tab ${this.tab.value == ScheduleEventList.CALENDAR ? 'selected' : ''}">Calendar</div>
+					<div onclick=${() => this.tab.value = ScheduleEventList.LIST} class="tab ${this.tab.value == ScheduleEventList.LIST ? 'selected' : ''}">List</div>
+					<div class="hack"></div>
+				</div>
+				<div class="content">
+					${tab}
+				</div>
+			</div>
+		</div>
+		`
+	}//}}}
+}
+
+class ScheduleEventListTab extends Component {
 	constructor() {//{{{
 		super()
 		this.events = signal(null)
@@ -995,7 +1030,12 @@ class ScheduleEventList extends Component {
 		if (this.events.value === null)
 			return
 
-		let events = this.events.value.map(evt => {
+		let events = this.events.value.sort((a, b) => {
+			if (a.Time < b.Time) return -1
+			if (a.Time > b.Time) return 1
+			return 0
+		}).map(evt => {
+			console.log(evt)
 			const dt = evt.Time.split('T')
 			const remind = () => {
 				if (evt.RemindMinutes > 0)
@@ -1032,5 +1072,45 @@ class ScheduleEventList extends Component {
 	}//}}}
 }
 
+class ScheduleCalendarTab extends Component {
+	constructor() {//{{{
+		super()
+	}//}}}
+	componentDidMount() {
+		let calendarEl = document.getElementById('fullcalendar');
+		this.calendar = new FullCalendar.Calendar(calendarEl, {
+			initialView: 'dayGridMonth',
+			events: this.events,
+			eventTimeFormat: {
+				hour12: false,
+				hour: '2-digit',
+				minute: '2-digit',
+			},
+			firstDay: 1,
+		});
+		this.calendar.render();
+	}
+	render() {
+		return html`<div id="fullcalendar"></div>`
+	}
+	events(info, successCallback, failureCallback) {
+		const req = {
+			StartDate: info.startStr,
+			EndDate: info.endStr,
+		}
+		_app.current.request('/schedule/list', req)
+			.then(data => {
+				const fullcalendarEvents = data.ScheduleEvents.map(sch => {
+					return {
+						title: sch.Description,
+						start: sch.Time,
+						url: `/?node=${sch.Node.ID}`,
+					}
+				})
+				successCallback(fullcalendarEvents)
+			})
+	}
+}
+
 
 // vim: foldmethod=marker