Added new task hierarchy based protocol.

Drag and drop works somehow - maybe some weirdness in html5 drag and drop.

1 files changed, 84 insertions, 43 deletions

diff --git a/proto.js b/proto.js
index c57e133..5d855b0 100644
--- a/proto.js
+++ b/proto.js
@@ -150,44 +150,67 @@ try {
       if(cmd == "del") {
         var id = msg[1];
         var task = document.getElementById("task_" + id);
-        document.body.removeChild(task);
+        //todo: remove from parent not body
+	document.body.removeChild(task);
       }
       else if(cmd == "move") {
         var id = msg[1];
-        var left = msg[2];
-        var top = msg[3];
+	var parent_id = msg[2];
+//        var left = msg[2];
+//        var top = msg[3];
         var task = document.getElementById("task_" + id);
-        task.style.left = left + "px";
-        task.style.top = top + "px";
+	var parent_task = document.getElementById("task_" + parent_id);
+//	task.parentNode.removeChild(task);
+	parent_task.appendChild(task);
+//	document.body.removeChild(task);
+//	parent_task.appendChild(task);
+//        task.style.left = left + "px";
+//        task.style.top = top + "px";
       }
       else if(cmd == "add") {
         var id = msg[1];
         var title = msg[2];
         var description = msg[3];
-        var left = msg[4];
-        var top = msg[5];
+	var parent_id = msg[4];
+//        var left = msg[4];
+//        var top = msg[5];
 
         var task = document.createElement("div");
         task.name = "task";
         task.setAttribute("class", "task");
-        task.id = "task_" + id;
+        task.setAttribute("ondrop", "drop(this, event)");
+        task.setAttribute("ondragenter", "return false");
+        task.setAttribute("ondragover", "return false");
+	task.setAttribute("draggable", true);
+        task.setAttribute("ondragstart", "drag(this, event)");
+
+	task.id = "task_" + id;
 
         var taskText = document.createTextNode(title + ": " + description + " :" + task.id);
         task.appendChild(taskText);
 
-        task.style.position = "absolute";
-        task.style.left = left + "px";
-        task.style.top = top + "px"; 
-        task.setAttribute("onMouseDown", "dragged = '" + id + "';");
+//        task.style.position = "absolute";
+//        task.style.left = left + "px";
+//        task.style.top = top + "px"; 
+//        task.setAttribute("onMouseDown", "dragged = '" + id + "';");
 
-        var dlButton = document.createElement("input");
-        dlButton.type = "button";
-        dlButton.value = "Remove";
+//        var dlButton = document.createElement("input");
+//        dlButton.type = "button";
+//        dlButton.value = "Remove";
 //        dlButton.onclick = "deleteTask(document.getElementById(" + task.id + ").id";
-        dlButton.setAttribute("onclick", "deleteTask(" + id +")");
-        task.appendChild(dlButton);
+//        dlButton.setAttribute("onclick", "deleteTask(" + id +")");
+//        task.appendChild(dlButton);
 
         document.body.appendChild(task);
+      	
+        var parent_task = document.getElementById("task_" + parent_id);
+
+	if(parent_task) {
+          parent_task.appendChild(task);
+	}
+	else {
+          document.body.appendChild(task);
+	}
       }
       f++;
 //      document.getElementById("box").style.top = i[3] + "px";
@@ -204,45 +227,45 @@ try {
   alert('<p>Error' + exception + '</p>');
 }
 
-var canvas = document.createElement('canvas');
-canvas.height = 600;
-canvas.width = 800;
-ctx = canvas.getContext("2d");
+//var canvas = document.createElement('canvas');
+//canvas.height = 600;
+//canvas.width = 800;
+//ctx = canvas.getContext("2d");
 
-document.addEventListener('mousemove', ev_mousemove, false);
-document.addEventListener('mouseup', ev_mouseup, false);
+//document.addEventListener('mousemove', ev_mousemove, false);
+//document.addEventListener('mouseup', ev_mouseup, false);
 /*
 canvas.addEventListener('mousedown', ev_mousedown, false);
 //cancas.addEventListener('dragend', ev_mousemove, false);
 */
 
-offsetX = offsetY = 0;
-element = canvas;
-if (element.offsetParent) {
-  do {
-    offsetX += element.offsetLeft;
-    offsetY += element.offsetTop;
-  } while ((element = element.offsetParent));
-}
+//offsetX = offsetY = 0;
+//element = canvas;
+//if (element.offsetParent) {
+//  do {
+//    offsetX += element.offsetLeft;
+//    offsetY += element.offsetTop;
+//  } while ((element = element.offsetParent));
+//}
  
 function update_color() {
   color = document.getElementById("color").value;
 }
 
-function ev_mouseup(ev) {
-  dragged = '';
-}
-
-function ev_mousemove (ev)
-{
-  if(dragged == '') return;
+//function ev_mouseup(ev) {
+//  dragged = '';
+//}
 
-  var x, y;
-  x = ev.clientX;
-  y = ev.clientY;
+//function ev_mousemove (ev)
+//{
+ // if(dragged == '') return;
+//
+//  var x, y;
+//  x = ev.clientX;
+//  y = ev.clientY;
 
-  socket_lm.send("move " + dragged + " " + x + " " + y);
-}
+//  socket_lm.send("move " + dragged + " " + x + " " + y);
+//}
 
 function submit() {
   var data = document.getElementById("input_data").value;
@@ -256,3 +279,21 @@ function clear() {
 function deleteTask(id) {
   socket_lm.send("del " + id + ";");
 }
+
+function drag(target, e) {
+  e.dataTransfer.setData('Text', target.id);
+}
+
+function drop(target, e) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  var id = e.dataTransfer.getData('Text');
+  var task = document.getElementById(id);
+//  task.parentNode.removeChild(task);
+//  alert("move " + id.substring(5, id.length) + " " + target.id.substring(5,target.id.length) + ";");
+  socket_lm.send("move " + id.substring(5, id.length) + " " + target.id.substring(5, target.id.length) + ";");
+      
+//  target.appendChild(task);
+}
+