From a2ca7605c5d5aa7bac73aab2876957c83a48a73c Mon Sep 17 00:00:00 2001
From: Darel <fedrickdarel@gmail.com>
Date: Thu, 29 Mar 2018 11:21:29 +0800
Subject: [PATCH] Page Function For Meter Track

---
 css/global.style.css         |  13 +++
 home.html                    |  24 ++++-
 meter-progress-trackers.html | 198 ++++++++++++++++++++++++++++-------
 3 files changed, 195 insertions(+), 40 deletions(-)

diff --git a/css/global.style.css b/css/global.style.css
index c857378..fdcb218 100644
--- a/css/global.style.css
+++ b/css/global.style.css
@@ -2940,6 +2940,19 @@ input[type=text]:disabled {
 /*end of part 31----------------------------------------------------*/
 
 
+
+/*-------------------------------------------------------------------
+[32. order meter tracking bar
+-------------------------------------------------------------------*/
+.AzPagination-Container{
+	width: 100%;
+	padding: 10px;
+}
+
+/*end of part 31----------------------------------------------------*/
+
+
+
 /*Other Styles and helpers------------------------------------------*/
 .block {
     display: block;
diff --git a/home.html b/home.html
index 0733479..9590c54 100644
--- a/home.html
+++ b/home.html
@@ -411,7 +411,7 @@
 
                                 <div class="form-divider"></div>
 
-                                <a href="meter-progress-trackers.html" class="list-item">
+                                <a href="#" class="list-item" data-popup="AzPopActionStatus">
                                     <i class="fa fa-shopping-cart"></i>
                                     <em class="seperate-contact"></em>
                                     <span class="list-item-title-contact">Steam-001/112</span>
@@ -1136,6 +1136,28 @@
         </div>
     </div>
     <!--POPUP HTML CONTENT END -->
+    <!--POPUP HTML CONTENT START -->
+    <div class="popup-overlay" id="AzPopActionStatus">
+            <!-- if you dont want overlay add class .no-overlay -->
+            <div class="popup-container">
+                <div class="popup-header">
+                    <h1></h1>
+                    <span class="popup-close" data-dismiss="true"><i class="fa fa-times"></i></span>
+                </div>
+                <div class="popup-content">
+                    <a href="#" class="button block blue">Details</a>
+                    <div class="form-divider-2"></div>
+                    <a href="meter-progress-trackers.html" class="button block blue">Track Order</a>
+                    <div class="form-divider-2"></div>
+                    <a href="#" class="button block blue">Chat</a>
+                    <div class="form-divider-2"></div>
+                    <a href="#" class="button block blue">Preview PL</a>
+                    <div class="form-divider-2"></div>
+                    <a href="#" class="button block blue">Print Marking</a>
+                </div>
+            </div>
+        </div>
+        <!--POPUP HTML CONTENT END -->
     <!-- Change Header Title According To The Tab Title Start Here -->
     <script type="text/javascript">
         document.getElementById("profile").onclick = function () {
diff --git a/meter-progress-trackers.html b/meter-progress-trackers.html
index d3fe79d..c8a4503 100644
--- a/meter-progress-trackers.html
+++ b/meter-progress-trackers.html
@@ -113,47 +113,146 @@
                     </div>
                 </div>
 
-                <div class="form-divider"></div>
-
-                <div class="form-row">
-                    <div class="form-row txt-center">
-                        <a class="a-meter-title">Order Date</a>
+                <div id="PageOrderDate" class="AzPagination-Container" style="display:block">
+                    <div class="form-row">
+                        <div class="form-row txt-center">
+                            <a class="a-meter-title">Order Date</a>
+                        </div>
+                        <hr />
+                        <a class="a-meter-sub-title">Customer</a>
+                        <br />
+                        <a class="a-meter-text-data">Arief</a>
+                        <br />
+                        <a class="a-meter-sub-title">Supplier</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <hr />
+                        <!-- Detail Data Start Here -->
+                        <a class="a-meter-sub-title">Order No</a>
+                        <br />
+                        <a class="a-meter-text-data">HQ-001/Example</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Order Type</a>
+                        <br />
+                        <a class="a-meter-text-data">Shipping Order</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Date Created</a>
+                        <br />
+                        <a class="a-meter-text-data">26/04/2018</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Purchase No</a>
+                        <br />
+                        <a class="a-meter-text-data">Example/012/ABC</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Purchase Value</a>
+                        <br />
+                        <a class="a-meter-text-data">10.00</a>
+                        <!-- Detail Data End Here -->
                     </div>
-                    <hr />
-                    <a class="a-meter-sub-title">Customer</a>
-                    <br />
-                    <a class="a-meter-text-data">Arief</a>
-                    <br />
-                    <a class="a-meter-sub-title">Supplier</a>
-                    <br />
-                    <a class="a-meter-text-data">FedEx</a>
-                    <hr />
-                    <!-- Detail Data Start Here -->
-                    <a class="a-meter-sub-title">Order No</a>
-                    <br />
-                    <a class="a-meter-text-data">HQ-001/Example</a>
-                    <br />
-                    <br />
-                    <a class="a-meter-sub-title">Order Type</a>
-                    <br />
-                    <a class="a-meter-text-data">Shipping Order</a>
-                    <br />
-                    <br />
-                    <a class="a-meter-sub-title">Date Created</a>
-                    <br />
-                    <a class="a-meter-text-data">26/04/2018</a>
-                    <br />
-                    <br />
-                    <a class="a-meter-sub-title">Purchase No</a>
-                    <br />
-                    <a class="a-meter-text-data">Example/012/ABC</a>
-                    <br />
-                    <br />
-                    <a class="a-meter-sub-title">Purchase Value</a>
-                    <br />
-                    <a class="a-meter-text-data">10.00</a>
-                    <!-- Detail Data End Here -->
                 </div>
+
+                <div id="PageWHReceived" class="AzPagination-Container" style="display:none">
+                    <div class="form-row">
+                        <div class="form-row txt-center">
+                            <a class="a-meter-title">Warehouse Received Note</a>
+                        </div>
+                        <hr />
+                        <a class="a-meter-sub-title">Customer</a>
+                        <br />
+                        <a class="a-meter-text-data">Arief</a>
+                        <br />
+                        <a class="a-meter-sub-title">Supplier</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <hr />
+                        <!-- Detail Data Start Here -->
+                        <a class="a-meter-sub-title">Received Date</a>
+                        <br />
+                        <a class="a-meter-text-data">22/03/2018</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Total Carton</a>
+                        <br />
+                        <a class="a-meter-text-data">-</a>
+                        <!-- Detail Data End Here -->
+                    </div>
+                </div>
+
+                <div id="PageDeliveryArr" class="AzPagination-Container" style="display:none">
+                    <div class="form-row">
+                        <div class="form-row txt-center">
+                            <a class="a-meter-title">Delivery Arrangement</a>
+                        </div>
+                        <hr />
+                        <a class="a-meter-sub-title">Customer</a>
+                        <br />
+                        <a class="a-meter-text-data">Arief</a>
+                        <br />
+                        <a class="a-meter-sub-title">Supplier</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <hr />
+                        <!-- Detail Data Start Here -->
+                        <a class="a-meter-sub-title">Contact Person</a>
+                        <br />
+                        <a class="a-meter-text-data">Harry</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Contact Number</a>
+                        <br />
+                        <a class="a-meter-text-data">012-3851190</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Address</a>
+                        <br />
+                        <a class="a-meter-text-data">Jalan Persiaran Apec</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">City</a>
+                        <br />
+                        <a class="a-meter-text-data">Cyberjaya</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Postcode</a>
+                        <br />
+                        <a class="a-meter-text-data">55310</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">State</a>
+                        <br />
+                        <a class="a-meter-text-data">Selangor</a>
+                        <br />
+                        <br />
+                        <a class="a-meter-sub-title">Country</a>
+                        <br />
+                        <a class="a-meter-text-data">Malaysia</a>
+                        <!-- Detail Data End Here -->
+                    </div>
+                </div>
+
+                <div id="PageDelivery" class="AzPagination-Container" style="display:none">
+                    <div class="form-row">
+                        <div class="form-row txt-center">
+                            <a class="a-meter-title">Delivery</a>
+                        </div>
+                        <hr />
+                        <a class="a-meter-sub-title">Customer</a>
+                        <br />
+                        <a class="a-meter-text-data">Arief</a>
+                        <br />
+                        <a class="a-meter-sub-title">Supplier</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <hr />
+                        <!-- Detail Data Start Here -->                 
+                        <!-- Detail Data End Here -->
+                    </div>
+                </div>
+
             </div>
 
             <!-- Main Content End Here -->
@@ -166,6 +265,11 @@
     <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
 
     <script>
+        //Az Global Var For Page//
+        var AzPage1 = document.getElementById("PageOrderDate"), 
+        AzPage2 = document.getElementById("PageWHReceived"), 
+        AzPage3 = document.getElementById("PageDeliveryArr"), 
+        AzPage4 = document.getElementById("PageDelivery");
         function StartedStep() {
             var elem = document.getElementById("meter-bar");
             var width = 0;
@@ -173,9 +277,13 @@
             function frame() {
                 if (width >= 0.1) {
                     clearInterval(id);
+                    AzPage1.style.display = "block";
                 } else {
                     width++;
                     elem.style.width = width + '%';
+                    AzPage2.style.display = "none";
+                    AzPage3.style.display = "none";
+                    AzPage4.style.display = "none";
                 }
             }
         }
@@ -186,9 +294,13 @@
             function frame() {
                 if (width >= 25) {
                     clearInterval(id);
+                    AzPage2.style.display = "block"
                 } else {
                     width++;
                     elem.style.width = width + '%';
+                    AzPage1.style.display = "none";
+                    AzPage3.style.display = "none";
+                    AzPage4.style.display = "none";
                 }
             }
         }
@@ -199,9 +311,13 @@
             function frame() {
                 if (width >= 50) {
                     clearInterval(id);
+                    AzPage3.style.display = "block"
                 } else {
                     width++;
                     elem.style.width = width + '%';
+                    AzPage1.style.display = "none";
+                    AzPage2.style.display = "none";
+                    AzPage4.style.display = "none";
                 }
             }
         }
@@ -212,9 +328,13 @@
             function frame() {
                 if (width >= 75) {
                     clearInterval(id);
+                    AzPage4.style.display = "block"
                 } else {
                     width++;
                     elem.style.width = width + '%';
+                    AzPage1.style.display = "none";
+                    AzPage2.style.display = "none";
+                    AzPage3.style.display = "none";
                 }
             }
         }