סדר מיוחד שיגרום לכם להפסיק להתרוצץ באינדקסים השונים

lavitoren הטי"ל

@שולי את זה הבנתי
כוונתי הייתה לקובץ HTML שתעשה את העבודה כמו כל הדברים פה

lavitoren הטי"ל

@שולי ושמתי לך אפשרות לערוך למקרה שתהיה משועמם...

שולי

@lavitoren-הטי-ל לא הבנתי

פיתה

@שולי ושמתי לך אפשרות לערוך למקרה שתהיה משועמם...

שים לי גם למקרה כזה

lavitoren הטי"ל

@שולי אם אתה רוצה אז כעת אתה יכול לערוך כאן את הפוסט הראשון אתה מבין?
@פיתה שמתי לך!

שולי

@lavitoren-הטי-ל לא הבנתי חח אתה מתכון לרמת עריכה של הפוסט..

אA

@lavitoren-הטי-ל
סתם משהו קטן שיצרתי בAI בספונטני...

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>פורטל שלוחות ומודולים היררכי</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f1f5f9;
            color: #1e293b;
            padding-bottom: 60px;
            direction: rtl;
        }

        /* סרגל ניהול עליון */
        .admin-bar {
            background: #0f172a;
            color: #fff;
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .brand {
            font-size: 1.15rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .admin-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .btn {
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-primary { background: #2563eb; color: #fff; }
        .btn-primary:hover { background: #1d4ed8; }

        .btn-warning { background: #d97706; color: #fff; }
        .btn-warning:hover { background: #b45309; }

        .btn-danger { background: #dc2626; color: #fff; }
        .btn-danger:hover { background: #b91c1c; }

        .btn-outline { background: transparent; border: 1px solid #94a3b8; color: #fff; }
        .btn-outline:hover { background: rgba(255,255,255,0.1); }

        .btn-sm { padding: 4px 8px; font-size: 0.8rem; }

        /* אזור תוכן */
        .container {
            max-width: 1100px;
            margin: 25px auto;
            padding: 0 15px;
        }

        /* נתיב ניווט ופירורי לחם */
        .nav-bar {
            background: #ffffff;
            padding: 12px 18px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            border: 1px solid #e2e8f0;
        }

        .breadcrumbs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 0.95rem;
        }

        .breadcrumb-item {
            color: #2563eb;
            text-decoration: none;
            cursor: pointer;
            font-weight: 600;
        }

        .breadcrumb-item:hover {
            text-decoration: underline;
        }

        .breadcrumb-separator {
            color: #94a3b8;
        }

        .breadcrumb-current {
            color: #64748b;
            font-weight: bold;
        }

        /* כותרת הקטגוריה הנוכחית */
        .current-view-header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 12px;
        }

        .current-view-header h2 {
            font-size: 1.6rem;
            color: #1e3a8a;
        }

        .current-view-header p {
            color: #64748b;
            font-size: 0.95rem;
            margin-top: 4px;
        }

        /* רשת הריבועים */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 18px;
        }

        /* עיצוב כרטיס */
        .card {
            background: #ffffff;
            border-radius: 12px;
            padding: 18px;
            min-height: 135px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-decoration: none;
            color: inherit;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            cursor: pointer;
            position: relative;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 18px -3px rgba(0,0,0,0.09);
        }

        /* כרטיס תיקייה */
        .card.is-folder {
            border-top: 4px solid #2563eb;
            background: #f8fafc;
        }
        .card.is-folder:hover {
            border-color: #2563eb;
        }

        /* כרטיס קישור */
        .card.is-link {
            border-top: 4px solid #10b981;
        }
        .card.is-link:hover {
            border-color: #10b981;
        }

        .card-badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 6px;
            margin-bottom: 8px;
            width: fit-content;
        }

        .badge-folder { background: #dbeafe; color: #1e40af; }
        .badge-link { background: #d1fae5; color: #065f46; }

        .card-title {
            font-size: 1.1rem;
            font-weight: bold;
            color: #0f172a;
            margin-bottom: 4px;
            line-height: 1.35;
        }

        .card-desc {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.3;
        }

        .card-action {
            margin-top: 12px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card.is-folder .card-action { color: #2563eb; }
        .card.is-link .card-action { color: #10b981; }

        .card-admin-btns {
            display: none;
            position: absolute;
            top: 8px;
            left: 8px;
            gap: 4px;
            background: rgba(255,255,255,0.95);
            padding: 3px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        body.admin-mode .card-admin-btns {
            display: flex;
        }

        body.admin-mode .card {
            border-style: dashed;
        }

        /* הודעת תיקייה ריקה */
        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 50px 20px;
            background: #fff;
            border-radius: 12px;
            border: 2px dashed #cbd5e1;
            color: #64748b;
        }

        /* מודאל */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal {
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            width: 90%;
            max-width: 480px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
        }

        .modal h3 { margin-bottom: 16px; color: #0f172a; }
        .form-group { margin-bottom: 14px; }
        .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
        .form-group input, .form-group textarea, .form-group select {
            width: 100%;
            padding: 9px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 0.95rem;
        }

        .type-selector {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }

        .type-option {
            flex: 1;
            border: 2px solid #cbd5e1;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .type-option input { display: none; }
        .type-option.active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body class="admin-mode">

    <!-- סרגל ניהול עליון -->
    <div class="admin-bar">
        <div class="brand">📂 פורטל מודולים ושלוחות</div>
        <div class="admin-actions">
            <button class="btn btn-warning" onclick="toggleAdminMode()" id="toggleAdminBtn">👀 צפייה כמבקר</button>
            <button class="btn btn-primary" onclick="openItemModal()">➕ הוסף ריבוע כאן</button>
            <button class="btn btn-outline" onclick="resetToDefaults()">🔄 איפוס נתונים</button>
        </div>
    </div>

    <div class="container">
        <!-- סרגל ניווט ופירורי לחם -->
        <div class="nav-bar">
            <div class="breadcrumbs" id="breadcrumbsContainer"></div>
            <button class="btn btn-sm btn-outline" style="color:#333; border-color:#cbd5e1;" id="backBtn" onclick="goBack()">⬅️ חזור</button>
        </div>

        <!-- כותרת הקטגוריה הנוכחית -->
        <div class="current-view-header">
            <div>
                <h2 id="currentCategoryTitle">דף הבית</h2>
                <p id="currentCategoryDesc">בחר קטגוריה או קישור להמשך</p>
            </div>
        </div>

        <!-- רשת הריבועים -->
        <div class="cards-grid" id="cardsGrid"></div>
    </div>

    <!-- מודאל הוספה ועריכה -->
    <div class="modal-overlay" id="itemModal">
        <div class="modal">
            <h3 id="modalTitle">הוספת פריט חדש</h3>
            <input type="hidden" id="editItemIndex">

            <label style="font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; display: block;">מה תרצה ליצור?</label>
            <div class="type-selector">
                <label class="type-option active" id="typeOptionFolder" onclick="selectType('folder')">
                    <input type="radio" name="itemType" value="folder" checked>
                    📁 תת-קטגוריה (תיקייה)
                </label>
                <label class="type-option" id="typeOptionLink" onclick="selectType('link')">
                    <input type="radio" name="itemType" value="link">
                    🔗 קישור ישיר
                </label>
            </div>

            <div class="form-group">
                <label>כותרת הריבוע:</label>
                <input type="text" id="itemTitleInput" placeholder="לדוגמה: הגדרות בסיסיות או מודול תפריט">
            </div>

            <div class="form-group">
                <label>תיאור קצר (אופציונלי):</label>
                <input type="text" id="itemDescInput" placeholder="הסבר קצר על מה שיש בפנים...">
            </div>

            <div class="form-group" id="urlGroup" style="display: none;">
                <label>כתובת קישור (URL):</label>
                <input type="text" id="itemUrlInput" placeholder="https://example.com/...">
            </div>

            <div class="modal-actions">
                <button class="btn btn-outline" style="color:#333; border-color:#cbd5e1;" onclick="closeModal()">ביטול</button>
                <button class="btn btn-primary" onclick="saveItem()">שמור</button>
            </div>
        </div>
    </div>

    <script>
        // מבנה נתונים ראשוני היררכי מלא
        const defaultData = {
            id: "root",
            title: "דף הבית",
            desc: "פורטל שלוחות ומודולים למערכת",
            children: [
                {
                    id: "c1",
                    type: "folder",
                    title: "⚙️ הגדרות בסיסיות",
                    desc: "תפריטים, השמעות, הקלטות וחדר ועידה",
                    children: [
                        { type: "link", title: "מודול תפריט", desc: "הגדרת מקשים ותפריטים", url: "https://example.com/menu" },
                        { type: "link", title: "מודול השמעת קבצים", desc: "השמעת הודעות וקבצים", url: "https://example.com/playback" },
                        { type: "link", title: "מודול הקלטות", desc: "הקלטות משתמשים", url: "https://example.com/recording" },
                        { type: "link", title: "חדר ועידה / שידור חי", desc: "ניהול חדרי שידור", url: "https://example.com/conference" },
                        { type: "link", title: "כניסה לניהול", desc: "גישה לניהול טלפוני", url: "https://example.com/admin" }
                    ]
                },
                {
                    id: "c2",
                    type: "folder",
                    title: "📢 צינתוקים, תפוצה וקמפיין",
                    desc: "ניהול מנויים, שיגור קמפיינים וצינתוקים",
                    children: [
                        { type: "link", title: "מודול צינתוקים חינמיים", desc: "", url: "https://example.com/tzintuk" },
                        { type: "link", title: "מודול רשימת תפוצה", desc: "הוספה, הסרה וכמות חברים", url: "https://example.com/list" },
                        { type: "link", title: "קמפיין", desc: "שליחת הודעות המונית", url: "https://example.com/campaign" }
                    ]
                },
                {
                    id: "c3",
                    type: "folder",
                    title: "🔀 מעברים שונים במערכת",
                    desc: "ניתובים והעברות בין שלוחות",
                    children: [
                        { type: "link", title: "מעבר לשלוחה אחרת", desc: "ניתוב חכם", url: "https://example.com/routing" }
                    ]
                },
                {
                    id: "c4",
                    type: "folder",
                    title: "📚 לימודים, נקודות וחלוקות",
                    desc: "מבחנים, טריוויה, מעקב לימודים וניקוד",
                    children: [
                        { type: "link", title: "טריוויה", desc: "", url: "https://example.com/trivia" },
                        { type: "link", title: "מודול מבחן", desc: "", url: "https://example.com/exam" },
                        { type: "link", title: "מודול מבחן אמריקאי", desc: "שילוב טריוויה ומבחן", url: "https://example.com/american" },
                        { type: "link", title: "מודול נקודות", desc: "השמעה, צבירה וניהול נקודות", url: "https://example.com/points" },
                        { type: "link", title: "חלוקת תהילים משניות גמרא", desc: "", url: "https://example.com/tehilim" },
                        { type: "link", title: "מעקב לימודים", desc: "מעקב אישי", url: "https://example.com/tracking" }
                    ]
                },
                {
                    id: "c5",
                    type: "folder",
                    title: "🎙️ שידורים חיים וקליקרים",
                    desc: "שידור חי מרובה קבצים + קליקרים",
                    children: [
                        { type: "link", title: "שידור חי מרובה קבצים + קליקרים", desc: "הפעלה חיה", url: "https://example.com/live" }
                    ]
                }
            ]
        };

        // טעינת נתונים
        let rootData = JSON.parse(localStorage.getItem('portal_tree_data')) || defaultData;
        let currentPath = []; // מערך אינדקסים כדי לדעת איפה אנחנו בעץ
        let isAdmin = true;
        let selectedType = 'folder';

        function persist() {
            localStorage.setItem('portal_tree_data', JSON.stringify(rootData));
            render();
        }

        // מציאת התיקייה הנוכחית בעץ
        function getCurrentFolder() {
            let current = rootData;
            for (let idx of currentPath) {
                current = current.children[idx];
            }
            return current;
        }

        function toggleAdminMode() {
            isAdmin = !isAdmin;
            document.body.classList.toggle('admin-mode', isAdmin);
            document.getElementById('toggleAdminBtn').textContent = isAdmin ? "👀 צפייה כמבקר" : "✏️ מצב ניהול";
        }

        // רינדור המסך
        function render() {
            const currentFolder = getCurrentFolder();
            const grid = document.getElementById('cardsGrid');
            grid.innerHTML = '';

            // כותרת
            document.getElementById('currentCategoryTitle').textContent = currentFolder.title;
            document.getElementById('currentCategoryDesc').textContent = currentFolder.desc || '';

            // ניווט פירורי לחם
            renderBreadcrumbs();

            // כפתור חזור
            document.getElementById('backBtn').style.display = currentPath.length > 0 ? 'inline-flex' : 'none';

            if (!currentFolder.children || currentFolder.children.length === 0) {
                grid.innerHTML = `
                    <div class="empty-state">
                        <h3>תיקייה זו ריקה כרגע</h3>
                        <p>לחצו על "➕ הוסף ריבוע כאן" בסרגל העליון כדי להוסיף תת-קטגוריה או קישור.</p>
                    </div>
                `;
                return;
            }

            // יצירת הכרטיסים
            currentFolder.children.forEach((item, index) => {
                const card = document.createElement('div');
                const isFolder = item.type === 'folder';
                card.className = `card ${isFolder ? 'is-folder' : 'is-link'}`;

                card.innerHTML = `
                    <div class="card-admin-btns" onclick="event.stopPropagation();">
                        <button class="btn btn-sm btn-warning" onclick="openItemModal(${index})">✏️</button>
                        <button class="btn btn-sm btn-danger" onclick="deleteItem(${index})">🗑️</button>
                    </div>
                    <div>
                        <span class="card-badge ${isFolder ? 'badge-folder' : 'badge-link'}">
                            ${isFolder ? '📁 תת-קטגוריה' : '🔗 קישור ישיר'}
                        </span>
                        <div class="card-title">${item.title}</div>
                        ${item.desc ? `<div class="card-desc">${item.desc}</div>` : ''}
                    </div>
                    <div class="card-action">
                        <span>${isFolder ? `פתיחה (${(item.children || []).length} פריטים)` : 'כניסה לקישור'}</span>
                        <span>${isFolder ? '⟵' : '↗'}</span>
                    </div>
                `;

                // לחיצה על כרטיס
                card.onclick = () => {
                    if (isFolder) {
                        currentPath.push(index);
                        render();
                    } else {
                        if (item.url) window.open(item.url, '_blank');
                    }
                };

                grid.appendChild(card);
            });
        }

        // פירורי לחם
        function renderBreadcrumbs() {
            const container = document.getElementById('breadcrumbsContainer');
            container.innerHTML = '';

            // דף הבית
            const homeSpan = document.createElement('span');
            homeSpan.className = currentPath.length === 0 ? 'breadcrumb-current' : 'breadcrumb-item';
            homeSpan.textContent = '🏠 ' + rootData.title;
            if (currentPath.length > 0) {
                homeSpan.onclick = () => { currentPath = []; render(); };
            }
            container.appendChild(homeSpan);

            // שלבים בדרך
            let tempFolder = rootData;
            currentPath.forEach((stepIndex, i) => {
                tempFolder = tempFolder.children[stepIndex];
                
                const sep = document.createElement('span');
                sep.className = 'breadcrumb-separator';
                sep.textContent = ' ⟵ ';
                container.appendChild(sep);

                const itemSpan = document.createElement('span');
                const isLast = (i === currentPath.length - 1);
                itemSpan.className = isLast ? 'breadcrumb-current' : 'breadcrumb-item';
                itemSpan.textContent = tempFolder.title;

                if (!isLast) {
                    itemSpan.onclick = () => {
                        currentPath = currentPath.slice(0, i + 1);
                        render();
                    };
                }
                container.appendChild(itemSpan);
            });
        }

        function goBack() {
            if (currentPath.length > 0) {
                currentPath.pop();
                render();
            }
        }

        /* --- מודאל ועריכה --- */
        function selectType(type) {
            selectedType = type;
            document.getElementById('typeOptionFolder').classList.toggle('active', type === 'folder');
            document.getElementById('typeOptionLink').classList.toggle('active', type === 'link');
            document.getElementById('urlGroup').style.display = type === 'link' ? 'block' : 'none';
        }

        function openItemModal(editIndex = null) {
            document.getElementById('editItemIndex').value = editIndex !== null ? editIndex : '';
            const currentFolder = getCurrentFolder();

            if (editIndex !== null) {
                const item = currentFolder.children[editIndex];
                document.getElementById('modalTitle').textContent = 'עריכת ריבוע';
                document.getElementById('itemTitleInput').value = item.title;
                document.getElementById('itemDescInput').value = item.desc || '';
                document.getElementById('itemUrlInput').value = item.url || '';
                selectType(item.type);
            } else {
                document.getElementById('modalTitle').textContent = 'הוספת ריבוע חדש';
                document.getElementById('itemTitleInput').value = '';
                document.getElementById('itemDescInput').value = '';
                document.getElementById('itemUrlInput').value = '';
                selectType('folder');
            }

            document.getElementById('itemModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('itemModal').style.display = 'none';
        }

        function saveItem() {
            const title = document.getElementById('itemTitleInput').value.trim();
            const desc = document.getElementById('itemDescInput').value.trim();
            const url = document.getElementById('itemUrlInput').value.trim();
            const editIndex = document.getElementById('editItemIndex').value;
            const currentFolder = getCurrentFolder();

            if (!title) return alert('נא להזין כותרת');

            if (!currentFolder.children) currentFolder.children = [];

            if (editIndex !== '') {
                // עריכה
                const currentItem = currentFolder.children[editIndex];
                currentItem.title = title;
                currentItem.desc = desc;
                currentItem.type = selectedType;
                if (selectedType === 'link') {
                    currentItem.url = url;
                } else {
                    if (!currentItem.children) currentItem.children = [];
                }
            } else {
                // הוספה חדשה
                const newItem = {
                    type: selectedType,
                    title: title,
                    desc: desc
                };
                if (selectedType === 'folder') {
                    newItem.children = [];
                } else {
                    newItem.url = url || '#';
                }
                currentFolder.children.push(newItem);
            }

            closeModal();
            persist();
        }

        function deleteItem(index) {
            const currentFolder = getCurrentFolder();
            if (confirm(`האם אתה בטוח שברצונך למחוק את "${currentFolder.children[index].title}"?`)) {
                currentFolder.children.splice(index, 1);
                persist();
            }
        }

        function resetToDefaults() {
            if (confirm('האם לאפס את כל המערכת לברירת המחדל? כל הנתונים ששינית יימחקו.')) {
                rootData = JSON.parse(JSON.stringify(defaultData));
                currentPath = [];
                persist();
            }
        }

        // אתחול
        render();
    </script>
</body>
</html>

lavitoren הטי"ל

@פיתה

@אA יפה מאוד מאוד מאוד וואו וזה בספונטאני מעניין מה היה קורה ב'לא ספונטאני' תודה @אA!!

אA

@lavitoren-הטי-ל
כמובן שזה בנוי לעריכה שיתופית, כן?!
אמנם כרגע זה עדיין לא יכול להיסתנכרן אבל אולי בהמשך.

שמול

@lavitoren-הטי-ל
רעיון מאוד נצרך,
אולי תחליף את הכותרת של הנושא מי שאלות ועזרה הדדית,
למשהו אחר...