<!doctype html>
<html>
<head>
    <title>Firebase</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script src="https://canvas-gauges.com/download/latest/all/gauge.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

</head>
<body>
  <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <!-- Header section containing title -->
  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
        <a href="/dashboard"><img src='../img/firebase-logo.png' width="40px"><h3>Firebase IoT Dashboard</h3></a>
        <a href="/logout">
          <button id="sign-out-button" class="mdl-button--raised mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign out</button>
        </a>
      </div>
    </div>
  </header>     
      
  <main class="mdl-layout__content mdl-color--grey-100">
      <!-- Container for the demo -->
      <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
          <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
            <h2 class="mdl-card__title-text">Authenticated User Info</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <!-- Container where we'll display the user details -->
            <div class="quickstart-user-details-container">
                User ID: <span id="quickstart-sign-in-status"><%= uid %></span><br>
              User Siged In with: <span id="quickstart-sign-in-status"><%= email %></span><br>
        
            </div>
          </div>
        </div>
        <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop dashboard">
          <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
            <h2 class="mdl-card__title-text">DASHBOARD</h2>
          </div>
          <div class="mdl-card__supporting-text">
            <div class="mdl-grid">
            <!-- Red led toggle button Card -->
              <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
               <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 style="font-size:15px; font-weight: bold;" class="mdl-card__title-text">TOGGLE RED LED</h2>
               </div>
               <div class="mdl-card__supporting-text">
                <div style="padding-left: 110px; padding-top: 40px;">
                  <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="red">
                    <input type="checkbox" id="red" class="mdl-switch__input">
                    <span class="mdl-switch__label"></span>
                  </label>
                </div>
                </div>
             </div>
              <!-- Green led toggle button Card -->
             <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 style="font-size:15px; font-weight: bold;" class="mdl-card__title-text">TOGGLE GREEN LED</h2>
                </div>
                <div class="mdl-card__supporting-text">
                <div style="padding-left: 110px; padding-top: 40px;">
                  <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="green">
                    <input type="checkbox" id="green" class="mdl-switch__input">
                    <span class="mdl-switch__label"></span>
                  </label>
                </div>
                </div>
             </div>
               <!-- Servo Slider Card -->
             <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 style="font-size:15px; font-weight: bold;" class="mdl-card__title-text">SET SERVO</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  <p style="width:250px; padding-left: 5px; padding-top: 40px;">
                    <input id="slider" class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="180" value="0" step="5">
                    <span id="sliderval">0</span>
                  </p>
                </div>
             </div>
          </div>
          <div class="mdl-grid">
             <!-- LDR Gauge Card -->
             <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 style="font-size:15px; font-weight: bold;" class="mdl-card__title-text">LDR GAUGE</h2>
                </div>
                <div class="mdl-card__supporting-text">
                <div style="padding-left:0">
                  <canvas id="canvas" data-type="radial-gauge"
                    data-width="250"
                    data-height="250"
                    data-units="Brightness"
                    data-min-value="200"
                    data-start-angle="90"
                    data-ticks-angle="180"
                    data-value-box="false"
                    data-max-value="750"
                    data-major-ticks="200,250,300,350,400,450,500,550,600,650,700,750"
                    data-minor-ticks="2"
                    data-stroke-ticks="true"
                    data-highlights='[
                      {"from": 600, "to": 750, "color": "rgba(200, 50, 50, .75)"}
                    ]'
                    data-color-plate="#fff"
                    data-border-shadow-width="0"
                    data-borders="false"
                    data-needle-type="arrow"
                    data-needle-width="2"
                    data-needle-circle-size="7"
                    data-needle-circle-outer="true"
                    data-needle-circle-inner="false"
                    data-animation-duration="1500"
                    data-animation-rule="linear"
                  ></canvas>
                </div>
                </div>
             </div>
              <!-- Live Chart.js for Ultrasonic value -->
             <div class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 style="font-size:15px; font-weight: bold;" class="mdl-card__title-text">ULTASONIC</h2>
                </div>
                <div class="mdl-card__supporting-text">
                  <canvas id="myChart" width="600" height="250"></canvas>
                </div>
             </div>
            </div>
          </div>
        </div>
    </main>
    <span id='variableJSON1' hidden><%= uid %></span>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Import and configure the Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-analytics.js"></script>

  <script>
      // Initialize Firebase
  var config = {
    apiKey: "AIzaSyC2q4rXmLAmV2d5HKLWlUWY3MAvYLPMoso",
    authDomain: "iotguy-dashboard.firebaseapp.com",
    databaseURL: "https://iotguy-dashboard.firebaseio.com",
    projectId: "iotguy-dashboard",
    storageBucket: "iotguy-dashboard.appspot.com",
    messagingSenderId: "249564343788",
    appId: "1:249564343788:web:b7004b7c8e01eba925a4c9",
    measurementId: "G-NDWXDZ2CSV"
  };
  firebase.initializeApp(config);
  firebase.analytics();

  </script>  
  <script src="/js/script.js"></script>
</body>
</html>