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>
<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 v-if="this.loading == 1" class="pannel-body hierarchy">
Deleted User
committed
<img class="icone_left" @click="rm_label_of_old_tab(index)" src="static/swimming.small.png" onmouseover="this.src='static/unchecked_swimming.small.png'" onmouseout="this.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>
Deleted User
committed
<img class="icone_right" @click="rm_label_to_unselect_tab(index)" src="static/swimming.small.png" onmouseover="this.src='static/unchecked_swimming.small.png'" onmouseout="this.src='static/swimming.small.png'">
<hr v-if="(this.old_labels_tab.length > 0 || this.unselect_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">
Deleted User
committed
<img class="icone_left" @click="add_label_to_old_tab(index, 1)" src="static/unchecked_swimming.small.png" onmouseover="this.src='static/swimming.small.png'" onmouseout="this.src='static/unchecked_swimming.small.png'">
Deleted User
committed
<img class="icone_right" @click="add_label_to_unselect_tab(index, 2)" src="static/unchecked_swimming.small.png" onmouseover="this.src='static/swimming.small.png'" onmouseout="this.src='static/unchecked_swimming.small.png'">
<!--<br><button v-on:click="reset()">Reset</button>-->
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>
var i = 0;
Deleted User
committed
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 app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
Vue.component('img_new_left', {
data: function() {
return {
survol: true,
check_link: "static/swimming.small.png",
uncheck_link: "static/unchecked_swimming.small.png"
}
},
props: ['test'],
template: '<img v-on:mouseover="survol = !survol" v-bind:src="survol ? check_link : uncheck_link">'
});
Deleted User
committed
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: [],
url: "static/unchecked_swimming.small.png"
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)// && this.unselect_tab.length == 0) et que rien dans unselect
this.reset();
/*else if (hierarchy.old_labels_tab.length == 0 && hierarchy.unselect_tab.length > 0) {
Afficher tous les tutos et supprimer tous les tutos contenant ces labels et recup les labels de c'est tuto
result.maj_tutos(1);*/
else
Deleted User
committed
result.maj_tutos(3);
},
Deleted User
committed
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;
// }
Deleted User
committed
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);
//a changer mais comme au debut on a la liste de tous les tutos y a pas de pb a deselecttionner un tuto des le debus
//puisqui va mettre a jour la liste des tutos deja present
Deleted User
committed
},
Deleted User
committed
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) {
Deleted User
committed
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
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>