forked from cory/tildefriends
Run prettier.
This commit is contained in:
@ -27,7 +27,8 @@ async function todo_add(list) {
|
||||
let set = new Set(names);
|
||||
set.add(list);
|
||||
names = JSON.stringify([...set].sort());
|
||||
exchanged = original === names || await g_db.exchange('files', original, names);
|
||||
exchanged =
|
||||
original === names || (await g_db.exchange('files', original, names));
|
||||
}
|
||||
return exchanged;
|
||||
}
|
||||
@ -42,7 +43,8 @@ async function todo_remove(list) {
|
||||
let set = new Set(names);
|
||||
set.delete(list);
|
||||
names = JSON.stringify([...set].sort());
|
||||
exchanged = original === names || await g_db.exchange('files', original, names);
|
||||
exchanged =
|
||||
original === names || (await g_db.exchange('files', original, names));
|
||||
}
|
||||
await g_db.remove('list:' + list);
|
||||
return exchanged;
|
||||
@ -79,4 +81,4 @@ async function main() {
|
||||
await app.setDocument(utf8Decode(getFile('index.html')));
|
||||
}
|
||||
|
||||
main();
|
||||
main();
|
||||
|
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>TODO</title>
|
||||
@ -8,4 +8,4 @@
|
||||
<tf-todos></tf-todos>
|
||||
</body>
|
||||
<script src="script.js" type="module"></script>
|
||||
</html>
|
||||
</html>
|
||||
|
@ -4,7 +4,7 @@ import * as tfrpc from '/static/tfrpc.js';
|
||||
class TodosElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
lists: {type: Array}
|
||||
lists: {type: Array},
|
||||
};
|
||||
}
|
||||
|
||||
@ -12,11 +12,14 @@ class TodosElement extends LitElement {
|
||||
super();
|
||||
this.lists = [];
|
||||
let self = this;
|
||||
tfrpc.rpc.todo_get_all().then(function(lists) {
|
||||
self.lists = lists;
|
||||
}).catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
tfrpc.rpc
|
||||
.todo_get_all()
|
||||
.then(function (lists) {
|
||||
self.lists = lists;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
async new_list() {
|
||||
@ -32,9 +35,15 @@ class TodosElement extends LitElement {
|
||||
return html`
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
${this.lists.map(x => html`
|
||||
<tf-todo-list name=${x.name} .items=${x.items} @change=${this.refresh}></tf-todo-list>
|
||||
`)}
|
||||
${this.lists.map(
|
||||
(x) => html`
|
||||
<tf-todo-list
|
||||
name=${x.name}
|
||||
.items=${x.items}
|
||||
@change=${this.refresh}
|
||||
></tf-todo-list>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<input type="button" @click=${this.new_list} value="+ List"></input>
|
||||
</div>`;
|
||||
@ -59,16 +68,22 @@ class TodoListElement extends LitElement {
|
||||
save() {
|
||||
let self = this;
|
||||
console.log('saving', self.name, self.items);
|
||||
tfrpc.rpc.todo_set(self.name, self.items).then(function() {
|
||||
console.log('saved', self.name, self.items);
|
||||
}).catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
tfrpc.rpc
|
||||
.todo_set(self.name, self.items)
|
||||
.then(function () {
|
||||
console.log('saved', self.name, self.items);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
remove_item(item) {
|
||||
let index = this.items.indexOf(item);
|
||||
this.items = [].concat(this.items.slice(0, index), this.items.slice(index + 1));
|
||||
this.items = [].concat(
|
||||
this.items.slice(0, index),
|
||||
this.items.slice(index + 1)
|
||||
);
|
||||
this.save();
|
||||
}
|
||||
|
||||
@ -106,20 +121,20 @@ class TodoListElement extends LitElement {
|
||||
let self = this;
|
||||
if (index === this.editing) {
|
||||
return html`
|
||||
<div><input type="checkbox" ?checked=${item.x} @change=${x => self.handle_check(x, item)}></input>
|
||||
<div><input type="checkbox" ?checked=${item.x} @change=${(x) => self.handle_check(x, item)}></input>
|
||||
<input
|
||||
id="edit"
|
||||
type="text"
|
||||
value=${item.text}
|
||||
@change=${event => self.input_change(event, item)}
|
||||
@keydown=${event => self.input_keydown(event, item)}
|
||||
@blur=${x => self.input_blur(item)}></input>
|
||||
<span @click=${x => self.remove_item(item)} style="cursor: pointer">❎</span></div>
|
||||
@change=${(event) => self.input_change(event, item)}
|
||||
@keydown=${(event) => self.input_keydown(event, item)}
|
||||
@blur=${(x) => self.input_blur(item)}></input>
|
||||
<span @click=${(x) => self.remove_item(item)} style="cursor: pointer">❎</span></div>
|
||||
`;
|
||||
} else {
|
||||
return html`
|
||||
<div><input type="checkbox" ?checked=${item.x} @change=${x => self.handle_check(x, item)}></input>
|
||||
<span @click=${x => self.editing = index}>${item.text || '(empty)'}</span>
|
||||
<div><input type="checkbox" ?checked=${item.x} @change=${(x) => self.handle_check(x, item)}></input>
|
||||
<span @click=${(x) => (self.editing = index)}>${item.text || '(empty)'}</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -139,14 +154,17 @@ class TodoListElement extends LitElement {
|
||||
|
||||
rename(new_name) {
|
||||
let self = this;
|
||||
return tfrpc.rpc.todo_rename(this.name, new_name).then(function() {
|
||||
self.dispatchEvent(new Event('change'));
|
||||
self.editing_name = false;
|
||||
}).catch(function(error) {
|
||||
console.log(error);
|
||||
alert(error.message);
|
||||
self.editing_name = false;
|
||||
});
|
||||
return tfrpc.rpc
|
||||
.todo_rename(this.name, new_name)
|
||||
.then(function () {
|
||||
self.dispatchEvent(new Event('change'));
|
||||
self.editing_name = false;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
alert(error.message);
|
||||
self.editing_name = false;
|
||||
});
|
||||
}
|
||||
|
||||
name_blur(new_name) {
|
||||
@ -163,19 +181,25 @@ class TodoListElement extends LitElement {
|
||||
|
||||
render() {
|
||||
let self = this;
|
||||
let name = this.editing_name ?
|
||||
html`<input
|
||||
let name = this.editing_name
|
||||
? html`<input
|
||||
type="text"
|
||||
id="edit"
|
||||
@keydown=${event => self.name_keydown(event)}
|
||||
@blur=${event => self.name_blur(event.srcElement.value)}
|
||||
value=${this.name}></input>` :
|
||||
html`<h2 @click=${x => this.editing_name = true}>${this.name}</h2>`;
|
||||
@keydown=${(event) => self.name_keydown(event)}
|
||||
@blur=${(event) => self.name_blur(event.srcElement.value)}
|
||||
value=${this.name}></input>`
|
||||
: html`<h2 @click=${(x) => (this.editing_name = true)}>${this.name}</h2>`;
|
||||
return html`
|
||||
<div style="border: 3px solid black; padding: 8px; margin: 8px; border-radius: 8px; background-color: #444">
|
||||
<div
|
||||
style="border: 3px solid black; padding: 8px; margin: 8px; border-radius: 8px; background-color: #444"
|
||||
>
|
||||
${name}
|
||||
${(this.items || []).filter(item => !item.x).map(x => self.render_item(x))}
|
||||
${(this.items || []).filter(item => item.x).map(x => self.render_item(x))}
|
||||
${(this.items || [])
|
||||
.filter((item) => !item.x)
|
||||
.map((x) => self.render_item(x))}
|
||||
${(this.items || [])
|
||||
.filter((item) => item.x)
|
||||
.map((x) => self.render_item(x))}
|
||||
<button @click=${self.add_item}>+ Item</button>
|
||||
<button @click=${self.remove_list}>- List</button>
|
||||
</div>
|
||||
@ -184,4 +208,4 @@ class TodoListElement extends LitElement {
|
||||
}
|
||||
|
||||
customElements.define('tf-todo-list', TodoListElement);
|
||||
customElements.define('tf-todos', TodosElement);
|
||||
customElements.define('tf-todos', TodosElement);
|
||||
|
Reference in New Issue
Block a user