kevinowino869/mitrobill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix QRCode Scanner

Browse Source
This commit is contained in:
Ibnu Maksum 2024-08-07 13:51:27 +07:00
parent f1a9ad6d63
commit b24ad24e89
No known key found for this signature in database
GPG Key ID: 7FC82848810579E5
8 changed files with 144 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
scan/index.html
View File

@ -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, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}
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
View 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>

1
scan/llqrcode.js
View File

File diff suppressed because one or more lines are too long

1
scan/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
system/lan/english.json
View File

@ -312,7 +312,6 @@
"Reminder_3_days": "Reminder 3 days", "Reminder_3_days": "Reminder 3 days",
"Reminder_1_day": "Reminder 1 day", "Reminder_1_day": "Reminder 1 day",
"PPPOE_Password": "PPPOE Password", "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_Balance_Message": "Invoice Balance Message",
"Invoice_Notification_Payment": "Invoice Notification Payment", "Invoice_Notification_Payment": "Invoice Notification Payment",
"Balance_Notification_Payment": "Balance Notification Payment", "Balance_Notification_Payment": "Balance Notification Payment",
@ -696,5 +695,7 @@
"Routers_Geo_Location_Information": "Routers Geo Location Information", "Routers_Geo_Location_Information": "Routers Geo Location Information",
"Coverage": "Coverage", "Coverage": "Coverage",
"PPPoE_Username_already_used_by_another_customer": "PPPoE Username already used by another customer", "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"
} }

111
ui/ui/customers-add.tpl
View File

@ -12,7 +12,7 @@
<div class="input-group"> <div class="input-group">
{if $_c['country_code_phone'] != ''} {if $_c['country_code_phone'] != ''}
<span class="input-group-addon" id="basic-addon1"><i <span class="input-group-addon" id="basic-addon1"><i
class="glyphicon glyphicon-phone-alt"></i></span> class="glyphicon glyphicon-phone-alt"></i></span>
{else} {else}
<span class="input-group-addon" id="basic-addon1"><i <span class="input-group-addon" id="basic-addon1"><i
class="glyphicon glyphicon-user"></i></span> class="glyphicon glyphicon-user"></i></span>
@ -89,7 +89,7 @@
<div class="col-md-9"> <div class="col-md-9">
<input name="coordinates" id="coordinates" class="form-control" value="" <input name="coordinates" id="coordinates" class="form-control" value=""
placeholder="6.465422, 3.406448"> placeholder="6.465422, 3.406448">
<div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div> <div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div>
</div> </div>
</div> </div>
</div> </div>
@ -99,24 +99,25 @@
<label class="col-md-3 control-label">{Lang::T('Username')}</label> <label class="col-md-3 control-label">{Lang::T('Username')}</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="username" class="form-control" id="pppoe_username" name="pppoe_username"> <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> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-3 control-label">{Lang::T('Password')}</label> <label class="col-md-3 control-label">{Lang::T('Password')}</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="password" class="form-control" id="pppoe_password" name="pppoe_password" <input type="password" class="form-control" id="pppoe_password" name="pppoe_password"
onmouseleave="this.type = 'password'" onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
onmouseenter="this.type = 'text'">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-3 control-label">Local IP</label> <label class="col-md-3 control-label">Local IP</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" id="pppoe_ip" name="pppoe_ip"> <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>
</div> </div>
<span class="help-block"> <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> </span>
</div> </div>
<div class="panel-heading"></div> <div class="panel-heading"></div>
@ -132,9 +133,12 @@
</div> </div>
<div class="form-group" id="method" style="display: none;"> <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">{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-3 control-label"><input type="checkbox" name="sms" value="1">
<label class="col-md-2 control-label"><input type="checkbox" name="wa" value="1"> {Lang::T('WA')}</label> {Lang::T('SMS')}</label>
<label class="col-md-2 control-label"><input type="checkbox" name="email" value="1"> {Lang::T('Email')}</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> </div>
</div> </div>
@ -167,8 +171,7 @@
<div class="form-group"> <div class="form-group">
<label class="col-md-3 control-label">{Lang::T('City')}</label> <label class="col-md-3 control-label">{Lang::T('City')}</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" id="city" name="city" <input type="text" class="form-control" id="city" name="city" value="{$d['city']}">
value="{$d['city']}">
<small class="form-text text-muted">{Lang::T('City of Resident')}</small> <small class="form-text text-muted">{Lang::T('City of Resident')}</small>
</div> </div>
</div> </div>
@ -183,16 +186,14 @@
<div class="form-group"> <div class="form-group">
<label class="col-md-3 control-label">{Lang::T('State')}</label> <label class="col-md-3 control-label">{Lang::T('State')}</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" id="state" name="state" <input type="text" class="form-control" id="state" name="state" value="{$d['state']}">
value="{$d['state']}">
<small class="form-text text-muted">{Lang::T('State of Resident')}</small> <small class="form-text text-muted">{Lang::T('State of Resident')}</small>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-3 control-label">{Lang::T('Zip')}</label> <label class="col-md-3 control-label">{Lang::T('Zip')}</label>
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" id="zip" name="zip" <input type="text" class="form-control" id="zip" name="zip" value="{$d['zip']}">
value="{$d['zip']}">
<small class="form-text text-muted">{Lang::T('Zip Code')}</small> <small class="form-text text-muted">{Lang::T('Zip Code')}</small>
</div> </div>
</div> </div>
@ -208,37 +209,37 @@
</center> </center>
</form> </form>
{literal} {literal}
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var sendWelcomeCheckbox = document.getElementById('send_welcome_message'); var sendWelcomeCheckbox = document.getElementById('send_welcome_message');
var methodSection = document.getElementById('method'); var methodSection = document.getElementById('method');
function toggleMethodSection() { function toggleMethodSection() {
if (sendWelcomeCheckbox.checked) { if (sendWelcomeCheckbox.checked) {
methodSection.style.display = 'block'; methodSection.style.display = 'block';
} else { } else {
methodSection.style.display = 'none'; methodSection.style.display = 'none';
}
}
toggleMethodSection();
sendWelcomeCheckbox.addEventListener('change', toggleMethodSection);
document.querySelector('form').addEventListener('submit', function(event) {
if (sendWelcomeCheckbox.checked) {
var methodCheckboxes = methodSection.querySelectorAll('input[type="checkbox"]');
var oneChecked = Array.from(methodCheckboxes).some(function(checkbox) {
return checkbox.checked;
});
if (!oneChecked) {
event.preventDefault();
alert('Please choose at least one method.');
methodSection.focus();
} }
} }
toggleMethodSection();
sendWelcomeCheckbox.addEventListener('change', toggleMethodSection);
document.querySelector('form').addEventListener('submit', function(event) {
if (sendWelcomeCheckbox.checked) {
var methodCheckboxes = methodSection.querySelectorAll('input[type="checkbox"]');
var oneChecked = Array.from(methodCheckboxes).some(function(checkbox) {
return checkbox.checked;
});
if (!oneChecked) {
event.preventDefault();
alert('Please choose at least one method.');
methodSection.focus();
}
}
});
}); });
});
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
@ -288,20 +289,20 @@
function setupMap(lat, lon) { function setupMap(lat, lon) {
var map = L.map('map').setView([lat, lon], 13); var map = L.map('map').setView([lat, lon], 13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
attribution: attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>', '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd', subdomains: 'abcd',
maxZoom: 20 maxZoom: 20
}).addTo(map); }).addTo(map);
var marker = L.marker([lat, lon]).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 coord = e.latlng;
var lat = coord.lat; var lat = coord.lat;
var lng = coord.lng; var lng = coord.lng;
var newLatLng = new L.LatLng(lat, lng); var newLatLng = new L.LatLng(lat, lng);
marker.setLatLng(newLatLng); marker.setLatLng(newLatLng);
$('#coordinates').val(lat + ',' + lng); $('#coordinates').val(lat + ',' + lng);
}); });
} }
window.onload = function() { window.onload = function() {
getLocation(); getLocation();

4
ui/ui/customers-edit.tpl
View File

@ -123,6 +123,7 @@
<div class="col-md-9"> <div class="col-md-9">
<input type="username" class="form-control" id="pppoe_username" name="pppoe_username" <input type="username" class="form-control" id="pppoe_username" name="pppoe_username"
value="{$d['pppoe_username']}"> value="{$d['pppoe_username']}">
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -138,10 +139,11 @@
<div class="col-md-9"> <div class="col-md-9">
<input type="text" class="form-control" id="pppoe_ip" name="pppoe_ip" <input type="text" class="form-control" id="pppoe_ip" name="pppoe_ip"
value="{$d['pppoe_ip']}"> value="{$d['pppoe_ip']}">
<span class="help-block">{Lang::T('Not Working for freeradius')}</span>
</div> </div>
</div> </div>
<span class="help-block"> <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> </span>
</div> </div>
</div> </div>

2
version.json
View File

@ -1,3 +1,3 @@
{ {
"version": "2024.8.6.1" "version": "2024.8.6.2"
} }