const editMode = window.location.hash == "#edit";
console.log(editMode);
class Note {
constructor(id, text, x, y, width, height, deleted) {
this.id = id;
this.text = text;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.deleted = deleted;
// some UI state, too
this.editable = false;
this.deleteConfirm = false;
}
draw() {
if (this.deleted) {
return;
}
const id = `n_${this.id}`;
const note = $(`
`);
const text = $(`${this.text}
`);
const tools = $("");
const edit = $("edit");
const del = $("delete");
const confirm = $("do it");
edit.on("click", event => {
if (this.editable) {
this.text = text.text();
this.save();
text.attr("contentEditable", false);
edit.text("edit");
} else {
text.attr("contentEditable", true);
edit.text("save");
}
this.editable = !this.editable;
});
tools.append(edit);
del.on("click", event => {
if (this.deleteConfirm) {
del.text("delete");
confirm.css({'display': 'none'});
} else {
del.text("nevermind");
confirm.css({'display': 'inline'});
}
this.deleteConfirm = !this.deleteConfirm;
});
tools.append(del);
confirm.css({'display': 'none'});
confirm.on("click", event => {
this.deleted = true;
note.css({'display': 'none'});
this.save();
});
tools.append(confirm);
if (!editMode) {
tools.css({'display': 'none'});
}
note.append(text);
note.append(tools);
$("#board").append(note);
note.css({
'position': 'absolute',
'left': this.x,
'top': this.y,
'width': this.width,
'height': this.height,
});
if (editMode) {
note.draggable();
note.on("dragstop", (event, ui) => {
this.y = ui.offset.top;
this.x = ui.offset.left;
this.save();
});
note.resizable();
note.on("resizestop", (event, ui) => {
this.width = ui.size.width;
this.height = ui.size.height;
this.save();
});
}
}
save() {
fetch("/note", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: this.json,
}).then(response => console.log(`Saved note ${this.id}: ${this.json}`));
}
static allNotes = [];
get json() {
return JSON.stringify({
"id": this.id,
"text": this.text,
"x": this.x,
"y": this.y,
"width": this.width,
"height": this.height,
"deleted": this.deleted,
});
}
static make(id, text, x, y, width, height, deleted) {
const n = new Note(id, text, x, y, width, height, deleted);
n.draw();
this.allNotes.push(n);
return n;
}
static new() {
const new_id = this.allNotes.length;
const n = this.make(new_id, "new note!", 100.0, 100.0, 220.0, 220.0, false);
n.save();
}
}
$(document).ready(() => {
const add = $("#add");
add.on("click", event => {
Note.new();
});
if (!editMode) {
add.css({'display': 'none'});
}
fetch('/note')
.then(response => response.json())
.then(data => data.forEach(d => {
Note.make(d["id"], d["text"], d["x"], d["y"], d["width"] || 220.0, d["height"] || 220.0, d["deleted"] == true);
}));
});