KoPKB/kaunter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Improve driver download implementations

Browse Source
This commit is contained in:
afiq.hamzah
2023-03-09 16:39:45 +08:00
parent 5eebf1e24e
commit 9adccf5728
4 changed files with 253 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/iris-mykad-websocket-client-api.js
Vendored
+1 -1
View File
@@ -37,7 +37,7 @@ WebSocketManager = {
wsocket.close(); wsocket.close();
Swal.fire({ Swal.fire({
icon: 'error', icon: 'error',
title: 'MyKad driver/services not found, please install driver', title: 'MyKad driver/services tidak dapat dikesanl, sila pasang driver',
html: ` html: `
<div class="mt-2"> <div class="mt-2">
<button type="button" class="btn-download-driver btn btn-outline-secondary btn-lg mb-2"> <button type="button" class="btn-download-driver btn btn-outline-secondary btn-lg mb-2">
resources/views/customers/index.blade.php
+1 -1
View File
@@ -1275,7 +1275,7 @@
// mycard-read endpoint initialization // mycard-read endpoint initialization
let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}"; let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}";
let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}"; 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>
<script src="{{ asset('js/iris-mykad-websocket-client-api.js') }}"></script> <script src="{{ asset('js/iris-mykad-websocket-client-api.js') }}"></script>
<script src="{{ asset('js/mykad-reader-customer.js') }}"></script> <script src="{{ asset('js/mykad-reader-customer.js') }}"></script>
resources/views/supports/driver/mykad-reader/download.blade.php
+247
View File
@@ -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>
routes/web.php
+4 -1
View File
@@ -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('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'); return Storage::disk('supports')->download('MykadReaderDriver.zip');
}])->middleware('auth','teller'); }])->middleware('auth','teller');