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>
<br><br><br><br>
<div class="row">
<br><br><br>
<div class="col-md-1"></div>
<div class="col-md-3">
Deleted User
committed
<div id="hierarchy">
<div class="panel panel-primary">
<div class="panel-heading title">
<span style="margin-left: 17%;"></span><span class="glyphicon glyphicon-tags"></span>Labels</span>
<img @click="change_language('FR')" style="height:30px; width:30px; margin-left: 6%; margin-right: 5%;" src="static/boue_france_black.png" onmouseover="this.src='static/boue_france.png'" onmouseout="this.src='static/boue_france_black.png'">
<img @click="change_language('US')" style="height:30px; width:30px;" src="static/boue_usa_black.png" onmouseover="this.src='static/boue_usa.png'" onmouseout="this.src='static/boue_usa_black.png'">
</div>
<div 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'">
Deleted User
committed
<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>
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>
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
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*Vue.component('language', {
props: ['lang', 'img_style', 'clear', 'black'],
data: function() {
return {
content: {
"FR": {
"style": "height:50px; width:50px;",
"clear": "static/boue_usa_translate.png",
"black": "static/boue_usa_translate_black2.png"
},
"US": {
"style": "height:50px; width:50px; margin-left: 23%; margin-right: 15%;",
"clear": "static/boue_france_translate.png",
"black": "static/boue_france_translate_black2.png"
}
},
//onmouseover=\"this.src='static/boue_france_translate.png'\" onmouseout=\"this.src='static/boue_france_translate_black2.png'\">"},
language: this.lang,
my_style: "",
select_img: "",
unselect_img: ""
}
},
computed: {
test: function() {
this.my_style = this.content[this.lang]["style"],
this.select_img = "this.src='"+this.content[this.lang]["clear"]+"'",
this.unselect_img = "this.src='"+this.content[this.lang]["black"]+"'"
}
},
template: "<div>{{test}}<img :style='this.my_style' :src='this.select_img' :onmouseover='this.select_img' :onmouseout='this.unselect_img'></div>"
});*/
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: [],
Deleted User
committed
url: "static/unchecked_swimming.small.png",
Deleted User
committed
language: "FR"
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.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.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 = [];
Deleted User
committed
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_languages: function(lang) {
/**
* Change the language of all labels.
*/
this.language = lang;
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]);
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.
*/
Deleted User
committed
var startTime = new Date().getTime();
var elapsedTime = 0;
Deleted User
committed
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);
Deleted User
committed
result.del_unselected_tuto();
Deleted User
committed
this.new_labels_tab = sort_tab_of_labels(this.new_labels_tab);
}
Deleted User
committed
elapsedTime = new Date().getTime() - startTime;
console.log("Duree Maj new labels tab : "+elapsedTime);
Deleted User
committed
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
}
}
});
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.
*/
Deleted User
committed
var startTime = new Date().getTime();
var elapsedTime = 0;
Deleted User
committed
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
elapsedTime = new Date().getTime() - startTime;
console.log("Duree del_tuto_unselect : "+elapsedTime);
Deleted User
committed
},
Deleted User
committed
maj_tutos: function(type) {
/**
* Update tutorials.
*/
Deleted User
committed
var startTime = new Date().getTime();
var elapsedTime = 0;
Deleted User
committed
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 = [];
}
Deleted User
committed
elapsedTime = new Date().getTime() - startTime;
console.log("Duree maj tuto complète : "+elapsedTime);