| 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="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" } ]; // تعریف زیرمحورهای هر محور const zirmohvarOptions = { modiriyat: [ "رهبری و مدیریت کیفیت", "مدیریت خطر، حوادث و بلایا", "مدیریت منابع انسانی و سلامت حرفهای", "مدیریت خدمات پرستاری", "فناوری و مدیریت اطلاعات سلامت", "بهداشت محیط", "مدیریت تجهیزات پزشکی" ], mored: [ "مراقبتهای عمومی بالینی", "مراقبتهای حاد و اورژانس", "مراقبتهای جراحی و بیهوشی", "مراقبتهای مادر و نوزاد", "پیشگیری و کنترل عفونت", "مدیریت دارویی", "خدمات تصویربرداری", "خدمات آزمایشگاه", "طب انتقال خون", "خدمات سرپایی" ], 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); populateMahvarFilter(); renderSections(); } catch(err){ console.error("Error loading JSON:", err); } } // پر کردن فیلتر محور function populateMahvarFilter(){ const mahvarSelect = document.getElementById("filter-mahvar"); sections.forEach(sec => { const option = document.createElement("option"); option.value = sec.value; option.textContent = sec.title; mahvarSelect.appendChild(option); }); } // پر کردن زیرمحور وابسته به محور انتخاب شده function updateZirmohvarFilter(){ const mahvar = document.getElementById("filter-mahvar").value; const zirmohvarSelect = document.getElementById("filter-zirmohvar"); zirmohvarSelect.innerHTML = '<option value="">انتخاب زیرمحور</option>'; // پاک کردن قبلی if(mahvar && zirmohvarOptions[mahvar]){ zirmohvarOptions[mahvar].forEach(z => { const option = document.createElement("option"); option.value = z; option.textContent = z; 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", renderSections); document.getElementById("filter-mahvar").addEventListener("change", e() => { updateZirmohvarFilter(); renderSections(e.target.value.toLowerCase(); }); }document.getElementById("filter-zirmohvar").addEventListener("change", renderSections); // اجرا loadJSON(); </script> |
...