<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Graph</title>
  <link href="css/mui.css" rel="stylesheet" type="text/css"/>
  <link href="css/test.css" rel="stylesheet" type="text/css"/>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <script src="lib/mui.js"></script>
  <script src="lib/notification.js"></script>
  <link rel="stylesheet" href="css/notification.css">
</head>
<body style="background-color:#3f3f4f">
<div class="mui-container">
  <div class='mui-row'>
    <div class="mui-col-md-3 panel">
      <div class='mui-panel' id="main"></div>
      <div class='mui-panel' id="graph"></div>
      <div id="output"></div>
    </div>
    <div class="mui-col-md-9">
      <div class="mui-container">
        <div id="chartdiv" style="width:100%; height:600px;"></div>
      </div>
    </div>
  </div>
  <!--<div id="main"></div>-->
  <!--<div id="graph"></div>-->
  <script type="text/template" id="loaded-template">
    <div
      style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
    </div>
  </script>
  <script type="text/template" id="main-template">
    <div class="mui-container">
      <div class="mui-row">
        <div class="mui-select">
          <select id="device" name="device">
            <option></option>
            <option>
              HIE-mobile-1
            </option>
            <option>
              HIE-demo
            </option>
            <option>
              HIE-mobile-2
            </option>
            <option>
              HIE-smart-campus-1
            </option>
            <option>
              HIE-smart-campus-2
            </option>
            <option>
              HIE-smart-campus-3
            </option>
            <option>
              HIE-smart-campus-4
            </option>
            <option>
              HIE-smart-campus-5
            </option>
            <option>
              HIE-smart-campus-6
            </option>
            <option>
              HIE-smart-campus-7
            </option>
            <option>
              CENSIS-LoRa-1
            </option>
            <option>
              CENSIS-LoRa-2
            </option>
            <option>
              CENSIS-LoRa-3
            </option>
            <option>
              CENSIS-LoRa-4
            </option>
            <option>
              HIE-mDot-1
            </option>
          </select> <label>Device</label>
        </div>
      </div>
      <div class="mui-row">
        <div class="mui-col-md-6">
          <div class="mui-textfield">
            <input type="date" placeholder="" id='from' name="from"/>
            <label>From</label>
          </div>
        </div>
        <div class="mui-col-md-6">
          <div class="mui-textfield">
            <input type="date" placeholder="" id='to' name="to"/>
            <label>To</label>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-row">
      <div class="mui-col-md-12">
        <button id='refresh'
                class="mui-btn mui-btn--small mui-btn--primary">Refresh
        </button>

        </div>
    </div>
  </script>
  <script type="text/template" id="list-template">
    <ul></ul>
  </script>
  <script type="text/template" id="item-template">
    <div class="mui-row">
      <div class="mui-col-md-2"><%= item.timestamp %></div>
      <div class="mui-col-md-2"><%= item.lux %></div>
      <div class="mui-col-md-2"><%= item.co2 %></div>
      <div class="mui-col-md-2"><%= item.temp %></div>
      <div class="mui-col-md-2"><%= item.humidity %></div>
      <div class="mui-col-md-2"><%= item.sound %></div>
    </div>
  </script>
  <script type="text/template" id="AMChart-template">
    <div class="mui-container">
      <div class="mui-row">
        <div class="mui-select mui-col-md-12">
          <select id="displaymode" name="displaymode">
            <option value="0"></option>
            <option value="1">
              Light
            </option>
            <option value="2">
              Temp
            </option>
            <option value="3">
              Co2
            </option>
            <option value="4">
              Humidity
            </option>
            <option value="5">
              Noise
            </option>
            <option value="6">
              Light & Co2
            </option>
            <option value="7">
              Temperature & Humidity
            </option>

          </select> <label>Graph</label>
        </div>
      </div>
    </div>
  </script>
  <script type="text/template" id="graph-template">
    <div class="mui-container">
      <div class="mui-row">
        <div class="mui-select mui-col-md-6">
          <select id="displaymode" name="displaymode">
            <option value="0"></option>
            <option value="1">
              Light
            </option>
            <option value="2">
              Temp
            </option>
            <option value="3">
              Co2
            </option>
            <option value="4">
              Humidity
            </option>
            <option value="5">
              Noise
            </option>
          </select> <label>Graph</label>
        </div>
        <div class="mui-col-md-6">
          <svg id="graphSVG" width="300" height="150" fill="blue">
            <line x1="46" y1="12" x2="280" y2="12"
                  style="stroke:#004c6d;stroke-width:2;"></line>
            <text id="maxY" x="36" y="15" text-anchor="end">--</text>
            <line x1="46" y1="136" x2="280" y2="136"
                  style="stroke:#004c6d;stroke-width:2;"></line>
            <text id="MinY" x="36" y="139" text-anchor="end">0</text>
            <polyline id="line" fill="none" stroke="#2196F3" text-anchor="end"
                      stroke-width="1" points=""></polyline>
            <g id="datapoints"></g>
            <g id="baseline"></g>
          </svg>
        </div>
      </div>
    </div>
  </script>
  <script src="lib/jquery.js"
          integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
          crossorigin="anonymous"></script>
  <script src="lib/base64.js"></script>
  <script src="lib/underscore.js"></script>
  <script src="lib/backbone.js"></script>
  <script src="lib/sugar-date.js"></script>
  <script src="lib/amcharts.js"></script>
  <script src="lib/serial.js"></script>
  <script src="lib/amstock.js"></script>
  <script src="js/mdot.js"></script>
</body>
</html>