Spaces:

CVNSS
/

sapnhap3321

Running

App Files Files Community

CVNSS commited on Jul 4, 2025

Commit

866ac6c

verified ·

1 Parent(s): d0f5215

Update index.html

Browse files

Files changed (1) hide show

index.html +147 -18

index.html CHANGED Viewed

@@ -1,19 +1,148 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <title>Tra cứu Đơn vị Hành chính - Luat.ai API</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Bootstrap 5 CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body class="bg-light">
+<div class="container py-5">
+    <h2 class="mb-4 text-primary">🔎 Tra cứu Đơn vị Hành chính (Từ cũ sang mới)</h2>
+    <div class="card shadow p-4 mb-4">
+        <form id="searchForm" autocomplete="off">
+            <div class="row mb-3">
+                <div class="col-md-4 mb-2">
+                    <label for="province" class="form-label">Tỉnh/Thành phố cũ</label>
+                    <select class="form-select" id="province" name="province" required>
+                        <option value="">-- Chọn tỉnh/thành phố --</option>
+                    </select>
+                </div>
+                <div class="col-md-4 mb-2">
+                    <label for="district" class="form-label">Quận/Huyện cũ</label>
+                    <select class="form-select" id="district" name="district">
+                        <option value="">-- Chọn quận/huyện --</option>
+                    </select>
+                </div>
+                <div class="col-md-4 mb-2">
+                    <label for="ward" class="form-label">Phường/Xã cũ</label>
+                    <select class="form-select" id="ward" name="ward">
+                        <option value="">-- Chọn phường/xã --</option>
+                    </select>
+                </div>
+            </div>
+            <button class="btn btn-primary" type="submit" id="searchBtn">
+                Tra cứu
+            </button>
+            <span id="loading" style="display:none;" class="ms-3 text-info">Đang xử lý...</span>
+        </form>
+    </div>
+    <div id="resultArea"></div>
+</div>
+<script>
+const apiBase = "https://api.luat.ai/administrative";
+const provinceSel = document.getElementById("province");
+const districtSel = document.getElementById("district");
+const wardSel = document.getElementById("ward");
+const resultArea = document.getElementById("resultArea");
+const searchForm = document.getElementById("searchForm");
+const loading = document.getElementById("loading");
+// Load province list
+async function loadProvinces() {
+    let res = await fetch(apiBase + '/provinces');
+    let data = await res.json();
+    data.forEach(p => {
+        let opt = document.createElement("option");
+        opt.value = p;
+        opt.innerText = p;
+        provinceSel.appendChild(opt);
+    });
+}
+// Load districts when province changes
+provinceSel.addEventListener("change", async function() {
+    districtSel.innerHTML = `<option value="">-- Chọn quận/huyện --</option>`;
+    wardSel.innerHTML = `<option value="">-- Chọn phường/xã --</option>`;
+    if (!this.value) return;
+    let res = await fetch(apiBase + '/districts?province=' + encodeURIComponent(this.value));
+    let data = await res.json();
+    data.forEach(d => {
+        let opt = document.createElement("option");
+        opt.value = d;
+        opt.innerText = d;
+        districtSel.appendChild(opt);
+    });
+});
+// Load wards when district changes
+districtSel.addEventListener("change", async function() {
+    wardSel.innerHTML = `<option value="">-- Chọn phường/xã --</option>`;
+    if (!this.value || !provinceSel.value) return;
+    let res = await fetch(apiBase + '/wards?province=' + encodeURIComponent(provinceSel.value) + '&district=' + encodeURIComponent(this.value));
+    let data = await res.json();
+    data.forEach(w => {
+        let opt = document.createElement("option");
+        opt.value = w;
+        opt.innerText = w;
+        wardSel.appendChild(opt);
+    });
+});
+// Handle search
+searchForm.addEventListener("submit", async function(e) {
+    e.preventDefault();
+    resultArea.innerHTML = "";
+    loading.style.display = "inline";
+    let params = [];
+    if (provinceSel.value) params.push('oldProvince=' + encodeURIComponent(provinceSel.value));
+    if (districtSel.value) params.push('oldDistrict=' + encodeURIComponent(districtSel.value));
+    if (wardSel.value) params.push('oldWard=' + encodeURIComponent(wardSel.value));
+    let url = apiBase + '/search?' + params.join('&');
+    try {
+        let res = await fetch(url);
+        if (!res.ok) throw await res.json();
+        let data = await res.json();
+        renderResult(data);
+    } catch (err) {
+        showError(err.message || "Không tìm thấy dữ liệu, vui lòng kiểm tra lại thông tin.");
+    }
+    loading.style.display = "none";
+});
+// Hiển thị kết quả
+function renderResult(data) {
+    resultArea.innerHTML = `
+        <div class="card shadow p-3">
+            <h5 class="mb-3 text-success">Kết quả tra cứu:</h5>
+            <table class="table table-bordered align-middle">
+                <tbody>
+                    <tr><th scope="row">Tỉnh/TP cũ</th><td>${data.oldProvince || ''}</td></tr>
+                    <tr><th scope="row">Quận/Huyện cũ</th><td>${data.oldDistrict || ''}</td></tr>
+                    <tr><th scope="row">Phường/Xã cũ</th><td>${data.oldWard || ''}</td></tr>
+                    <tr class="table-secondary"><th scope="row">Tỉnh/TP mới</th><td>${data.newProvince || ''}</td></tr>
+                    <tr class="table-secondary"><th scope="row">Phường/Xã mới</th><td>${data.newWard || ''}</td></tr>
+                    <tr><th scope="row">Cấp hành chính mới</th><td>${data.newLevel || ''}</td></tr>
+                </tbody>
+            </table>
+        </div>
+    `;
+}
+// Hiển thị lỗi
+function showError(msg) {
+    resultArea.innerHTML = `
+        <div class="alert alert-danger">
+            <b>Lỗi:</b> ${msg}
+        </div>
+    `;
+}
+// Initial load
+loadProvinces();
+</script>
+</body>
 </html>