2024-04-01 18:11:49 +02:00
3 changed files with 88 additions and 9 deletions
--- 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;
+}
--- 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();
 });
--- a/templates/cours.html
+++ b/templates/cours.html
@ -6,18 +6,18 @@
  </head>
  <body>
    <header>{{>navbar.html}}</header>
+
+    <aside>
+      <div data-json="{{#data}}{{filetree}}{{/data}} "></div>
+    </aside>
    <main>
-      {{#data}}
-
-      <aside>
-        <div id="data" data-json="{{filetree}} "></div>
-      </aside>
-
-      {{^content}}
+      {{#data}} {{^content}}
      <p>Fichier introuvable</p>
      {{/content}} {{#content}}
      <article>{{&content}}</article>
      {{/content}} {{/data}}
    </main>
+
+    <script src="/js/cours.js"></script>
  </body>
 </html>