File "arbre_multi06.php"

Full Path: /home/analogde/www/2024_PHP_13_01_2025/arbre_multi06.php
File size: 5.98 KB
MIME-type: text/x-php
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<?php
// Configuration de la connexion à la base de données
$host = 'localhost'; // ou l'adresse de ton serveur
$user = 'root'; // ton nom d'utilisateur MySQL
$password = ''; // ton mot de passe MySQL
$database = 'file_management';

$host = "analogdepat.mysql.db";   
$user = "analogdepat"; 	   
$password = "Un92pac007";	    
$database = "analogdepat";

// Connexion à la base de données
$conn = new mysqli($host, $user, $password, $database);

// Vérification de la connexion
if ($conn->connect_error) {
    die("La connexion a échoué : " . $conn->connect_error);
}

// Récupération des fichiers et de leurs versions
$query = "SELECT f.id, f.filename, v.version FROM fichiers f LEFT JOIN versions v ON f.id = v.file_id";
$result = $conn->query($query);

$multidimensionalArray = [];

// Organisation des données en tableau multidimensionnel
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $filename = $row['filename'];
        $version = $row['version'];

        // Vérifie si le fichier est déjà dans le tableau
        if (!isset($multidimensionalArray[$filename])) {
            $multidimensionalArray[$filename] = [
                'fichier' => $filename,
                'children' => []
            ];
        }

        // Ajoute la version si elle existe
        if ($version) {
            $multidimensionalArray[$filename]['children'][] = [
                'fichier' => $version
            ];
        }
    }
}

// Conversion du tableau en JSON
$jsonData = json_encode(array_values($multidimensionalArray));

// Ferme la connexion à la base de données
$conn->close();
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tree View</title>
    <style>
        .children {
            display: none;
            margin-left: 20px;
        }
        .folder {
            cursor: pointer;
            font-weight: bold;
            padding: 5px;
            border: 1px solid transparent;
        }
        .folder:hover {
            background-color: #e0e0e0;
        }
        #contextMenu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            z-index: 1000;
        }
        #contextMenu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #contextMenu li {
            padding: 8px 12px;
            cursor: pointer;
        }
        #contextMenu li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="treeView"></div>
    <div id="contextMenu">
        <ul>
            <li id="option1">Option 1</li>
            <li id="option2">Option 2</li>
            <li id="option3">Option 3</li>
            <li id="option4">Option 4</li>
            <li id="option5">Option 5</li>
        </ul>
    </div>

    <script>
        // Données JSON provenant de PHP
        const data = <?php echo $jsonData; ?>;

        // Fonction pour générer l'arbre
        function generateTree(data) {
            const ul = document.createElement('ul');

            data.forEach(item => {
                const li = document.createElement('li');
                li.className = 'folder';
                li.textContent = item.fichier;

                const childrenUl = document.createElement('ul');
                childrenUl.className = 'children';

                item.children.forEach(child => {
                    const childLi = document.createElement('li');
                    childLi.textContent = child.fichier;
                    childrenUl.appendChild(childLi);
                });

                li.appendChild(childrenUl);
                ul.appendChild(li);

                // Gestionnaire d'événements pour le clic sur le nom du fichier
                li.addEventListener('click', function(event) {
                    event.stopPropagation();
                    if (event.target === li) {
                        childrenUl.style.display = childrenUl.style.display === 'none' || childrenUl.style.display === '' ? 'block' : 'none';
                    }
                });

                // Gestionnaire pour le clic droit
                li.addEventListener('contextmenu', function(event) {
                    event.preventDefault();
                    showContextMenu(event, item.fichier);
                });
            });

            return ul;
        }

        // Fonction pour afficher le menu contextuel
        function showContextMenu(event, filename) {
            const contextMenu = document.getElementById('contextMenu');
            contextMenu.style.display = 'block';
            contextMenu.style.left = event.pageX + 'px';
            contextMenu.style.top = event.pageY + 'px';

            // Met à jour chaque option du menu avec le nom du fichier
            document.querySelectorAll('#contextMenu li').forEach((item, index) => {
                item.textContent = `Option ${index + 1} pour ${filename}`;
                item.onclick = function() {
                    alert(`Vous avez choisi ${item.textContent}`);
                    contextMenu.style.display = 'none'; // Cache le menu après l'action
                };
            });

            // Cache le menu si l'utilisateur clique à l'extérieur
            document.addEventListener('click', hideContextMenu);
        }

        // Fonction pour cacher le menu contextuel
        function hideContextMenu() {
            const contextMenu = document.getElementById('contextMenu');
            contextMenu.style.display = 'none';
            document.removeEventListener('click', hideContextMenu);
        }

        // Gestionnaire pour la touche Échap
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                hideContextMenu();
            }
        });

        // Générer l'arbre et l'ajouter à la page
        document.getElementById('treeView').appendChild(generateTree(data));
    </script>
</body>
</html>