diff --git a/static/css/cours.css b/static/css/cours.css
index e69de29..c21ae0d 100644
--- a/static/css/cours.css
+++ b/static/css/cours.css
@@ -0,0 +1,39 @@
+/* Filetree */
+aside {
+ float: left;
+ margin-left: 20px;
+}
+
+aside ul {
+ list-style: none;
+ padding-left: 0.6em;
+}
+
+aside li {
+ position: relative;
+}
+
+/* Element */
+aside li:before {
+ content: "";
+ position: absolute;
+ top: -0.2em;
+ left: -1em;
+ height: 1em;
+}
+
+aside li.collapsed > ul {
+ display: none;
+}
+
+aside li.directory::before {
+ content: "+";
+}
+
+aside li:not(.collapsed).directory::before {
+ content: "-";
+}
+
+aside li.directory {
+ cursor: pointer;
+}
diff --git a/static/js/cours.js b/static/js/cours.js
index e52ecf0..51602fc 100644
--- a/static/js/cours.js
+++ b/static/js/cours.js
@@ -1,4 +1,44 @@
+/**
+ * Build the filetree
+ * @param {HTMLElement} parent Root element of the filetree
+ * @param {{name: string, is_dir: boolean, children: any[]}} data FileNode
+ */
+const buildFileTree = (parent, data) => {
+ const ul = document.createElement("ul");
+ data.forEach((item) => {
+ const li = document.createElement("li");
+ li.textContent = item.name;
+ li.classList.add(item.is_dir ? "directory" : "file");
+
+ if (item.is_dir) {
+ li.classList.add("collapsed");
+ li.addEventListener("click", function (e) {
+ if (e.target === li) {
+ li.classList.toggle("collapsed");
+ }
+ });
+ }
+
+ ul.appendChild(li);
+
+ if (item.children && item.children.length > 0) {
+ buildFileTree(li, item.children);
+ }
+ });
+
+ parent.appendChild(ul);
+};
+
window.addEventListener("load", () => {
- /* Ici on va récuperer le JSON envoyer par le serveur et le transformer
- * en un jolie filetree */
+ const fileTreeElement = document.getElementsByTagName("aside")[0];
+ const dataElement = fileTreeElement.getElementsByTagName("div")[0];
+
+ buildFileTree(
+ fileTreeElement,
+ JSON.parse(dataElement.getAttribute("data-json")).children
+ );
+
+ console.log(JSON.parse(dataElement.getAttribute("data-json")));
+
+ dataElement.remove();
});
diff --git a/templates/cours.html b/templates/cours.html
index dd4c461..a46eca7 100644
--- a/templates/cours.html
+++ b/templates/cours.html
@@ -6,18 +6,18 @@
+
+
- {{#data}}
-
-
-
- {{^content}}
+ {{#data}} {{^content}}
Fichier introuvable
{{/content}} {{#content}}
{{&content}}
{{/content}} {{/data}}
+
+