Ideenboard
Diskussions-Topic: <select id="topic">
    <option value="new">Neu</option>
    {{topics}}
</select>
<input type="text" name="newtopic" id="newtopic" />
<button type="button" id="generate">Erstellen</button><br/>
<div class="planboard-settings">
    <div>
        Kurzbeschreibung:<br/>
        <textarea cols="50" rows="4" id="shortdescription"></textarea>
    </div>
    <div>
        Farblegende:<br/>
        {{colors}}
    </div>
</div>
<br/>
<div id="textboard" class="planboard-discussion">
</div>
<script>
var text;
var activeLine = -1;
var ownColor= "{{owncolor}}";
$(document).ready(function() {
    text = [
    ];
    $("#topic").change(function() {
        if ($(this).val() !== 'new') {
            $("#newtopic").hide();
            $("#generate").hide();
        } else {
            $("#newtopic").show();
            $("#generate").show();
        }
        $.post('planboard', {
            'action': 'fetchtopic',
            'id': $(this).val()
            },
            null,
            'json'
        ).done(function(response) {
            text = JSON.parse(response.discussion);
            renderText();
            $("#shortdescription").val(response.shortdescription);
        });
    });
    $("#generate").click(function() {
        $.post("planboard", {
            "action": "generate",
            "name": $("#newtopic").val()
            },
            null,
            'json'
         ).done(function(response) {
            if ("error" in response) {
                alert(response.error);
                return;
            }
            $("#topic > option").remove();
            let newItem = $('<option>Neu</option>');
            newItem.attr('id', 'new');
            $("#topic").append(newItem);
            response.topics.forEach(function(item) {
                let newItem = $('<option></option>');
                newItem.attr('id', item.id);
                newItem.text(item.title);
                if (item.id == response.id) {
                    newItem.attr('selected', 'selected');
                }
                $("#topic").append(newItem);
            });
        }).fail(function(message) {
            alert(message);
        });
    });
    $("#textboard").click(function(event) {
        if (typeof $(event.target).attr("id") !== 'undefined' && $(event.target).attr("id") === 'editor') {
            return;
        }
        const eventPosition = {'x': event.pageX, 'y': event.pageY};
        const divPosition = {'x': $(this).offset().left, 'y': $(this).offset().top};
        const clickPosition = relativePosition(divPosition, eventPosition);
        if (clickPosition.x < 16) {
            return;
        }
        let line = Math.floor(clickPosition.y / 20);
        $(this).children("input").remove();
        line = Math.min(text.length - 1, line);
        if (line === -1) {
            text[0] = {'color': ownColor, 'text': ''};
            line = 0;
        }
        if (text[line].color != ownColor) {
            alert('Diese Zeile kannst Du nicht editieren, sondern nur der Ersteller.');
            return;
        }
        createTextInput(line);
    });
    $("#shortdescription").focusout(function() {
        $.post("planboard", {
            "action": "setshortdescription",
            "id": $("#topic").val(),
            "text": $(this).val(),
            },
            null,
            "json"
        );
    });
    renderText();
});
function createTextInput(line) {
    let textInput = $("<input>");
    textInput.css({"position": "absolute", "top": " " + (line * 22) + "px", "left": "16px", "width": "calc(100% - 24px)", "color": "#" + ownColor});
    textInput.attr('id', "editor");
    textInput.val(text[line].text);
    textInput.focusout(setNewText);
    textInput.keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            setNewText();
        }
    });
    $("#textboard").append(textInput);
    $("#editor").focus();
    activeLine = line;
}
function relativePosition(parentPosition, eventPosition) {
    return {'x': Math.round(eventPosition.x - parentPosition.x), 'y': Math.round(eventPosition.y - parentPosition.y)};
}
function numLines(text) {
    return text.split("<br>").length;
}
function renderText() {
    $("#textboard").text('');
    text.forEach(function(item) {
        let line = $("<div>");
        line.html(item.text);
        line.css({"color": "#" + item.color});
        $("#textboard").append(line);
    });
    renderAddLine();
    renderRemoveLine();
}
function setNewText() {
    text[activeLine].text = $("#editor").val();
    sendDiscussion();
    renderText();
}
function renderAddLine() {
    for (line = -1; line < text.length; ++line) {
        var addIcon = $('<div>&gt;</div>');
        addIcon.css({'position':'absolute', 'left':0, 'top': 11 + line * 22, 'cursor':'pointer'});
        addIcon.click(function(event) {
            let newLine = (($(this).position().top - 11) / 22) + 1;
            text.splice(newLine, 0, {'color': ownColor, 'text':''});
            renderText();
            createTextInput(newLine);
            sendDiscussion();
        });
        $("#textboard").append(addIcon);
    }
}
function renderRemoveLine() {
    for (line = 0; line < text.length; ++line) {
        var addIcon = $('<div>-</div>');
        addIcon.css({'position':'absolute', 'left':0, 'top': line * 22, 'cursor':'pointer'});
        addIcon.click(function(event) {
            let line = ($(this).position().top) / 22;
            text.splice(line, 1);
            renderText();
            sendDiscussion();
        });
        $("#textboard").append(addIcon);
    }
}
function sendDiscussion() {
    $.post("planboard", {
            "action": "setdiscussion",
            "id": $("#topic").val(),
            "text": JSON.stringify(text),
        },
        null,
        "json"
    );
}
</script>