Root tree made in js + clicking on it lists subfolder items in the

console.

generator/templates/project.html

@@ -6,12 +6,12 @@
             <h2 class="repo-title">{{ project.name }}</h2>
             <h2 class="repo-title"></h2>
             <ul id="views">
-<!--                 <span>views:</span>
- -->              <li><a href="#" id="filter-readme">Description</a></li>
+<!--          <span>views:</span>-->
+              <li><a href="#" id="filter-readme">Description</a></li>
+              <li><a href="#" id="filter-images">Visual process </a></li>
+              <li><a href="#tree" id="filter-tree">Files</a></li>
               <li><a href="#" id="filter-commit">Last updates</a></li>
-              <li><a href="#" id="filter-images">visual process </a></li>
-              <li><a href="works-fonts.html" id="filter-fonts">Font used</a></li>
-              <li><a href="#" id="filter-tree">Diagram</a></li>
+              <li><a href="" id="filter-fonts">Font used</a></li>
             </ul>
         </header>
         <section id="repo-content">
@@ -36,12 +36,15 @@
                     </div>
                 </div>
 		    </section>
-		    <section id="tree" class="repo-views">
+		    <section id="tree" class="repo-views" >
 			    <h3>Tree</h3>
-			    <ul>
-			      {% for file in project.tree %}
-			        <li>{{ file.name }}</li>
-			      {% endfor %}
+			    <ul v-for="blob in fileList">
+                    <li v-bind:class="blob.type">
+                        <a v-on:click="folder(blob.path)" href="#">
+                            <span v-if="blob.type === 'tree'">█</span>
+                            [[ blob.name ]]
+                        </a>
+                    </li>
 			    </ul>
 		    </section>
 		    <section id="commits" class="repo-views">
@@ -72,12 +75,64 @@
         var gitlab_url = "http://gitlab.constantvzw.org";
         var user_name = "osp";
         var repoID = {{ project.id }};
+
+
+        //var filterTree = new Vue({
+        //  el: '#filter-tree',
+        //  data: {
+        //    name: 'Vue.js'
+        //  },
+        //  // define methods under the `methods` object
+        //  methods: {
+        //    greet: function (event) {
+        //      // `this` inside methods points to the Vue instance
+        //      alert('Hello ' + this.name + '!')
+        //      // `event` is the native DOM event
+        //      if (event) {
+        //        alert(event.target.tagName)
+        //      }
+        //    }
+        //  }
+        //})
+
+        // T R E E
+        var fileList = [];
+        var treeURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?per_page=100";
+        fetch(treeURL).then(function(resp){ return resp.json(); })
+        .then(function(data){
+            return data.map(function(file) {
+            console.log(file);
+                fileList.push(file);
+            })
+        })
+
+        var treeApp = new Vue({
+            el: '#tree',
+            data: {
+              fileList
+            },
+            delimiters: ['[[',']]'],
+			methods: {
+				folder: function(path){
+					var treeURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?per_page=100&path="+ path;
+                    fetch(treeURL).then(function(resp){ return resp.json(); })
+                    .then(function(data){
+						fileList = [];
+                        return data.map(function(file) {
+                            fileList.push(file);
+                        console.log(fileList);
+                        })
+                    })
+
+				}
+			}
+        })
+
+        // I M A G E S
         var icebergList = [];
         var processusList = [];
-        
         let icebergURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?path=iceberg";
         let processusURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?path=processus";
-
         getImages(repoID, icebergURL, icebergList);
         getImages(repoID, processusURL, processusList);
 
@@ -95,7 +150,6 @@
             }
         })
 
-
         function getImages(repoID, apiURL, imageList){
             fetch(apiURL).then(function(resp){ return resp.json(); })
             .then(function(data){
@@ -108,6 +162,8 @@
                 })
             });
         }
+
+        
     </script>
 
 {% endblock script %}