project.html 7.27 KB
Newer Older
1
{% extends "base.html" %}
gijs's avatar
gijs committed
2

3
{% block content %}
4
    <div class="repo branch-{{ project.default_branch }}">
5
6
7
8
        <header class="header">
            <h2 class="repo-title">{{ project.name }}</h2>
            <h2 class="repo-title"></h2>
            <ul id="views">
9
10
11
12
<!--          <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>
sarah's avatar
sarah committed
13
              <li><a href="#" id="filter-commit">Last updates</a></li>
14
              <li><a href="" id="filter-fonts">Font used</a></li>
15
16
            </ul>
        </header>
sarah's avatar
sarah committed
17
        <section id="repo-content">
18

sarah's avatar
sarah committed
19
		    {% if project.readme %}
sarah's avatar
sarah committed
20
		        <section id="readme" class="repo-views">
sarah's avatar
sarah committed
21
22
23
		        {{ project.readme }}
		        </section>
		    {% endif %}
svilayphiou's avatar
svilayphiou committed
24
25
26
27
28
29
30
31
32
33
34
35
36
		    <section id="images" class="repo-views">
                <div id="iceberg">
                    <h3>Iceberg</h3>
                    <div v-for="image in icebergList">
                        <img v-bind:src="image.src">
                    </div>
                </div>
    
                <div id="processus">
                    <h3>processus</h3>
                    <div v-for="image in processusList">
                        <img v-bind:src="image.src">
                    </div>
sarah's avatar
oops    
sarah committed
37
38
                </div>
		    </section>
39
		    <section id="tree" class="repo-views" >
sarah's avatar
sarah committed
40
			    <h3>Tree</h3>
svilayphiou's avatar
svilayphiou committed
41
				<a href="#" v-on:click.prevent="tree('up', upPath)">↑↑ Parent directory</a>
42
43
			    <ul v-for="blob in fileList">
                    <li v-bind:class="blob.type">
svilayphiou's avatar
svilayphiou committed
44
                        <a v-on:click.prevent="tree(blob.type, blob.path, blob.id)" href="#">
45
46
47
48
                            <span v-if="blob.type === 'tree'"></span>
                            [[ blob.name ]]
                        </a>
                    </li>
sarah's avatar
sarah committed
49
			    </ul>
svilayphiou's avatar
svilayphiou committed
50
				<div id="blob" v-html="blobItem">
51
				</div>
sarah's avatar
sarah committed
52
		    </section>
sarah's avatar
sarah committed
53
		    <section id="commits" class="repo-views">
sarah's avatar
sarah committed
54

sarah's avatar
oops    
sarah committed
55
56
<!-- 			    <h3>Commits</h3>
 -->			    <ul class="commit-list">
sarah's avatar
sarah committed
57
58
59
60
61
			      {% for commit in project.commits %}
			      <li class="commit-item">
			          <a href="https://gitlab.constantvzw.org/osp/{{ project.name }}/-/commit/{{ commit.id }}">
			              <time class="commit-time">{{ commit.committed_date }}</time>
			          </a>
sarah's avatar
project    
sarah committed
62
			          <p class="commit-author">{{ commit.author_name }}:</p>
sarah's avatar
sarah committed
63
					  <p class="commit-message">{{ commit.message }}</p>
sarah's avatar
sarah committed
64
65
66
67
			      </li>
			      {% endfor %}
			    </ul>
		    </section>
sarah's avatar
sarah committed
68

sarah's avatar
sarah committed
69
70
71
		    <section id="fonts" class="repo-views">
		    </section>

sarah's avatar
sarah committed
72
    </section>
73
   </div>
74
75
76
{% endblock content %}

{% block script %}
77
    <script type="text/javascript" charset="utf-8">
svilayphiou's avatar
svilayphiou committed
78
        var gitlabURL = "http://gitlab.constantvzw.org";
79
        var user_name = "osp";
svilayphiou's avatar
svilayphiou committed
80
        var repoID = {{ project.id }};
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102


        //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 = [];
svilayphiou's avatar
svilayphiou committed
103
		var formerTree = [];
104
105
106
107
108
109
110
111
112
113
114
        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) {
                fileList.push(file);
            })
        })

        var treeApp = new Vue({
            el: '#tree',
            data: {
115
              fileList,
svilayphiou's avatar
svilayphiou committed
116
			  upPath: "/",
svilayphiou's avatar
svilayphiou committed
117
			  blobItem: "",
118
119
120
            },
            delimiters: ['[[',']]'],
			methods: {
svilayphiou's avatar
svilayphiou committed
121
122
123
				tree: function(type, path, blobID){
					vm = this;
					if (type == "tree") {
svilayphiou's avatar
svilayphiou committed
124
						currentPath = path;
svilayphiou's avatar
svilayphiou committed
125
						var treeURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?per_page=100&path="+ path;
svilayphiou's avatar
svilayphiou committed
126
						vm.fileList.splice(0);
svilayphiou's avatar
svilayphiou committed
127
128
129
						fetch(treeURL).then(function(resp){ return resp.json(); })
						.then(function(data){
							return data.map(function(file) {
svilayphiou's avatar
svilayphiou committed
130
								vm.fileList.push(file);
svilayphiou's avatar
svilayphiou committed
131
132
							})
						})
svilayphiou's avatar
svilayphiou committed
133
134
135
136
137
138
139
140
141
142
143
144
145
146
					} else if (type == "up") {
						upPath = currentPath.split("/");
						upPath.pop();
						currentPath = upPath.join("");
						var treeURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?per_page=100&path="+ upPath;
						vm.fileList.splice(0);
						fetch(treeURL).then(function(resp){ return resp.json(); })
						.then(function(data){
							return data.map(function(file) {
								vm.fileList.push(file);
							})
						})

					} else if (type == "blob") {
svilayphiou's avatar
svilayphiou committed
147
148
149
						let blobURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/blobs/" + blobID + "/raw";
						fetch(blobURL).then((resp) => resp.blob())
						.then(function(data){
svilayphiou's avatar
svilayphiou committed
150
151
152
153
154
155
156
157
							// FILENAME
							h4 = "<h4>" + path + "</h4>"

                			// DOWNLOAD RAW FILE
                			project_path = [gitlabURL, user_name, '{{ project.name }}'].join('/');
                			href = project_path + "/raw/master/" + path;
                			a = '<p><a download href="' + href + '">Download file</a></p>';

svilayphiou's avatar
svilayphiou committed
158
159
							var mime = data["type"];
							// if PNG, JPG, or GIF
160
							if(mime == "image/png" | mime == "image/jpeg" | mime == "image/jpg" | mime == "image/gif") {
svilayphiou's avatar
svilayphiou committed
161
								vm.blobItem = h4 + a + "<img src='" + blobURL+ "'>";
svilayphiou's avatar
svilayphiou committed
162
163
164
							} 
							// if TXT, SVG, code...
							else if (mime == "text/plain" | mime == "image/svg+xml") {
svilayphiou's avatar
svilayphiou committed
165
166
167
								var reader = new FileReader();
								reader.readAsText(data);
								reader.onloadend=function(){
svilayphiou's avatar
svilayphiou committed
168
									vm.blobItem = h4 + a + reader.result;
svilayphiou's avatar
svilayphiou committed
169
								};
svilayphiou's avatar
svilayphiou committed
170
							}
svilayphiou's avatar
svilayphiou committed
171
172
173
							else {
								vm.blobItem = h4 + a;
							}
svilayphiou's avatar
svilayphiou committed
174
175
						})
					}
176
				},
177
178
179
180
			}
        })

        // I M A G E S
svilayphiou's avatar
svilayphiou committed
181
182
183
184
185
186
        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);
187

svilayphiou's avatar
svilayphiou committed
188
189
        var icebergApp = new Vue({
            el: '#iceberg',
190
            data: {
svilayphiou's avatar
svilayphiou committed
191
192
193
194
195
196
197
198
              icebergList
            }
        })

        var processusApp = new Vue({
            el: '#processus',
            data: {
              processusList
199
            }
svilayphiou's avatar
svilayphiou committed
200
        })
201

svilayphiou's avatar
svilayphiou committed
202
203
        function getImages(repoID, apiURL, imageList){
            fetch(apiURL).then(function(resp){ return resp.json(); })
204
205
206
207
            .then(function(data){
                return data.map(function(image) {
                    item = {};
                    item.name = image.name;
svilayphiou's avatar
svilayphiou committed
208
                    project_path = [gitlabURL, user_name, "{{ project.name }}"].join('/');
svilayphiou's avatar
svilayphiou committed
209
                    item.src = project_path + "/raw/{{ project.default_branch }}/" + image.path;
svilayphiou's avatar
svilayphiou committed
210
                    imageList.push(item);
211
212
213
                })
            });
        }
214
215

        
216
217
    </script>

218
{% endblock script %}