Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML
<!-- فونت وزیر -->
<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="flex:1 1 300px; max-width:400px; padding:10px 15px; border:none; background:#f3f3f3; border-radius:30px; font-size:14px; 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";  // آی‌دی صفحه Confluence
const fileName = "form-data.json"; // نام فایل JSON در اتچمنت
let docs = [];

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

// زیرمحورها
const zirmohvarOptions = {
  "رهبری و مدیریت": ["رهبری و مدیریت کیفیت","مدیریت خطر، حوادث و بلایا","مدیریت منابع انسانی و سلامت حرفه‌ای","مدیریت خدمات پرستاری","فناوری و مدیریت اطلاعات سلامت","بهداشت محیط","مدیریت تجهیزات پزشکی"],
  "مراقبت و درمان": ["مراقبت‌های عمومی بالینی","مراقبت‌های حاد و اورژانس","مراقبت‌های جراحی و بیهوشی","مراقبت‌های مادر و نوزاد","پیشگیری و کنترل عفونت","مدیریت دارویی","خدمات تصویربرداری","خدمات آزمایشگاه","طب انتقال خون","خدمات سرپایی"],
  "حمایت از گیرنده خدمت": ["تأمین تسهیلات برای گیرنده خدمت","احترام به حقوق گیرنده خدمت"]
};

// آیکن‌ها
const sanadIcons = {
  "آیین نامه": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%A7%DB%8C%DB%8C%D9%86%20%D9%86%D8%A7%D9%85%D9%8713.png?api=v2&nonce=1765664452835",
  "پروتکل": "https://kb.h-soft.ir/download/thumbnails/85045112/%D9%BE%D8%B1%D9%88%D8%AA%DA%A9%D9%8413.png?api=v2&nonce=1765664452833",
  "خط‌مشی و روش": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%AE%D8%B7%20%D9%85%D8%B4%DB%8C13.png?api=v2&nonce=1765664452830",
  "دستورالعمل": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%8413.png?api=v2&nonce=1765664452829",
",
  "راهنما": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A713.png?api=v2&nonce=1765664452826",
  "روش اجرایی": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%B1%D9%88%D8%B4%20%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C%DB%8C13.png?api=v2&nonce=1765664452825",
  "سندفلوچارت": "https://kb.h-soft.ir/download/thumbnails/85045112/%D8%B3%D9%86%D8%AF13.png?api=v2&nonce=1765664452823",
  "فلوچارتکتابچه": "https://kb.h-soft.ir/download/thumbnails/85045112/%D9%81%D9%84%D9%88%DA%86%D8%A7%D8%B1%D8%AA13.png?api=v2&nonce=1765664452822",
  "کتابچهسند": "https://kb.h-soft.ir/download/thumbnails/85045112/%DA%A9%D8%AA%D8%A7%D8%A8%DA%86%D9%8713.png?api=v2&nonce=1765664452819"
"
};

// تشخیص آیکن سند
function detectSanadIconnormalizeSanadType(type){
  if (!type) return sanadIcons["سند"];
  const t =return type.trim().replace(/\u200c/g, " ").replace(/\s+/g, " ").toLowerCase();
}

function detectSanadIcon(type){
  const t = normalizeSanadType(type);
  if(t.includes("آیین")) return sanadIcons["آیین نامه"];
  if(t.includes("پروتکل")) return sanadIcons["پروتکل"];
  if(t.includes("خط مشی")) return sanadIcons["خط‌مشی و روش"];
  if(t.includes("دستورالعمل")) return sanadIcons["دستورالعمل"];
  if(t.includes("راهنما")) return sanadIcons["راهنما"];
  if(t.includes("روش اجرایی")) return sanadIcons["روش اجرایی"];
  if(t.includes("فلوچارت")) return sanadIcons["فلوچارت"];
  if(t.includes("کتابچه")) return sanadIcons["کتابچه"];
  return sanadIcons["سند"];
}

// پرساخت کردنکارت فیلتربا محورBase64
function populateMahvarFiltercreateCard(doc){
  const selcard = document.getElementByIdcreateElement("filter-mahvardiv");
  sections.forEach(s=>{
    const ocard.className = document.createElement("optioncard");

  let fileUrl o.value=s.value= "#";
    o.textContent=s.title;if(doc.document_file){
    sel.appendChild(o);try{
  });
}

// فیلتر زیرمحور
function updateZirmohvarFilter(){
  const mahvararr = doc.document_file.getElementById("filter-mahvar").value;
split(',');
      const selmime = document.getElementById("filter-zirmohvar");
  sel.innerHTML = '<option value="">انتخاب زیرمحور</option>';
  (zirmohvarOptions[mahvar]||[]).forEach(z=>{arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
    const o=document.createElement("option");
    o.value=z;
 let n = bstr.length;
     o.textContent=z;
 const u8arr  sel.appendChild(o= new Uint8Array(n);
   });
}

// ساخت کارت
function createCardwhile(docn--){
  const card u8arr[n] = documentbstr.createElementcharCodeAt("div"n); }
  card.className  = "card";

 const let fileUrlblob = "#";
  if(doc.document_file){
    try{new Blob([u8arr], { type: mime });
      const arrfileUrl = doc.document_file.split(','URL.createObjectURL(blob);
      const mime = arr[0].match(/:(.*?);/)[1];}catch(e){
      const bstr = atob(arr[1]console.error("خطا در ساخت فایل:", e);
    }
  }

 const u8arrcard.innerHTML = `
 new Uint8Array(bstr.length);
      for(let i=0;i<bstr.length;i++) u8arr[i]=bstr.charCodeAt(i);<div class="card-content">
      const blob = new Blob([u8arr], {type:mime});
<h3><b>${doc.document_name ?? doc.title ?? ""}</b></h3>
      <ul>
  fileUrl = URL.createObjectURL(blob);
    } catch(e){ console.error("خطا در ساخت فایل:",e); }
  }

  const iconUrl = detectSanadIcon(doc.noe_sanad);

  card.innerHTML = `
    <div class="card-content">
      <h3><b>${doc.document_name ?? doc.title ?? ""}</b></h3><li>زیرمحور: ${doc.zirmohvar || "-"}</li>
        <li>نوع سند: ${doc.noe_sanad || "-"}</li>
        <li>شماره استاندارد: ${doc.standard_no || "-"}</li>
        <li>تاریخ آخرین بازنگری: ${doc.date || "-"}</li>
      <ul></ul>
        <li>زیرمحور: ${doc.zirmohvar ?? "-"}</li><button class="open-btn">مشاهده</button>
    </div>
    <li>نوع سند: ${doc.noe_sanad ?? "-"}</li><div class="card-icon">
        <li>شماره استاندارد: <img src="${detectSanadIcon(doc.standard_no ?? "-"}</li>noe_sanad)}" alt="سند">
    </div>
  `;

  <li>تاریخconst آخرینbtn بازنگری: ${doc.date ?? "-"}</li>
      </ul>= card.querySelector(".open-btn");
  btn.addEventListener("click", () => {
      <button class="open-btn">${fileUrl!="#"?"مشاهده":"فایل ندارد"}</button>if(fileUrl !== "#"){
      try{
    </div>
    <div class="card-icon">window.open(fileUrl, "_blank");
      <img src="${iconUrl}" alt="سند">}catch(e){
    </div>
  `;

  const btn = card.querySelector(".open-btn"alert("خطا در باز کردن فایل!");
   if(fileUrl!="#"){
    btn.addEventListener("click",()=>{ window.open(fileUrl,"_blank"); } console.error(e);
  } else {
  }
  btn.disabled=true;
  } else {
     btn.style.cursor="not-allowed" alert("فایل موجود نیست یا Base64 نادرست است.");
    btn.style.background="#ccc";}
  });

  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 &&
      (!searchText || ((d.document_name ?? d.title ?? "").toLowerCase().includes(searchText))) &&
      (!selectedMahvar || d.mahvar === selectedMahvar) &&
      (!selectedZirmohvar || d.zirmohvar === selectedZirmohvar)
    );

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

    if(sectionDocs.length>0){
      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> 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";
}

// بارگذاری JSON
async function loadJSON()فیلترها
document.getElementById("search").addEventListener("input", renderSections);
document.getElementById("filter-mahvar").addEventListener("change", ()=>{
  const attRessel = await fetch(`/rest/api/document.getElementById("filter-zirmohvar");
  sel.innerHTML = '<option value="">انتخاب زیرمحور</option>';
  (zirmohvarOptions[document.getElementById("filter-mahvar").value] || []).forEach(z=>{
    const o = document.createElement("option");
    o.value = z;
    o.textContent = z;
    sel.appendChild(o);
  });
  renderSections();
});
document.getElementById("filter-zirmohvar").addEventListener("change", renderSections);

// بارگذاری 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> a.title === fileName);
    if(!file) 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);

  populateMahvarFilter();
  renderSections();
}

// رویدادها
document.getElementById("search").addEventListener("input",renderSections);
document.getElementById("filter-mahvar").addEventListener("change",()=>{
  updateZirmohvarFilter();
;
    const jsonText = await fetch(downloadUrl, { credentials:"include" }).then(r=>r.text());
    docs = JSON.parse(jsonText);
    renderSections();
  }catch(e);
document.getElementById("filter-zirmohvar").addEventListener("change",renderSections);{
    console.error("خطا در بارگذاری JSON:", e);
  }
}

loadJSON();
</script>