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>
<style type="text/css">[v-cloak] {display: none;}</style>
Deleted User
committed
</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" v-cloak>
Deleted User
committed
<span style="margin-left: 10%; margin-right: 5%"><span class="glyphicon glyphicon-tags"></span>Labels</span>
Deleted User
committed
<img style="height:25px; width:25px; margin-right: 3%;" src="static/boue_france.png">
<img @click="change_labels_language('US')" style="height:25px; width:25px;" src="static/boue_usa_black.png" onmouseover="this.src='static/boue_usa.png'" onmouseout="this.src='static/boue_usa_black.png'">
<img @click="change_labels_language('FR')" style="height:25px; width:25px; margin-right: 3%;" src="static/boue_france_black.png" onmouseover="this.src='static/boue_france.png'" onmouseout="this.src='static/boue_france_black.png'">
<img @click="change_labels_language('FR')" style="height:25px; width:25px;" src="static/boue_usa.png" onmouseover="this.src='static/boue_usa_black.png'" onmouseout="this.src='static/boue_usa.png'">
<div 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>
<img class="icone_right" src="static/swimming.small.png" style="visibility: hidden;"><br>
</span>
<span v-for='(value, index) in unselect_tab'>
<img class="icone_left" src="static/swimming.small.png" style="visibility: hidden;">
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'">
<div v-if="this.loading == 1">
<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 v-if="(label[1].length <= 13)"><b>{{ label[1] }}</b></span>
<span v-else v-bind:title="label[1]"><b>{{ label[1].slice(0, 12)+"..." }}</b></span>
<img class="icone_right" @click="add_label_to_unselect_tab(index)" 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>
</div>
Deleted User
committed
<div class="col-md-7" id="result" v-cloak>
<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 v-if="this.loading == 1" class="list-group" >
Deleted User
committed
<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();
}
Deleted User
committed
function update_loading(value) {
/**
* The 'loading' value is common to both hierarchy and
* result views. When it is equal to 0, the content of
* hierarchy.new_labels_tab (new labels) and result.result_tab
* (tutoriels) must not be display. After modifications, loading
* changes to one and they are displayed.
*/
hierarchy.loading = value;
result.loading = value;
}
Vue.component('img_new_left', {
data: function() {
return {
survol: true,
check_link: "static/swimming.small.png",
uncheck_link: "static/unchecked_swimming.small.png"
}
},
template: '<img v-on:mouseover="survol = !survol" v-bind:src="survol ? check_link : uncheck_link">'
});
Deleted User
committed
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.
* For 'loading' see update_loading function above.
Deleted User
committed
* 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]
*/
Deleted User
committed
this.all_labels = JSON.parse(request_ajax("all_labels/"+this.labels_language));
Deleted User
committed
},
init_new_labels_tab: function() {
/**
* Initialise 'new_labels_tab' with the main labels (labels
* that don't have a father.
*/
Deleted User
committed
this.new_labels_tab = JSON.parse(request_ajax("main_labels/"+this.labels_language));
Deleted User
committed
//faire une fonction qui recup juste les null de all_labels
Deleted User
committed
},
reset : function() {
/**
* Clear all array of hierarchy.
*/
this.old_labels_tab = [];
this.new_labels_tab = [];
this.unselect_tab = [];
Deleted User
committed
result.result_tab = [];
Deleted User
committed
hierarchy.init_all_labels();
Deleted User
committed
hierarchy.init_new_labels_tab();
result.init_result_tab();
},
Deleted User
committed
change_labels_language: function(lang) {
Deleted User
committed
/**
* Change the language of all labels.
*/
Deleted User
committed
this.labels_language = lang;
Deleted User
committed
this.reset();
},
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]);
update_loading(0);
Deleted User
committed
this.new_labels_tab.splice(index, 1);
result.maj_tutos(2);
} else if (source == 2) {
this.old_labels_tab.push(this.unselect_tab[index]);
update_loading(0);
Deleted User
committed
this.unselect_tab.splice(index, 1);
result.maj_tutos(3);
}
update_loading(1);
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).
*/
update_loading(0);
Deleted User
committed
this.old_labels_tab.splice(this.old_labels_tab.indexOf(this.old_labels_tab[index]), 1);
Deleted User
committed
if (this.old_labels_tab.length == 0 && this.unselect_tab.length > 0) {
result.result_tab = JSON.parse(request_ajax("all_tutos"));
result.del_unselected_tuto();
hierarchy.maj_new_labels_tab();
} else if (this.old_labels_tab.length == 0) {
this.reset();
} else
Deleted User
committed
result.maj_tutos(3);
update_loading(1);
Deleted User
committed
},
Deleted User
committed
add_label_to_unselect_tab: function(index) {
Deleted User
committed
/**
* 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.
*/
Deleted User
committed
update_loading(0);
Deleted User
committed
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)
result.maj_tutos(4);
else
result.maj_tutos(3);
update_loading(1);
Deleted User
committed
},
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.
*/
update_loading(0);
Deleted User
committed
this.unselect_tab.splice(index, 1);
Deleted User
committed
if (this.unselect_tab.length == 0 && this.old_labels_tab.length == 0)
Deleted User
committed
this.reset();
Deleted User
committed
else if (this.old_labels_tab.length == 0 && this.unselect_tab.length > 0) {
result.result_tab = JSON.parse(request_ajax("all_tutos"));
result.del_unselected_tuto();
hierarchy.maj_new_labels_tab();
} else
Deleted User
committed
result.maj_tutos(3);
update_loading(1);
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
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)
* For 'loading' see update_loading function above.
Deleted User
committed
*/
result_tab: [],
childs_of_old_labels: [],
links_of_results: '',
loading: 1
Deleted User
committed
},
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);
Deleted User
committed
if (type == 4) {
console.log("AFTER to unselect");
maj_tutos_after_unselect();
} else if (type == 1 || hierarchy.old_labels_tab.length == 1) {
Deleted User
committed
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) {
Deleted User
committed
console.log("PLUSIEURS label dans OLD")
maj_tutos_for_many_labels();
} else {
console.log("NOTHING");
this.result_tab = [];
}
}
}
});
Deleted User
committed
init_research();
</script>
</html>