Affichage des dates de stage

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);
+    });
+});

avisstage/templates/avisstage/detail/stage.html

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