ARAI#38181: Opdracht-uitvoeringsconsole.

svn path=/Website/trunk/; revision=33042
This commit is contained in:
Maykel Geerdink
2017-03-06 08:22:49 +00:00
parent 1873e64ff0
commit 54d5db3e8b

View File

@@ -33,7 +33,7 @@ function CARDBOX_START(id, params)
if (__cardboxactive__) ERROR_NESTED_BLOCK_START_DETECTED;
__cardboxactive__ = true;
%><!-- CARDBOX_START <%=id%> -->
<div id="<%=id%>" class="fcltcardbox <%=params.cardclass? params.cardclass : ""%>" <%=params.hidden? ' style="display:none"' : ''%>><%
<div id="<%=id%>" class="fcltcardbox <%=params.cardclass? params.cardclass : ""%>" <%=params.hidden? ' style="display:none"' : ''%> <%=params.html? " " + params.html : ""%>><%
}
function CARDBOX_END()
{
@@ -51,7 +51,7 @@ function CARD_START(id, params)
if (__cardactive__) ERROR_NESTED_BLOCK_START_DETECTED;
__cardactive__ = true;
%><!-- CARD_START <%=id%> -->
<div id="<%=id%>" class="fcltcard <%=params.cardclass? params.cardclass : ""%>" <%=params.hidden? ' style="display:none"' : ''%>>
<div id="<%=id%>" class="fcltcard <%=params.cardclass? params.cardclass : ""%>" <%=params.hidden? ' style="display:none"' : ''%> <%=params.html? " " + params.html : ""%>>
<table class="fcltcardtab" width="100%"><%
}
function CARD_END()
@@ -65,7 +65,6 @@ function CARD_END()
function opdr_plan(params)
{
__Log("opdr_plan");
var urole = params.urole;
var fronto = (urole == "fo");
var backo = (urole == "bo");
@@ -231,11 +230,11 @@ __Log("opdr_plan");
}
.sortable .fcltcardtab {
cursor: move;
}
.fcltcardtab td {
}
.fcltcardtab td {
padding-left: 4px;
}
.fcltcardtab td.profile {
.fcltcardtab td.profile {
padding: 2px 0 0 2px;
}
.cardbeheerder {
@@ -250,7 +249,7 @@ __Log("opdr_plan");
}
.cardsubname {
color: #eee;
line-height: 1em;
line-height: 1em;
}
.carddate {
font-size: 0.8em;
@@ -263,8 +262,21 @@ __Log("opdr_plan");
line-height: 1em;
color: #333;
}
.cardmoving {
background-color: #DAA520;
.cardorders {
}
.disable-sort-item {
background-color: #FFF0F0;
/* Maak alle tekst unselectable */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.pholder {
background-color: #DAA520; // Voor het testen pholder zichtbaar (show()) en rood (#DA0000) maken. Dan is de clone kaart goed zichtbaar.
}
.cardmoved {
background-color: #AEE9FF;
@@ -275,6 +287,12 @@ __Log("opdr_plan");
div.selected {
background-color: #DAA520;
}
.cardopdrnochange {
font-size: 1em;
vertical-align: top;
margin-top: 3px;
color: #DA0000;
}
</style>
<script type="text/javascript">
function sort(pkey)
@@ -283,70 +301,110 @@ __Log("opdr_plan");
var listitems = $("div", sortableList);
listitems.sort(function (a, b)
{
return ($(a).text().toUpperCase() > $(b).text().toUpperCase()) ? 1 : -1;
});
{
return ($(a).attr("opdr_key").toUpperCase() > $(b).attr("opdr_key").toUpperCase()) ? 1 : -1;
});
sortableList.append(listitems);
}
//$(document).ready(function()
// {
//var selected;
//var selectedCurrent;
//var received = false;
//var selectedArray = [];
//$("div.cardbox").on('mousedown',
// 'div.cardbeheerder',
// function (e)
// {
// alert("mousdown");
// $('.ui-sortable div.cardbeheerder').not($(this).parent().find('div.cardbeheerder')).removeClass('selected');
// if (selectedCurrent != undefined && selectedCurrent.text() != $(this).text() && !selectedCurrent.next('div.cardbeheerder').hasClass('pholder') &&
// selectedCurrent.hasClass('selected') && ($(this).hasClass('selected') || (e.ctrlKey || e.metaKey)))
// {
// selectedCurrent.after(selectedCurrent.clone().removeClass('selected').addClass('pholder').hide());
// }
// if (e.ctrlKey || e.metaKey)
// {
// if($(this).next('div.cardbeheerder').hasClass('pholder'))
// $(this).next('div.cardbeheerder').remove();
// else
// $(this).after($(this).clone().addClass('pholder').hide());
// $(this).toggleClass("selected");
// }
// else
// {
// //selectedArray = [];
// //selectedArray.push($(this));
// }
// selectedCurrent = $(this);
// selected = $(this).clone().removeClass('selected');
// if(selectedCurrent.next('div.cardbeheerder').hasClass('pholder'))
// selectedCurrent.next('div.cardbeheerder').remove();
// });
//
//$("div.cardbox").on('mouseup',
// 'div.cardbeheerder',
// function (e)
// {
// alert("mouseup");
// if (e.ctrlKey || e.metaKey)
// {
// }
// else
// {
// $('.selected').not($(this)).each(function()
// {
// if($(this).next('div.cardbeheerder').hasClass('pholder'))
// $(this).next('div.cardbeheerder').remove();
// });
// $(this).addClass("selected").siblings().removeClass('selected');
// }
// });
// });
var selected;
var selectedCurrent;
var received = false;
var selectedArray = [];
$(document).ready(function()
{
$("div.cardbox").on("mousedown",
"div.cardorders",
function (e)
{
if ($(this).hasClass("disable-sort-item"))
return;
// Deselecteer alle kaarten van andere rijen.
$(".ui-sortable div.cardorders").not($(this).parent().find("div.cardorders")).removeClass("selected");
if (selectedCurrent != undefined &&
selectedCurrent.text() != $(this).text() &&
!selectedCurrent.next("div.cardorders").hasClass("pholder") &&
selectedCurrent.hasClass("selected") &&
($(this).hasClass("selected") || (e.ctrlKey || e.metaKey))
)
{
// Voeg een clone kaart toe aan de kaart die hiervoor WAS geselecteerd (selectedCurrent).
selectedCurrent.after(selectedCurrent.clone().removeClass("selected").addClass("pholder").hide());
}
// Als shift key is ingedrukt dan voorgaande geselecteerde kaart tot aangeklikte kaart selecteren.
//if (e.shiftKey || e.metaKey)
//{
// // Vindt voorgaande geselecteerde kaart
// if ($(this).prev("div.cardorders").hasClass("pholder"))
// TODO: enz.
//
// //if ($(this).next("div.cardorders").hasClass("pholder"))
// // $(this).next("div.cardorders").remove();
// //else
// // $(this).after($(this).clone().addClass("pholder").hide());
// //$(this).toggleClass("selected");
//}
// Als ctrl key is ingedrukt dan deze kaart selecteren of deselecteren.
if (e.ctrlKey || e.metaKey)
{
if ($(this).next("div.cardorders").hasClass("pholder"))
$(this).next("div.cardorders").remove();
else
$(this).after($(this).clone().addClass("pholder").hide());
$(this).toggleClass("selected");
}
else
{
//selectedArray = [];
//selectedArray.push($(this));
}
selectedCurrent = $(this); // De aangeklikte kaart.
selected = $(this).clone().removeClass("selected"); // De clone van de aangeklikte kaart.
// Als de net geselecteerde kaart een clone/pholder heeft, dan deze verwijderen,
// want de laatst geselecteerde/die gesleept wordt, heeft geen clone.
if (selectedCurrent.next("div.cardorders").hasClass("pholder"))
selectedCurrent.next("div.cardorders").remove();
});
$("div.cardbox").on("mouseup",
"div.cardorders",
function (e)
{ // Receive en stop worden na de mousup uitgevoerd.
if ($(this).hasClass("disable-sort-item"))
return;
if (e.ctrlKey || e.metaKey)
{
}
else
{
// Alleen nieuwe selecteren. De clonen/pholders van de andere geselecteerden kunnen weg.
$(".selected").not($(this)).each(function()
{
if ($(this).next("div.cardorders").hasClass("pholder"))
$(this).next("div.cardorders").remove();
});
// Deselecteer alle gesleept kopie kaarten, behalve diegene die gesleept/aangeklikt is. Die wordt vanzelf verwijderd/gedeselecteerd.
$(this).addClass("selected").siblings().removeClass("selected");
}
});
$("div.cardbox").on("dblclick",
"div.cardorders",
function (e)
{
//debugger;
var opdr_key_dblclick = $(this).attr("opdr_key");
var url = "appl/mld/mld_opdr.asp?urole=bo&opdr_key=" + opdr_key_dblclick;
FcltMgr.openDetail(url, { reuse: true });
});
});
</script>
</head>
@@ -362,121 +420,145 @@ __Log("opdr_plan");
<%
var sql = mld.getopdroverzicht_sql(pautfunction, params);
oRs = Oracle.Execute(sql);
var oldprs_key = -1
var oldprs_key = -2;
while (!oRs.eof)
{
var prs_key = oRs("prs_perslid_key").Value || -1;
var opdr_key = oRs("mld_opdr_key").Value;
var behandelaar = oRs("behandelaar").Value;
// Ik wil weten of ik de opdracht mag wijzigen.
// Als de opdracht niet te wijzigen is, dan mag ik deze niet slepen.
// Een niet te wijzigen opdracht heeft ook een icon "fa-toggle-off" voor het opdrachtnummer.
// TODO: Kost dit niet te veel tijd. Zelf uitrekenen is zeer lastig.
var this_opdr = mld.func_enabled_opdracht(opdr_key); // Wat mag ik zoal op deze opdracht?
if (prs_key != oldprs_key)
{
CARDBOX_START("cardboxbeh" + prs_key, {cardclass: "cardbox cbsortable"});
CARDBOX_START("cardboxbeh" + prs_key, {cardclass: "cardbox cbsortable", html: "prs_key=" + prs_key});
%> <script type="text/javascript">
$(function() {
$("#cardboxbeh<%=prs_key%>").sortable({
items: '.sortable',
items: '.sortable:not(.disable-sort-item)',
connectWith: ".cardbox",
helper: "clone",
opacity: 0.7,
cursor: "move",
//delay: 150, //Needed to prevent accidental drag when trying to select
//revert: 0,
//helper: function (e, item)
// {
// //Basically, if you grab an unhighlighted item to drag, it will deselect (unhighlight) everything else
// if (!item.hasClass('selected'))
// {
// item.addClass('selected').siblings().removeClass('selected');
// }
//
// //////////////////////////////////////////////////////////////////////
// //HERE'S HOW TO PASS THE SELECTED ITEMS TO THE `stop()` FUNCTION:
//
// // Clone the selected items into an array
// var elements = item.parent().children('.selected').clone();
//
// // Add a property to `item` called 'multidrag` that contains the
// // selected items, then remove the selected items from the source list
// item.data('multidrag', elements).siblings('.selected').remove();
//
// // Now the selected items exist in memory, attached to the `item`,
// // so we can access them later when we get to the `stop()` callback
//
// //Create the helper
// var helper = $('<div/>');
// return helper.append(elements);
// },
delay: 150, // Nodig om te voorkomen dat per ongeluk wordt gesleept, wanneer wordt geprobeerd om te selecteren.
revert: 0,
helper: function (e, item)
{
// In principe, als je een unhighlighted item sleept, moeten alle andere items geunhighlighted worden.
if (!item.hasClass("selected"))
item.addClass("selected").siblings().removeClass("selected");
///////////////////////////////////////////////////////////////////
// Nu de geselecteerde kaarten doorgeven aan de "stop()" functie //
///////////////////////////////////////////////////////////////////
// Clone de geselecteerde kaarten in een array elements.
var elements = item.parent().children(".selected").clone();
// Voeg een property "multidrag" met de elements toe aan "item" die de geselecteerde elementen bevat van de orginele/bron lijst.
item.data("multidrag", elements).siblings(".selected").remove();
// De geselecteerde kaarten in het geheugen bestaan nu en zijn aan het "item" is gekoppeld,
// dus kunnen we ze later benaderen waneer we in de "stop()" callback functie zijn.
// Create the helper. De kaarten als een DOM element meegeven.
var helper = $("<div/>");
return helper.append(elements);
},
start: function (e, ui)
{
ui.item.addClass("cardmoving");
ui.item.show();
{ // Wordt uitgevoerd als het slepen start.
ui.item.show(); // Laat de orginele kaart (waar op geklikt is) zien tijdens het slepen.
$(".pholder").show();
},
stop: function (e, ui)
{
ui.item.removeClass("cardmoving");
sort(<%=prs_key%>);
{ // Wordt uitgevoerd als het slepen stopt.
// Mouseup en receive worden voor de stop uitgevoerd.
// De originele highlighted kaart waar op geklikt is verdwijnt vanzelf.
// De originele highlighted kaarten waar niet op geklikt is, moeten nog verwijderd worden.
// Ook alle clonen verwijderen.
selected.remove();
$(".pholder").remove();
// Nu benaderen we de kaarten die we opgeslagen hebben in "item"'s data!
// Haal de elementen uit de helper.
var elements = ui.item.data("multidrag");
// Met de class "cardmoved" aangeven dat de kaarten zijn verplaatst.
// Als de kaarten naar de eigen lijst zijn gekopieerd dan class "cardmoved" niet toevoegen
if (received)
elements.addClass("cardmoved");
// "elements" bevat nu de originele geselecteerde items vanuit de orginele lijst (de gesleepte items)!!
received = false;
// Bepaal de prs_key van de lijst waar de items naar toe worden gekopieerd (destination) i.v.m. het sorteren op het eind.
var prs_key_dest = ui.item.parent().attr("prs_key")
// Uiteindelijk voeg ik de geselecteerde items toe achter "het item" (aangeklikte en gesleepte item) in de nieuwe lijst.
// Daarna "het item" in de lijst verwijderen omdat het net ook (dubbel) is toegevoegd.
ui.item.after(elements).remove();
// Het (gekopieerde) aangeklikte en gesleepte item (die in elements zat) is nog geselecteerd. Deze deselecteren.
$(".selected").removeClass("selected");
// Dubbele uit de kaartenlijst eruit halen. Maar hier zijn nooit geen dubbele omdat de orginelen hier niet blijven staan.
//$(".ui-sortable").not(ui.sender)
// .each(function()
// {
// // $(this) is de bovenste kaart (persoon) van de kaartenlijst.
// // $(this).parent() is de gehele kaartenlijst.
// $(this).find("div.cardbeheerder")
// .each(function()
// {
// if ($(this).parent().find("div.cardbeheerder:contains('" + $(this).text() + "')").length > 1)
// $(this).remove();
// });
// });
// Sorteer de lijst waar de items aan zijn toegevoegd.
sort(prs_key_dest);
if (<%=prs_key%> != prs_key_dest)
{
// Nu werkelijk de behandelaar aanpassen van de verschoven opdrachten.
var opdr_key_array = [];;
for (var i = 0; i < elements.length; i++)
{
opdr_key_array.push(elements.eq(i).attr("opdr_key"));
}
var data = { prs_key: prs_key_dest,
opdr_key_arr: opdr_key_array.join(",") };
protectRequest.dataToken(data);
$.post("../mld/opdr_handlerchange.asp",
data,
FcltCallback,
"json");
}
},
receive: function (e, ui)
{
ui.item.addClass("cardmoved");
sort(<%=prs_key%>);
{ // Wordt uitgevoerd door de lijst die ontvangt. Wordt niet uitgevoerd als het dezelfde lijst is als de zender.
// Mouseup en stop worden voor de receive uitgevoerd.
received = true;
},
create: function (event, ui)
{
sort(<%=prs_key%>);
}
//start: function (e, ui)
// {
// ui.item.after(selected);
// $('.pholder').show();
// },
//stop: function (e, ui)
// {
// //Now we access those items that we stored in `item`s data!
// if (!received)
// {
// selected.remove();
// $('.pholder').remove();
// }
// els
// {
// received = false;
// $('.pholder').removeClass('pholder');
// }
// var elements = ui.item.data('multidrag');
//
// //`elements` now contains the originally selected items from the source list (the dragged items)!!
//
// //Finally I insert the selected items after the `item`, then remove the `item`, since
// // item is a duplicate of one of the selected items.
// ui.item.after(elements).remove();
// $('.selected').removeClass('selected');
// $('.ui-sortable').not(ui.sender)
// .each(function()
// {
// $(this).find('div.cardbeheerder')
// .each(function()
// {
// if($(this).parent().find('div.cardbeheerder:contains("'+$(this).text()+'")').length > 1)
// $(this).remove();
// });
// });
// },
//receive: function (e, ui)
// {
// received = true;
// },
});
//$("#cardboxbeh<%=prs_key%>").sortable("disable");
});
</script>
<% CARD_START("cardbeh" + prs_key, {cardclass: "cardbeheerder"});
<% CARD_START("cardbeh" + prs_key, {cardclass: "cardbeheerder", html: "prs_key=" + prs_key + " opdr_key=-1"});
if (prs_key > 0)
{
var thisUser = new Perslid(prs_key); // geeft ook handige informatie
%>
%>
<tr><td rowspan="2" class='profile'><img id='photo' class='profile' src='<%=thisUser.photoinfo().photopaththumb %>'></td>
<td><span class="readonly cardname"><%=safe.html(behandelaar)%></span></td></tr>
<tr><td><span class="readonly cardsubname"><%=safe.html(thisUser.prs_srtperslid())%></span></td></tr>
@@ -488,12 +570,19 @@ __Log("opdr_plan");
CARD_END();
}
var uitvoerende = oRs("naam").Value;
var opdracht = oRs("ins_srtdiscipline_prefix").Value + oRs("mld_opdr_key").Value + "/" + oRs("mld_opdr_bedrijfopdr_volgnr").Value;
CARD_START("opdrcard" + opdr_key, {cardclass: "sortable"});
%> <tr><td><span class="readonly cardopdrnr"><%=safe.html(opdracht)%></span><span class="carddate"><%=safe.html(toDateTimeString(oRs("mld_opdr_einddatum").Value), false,false, true)%></span></td></tr>
<tr><td><span class="readonly cardopdrtxt"><%=safe.html(oRs("mld_opdr_omschrijving").Value)%></span></td></tr>
<% CARD_END();
var uitvoerende = oRs("naam").Value;
var opdracht = oRs("ins_srtdiscipline_prefix").Value + oRs("mld_melding_key").Value + "/" + oRs("mld_opdr_bedrijfopdr_volgnr").Value;
CARD_START("opdrcard" + opdr_key, {cardclass: "cardorders sortable" + (!this_opdr.canChange? " disable-sort-item" : ""), html: "opdr_key=" + opdr_key});
%> <tr>
<td>
<% if (!this_opdr.canChange)
{ %>
<i class="fa fa-toggle-off cardopdrnochange" aria-hidden="true"></i>
<% } %>
<span class="readonly cardopdrnr <%=(!this_opdr.canChange? " disable-sort-item" : "")%>"><%=safe.html(opdracht)%></span><span class="carddate"><%=safe.html(toDateTimeString(oRs("mld_opdr_einddatum").Value), false,false, true)%></span>
</td></tr>
<tr><td><span class="readonly cardopdrtxt <%=(!this_opdr.canChange? " disable-sort-item" : "")%>"><%=safe.html(oRs("mld_opdr_omschrijving").Value)%></span></td></tr>
<% CARD_END();
oldprs_key = prs_key;
oRs.MoveNext();