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 style="display:flex; justify-content:center; margin:30px 0;">
  <input idtype="searchtext" typeid="textsearch-input" placeholder="جستجو دربر عنوان،اساس محورعنوان ویا زیرمحورمحور" 
    style="width:60%; max-width:600px; padding:12px 16px; border:none; background:#f3f3f3; border-radius:30px; font-size:16px; outline:none; text-align:right; font-family:Vazir, Tahoma;">
</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>
<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;
    transition: all 0.3s ease;
    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#555;
  }

  .card-content ul {
    margin:0;
    padding-right:15px;
    list-style-type:disc;
    color:#555;
    font-size:13px;
 color:#555; }

  .download-btn {
    display:inline-block;
    background:#b40074;
    color:#fffwhite;
    border:none;
    border-radius:25px;
    padding:4px 18px;
    font-size:13px;
    text-decoration:none;
    margin-top:12px;
    cursor:pointer;
    text-align:center;
  }
  .download-btn:hover { background:#d50088; }

  .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.large { transform:scale(1.0305); background:#fdfdfd#fafafa; }

.section-title { text-align:center; font-family:Vazir, Tahoma; font-weight:600; color:#333; margin-bottom:8px; }
.section-hr { border:3px solid #3f8cff; width:80px; margin:0 auto 20px; }

@media.card:hover { transform:scale(1.03); background:#fdfdfd; }

  @media (max-width:900px){ #sections-container > div > div { grid-template-columns:1fr; } }
</style>

<script>
const PAGE_IDpageId = "85045112";
const JSON_FILEfileName = "form-data.json";

let docs = [];

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

let docs = [];
const searchInput = document.getElementById("search");
const container = document.getElementById("sections-container");
const noResult = document.getElementById("no-result");

// دریافت JSON
async function loadJSON(){
  try {
      const rattRes = await fetch(`/rest/api/content/${PAGE_IDpageId}/child/attachment?filename=${JSON_FILE}`attachment`, { credentials: "include" });
      const dataattData = await rattRes.json();
      const file = dataattData.results && data.results[0] ? data.results[0] : null.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 textjsonText = await fetch(downloadUrl, { credentials:"include" }).then(r =>r> r.text());
      docs = JSON.parse(textjsonText);
      renderSectionsdisplaySections();

  } catch(eerr) {
      console.error("Error loading JSON:", eerr);
  }
}

// ساخت کارت و تبدیل Base64 به Blob URL
function createCardcreateDocCard(doc){
    const card = document.createElement("div");
    card.className="card";

    // لینک دانلود
    let downloadLink = "#";
    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 });
        downloadLink = URL.createObjectURL(blob);
    }

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

// رندر کارت‌ها درنمایش سه بخش باو فیلتر جستجوکارت‌ها
function renderSectionsdisplaySections(){
  container.innerHTML="";
  letconst hasAnycontainer = falsedocument.getElementById("sections-container");
  const  filtercontainer.innerHTML = searchInput.value.toLowerCase()"";

    sections.forEach(section => {
        const filteredsectionDiv = docsdocument.filter(d => d.mahvar === section.value &&
createElement("div");
        sectionDiv.style.marginBottom = ((d.title??"").toLowerCase().includes(filter) ||
50px";

        const h2 = (d.zirmohvar??"").toLowerCase().includes(filter) ||
document.createElement("h2");
        (d.mahvar??"").toLowerCase().includes(filter))h2.style.textAlign = "center";
    );

    if(filtered.lengthh2.style.fontFamily === 0) return;
 "Vazir, Tahoma";
    hasAny = true;

    const sectionDiv = document.createElement("div");
h2.style.color = "#333";
     const   h2.style.fontWeight = document.createElement("h2600");
        h2.classNamestyle.marginBottom = "section-title8px";
        h2.textContent = section.title;

        const hr = document.createElement("hr");
        hr.classNamestyle.border = "3px solid #3f8cff";
        hr.style.width = "section-hr80px";
        hr.style.margin = "0 auto 20px";

        const grid = document.createElement("div");
        grid.style.display = "grid";
        grid.style.gridTemplateColumns = "repeat(auto-fill, minmax(280px,1fr))";
        grid.style.gap = "20px";

    filtered.reverse(    docs.filter(d => d.mahvar === section.value).forEach(doc => {
            grid.appendChild(createCardcreateDocCard(doc));
        });

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

// افکت noResult.style.display = hasAny ? "none" : "block";
}

// جستجوی زنده
searchInput.addEventListener("input", ()=>renderSections());

بزرگ‌نمایی کارت
document.addEventListener("click", e => {
    const card = e.target.closest(".card");
    if(card) card.classList.toggle("large");
});

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