diff options
Diffstat (limited to 'modules/private/websites/papa/maison_bbc_static/index.html')
-rw-r--r-- | modules/private/websites/papa/maison_bbc_static/index.html | 164 |
1 files changed, 0 insertions, 164 deletions
diff --git a/modules/private/websites/papa/maison_bbc_static/index.html b/modules/private/websites/papa/maison_bbc_static/index.html deleted file mode 100644 index 78c318c..0000000 --- a/modules/private/websites/papa/maison_bbc_static/index.html +++ /dev/null | |||
@@ -1,164 +0,0 @@ | |||
1 | <!doctype html> | ||
2 | <html> | ||
3 | <head> | ||
4 | <title>Pause</title> | ||
5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
6 | <script src="https://assets.immae.eu/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | ||
7 | <script src="https://assets.immae.eu/chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script> | ||
8 | <script src="https://assets.immae.eu/hammerjs/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script> | ||
9 | <script src="https://assets.immae.eu/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.min.js" integrity="sha256-6S7w9Wue7EBvlJh/Li/cPecjTNN+yBm/AoCePQA9Xi8=" crossorigin="anonymous"></script> | ||
10 | <style> | ||
11 | body { | ||
12 | padding-left: 5px; | ||
13 | padding-right: 5px; | ||
14 | text-align: center; | ||
15 | margin: auto; | ||
16 | font: 20px Helvetica, sans-serif; | ||
17 | color: #333; | ||
18 | } | ||
19 | h1 { | ||
20 | margin: 0px; | ||
21 | font-size: 40px; | ||
22 | } | ||
23 | article { | ||
24 | display: block; | ||
25 | max-width: 850px; | ||
26 | margin: 0 auto; | ||
27 | padding-top: 30px; | ||
28 | } | ||
29 | article + article { | ||
30 | border-top: 1px solid lightgrey; | ||
31 | } | ||
32 | article div { | ||
33 | text-align: center; | ||
34 | } | ||
35 | a { | ||
36 | color: #dc8100; | ||
37 | text-decoration: none; | ||
38 | } | ||
39 | a:hover { | ||
40 | color: #333; | ||
41 | } | ||
42 | button.selected { | ||
43 | background-color: lightgreen; | ||
44 | background-opacity: 40%; | ||
45 | } | ||
46 | img.banner { | ||
47 | max-width: 100%; | ||
48 | } | ||
49 | .button-row { | ||
50 | padding: 10px; | ||
51 | } | ||
52 | </style> | ||
53 | </head> | ||
54 | <body> | ||
55 | <article> | ||
56 | <h1>Site web en pause !</h1> | ||
57 | <div> | ||
58 | <img class="banner" src="/lamaison.png" /> | ||
59 | <p>Le site est actuellement en pause.</p> | ||
60 | </div> | ||
61 | <h1>Données historiques</h1> | ||
62 | <div class="button-row"> | ||
63 | <button class="chart-choice" data-type="kW" id="mean_consumption">Consommation moyenne</button> | ||
64 | <button class="chart-choice" data-type="kWh" id="total_consumption">Consommation totale</button> | ||
65 | <button class="chart-choice" data-type="%" id="hygrometrie">Hygrométrie</button> | ||
66 | <button class="chart-choice" data-type="°C" id="temperature">Température</button> | ||
67 | </div> | ||
68 | <canvas id="chart" width="400" height="400"></canvas> | ||
69 | </article> | ||
70 | <script> | ||
71 | $(".chart-choice").click(function() { | ||
72 | drawData($(this).data("type")); | ||
73 | $(".chart-choice").removeClass("selected"); | ||
74 | $(this).addClass("selected"); | ||
75 | }); | ||
76 | var allData = {}; | ||
77 | var myChart; | ||
78 | var colors = [ | ||
79 | "#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", | ||
80 | "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee" | ||
81 | ]; | ||
82 | |||
83 | $.ajax({ | ||
84 | type: "GET", | ||
85 | url: "/data.json", | ||
86 | dataType: "json", | ||
87 | success: function(data) { | ||
88 | allData = data; | ||
89 | $(".chart-choice")[3].click(); | ||
90 | }, | ||
91 | }); | ||
92 | |||
93 | var getData = function(key, colorIndex) { | ||
94 | var d = allData[key]; | ||
95 | return { | ||
96 | borderColor: colors[colorIndex], | ||
97 | hidden: d.hide, | ||
98 | fill: false, | ||
99 | label: d.name + " (" + d.unit + ")", | ||
100 | data: d.data.map(function(value) { | ||
101 | return { | ||
102 | "x": new Date(value.x), | ||
103 | "y": Math.max(0,value.y), | ||
104 | }; | ||
105 | }), | ||
106 | }; | ||
107 | }; | ||
108 | |||
109 | var getDataByType = function(type) { | ||
110 | var colorIndex = 0; | ||
111 | return Object.keys(allData) | ||
112 | .filter(function (key) { return allData[key].unit === type; }) | ||
113 | .map(function (key) { return getData(key, colorIndex++); }); | ||
114 | }; | ||
115 | |||
116 | var drawData = function (type) { | ||
117 | $('#chart').replaceWith('<canvas id="chart" width="400" height="400"></canvas>'); | ||
118 | var ctx = document.getElementById('chart').getContext('2d'); | ||
119 | myChart = new Chart(ctx, { | ||
120 | type: 'line', | ||
121 | options: { | ||
122 | scales: { | ||
123 | xAxes: [ | ||
124 | { | ||
125 | type: "time", | ||
126 | time: { | ||
127 | displayFormats: { | ||
128 | 'millisecond': 'YYYY-MM', | ||
129 | 'second': 'YYYY-MM', | ||
130 | 'minute': 'YYYY-MM', | ||
131 | 'hour': 'YYYY-MM', | ||
132 | 'day': 'YYYY-MM', | ||
133 | 'week': 'YYYY-MM', | ||
134 | 'month': 'YYYY-MM', | ||
135 | 'quarter': 'YYYY-MM', | ||
136 | 'year': 'YYYY-MM', | ||
137 | } | ||
138 | } | ||
139 | } | ||
140 | ], | ||
141 | yAxes: [ | ||
142 | { | ||
143 | ticks: { | ||
144 | callback: function(value, index, values) { return value + " " + type; } | ||
145 | } | ||
146 | } | ||
147 | ], | ||
148 | }, | ||
149 | plugins: { | ||
150 | zoom: { | ||
151 | pan: { enabled: true, mode: "x" }, | ||
152 | zoom: { enabled: true, mode: "x" }, | ||
153 | } | ||
154 | }, | ||
155 | }, | ||
156 | data: { | ||
157 | datasets: getDataByType(type), | ||
158 | } | ||
159 | }); | ||
160 | } | ||
161 | </script> | ||
162 | </body> | ||
163 | </html> | ||
164 | |||