project.html 6.33 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>
41
42
			    <ul v-for="blob in fileList">
                    <li v-bind:class="blob.type">
svilayphiou's avatar
svilayphiou committed
43
                        <a v-on:click.prevent="tree(blob.type, blob.path, blob.id)" href="#">
44
45
46
47
                            <span v-if="blob.type === 'tree'"></span>
                            [[ blob.name ]]
                        </a>
                    </li>
sarah's avatar
sarah committed
48
			    </ul>
svilayphiou's avatar
svilayphiou committed
49
				<div id="blob" v-html="bloup">
50
				</div>
sarah's avatar
sarah committed
51
		    </section>
sarah's avatar
sarah committed
52
		    <section id="commits" class="repo-views">
sarah's avatar
sarah committed
53

sarah's avatar
oops    
sarah committed
54
55
<!-- 			    <h3>Commits</h3>
 -->			    <ul class="commit-list">
sarah's avatar
sarah committed
56
57
58
59
60
			      {% 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
61
			          <p class="commit-author">{{ commit.author_name }}:</p>
sarah's avatar
sarah committed
62
					  <p class="commit-message">{{ commit.message }}</p>
sarah's avatar
sarah committed
63
64
65
66
			      </li>
			      {% endfor %}
			    </ul>
		    </section>
sarah's avatar
sarah committed
67

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

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

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


        //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) {
                fileList.push(file);
            })
        })

        var treeApp = new Vue({
            el: '#tree',
            data: {
113
              fileList,
svilayphiou's avatar
svilayphiou committed
114
			  bloup: "?"
115
116
117
            },
            delimiters: ['[[',']]'],
			methods: {
svilayphiou's avatar
svilayphiou committed
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
				tree: function(type, path, blobID){
					vm = this;
					if (type == "tree") {
						var treeURL = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?per_page=100&path="+ path;
						fileList.splice(0);
						fetch(treeURL).then(function(resp){ return resp.json(); })
						.then(function(data){
							return data.map(function(file) {
								fileList.push(file);
							})
						})
					} else {
						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
133
134
135
136
137
138
139
140
141
142
							var mime = data["type"];
console.log(mime);
							// if PNG, JPG, or GIF
							if(mime == "image/png" | mime == "image/jpg" | mime == "image/gif") {
								let img = document.createElement('img');
								img.src = blob_url;
								blob_elt.appendChild(img);
							} 
							// if TXT, SVG, code...
							else if (mime == "text/plain" | mime == "image/svg+xml") {
svilayphiou's avatar
svilayphiou committed
143
144
145
146
147
								var reader = new FileReader();
								reader.readAsText(data);
								reader.onloadend=function(){
									vm.bloup = reader.result;
								};
svilayphiou's avatar
svilayphiou committed
148
							}
svilayphiou's avatar
svilayphiou committed
149
150
						})
					}
151
152
				},
				file: function(blobID){
153
154
155
156
157
				}
			}
        })

        // I M A G E S
svilayphiou's avatar
svilayphiou committed
158
159
160
161
162
163
        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);
164

svilayphiou's avatar
svilayphiou committed
165
166
        var icebergApp = new Vue({
            el: '#iceberg',
167
            data: {
svilayphiou's avatar
svilayphiou committed
168
169
170
171
172
173
174
175
              icebergList
            }
        })

        var processusApp = new Vue({
            el: '#processus',
            data: {
              processusList
176
            }
svilayphiou's avatar
svilayphiou committed
177
        })
178

svilayphiou's avatar
svilayphiou committed
179
180
        function getImages(repoID, apiURL, imageList){
            fetch(apiURL).then(function(resp){ return resp.json(); })
181
182
183
184
            .then(function(data){
                return data.map(function(image) {
                    item = {};
                    item.name = image.name;
svilayphiou's avatar
svilayphiou committed
185
186
                    project_path = [gitlab_url, user_name, "{{ project.name }}"].join('/');
                    item.src = project_path + "/raw/{{ project.default_branch }}/" + image.path;
svilayphiou's avatar
svilayphiou committed
187
                    imageList.push(item);
188
189
190
                })
            });
        }
191
192

        
193
194
    </script>

195
{% endblock script %}