From 6ef41280b785656a45d01441849a9eeb3f5a81cd Mon Sep 17 00:00:00 2001 From: Evarin Date: Sun, 18 Mar 2018 23:26:04 +0100 Subject: [PATCH] Affichage des dates de stage --- avisstage/static/js/render.js | 141 ++++++++++++++++++ .../templates/avisstage/detail/stage.html | 1 + 2 files changed, 142 insertions(+) create mode 100644 avisstage/static/js/render.js diff --git a/avisstage/static/js/render.js b/avisstage/static/js/render.js new file mode 100644 index 0000000..4599cc4 --- /dev/null +++ b/avisstage/static/js/render.js @@ -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); + }); +}); diff --git a/avisstage/templates/avisstage/detail/stage.html b/avisstage/templates/avisstage/detail/stage.html index ec399ae..4ef3c9d 100644 --- a/avisstage/templates/avisstage/detail/stage.html +++ b/avisstage/templates/avisstage/detail/stage.html @@ -36,6 +36,7 @@ map.fitBounds(bds, {maxZoom: 11}); } + {% endblock %} {% block content %}