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.
This commit is contained in:
Lorenzo Tilve
Javier Moran Rua
parent
d7881d6cd7
commit
eae256a297
9 changed files with 123 additions and 121 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -215,8 +247,8 @@ YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
|
|||
myEvent.on(window, 'resize', function() {
|
||||
this.initConstraints();
|
||||
}, this, true);
|
||||
},
|
||||
initConstraints : function() {
|
||||
},
|
||||
initConstraints : function() {
|
||||
|
||||
//Get the top, right, bottom and left positions
|
||||
var region = myDom.getRegion(this.cont);
|
||||
|
|
@ -246,5 +278,5 @@ initConstraints : function() {
|
|||
// Set the constraints based on the above calculations
|
||||
this.setXConstraint(left, right);
|
||||
this.setYConstraint(top, bottom);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"/>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue