afiq.hamzah
248 lines
6.9 KiB
PHP
248 lines
6.9 KiB
PHP
<!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>
|