path: root/modules/private/websites/papa/maison_bbc_static/index.html



<!doctype html>
<html>
  <head>
    <title>Pause</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://assets.immae.eu/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://assets.immae.eu/chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
    <script src="https://assets.immae.eu/hammerjs/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>
    <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>
    <style>
      body {
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        margin: auto;
        font: 20px Helvetica, sans-serif;
        color: #333;
      }
      h1 {
        margin: 0px;
        font-size: 40px;
      }
      article {
        display: block;
        max-width: 850px;
        margin: 0 auto;
        padding-top: 30px;
      }
      article + article {
        border-top: 1px solid lightgrey;
      }
      article div {
        text-align: center;
      }
      a {
        color: #dc8100;
        text-decoration: none;
      }
      a:hover {
        color: #333;
      }
      button.selected {
        background-color: lightgreen;
        background-opacity: 40%;
      }
      img.banner {
        max-width: 100%;
      }
      .button-row {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <h1>Site web en pause&nbsp;!</h1>
      <div>
        <img class="banner" src="/lamaison.png" />
        <p>Le site est actuellement en pause.</p>
      </div>
      <h1>Données historiques</h1>
      <div class="button-row">
        <button class="chart-choice" data-type="kW" id="mean_consumption">Consommation moyenne</button>
        <button class="chart-choice" data-type="kWh" id="total_consumption">Consommation totale</button>
        <button class="chart-choice" data-type="%" id="hygrometrie">Hygrométrie</button>
        <button class="chart-choice" data-type="°C" id="temperature">Température</button>
      </div>
      <canvas id="chart" width="400" height="400"></canvas>
    </article>
    <script>
      $(".chart-choice").click(function() {
        drawData($(this).data("type"));
        $(".chart-choice").removeClass("selected");
        $(this).addClass("selected");
      });
      var allData = {};
      var myChart;
      var colors = [
        "#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee",
        "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
        ];

      $.ajax({
        type: "GET",
        url: "/data.json",
        dataType: "json",
        success: function(data) {
          allData = data;
          $(".chart-choice")[3].click();
        },
      });

      var getData = function(key, colorIndex) {
        var d = allData[key];
        return {
          borderColor: colors[colorIndex],
          hidden: d.hide,
          fill: false,
          label: d.name + " (" + d.unit + ")",
          data: d.data.map(function(value) {
            return {
              "x": new Date(value.x),
              "y": Math.max(0,value.y),
            };
          }),
        };
      };

      var getDataByType = function(type) {
        var colorIndex = 0;
        return Object.keys(allData)
          .filter(function (key) { return allData[key].unit === type; })
          .map(function (key) { return getData(key, colorIndex++); });
      };

      var drawData = function (type) {
        $('#chart').replaceWith('<canvas id="chart" width="400" height="400"></canvas>');
        var ctx = document.getElementById('chart').getContext('2d');
        myChart = new Chart(ctx, {
          type: 'line',
          options: {
            scales: {
              xAxes: [
                {
                  type: "time",
                  time: {
                    displayFormats: {
                      'millisecond': 'YYYY-MM',
                      'second': 'YYYY-MM',
                      'minute': 'YYYY-MM',
                      'hour': 'YYYY-MM',
                      'day': 'YYYY-MM',
                      'week': 'YYYY-MM',
                      'month': 'YYYY-MM',
                      'quarter': 'YYYY-MM',
                      'year': 'YYYY-MM',
                    }
                  }
                }
              ],
              yAxes: [
                {
                  ticks: {
                    callback: function(value, index, values) { return value + " " + type; }
                  }
                }
              ],
            },
            plugins: {
              zoom: {
                pan: { enabled: true, mode: "x" },
                zoom: { enabled: true, mode: "x" },
              }
            },
          },
          data: {
            datasets: getDataByType(type),
          }
        });
      }
    </script>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <title>Pause</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://assets.immae.eu/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://assets.immae.eu/chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
    <script src="https://assets.immae.eu/hammerjs/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>
    <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>
    <style>
      body {
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        margin: auto;
        font: 20px Helvetica, sans-serif;
        color: #333;
      }
      h1 {
        margin: 0px;
        font-size: 40px;
      }
      article {
        display: block;
        max-width: 850px;
        margin: 0 auto;
        padding-top: 30px;
      }
      article + article {
        border-top: 1px solid lightgrey;
      }
      article div {
        text-align: center;
      }
      a {
        color: #dc8100;
        text-decoration: none;
      }
      a:hover {
        color: #333;
      }
      button.selected {
        background-color: lightgreen;
        background-opacity: 40%;
      }
      img.banner {
        max-width: 100%;
      }
      .button-row {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <h1>Site web en pause&nbsp;!</h1>
      <div>
        <img class="banner" src="/lamaison.png" />
        <p>Le site est actuellement en pause.</p>
      </div>
      <h1>Données historiques</h1>
      <div class="button-row">
        <button class="chart-choice" data-type="kW" id="mean_consumption">Consommation moyenne</button>
        <button class="chart-choice" data-type="kWh" id="total_consumption">Consommation totale</button>
        <button class="chart-choice" data-type="%" id="hygrometrie">Hygrométrie</button>
        <button class="chart-choice" data-type="°C" id="temperature">Température</button>
      </div>
      <canvas id="chart" width="400" height="400"></canvas>
    </article>
    <script>
      $(".chart-choice").click(function() {
        drawData($(this).data("type"));
        $(".chart-choice").removeClass("selected");
        $(this).addClass("selected");
      });
      var allData = {};
      var myChart;
      var colors = [
        "#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee",
        "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
        ];

      $.ajax({
        type: "GET",
        url: "/data.json",
        dataType: "json",
        success: function(data) {
          allData = data;
          $(".chart-choice")[3].click();
        },
      });

      var getData = function(key, colorIndex) {
        var d = allData[key];
        return {
          borderColor: colors[colorIndex],
          hidden: d.hide,
          fill: false,
          label: d.name + " (" + d.unit + ")",
          data: d.data.map(function(value) {
            return {
              "x": new Date(value.x),
              "y": Math.max(0,value.y),
            };
          }),
        };
      };

      var getDataByType = function(type) {
        var colorIndex = 0;
        return Object.keys(allData)
          .filter(function (key) { return allData[key].unit === type; })
          .map(function (key) { return getData(key, colorIndex++); });
      };

      var drawData = function (type) {
        $('#chart').replaceWith('<canvas id="chart" width="400" height="400"></canvas>');
        var ctx = document.getElementById('chart').getContext('2d');
        myChart = new Chart(ctx, {
          type: 'line',
          options: {
            scales: {
              xAxes: [
                {
                  type: "time",
                  time: {
                    displayFormats: {
                      'millisecond': 'YYYY-MM',
                      'second': 'YYYY-MM',
                      'minute': 'YYYY-MM',
                      'hour': 'YYYY-MM',
                      'day': 'YYYY-MM',
                      'week': 'YYYY-MM',
                      'month': 'YYYY-MM',
                      'quarter': 'YYYY-MM',
                      'year': 'YYYY-MM',
                    }
                  }
                }
              ],
              yAxes: [
                {
                  ticks: {
                    callback: function(value, index, values) { return value + " " + type; }
                  }
                }
              ],
            },
            plugins: {
              zoom: {
                pan: { enabled: true, mode: "x" },
                zoom: { enabled: true, mode: "x" },
              }
            },
          },
          data: {
            datasets: getDataByType(type),
          }
        });
      }
    </script>
  </body>
</html>