From 56e6055d4a6f96f572bd3a83fbc3017e3d3b25ce Mon Sep 17 00:00:00 2001
From: "Jonguk. Lim" <minuk926@gmail.com>
Date: Tue, 11 Jun 2024 13:08:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B0=94=EC=BD=94=EB=93=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20&=20=EC=8A=A4=EC=BA=94=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/adds/nims/barcode-main.jsp    | 335 ++++++++----------
 1 file changed, 138 insertions(+), 197 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/adds/nims/barcode-main.jsp b/src/main/webapp/WEB-INF/jsp/adds/nims/barcode-main.jsp
index 16970f5..d94e6ac 100644
--- a/src/main/webapp/WEB-INF/jsp/adds/nims/barcode-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/adds/nims/barcode-main.jsp
@@ -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>
+