<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">
<title>Browse</title>
<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 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class='container'>
<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 v-if="this.loading == 1" class="pannel-body hierarchy">
<span v-for='(value, index) in old_labels_tab'>
<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'">
<span><b>{{ value[1] }}</b></span><br>
</span>
<span v-for='(value, index) in unselect_tab'>
<span><b>{{ value[1] }}</b></span>
<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'">
<br>
</span>
<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">
<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'">
<span><b>{{ label[1] }}</b></span>
<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>
</span>
</transition-group>
<!--<br><button v-on:click="reset()">Reset</button>-->
</div>
</div>
</div>
<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"> -->
<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>
<!-- </transition-group> -->
</div>
</div>
</div>
</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;
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">'
});
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
* are used for select the tutos and they are signaled by a check.
* - '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: [],
unselect_tab: [],
loading: 1,
url: "static/unchecked_swimming.small.png"
},
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 = [];
this.unselect_tab = [];
result.result_tab = [];
hierarchy.init_new_labels_tab();
result.init_result_tab();
},
add_label_to_old_tab: function(index, source) {
/**
* Move selected label from [new tab => old tab] or
* from [unselect_tab => old tab].
*/
this.loading = 0;
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);
}
this.loading = 1;
},
rm_label_of_old_tab: function(index) {
/**
* 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
result.maj_tutos(3);
},
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);
//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
},
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) {
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);
result.del_unselected_tuto();
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"));
},
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;
},
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();
} else if (type == 2 || hierarchy.old_labels_tab.length >= 1) {
console.log("PLUSIEURS label dans OLD")
maj_tutos_for_many_labels();
} else {
console.log("NOTHING");
this.result_tab = [];
}
}
}
});
init_research();
</script>
</html>