barcode-reader-javascript-samples/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html at b306066fe221afaf0fc220d2454d5de1297dd227 · Dynamsoft/barcode-reader-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Batch Inventory with BarcodeScanner</title>
  <link rel="stylesheet" href="./index.css">
  <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
  <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
  <!-- <script src="../../../dist/dbr.bundle.js"></script> -->
</head>

<body>
  <div class="barcode-reader-view"></div>
  <div class="summary-view">
    <header>
      <svg t="1754028476225" class="icon-back" viewBox="0 0 1445 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1408" id="mx_n_1754028476225" width="25" height="25">
        <path d="M1350.649885 471.551065H183.240025l340.356908-340.294583A54.160438 54.160438 0 0 0 447.061814 54.721363L14.526209 487.630919a56.092514 56.092514 0 0 0-11.779428 17.637979 54.659038 54.659038 0 0 0 0 41.321485 56.092514 56.092514 0 0 0 11.779428 17.63798l432.535605 432.660255a54.160438 54.160438 0 1 0 76.597444-76.597443L183.240025 579.684967h1167.40986a54.098113 54.098113 0 1 0 0-108.133902" p-id="1409" fill="#ffffff"></path>
      </svg>
      <span>Summary</span>
    </header>
    <div class="summary-container">
      <div class="total-unique-barcodes-count">
        <span>Total Unique Barcodes Count</span>
        <span class="count">0</span>
      </div>
      <div class="session">
        <div class="total-count-in-this-session">
          <span>Total Count in This Session</span>
          <span class="count">0</span>
        </div>
        <div class="code-type-distribution">
          <div class="title">Code Type Distribution</div>
          <ul class="result-list"></ul>
        </div>
      </div>
      <div class="duration">
        <span>Duration</span>
        <span class="time"></span>
      </div>
    </div>
  </div>

  <script>
    const barcodeScannerView = document.querySelector(".barcode-reader-view");
    const summaryView = document.querySelector(".summary-view");
    const finishBtn = document.querySelector(".finish-btn");
    const backBtn = document.querySelector(".icon-back");
    let totalUniqueBarcodesResult = {};
    let totalUniqueBarcodesCount = 0;

    const launchBarcodeScanenr = () => {
      summaryView.style.display = "none";
      let config = {
        license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
        container: barcodeScannerView, // Specify where to render the scanner UI
        scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE
      }

      // Create a new instance of the Dynamsoft Barcode Scanner
      const barcodeScanner = new Dynamsoft.BarcodeScanner(config);

      const startTime = Date.now();
      barcodeScanner.launch().then((result) => {
        summaryView.style.display = "flex";
        totalUniqueBarcodesCount += result.barcodeResults.length;
        document.querySelector(".total-unique-barcodes-count .count").innerText = totalUniqueBarcodesCount;
        document.querySelector(".total-count-in-this-session .count").innerText = result.barcodeResults.length;
        document.querySelector(".time").innerText = getDurationTime(startTime);
        readerResultList(result);
        console.log("Current Scan Session Result: ", result);
      })
    }

    launchBarcodeScanenr();

    const readerResultList = (result) => {
      const resultListNode = document.querySelector(".result-list");
      resultListNode.innerText = "";
      const countResult = countByFormat(result.barcodeResults);
      for (let formatString in countResult) {
        const nodeLiStr = `
          <li>
            <span class="format">${formatString}</span>
            <span class="decode-count">${countResult[formatString]}</span>
          </li>
        `;
        resultListNode.insertAdjacentHTML("beforeend", nodeLiStr);
      }
    }

    const countByFormat = (items) => {
      const result = {};
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (!result.hasOwnProperty(item.formatString)) {
          result[item.formatString] = 1;
        } else {
          result[item.formatString]++;
        }
      }
      mergeResult(result);
      console.log("Total Unique Barcodes Result: ", totalUniqueBarcodesResult);
      return result;
    }

    const mergeResult = (newResult) => {
      for (let formatString in newResult) {
        if(!totalUniqueBarcodesResult.hasOwnProperty(formatString)) {
          totalUniqueBarcodesResult[formatString] = newResult[formatString];
        } else {
          totalUniqueBarcodesResult[formatString] += newResult[formatString];
        }
      }
    }

    const getDurationTime = (time) => {
      const now = new Date();
      const startDate = new Date(time);
      const endDate = now;

      const durationMs = endDate - startDate;

      const totalSeconds = Math.floor(durationMs / 1000);
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      const formatUnit = (unit) => unit.toString().padStart(2, '0');
      const formattedHours = formatUnit(hours);
      const formattedMinutes = formatUnit(minutes);
      const formattedSeconds = formatUnit(seconds);

      const formatTime = (date) => {
        return [
          date.getHours(),
          date.getMinutes(),
          date.getSeconds()
        ].map(unit => formatUnit(unit)).join(':');
      };

      const startTime = formatTime(startDate);
      const endTime = formatTime(endDate);

      return `${formattedHours}:${formattedMinutes}:${formattedSeconds} (${startTime} ~ ${endTime})`;
    }

    backBtn.addEventListener("click", launchBarcodeScanenr);
  </script>
</body>

</html>