Skip to content

Commit

Permalink
drag avec suggestions
Browse files Browse the repository at this point in the history 
#4 #8 #7
  • Loading branch information
@SThor
SThor committed Feb 27, 2018
1 parent 92408ad commit 598357b
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 100 deletions.
4 changes: 2 additions & 2 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ body {
padding: 0;
}

.prochaine {
.prochaine[data-preferable=true] {
border-color: transparent; /* remove the border's colour */
box-shadow: 0 0 0 5px green inset; /* emulate the border */
}

.prochaineRouge {
.prochaine[data-preferable=false] {
border-color: transparent; /* remove the border's colour */
box-shadow: 0 0 0 5px red inset; /* emulate the border */
}
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h1>Réserve de phases</h1>
<!-- jQuery + jQuery UI pour le drag -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<!--<script src="js/jquery.ui.touch-punch.min.js"></script>-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Expand Down
188 changes: 97 additions & 91 deletions js/drag.js
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,113 @@
window.addEventListener("load", function (e) {
refreshDraggable();
console.log("drag prêt");
});

function showProchaine() {
$("#SH50_prep").addClass("prochaine");
$("#SH500A_prep").addClass("prochaine");
$("#SH500C_prep").addClass("prochaine");
$("#HM800_prep").addClass("prochaine");
$("#HM8000_prep").removeClass("prochaine");
$("#NH5000A_prep").addClass("prochaineRouge");
$("#NH5000B_prep").addClass("prochaineRouge");
$("#SH503_prep").addClass("prochaineRouge");
$("#CLOCK900_prep").addClass("prochaineRouge");
$("#CLOCK902_prep").addClass("prochaineRouge");
function showProchaine(cdc) {
$('#col_prep > div').each(function () {
var cdcID, realCDC, machineID, machine;
$(this).addClass("prochaine");
for (cdcID in planning.CDCs) {
if (planning.CDCs.hasOwnProperty(cdcID)) {
realCDC = planning.CDCs[cdcID];
machineID = $(this).attr('id').replace("_prep", "");
if (realCDC.hasOwnProperty(machineID)) {
machine = realCDC[machineID];
if (cdcID.replace(" TM", "") !== cdc.replace(" TM", "")) {
$(this).attr('data-preferable', 'false');
} else {
console.log(machineID, machine['reste a servir']);
if (machine['en-cours'] < machine['jetons']) {
$(this).attr('data-preferable', 'true');
}
}
}
}
}
console.log("===============================")
});
}

function hideProchaine() {
$("#SH50_prep").removeClass("prochaine");
$("#SH500A_prep").removeClass("prochaine");
$("#SH500C_prep").removeClass("prochaine");
$("#HM800_prep").removeClass("prochaine");
$("#HM8000_prep").removeClass("prochaine");
$("#NH5000A_prep").removeClass("prochaineRouge");
$("#NH5000B_prep").removeClass("prochaineRouge");
$("#SH503_prep").removeClass("prochaineRouge");
$("#CLOCK900_prep").removeClass("prochaineRouge");
$("#CLOCK902_prep").removeClass("prochaineRouge");
$('#col_prep > div').each(function () {
$(this).removeClass("prochaine");
$(this).attr('data-preferable', 'dunno');
});
}

$('#machines').find('.slot').onmouseenter(function (event) {
hideProchaine()
}).onmouseleave(function (event) {
showProchaine()
$('#machines').find('.slot').hover(
function (event) {
showProchaine();
},
function (event) {
hideProchaine($(this).attr('data-cdc'));
});

function refreshDraggable() {
$(function () {
$('.slots_prepa>.slot').droppable({
accept: ".phase, .OF",
drop: function (event, ui) {
var clone, machineID;
if ($(ui.draggable).parent() !== $(this)) {
console.log($(ui.draggable).parent().parent().parent().attr('id'));
if ($(ui.draggable).hasClass("inPrep")) {
$(ui.draggable).appendTo($(this));
var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left + 1;
var top_end = drop_p.top - drag_p.top + 1;
ui.draggable.css({
top: '+=' + top_end,
left: '+=' + left_end
});
} else {
clone = $(ui.draggable).clone();
clone.appendTo($(this));
clone.addClass("inPrep");
machineID = $(this).parent().attr('id');
machineID.replace("_prep", "");
$(ui.draggable).attr('prep-machine', machineID);
$(ui.draggable).addClass("alreadyInPrep");
$(ui.draggable).removeClass("ui-draggable");
$(ui.draggable).removeClass("ui-draggable-handle");
$(ui.draggable).draggable("disable");
}
refreshDraggable();
console.log('drag');
$('.slots_prepa>.slot').droppable({
accept: ".phase, .OF",
drop: function (event, ui) {
var clone, machineID;
if ($(ui.draggable).parent() !== $(this)) {
console.log($(ui.draggable).parent().parent().parent().attr('id'));
if ($(ui.draggable).hasClass("inPrep")) {
$(ui.draggable).appendTo($(this));
var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left + 1;
var top_end = drop_p.top - drag_p.top + 1;
ui.draggable.css({
top: '+=' + top_end,
left: '+=' + left_end
});
} else {
clone = $(ui.draggable).clone();
clone.appendTo($(this));
clone.addClass("inPrep");
machineID = $(this).parent().attr('id');
machineID.replace("_prep", "");
$(ui.draggable).attr('prep-machine', machineID);
$(ui.draggable).addClass("alreadyInPrep");
$(ui.draggable).draggable("disable");
}
/*var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left + 1;
var top_end = drop_p.top - drag_p.top + 1;
ui.draggable.animate({
top: '+=' + top_end,
left: '+=' + left_end
});*/
}
});
$('#reserve .OF:not(.alreadyInPrep)').draggable({
snap: '.slots_prepa .slot',
revert: 'invalid',
//snapMode: 'inner',
opacity: 0.7,
helper: "clone",
stack: ".OF",
drag: function (event) {
showProchaine()
},
stop: function (event) {
hideProchaine()
refreshDraggable();
}
});
$('.OF.inPrep').draggable({
snap: '.slots_prepa .slot',
revert: 'invalid',
snapMode: 'inner',
opacity: 0.7,
stack: ".inPrep",
drag: function (event) {
showProchaine()
},
stop: function (event) {
hideProchaine()
}
});
/*var drop_p = $(this).offset();
var drag_p = ui.draggable.offset();
var left_end = drop_p.left - drag_p.left + 1;
var top_end = drop_p.top - drag_p.top + 1;
ui.draggable.animate({
top: '+=' + top_end,
left: '+=' + left_end
});*/
}
});
$('#reserve').find('.OF:not(.alreadyInPrep)').draggable({
snap: '.slots_prepa .slot',
revert: 'invalid',
//snapMode: 'inner',
opacity: 0.7,
helper: "clone",
stack: ".OF",
drag: function (event) {
showProchaine($(this).attr('data-cdc'))
},
stop: function (event) {
hideProchaine()
}
});
$('.OF.inPrep').draggable({
snap: '.slots_prepa .slot',
revert: 'invalid',
snapMode: 'inner',
opacity: 0.7,
stack: ".OF",
drag: function (event) {
showProchaine($(this).attr('data-cdc'));
},
stop: function (event) {
hideProchaine()
}
});
}
13 changes: 7 additions & 6 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,27 +134,27 @@ planning.refreshEnCoursPrepa = function () {

switch (row["LIBELLE"]) {
case "CU HORIZONTAL":
creation_slot_phase(row, index_CU_H);
creation_slot_phase(row, index_CU_H, row["LIBELLE"]);
index_CU_H++;
break;
case "CU HORIZONTAL TM":
//console.log("CU HORIZONTAL TM");
creation_slot_phase(row, index_CU_H_TM);
creation_slot_phase(row, index_CU_H_TM, row["LIBELLE"]);
index_CU_H_TM++;
break;
case "CU HORIZONTAL GC":
//console.log("CU HORIZONTAL GC");
creation_slot_phase(row, index_CU_H_GC);
creation_slot_phase(row, index_CU_H_GC, row["LIBELLE"]);
index_CU_H_GC++;
break;
case "CU HORIZONTAL GC TM":
//console.log("CU HORIZONTAL GC TM");
creation_slot_phase(row, index_CU_H_GC_TM);
creation_slot_phase(row, index_CU_H_GC_TM, row["LIBELLE"]);
index_CU_H_GC_TM++;
break;
case "CU 5 AXES":
// console.log("CU 5 AXES");
creation_slot_phase(row, index_5AXES);
creation_slot_phase(row, index_5AXES, row["LIBELLE"]);
index_5AXES++;
break;
default:
Expand All @@ -167,13 +167,14 @@ planning.refreshEnCoursPrepa = function () {
}
;

function creation_slot_phase(nom, ite) {
function creation_slot_phase(nom, ite, cdc) {
if (ite < 10) {
var zone_phase = document.getElementById(nom["LIBELLE"] + "_" + ite);
var slot_creation = document.createElement('div');
slot_creation.classList.add("OF");
slot_creation.classList.add("ui-draggable");
slot_creation.classList.add("ui-draggable-handle");
slot_creation.setAttribute("data-cdc", cdc);
slot_creation.innerHTML = nom["ID_OFS"] + ' - ' + nom["ID_ARTICLE"];


Expand Down

0 comments on commit 598357b

Please sign in to comment.