Tiny File Manager

Back Back Up Advanced Editor

<?php
// Paramètres de connexion à la base de données
$servername = "localhost";
$username = "votre_utilisateur";
$password = "votre_mot_de_passe";
$dbname = "votre_base_de_donnees";

$servername = "analogdepat.mysql.db";   
$username = "analogdepat"; 	   
$password = "Un92pac007";	    
$dbname = "analogdepat";

// Créer une connexion
$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier la connexion
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Requête SQL pour récupérer les données
$sql = "SELECT name, element FROM lists";
$result = $conn->query($sql);

// Tableau multidimensionnel pour stocker les résultats
$data = array();

if ($result->num_rows > 0) {
    // Parcourir les résultats et les stocker dans le tableau
    while($row = $result->fetch_assoc()) {
        $name = $row['name'];
        $element = $row['element'];

// Si la clé 'name' n'existe pas, créer un nouveau tableau
        if (!isset($data[$name])) {
            $data[$name] = array();
        }

// Ajouter l'élément au tableau correspondant à 'name'
        $data[$name][] = $element;
    }
} else {
    echo "0 results";
}

// Fermer la connexion
$conn->close();

// Convertir le tableau en JSON
$jsonData = json_encode($data);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree View with Context Menu</title>
    <style>
        ul {
            list-style-type: none;
        }
        .nested {
            display: none;
        }
        .caret {
            cursor: pointer;
            user-select: none;
        }
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }
        .caret-down::before {
            transform: rotate(90deg);
        }
        .context-menu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .context-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .context-menu li {
            padding: 8px 16px;
            cursor: pointer;
        }
        .context-menu li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <ul id="treeView"></ul>

<div id="contextMenu" class="context-menu">
        <ul>
            <li onclick="handleOption1()">Option 1</li>
            <li onclick="handleOption2()">Option 2</li>
            <li onclick="handleOption3()">Option 3</li>
            <li onclick="handleOption4()">Option 4</li>
        </ul>
    </div>

// Fonction pour créer le tree view
        function createTreeView(data, parentElement) {
            for (const name in data) {
                const li = document.createElement('li');
                const span = document.createElement('span');
                span.className = 'caret';
                span.textContent = name;
                li.appendChild(span);

const ul = document.createElement('ul');
                ul.className = 'nested';
                data[name].forEach(element => {
                    const elementLi = document.createElement('li');
                    const elementSpan = document.createElement('span');
                    elementSpan.textContent = element;
                    elementLi.appendChild(elementSpan);
                    ul.appendChild(elementLi);
                });

li.appendChild(ul);
                parentElement.appendChild(li);
            }
        }

// Fonction pour déplier/replier les éléments
        function toggleNested(event) {
            const target = event.target;
            if (target.classList.contains('caret')) {
                target.classList.toggle('caret-down');
                const nested = target.nextElementSibling;
                if (nested && nested.classList.contains('nested')) {
                    nested.style.display = nested.style.display === 'block' ? 'none' : 'block';
                }
            }
        }

// Créer le tree view
        const treeView = document.getElementById('treeView');
        createTreeView(data, treeView);

// Ajouter l'événement de clic pour déplier/replier les éléments
        treeView.addEventListener('click', toggleNested);

// Ajouter l'événement de clic droit pour afficher le menu contextuel
        treeView.addEventListener('contextmenu', function(event) {
            event.preventDefault();
            const contextMenu = document.getElementById('contextMenu');
            const target = event.target.closest('span');
            if (target) {
                const name = target.parentElement.previousElementSibling.textContent;
                const element = target.textContent;
                contextMenu.style.display = 'block';
                contextMenu.style.left = event.pageX + 'px';
                contextMenu.style.top = event.pageY + 'px';
                contextMenu.dataset.name = name;
                contextMenu.dataset.element = element;
            }
        });

// Ajouter l'événement de clic pour fermer le menu contextuel
        document.addEventListener('click', function(event) {
            const contextMenu = document.getElementById('contextMenu');
            if (!contextMenu.contains(event.target)) {
                contextMenu.style.display = 'none';
            }
        });

// Ajouter l'événement de touche pour fermer le menu contextuel
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const contextMenu = document.getElementById('contextMenu');
                contextMenu.style.display = 'none';
            }
        });

// Fonctions pour gérer les options du menu contextuel
        function handleOption1() {
            const contextMenu = document.getElementById('contextMenu');
            const name = contextMenu.dataset.name;
            const element = contextMenu.dataset.element;
            window.location.href = `option1.php?name=${encodeURIComponent(name)}&element=${encodeURIComponent(element)}`;
        }