ItEr07S07ArquitecturaClientesItEr06S03: Visual support for task completion

* Modified task component to include a completion resizable box
   * Linked /planner/main.zul from web.xml configuration file
   * Bugfix involving dependences overlapping box related with upper tasks
   * Linked resources.zul page from layout menu.

navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java

@@ -56,7 +56,7 @@ public class ListDetails extends HtmlMacroComponent {
         taskDetail.afterCompose();
         Task task = new Task();
         getPlanner().addTask(task);
-        task.setColor("yellow");
+        task.setColor("#007bbe");
         task.setId(newId);
     }
 

navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp

@@ -7,5 +7,6 @@
 <div id="row${self.uuid}" class="row" z.valor="boxid="${self.uuid}">
     <div id="${self.uuid}" z.type="ganttz.task.Task" idTask="${self.id}" z.autoz="true"${self.outerAttrs}">
         <span id="${self.uuid}!real">${self.taskName}</span>
+        <div id="completion${self.uuid}" class="completion"></div>
     </div>
 </div>

navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js

@@ -17,6 +17,12 @@ zkDependency.draw = function(dependency) {
         this.origin(dependency).offsetWidth - zkTask.CORNER_WIDTH);
     orig[1] = orig[1] + zkTask.HEIGHT;
     dest[1] = dest[1] + zkTask.HALF_HEIGHT;
+
+    if ( ( orig[1] > dest[1] ) ) {
+
+        orig[1] = orig[1] - zkTask.HEIGHT;
+    }
+
 	zkPlanner.drawArrow(dependency, orig, dest);
 
 }

navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js

@@ -42,8 +42,39 @@ zkTask.init = function(cmp) {
         handles : [ 'r' ],
         proxy : true
     });
+
+    // Configure the task element to be resizable
+    cmp2 = document.getElementById('completion'+cmp.id);
+
+    var resize2 = new YAHOO.util.Resize(cmp2, {
+        handles : [ 'r' ],
+        proxy : true,
+        maxWidth: cmp.clientWidth - 2
+    });
+
+
+    resize2.on('resize', function(ev) {
+
+        zkau.send( {
+            uuid : cmp2.id,
+            cmd : "updateProgress",
+            data : [ cmp2.style.width ],
+        });
+    }, zkTask, true);
+
+
     resize.on('resize', function(ev) {
 
+        cmp2 = document.getElementById('completion'+cmp.id);
+        resize2 = new YAHOO.util.Resize(cmp2, {
+            handles : [ 'r' ],
+            proxy : true,
+            maxWidth: cmp.clientWidth - 2
+        });
+        if ( (cmp.clientWidth) < (cmp2.clientWidth) ) {
+            cmp2.style.width = cmp.clientWidth - 2  + 'px';
+        }
+
         zkau.send( {
             uuid : cmp.id,
             cmd : "updateSize",
@@ -52,6 +83,7 @@ zkTask.init = function(cmp) {
 
     }, zkTask, true);
 
+
     // Listen to mousemove events
     YAHOO.util.Event.on(document.body, 'mousemove', function(e) {
         var arrPos = YAHOO.util.Event.getXY(e);
@@ -67,12 +99,12 @@ zkTask.setAttr = function(cmp, nm, val) {
 
     switch (nm) {
 
-    case "style.top":
+        case "style.top":
-    case "style.width":
+        case "style.width":
-    case "style.left": {
+        case "style.left": {
-        zkau.setAttr(cmp, nm, val);
+            zkau.setAttr(cmp, nm, val);
-        return true;
+            return true;
-    }
+        }
 
     }
 };
@@ -103,9 +135,9 @@ zkTask.createArrow = function(cmp) {
     function updateArrow() {
         var origin = zkPlanner.findPos(cmp);
         origin[0] = origin[0]
-                + Math.max(0, cmpNode.offsetWidth - zkTask.CORNER_WIDTH);
+        + Math.max(0, cmpNode.offsetWidth - zkTask.CORNER_WIDTH);
         origin[1] = origin[1] - listtasksNode.offsetTop
-                + listdependenciesNode.offsetTop + zkTask.HEIGHT;
+        + listdependenciesNode.offsetTop + zkTask.HEIGHT;
         var destination = zkPlanner.findPosForMouseCoordinates(xMouse, yMouse);
         zkPlanner.drawArrow(arrow, origin, destination);
     }
@@ -128,9 +160,9 @@ zkTask.createArrow = function(cmp) {
         }
         parentNode.removeChild(arrow);
         YAHOO.util.Event.removeListener(document.body, 'click',
-                mouseClickListener);
+            mouseClickListener);
         YAHOO.util.Event.removeListener(document.body, 'mousemove',
-                mousemoveListener);
+            mousemoveListener);
     };
     YAHOO.util.Event.on(document.body, 'mousemove', mousemoveListener);
     YAHOO.util.Event.on(document.body, 'click', mouseClickListener);
@@ -142,11 +174,11 @@ zkTask.isOverTask = function(cmp, arrow) {
     var ganttPanelNode = document.getElementById("ganttpanel");
 
     arrayTasks = zkTask.getElementsByAttribute(listtasksNode, "div", "z.type",
-            "ganttz.task.Task");
+        "ganttz.task.Task");
 
     /* Cursor relative positions to #listtasks (439,160) and ganttPanel scroll */
     var xpos = zkTask.xMouse - listtasksNode.offsetLeft
-            + ganttPanelNode.scrollLeft;
+    + ganttPanelNode.scrollLeft;
     var ypos = zkTask.yMouse - listtasksNode.offsetTop;
     /*
      * This way of getting cursor coordinates, is unable to calculate scrollbar
@@ -158,14 +190,14 @@ zkTask.isOverTask = function(cmp, arrow) {
         var task = arrayTasks[i];
 
         YAHOO.log(" zkTask.xMouse (" + zkTask.xMouse + "," + zkTask.yMouse
-                + ") " + "task.pos (" + xpos + "," + ypos + ") "
+            + ") " + "task.pos (" + xpos + "," + ypos + ") "
-                + "task.offsetLeft (" + task.offsetLeft + "," + task.offsetTop
+            + "task.offsetLeft (" + task.offsetLeft + "," + task.offsetTop
-                + ") " + "task.idTask-" + task.toString());
+            + ") " + "task.idTask-" + task.toString());
 
         if (((xpos) > (task.offsetLeft))
-                && ((xpos) < (task.offsetLeft + task.offsetWidth))
+            && ((xpos) < (task.offsetLeft + task.offsetWidth))
-                && (ypos > (task.offsetTop))
+            && (ypos > (task.offsetTop))
-                && (ypos < (task.offsetTop + task.offsetHeight))) {
+            && (ypos < (task.offsetTop + task.offsetHeight))) {
             return task;
         }
     }
@@ -173,24 +205,24 @@ zkTask.isOverTask = function(cmp, arrow) {
 };
 
 zkTask.getElementsByAttribute = function(oElm, strTagName, strAttributeName,
-        strAttributeValue) {
+    strAttributeValue) {
 
     var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm
-            .getElementsByTagName(strTagName);
+    .getElementsByTagName(strTagName);
     var arrReturnElements = new Array();
     var oAttributeValue = (typeof strAttributeValue != "undefined") ? new RegExp(
-            "(^|\\s)" + strAttributeValue + "(\\s|$)")
+        "(^|\\s)" + strAttributeValue + "(\\s|$)")
-            : null;
+    : null;
     var oCurrent;
     var oAttribute;
 
     for ( var i = 0; i < arrElements.length; i++) {
         oCurrent = arrElements[i];
         oAttribute = oCurrent.getAttribute
-                && oCurrent.getAttribute(strAttributeName);
+        && oCurrent.getAttribute(strAttributeName);
         if (typeof oAttribute == "string" && oAttribute.length > 0) {
             if (typeof strAttributeValue == "undefined"
-                    || (oAttributeValue && oAttributeValue.test(oAttribute))) {
+                || (oAttributeValue && oAttributeValue.test(oAttribute))) {
                 arrReturnElements.push(oCurrent);
             }
         }
@@ -209,42 +241,42 @@ YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
     cont : null,
     init : function() {
         //Call the parent's init method
-    YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
+        YAHOO.example.DDRegion.superclass.init.apply(this, arguments);
-    this.initConstraints();
-
-    myEvent.on(window, 'resize', function() {
         this.initConstraints();
-    }, this, true);
-},
-initConstraints : function() {
 
-    //Get the top, right, bottom and left positions
+        myEvent.on(window, 'resize', function() {
-    var region = myDom.getRegion(this.cont);
+            this.initConstraints();
+        }, this, true);
+    },
+    initConstraints : function() {
 
-    // Get the element we are working on
+        //Get the top, right, bottom and left positions
-    var el = this.getEl();
+        var region = myDom.getRegion(this.cont);
 
-    // Get the xy position of it
+        // Get the element we are working on
-    var xy = myDom.getXY(el);
+        var el = this.getEl();
 
-    // Get the width and height
+        // Get the xy position of it
-    var width = parseInt(myDom.getStyle(el, 'width'), 10);
+        var xy = myDom.getXY(el);
-    var height = parseInt(myDom.getStyle(el, 'height'), 10);
 
-    // Set left to x minus left
+        // Get the width and height
-    var left = xy[0] - region.left;
+        var width = parseInt(myDom.getStyle(el, 'width'), 10);
+        var height = parseInt(myDom.getStyle(el, 'height'), 10);
 
-    // Set right to right minus x minus width
+        // Set left to x minus left
-    var right = region.right - xy[0] - width;
+        var left = xy[0] - region.left;
 
-    // Set top to y minus top
+        // Set right to right minus x minus width
-    var top = xy[1] - region.top;
+        var right = region.right - xy[0] - width;
 
-    // Set bottom to bottom minus y minus height
+        // Set top to y minus top
-    var bottom = region.bottom - xy[1] - height;
+        var top = xy[1] - region.top;
 
-    // Set the constraints based on the above calculations
+        // Set bottom to bottom minus y minus height
-    this.setXConstraint(left, right);
+        var bottom = region.bottom - xy[1] - height;
-    this.setYConstraint(top, bottom);
+
-}
+        // Set the constraints based on the above calculations
+        this.setXConstraint(left, right);
+        this.setYConstraint(top, bottom);
+    }
 });

navalplanner-webapp/src/main/webapp/WEB-INF/web.xml

@@ -85,7 +85,7 @@
 
     <welcome-file-list>
 
-        <welcome-file>myhello.zul</welcome-file>
+        <welcome-file>/planner/main.zul</welcome-file>
 
     </welcome-file-list>
 </web-app>

navalplanner-webapp/src/main/webapp/common/layout/template.zul

@@ -24,7 +24,7 @@
             <menu label="${c:l('mainmenu.resources')}">
                 <menupopup>
                     <menuitem label="${c:l('mainmenu.add_resources')}"
-                        onClick="alert(self.label)" />
+                        href='/common/resources.zul' />
                     <menuitem label="${c:l('mainmenu.manage_resources')}"
                         onClick="alert(self.label)" />
                     <menuitem label="${c:l('mainmenu.check_plannification')}"
@@ -52,7 +52,7 @@
     				<menu label="${c:l('mainmenu.about')}">
     					<menupopup>
         					<menuitem label="${c:l('mainmenu.aclunaga')}"
-                                onClick="alert(self.label)" />
+                                href='/common/aclunaga.zul' />
     					</menupopup>
     				</menu>
     			</menupopup>

navalplanner-webapp/src/main/webapp/myhello.zul

@@ -1,59 +0,0 @@
-<?init class="org.zk.myhello.pages.MyHelloPageListener"?>
-<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
-<?link rel="stylesheet" type="text/css" href="/planner/css/productionmanagement.css"?>
-<?page  id="myhello"?>
-<?init class="org.zkoss.zk.ui.util.Composition" arg0="/common/layout/template.zul"?>
-
-<zk>
-
-
-    <planner self="@{define(content)}">
-        <div id="idContextMenuTaskAssigment" use="org.zk.myhello.pages.MyHelloPageListener">            
-        </div>
-
-        <listdetails>
-        </listdetails>
-        <ganttpanel>
-            <timetracker detailLevel="${idContextMenuTaskAssigment.currentDetailLevel}" />
-            <tasklist id="taskList">
-                <task id="task1" color="blue"/>
-
-                <task id="task2" color="red"/>
-
-                <task id="task3" color="yellow"/>
-
-                <task id="task4" color="green"/>                                              
-
-		    <!--task id="task5" color="orange"/>
-
-		    <task id="task6" color="white"/-->		    		  
-
-            </tasklist>            
-            
-     
-            <window border="normal" width="300px" apply="${taskList.modalFormComposer}">
-                <grid>
-                    <rows>
-                        <row>${c:l('task.name')} <textbox id="name"/></row>
-                        <row>${c:l('task.start')} <datebox id="startDateBox" compact="true"/>
-                        </row>
-                        <row>                                   
-                            ${c:l('task.end')} <datebox id="endDateBox" compact="true"  />
-                        </row>                        
-                        <row>                                   
-                            ${c:l('task.notes')} <textbox id="notes" />
-                        </row>
-                    </rows>
-                </grid>
-                <button id="ok" label=" ${c:l('task.ok')}" />
-            </window>                      
-
-            <dependencylist>
-                <dependency idTaskOrig="task1" idTaskEnd="task2"/>
-                <dependency idTaskOrig="task2" idTaskEnd="task3"/>
-                <dependency idTaskOrig="task1" idTaskEnd="task4"/>
-            </dependencylist>
-        </ganttpanel>
-    </planner>          
-            
-</zk>

navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css

@@ -115,7 +115,7 @@ Height: is recalculated on number of tasks */
 
 /*
 .extra_padding {
-  padding: 6px;
+padding: 6px;
 } */
 
 .logo {
@@ -136,4 +136,26 @@ Height: is recalculated on number of tasks */
     height:90px;
 }
 
-table {margin:0px; padding:0px; border:0px;}
+table {
+    margin:0px;
+    padding:0px;
+    border:0px;
+}
+
+.completion {
+    display: none;
+    width: 80%;
+    top: -16px;
+    margin-top:0px;
+    height: 20px;
+    background-color: #FFCC99;
+    z-index:5;
+    border:0px;
+}
+
+.row span {
+    position:relative;
+    z-index:5;
+    color:#BBBBBB;
+    white-space:nowrap;
+}

navalplanner-webapp/src/main/webapp/planner/main.zul

@@ -14,13 +14,13 @@
         <ganttpanel>
             <timetracker detailLevel="${idContextMenuTaskAssigment.currentDetailLevel}" />
             <tasklist id="taskList">
-                <task id="task1" color="blue"/>
+                <task id="task1" color="#007bbe"/>
 
-                <task id="task2" color="red"/>
+                <task id="task2" color="#007bbe"/>
 
-                <task id="task3" color="yellow"/>
+                <task id="task3" color="#007bbe"/>
 
-                <task id="task4" color="green"/>                                              
+                <task id="task4" color="#007bbe"/>
 
 		    <!--task id="task5" color="orange"/>