path: root/proto.js

/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set et sw=2 ts=2: */

var BrowserDetect = {
  init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
      || this.searchVersion(navigator.appVersion)
      || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
  },
  searchString: function (data) {
    for (var i=0;i<data.length;i++)  {
      var dataString = data[i].string;
      var dataProp = data[i].prop;
      this.versionSearchString = data[i].versionSearch || data[i].identity;
      if (dataString) {
        if (dataString.indexOf(data[i].subString) != -1)
          return data[i].identity;
      }
      else if (dataProp)
        return data[i].identity;
    }
  },
  searchVersion: function (dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index == -1) return;
    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  },
  dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
                 { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/",
                   identity: "OmniWeb" },
                 { string: navigator.vendor, subString: "Apple", identity: "Safari",
                   versionSearch: "Version" },
                 { prop: window.opera, identity: "Opera", versionSearch: "Version" },
                 { string: navigator.vendor, subString: "iCab", identity: "iCab" },
                 { string: navigator.vendor, subString: "KDE", identity: "Konqueror" },
                 { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
                 { string: navigator.vendor, subString: "Camino", identity: "Camino" },
                 // for newer Netscapes (6+)
                 { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" },
                 { string: navigator.userAgent, subString: "MSIE", identity: "Explorer",
                   versionSearch: "MSIE" },
                 { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla",
                   versionSearch: "rv" } ,
                 // for older Netscapes (4-)
                 { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape",
                   versionSearch: "Mozilla" }
  ],
  dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" },
             { string: navigator.platform, subString: "Mac", identity: "Mac" },
             { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" },
             { string: navigator.platform, subString: "Linux", identity: "Linux" }
  ]

};

//document.cursor = crosshair;

BrowserDetect.init();

function get_appropriate_ws_url()
{
    var pcol;
    var u = document.URL;

    /*
     * We open the websocket encrypted if this page came on an
     * https:// url itself, otherwise unencrypted
     */

    if (u.substring(0, 5) == "https") {
        pcol = "wss://";
        u = u.substr(8);
    } else {
        pcol = "ws://";
        if (u.substring(0, 4) == "http")
            u = u.substr(7);
    }

    u = u.split('/');

    return pcol + u[0];
}


//document.getElementById("create_task").style.display = '';

/* lws-task protocol */

var down = 0;
var no_last = 1;
var last_x = 0, last_y = 0;
var ctx;
var socket_task;
//var socket_observe;
var color = "#000000";
var dragged = "";

var board = document.getElementById("board");
board.setAttribute("ondrop", "dropInBody(event)");
board.setAttribute("ondragover", "return false");
board.setAttribute("ondragenter", "return dragenter(this)");
board.setAttribute("ondragleave", "return dragleave(this)");


if (BrowserDetect.browser == "Firefox") {
    socket_task = new MozWebSocket(get_appropriate_ws_url(), "lws-task-protocol");
    //  socket_observe = new MozWebSocket(get_appropriate_ws_url(), "lws-observe-protocol");
} else {
    socket_task = new WebSocket(get_appropriate_ws_url(),  "lws-task-protocol");
    //  socket_observe = new WebSocket(get_appropriate_ws_url(),  "lws-observe-protocol");
}

try {
    socket_task.onopen = function() {
        document.getElementById("wstask_status").style.backgroundColor = "#40ff40";
        document.getElementById("wstask_status").textContent = "TaskProto websocket connection opened ";
        //    document.getElementById("box").style.display = "none";
    } 

    socket_task.onmessage = function got_packet(msg) {
        document.getElementById("wstask_lastmsg").textContent = msg.data;
        
        var msgs = new Array();
        var idx = 0;
        msgs[idx] = '';
        var c = 0;
        var instring = false;
        for(c = 0; c < msg.data.length; c++) {
            if(msg.data[c] == '"' && c > 0 && msg.data[c - 1] != '\\') instring = !instring;
            if(msg.data[c] == ';' && instring == false) {
                idx++;
                msgs[idx] = '';
            }
            if(msg.data[c] != ';' || instring == true) msgs[idx] += msg.data[c];
        }

        f = 0;
        while (f < msgs.length - 1) {
            var msg = new Array();
            instring = false;
            idx = 0;

            // strip padding and trailing whitespace.
            var msgstr = msgs[f].replace(/^\s+||\s+$/g,'');

            msg[idx] = '';
            for(c = 0; c < msgstr.length; c++) {
                if(msgstr[c] == '"' && c > 0 && msgstr[c - 1] != '\\') {
                    instring = !instring;
                    continue;
                }
                if(msgstr[c] == ' ' && instring == false) {
                    msg[idx] = msg[idx].replace("\\\\","\\").replace("\\\"","\"");
                    idx++;
                    msg[idx] = '';
                }
                if(msgstr[c] != ' ' || instring == true) msg[idx] += msgstr[c];
            }

            var observeid = msg[0];
            var cmd = msg[1];

            if(cmd == "del") {
                var id = msg[2];
                var task = document.getElementById("task_" + id);
                //todo: remove from parent not board
                board.removeChild(task);
            }
            else if(cmd == "move") {
                var id = msg[2];
	              var parent_id = msg[3];
                var task = document.getElementById("task_" + id);
                if(parent_id != -1) {
                    var parent_task = document.getElementById("task_" + parent_id);
	                  parent_task.appendChild(task);
                }
                else {
                    board.appendChild(task);
                }
                //	task.parentNode.removeChild(task);
                //	board.removeChild(task);
                //	parent_task.appendChild(task);
                //        task.style.left = left + "px";
                //        task.style.top = top + "px";
            }
            else if(cmd == "create") {
                var id = msg[2];
	              var parent_id = msg[3];
                //          var title = msg[3];
                //          var description = msg[4];

                var task = document.createElement("div");
                task.name = "task";
                task.setAttribute("class", "task");
                task.setAttribute("ondrop", "drop(this, event)");
                task.setAttribute("ondragenter", "return dragenter(this)");
                task.setAttribute("ondragleave", "return dragleave(this)");
                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);
                var taskText = document.createTextNode('[' + task.id + ']');
                taskText.id = "txt";
	              task.appendChild(taskText);
	              
                //        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";
                //        dlButton.onclick = "deleteTask(document.getElementById(" + task.id + ").id";
                //        dlButton.setAttribute("onclick", "deleteTask(" + id +")");
                //        task.appendChild(dlButton);

                //        board.appendChild(task);
      	        
                var parent_task = document.getElementById("task_" + parent_id);

	              if(parent_task) {
                    parent_task.appendChild(task);
	              }
	              else {
                    board.appendChild(task);
	              }
            }
            else if(cmd == "update") {

                var id = msg[2];
                var title = msg[3];
                var description = 'N/A';//msg[3];

                var task = document.getElementById("task_" + id);

	              var taskText = document.createTextNode(title + ": " + description + " :" + task.id);
	              task.appendChild(taskText);
            }
            f++;
            //      document.getElementById("box").style.top = i[3] + "px";
            //      document.getElementById("box").style.left = i[2] + "px";
            //      document.getElementById("box").style.display = "block";
        }
    }

    socket_task.onclose = function(){
        document.getElementById("wstask_status").style.backgroundColor = "#ff4040";
        document.getElementById("wstask_status").textContent = "TaskProto websocket connection CLOSED ";
    }
} catch(exception) {
    alert('<p>Error' + exception + '</p>');
}

/*
  try {
  socket_observe.onopen = function() {
  document.getElementById("wsobserve_status").style.backgroundColor = "#40ff40";
  document.getElementById("wsobserve_status").textContent = "ObserveProto websocket connection opened ";
  //    document.getElementById("box").style.display = "none";
  } 

  socket_observe.onmessage = function got_packet(msg) {
  document.getElementById("wsobserve_lastmsg").textContent = msg.data;

  var msgs = new Array();
  var idx = 0;
  msgs[idx] = '';
  var c = 0;
  var instring = false;
  for(c = 0; c < msg.data.length; c++) {
  if(msg.data[c] == '"' && c > 0 && msg.data[c - 1] != '\\') instring = !instring;
  if(msg.data[c] == ';' && instring == false) {
  idx++;
  msgs[idx] = '';
  }
  if(msg.data[c] != ';' || instring == true) msgs[idx] += msg.data[c];
  }

  f = 0;
  while (f < msgs.length - 1) {
  var msg = new Array();
  instring = false;
  idx = 0;
  msg[idx] = '';
  for(c = 0; c < msgs[f].length; c++) {
  if(msgs[f][c] == '"' && c > 0 && msgs[f][c - 1] != '\\') {
  instring = !instring;
  continue;
  }
  if(msgs[f][c] == ' ' && instring == false) {
  msg[idx] = msg[idx].replace("\\\\","\\").replace("\\\"","\"");
  idx++;
  msg[idx] = '';
  }
  if(msgs[f][c] != ' ' || instring == true) msg[idx] += msgs[f][c];
  }

  var cmd = msg[0];

  if(cmd == "del") {
  var id = msg[1];
  var task = document.getElementById("task_" + id);
  //todo: remove from parent not board
  board.removeChild(task);
  }
  else if(cmd == "move") {
  var id = msg[1];
	var parent_id = msg[2];
  //        var left = msg[2];
  //        var top = msg[3];
  var task = document.getElementById("task_" + id);
  if(parent_id != -1) {
  var parent_observe = document.getElementById("task_" + parent_id);
	parent_observe.appendChild(task);
  }
  else {
  board.appendChild(task);
  }
  //	task.parentNode.removeChild(task);
  //	board.removeChild(task);
  //	parent_observe.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 parent_id = msg[4];

  var task = document.createElement("div");
  task.name = "task";
  task.setAttribute("class", "task");
  task.setAttribute("ondrop", "drop(this, event)");
  task.setAttribute("ondragenter", "return dragenter(this)");
  task.setAttribute("ondragleave", "return dragleave(this)");
  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);
  taskText.id = "txt";
	task.appendChild(taskText);
	
  //        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";
  //        dlButton.onclick = "deleteTask(document.getElementById(" + task.id + ").id";
  //        dlButton.setAttribute("onclick", "deleteTask(" + id +")");
  //        task.appendChild(dlButton);

  //        board.appendChild(task);
  
  var parent_observe = document.getElementById("task_" + parent_id);

	if(parent_observe) {
  parent_observe.appendChild(task);
	}
	else {
  board.appendChild(task);
	}
  }
  else if(cmd == "update") {
  var id = msg[1];
  var title = msg[2];
  var description = msg[3];
  
  var task = document.getElementById("task_" + id);

	var taskText = document.createTextNode(title + ": " + description + " :" + task.id);
	task.appendChild(taskText);
  }
  f++;
  //      document.getElementById("box").style.top = i[3] + "px";
  //      document.getElementById("box").style.left = i[2] + "px";
  //      document.getElementById("box").style.display = "block";
  }
  }

  socket_observe.onclose = function(){
  document.getElementById("wsobserve_status").style.backgroundColor = "#ff4040";
  document.getElementById("wsobserve_status").textContent = "ObserveProto websocket connection CLOSED ";
  }
  } catch(exception) {
  alert('<p>Error' + exception + '</p>');
  }
*/

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

function update_color() {
    color = document.getElementById("color").value;
}

//function ev_mouseup(ev) {
//  dragged = '';
//}

//function ev_mousemove (ev)
//{
// if(dragged == '') return;
//
//  var x, y;
//  x = ev.clientX;
//  y = ev.clientY;

//  socket_observe.send("move " + dragged + " " + x + " " + y);
//}

function task_submit() {
    var data = document.getElementById("input_task_data").value;
    socket_task.send(data);
}
/*
  function observe_submit() {
  var data = document.getElementById("input_observe_data").value;
  socket_observe.send(data);
  }
*/
function clear() {
    document.getElementById("input_data").value = "";
}

function deleteTask(id) {
    socket_task.send("del " + id + ";");
}

function drag(target, e) {
    e.target.style.opacity = '0.4';
    e.dataTransfer.setData('Text', target.id);
    e.stopPropagation(); // <--- this fixes the drag target problem
}

function drop(target, e) {
    this.style.opacity = '1.0';
    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_task.send("move " + id.substring(5, id.length) + " " + target.id.substring(5, target.id.length) + ";");
    
    //  target.appendChild(task);
}

function dragenter(obj) {
    obj.style.backgroundColor = 'red';
    return false;
}

function dragleave(obj) {
    obj.style.backgroundColor = 'grey';
    return false;
}

function dropInBody(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_task.send("move " + id.substring(5, id.length) + " -1;");
    
    //  target.appendChild(task);
}