mirror of
https://github.com/hotspotbilling/phpnuxbill.git
synced 2024-09-20 06:46:22 +08:00
Fix QRCode Scanner
This commit is contained in:
Ibnu Maksum
parent
f1a9ad6d63
commit
b24ad24e89
281
scan/index.html
281
scan/index.html
|
|
@ -1,281 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>QR Scanner</title>
|
||||
<style>
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: auto !important
|
||||
}
|
||||
|
||||
#reload {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
background-color: #0336FF;
|
||||
color: #f3f4f5;
|
||||
border-radius: 3px;
|
||||
width: 150px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0336FF
|
||||
}
|
||||
|
||||
.progress {
|
||||
padding: 10px;
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
#camera {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
#camera:after,
|
||||
#camera:before,
|
||||
#camera>:first-child:after,
|
||||
#camera>:first-child:before {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-color: red;
|
||||
border-style: solid;
|
||||
content: ' '
|
||||
}
|
||||
|
||||
#camera:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px 0 0 5px
|
||||
}
|
||||
|
||||
#camera:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 5px 5px 0 0
|
||||
}
|
||||
|
||||
#camera>:first-child:before {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 5px 5px 0
|
||||
}
|
||||
|
||||
#camera>:first-child:after {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-width: 0 0 5px 5px
|
||||
}
|
||||
|
||||
#camera-inside {
|
||||
padding: 10px;
|
||||
margin-bottom: -5px
|
||||
}
|
||||
|
||||
#hasil {
|
||||
font-size: 20px;
|
||||
font-weight: 600px;
|
||||
background-color: #76ff03;
|
||||
color: #202020
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="llqrcode.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<center>
|
||||
<div id="main">
|
||||
<div id="mainbody">
|
||||
<div class="progress">
|
||||
<div id="hasil"></div>
|
||||
</div>
|
||||
<div id="camera">
|
||||
<div id="camera-inside"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="reload" onclick="location.reload();">Refresh Camera</div>
|
||||
<p><small>Point Camera to Barcode</small></p>
|
||||
<br>
|
||||
</center>
|
||||
<canvas style="display:none;" id="qr-canvas" width="800" height="600"></canvas>
|
||||
<script type="text/javascript">
|
||||
function getAllUrlParams(e) {
|
||||
var t = e ? e.split("?")[1] : window.location.search.slice(1),
|
||||
a = {};
|
||||
if (t)
|
||||
for (var n = (t = t.split("#")[0]).split("&"), o = 0; o < n.length; o++) {
|
||||
var i = n[o].split("="),
|
||||
r = void 0,
|
||||
d = i[0].replace(/\[\d*\]/, function (e) {
|
||||
return (r = e.slice(1, -1)), "";
|
||||
}),
|
||||
s = void 0 === i[1] || i[1];
|
||||
a[(d = d.toLowerCase())]
|
||||
? ("string" == typeof a[d] && (a[d] = [a[d]]),
|
||||
void 0 === r ? a[d].push(s) : (a[d][r] = s))
|
||||
: (a[d] = s);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
var gCtx = null,
|
||||
gCanvas = null,
|
||||
c = 0,
|
||||
stype = 0,
|
||||
gUM = !1,
|
||||
webkit = !1,
|
||||
moz = !1,
|
||||
v = null,
|
||||
imghtml =
|
||||
'<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas><div id="imghelp">drag and drop a QRCode here<br>or select a file<input type="file" onchange="handleFiles(this.files)"/></div></div>',
|
||||
vidhtml = '<video id="v" autoplay></video>';
|
||||
function dragenter(e) {
|
||||
e.stopPropagation(), e.preventDefault();
|
||||
}
|
||||
function dragover(e) {
|
||||
e.stopPropagation(), e.preventDefault();
|
||||
}
|
||||
function drop(e) {
|
||||
e.stopPropagation(), e.preventDefault();
|
||||
var t = e.dataTransfer,
|
||||
a = t.files;
|
||||
a.length > 0
|
||||
? handleFiles(a)
|
||||
: t.getData("URL") && qrcode.decode(t.getData("URL"));
|
||||
}
|
||||
function handleFiles(e) {
|
||||
for (var t = 0; t < e.length; t++) {
|
||||
var a = new FileReader();
|
||||
(a.onload =
|
||||
(e[t],
|
||||
function (e) {
|
||||
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height),
|
||||
qrcode.decode(e.target.result);
|
||||
})),
|
||||
a.readAsDataURL(e[t]);
|
||||
}
|
||||
}
|
||||
function initCanvas(e, t) {
|
||||
((gCanvas = document.getElementById("qr-canvas")).style.width = e + "px"),
|
||||
(gCanvas.style.height = t + "px"),
|
||||
(gCanvas.width = e),
|
||||
(gCanvas.height = t),
|
||||
(gCtx = gCanvas.getContext("2d")).clearRect(0, 0, e, t);
|
||||
}
|
||||
function captureToCanvas() {
|
||||
if (1 == stype && gUM)
|
||||
try {
|
||||
gCtx.drawImage(v, 0, 0);
|
||||
try {
|
||||
qrcode.decode();
|
||||
} catch (e) {
|
||||
console.log(e), setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e), setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
}
|
||||
function htmlEntities(e) {
|
||||
return String(e)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
function read(e) {
|
||||
(document.getElementById("hasil").innerHTML =
|
||||
e),
|
||||
(window.location = unescape(getAllUrlParams().back) + e)
|
||||
;
|
||||
}
|
||||
function isCanvasSupported() {
|
||||
var e = document.createElement("canvas");
|
||||
return !(!e.getContext || !e.getContext("2d"));
|
||||
}
|
||||
function success(e) {
|
||||
(v.srcObject = e), v.play(), (gUM = !0), setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
function error(e) {
|
||||
gUM = !1;
|
||||
}
|
||||
function load() {
|
||||
isCanvasSupported() && window.File && window.FileReader
|
||||
? (initCanvas(800, 600),
|
||||
(qrcode.callback = read),
|
||||
(document.getElementById("mainbody").style.display = "inline"),
|
||||
setwebcam())
|
||||
: ((document.getElementById("mainbody").style.display = "inline"),
|
||||
(document.getElementById("mainbody").innerHTML =
|
||||
'<p id="mp1">QR code scanner for HTML5 capable browsers</p><br><br><p id="mp2">sorry your browser is not supported</p><br><br><p id="mp1">try <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> or <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> or <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>'));
|
||||
}
|
||||
function setwebcam() {
|
||||
var e = !0;
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
|
||||
try {
|
||||
navigator.mediaDevices.enumerateDevices().then(function (t) {
|
||||
t.forEach(function (t) {
|
||||
"videoinput" === t.kind &&
|
||||
t.label.toLowerCase().search("back") > -1 &&
|
||||
(e = {
|
||||
deviceId: { exact: t.deviceId },
|
||||
facingMode: "environment",
|
||||
}),
|
||||
console.log(t.kind + ": " + t.label + " id = " + t.deviceId);
|
||||
}),
|
||||
setwebcam2(e);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
else console.log("no navigator.mediaDevices.enumerateDevices"), setwebcam2(e);
|
||||
}
|
||||
function setwebcam2(e) {
|
||||
if ((console.log(e), 1 != stype)) {
|
||||
var t = navigator;
|
||||
(document.getElementById("camera-inside").innerHTML = vidhtml),
|
||||
(v = document.getElementById("v")),
|
||||
t.mediaDevices.getUserMedia
|
||||
? t.mediaDevices
|
||||
.getUserMedia({ video: e, audio: !1 })
|
||||
.then(function (e) {
|
||||
success(e);
|
||||
})
|
||||
.catch(function (e) {
|
||||
e(e);
|
||||
})
|
||||
: t.getUserMedia
|
||||
? ((webkit = !0),
|
||||
t.getUserMedia({ video: e, audio: !1 }, success, error))
|
||||
: t.webkitGetUserMedia &&
|
||||
((webkit = !0),
|
||||
t.webkitGetUserMedia({ video: e, audio: !1 }, success, error)),
|
||||
(stype = 1),
|
||||
setTimeout(captureToCanvas, 500);
|
||||
} else setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
function setimg() {
|
||||
if (((document.getElementById("result").innerHTML = ""), 2 != stype)) {
|
||||
(document.getElementById("camera-inside").innerHTML = imghtml),
|
||||
(document.getElementById("qrimg").style.opacity = 1),
|
||||
(document.getElementById("webcamimg").style.opacity = 0.2);
|
||||
var e = document.getElementById("qrfile");
|
||||
e.addEventListener("dragenter", dragenter, !1),
|
||||
e.addEventListener("dragover", dragover, !1),
|
||||
e.addEventListener("drop", drop, !1),
|
||||
(stype = 2);
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
80
scan/index.php
Normal file
80
scan/index.php
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>QRCode Scanner</title>
|
||||
<style>
|
||||
button {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="qr-reader" style="width:100%; height:auto"></div>
|
||||
<div id="qr-reader-results"></div>
|
||||
<script src="qrcode.min.js"></script>
|
||||
<script>
|
||||
function docReady(fn) {
|
||||
// see if DOM is already available
|
||||
if (document.readyState === "complete" ||
|
||||
document.readyState === "interactive") {
|
||||
// call on next available tick
|
||||
setTimeout(fn, 1);
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", fn);
|
||||
}
|
||||
}
|
||||
|
||||
function getAllUrlParams(e) {
|
||||
var t = e ? e.split("?")[1] : window.location.search.slice(1),
|
||||
a = {};
|
||||
if (t)
|
||||
for (var n = (t = t.split("#")[0]).split("&"), o = 0; o < n.length; o++) {
|
||||
var i = n[o].split("="),
|
||||
r = void 0,
|
||||
d = i[0].replace(/\[\d*\]/, function (e) {
|
||||
return (r = e.slice(1, -1)), "";
|
||||
}),
|
||||
s = void 0 === i[1] || i[1];
|
||||
a[(d = d.toLowerCase())]
|
||||
? ("string" == typeof a[d] && (a[d] = [a[d]]),
|
||||
void 0 === r ? a[d].push(s) : (a[d][r] = s))
|
||||
: (a[d] = s);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
docReady(function() {
|
||||
var resultContainer = document.getElementById('qr-reader-results');
|
||||
var lastResult, countResults = 0;
|
||||
function onScanSuccess(decodedText, decodedResult) {
|
||||
if (decodedText !== lastResult) {
|
||||
++countResults;
|
||||
lastResult = decodedText;
|
||||
if(getAllUrlParams().back != undefined){
|
||||
window.location = unescape(getAllUrlParams().back) + escape(decodedText);
|
||||
}else{
|
||||
if(decodedText.startsWith('http')){
|
||||
window.location = decodedText;
|
||||
}else{
|
||||
alert(decodedText);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var html5QrcodeScanner = new Html5QrcodeScanner(
|
||||
"qr-reader", {
|
||||
fps: 10,
|
||||
qrbox: 250
|
||||
});
|
||||
html5QrcodeScanner.render(onScanSuccess);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
1
scan/qrcode.min.js
vendored
Normal file
1
scan/qrcode.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -312,7 +312,6 @@
|
|||
"Reminder_3_days": "Reminder 3 days",
|
||||
"Reminder_1_day": "Reminder 1 day",
|
||||
"PPPOE_Password": "PPPOE Password",
|
||||
"User_Cannot_change_this__only_admin__if_it_Empty_it_will_use_user_password": "User Cannot change this, only admin. if it Empty it will use user password",
|
||||
"Invoice_Balance_Message": "Invoice Balance Message",
|
||||
"Invoice_Notification_Payment": "Invoice Notification Payment",
|
||||
"Balance_Notification_Payment": "Balance Notification Payment",
|
||||
|
|
@ -696,5 +695,7 @@
|
|||
"Routers_Geo_Location_Information": "Routers Geo Location Information",
|
||||
"Coverage": "Coverage",
|
||||
"PPPoE_Username_already_used_by_another_customer": "PPPoE Username already used by another customer",
|
||||
"just_now": "just now"
|
||||
"just_now": "just now",
|
||||
"Not_Working_for_freeradius": "Not Working for freeradius",
|
||||
"User_Cannot_change_this__only_admin__if_it_Empty_it_will_use_Customer_Credentials": "User Cannot change this, only admin. if it Empty it will use Customer Credentials"
|
||||
}
|
||||
|
|
@ -99,24 +99,25 @@
|
|||
<label class="col-md-3 control-label">{Lang::T('Username')}</label>
|
||||
<div class="col-md-9">
|
||||
<input type="username" class="form-control" id="pppoe_username" name="pppoe_username">
|
||||
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-3 control-label">{Lang::T('Password')}</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" class="form-control" id="pppoe_password" name="pppoe_password"
|
||||
onmouseleave="this.type = 'password'"
|
||||
onmouseenter="this.type = 'text'">
|
||||
onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-3 control-label">Local IP</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="pppoe_ip" name="pppoe_ip">
|
||||
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help-block">
|
||||
{Lang::T('User Cannot change this, only admin. if it Empty it will use user password')}
|
||||
{Lang::T('User Cannot change this, only admin. if it Empty it will use Customer Credentials')}
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-heading"></div>
|
||||
|
|
@ -132,9 +133,12 @@
|
|||
</div>
|
||||
<div class="form-group" id="method" style="display: none;">
|
||||
<label class="col-md-3 control-label">{Lang::T('Method')}</label>
|
||||
<label class="col-md-3 control-label"><input type="checkbox" name="sms" value="1"> {Lang::T('SMS')}</label>
|
||||
<label class="col-md-2 control-label"><input type="checkbox" name="wa" value="1"> {Lang::T('WA')}</label>
|
||||
<label class="col-md-2 control-label"><input type="checkbox" name="email" value="1"> {Lang::T('Email')}</label>
|
||||
<label class="col-md-3 control-label"><input type="checkbox" name="sms" value="1">
|
||||
{Lang::T('SMS')}</label>
|
||||
<label class="col-md-2 control-label"><input type="checkbox" name="wa" value="1">
|
||||
{Lang::T('WA')}</label>
|
||||
<label class="col-md-2 control-label"><input type="checkbox" name="email" value="1">
|
||||
{Lang::T('Email')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,8 +171,7 @@
|
|||
<div class="form-group">
|
||||
<label class="col-md-3 control-label">{Lang::T('City')}</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="city" name="city"
|
||||
value="{$d['city']}">
|
||||
<input type="text" class="form-control" id="city" name="city" value="{$d['city']}">
|
||||
<small class="form-text text-muted">{Lang::T('City of Resident')}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -183,16 +186,14 @@
|
|||
<div class="form-group">
|
||||
<label class="col-md-3 control-label">{Lang::T('State')}</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="state" name="state"
|
||||
value="{$d['state']}">
|
||||
<input type="text" class="form-control" id="state" name="state" value="{$d['state']}">
|
||||
<small class="form-text text-muted">{Lang::T('State of Resident')}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-md-3 control-label">{Lang::T('Zip')}</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="zip" name="zip"
|
||||
value="{$d['zip']}">
|
||||
<input type="text" class="form-control" id="zip" name="zip" value="{$d['zip']}">
|
||||
<small class="form-text text-muted">{Lang::T('Zip Code')}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -294,7 +295,7 @@
|
|||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
var marker = L.marker([lat, lon]).addTo(map);
|
||||
map.on('click', function(e){
|
||||
map.on('click', function(e) {
|
||||
var coord = e.latlng;
|
||||
var lat = coord.lat;
|
||||
var lng = coord.lng;
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@
|
|||
<div class="col-md-9">
|
||||
<input type="username" class="form-control" id="pppoe_username" name="pppoe_username"
|
||||
value="{$d['pppoe_username']}">
|
||||
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -138,10 +139,11 @@
|
|||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="pppoe_ip" name="pppoe_ip"
|
||||
value="{$d['pppoe_ip']}">
|
||||
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help-block">
|
||||
{Lang::T('User Cannot change this, only admin. if it Empty it will use user password')}
|
||||
{Lang::T('User Cannot change this, only admin. if it Empty it will use Customer Credentials')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"version": "2024.8.6.1"
|
||||
"version": "2024.8.6.2"
|
||||
}
|
||||
Loading…
Reference in a new issue