웹페이지 형식으로 데이터를 추출할 수 있는 기능

2025-07-21 17:37:35 +09:00
parent 1e0ddf6280
commit f22e5922a2
4 changed files with 481 additions and 0 deletions
--- a/app/templates/index.html
+++ b/app/templates/index.html
@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>POS 데이터 조회</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+</head>
+<body class="p-4">
+    <h2>POS 데이터 조회</h2>
+
+    <form id="filterForm" class="row g-3">
+        <div class="col-md-3">
+            <label>시작일</label>
+            <input type="date" name="start_date" value="{{ start_date }}" class="form-control">
+        </div>
+        <div class="col-md-3">
+            <label>종료일</label>
+            <input type="date" name="end_date" value="{{ end_date }}" class="form-control">
+        </div>
+        <div class="col-md-2">
+            <label>대분류</label>
+            <select name="ca01" class="form-select">
+                <option value="전체">전체</option>
+            </select>
+        </div>
+        <div class="col-md-2">
+            <label>소분류</label>
+            <select name="ca03" class="form-select">
+                <option value="전체">전체</option>
+            </select>
+        </div>
+        <div class="col-md-2 align-self-end">
+            <button type="submit" class="btn btn-primary w-100">조회</button>
+        </div>
+    </form>
+
+    <hr>
+
+    <table class="table table-bordered mt-3" id="resultTable">
+        <thead>
+            <tr>
+                <th>대분류</th><th>중분류</th><th>소분류</th><th>상품명</th>
+                <th>수량</th><th>총매출액</th><th>총할인액</th><th>실매출액</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+        <tfoot>
+            <tr>
+                <th colspan="4" class="text-end">합계</th>
+                <th id="sum_qty">0</th>
+                <th id="sum_tot_amount">0</th>
+                <th id="sum_tot_discount">0</th>
+                <th id="sum_actual_amount">0</th>
+            </tr>
+        </tfoot>
+    </table>
+
+<script>
+async function fetchAndFillSelect(url, selectElem) {
+    const res = await fetch(url);
+    const list = await res.json();
+    selectElem.innerHTML = '';
+    list.forEach(val => {
+        const opt = document.createElement('option');
+        opt.value = val;
+        opt.textContent = val;
+        selectElem.appendChild(opt);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const ca01Select = document.querySelector('select[name="ca01"]');
+    const ca03Select = document.querySelector('select[name="ca03"]');
+
+    // 대분류 목록 불러오기
+    await fetchAndFillSelect('/api/ca01_list', ca01Select);
+
+    // 대분류 변경 시 소분류 목록 갱신
+    ca01Select.addEventListener('change', async () => {
+        const selectedCa01 = ca01Select.value;
+        await fetchAndFillSelect(`/api/ca03_list?ca01=${encodeURIComponent(selectedCa01)}`, ca03Select);
+    });
+
+    // 초기 소분류 목록 불러오기
+    await fetchAndFillSelect('/api/ca03_list', ca03Select);
+
+    // 폼 제출 이벤트 처리
+    document.getElementById('filterForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        const params = new URLSearchParams(formData);
+
+        const res = await fetch('/search?' + params.toString());
+        if (!res.ok) {
+            alert('조회 중 오류가 발생했습니다.');
+            return;
+        }
+        const data = await res.json();
+
+        const tbody = document.querySelector('#resultTable tbody');
+        tbody.innerHTML = '';
+
+        // 합계 초기화
+        let sum_qty = 0;
+        let sum_tot_amount = 0;
+        let sum_tot_discount = 0;
+        let sum_actual_amount = 0;
+
+        if (data.length === 0) {
+            tbody.innerHTML = `<tr><td colspan="8" class="text-center">조회 결과가 없습니다.</td></tr>`;
+        } else {
+            data.forEach(row => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td>${row.ca01}</td>
+                    <td>${row.ca02}</td>
+                    <td>${row.ca03}</td>
+                    <td>${row.name}</td>
+                    <td>${row.qty}</td>
+                    <td>${row.tot_amount}</td>
+                    <td>${row.tot_discount}</td>
+                    <td>${row.actual_amount}</td>
+                `;
+                tbody.appendChild(tr);
+
+                // 합계 계산
+                sum_qty += Number(row.qty) || 0;
+                sum_tot_amount += Number(row.tot_amount) || 0;
+                sum_tot_discount += Number(row.tot_discount) || 0;
+                sum_actual_amount += Number(row.actual_amount) || 0;
+            });
+        }
+
+        // 합계 출력
+        document.getElementById('sum_qty').textContent = sum_qty.toLocaleString();
+        document.getElementById('sum_tot_amount').textContent = sum_tot_amount.toLocaleString();
+        document.getElementById('sum_tot_discount').textContent = sum_tot_discount.toLocaleString();
+        document.getElementById('sum_actual_amount').textContent = sum_actual_amount.toLocaleString();
+    });
+});
+</script>
+
+</body>
+</html>