Affichage des dates de stage
This commit is contained in:
parent
d9383d6e43
commit
6ef41280b7
2 changed files with 142 additions and 0 deletions
141
avisstage/static/js/render.js
Normal file
141
avisstage/static/js/render.js
Normal 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);
|
||||
});
|
||||
});
|
|
@ -36,6 +36,7 @@
|
|||
map.fitBounds(bds, {maxZoom: 11});
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="{% static "js/render.js" %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
Loading…
Reference in a new issue