<html>
<head>
<title>Browse</title>
<link rel="stylesheet" href="static/add_tuto.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='center'>
<div id='hierarchy'>
<span v-for='(value, index) in old_labels_tab'>
<span @click="rm_from_old_tab(index)">{{ value[1] }}</span>
<img src="static/checked.png">
<br>
</span>
<span v-for='(value, index) in new_labels_tab'>
<span @click="add_to_old_tab(index)">{{ value[1] }}</span>
<br>
</span>
<br><button v-on:click="reset()">Reset</button>
</div>
<div id='result'>
<span v-for='(value) in result_tab'>
<p><b><a :href='value[1]' target="_blank">{{ value[0] }}</a></p></b>
</span>
</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>
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
* are used for select the tutos ans 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: [],
},
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 = [];
result.result_tab = [];
hierarchy.init_new_labels_tab();
result.init_result_tab();
},
add_to_old_tab: function(index) {
/**
* Move selected label from new tab in old tab
*/
this.old_labels_tab.push(this.new_labels_tab[index]);
this.new_labels_tab.splice(index, 1);
result.maj_tutos(2);
},
rm_from_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.init_new_labels_tab();
result.init_result_tab();
} else
result.maj_tutos(3);
},
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);
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"));
},
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>