-
Deleted User authoredDeleted User authored
browse.html 8.11 KiB
<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'>
<img @click="rm_label_of_old_tab(index)" src="static/checked.png">
<span>{{ value[1] }}</span>
<img @click="add_label_to_unselect_tab(index, 1)" src="static/unclose.png">
<br>
</span>
<span v-for='(value, index) in unselect_tab'>
<img @click="add_label_to_old_tab(index, 2)" src="static/unchecked.png">
<span>{{ value[1] }}</span>
<img @click="rm_label_to_unselect_tab(index)" src="static/close.png">
<br>
</span>
<span v-for='(value, index) in new_labels_tab'>
<img @click="add_label_to_old_tab(index, 1)" src="static/unchecked.png">
<span>{{ value[1] }}</span>
<img @click="add_label_to_unselect_tab(index, 2)" src="static/unclose.png">
<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></b></p>
</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 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: []
},
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].
*/
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);
}
},
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.reset();
} 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);
},
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);
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>