WebApp Scanner Final
This commit is contained in:
parent
32cfed9cea
commit
2238f284d3
|
@ -3,6 +3,8 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>ENEI QR Scanner</title>
|
<title>ENEI QR Scanner</title>
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
|
||||||
<script src="./jsQR.js"></script>
|
<script src="./jsQR.js"></script>
|
||||||
<script src="./send.js"></script>
|
<script src="./send.js"></script>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
|
||||||
|
@ -14,11 +16,15 @@
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: 'Ropa Sans', sans-serif;
|
font-family: 'Ropa Sans', sans-serif;
|
||||||
|
font-size: 3pc !important;
|
||||||
color: #333;
|
color: #333;
|
||||||
max-width: 640px;
|
max-width: 95%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
input, select{
|
||||||
|
font-size: 3pc !important;
|
||||||
|
}
|
||||||
|
|
||||||
#githubLink {
|
#githubLink {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -38,8 +44,19 @@
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#videocanvas{
|
||||||
|
width: 100% !important;
|
||||||
|
flex: 1;
|
||||||
|
align-self: center !important;
|
||||||
|
align-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
#canvas {
|
#canvas {
|
||||||
width: 100%;
|
max-width: 75%;
|
||||||
|
max-height: 50%;
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#output {
|
#output {
|
||||||
|
@ -62,14 +79,16 @@
|
||||||
<body>
|
<body>
|
||||||
<h1>ENEI QR Scanner</h1>
|
<h1>ENEI QR Scanner</h1>
|
||||||
<div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
|
<div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
|
||||||
<canvas id="canvas" hidden></canvas>
|
<div id="videocanvas">
|
||||||
|
<canvas id="canvas" hidden></canvas>
|
||||||
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div id="output">
|
<div id="output">
|
||||||
|
|
||||||
<!-- Text input-->
|
<!-- Text input-->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label" for="pontos">Pontos a adicionar</label>
|
<label class="control-label" for="pontos">Pontos a adicionar</label>
|
||||||
<input id="pontos" name="sQR" type="number" placeholder="AABBCC112233" value="5" class="form-control form-control-sm" required="">
|
<input id="pontos" name="sQR" autocomplete="off" type="number" placeholder="AABBCC112233" value="5" class="form-control" required="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Select Basic -->
|
<!-- Select Basic -->
|
||||||
|
@ -79,7 +98,6 @@
|
||||||
<option value="1">[RT] Moelas</option>
|
<option value="1">[RT] Moelas</option>
|
||||||
<option value="2">[RT] 24 Bar</option>
|
<option value="2">[RT] 24 Bar</option>
|
||||||
<option value="3">[RT] What's Up Doc Bar</option>
|
<option value="3">[RT] What's Up Doc Bar</option>
|
||||||
<option value="4">[??] A Chaminé</option>
|
|
||||||
<option value="5">[RT] Nk Noites Karaoke</option>
|
<option value="5">[RT] Nk Noites Karaoke</option>
|
||||||
<option value="6">[RT] RS Café Bar</option>
|
<option value="6">[RT] RS Café Bar</option>
|
||||||
<option value="7">[RT] O Guitarras</option>
|
<option value="7">[RT] O Guitarras</option>
|
||||||
|
@ -103,15 +121,31 @@
|
||||||
<!-- Text input-->
|
<!-- Text input-->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label" for="userQR">Scanned QR</label>
|
<label class="control-label" for="userQR">Scanned QR</label>
|
||||||
<input id="userQR" name="userQR" type="text" placeholder="sendQR" class="form-control form-control-sm input-md" required="">
|
<input id="userQR" name="userQR" autocomplete="off" type="text" placeholder="sendQR" class="form-control input-lg" required="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Button -->
|
<!-- Button -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<button id="send" name="send" class="btn btn-primary" onclick="sendData()">Enviar info</button>
|
<button id="send" name="send" class="btn btn-lg btn-block btn-primary" onclick="sendData()">Enviar info</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
<div id="LoginDiv">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="username">QR Login</label>
|
||||||
|
<input id="LoginQR" name="LoginQR" autocomplete="off" type="text" placeholder="username" class="form-control form-control-sm input-lg" required="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="password">Password</label>
|
||||||
|
<input id="LoginPassword" name="LoginPassword" autocomplete="off" type="password" placeholder="password" class="form-control form-control-sm input-lg" required="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button -->
|
||||||
|
<div class="form-group">
|
||||||
|
<button id="loginbtn" name="login" class="btn btn-lg btn-block btn-primary" onclick="doLogin()">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
@ -122,6 +156,7 @@
|
||||||
var loadingMessage = document.getElementById("loadingMessage");
|
var loadingMessage = document.getElementById("loadingMessage");
|
||||||
var outputContainer = document.getElementById("output");
|
var outputContainer = document.getElementById("output");
|
||||||
var outputData = document.getElementById("userQR");
|
var outputData = document.getElementById("userQR");
|
||||||
|
var LQR = document.getElementById("LoginQR");
|
||||||
|
|
||||||
function drawLine(begin, end, color) {
|
function drawLine(begin, end, color) {
|
||||||
canvas.beginPath();
|
canvas.beginPath();
|
||||||
|
@ -159,6 +194,7 @@
|
||||||
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
|
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
|
||||||
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
|
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
|
||||||
outputData.setAttribute("value", code.data);
|
outputData.setAttribute("value", code.data);
|
||||||
|
LQR.setAttribute("value", code.data);
|
||||||
} else {
|
} else {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,25 +1,101 @@
|
||||||
function sendData(){
|
function sendData(){
|
||||||
var uQR = document.getElementById("userQR").value;
|
var LocIDbox = document.getElementById("location")
|
||||||
var LocID = document.getElementById("location").value;
|
|
||||||
var Pontos = document.getElementById("pontos").value;
|
|
||||||
|
|
||||||
axios.post('https://enei.pt/api/EventLocsVisited/add', {
|
var uQR = document.getElementById("userQR").value;
|
||||||
UserQR: uQR,
|
var LocID = LocIDbox.options[LocIDbox.selectedIndex].value;
|
||||||
EventLocID: LocID,
|
var Pontos = document.getElementById("pontos").value;
|
||||||
pontos:Pontos
|
|
||||||
})
|
axios.defaults.headers.common = {
|
||||||
.then(function (response) {
|
Authorization: "bearer " + Cookies.get().token
|
||||||
if(response.status === 201){
|
};
|
||||||
window.alert("Adicionado com sucesso!!");
|
axios.post('https://enei.pt/api/EventLocsVisited/add', {
|
||||||
}else if(response.status === 400){
|
UserQR: uQR,
|
||||||
window.alert("Erro na API!\nProvavelmente esta equipa já esteve aqui!!");
|
EventLocID: LocID,
|
||||||
} else{
|
pontos:Pontos
|
||||||
window.alert("Erro!");
|
})
|
||||||
console.log(response);
|
.then(function (response) {
|
||||||
}
|
if(response.status === 201){
|
||||||
})
|
window.alert("Adicionado com sucesso!!");
|
||||||
.catch(function (error) {
|
}else if(response.status === 400){
|
||||||
window.alert("erro");
|
window.alert("Erro na API!\nProvavelmente esta equipa já esteve aqui!!");
|
||||||
console.log(error);
|
} else{
|
||||||
});
|
window.alert("Erro!");
|
||||||
}
|
console.log(response);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
window.alert("erro");
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function doLogin(){
|
||||||
|
var loginQR = document.getElementById("LoginQR").value;
|
||||||
|
var loginpassword = document.getElementById("LoginPassword").value;
|
||||||
|
|
||||||
|
//login ticket
|
||||||
|
|
||||||
|
var details = {
|
||||||
|
username: loginQR,
|
||||||
|
password: loginpassword,
|
||||||
|
grant_type: "password"
|
||||||
|
};
|
||||||
|
|
||||||
|
var formBody = [];
|
||||||
|
|
||||||
|
for (var property in details) {
|
||||||
|
var encodedKey = encodeURIComponent(property);
|
||||||
|
|
||||||
|
var encodedValue = encodeURIComponent(details[property]);
|
||||||
|
|
||||||
|
formBody.push(encodedKey + "=" + encodedValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
formBody = formBody.join("&");
|
||||||
|
|
||||||
|
fetch("https://tickets.enei.pt/internal/api/token", {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
|
||||||
|
},
|
||||||
|
|
||||||
|
body: formBody
|
||||||
|
})
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(parsed => {
|
||||||
|
var tokenext = parsed.access_token;
|
||||||
|
//login api enei
|
||||||
|
axios.post('https://enei.pt/api/loginQR', {
|
||||||
|
QRcode: loginQR,
|
||||||
|
token: tokenext
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
if(response.status === 200){
|
||||||
|
window.alert("Login Feito!!");
|
||||||
|
console.log(response.data);
|
||||||
|
Cookies.set('token',response.data.token);
|
||||||
|
location.reload();
|
||||||
|
}else if(response.status === 401){
|
||||||
|
window.alert("Unauthorized!! ");
|
||||||
|
} else{
|
||||||
|
window.alert("Erro!");
|
||||||
|
console.log(response);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
window.alert("erro");
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
console.log(Cookies.get().token);
|
||||||
|
if(Cookies.get().token){
|
||||||
|
console.log("token ja existe");
|
||||||
|
$('#LoginDiv').hide();
|
||||||
|
}else{
|
||||||
|
$('#LoginDiv').show();
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in New Issue