<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Scada Oneview 4.0 alpha</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!--<link rel="stylesheet" href="/css/scada_light.css">-->
  <link id="pagestyle" rel="stylesheet" href="/css/scada_dark.css">
  <link rel="stylesheet" href="/css/scadaicons.css">

  <link rel="stylesheet" href="/css/stylekit.css">

  <link rel="stylesheet" href="/css/ionicons.min.css">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="/js/bootstrap.bundle.min.js"></script>
  <script src="/bower_components/chart.js/dist/Chart.bundle.min.js"></script>
  <script src="/bower_components/chart.js/samples/utils.js"></script>
</head>

<body>

  <!-- @import "components/nav.html" -->




  <div class="container-fluid">
  <div id="settings">

    <h3>Settings</h3>
    <button onclick="swapStyleSheet('/css/scada_light.css')">Light theme</button>
    <button onclick="swapStyleSheet('/css/scada_dark.css')">Dark theme</button>

  </div>

    <div class="row">
      <div class="col-12" id="crumbs">
        <h1>Monitor</h1>
        <ul>
          <li>
            <a href="/">
              <i class="icon icon-home"></i>
            </a>
          </li>
          <li>
            <a href="#">Monitor</a>
          </li>
          <li>
            <a href="#">Yadad</a>
          </li>


          <li class="dropdown notifications hidden-sm-down">
            TB03
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"></a>


            <div class="dropdown-menu  " aria-labelledby="navbarDropdown">

              <a href="#">TB01</a>
              <a href="#">TB02</a>
              <a href="#" class="active">TB03</a>
              <a href="#">TB04</a>
              <a href="#">TB05</a>
              <a href="#">TB06</a>
              <a href="#">TB07</a>
              <a href="#">TB08</a>
              <a href="#">TB09</a>
              <a href="#">TB10</a>




            </div>
          </li>


        </ul>
      </div>
    </div>


    <div class="row">
      <div class="col-4">
        <div class="scadacard level1 status">
          <h1>43,414
            <span> MW</span>
          </h1>
          <h2>Power Production</h2>
        </div>
      </div>
      <div class="col-4">
        <div class="scadacard level1 status">
          <h1>7
            <span> m/s</span>
          </h1>
          <h2>Wind Speed</h2>
        </div>
      </div>
      <div class="col-4">
        <div class="scadacard level1 status">
          <h1>7.3&deg;
            <span> C</span>
          </h1>
          <h2>External temperature</h2>
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-12">
        <div class="scadacard level1">




          <table id="itemtable" style="float:left; padding:0; margin:0;">
            <tr>
              <th class="titletd" style="width:100px;">Park</th>
              <th class="actiontd" style="width:100px;">Action</th>

              <th class="visible">Power</th>
              <th class="text-right visible">Wind Speed</th>
              <th class="text-center visible">Wind Direction</th>
              <th class="visible">Status</th>
              <th class="text-center visible">Energy Factor</th>
              <th class="text-center visible">Budget</th>
              <th class="text-center visible">Availability</th>
              <th class="text-center visible">Capture Rate</th>
              <th></th>

            </tr>



            <tr class="datarow">
              <td>18 characters long…</td>
              <td>
                <a href="#" data-toggle="tooltip" title="" data-original-title="Drilldown title">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>


                <!-- <div class="btn-group dropright drill-drop">-->
                <i class="ion ion-more dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">




                  <div class="dropdown-menu">
                    <a href="#"><i class="icon-alert"></i> Unit Details</a>
                    <a href="#"><i class="icon-cog"></i> Live Data</a>
                    <a href="#"><i class="icon-logout"></i> Historical Data</a>
                    <a href="#"><i class="icon-max"></i> Alarms & Events</a>
                    <a href="#"><i class="icon-service"></i>Power Curves</a>
                    <a href="#"><i class="icon-service"></i> Wind Rose</a>
                    <div class="dropdown-divider"></div>
                    <a href="#"><i class="icon-service"></i> Start Unit</a>
                    <a href="#"><i class="icon-service"></i> Stop Unit</a>
                    <a href="#"><i class="icon-service"></i> Reset Unit</a>
                    <a href="#"><i class="icon-service"></i> Remote Display</a>
                    <a href="#"><i class="icon-service"></i> Create Ticket</a>

                  </div>
                </i>
                <!--</div>-->


              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">22,000 kW</div>
                </div>
              </td>
              <td class="text-right visible">5.6 m/s</td>
              <td class="text-center visible">22&nbsp;&nbsp;<i class="ion ion-android-arrow-up" style="transform: rotate(105deg)"></i></td>
              <td class=" visible">
                <div class="statusbox alert">
                  <a href="#">
                    <i class="icon-alert"></i>1</a>
                </div>
                <div class="statusbox warning">
                  <a href="#">
                    <i class="icon-warning"></i>1</a>
                </div>
                <div class="statusbox service">
                  <a href="#">
                    <i class="icon-service"></i>2</a>
                </div>
                <div class="statusbox radio">
                  <a href="#">
                    <i class="icon-radio"></i>3</a>
                </div>




                <!--<span class="statusdot bg-alert"></span>Comm Problem</td>-->
                <td class="bar visible">
                  <div class="barbg">
                    <div class="bardisplay"></div>
                    <div class="barvalue">75%</div>
                  </div>
                </td>
                <td class="bar visible">
                  <div class="barbg">
                    <div class="bardisplay bg-blue"></div>
                    <div class="barvalue">12%</div>
                  </div>
                </td>
                <td class="bar visible">
                  <div class="barbg">
                    <div class="bardisplay bg-green"></div>
                    <div class="barvalue">50%</div>
                  </div>
                </td>
                <td class="bar visible">
                  <div class="barbg">
                    <div class="bardisplay bg-blue"></div>
                    <div class="barvalue">25%</div>
                  </div>
                </td>
                <td></td>

            </tr>

          </table>


          <div class="drillcontainer">
            <div class="row">
              <div class="col-12 text-right">
                <i class="icon-max"></i>
                <i class="icon-newwin"></i>
                <i class="icon-close closeDetail"></i>


              </div>
              <div class="col-12">
                <canvas id="canvas"></canvas>


              </div>
            </div>



          </div>
        </div>
      </div>
    </div>


  </div>
  <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"  crossorigin="anonymous"></script>-->
  <script type="text/javascript">
    $(document).ready(function () {
      $('.datarow').clone().appendTo('#itemtable');
      $('.datarow').clone().appendTo('#itemtable');
      $('.datarow').clone().appendTo('#itemtable');
    });
  
    </script>
  <script src="/js/screenfull-min.js"></script>
  <script src="/js/oneview-min.js"></script>




</body>

</html>