Affichage des dates de stage

This commit is contained in:
Evarin 2018-03-18 23:26:04 +01:00
parent d9383d6e43
commit 6ef41280b7
2 changed files with 142 additions and 0 deletions

View file

@ -0,0 +1,141 @@
$(function() {
var RADIUS = 40;
var SVG_NS = "http://www.w3.org/2000/svg";
function cElSVG(name, props) {
var el = document.createElementNS(SVG_NS, name);
for (var n in props)
el.setAttribute(n, props[n]);
return el;
}
$.each($(".dates"), function(i, item) {
var $el = $(item);
var debut = $el.find(".debut").text().split("/");
var fin = $el.find(".fin").text().split("/");
var an = $el.find(".year").text();
var svg = cElSVG("svg");
svg.setAttribute('x', -RADIUS);
svg.setAttribute('y', -RADIUS);
svg.setAttribute("width", 2*RADIUS+10);
svg.setAttribute("height", 2*RADIUS+10);
var g = cElSVG("g", {"transform":"translate("+(5+RADIUS)
+", "+(5+RADIUS)+")"});
/* Dodécagone
var fnd = [];
for (var a=0; a<=12; a++) {
var ang = (a+3)*Math.PI/6;
fnd.push("L",
RADIUS*Math.cos(ang),
RADIUS*Math.sin(ang));
}
fnd[0] = "M";
var svg_fnd = cElSVG("path",
{"d": fnd.join(" "), "stroke":"#ffffff77",
"stroke-width": 2, "fill": "none"});
$(g).append(svg_fnd);
console.log(debut, fin);
var peri = [];
for (var b=Number(debut[1])-1; b!=Number(fin[1]); b=(b+1)%12) {
var ang = (b+3)*Math.PI/6;
peri.push("L",
RADIUS*Math.cos(ang),
RADIUS*Math.sin(ang));
}
var dcoef = (Number(debut[0])-1)/30;
peri[1] = peri[1] + dcoef*(peri[4]-peri[1]);
peri[2] = peri[2] + dcoef*(peri[5]-peri[2]);
peri[0] = "M";
var fcoef = (Number(fin[0])-1)/30;
var fi = peri.length-2;
peri[fi] = peri[fi-3] + fcoef*(peri[fi]-peri[fi-3]);
peri[fi+1] = peri[fi-2] + fcoef*(peri[fi+1]-peri[fi-2]);
var svg_peri = cElSVG("path",
{"d": peri.join(" "), "stroke":"#ffffff",
"stroke-width": 4, "fill": "none"});
$(g).append(svg_peri);
*/
var ticks = [];
for (var a=0; a<12; a++) {
var ang = (a/6+0.5)*Math.PI;
ticks.push("M",
(RADIUS-4)*Math.cos(ang),
(RADIUS-4)*Math.sin(ang),
"L",
(RADIUS)*Math.cos(ang),
(RADIUS)*Math.sin(ang),);
}
var svg_tks = cElSVG("path",
{"d": ticks.join(" "), "stroke":"#ffffff99",
"stroke-width": 1, "fill": "none"});
$(g).append(svg_tks);
var fnd = [];
for (var a=0; a<=60; a++) {
var ang = (a/30+0.5)*Math.PI;
fnd.push("L",
RADIUS*Math.cos(ang),
RADIUS*Math.sin(ang));
}
fnd[0] = "M";
var svg_fnd = cElSVG("path",
{"d": fnd.join(" "), "stroke":"#ffffff99",
"stroke-width": 1, "fill": "none"});
$(g).append(svg_fnd);
console.log(debut, fin);
var peri = [];
var bo = Math.round((Number(debut[1])-1+(Number(debut[0])-1)/30)*5);
var bf = Math.round((Number(fin[1])-1+(Number(fin[0])-1)/30)*5);
console.log(bo, bf);
for(var b=bo; b!=bf; b=(b+1)%60) {
var ang = (b/30+0.5)*Math.PI;
peri.push("L",
RADIUS*Math.cos(ang),
RADIUS*Math.sin(ang));
}
peri[0] = "M";
var svg_peri = cElSVG("path",
{"d": peri.join(" "), "stroke":"#ffffff",
"stroke-width": 4, "fill": "none"});
$(g).append(svg_peri);
var dtext = cElSVG("text",
{"transform":"translate(0, "+(-RADIUS*0.27)+")",
"text-anchor":"middle", "class":"debut",
"fill":"#fff",
"dominant-baseline":"text-after-edge"});
dtext.innerHTML = debut.join("/");
$(g).append(dtext);
var ftext = cElSVG("text",
{"transform":"translate(0, "+(RADIUS*0.27)+")",
"text-anchor":"middle", "class":"fin",
"fill":"#fff",
"dominant-baseline":"text-before-edge"});
ftext.innerHTML = fin.join("/");
$(g).append(ftext);
var atext = cElSVG("text",
{"transform":"translate(0, 3)",
"text-anchor":"middle", "class":"year",
"fill":"#fff",
"dominant-baseline":"middle"});
atext.innerHTML = an;
$(g).append(atext);
$(svg).append(g);
$el.html("");
$el.append(svg);
});
});

View file

@ -36,6 +36,7 @@
map.fitBounds(bds, {maxZoom: 11});
}
</script>
<script type="text/javascript" src="{% static "js/render.js" %}"></script>
{% endblock %}
{% block content %}