84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
|
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);
|