fix: barcode read 샘플 화면 반영

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

26
.gitignore vendored

@ -1,12 +1,34 @@
target/ target/
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**/target/
!**/src/test/**/target/
### STS ### ### STS ###
.apt_generated
.classpath .classpath
.factorypath .factorypath
.project .project
.settings .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/ logs/
files/

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

Loading…
Cancel
Save