initial

templates/planboard.html

@@ -0,0 +1,188 @@
+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>
+