Event schedule

static/js/node.mjs

@@ -14,7 +14,6 @@ export class NodeUI extends Component {
 		this.nodeContent = createRef()
 		this.nodeProperties = createRef()
 		this.keys = signal([])
-
 		this.page = signal('node')
 		window.addEventListener('popstate', evt => {
 			if (evt.state && evt.state.hasOwnProperty('nodeID'))
@@ -59,7 +58,7 @@ export class NodeUI extends Component {
 			case 'node':
 				if (node.ID == 0) {
 					page = html`
-						<div style="cursor: pointer; color: #000; text-align: center;" onclick=${()=>this.page.value = 'schedule-events'}>Schedule events</div>
+						<div style="cursor: pointer; color: #000; text-align: center;" onclick=${() => this.page.value = 'schedule-events'}>Schedule events</div>
 						${children.length > 0 ? html`<div class="child-nodes">${children}</div><div id="notes-version">Notes version ${window._VERSION}</div>` : html``}
 					`
 				} else {
@@ -73,6 +72,7 @@ export class NodeUI extends Component {
 							${node.Name} ${padlock}
 						</div>
 						<${NodeContent} key=${node.ID} node=${node} ref=${this.nodeContent} />
+						<${NodeEvents} events=${node.ScheduleEvents.value} />
 						<${Checklist} ui=${this} groups=${node.ChecklistGroups} />
 						<${NodeFiles} node=${this.node.value} />
 					`
@@ -250,15 +250,12 @@ export class NodeUI extends Component {
 		})
 	}//}}}
 	saveNode() {//{{{
-		/*
-		let nodeContent = this.nodeContent.current
-		if (this.page.value != 'node' || nodeContent === null)
-			return
-		*/
-
 		let content = this.node.value.content()
 		this.node.value.setContent(content)
-		this.node.value.save(() => this.props.app.nodeModified.value = false)
+		this.node.value.save(() => {
+			this.props.app.nodeModified.value = false
+			this.node.value.retrieve()
+		})
 	}//}}}
 	renameNode() {//{{{
 		let name = prompt("New name")
@@ -389,6 +386,24 @@ class MarkdownContent extends Component {
 	}//}}}
 }
 
+class NodeEvents extends Component {
+	render({ events }) {//{{{
+		if (events.length == 0)
+			return html``
+
+		const eventElements = events.map(evt => {
+			const dt = evt.Time.split('T')
+			return html`<div>${dt[0]} ${dt[1].slice(0, 5)}</div>`
+		})
+		return html`
+			<div id="schedule-section">
+				<div class="header">Schedule events</div>
+				${eventElements}
+			</div>
+		`
+	}//}}}
+}
+
 class NodeFiles extends Component {
 	render({ node }) {//{{{
 		if (node.Files === null || node.Files.length == 0)
@@ -443,10 +458,16 @@ export class Node {
 		this._decrypted = false
 		this._expanded = false // start value for the TreeNode component,
 		this.ChecklistGroups = {}
+		this.ScheduleEvents = signal([])
 		// it doesn't control it afterwards.
 		// Used to expand the crumbs upon site loading.
 	}//}}}
 	retrieve(callback) {//{{{
+		this.app.request('/schedule/list', { NodeID: this.ID })
+			.then(res => {
+				this.ScheduleEvents.value = res.ScheduleEvents
+			})
+
 		this.app.request('/node/retrieve', { ID: this.ID })
 			.then(res => {
 				this.ParentID = res.Node.ParentID
@@ -965,18 +986,50 @@ class ProfileSettings extends Component {
 }
 
 class ScheduleEventList extends Component {
-	constructor() {
+	constructor() {//{{{
 		super()
+		this.events = signal(null)
 		this.retrieveFutureEvents()
-	}
-	render() {
-	}
-	retrieveFutureEvents() {
-		_app.current.request('/schedule/list')
-		.then(foo=>{
-				console.log(foo)
+	}//}}}
+	render() {//{{{
+		if (this.events.value === null)
+			return
+
+		let events = this.events.value.map(evt => {
+			const dt = evt.Time.split('T')
+			const remind = () => {
+				if (evt.RemindMinutes > 0)
+					return html`${evt.RemindMinutes} min`
+			}
+			const nodeLink = () => html`<a href="/?node=${evt.Node.ID}">${evt.Node.Name}</a>`
+
+
+			return html`
+				<div class="date">${dt[0]}</div>
+				<div class="time">${dt[1].slice(0, 5)}</div>
+				<div class="remind"><${remind} /></div>
+				<div class="description">${evt.Description}</div>
+				<div class="node"><${nodeLink} /></div>
+			`
 		})
-	}
+
+		return html`
+			<div id="schedule-events">
+				<div class="header">Date</div>
+				<div class="header">Time</div>
+				<div class="header">Reminder</div>
+				<div class="header">Event</div>
+				<div class="header">Node</div>
+				${events}
+			</div>
+		`
+	}//}}}
+	retrieveFutureEvents() {//{{{
+		_app.current.request('/schedule/list')
+			.then(data => {
+				this.events.value = data.ScheduleEvents
+			})
+	}//}}}
 }