améliorations visuelles de l'arborescence
ajout du dossier racine et de la possibilité d'éditer son nom/sa description
This commit is contained in:
parent
a4ccb0a553
commit
d10d0fb776
302
arbre.php
302
arbre.php
@ -41,7 +41,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case 'delete_folder':
|
case 'delete_folder':
|
||||||
if ($path && isSecurePath($path)) {
|
if ($path && isSecurePath($path) && $path !== './liste_albums') { // Empêcher la suppression du dossier racine
|
||||||
function rrmdir($dir) {
|
function rrmdir($dir) {
|
||||||
if (is_dir($dir)) {
|
if (is_dir($dir)) {
|
||||||
$objects = scandir($dir);
|
$objects = scandir($dir);
|
||||||
@ -76,167 +76,185 @@ if (!isSecurePath($currentPath)) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generateTree($path, $currentPath) {
|
function generateTree($path, $currentPath) {
|
||||||
if (!is_dir($path)) return '';
|
if (!is_dir($path)) return '';
|
||||||
|
|
||||||
$output = '<ul class="tree-list">';
|
$output = '<ul class="tree-list">';
|
||||||
foreach (new DirectoryIterator($path) as $item) {
|
|
||||||
if ($item->isDot()) continue;
|
|
||||||
if ($item->isDir()) {
|
|
||||||
$fullPath = $item->getPathname();
|
|
||||||
$info = getAlbumInfo($fullPath);
|
|
||||||
$isCurrentPath = realpath($fullPath) === $currentPath;
|
|
||||||
$hasSubfolders = hasSubfolders($fullPath);
|
|
||||||
|
|
||||||
$output .= '<li class="tree-item' . ($isCurrentPath ? ' active' : '') . '">';
|
// Si c'est le dossier racine, ajoutons-le à l'arborescence
|
||||||
$output .= '<div class="tree-item-content">';
|
if ($path === './liste_albums') {
|
||||||
$output .= '<a href="?path=' . urlencode($fullPath) . '" class="tree-link">';
|
$info = getAlbumInfo($path);
|
||||||
$output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']);
|
$output .= '<li class="tree-item root-folder' . ($path === $currentPath ? ' active' : '') . '">';
|
||||||
$output .= '</a>';
|
$output .= '<div class="tree-item-content">';
|
||||||
$output .= '<div class="tree-actions">';
|
$output .= '<span class="tree-link">';
|
||||||
if (!$hasSubfolders) {
|
$output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']);
|
||||||
$output .= '<a href="arbre-img.php?path=' . urlencode($fullPath) . '" class="tree-button" style="text-decoration: none">🖼️</a>';
|
$output .= '</span>';
|
||||||
}
|
$output .= '<div class="tree-actions">';
|
||||||
$output .= '<button onclick="editFolder(\'' . htmlspecialchars($fullPath) . '\', \'' . htmlspecialchars($info['title']) . '\', \'' . htmlspecialchars($info['description']) . '\')" class="tree-button">✏️</button>';
|
$output .= '<button onclick="editFolder(\'' . htmlspecialchars($path) . '\', \'' . htmlspecialchars($info['title']) . '\', \'' . htmlspecialchars($info['description']) . '\')" class="tree-button">✏️</button>';
|
||||||
$output .= '<button onclick="createSubfolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button">➕</button>';
|
$output .= '<button onclick="createSubfolder(\'' . htmlspecialchars($path) . '\')" class="tree-button">➕</button>';
|
||||||
if ($fullPath !== './liste_albums') {
|
$output .= '</div></div>';
|
||||||
$output .= '<button onclick="deleteFolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button tree-button-danger">🗑️</button>';
|
}
|
||||||
}
|
|
||||||
$output .= '</div></div>';
|
// Parcourir tous les sous-dossiers
|
||||||
$output .= generateTree($fullPath, $currentPath);
|
foreach (new DirectoryIterator($path) as $item) {
|
||||||
$output .= '</li>';
|
if ($item->isDot()) continue;
|
||||||
}
|
if ($item->isDir()) {
|
||||||
}
|
$fullPath = $item->getPathname();
|
||||||
$output .= '</ul>';
|
$info = getAlbumInfo($fullPath);
|
||||||
return $output;
|
$isCurrentPath = realpath($fullPath) === $currentPath;
|
||||||
|
$hasSubfolders = hasSubfolders($fullPath);
|
||||||
|
|
||||||
|
$output .= '<li class="tree-item' . ($isCurrentPath ? ' active' : '') . '">';
|
||||||
|
$output .= '<div class="tree-item-content">';
|
||||||
|
$output .= '<span class="tree-link">';
|
||||||
|
$output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']);
|
||||||
|
$output .= '</span>';
|
||||||
|
$output .= '<div class="tree-actions">';
|
||||||
|
if (!$hasSubfolders) {
|
||||||
|
$output .= '<a href="arbre-img.php?path=' . urlencode($fullPath) . '" class="tree-button" style="text-decoration: none">🖼️</a>';
|
||||||
|
}
|
||||||
|
$output .= '<button onclick="editFolder(\'' . htmlspecialchars($fullPath) . '\', \'' . htmlspecialchars($info['title']) . '\', \'' . htmlspecialchars($info['description']) . '\')" class="tree-button">✏️</button>';
|
||||||
|
$output .= '<button onclick="createSubfolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button">➕</button>';
|
||||||
|
if ($fullPath !== './liste_albums') {
|
||||||
|
$output .= '<button onclick="deleteFolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button tree-button-danger">🗑️</button>';
|
||||||
|
}
|
||||||
|
$output .= '</div></div>';
|
||||||
|
|
||||||
|
$output .= generateTree($fullPath, $currentPath);
|
||||||
|
$output .= '</li>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$output .= '</ul>';
|
||||||
|
return $output;
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Arborescence - ICO</title>
|
<title>Arborescence - ICO</title>
|
||||||
<link rel="icon" type="image/png" href="favicon.png">
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="stylesheet" href="styles-admin.css">
|
<link rel="stylesheet" href="styles-admin.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="admin-page">
|
<body class="admin-page">
|
||||||
<div class="admin-header">
|
<div class="admin-header">
|
||||||
<h1>Gestion de l'arborescence</h1>
|
<h1>Gestion de l'arborescence</h1>
|
||||||
<div class="admin-actions">
|
<div class="admin-actions">
|
||||||
<button onclick="createSubfolder('./liste_albums')" class="action-button">Nouveau dossier</button>
|
<button onclick="createSubfolder('./liste_albums')" class="action-button">Nouveau dossier</button>
|
||||||
<a href="admin.php" class="action-button action-button-secondary">Retour</a>
|
<a href="admin.php" class="action-button action-button-secondary">Retour</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="admin-content">
|
<div class="admin-content">
|
||||||
<?php if (isset($_SESSION['success_message'])): ?>
|
<?php if (isset($_SESSION['success_message'])): ?>
|
||||||
<div class="message success-message"><?php echo htmlspecialchars($_SESSION['success_message']); ?></div>
|
<div class="message success-message"><?php echo htmlspecialchars($_SESSION['success_message']); ?></div>
|
||||||
<?php unset($_SESSION['success_message']); ?>
|
<?php unset($_SESSION['success_message']); ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if (isset($_SESSION['error_message'])): ?>
|
<?php if (isset($_SESSION['error_message'])): ?>
|
||||||
<div class="message error-message"><?php echo htmlspecialchars($_SESSION['error_message']); ?></div>
|
<div class="message error-message"><?php echo htmlspecialchars($_SESSION['error_message']); ?></div>
|
||||||
<?php unset($_SESSION['error_message']); ?>
|
<?php unset($_SESSION['error_message']); ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="tree-container">
|
<div class="tree-container">
|
||||||
<?php echo generateTree('./liste_albums', $currentPath); ?>
|
<?php echo generateTree('./liste_albums', $currentPath); ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal de création de dossier -->
|
<!-- Modal de création de dossier -->
|
||||||
<div id="createFolderModal" class="modal">
|
<div id="createFolderModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h2>Créer un nouveau dossier</h2>
|
<h2>Créer un nouveau dossier</h2>
|
||||||
<form method="post" action="arbre.php">
|
<form method="post" action="arbre.php">
|
||||||
<input type="hidden" name="action" value="create_folder">
|
<input type="hidden" name="action" value="create_folder">
|
||||||
<input type="hidden" name="path" id="parentPath">
|
<input type="hidden" name="path" id="parentPath">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="new_name">Nom du dossier :</label>
|
<label for="new_name">Nom du dossier :</label>
|
||||||
<input type="text" id="new_name" name="new_name" required>
|
<input type="text" id="new_name" name="new_name" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="description">Description :</label>
|
<label for="description">Description :</label>
|
||||||
<textarea id="description" name="description" rows="4" class="form-textarea"></textarea>
|
<textarea id="description" name="description" rows="4" class="form-textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
||||||
<button type="submit" class="action-button">Créer</button>
|
<button type="submit" class="action-button">Créer</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal d'édition de dossier -->
|
<!-- Modal d'édition de dossier -->
|
||||||
<div id="editFolderModal" class="modal">
|
<div id="editFolderModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h2>Modifier le dossier</h2>
|
<h2>Modifier le dossier</h2>
|
||||||
<form method="post" action="arbre.php">
|
<form method="post" action="arbre.php">
|
||||||
<input type="hidden" name="action" value="edit_folder">
|
<input type="hidden" name="action" value="edit_folder">
|
||||||
<input type="hidden" name="path" id="editPath">
|
<input type="hidden" name="path" id="editPath">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="edit_name">Nom du dossier :</label>
|
<label for="edit_name">Nom du dossier :</label>
|
||||||
<input type="text" id="edit_name" name="new_name" required>
|
<input type="text" id="edit_name" name="new_name" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="edit_description">Description :</label>
|
<label for="edit_description">Description :</label>
|
||||||
<textarea id="edit_description" name="description" rows="4" class="form-textarea"></textarea>
|
<textarea id="edit_description" name="description" rows="4" class="form-textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
||||||
<button type="submit" class="action-button">Enregistrer</button>
|
<button type="submit" class="action-button">Enregistrer</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal de confirmation de suppression -->
|
<!-- Modal de confirmation de suppression -->
|
||||||
<div id="deleteFolderModal" class="modal">
|
<div id="deleteFolderModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h2>Confirmer la suppression</h2>
|
<h2>Confirmer la suppression</h2>
|
||||||
<p>Êtes-vous sûr de vouloir supprimer ce dossier et tout son contenu ?</p>
|
<p>Êtes-vous sûr de vouloir supprimer ce dossier et tout son contenu ?</p>
|
||||||
<form method="post" action="arbre.php">
|
<form method="post" action="arbre.php">
|
||||||
<input type="hidden" name="action" value="delete_folder">
|
<input type="hidden" name="action" value="delete_folder">
|
||||||
<input type="hidden" name="path" id="deletePath">
|
<input type="hidden" name="path" id="deletePath">
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
<button type="button" onclick="closeModal()" class="action-button action-button-secondary">Annuler</button>
|
||||||
<button type="submit" class="action-button action-button-danger">Supprimer</button>
|
<button type="submit" class="action-button action-button-danger">Supprimer</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function createSubfolder(path) {
|
function createSubfolder(path) {
|
||||||
document.getElementById('parentPath').value = path;
|
document.getElementById('parentPath').value = path;
|
||||||
document.getElementById('createFolderModal').style.display = 'block';
|
document.getElementById('createFolderModal').style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
function editFolder(path, title, description) {
|
function editFolder(path, title, description) {
|
||||||
document.getElementById('editPath').value = path;
|
document.getElementById('editPath').value = path;
|
||||||
document.getElementById('edit_name').value = title;
|
document.getElementById('edit_name').value = title;
|
||||||
document.getElementById('edit_description').value = description;
|
document.getElementById('edit_description').value = description;
|
||||||
document.getElementById('editFolderModal').style.display = 'block';
|
document.getElementById('editFolderModal').style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteFolder(path) {
|
function deleteFolder(path) {
|
||||||
document.getElementById('deletePath').value = path;
|
document.getElementById('deletePath').value = path;
|
||||||
document.getElementById('deleteFolderModal').style.display = 'block';
|
document.getElementById('deleteFolderModal').style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
document.getElementById('createFolderModal').style.display = 'none';
|
document.getElementById('createFolderModal').style.display = 'none';
|
||||||
document.getElementById('editFolderModal').style.display = 'none';
|
document.getElementById('editFolderModal').style.display = 'none';
|
||||||
document.getElementById('deleteFolderModal').style.display = 'none';
|
document.getElementById('deleteFolderModal').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onclick = function(event) {
|
window.onclick = function(event) {
|
||||||
if (event.target.classList.contains('modal')) {
|
if (event.target.classList.contains('modal')) {
|
||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -278,6 +278,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tree-item-content {
|
.tree-item-content {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -298,6 +299,24 @@ body {
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Style spécifique pour le dossier racine */
|
||||||
|
.root-folder > .tree-item-content {
|
||||||
|
background: rgba(33, 150, 243, 0.2);
|
||||||
|
border-left: 4px solid #2196f3;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-folder > .tree-item-content .folder-icon {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-folder > .tree-item-content .tree-link {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
.folder-icon {
|
.folder-icon {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user