tildefriends/apps/journal/tf-journal-entry.js

import {LitElement, html, unsafeHTML, range} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';

class TfJournalEntryElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			key: {type: String},
			journals: {type: Object},
			text: {type: String},
		};
	}

	constructor() {
		super();
		this.journals = {};
		this.key = new Date().toISOString().split('T')[0];
	}

	markdown(md) {
		var reader = new commonmark.Parser({safe: true});
		var writer = new commonmark.HtmlRenderer();
		var parsed = reader.parse(md || '');
		return writer.render(parsed);
	}

	on_discard(event) {
		this.text = undefined;
	}

	async on_publish() {
		console.log('publish', this.text);
		this.dispatchEvent(new CustomEvent('publish', {
			bubbles: true,
			detail: {
				key: this.shadowRoot.getElementById('date_picker').value,
				text: this.text,
			},
		}));
	}

	back_dates(count) {
		let now = new Date();
		let result = [];
		for (let i = 0; i < count; i++) {
			let next = new Date(now);
			next.setDate(now.getDate() - i);
			result.push(next.toISOString().split('T')[0]);
		}
		return result;
	}

	on_edit(event) {
		this.text = event.srcElement.value;
	}

	on_date_change(event) {
		this.key = event.srcElement.value;
		this.text = this.journals[this.key]?.text;
	}

	render() {
		console.log('RENDER ENTRY', this.key, this.journals?.[this.key]);
		return html`
			<select id="date_picker" @change=${this.on_date_change}>
				${this.back_dates(10).map(x => html`
					<option value=${x}>${x}</option>
				`)}
			</select>
			<div style="display: inline-flex; flex-direction: row">
				<button ?disabled=${this.text == this.journals?.[this.key]?.text} @click=${this.on_publish}>Publish</button>
				<button @click=${this.on_discard}>Discard</button>
			</div>
			<div style="display: flex; flex-direction: row">
				<textarea
					style="flex: 1 1; min-height: 10em"
					@input=${this.on_edit} .value=${this.text ?? this.journals?.[this.key]?.text ?? ''}></textarea>
				<div style="flex: 1 1">${unsafeHTML(this.markdown(this.text ?? this.journals?.[this.key]?.text))}</div>
			</div>
		`;
	}
}

customElements.define('tf-journal-entry', TfJournalEntryElement);