Spaces:

thanthamky
/

palm-quickview

Running

App Files Files Community

thanthamky commited on Oct 15, 2025

Commit

3a5b5d4

verified ·

1 Parent(s): 1de2f47

Upload 3 files

Browse files

Files changed (3) hide show

app.js +27 -3
index.html +6 -0
styles.css +91 -3

app.js CHANGED Viewed

@@ -12,9 +12,11 @@ const elements = {
   totalAreaM2: document.getElementById("totalAreaM2"),
   totalAreaRai: document.getElementById("totalAreaRai"),
   itemCount: document.getElementById("itemCount"),
 };
 declareLoadingRow("Loading data...");
 let allFeatures = [];
 let map;
@@ -62,7 +64,19 @@ function initMap() {
     {},
     { collapsed: false }
   ).addTo(map);
   window.addEventListener("resize", () => map.invalidateSize());
@@ -74,7 +88,7 @@ function initMap() {
   adminLayer = L.geoJSON(null, {
     pane: "adminPane",
     style: {
-      color: "#ffaa00ff",
       weight: 0.8,
       fillOpacity: 0,
     },
@@ -92,6 +106,7 @@ function initMap() {
 async function loadData() {
   try {
     const [palmResponse, adminResponse] = await Promise.all([
       fetch("palm_pred_all_admin.geojson"),
       fetch("admin_bnd.geojson"),
@@ -111,9 +126,11 @@ async function loadData() {
     initializeSelects();
     updateDashboard({ fitBounds: true });
   } catch (error) {
     console.error(error);
     declareLoadingRow("Failed to load data. Check console for details.");
   }
 }
@@ -279,7 +296,7 @@ function renderTable(features) {
 function palmDefaultStyle() {
   return {
     color: "#ffffffff",
-    weight: 0.5,
     fillColor: "#649e66ff",
     fillOpacity: 0.7,
   };
@@ -401,3 +418,10 @@ function formatNumber(value, fractionDigits = 0) {
     maximumFractionDigits: fractionDigits,
   }).format(Number(value));
 }

   totalAreaM2: document.getElementById("totalAreaM2"),
   totalAreaRai: document.getElementById("totalAreaRai"),
   itemCount: document.getElementById("itemCount"),
+  loadingOverlay: document.getElementById("loadingOverlay"),
 };
 declareLoadingRow("Loading data...");
+setLoading(true);
 let allFeatures = [];
 let map;
     {},
     { collapsed: false }
   ).addTo(map);
+  if (L.control && typeof L.control.measure === "function") {
+    L.control
+      .measure({
+        position: "topleft",
+        primaryLengthUnit: "kilometers",
+        secondaryLengthUnit: "meters",
+        primaryAreaUnit: "hectares",
+        secondaryAreaUnit: "sqmeters",
+      })
+      .addTo(map);
+  } else {
+    console.warn("Leaflet measure plugin is unavailable; measure control disabled.");
+  }
   window.addEventListener("resize", () => map.invalidateSize());
   adminLayer = L.geoJSON(null, {
     pane: "adminPane",
     style: {
+      color: "#ffbf00ff",
       weight: 0.8,
       fillOpacity: 0,
     },
 async function loadData() {
   try {
+    setLoading(true);
     const [palmResponse, adminResponse] = await Promise.all([
       fetch("palm_pred_all_admin.geojson"),
       fetch("admin_bnd.geojson"),
     initializeSelects();
     updateDashboard({ fitBounds: true });
+    setLoading(false);
   } catch (error) {
     console.error(error);
     declareLoadingRow("Failed to load data. Check console for details.");
+    setLoading(false);
   }
 }
 function palmDefaultStyle() {
   return {
     color: "#ffffffff",
+    weight: 0.6,
     fillColor: "#649e66ff",
     fillOpacity: 0.7,
   };
     maximumFractionDigits: fractionDigits,
   }).format(Number(value));
 }
+function setLoading(isLoading) {
+  document.body.classList.toggle("is-loading", Boolean(isLoading));
+  if (elements.loadingOverlay) {
+    elements.loadingOverlay.setAttribute("aria-hidden", isLoading ? "false" : "true");
+  }
+}

index.html CHANGED Viewed

@@ -16,6 +16,12 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <main class="dashboard">
       <section class="top-bar">
         <div class="filters">

     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
+    <div id="loadingOverlay" class="loading-overlay" role="status" aria-live="polite">
+      <div class="loading-card">
+        <div class="loading-spinner" aria-hidden="true"></div>
+        <p>กำลังโหลดข้อมูล...</p>
+      </div>
+    </div>
     <main class="dashboard">
       <section class="top-bar">
         <div class="filters">

styles.css CHANGED Viewed

@@ -16,6 +16,55 @@ span {
   color: #000000;
 }
 html,
 body {
   height: 100%;
@@ -84,10 +133,11 @@ main.dashboard {
 .summary {
   justify-content: space-between;
 }
 .card {
-  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
@@ -216,23 +266,61 @@ main.dashboard {
 @media (max-width: 1100px) {
   .content {
     flex-direction: column;
   }
   #map {
-    min-height: 400px;
   }
 }
 @media (max-width: 720px) {
   .filters,
   .summary {
     flex-direction: column;
   }
   .card:not(:last-child) {
     border-right: none;
     border-bottom: 1px solid var(--border);
     padding-right: 0;
-    padding-bottom: 1rem;
   }
 }

   color: #000000;
 }
+body.is-loading {
+  overflow: hidden;
+}
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(245, 247, 250, 0.92);
+  backdrop-filter: blur(2px);
+  z-index: 1200;
+  transition: opacity 0.2s ease;
+}
+body.is-loading .loading-overlay {
+  display: flex;
+}
+.loading-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem 2.5rem;
+  border-radius: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
+  color: #000000;
+  font-size: 1.05rem;
+}
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 4px solid rgba(42, 122, 74, 0.2);
+  border-top-color: var(--accent);
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 html,
 body {
   height: 100%;
 .summary {
   justify-content: space-between;
+  gap: 1rem;
 }
 .card {
+  flex: 1 1 0;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
 @media (max-width: 1100px) {
   .content {
     flex-direction: column;
+    padding-right: 0;
   }
   #map {
+    min-height: 440px;
+  }
+}
+@media (max-width: 960px) {
+  .top-bar {
+    flex-direction: column;
+  }
+  .filters,
+  .summary {
+    flex: 1 1 auto;
+    width: 100%;
   }
 }
 @media (max-width: 720px) {
+  .dashboard {
+    padding: 0.75rem;
+  }
+  .top-bar {
+    gap: 0.75rem;
+  }
   .filters,
   .summary {
     flex-direction: column;
+    gap: 0.75rem;
+  }
+  .filters label {
+    width: 100%;
+  }
+  .card {
+    width: 100%;
   }
   .card:not(:last-child) {
     border-right: none;
     border-bottom: 1px solid var(--border);
     padding-right: 0;
+    padding-bottom: 0.75rem;
+  }
+  #map {
+    min-height: 360px;
+  }
+  .table-wrapper {
+    max-height: 45vh;
   }
 }