Page History

<!-- فونت وزیر -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<h1 style="text-align:center; font-family:Vazir, Tahoma; color:#333;font-weight:600;">مستندات اعتبار بخشی</h1>

<!-- نوارردیف جستجو و فیلترها -->
<div id="search-filters" style="display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:30px 0;">
  <input type="text" id="search" placeholder="جستجو بر اساس عنوان یا محور" 
         style="width:60%flex:1 1 300px; max-width:600px400px; padding:12px10px 16px15px; border:none; background:#f3f3f3; border-radius:30px; font-size:16px14px; outline:none; text-align:right; font-family:Vazir, Tahoma; min-width:150px;">
  
  <select id="filter-mahvar" style="flex:0 1 150px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;">
    <option value="">انتخاب محور</option>
  </select>
  
  <select id="filter-zirmohvar" style="flex:0 1 150px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;">
    <option value="">انتخاب زیرمحور</option>
  </select>
</div>

<!-- کانتینر سه بخش -->
<div id="sections-container" style="padding:0 40px 60px; direction:rtl;"></div>

<!-- پیام وقتی چیزی پیدا نشد -->
<div id="no-result" style="display:none; text-align:center; color:#b40074; font-weight:600; font-size:16px; margin-top:20px;">
هیچ سندی پیدا نشد.
</div>

<style>
.card {
  background:#fff; border-radius:18px; box-shadow:0 4px 10px rgba(0,0,0,0.1);
  padding:20px; display:flex; align-items:center; justify-content:space-between; 
  flex-direction:row-reverse; font-family:Vazir, Tahoma; transition:all 0.3s ease;
}
.card-content { flex:1; text-align:right; padding-right:15px; }
.card-content h3 { margin:0 0 8px; font-weight:600; font-size:14px; color:#333; }
.card-content ul { margin:0; padding-right:15px; list-style:disc; font-size:13px; color:#555; }
.open-btn { display:inline-block; background:#00A9C3; color:#fff; border:none; border-radius:25px; padding:4px 18px; font-size:13px; text-decoration:none; margin-top:12px; cursor:pointer; }
.open-btn:hover { background:#0090a8; }
.card-icon { background:#f7f7f7; border-radius:16px; padding:12px; display:flex; align-items:center; justify-content:center; }
.card-icon img { width:2cm; height:2cm; }
.card:hover { transform:scale(1.03); background:#fdfdfd; }

@media(max-width:900px){ 
  .section-grid{grid-template-columns:1fr;} 
  #search-filters { flex-direction:column; align-items:center; }
  #search-filters input, #search-filters select { flex:1 1 auto; max-width:300px; }
}
</style>

<script>
const pageId = "85045112";
const fileName = "form-data.json";
let docs = [];

const sections = [
  { title: "رهبری و مدیریت", value: "modiriyat" },
  { title: "مراقبت و درمان", value: "mored" },
  { title: "حمایت از گیرنده خدمت", value: "hemayat" }
];

// دریافت JSON
async function loadJSON(){
  try {
      const attRes = await fetch(`/rest/api/content/${pageId}/child/attachment`, { credentials: "include" });
      const attData = await attRes.json();
      const file = attData.results.find(a => a.title === fileName);
      if (!file) { console.warn("JSON file not found."); return; }

      const downloadUrl = new URL(file._links.download, window.location.origin).href;
      const jsonText = await fetch(downloadUrl, { credentials:"include" }).then(r => r.text());
      docs = JSON.parse(jsonText);

      populateFilters();
      renderSections();
  } catch(err){
      console.error("Error loading JSON:", err);
  }
}

// پر کردن گزینه‌های فیلترها
function populateFilters(){
  const mahvarSet = new Set(docs.map(d => d.mahvar).filter(Boolean));
  const zirmohvarSet = new Set(docs.map(d => d.zirmohvar).filter(Boolean));

  const mahvarSelect = document.getElementById("filter-mahvar");
  const zirmohvarSelect = document.getElementById("filter-zirmohvar");

  mahvarSet.forEach(val => {
    const option = document.createElement("option");
    option.value = val; option.textContent = val; mahvarSelect.appendChild(option);
  });

  zirmohvarSet.forEach(val => {
    const option = document.createElement("option");
    option.value = val; option.textContent = val; zirmohvarSelect.appendChild(option);
  });
}

// ساخت کارت و لینک مشاهده از Base64
function createCard(doc){
  const card = document.createElement("div");
  card.className = "card";

  let fileUrl = "#";

  if(doc.document_file){
    const arr = doc.document_file.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while(n--){ u8arr[n] = bstr.charCodeAt(n); }
    const blob = new Blob([u8arr], { type: mime });
    fileUrl = URL.createObjectURL(blob);
  }

  card.innerHTML = `
    <div class="card-content">
      <h3><b>${doc.document_name ?? doc.title ?? ""}</b></h3>
      <ul>
        <li>زیرمحور: ${doc.zirmohvar}</li>
        <li>نوع سند: ${doc.noe_sanad}</li>
        <li>شماره استاندارد: ${doc.standard_no}</li>
        <li>تاریخ آخرین بازنگری: ${doc.date}</li>
      </ul>
      <a href="${fileUrl}" target="_blank"<button class="open-btn">مشاهده</a>button>
    </div>
    <div class="card-icon">
      <img src="https://kb.h-soft.ir/download/thumbnails/85045112/13.png?api=v2&nonce=1764175790566" alt="سند">
    </div>
  `;

  // باز شدن فایل در تب جدید
  const btn = card.querySelector(".open-btn");
  btn.addEventListener("click", () => {
    window.open(fileUrl, "_blank");
  });

  return card;
}

// نمایش سه بخش با فیلترها
function renderSections(){
  const searchText = document.getElementById("search").value.toLowerCase();
  const selectedMahvar = document.getElementById("filter-mahvar").value;
  const selectedZirmohvar = document.getElementById("filter-zirmohvar"){.value;

  const container = document.getElementById("sections-container");
  container.innerHTML = "";
  let hasResult = false;

  sections.forEach(section => {
    const sectionDocs = docs.filter(d => d.mahvar === section.value && (
      (!filtersearchText || 
     (d.title && d.title.toLowerCase().includes(filtersearchText))) ||&&
      (!selectedMahvar || d.mahvar.toLowerCase().includes(filter === selectedMahvar) &&
      (!selectedZirmohvar || d.zirmohvar === selectedZirmohvar)
    ));

    if(sectionDocs.length > 0) hasResult = true;

    const sectionDiv = document.createElement("div");
    sectionDiv.style.marginBottom = "50px";

    const h2 = document.createElement("h2");
    h2.style.textAlign = "center";
    h2.style.fontFamily = "Vazir, Tahoma";
    h2.style.color = "#333";
    h2.style.fontWeight = "600";
    h2.style.marginBottom = "8px";
    h2.textContent = section.title;

    const hr = document.createElement("hr");
    hr.style.border = "3px solid #00A9C3"; /* تغییر رنگ خط زیر عنوان */
    hr.style.width = "80px";
    hr.style.margin = "0 auto 20px";

    const grid = document.createElement("div");
    grid.className = "section-grid";
    grid.style.display = "grid";
    grid.style.gridTemplateColumns = "repeat(2,1fr)";
    grid.style.gap = "20px";

    sectionDocs.reverse().forEach(doc => grid.appendChild(createCard(doc)));

    sectionDiv.appendChild(h2);
    sectionDiv.appendChild(hr);
    sectionDiv.appendChild(grid);
    container.appendChild(sectionDiv);
  });

  document.getElementById("no-result").style.display = hasResult ? "none" : "block";
}

// فعال کردن جستجوی زنده و فیلترها
document.getElementById("search").addEventListener("input", e => {
  renderSections(e.target.value.toLowerCase());
}renderSections);
document.getElementById("filter-mahvar").addEventListener("change", renderSections);
document.getElementById("filter-zirmohvar").addEventListener("change", renderSections);

// اجرا
loadJSON();
</script>