Newer
Older
Deleted User
committed
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Deleted User
committed
<title>Browse</title>
Deleted User
committed
<link rel="stylesheet" href="static/add_tuto.css">
<link rel="stylesheet" href="static/test.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- VueJs -->
Deleted User
committed
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
Deleted User
committed
<br><br><br>
<div class="row">
<br><br><br>
<div class="col-md-1"></div>
<div class="col-md-3">
<div id='hierarchy' class="panel panel-primary">
<div class="panel-heading title"><span class="glyphicon glyphicon-tags"></span>Labels</div>
<div class="pannel-body hierarchy">
<span v-for='(value, index) in old_labels_tab'>
<img @click="rm_label_of_old_tab(index)" src="static/swimming.small.png">
Deleted User
committed
<span><b>{{ value[1] }}</b></span><br>
</span>
<span v-for='(value, index) in unselect_tab'>
<span><b>{{ value[1] }}</b></span>
<img @click="rm_label_to_unselect_tab(index)" src="static/swimming.small.png">
<br>
</span>
Deleted User
committed
<!-- <hr v-if="this.old_labels_tab.length > 0 && this.new_labels_tab.length > 0"/> -->
<transition-group name="new_labels">
<span v-for='(label, index) in new_labels_tab' v-bind:key="label">
<img @click="add_label_to_old_tab(index, 1)" src="static/unchecked_swimming.small.png">
<span><b>{{ label[1] }}</b></span>
<img @click="add_label_to_unselect_tab(index, 2)" src="static/unchecked_swimming.small.png">
<br>
</span>
</transition-group>
<!--<br><button v-on:click="reset()">Reset</button>-->
</div>
</div>
</div>
Deleted User
committed
<div class="col-md-7" id="result">
<div class="panel panel-primary">
<div class="panel-heading title"><span class="glyphicon glyphicon-book"></span> Tutoriels <!--<span class="badge badge_title">8</span>--></div>
<!-- <transition-group name="tutos"> -->
Deleted User
committed
<ul class="list-group" >
<li class="list-group-item" v-for='tuto in result_tab' v-bind:key="tuto"><b class="single_result"><a :href='tuto[1]' target="_blank">{{ tuto[0] }}</a></b></li>
</ul>
Deleted User
committed
</div>
Deleted User
committed
Deleted User
committed
</div>
</body>
<script src="static/ajax.js"></script>
<script src="static/array_opperations.js"></script>
<script src="static/father_child.js"></script>
<script src="static/labels.js"></script>
<script src="static/maj_tutorial.js"></script>
<script>
function init_research() {
/**
* Initialise the two different par of hierarcy and
* the array that contain all tutos.
*/
hierarchy.init_all_labels();
hierarchy.init_new_labels_tab();
result.init_result_tab();
}
var hierarchy = new Vue ({
el: '#hierarchy',
data: {
/**
* - 'all_labels' contain all labels in DB [id, name, father_id].
* - 'old_labels_tab' contain all labels previously selected. They
Deleted User
committed
* are used for select the tutos and they are signaled by a check.
Deleted User
committed
* - 'new_labels_tab' contain the labels generated thanks to tutorials.
* If one of them is selected. It pass in old_tab.
*/
all_labels : [],
old_labels_tab: [],
new_labels_tab: [],
Deleted User
committed
},
methods: {
init_all_labels: function() {
/**
* Get all 'labels' table [id, name, father_id]
*/
this.all_labels = JSON.parse(request_ajax("labels"));
},
init_new_labels_tab: function() {
/**
* Initialise 'new_labels_tab' with the main labels (labels
* that don't have a father.
*/
this.new_labels_tab = JSON.parse(request_ajax("main_labels"));
},
reset : function() {
/**
* Clear all array of hierarchy.
*/
this.old_labels_tab = [];
this.new_labels_tab = [];
Deleted User
committed
this.unselect_tab = [];
Deleted User
committed
result.result_tab = [];
hierarchy.init_new_labels_tab();
result.init_result_tab();
},
Deleted User
committed
add_label_to_old_tab: function(index, source) {
Deleted User
committed
/**
Deleted User
committed
* Move selected label from [new tab => old tab] or
* from [unselect_tab => old tab].
Deleted User
committed
*/
Deleted User
committed
if (source == 1) {
this.old_labels_tab.push(this.new_labels_tab[index]);
this.new_labels_tab.splice(index, 1);
result.maj_tutos(2);
} else if (source == 2) {
this.old_labels_tab.push(this.unselect_tab[index]);
this.unselect_tab.splice(index, 1);
result.maj_tutos(3);
}
Deleted User
committed
},
Deleted User
committed
rm_label_of_old_tab: function(index) {
Deleted User
committed
/**
* If a label in 'old_labels_tab' is selected, it is deleted
* of this tab. If this tab is empty, the new_labels_tab
* is filled with the main labels (labels without father).
*/
this.old_labels_tab.splice(this.old_labels_tab.indexOf(this.old_labels_tab[index]), 1);
if (this.old_labels_tab.length == 0) {
Deleted User
committed
this.reset();
Deleted User
committed
} else
result.maj_tutos(3);
},
Deleted User
committed
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
add_label_to_unselect_tab: function(index, source) {
/**
* After click on cross of a label from old_labels_tab ot new_labels_tab.
* This label is add to unselect_tab and it is remove from previous tab ().
* Next the list of tutos is updated.
*/
if (source == 1) {
var posi = is_in_tab(this.old_labels_tab[index][0], this.all_labels, 0, 2);
hierarchy.unselect_tab.push(this.all_labels[posi]);
this.old_labels_tab.splice(index, 1);
} else if (source == 2) {
var posi = is_in_tab(this.new_labels_tab[index][0], this.all_labels, 0, 2);
hierarchy.unselect_tab.push(this.all_labels[posi]);
this.new_labels_tab.splice(index, 1);
}
if (this.old_labels_tab.length == 0) {
this.reset();
return;
}
result.del_unselected_tuto();
result.maj_tutos(3);
},
rm_label_to_unselect_tab: function(index) {
/**
* After click on cross of labels from unselect_tab, this label
* is remove of this tab and the list of tutos is updated.
*/
this.unselect_tab.splice(index, 1);
result.maj_tutos(3);
},
Deleted User
committed
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
maj_new_labels_tab: function() {
/**
* Update the tab hierarchy.new_labels_tab whith labels
* of the new tutos.
* - If there is 1 father and his childs, only the
* highest father is selected.
* - If all tutos have the same label, it is deleted.
* -The labels are sorted alphabetically.
*/
var all_labels = '';
this.new_labels_tab = [];
if (result.result_tab.length == 1)
this.new_labels_tab = [];
else {
var inter_labels = '';
var link = '';
for (var i = 0; result.result_tab[i]; i++) {
link = result.result_tab[i][1];
inter_labels = JSON.parse(request_ajax('labels_of_a_link/'+link));
all_labels += inter_labels.join(',')+',';
}
all_labels = all_labels.split(',');
all_labels.pop();
var diff_labels = get_diff_between_labels(all_labels);
diff_labels = remove_childs_of_tab(diff_labels, this.all_labels);
this.new_labels_tab = create_tab_of_labels(diff_labels, this.all_labels);
Deleted User
committed
result.del_unselected_tuto();
Deleted User
committed
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
this.new_labels_tab = sort_tab_of_labels(this.new_labels_tab);
}
}
}
});
var result = new Vue ({
el: '#result',
data: {
/**
* - 'result_tab' contain all tutos to display on this
* form : [title, link, date].
* - 'childs_of_old_labels' contain the id of chilf labels
* of labels contain in 'hierarchy.old_labels_tab'.
* - 'link_of_results' is a string contauning the tutorial links
* contained in 'result_tab'. (Used for SQL requests)
*/
result_tab: [],
childs_of_old_labels: [],
links_of_results: ''
},
methods: {
init_result_tab: function() {
/**
* Retrive all tutorials from the database
* which will all be displayed the first time.
*/
this.result_tab = JSON.parse(request_ajax("all_tutos"));
},
Deleted User
committed
del_unselected_tuto: function() {
/**
* Delete all tutos from result.result_tab that have the
* same labels contain in hierarchy.unselect_tab.
*/
var labels_tab = [];
var childs = [];
var tab_tutos_final = [];
for (var i = 0; result.result_tab[i]; i++) {
labels_tab = JSON.parse(request_ajax("labels_of_a_link/"+result.result_tab[i][1]));
for (var j = 0, inter = 0; labels_tab[j]; j++) {
if (is_in_tab(labels_tab[j], hierarchy.unselect_tab, 0, 2) == -1)
inter++;
if (inter == labels_tab.length)
tab_tutos_final.push(result.result_tab[i]);
}
}
result.result_tab = tab_tutos_final;
},
Deleted User
committed
maj_tutos: function(type) {
/**
* Update tutorials.
*/
this.childs_of_old_labels = get_all_childs_from_old(hierarchy.all_labels, hierarchy.old_labels_tab);
if (type == 1 || hierarchy.old_labels_tab.length == 1) {
console.log("SEARCH FROM DB");
maj_tutos_from_db();
} else if (type == 3) {
console.log('MAJ AFTER RM')
maj_tutos_after_remove();
Deleted User
committed
} else if (type == 2 || hierarchy.old_labels_tab.length >= 1) {
Deleted User
committed
console.log("PLUSIEURS label dans OLD")
maj_tutos_for_many_labels();
} else {
console.log("NOTHING");
this.result_tab = [];
}
}
}
});
init_research();
</script>
</html>