From 9adccf57287b790f719640700d236cc8c1e33ac5 Mon Sep 17 00:00:00 2001
From: "afiq.hamzah" <afiq.hamzah@pkb.net.my>
Date: Thu, 9 Mar 2023 16:39:45 +0800
Subject: [PATCH] Improve driver download implementations

---
 public/js/iris-mykad-websocket-client-api.js  |   2 +-
 resources/views/customers/index.blade.php     |   2 +-
 .../driver/mykad-reader/download.blade.php    | 247 ++++++++++++++++++
 routes/web.php                                |   5 +-
 4 files changed, 253 insertions(+), 3 deletions(-)
 create mode 100644 resources/views/supports/driver/mykad-reader/download.blade.php
diff --git a/public/js/iris-mykad-websocket-client-api.js b/public/js/iris-mykad-websocket-client-api.js
index 181dfe5..4bb29b6 100644
--- a/public/js/iris-mykad-websocket-client-api.js
+++ b/public/js/iris-mykad-websocket-client-api.js
@@ -37,7 +37,7 @@ WebSocketManager = {
             wsocket.close();
             Swal.fire({
                 icon: 'error',
-                title: 'MyKad driver/services not found, please install driver',
+                title: 'MyKad driver/services tidak dapat dikesanl, sila pasang driver',
                 html: `
                 <div class="mt-2">
                             <button type="button" class="btn-download-driver btn btn-outline-secondary btn-lg mb-2">
diff --git a/resources/views/customers/index.blade.php b/resources/views/customers/index.blade.php
index 8e40ce3..934d9bf 100644
--- a/resources/views/customers/index.blade.php
+++ b/resources/views/customers/index.blade.php
@@ -1275,7 +1275,7 @@
     // mycard-read endpoint initialization
     let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}";
     let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}";
-    let mykad_reader_driver_endpoint = "{{ route('mykadreader.driver.download') }}";
+    let mykad_reader_driver_endpoint = "{{ route('mykadreader.driver') }}";
 </script>
 <script src="{{ asset('js/iris-mykad-websocket-client-api.js') }}"></script>
 <script src="{{ asset('js/mykad-reader-customer.js') }}"></script>
diff --git a/resources/views/supports/driver/mykad-reader/download.blade.php b/resources/views/supports/driver/mykad-reader/download.blade.php
new file mode 100644
index 0000000..6a78d4e
--- /dev/null
+++ b/resources/views/supports/driver/mykad-reader/download.blade.php
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Muat Turun</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"
+        integrity="sha512-+uTBQREQVLccPeGbB3Q0R5TC/1mfAoRg9fomTL3iOb+kpCCWS5WjMdM1dYE1e1dB/pxEi0Zc2VdFJcCT72QyuA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
+
+        .container-countdown {
+            margin: auto;
+            width: 400px;
+        }
+
+        .path--background {
+            fill: rgb(34, 213, 201);
+            stroke: #fff;
+            stroke-width: 0px;
+        }
+
+        .pulse {
+            fill: rgb(255, 74, 74) !important;
+        }
+
+        .path--foreground {
+            fill: #eee;
+            stroke: #eee;
+            stroke-width: 2px;
+        }
+
+        .label {
+            font: 90px "Open Sans";
+            font-weight: 900;
+            text-anchor: middle;
+            fill: rgb(34, 213, 201);
+        }
+
+
+        h1 {
+            font: "Open Sans";
+            font-weight: 900;
+            text-anchor: middle;
+        }
+
+        .container-page {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* for single line flex container */
+            align-content: center;
+            /* for multi-line flex container */
+           height: 100vh;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container-page">
+        <div class="container-countdown"></div>
+    </div>
+    <script>
+        var width = 400,
+            height = 400,
+            timePassed = 0,
+            timeLimit = 15;
+
+        var fields = [{
+            value: timeLimit,
+            size: timeLimit,
+            update: function() {
+                return timePassed = timePassed + 1;
+            }
+        }];
+
+        var nilArc = d3.svg.arc()
+            .innerRadius(width / 3 - 133)
+            .outerRadius(width / 3 - 133)
+            .startAngle(0)
+            .endAngle(2 * Math.PI);
+
+        var arc = d3.svg.arc()
+            .innerRadius(width / 3 - 55)
+            .outerRadius(width / 3 - 25)
+            .startAngle(0)
+            .endAngle(function(d) {
+                return ((d.value / d.size) * 2 * Math.PI);
+            });
+
+        var svg = d3.select(".container-countdown").append("svg")
+            .attr("width", width)
+            .attr("height", height);
+
+        var field = svg.selectAll(".field")
+            .data(fields)
+            .enter().append("g")
+            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
+            .attr("class", "field");
+
+        var back = field.append("path")
+            .attr("class", "path path--background")
+            .attr("d", arc);
+
+        var path = field.append("path")
+            .attr("class", "path path--foreground");
+
+        var label = field.append("text")
+            .attr("class", "label")
+            .attr("dy", ".35em");
+
+        addWaitingText();
+
+        (function update() {
+
+            field
+                .each(function(d) {
+                    d.previous = d.value, d.value = d.update(timePassed);
+                });
+
+            path.transition()
+                .ease("elastic")
+                .duration(500)
+                .attrTween("d", arcTween);
+
+            if ((timeLimit - timePassed) <= 10)
+                pulseText();
+            else
+                label
+                .text(function(d) {
+                    return d.size - d.value;
+                });
+
+            if (timePassed <= timeLimit)
+                setTimeout(update, 1000 - (timePassed % 1000));
+            else{
+
+                destroyTimer();
+                destroyWaitingText();
+
+                downloadMyKadDriver()
+                    .then(() => redirectToPagePelanggan());
+
+            }
+
+        })();
+
+        function pulseText() {
+            back.classed("pulse", true);
+            label.classed("pulse", true);
+
+            if ((timeLimit - timePassed) >= 0) {
+                label.style("font-size", "120px")
+                    .attr("transform", "translate(0," + +4 + ")")
+                    .text(function(d) {
+                        return d.size - d.value;
+                    });
+            }
+
+            label.transition()
+                .ease("elastic")
+                .duration(900)
+                .style("font-size", "90px")
+                .attr("transform", "translate(0," + -10 + ")");
+        }
+
+        function destroyTimer() {
+            label.transition()
+                .ease("back")
+                .duration(700)
+                .style("opacity", "0")
+                .style("font-size", "5")
+                .attr("transform", "translate(0," + -40 + ")")
+                .each("end", function() {
+                    field.selectAll("text").remove()
+                });
+
+            path.transition()
+                .ease("back")
+                .duration(700)
+                .attr("d", nilArc);
+
+            back.transition()
+                .ease("back")
+                .duration(700)
+                .attr("d", nilArc)
+                .each("end", function() {
+                    field.selectAll("path").remove()
+                });
+        }
+
+        function arcTween(b) {
+            var i = d3.interpolate({
+                value: b.previous
+            }, b);
+            return function(t) {
+                return arc(i(t));
+            };
+        }
+
+        function addWaitingText()
+        {
+            var waiting_text = document.createElement("h1");
+            waiting_text.innerHTML= "sila tunggu sebentar ... "
+            waiting_text.style.marginTop = "0px";
+            waiting_text.style.textAlign = "center";
+            document.querySelector("svg").after(waiting_text);
+
+        }
+
+        function destroyWaitingText()
+        {
+            var waiting_text = document.querySelector("h1");
+            waiting_text.innerHTML= "";
+        }
+
+        let redirectToPagePelanggan = () => {
+            let pelanggan_url = "{{ url('pelanggan') }}";
+            window.location.href = pelanggan_url
+        };
+
+        function downloadMyKadDriver()
+        {
+            let download_driver_file_url = "{{ route('mykadreader.driver.download') }}";
+
+            let downloadDriverFile = () => {
+                return fetch(download_driver_file_url)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const link = document.createElement("a");
+                        link.href = URL.createObjectURL(blob);
+                        link.download = 'MyKadReaderDriver.zip';
+                        link.click();
+                    })
+                    .catch(e => console.log(e))
+            };
+
+            return downloadDriverFile();
+        }
+
+    </script>
+</body>
+
+</html>
diff --git a/routes/web.php b/routes/web.php
index 3253e3d..4c4acfa 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -377,6 +377,9 @@ Route::get('admin/poskod',['as'=>'admin.poskod','uses'=>'HomeController@poskod']
 
 Route::get('pembeliannotifykomuditi',['as'=>'beli.notifyKomoditi','uses'=>'OperasiController@notifyKomoditi'])->middleware('auth','operasi');
 
-Route::get('supports/driver/mykad-reader',['as'=>'mykadreader.driver.download', function(){
+Route::get('supports/driver/mykad-reader',['as'=>'mykadreader.driver', function(){
+    return view('supports.driver.mykad-reader.download');
+}])->middleware('auth','teller');
+Route::get('supports/driver/mykad-reader/download',['as'=>'mykadreader.driver.download', function(){
    return Storage::disk('supports')->download('MykadReaderDriver.zip');
 }])->middleware('auth','teller');
