xit-app
/
adds-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 바코드 이미지 & 스캔 반영

Browse Source
dev
Jonguk. Lim 5 months ago
parent d64a16c6f2
commit 56e6055d4a
1 changed files with 138 additions and 197 deletions
Show Stats Download Patch File Download Diff File

335
src/main/webapp/WEB-INF/jsp/adds/nims/barcode-main.jsp
Unescape Escape View File

@ -5,24 +5,14 @@
<div class="wrapper" style="padding-top:2em">
<div class="container" id="demo-content">
<h3 class="title">바코드(이미지) scan</h3>
<div id="divBarcode">
<label>바코드 스캔</label>
<input type="text" id="barcodeStr" name="barcodeStr" style="width: 380px;" minlength="200" >
<button id="btnBarcode" class="btn btn-primary">조회</button>
</div>
<div id="divBtnScan">
<div>
<a class="button" id="startButton">Start</a>
<a class="button" id="resetButton">Reset</a>
</div>
<div>
<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
</div>
<h3 class="title">바코드(이미지) scan</h3>
<div id="sourceSelectPanel" style="display:none">
<label for="sourceSelect">Change video source:</label>
<select id="sourceSelect" style="max-width:400px">
</select>
</div>
</div>
<div id="divImage" style="display: none;">
<div>
@ -31,13 +21,8 @@
</div>
</div>
<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>
</div>
<div class="footer">
@ -48,188 +33,143 @@
</div>
<!--<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>-->
<%--<script src="<c:url value="/webjars/js/base/base.js"/>" defer></script>--%>
<script src="<c:url value='/resources/js/zxing-library-0.20.0.min.js' />" defer></script>
<script type="text/javascript">
document.querySelector("#barcodeStr").addEventListener('change', function () {
document.getElementById('result2').value = '';
console.log('change');
submitBarcodeScan();
}, {passive: true})
document.querySelector("#btnBarcode").addEventListener('click', function () {
console.log('click');
if(document.querySelector("#barcodeStr").value === ''){
alert('바코드를 읽어 주세요.')
return;
}
document.getElementById('result2').value = '';
submitBarcodeScan();
}, {passive: true})
window.addEventListener('load', function () {
let selectedDeviceId;
let isScan = false;
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized')
console.log('ZXing code reader initialized')
codeReader.listVideoInputDevices()
.then((videoInputDevices) => {
if (videoInputDevices.length > 0) {
isScan = true
document.getElementById("divImage").style.display = 'none'
document.getElementById("divBtnScan").style.display = 'block'
document.getElementById("divRsltBarcode").style.display = 'block'
// temp code -----------------------------
//document.getElementById("divScan").style.display = 'none'
//isScan = false
//----------------------------------------
// chrome browser 인 경우에만
//----------------------------------------
const sourceSelect = document.getElementById('sourceSelect')
selectedDeviceId = videoInputDevices[0].deviceId
videoInputDevices.forEach((element) => {
const sourceOption = document.createElement('option')
sourceOption.text = element.label
sourceOption.value = element.deviceId
sourceSelect.appendChild(sourceOption)
})
sourceSelect.onchange = () => {
selectedDeviceId = sourceSelect.value;
};
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
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)
document.getElementById('result').textContent = err
}
})
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("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');
/* 박스 안에 Drag 들어왔을 때 */
uploadBox.addEventListener('dragenter', function (e) {
console.log('dragenter');
});
/* 박스 안에 Drag를 하고 있을 때 */
uploadBox.addEventListener('dragover', function (e) {
e.preventDefault();
console.log('dragover');
const vaild = e.dataTransfer.types.indexOf('Files') >= 0;
if (!vaild) {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = 'green';
}
});
/* 박스 밖으로 Drag가 나갈 때 */
uploadBox.addEventListener('dragleave', function (e) {
console.log('dragleave');
this.style.backgroundColor = 'white';
});
/* 박스 안에서 Drag를 Drop했을 때 */
uploadBox.addEventListener('drop', function (e) {
e.preventDefault();
console.log('drop');
this.style.backgroundColor = 'white';
console.dir(e.dataTransfer);
//유효성 Check
if (!isValid(e.dataTransfer)) {
return;
}
const data = e.dataTransfer.files;
console.dir(data);
//
const formData = new FormData();
for (let i = 0; i < data.length; i++) {
formData.append('uploadFiles', data[i]);
}
document.getElementById('result2').value = ''
requestSubmit({
url: '<c:url value="${apiHost}/api/biz/nims/v1/getProductInfoByQrcodeImg" />',
method: 'POST',
data: formData,
progress: () => {
},
loadend: (res) => {
const rslt = JSON.parse(res)
if (rslt.success) {
//console.log(data[0].qrcode)
document.getElementById('result2').value = JSON.stringify(rslt.data, null, 4)
return true;
}else{
alert(`${rslt.code}: ${rslt.message}`)
}
},
error: (e) => {
console.error(e)
}
});
});
}
})
.catch((err) => {
console.error(err)
})
document.getElementById("divImage").style.display = 'block'
document.getElementById("divBarcode").style.display = 'block'
const sec9 = document.querySelector('#divImage');
const uploadBox = sec9.querySelector('#img');
/* 박스 안에 Drag 들어왔을 때 */
uploadBox.addEventListener('dragenter', function (e) {
console.log('dragenter');
});
/* 박스 안에 Drag를 하고 있을 때 */
uploadBox.addEventListener('dragover', function (e) {
e.preventDefault();
console.log('dragover');
const vaild = e.dataTransfer.types.indexOf('Files') >= 0;
if (!vaild) {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = 'green';
}
});
/* 박스 밖으로 Drag가 나갈 때 */
uploadBox.addEventListener('dragleave', function (e) {
console.log('dragleave');
this.style.backgroundColor = 'white';
});
/* 박스 안에서 Drag를 Drop했을 때 */
uploadBox.addEventListener('drop', function (e) {
e.preventDefault();
console.log('drop');
this.style.backgroundColor = 'white';
console.dir(e.dataTransfer);
//유효성 Check
if (!isValid(e.dataTransfer)) {
return;
}
const data = e.dataTransfer.files;
console.dir(data);
//
const formData = new FormData();
for (let i = 0; i < data.length; i++) {
formData.append('uploadFiles', data[i]);
}
document.getElementById('result2').value = ''
requestSubmit({
url: '<c:url value="${apiHost}/api/biz/nims/v1/getProductInfoByQrcodeImg" />',
method: 'POST',
data: formData,
progress: () => {
},
loadend: (res) => {
const rslt = JSON.parse(res)
if (rslt.success) {
//console.log(data[0].qrcode)
document.getElementById('result2').value = JSON.stringify(rslt.data, null, 4)
return true;
}else{
alert(rslt.code + ":" + rslt.message);
}
},
error: (e) => {
console.error(e)
}
});
});
}, {passive: true})
function submitBarcodeScan(){
const data = {
barcodeStr: document.querySelector("#barcodeStr").value
};
const url = '<c:url value="${apiHost}/api/biz/nims/v1/getPrdMnfSeqInfoOfBarcode" />';
fetch(url, {
method: 'POST',
body: JSON.stringify(data)
})
.then(response => {
if (!response.ok) {
return response.json().then(error => { throw error; });
}
return response.json();
})
.then(res => {
console.log(res);
console.log(res.data);
if (!res.success) {
alert(res.code + ":" + res.message);
return false;
}
document.getElementById('result2').value = JSON.stringify(res.data, null, 4)
return true;
})
.catch(error => {
console.log(error);
if (error && typeof error === 'object') {
console.log(error);
}
});
}
function isValid(data) {
//파일인지 유효성 검사
@ -361,3 +301,4 @@
}
</script>

Write Preview
Loading…
Cancel
Save