corkboard/static/corkboard.js

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 = $(`<div class="note" id="${id}"></div>`);
        const text = $(`<div class="text">${this.text}</div>`);
        const tools = $("<div class=\"tools\"></div>");

        const edit = $("<a class=\"edit\">edit</a>");
        const del = $("<a class=\"delete\">delete</a>");
        const confirm = $("<a class=\"confirm\">do it</a>");

        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);
        }));
});