fix: barcode read 샘플 화면 반영

dev
Jonguk. Lim 6 months ago
parent 9446e5e452
commit aade2d437e

26
.gitignore vendored

@ -1,12 +1,34 @@
target/
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**/target/
!**/src/test/**/target/
### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
build/
!**/src/main/**/build/
!**/src/test/**/build/
### VS Code ###
.vscode/
logs/
files/

@ -1,13 +1,7 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<c:set var="prefixName" scope="request">사고마약류폐기관리</c:set>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="ZXing for JS">
<title>QR code reading</title>
@ -17,17 +11,16 @@
href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
<link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null"
href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
</head>
<body>
<script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
<script src="<c:url value="/resources/js/base/base.js?${ver}"/>"></script>
<main class="wrapper" style="padding-top:2em">
<section class="container" id="demo-content">
<h3 class="title">QR code Scan or image upload</h3>
<div id="divScan">
<div id="divBtnScan">
<div>
<a class="button" id="startButton">Start</a>
<a class="button" id="resetButton">Reset</a>
@ -50,8 +43,11 @@
</div>
</div>
<label>Result:</label>
<pre><code id="result"></code></pre>
<div id="divRsltBarcode">
<label>Result:</label>
<pre><code id="result"></code></pre>
</div>
<br>
<textarea id="result2" style="width: 500px; height: 200px"></textarea>
<p><c:out value="${apiHost}"/></p>
</section>
@ -77,7 +73,8 @@
if (videoInputDevices.length > 0) {
isScan = true
document.getElementById("divImage").style.display = 'none'
document.getElementById("divScan").style.display = 'block'
document.getElementById("divBtnScan").style.display = 'block'
document.getElementById("divRsltBarcode").style.display = 'block'
// temp code -----------------------------
//document.getElementById("divScan").style.display = 'none'
//isScan = false
@ -102,11 +99,29 @@
sourceSelectPanel.style.display = 'block'
//--------------------------------------------
// barcode scan - barcode reader기가 인식된 경우에만 활성
document.getElementById('startButton').addEventListener('click', () => {
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result)
document.getElementById('result').textContent = result.text
// FIXME: API 호출 - GET /api/biz/nims/v1/getPrdMnfSeqInfoOfBarcode
ajax.get({
url: '<c:url value="${apiHost}/api/biz/nims/v1/getPrdMnfSeqInfoOfBarcode"/>',
data:{barcodeStr: result.text},
success: res => {
if (res.success) {
//console.log(data[0].qrcode)
document.getElementById('result2').value = JSON.stringify(res.data, null, 4)
return true;
}else{
alert(`${res.code}: ${res.message}`)
}
}
});
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
@ -115,11 +130,32 @@
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
})
// document.getElementById('decodeButton').addEventListener('click', () => {
// const img = document.getElementById('img')
// codeReader.decodeFromImage(img).then((result) => {
// console.log(result)
// document.getElementById('result').textContent = result.text
// }).catch((err) => {
// console.error(err)
// document.getElementById('result').textContent = err
// })
// console.log(`Started decode for image from ${img.src}`)
// })
document.getElementById('resetButton').addEventListener('click', () => {
codeReader.reset()
document.getElementById('result').textContent = '';
document.getElementById('result2').value = ''
console.log('Reset.')
})
}
// barcode image - barcode reader기가 인식되지 않은 경우
if (!isScan) {
document.getElementById("divScan").style.display = 'none'
document.getElementById("divImage").style.display = 'block'
document.getElementById("divBtnScan").style.display = 'none'
document.getElementById("divRsltBarcode").style.display = 'none'
const sec9 = document.querySelector('#divImage');
const uploadBox = sec9.querySelector('#img');
@ -171,11 +207,9 @@
for (let i = 0; i < data.length; i++) {
formData.append('uploadFiles', data[i]);
}
document.getElementById('result').textContent = ''
document.getElementById('result2').value = ''
requestSubmit({
//url: '/api/biz/nims/v1/getProductInfoByQrcodeImg',
url: '<c:url value="${apiHost}/api/biz/nims/v1/getProductInfoByQrcodeImg" />',
method: 'POST',
data: formData,
@ -183,13 +217,14 @@
},
loadend: (res) => {
const data = JSON.parse(res)
if (data.success) {
const rslt = JSON.parse(res)
if (rslt.success) {
//console.log(data[0].qrcode)
document.getElementById('result2').value = JSON.stringify(data)
document.getElementById('result2').value = JSON.stringify(rslt.data, null, 4)
return true;
}else{
alert(`${rslt.code}: ${rslt.message}`)
}
alert(JSON.stringify(data));
},
error: (e) => {
@ -197,26 +232,7 @@
}
});
});
// document.getElementById('decodeButton').addEventListener('click', () => {
// const img = document.getElementById('img')
// codeReader.decodeFromImage(img).then((result) => {
// console.log(result)
// document.getElementById('result').textContent = result.text
// }).catch((err) => {
// console.error(err)
// document.getElementById('result').textContent = err
// })
// console.log(`Started decode for image from ${img.src}`)
// })
}
document.getElementById('resetButton').addEventListener('click', () => {
codeReader.reset()
document.getElementById('result').textContent = '';
console.log('Reset.')
})
})
.catch((err) => {
console.error(err)
@ -263,7 +279,7 @@
fileInfos = null;
return isStop;
}
alert(JSON.stringify(fileInfos));
alert(JSON.stringify(fileInfos, null, 4));
return true;
}

Loading…
Cancel
Save