הקוד המשודרג (ללא שיתוף)
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>מערכת ניהול - ימות המשיח</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<style>
/* עיצוב כללי - לא נגענו */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; margin: 0; padding: 20px; direction: rtl; }
.main-card { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.toolbar { display: flex; gap: 15px; margin-bottom: 25px; align-items: center; }
.btn { padding: 9px 18px; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none; position: absolute; background-color: white; min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15); z-index: 2000; border-radius: 8px; overflow: hidden; top: 100%; right: 0;
}
.dropdown-content button {
width: 100%; padding: 12px; border: none; background: none; text-align: right; cursor: pointer; border-bottom: 1px solid #eee;
}
.dropdown-content button:hover { background: #f8fafc; }
.show { display: block; }
/* טבלה ראשית - יישור מרכז */
#data-table { width: 100% !important; border-collapse: collapse; }
#data-table th, #data-table td { text-align: center !important; padding: 12px !important; border-bottom: 1px solid #e5e7eb; }
#data-table thead th { background: #f1f5f9; color: #475569; }
/* שינוי 1+3: הסרת חיצים ומיקום חיפוש */
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none !important; cursor: default !important; }
.dataTables_filter { margin-bottom: 15px; text-align: right !important; float: none !important; display: flex; align-items: center; }
.dataTables_filter input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; margin-right: 10px; width: 250px; }
/* פאנל סיכום שמאלי (החלק ששונה) */
#pivot-panel { position: fixed; left: -420px; top: 0; width: 400px; height: 100vh; background: white; box-shadow: 10px 0 30px rgba(0,0,0,0.2); transition: 0.4s ease; z-index: 5000; display: flex; flex-direction: column; }
.pivot-active { left: 0 !important; }
.pivot-tab { position: absolute; left: 100%; top: 80px; background: #1e293b; color: white; padding: 15px 10px; border-radius: 0 8px 8px 0; cursor: pointer; writing-mode: vertical-rl; font-weight: bold; }
.pivot-body { flex: 1; overflow: auto; padding: 25px; }
/* עיצוב טבלת הסיכום החדשה -> שונה לעיצוב רשימה (שינוי 2) */
.summary-select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 16px; margin-bottom: 20px; outline: none; }
.summary-list { list-style: none; padding: 0; margin: 0; }
.summary-list li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #e2e8f0; }
.summary-list li:last-child { border-bottom: none; }
.summary-count { background: #e2e8f0; padding: 2px 8px; border-radius: 12px; font-weight: bold; font-size: 14px; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 6000; }
.modal-content { background: white; width: 400px; margin: 100px auto; padding: 25px; border-radius: 12px; }
</style>
</head>
<body>
<div id="pivot-panel">
<div class="pivot-tab" onclick="document.getElementById('pivot-panel').classList.toggle('pivot-active')">📊 סיכום נתונים מהיר</div>
<div class="pivot-body">
<h2 style="margin-top:0; font-size: 22px;">ניתוח כמויות</h2>
<p style="color: #64748b;">בחר עמודה כדי לראות את כמות המופעים:</p>
<select id="pivot-select" class="summary-select" onchange="updatePivotSummary(this.value)">
<option value="">-- בחר עמודה לסיכום --</option>
</select>
<div id="pivot-summary-container">
<p style="text-align:center; color:#94a3b8; margin-top:40px;">לא נבחרה עמודה</p>
</div>
</div>
</div>
<div class="main-card">
<div class="toolbar">
<button class="btn" style="background:#10b981" onclick="exportToExcel()">ייצוא אקסל 📥</button>
<div class="dropdown">
<button class="btn" onclick="toggleDropdown()">הגדרות ⚙️</button>
<div id="settingsDrop" class="dropdown-content">
<button onclick="openModal('token-modal')">ניהול טוקנים</button>
<button onclick="openModal('col-modal')">ניהול עמודות</button>
</div>
</div>
<input type="text" id="path-input" placeholder="נתיבים (למשל: 1, 2)" style="padding: 9px; width: 250px; border: 1px solid #cbd5e1; border-radius: 6px;">
<button class="btn" onclick="initialLoad()">טען נתונים</button>
</div>
<table id="data-table" class="display">
<thead><tr id="table-head"></tr></thead>
<tbody></tbody>
</table>
</div>
<div id="token-modal" class="modal"><div class="modal-content">
<h3>ניהול טוקנים</h3>
<div id="token-list"></div>
<hr>
<input type="text" id="new-token" placeholder="הכנס טוקן חדש" style="width:70%; padding:5px;">
<button class="btn" onclick="addToken()">הוסף</button>
<br><br>
<button class="btn" style="background:#64748b" onclick="closeModal('token-modal')">סגור</button>
</div></div>
<div id="col-modal" class="modal"><div class="modal-content">
<h3>ניהול עמודות</h3>
<div id="col-list" style="max-height: 300px; overflow-y: auto;"></div>
<br>
<button class="btn" onclick="drawTable()">החל שינויים</button>
<button class="btn" style="background:#64748b" onclick="closeModal('col-modal')">סגור</button>
</div></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
let activeToken = localStorage.getItem('activeToken') || '';
let rawDataStore = [];
let allHeaders = new Set();
function toggleDropdown() { document.getElementById("settingsDrop").classList.toggle("show"); }
window.onclick = function(event) { if (!event.target.matches('.btn')) {
var d = document.getElementById("settingsDrop"); if(d && d.classList.contains('show')) d.classList.remove('show');
}}
function openModal(id) { document.getElementById(id).style.display = 'block'; }
function closeModal(id) { document.getElementById(id).style.display = 'none'; }
function exportToExcel() { XLSX.writeFile(XLSX.utils.table_to_book(document.getElementById('data-table')), 'DataReport.xlsx'); }
function renderTokens() {
const tokens = JSON.parse(localStorage.getItem('myTokens') || '[]');
document.getElementById('token-list').innerHTML = tokens.map(t => `
<div style="display:flex; justify-content:space-between; margin-bottom:10px; align-items:center;">
<span onclick="setToken('${t}')" style="cursor:pointer; ${t===activeToken?'color:blue; font-weight:bold;':''}">${t.substring(0,12)}...</span>
<button onclick="deleteToken('${t}')" style="background:#f87171; color:white; border:none; border-radius:4px; padding:2px 8px;">מחק</button>
</div>`).join('');
}
function setToken(t) { activeToken = t; localStorage.setItem('activeToken', t); location.reload(); }
function addToken() { const val = document.getElementById('new-token').value; if(val) { let tk = JSON.parse(localStorage.getItem('myTokens')||'[]'); tk.push(val); localStorage.setItem('myTokens', JSON.stringify(tk)); renderTokens(); } }
function deleteToken(t) { let tk = JSON.parse(localStorage.getItem('myTokens')||'[]'); tk = tk.filter(x => x!==t); localStorage.setItem('myTokens', JSON.stringify(tk)); renderTokens(); }
async function initialLoad() {
rawDataStore = []; allHeaders.clear();
const paths = document.getElementById('path-input').value.split(',');
for(let p of paths) {
let pT = p.trim(); if(!pT) continue;
try {
let iniMap = {};
let resIni = await fetch(`https://www.call2all.co.il/ym/api/DownloadFile?token=${activeToken}&path=ivr2:${pT}/ApprovalAll.ini`);
if (!resIni.ok) resIni = await fetch(`https://www.call2all.co.il/ym/api/DownloadFile?token=${activeToken}&path=ivr2:${pT}/Approval.ini`);
if (resIni.ok) {
const text = await resIni.text();
text.split('\n').forEach(l => { if(l.includes('=')) { const pts = l.split('='); iniMap[pts[0].trim()] = pts[1].trim().replace(/['"\r]/g, ''); } });
}
const res = await fetch(`https://www.call2all.co.il/ym/api/DownloadFile?token=${activeToken}&path=ivr2:${pT}/ApprovalAll.ymgr`);
const dataText = await res.text();
dataText.split('\n').filter(l => l.includes('#')).forEach(l => {
const row = {};
l.split('%').forEach(part => { const [k, v] = part.split('#'); if(k) { const key = iniMap[k] || k; row[key] = v; allHeaders.add(key); } });
rawDataStore.push(row);
});
} catch(e) { console.error(e); }
}
if(rawDataStore.length > 0) {
document.getElementById('col-list').innerHTML = Array.from(allHeaders).map(h => `<label style="display:block; padding:5px;"><input type="checkbox" class="col-filter" value="${h}" checked> ${h}</label>`).join('');
drawTable();
}
}
function drawTable() {
const checkboxes = document.querySelectorAll('.col-filter');
let selectedCols = Array.from(allHeaders);
if(checkboxes.length > 0) selectedCols = Array.from(checkboxes).filter(c => c.checked).map(c => c.value);
if ($.fn.DataTable.isDataTable('#data-table')) $('#data-table').DataTable().destroy();
$('#table-head').empty(); $('#data-table tbody').empty();
selectedCols.forEach(h => $('#table-head').append(`<th>${h}</th>`));
const table = $('#data-table').DataTable({
paging: false, info: false,
ordering: false, /* שינוי 1: ביטול מיון בטבלה עצמה */
language: {
search: "חיפוש כללי בטבלה:", /* שינוי 3: החלפת מילת החיפוש */
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/he.json'
}
});
rawDataStore.forEach(row => { table.row.add(selectedCols.map(h => row[h] || '')); });
table.draw();
// עדכון רשימת העמודות בתפריט הסיכון המהיר
const pivotSelect = document.getElementById('pivot-select');
pivotSelect.innerHTML = '<option value="">-- בחר עמודה לסיכום --</option>' +
selectedCols.map(h => `<option value="${h}">${h}</option>`).join('');
document.getElementById('pivot-summary-container').innerHTML = '<p style="text-align:center; color:#94a3b8; margin-top:40px;">בחר עמודה מהתפריט למעלה</p>';
closeModal('col-modal');
}
// פונקציית הסיכום החדשה - פשוטה ומהירה (שינוי 2: רשימה במקום טבלה)
function updatePivotSummary(col) {
if(!col) return;
const counts = {};
rawDataStore.forEach(row => {
const val = row[col] || '(ריק)';
counts[val] = (counts[val] || 0) + 1;
});
const sortedEntries = Object.entries(counts).sort((a, b) => b[1] - a[1]);
let html = `<ul class="summary-list">`;
sortedEntries.forEach(([val, count]) => {
html += `<li><span>${val}</span><span class="summary-count">${count}</span></li>`;
});
html += `</ul>`;
document.getElementById('pivot-summary-container').innerHTML = html;
}
renderTokens();
</script>
</body>
</html>
