working no save
This commit is contained in:
Yann Esposito (Yogsototh)
parent
6ba5d6c233
commit
8a275cc968
GPG key ID:
7B19A4C650D59646
1 changed files with 181 additions and 136 deletions
317
index.html
317
index.html
|
|
@ -1,6 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Drag and Drop</title>
|
||||
<title>Plan</title>
|
||||
<style>
|
||||
body { font-family: monospace; }
|
||||
table { border: solid;}
|
||||
|
|
@ -25,15 +25,25 @@
|
|||
margin: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
#trash {
|
||||
padding: 0.3em;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
margin: 1em;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hl { background-color: red; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<h1>Plan</h1>
|
||||
<h3>people</h3>
|
||||
<h3>Team</h3>
|
||||
<div id="devs"></div>
|
||||
<h3>work</h3>
|
||||
<h3>releases</h3>
|
||||
<div id="main"></div>
|
||||
<div id="trash">🗑</div>
|
||||
</body>
|
||||
<script>
|
||||
// (function () {
|
||||
|
|
@ -46,147 +56,182 @@
|
|||
"Rob",
|
||||
"Wanderson",
|
||||
];
|
||||
var nbcolumns = 2;
|
||||
var fts = [ "SX Session", "Bug Squashing", "Secure Client" ]
|
||||
var fts = [ "SX Session",
|
||||
"Bug Squashing",
|
||||
"Secure Client" ];
|
||||
|
||||
function init(){
|
||||
var devcards=document.getElementById("devs");
|
||||
people.forEach(function(p) {
|
||||
devcards.appendChild( createDev(p) );
|
||||
})
|
||||
// build main table
|
||||
var main = document.getElementById("main");
|
||||
main.appendChild(genTable());
|
||||
var cells = document.querySelectorAll("td");
|
||||
cells.forEach(function(cell) {
|
||||
cell.ondragover = function(event){ event.preventDefault(); };
|
||||
cell.ondrop = function(ev){drop(ev,this);};
|
||||
});
|
||||
var cards = document.querySelectorAll(".card");
|
||||
cards.forEach(function(card){ card.draggable = true; card.ondragstart = drag; });
|
||||
function enabledrag(event) { event.preventDefault(); }
|
||||
function init(){
|
||||
var devcards=document.getElementById("devs");
|
||||
people.forEach(function(p) {
|
||||
devcards.appendChild( createDev(p) );
|
||||
})
|
||||
// build main table
|
||||
var main = document.getElementById("main");
|
||||
main.appendChild(genTable());
|
||||
var cells = document.querySelectorAll("td");
|
||||
cells.forEach(function(cell) {
|
||||
cell.ondragover = enabledrag;
|
||||
cell.ondrop = function(ev){drop(ev,this);};
|
||||
});
|
||||
var trashel = document.getElementById("trash");
|
||||
trashel.ondragover = enabledrag;
|
||||
trashel.ondrop = trash;
|
||||
trashel.ondragenter = hltrash;
|
||||
trashel.ondragleave = unhltrash;
|
||||
var cards = document.querySelectorAll(".card");
|
||||
cards.forEach(function(card){ card.draggable = true; card.ondragstart = drag; });
|
||||
}
|
||||
|
||||
|
||||
function genTable () {
|
||||
var t = document.createElement("table");
|
||||
t.id = "maintable";
|
||||
var previous = 2; // nb of previous release to show (2 means, 1 previous to prod, + current in prod)
|
||||
var nexts = 4; // nb of next releases to show
|
||||
var nbcolumns = previous + nexts;
|
||||
var rels = releases( previous, nexts );
|
||||
rels[0]="FT";
|
||||
t.appendChild(mkTitleRow(rels));
|
||||
fts.forEach( function(ft) {
|
||||
t.appendChild(mkRow(ft,nbcolumns));
|
||||
});
|
||||
return t;
|
||||
}
|
||||
function mkTitleRow( vs ) {
|
||||
var rows = document.createElement("tr");
|
||||
vs.forEach (function(v) {
|
||||
var c = document.createElement("th");
|
||||
c.textContent = v;
|
||||
rows.appendChild(c);
|
||||
});
|
||||
return rows;
|
||||
}
|
||||
function mkRow( ft, n ) {
|
||||
var rows = document.createElement("tr");
|
||||
|
||||
var ttitle = document.createElement("th");
|
||||
ttitle.textContent = ft;
|
||||
rows.appendChild(ttitle)
|
||||
|
||||
var arr = new Array(n);
|
||||
arr.fill("");
|
||||
arr.forEach (function(v) {
|
||||
var c = document.createElement("td");
|
||||
c.textContent = v;
|
||||
rows.appendChild(c);
|
||||
});
|
||||
return rows;
|
||||
}
|
||||
|
||||
function devcard(devname){
|
||||
var devdiv = document.createElement('div');
|
||||
devdiv.classList.add(devname);
|
||||
devdiv.classList.add('card');
|
||||
devdiv.textContent = devname;
|
||||
devdiv.draggable = true;
|
||||
devdiv.id = "inner-" + devname + Math.random().toString().substr(2, 8);
|
||||
devdiv.style.backgroundColor = genColor(devname);
|
||||
devdiv.ondragstart = drag;
|
||||
return devdiv;
|
||||
}
|
||||
|
||||
function hashcode(s){
|
||||
return s.split("").reduce(
|
||||
function(acc,l){
|
||||
acc = acc + 10 * (l.charCodeAt(0) - 'A'.charCodeAt(0));
|
||||
return (acc % 256);
|
||||
},
|
||||
0);
|
||||
}
|
||||
|
||||
function genColor(devname) {
|
||||
var h = hashcode(devname);
|
||||
return "hsl(" + h + ",80%, 36%)";
|
||||
}
|
||||
|
||||
function createDev(devname){
|
||||
var res = devcard(devname);
|
||||
res.id = devname;
|
||||
return res;
|
||||
};
|
||||
|
||||
// release logic
|
||||
|
||||
function getWeekNumber(d) {
|
||||
// Copy date so don't modify original
|
||||
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
|
||||
// Set to nearest Thursday: current date + 4 - current day number
|
||||
// Make Sunday's day number 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
|
||||
// Get first day of year
|
||||
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
|
||||
// Calculate full weeks to nearest Thursday
|
||||
var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
|
||||
// Return array of year and week number
|
||||
return [d.getUTCFullYear(), weekNo];
|
||||
}
|
||||
|
||||
// should return a list of next releases
|
||||
// use the current date
|
||||
function releases(previous,nexts) {
|
||||
var curr = new Date; // get current date
|
||||
var monday = curr.getDate() - curr.getDay() + 1;
|
||||
var wed = monday + 2;
|
||||
var nbDays = curr.getDay() - 3;
|
||||
var afterWed = nbDays > 0;
|
||||
var w = getWeekNumber(curr);
|
||||
var year = w[0];
|
||||
var week = w[1];
|
||||
var release = "";
|
||||
var releaseWeek = (week+1)%2;
|
||||
var releaseNumVersion = Math.floor((week - 16)/2) + 71;
|
||||
var currentVersion = "v1." + (releaseNumVersion - (1 + previous));
|
||||
var size=nexts + previous + 1;
|
||||
var releases = new Array(size)
|
||||
for (i = 0; i < size; i++) {
|
||||
releases [i] = "v1." + (releaseNumVersion + (i - 3));
|
||||
}
|
||||
return releases;
|
||||
}
|
||||
|
||||
// drag n drop
|
||||
function drag(ev) {
|
||||
ev.dataTransfer.setData("text", ev.target.id);
|
||||
}
|
||||
|
||||
function genTable () {
|
||||
var t = document.createElement("table");
|
||||
t.id = "maintable";
|
||||
var previous = 2; // nb of previous release to show (2 means, 1 previous to prod, + current in prod)
|
||||
var nexts = 4; // nb of next releases to show
|
||||
var nbcolumns = previous + nexts;
|
||||
var rels = releases( previous, nexts );
|
||||
rels[0]="FT";
|
||||
t.appendChild(mkTitleRow(rels));
|
||||
fts.forEach( function(ft) {
|
||||
t.appendChild(mkRow(ft,nbcolumns));
|
||||
});
|
||||
return t;
|
||||
function drop(ev,el) {
|
||||
ev.preventDefault();
|
||||
var name = ev.dataTransfer.getData("text");
|
||||
if ( name.startsWith("inner-") ) {
|
||||
console.log("move: " + name);
|
||||
el.appendChild(document.getElementById(name));
|
||||
} else {
|
||||
console.log("create: " + name);
|
||||
el.appendChild(devcard(name));
|
||||
}
|
||||
function mkTitleRow( vs ) {
|
||||
var rows = document.createElement("tr");
|
||||
vs.forEach (function(v) {
|
||||
var c = document.createElement("th");
|
||||
c.textContent = v;
|
||||
rows.appendChild(c);
|
||||
});
|
||||
return rows;
|
||||
}
|
||||
|
||||
function trash(ev) {
|
||||
ev.preventDefault();
|
||||
var name = ev.dataTransfer.getData("text");
|
||||
if ( name.startsWith("inner-") ) {
|
||||
console.log("TRASH: " + name);
|
||||
unhltrash(null);
|
||||
document.getElementById(name).remove();
|
||||
}
|
||||
function mkRow( ft, n ) {
|
||||
var rows = document.createElement("tr");
|
||||
}
|
||||
|
||||
var ttitle = document.createElement("th");
|
||||
ttitle.textContent = ft;
|
||||
rows.appendChild(ttitle)
|
||||
function hltrash(ev) {
|
||||
var trashel = document.getElementById('trash');
|
||||
trashel.classList.add("hl");
|
||||
}
|
||||
|
||||
var arr = new Array(n);
|
||||
arr.fill("");
|
||||
arr.forEach (function(v) {
|
||||
var c = document.createElement("td");
|
||||
c.textContent = v;
|
||||
rows.appendChild(c);
|
||||
});
|
||||
return rows;
|
||||
}
|
||||
|
||||
function devcard(devname){
|
||||
var devdiv = document.createElement('div');
|
||||
devdiv.classList.add(devname);
|
||||
devdiv.classList.add('card');
|
||||
devdiv.textContent = devname;
|
||||
devdiv.style.backgroundColor = genColor(devname);
|
||||
return devdiv;
|
||||
}
|
||||
|
||||
function hashcode(s){
|
||||
return s.split("").reduce(
|
||||
function(acc,l){
|
||||
acc = acc + 10 * (l.charCodeAt(0) - 'A'.charCodeAt(0));
|
||||
return (acc % 256);
|
||||
},
|
||||
0);
|
||||
}
|
||||
|
||||
function genColor(devname) {
|
||||
var h = hashcode(devname);
|
||||
return "hsl(" + h + ",80%, 36%)";
|
||||
}
|
||||
|
||||
function createDev(devname){
|
||||
var res = devcard(devname);
|
||||
res.id = devname;
|
||||
return res;
|
||||
};
|
||||
|
||||
function drag(ev) {
|
||||
ev.dataTransfer.setData("text", ev.target.id);
|
||||
}
|
||||
|
||||
|
||||
// release logic
|
||||
|
||||
function getWeekNumber(d) {
|
||||
// Copy date so don't modify original
|
||||
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
|
||||
// Set to nearest Thursday: current date + 4 - current day number
|
||||
// Make Sunday's day number 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
|
||||
// Get first day of year
|
||||
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
|
||||
// Calculate full weeks to nearest Thursday
|
||||
var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
|
||||
// Return array of year and week number
|
||||
return [d.getUTCFullYear(), weekNo];
|
||||
}
|
||||
|
||||
// should return a list of next releases
|
||||
// use the current date
|
||||
function releases(previous,nexts) {
|
||||
var curr = new Date; // get current date
|
||||
var monday = curr.getDate() - curr.getDay() + 1;
|
||||
var wed = monday + 2;
|
||||
var nbDays = curr.getDay() - 3;
|
||||
var afterWed = nbDays > 0;
|
||||
var w = getWeekNumber(curr);
|
||||
var year = w[0];
|
||||
var week = w[1];
|
||||
var release = "";
|
||||
var releaseWeek = (week+1)%2;
|
||||
var releaseNumVersion = Math.floor((week - 16)/2) + 71;
|
||||
var currentVersion = "v1." + (releaseNumVersion - (1 + previous));
|
||||
var size=nexts + previous + 1;
|
||||
var releases = new Array(size)
|
||||
for (i = 0; i < size; i++) {
|
||||
releases [i] = "v1." + (releaseNumVersion + (i - 3));
|
||||
}
|
||||
return releases;
|
||||
}
|
||||
|
||||
// drag n drop
|
||||
function drop(ev,el) {
|
||||
ev.preventDefault();
|
||||
var data = ev.dataTransfer.getData("text");
|
||||
el.appendChild(document.getElementById(data));
|
||||
}
|
||||
window.addEventListener("load", init);
|
||||
function unhltrash(ev) {
|
||||
var trashel = document.getElementById('trash');
|
||||
trashel.classList.remove("hl");
|
||||
}
|
||||
window.addEventListener("load", init);
|
||||
// })();
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue