

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <!-- Third Party package -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	
    <!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144934238-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-144934238-2');
</script>


    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
     <script src="pretty-doughtnut.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    
    
<script src="selection.js"></script>
    
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>MOO Dashboard</title>
	
	<style>
	
.h5text{
    display: block;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
	
	.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link:hover {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
  
}

.my-attr-scrollbar {
position: relative;
max-height: calc(100vh - 56px);
width:100%;
overflow: auto;
}

.table-wrapper-scroll-y {
display: block;
}
	
.clearfix:before,.clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
            
            
	</style>
	 <link rel="stylesheet" href="css/circle.css">

  </head>
  <body>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>



	<!-- nav bar --> 
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
     Mall Of Oman
	</a>
	
</nav>

<div class="container-fluid">

<div class = "row">
<nav class ="col-md-2 d-none d-md-block bg-light sidebar" id= "sidebar">
<div class="sidebar-sticky" style = "height:calc(100vh - 56px)">
        <ul class="nav flex-column">
          <li class="nav-item">
              
            <a class="nav-link " href="#Files">
                <i class="fa fa-file-text-o" aria-hidden="true"></i>
              Files
            </a>
          </li>
         <!-- <li class="nav-item">
            <a class="nav-link" href="#Reports">
                <i class="fa fa-pie-chart" aria-hidden="true"></i>
              Reports
            </a>
          </li>-->
          <li class="nav-item">
            <a class="nav-link" href="#Data">
                <i class="fa fa-table" aria-hidden="true"></i>
              Data
            </a>
          </li> 
          <!--<li class="nav-item">
            <a class="nav-link" href="#">
              User
            </a>
          </li>-->
          
        </ul>
      </div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4 my-attr-scrollbar">

<div id="Files" class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Files</h1>
        
      </div>
      
      
      
	  <nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-Light" >
    <li class="breadcrumb-item active" aria-current="page">Car Park Flooring Package</li>
  </ol>
</nav>

<div class="list-group">
   
  <a href="viewer.php?doc=dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXRqbGprN2huM2dpdmNpemR6d2NiaGhzbHk4NHB4MTZfdHV0b3JpYWxfYnVja2V0L0NhclBhcmslMjBMZXZlbCUyMDEubndk&access_code=QWhtYWRVZHdhbktpbmc " target="_blank" class="list-group-item list-group-item-action">MOO - Level 01 Epoxy & Paint</a>
  <a href="viewer.php?doc=dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXRqbGprN2huM2dpdmNpemR6d2NiaGhzbHk4NHB4MTZfdHV0b3JpYWxfYnVja2V0L0NhclBhcmslMjBMZXZlbCUyMDAyLm53ZA&access_code=QWhtYWRVZHdhbktpbmc" target="_blank" class="list-group-item list-group-item-action">MOO - Level 02 Epoxy & Paint</a>
  <a href="viewer.php?doc=dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXRqbGprN2huM2dpdmNpemR6d2NiaGhzbHk4NHB4MTZfdHV0b3JpYWxfYnVja2V0L0NhclBhcmslMjBMZXZlbCUyMFUyLm53ZA&access_code=QWhtYWRVZHdhbktpbmc" target="_blank" class="list-group-item list-group-item-action">MOO - Level U2 Epoxy & Paint</a>
  <a href="viewer.php?doc=dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZXRqbGprN2huM2dpdmNpemR6d2NiaGhzbHk4NHB4MTZfdHV0b3JpYWxfYnVja2V0L0NhclBhcmslMjBMZXZlbCUyMDAzLm53ZA==&access_code=QWhtYWRVZHdhbktpbmc" target="_blank" class="list-group-item list-group-item-action">MOO - Level 03 Epoxy & Paint</a>


</div>

<br>
<!--<div id="Reports" class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Reports</h1>
        
      </div>
      <div class="container">
          
          <div class="row">
              
              <div class="col-md-6">
                  <div class="card mb-4 box-shadow" style=" height: 305px;" id="canvas-holder">
                      <canvas id="chart-area1"></canvas>
                      </div>
              </div>
              
              <div class="col-md-6">
                  <div class="card mb-4 box-shadow" id="canvas-holder">
                      <div class="clearfix">
                          <div class="c100 p89 big green center">
                              <span>89%</span>
                              <div class="slice">
                                  <div class="bar"></div>
                                  <div class="fill"></div>
                                </div>
                            </div>
                            <p class="text-center" style="font-size:10pt;"> Wall Guards Progress </p>
                        </div>
                    </div>
                </div>
              
              <div class="col-md-6">
                  <div class="card mb-4 box-shadow" style=" height: 305px;" id="canvas-holder">
                      <canvas id="chart-area3"></canvas>
                      </div>
              </div>
              
              <div class="col-md-6">
                  <div class="card mb-4 box-shadow" id="canvas-holder">
                      <div class="clearfix">
                          <div class="c100 p81 big green center">
                              <span>81%</span>
                              <div class="slice">
                                  <div class="bar"></div>
                                  <div class="fill"></div>
                                </div>
                            </div>
                            <p class="text-center" style="font-size:10pt;"> Wall Guards <em style="font-weight:bold;">(Corners)</em> Progress </p>
                        </div>
                      </div>
              </div>
              
          </div>
      </div>
      
	<br>-->
	
	<div id="Data"  class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2"><? echo date("F"); ?>  Certifications</h1>
        
        <div class="btn-group mr-2">
                <button onclick="RefreshTable()"  class="btn btn-sm btn-outline-secondary">Refresh</button>
                <button onclick="exportTableToCSV('data.csv')" class="btn btn-sm btn-outline-secondary">Export</button>
              </div>
        
      </div>
	
	
	
<div class="table-responsive">	
	        <table class="table table-striped table-sm">
	            <thead >
	                <tr>
<th scope="col">LEVEL</th>
<th scope="col">BOQ</th>
<th scope="col">Descreption</th>
<th scope="col">Unit</th>
<th scope="col">Total Qtys</th>
<!-- <th scope="col">Cumulative Certified</th> -->
<th scope="col">Certified Qtys</th>
</tr>
</thead>
<tbody id="BOQtable">
</tbody>
</table>
</div>

<footer class="text-muted" style="background:#f8f9fa;padding-top:10px;padding-bottom:10px;">
      <div class="container">
          
        <p style="margin: auto;" class="float-right">
          <a href="#">Back to top</a>
        </p>
        <p style="margin: auto;" >Developed by <a href="http://audwan.info/">Ahmad Udwan</a> © 2020</p>
      </div>
    </footer>
</main>


</div>


</div>
  </body>

  <script>


		var config = {
			type: 'pie',
			data: {
				datasets: [{
					data: [
						79,
						21,
						
					],
					backgroundColor: [
						
						window.chartColors.green,
						window.chartColors.blue,
					],
					label: 'Dataset 1'
				}],
				labels: [
					'Completed',
					'Remaining',

				]
			},
			options: {
				responsive: true,
				title: {
				    display: true,
				    text: 'Wall Guards Progrss',
				    position: 'bottom',
				}
			}
		};
		
		var config1 = {
			type: 'pie',
			data: {
				datasets: [{
					data: [
						1288.453,
						32.318,
						66.96,
						1664.376,
						1927.52,
						
					],
					backgroundColor: [
						
						window.chartColors.red,
						window.chartColors.orange,
						window.chartColors.yellow,
						window.chartColors.green,
						window.chartColors.blue,
					],
					label: 'Dataset 1'
				}],
				labels: [
					'Level 0B',
					'Level 00',
					'Level 01',
					'Level 02',
					'Level 03',


				]
			},
			options: {
				responsive: true,
				title: {
				    display: true,
				    text: ['P2.K.002.B-1', 'Accessories; Black Rubber Wall Guard', 'to BOH Corridors, 50mm thick x 200mm width'],
				    position: 'bottom',
				}
			}
		};
		
		
		var config3 = {
			type: 'pie',
			data: {
				datasets: [{
					data: [
						80,
						20,
						
					],
					backgroundColor: [
						
						window.chartColors.green,
						window.chartColors.blue,
					],
					label: 'Dataset 1'
				}],
				labels: [
					'Completed',
					'Remaining',

				]
			},
			options: {
				responsive: true,
				title: {
				    display: true,
				    text: 'Wall Corners Progrss',
				    position: 'bottom',
				}
			}
		};
		
		var config4 = {
			type: 'pie',
			data: {
				datasets: [{
					data: [
						62,
						4,
						2,
						197,
						202,
						
					],
					backgroundColor: [
						
						window.chartColors.red,
						window.chartColors.orange,
						window.chartColors.yellow,
						window.chartColors.green,
						window.chartColors.blue,
					],
					label: 'Dataset 1'
				}],
				labels: [
					'Level 0B',
					'Level 00',
					'Level 01',
					'Level 02',
					'Level 03',


				]
			},
			options: {
				responsive: true,
				title: {
				    display: true,
				    text: ['P2.K.002.A-2', 'Accessories; Black Rubber Corner Guard','to BOH Corridors 75x75mm wing and 1000mm High'],
				    position: 'bottom',
				}
			}
		};

		window.onload = function() {
			//var ctx = document.getElementById('chart-area').getContext('2d');
			var ctx1 = document.getElementById('chart-area1').getContext('2d');
			//window.myPie = new Chart(ctx, config);
			window.myPie = new Chart(ctx1, config1);
			
			var ctx3 = document.getElementById('chart-area3').getContext('2d');
			//var ctx4 = document.getElementById('chart-area4').getContext('2d');
			window.myPie = new Chart(ctx3, config4);
			//window.myPie = new Chart(ctx4, config3);
		};
		
		GenerateMainTable();
</script>



		
		
</html>