<!-- فونت وزیر -->
<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 typeid="textsearch" idtype="search-inputtext" 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="sectionsdoc-containergrid" style="display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; padding:030px 40px 60px; direction:rtl;"></div>
<style>
.card {
<!-- پیام وقتی چیزی پیدا نشد -->
<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;
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:#555#333;
}
.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:white#fff;
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.large { transform:scale(1.05); background:#fafafa; }
.card:hover { transform:scale(1.03); background:#fdfdfd; }
@media (max-width:900px){ #sections-container > div > div { #doc-grid{grid-template-columns:1fr; } }
</style>
<script>
const pageIdPAGE_ID = "85045112"; // صفحه حاوی JSON
const fileNameJSON_FILE = "form-data.json";
letconst docsgrid = [];
// بخشها با عنوان و mahvar مرتبط
const sections = [
{ title: "رهبری و مدیریت", value: "modiriyat" },
{ title: "مراقبت و درمان", value: "mored" },
{ title: "حمایت از گیرنده خدمت", value: "hemayat" }
document.getElementById("doc-grid");
const searchInput = document.getElementById("search");
const noResult = document.getElementById("no-result");
let docs = [];
// دریافت JSON
async function loadJSON(){
try {
const attResr = await fetch(`/rest/api/content/${pageIdPAGE_ID}/child/attachment`attachment?filename=${JSON_FILE}`, { credentials: "include" });
const attDatadata = await attResr.json();
const file = attDatadata.results.find(a => a.title === fileName) && data.results[0] ? data.results[0] : null;
if (!file) { console.warn("JSON file not found."); return; }
const downloadUrl = new URL(file._links.download, window.location.origin).href;
const jsonTexttext = await fetch(downloadUrl, { credentials:"include" }).then(r => r>r.text());
docs = JSON.parse(jsonTexttext);
displaySectionsrenderGrid();
} catch(erre) {
console.error("Error loading JSON:", erre);
}
}
// ساخت کارت و تبدیل Base64 به Blob URL
function createDocCardcreateCard(doc){
const card = document.createElement("div");
card.className="card";
// لینک دانلود
تبدیل Base64 به Blob URL
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 displaySections(){
const container = document.getElementById("sections-container");
container.innerHTML = renderGrid(filter=""){
grid.innerHTML="";
const filtered = sectionsdocs.forEachfilter(section d=> {
const sectionDivsearch = documentfilter.createElementtoLowerCase("div");
return sectionDiv.style.marginBottom = "50px";
const h2 = document.createElement("h2");
h2.style.textAlign = "center";
(d.title??"").toLowerCase().includes(search) ||
h2.style.fontFamily = "Vazir, Tahoma";
h2.style.color = "#333";(d.mahvar??"").toLowerCase().includes(search) ||
h2.style.fontWeight = "600";
h2.style.marginBottom = "8px";
h2.textContent = section.title;
const hr = document.createElement("hr");
hr.style.border = "3px solid #3f8cff";
hr.style.width = "80px";
hr.style.margin = "0 auto 20px";
const grid = document.createElement("div");(d.zirmohvar??"").toLowerCase().includes(search);
});
if(filtered.length === 0){
gridnoResult.style.display = "gridblock";
} grid.style.gridTemplateColumns = "repeat(auto-fill, minmax(280px,1fr))";else {
gridnoResult.style.gapdisplay = "20pxnone";
docsfiltered.filter(d => d.mahvar === section.valuereverse().forEach(doc => {
gridd=>grid.appendChild(createDocCard(doc));
});
sectionDiv.appendChild(h2);
sectionDiv.appendChild(hr);
sectionDiv.appendChild(grid);
container.appendChild(sectionDiv);
});createCard(d)));
}
}
// افکتجستجوی بزرگنمایی کارتزنده
documentsearchInput.addEventListener("clickinput", e => {
const card = renderGrid(e.target.closest(".card");
if(card) card.classList.toggle("large"value);
});
// اجرا
loadJSON();
</script>
|