103 lines
3.8 KiB
JavaScript
103 lines
3.8 KiB
JavaScript
// static/script.js
|
|
|
|
const fileListPanel = document.getElementById('file-list-panel');
|
|
const resizer = document.getElementById('resizer');
|
|
const container = document.querySelector('.container');
|
|
const fileListUl = document.getElementById('file-list');
|
|
const fileContentPre = document.getElementById('file-content');
|
|
const contentTitle = document.getElementById('content-title');
|
|
|
|
let isResizing = false;
|
|
|
|
// 1. GESTION DU REDIMENSIONNEMENT (Même logique que précédemment)
|
|
resizer.addEventListener('mousedown', function(e) {
|
|
isResizing = true;
|
|
container.classList.add('resizing');
|
|
document.body.style.userSelect = 'none';
|
|
});
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
if (!isResizing) return;
|
|
|
|
const newWidth = e.clientX - container.getBoundingClientRect().left;
|
|
const minWidth = 150;
|
|
const maxWidth = container.clientWidth * 0.5;
|
|
|
|
if (newWidth >= minWidth && newWidth <= maxWidth) {
|
|
fileListPanel.style.width = newWidth + 'px';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
isResizing = false;
|
|
container.classList.remove('resizing');
|
|
document.body.style.userSelect = '';
|
|
});
|
|
|
|
// 2. LOGIQUE DU CHARGEMENT DES FICHIERS (Communication avec Flask)
|
|
|
|
// A. Récupérer la liste des fichiers depuis le serveur
|
|
async function fetchFileList() {
|
|
try {
|
|
const response = await fetch('/api/list_files');
|
|
const files = await response.json();
|
|
|
|
if (response.ok) {
|
|
fileListUl.innerHTML = ''; // Vider la liste existante
|
|
if (files.length === 0) {
|
|
fileListUl.innerHTML = '<li>Aucun fichier trouvé.</li>';
|
|
fileContentPre.textContent = 'Le répertoire est vide.';
|
|
} else {
|
|
files.forEach(filename => {
|
|
const li = document.createElement('li');
|
|
li.textContent = filename;
|
|
li.onclick = () => loadFileContent(filename, li);
|
|
fileListUl.appendChild(li);
|
|
});
|
|
|
|
// Charger le contenu du premier fichier par défaut
|
|
if (files.length > 0) {
|
|
loadFileContent(files[0], fileListUl.querySelector('li'));
|
|
}
|
|
}
|
|
} else {
|
|
// Afficher l'erreur retournée par Flask
|
|
fileContentPre.textContent = `Erreur: ${files.error}`;
|
|
}
|
|
} catch (error) {
|
|
fileContentPre.textContent = `Erreur de connexion au serveur : ${error.message}`;
|
|
console.error('Erreur lors de la récupération des fichiers:', error);
|
|
}
|
|
}
|
|
|
|
// B. Charger le contenu du fichier sélectionné
|
|
async function loadFileContent(filename, element) {
|
|
// Retirer la classe 'selected' de tous les éléments
|
|
document.querySelectorAll('#file-list li').forEach(li => {
|
|
li.classList.remove('selected');
|
|
});
|
|
// Ajouter la classe 'selected' à l'élément cliqué
|
|
if (element) {
|
|
element.classList.add('selected');
|
|
}
|
|
|
|
contentTitle.textContent = `Contenu de : ${filename}`;
|
|
fileContentPre.textContent = 'Chargement en cours...';
|
|
|
|
try {
|
|
const response = await fetch(`/api/get_content/${filename}`);
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Enlève le slice(1, -1) sauf si ton serveur renvoie le contenu entre guillemets
|
|
fileContentPre.innerHTML = marked.parse(data.content);
|
|
} else {
|
|
fileContentPre.innerHTML = `Erreur (${response.status}) : ${data.error}`;
|
|
}
|
|
} catch (error) {
|
|
fileContentPre.textContent = `Erreur réseau lors du chargement : ${error.message}`;
|
|
console.error('Erreur lors du chargement du contenu:', error);
|
|
}
|
|
}
|
|
// Exécuter au chargement de la page
|
|
document.addEventListener('DOMContentLoaded', fetchFileList); |