Update script.js

script.js

@@ -1,55 +1,165 @@
-const tableBody = document.getElementById("tableBody");
-const searchBox = document.getElementById("searchBox");
-const counter = document.getElementById("counter");
-const loading = document.getElementById("loading");
-
-// تحميل ملف Excel وتحويله لبيانات
-async function loadData() {
-  const response = await fetch("isic4.json"); // ملف محول من Excel إلى JSON
-  const data = await response.json();
-  loading.style.display = "none";
-  return data;
+// عناصر الواجهة
+const searchBox   = document.getElementById("searchBox");
+const clearSearch = document.getElementById("clearSearch");
+const pageSizeEl  = document.getElementById("pageSize");
+const themeBtn    = document.getElementById("themeToggle");
+const tableBody   = document.getElementById("tableBody");
+const pagination  = document.getElementById("pagination");
+const counter     = document.getElementById("counter");
+const loading     = document.getElementById("loading");
+
+// حالة البيانات
+let data = [];
+let filtered = [];
+let currentPage = 1;
+let rowsPerPage = pageSizeEl ? parseInt(pageSizeEl.value, 10) : 50;
+
+// ألوان صغيرة للعمود الثالث
+const colors = ["#00bcd4","#4caf50","#f44336","#ff9800","#9c27b0","#e91e63","#009688","#3f51b5","#607d8b","#795548"];
+
+// أدوات مساعدة
+function normalizeArabic(str=""){
+  return str
+    .replace(/[\u064B-\u0652]/g, "")
+    .replace(/[أإآا]/g,"ا").replace(/ى/g,"ي").replace(/ؤ/g,"و")
+    .replace(/ئ/g,"ي").replace(/ة/g,"ه").toLowerCase();
+}
+function matches(text, q){ if(!q) return true; return normalizeArabic(String(text??"")).includes(normalizeArabic(q)); }
+function highlight(text, q){
+  if(!q) return String(text ?? "");
+  const esc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return String(text ?? "").replace(new RegExp(esc, 'gi'), m => `<mark class="hl">${m}</mark>`);
 }
 
-// تحديث الجدول حسب البحث
-function updateTable(data, searchTerm = "") {
-  tableBody.innerHTML = "";
+// العرض
+function renderPagination(){
+  const pages = Math.ceil(filtered.length / rowsPerPage) || 1;
+  if (!pagination) return;
+  pagination.innerHTML = "";
+  if (pages <= 1) return;
 
-  let filtered = data.filter(row =>
-    row.code.includes(searchTerm) ||
-    row.name.includes(searchTerm)
-  );
-
-  if (filtered.length === 0) {
-    tableBody.innerHTML = `<tr><td colspan="3" class="no-results">🚫 لا توجد نتائج مطابقة</td></tr>`;
-  } else {
-    filtered.forEach(row => {
-      let tr = document.createElement("tr");
-      tr.innerHTML = `
-        <td>${row.code}</td>
-        <td>${row.name}</td>
-        <td></td>
-      `;
-      tableBody.appendChild(tr);
+  const makeBtn = (label, page, active=false, disabled=false)=>{
+    const b = document.createElement("button");
+    b.textContent = label;
+    b.className = "page-btn" + (active ? " active" : "");
+    b.disabled = disabled;
+    b.addEventListener("click", ()=>{
+      if(page === currentPage) return;
+      currentPage = page; updateView();
+      window.scrollTo({top:0, behavior:"smooth"});
     });
+    return b;
+  };
+
+  pagination.appendChild(makeBtn("‹ السابق", Math.max(1, currentPage-1), false, currentPage===1));
+
+  const win = 5;
+  const total = pages;
+  let start = Math.max(1, currentPage - Math.floor(win/2));
+  let end   = Math.min(total, start + win - 1);
+  if (end - start + 1 < win) start = Math.max(1, end - win + 1);
+
+  if (start > 1) pagination.appendChild(makeBtn("1", 1, currentPage===1));
+  if (start > 2) pagination.appendChild(Object.assign(document.createElement("span"), {className:"dots", textContent:"..."}));
+  for (let p=start; p<=end; p++) pagination.appendChild(makeBtn(String(p), p, p===currentPage));
+  if (end < total - 1) pagination.appendChild(Object.assign(document.createElement("span"), {className:"dots", textContent:"..."}));
+  if (end < total) pagination.appendChild(makeBtn(String(total), total, currentPage===total));
+
+  pagination.appendChild(makeBtn("التالي ›", Math.min(total, currentPage+1), false, currentPage===total));
+}
+
+function renderTable(){
+  if (!tableBody) return;
+  const q = searchBox ? searchBox.value.trim() : "";
+  tableBody.innerHTML = "";
+
+  const start = (currentPage - 1) * rowsPerPage;
+  const pageItems = filtered.slice(start, start + rowsPerPage);
+
+  if (pageItems.length === 0) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = 3;
+    td.className = "no-results";
+    td.textContent = "🚫 لا توجد نتائج مطابقة";
+    tr.appendChild(td);
+    tableBody.appendChild(tr);
+    return;
   }
 
-  // تحديث العد بشكل مباشر
-  if (searchTerm === "") {
-    counter.textContent = `إجمالي الأنشطة الاقتصادية: ${data.length}`;
-  } else {
-    counter.textContent = filtered.length === 0
-      ? "لا توجد نتائج"
-      : `عدد النتائج المطابقة: ${filtered.length}`;
+  pageItems.forEach((it, i)=>{
+    // يدعم مفاتيح مختلفة: activity أو name
+    const code = it.code ?? "";
+    const activity = (it.activity ?? it.name ?? "");
+
+    const tr = document.createElement("tr");
+
+    const codeTd = document.createElement("td");
+    codeTd.innerHTML = highlight(code, q);
+
+    const actTd  = document.createElement("td");
+    actTd.innerHTML  = highlight(activity, q);
+
+    const colorTd = document.createElement("td");
+    const colorBar = document.createElement("div");
+    colorBar.className = "color-bar";
+    colorBar.style.backgroundColor = colors[i % colors.length];
+    colorTd.appendChild(colorBar);
+
+    tr.appendChild(codeTd); tr.appendChild(actTd); tr.appendChild(colorTd);
+    tableBody.appendChild(tr);
+  });
+}
+
+function updateView(){
+  const q = searchBox ? searchBox.value.trim() : "";
+  filtered = data.filter(it => matches(it.code, q) || matches(it.activity ?? it.name, q));
+  if (counter) {
+    counter.textContent = filtered.length
+      ? `عدد الأنشطة الاقتصادية: ${filtered.length.toLocaleString()}`
+      : "لا توجد نتائج";
   }
+  if (loading) loading.style.display = "none";
+  renderTable();
+  renderPagination();
 }
 
-// تشغيل
-loadData().then(data => {
-  updateTable(data);
+// أحداث
+function debounce(fn, delay=200){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), delay); }; }
+searchBox?.addEventListener("input", debounce(()=>{ currentPage = 1; updateView(); }, 180));
+clearSearch?.addEventListener("click", ()=>{ if(!searchBox) return; searchBox.value=""; searchBox.focus(); currentPage=1; updateView(); });
+pageSizeEl?.addEventListener("change", ()=>{ rowsPerPage = parseInt(pageSizeEl.value, 10) || 50; currentPage=1; updateView(); });
+
+// وضع ليلي اختياري
+(function initTheme(){
+  if(!themeBtn) return;
+  const saved = localStorage.getItem("theme") || "light";
+  document.documentElement.classList.toggle("dark", saved === "dark");
+  themeBtn.textContent = saved === "dark" ? "☀️ الوضع الفاتح" : "🌙 الوضع الليلي";
+  themeBtn.addEventListener("click", ()=>{
+    const isDark = document.documentElement.classList.toggle("dark");
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+    themeBtn.textContent = isDark ? "☀️ الوضع الفاتح" : "🌙 الوضع الليلي";
+  });
+})();
+
+document.addEventListener("keydown", (e)=>{ if(e.key==="/"){ e.preventDefault(); searchBox?.focus(); } });
 
-  searchBox.addEventListener("input", () => {
-    const searchTerm = searchBox.value.trim();
-    updateTable(data, searchTerm);
+// تحميل البيانات من data.json (الافتراضي في مشروعك)
+fetch("data.json", { cache: "no-cache" })
+  .then(r=>{
+    if(!r.ok) throw new Error("HTTP "+r.status);
+    return r.json();
+  })
+  .then(json=>{
+    // توحيد الحقول لو جاءت بصيغ مختلفة
+    data = Array.isArray(json) ? json.map(row => ({
+      code: row.code ?? row.Code ?? row["رمز"] ?? "",
+      activity: row.activity ?? row.Activity ?? row.name ?? row["النشاط"] ?? ""
+    })) : [];
+    updateView();
+  })
+  .catch(err=>{
+    console.error(err);
+    if (loading) loading.textContent = "تعذر تحميل البيانات (تأكدي من وجود data.json وصيغة الحقول).";
   });
-});