<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>Add tutos</title>
<link rel="stylesheet" href="static/add_tuto.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-md-1 col-md-3">
<div id='hierarchy'>
<span v-for='(value, index) in table'>
<span @click="activate_lo(index)">{{ value[1] }}</span>
<img v-if='is_active[index] % 2 == 1' src="static/checked.png">
<br>
</span>
{{ labels_add }}
<!-- <span v-bind:src="labels_add[0]"></span> -->
<br>
</div>
</div>
<div class="col-md-7">
<div id='form'>
<h3>[[ status ]]</h3>
<form name="form1" method="post" action="">
<div class="form-group">
<label>Titre : </label>
<input type="text" name="title" class="len_input form-control" placeholder="Créer une image Docker"/>
</div>
<div class="form-group">
<label>Lien : </label>
<input type="text" name="link" class="len_inpu form-control" placeholder="http://"/>
</div>
<div class="form-group">
<label>Prescriber : </label>
<input type="text" name="prescriber" class="len_input form-control" placeholder="Jean Dupont"/>
</div>
<input type="hidden" name="labels" value= "" />
<button type="submit" class="btn btn-primary">Ajouter</button>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="static/create_arbo.js"></script>
<script src="static/array_opperations.js"></script>
<script src="static/ajax.js"></script>
<script>
function create_empty_tab(size) {
var result = [];
for (var i = 0; i < size; i++)
result.push(0);
return (result);
}
function get_all_childs_of_father(tab_labels, father_id) {
/**
* Gets all the childs (label id) from a father.
*/
var childs = [];
for (var i = 0; tab_labels[i]; i++) {
if (tab_labels[i][2] == father_id) {
childs.push(tab_labels[i][0])
childs = childs.concat(get_all_childs_of_father(tab_labels, tab_labels[i][0]));
}
}
return (childs);
}
function get_all_fathers_of_child(tab_labels, child_id) {
/**
* Gets all the fathers (label id) of a child.
*/
var fathers = [];
var posi_child = is_in_tab(child_id, tab_labels, 0, 2);
for (var i = 0; tab_labels[i]; i++) {
if (tab_labels[posi_child][2] == tab_labels[i][0]) {
fathers.push(tab_labels[i][0]);
fathers = fathers.concat(get_all_fathers_of_child(tab_labels, tab_labels[i][0]));
}
}
return (fathers);
}
function selection_label(id_label) {
var all_fathers = get_all_fathers_of_child(hierarchy.all_labels, id_label);
var all_childs = get_all_childs_of_father(hierarchy.all_labels, id_label);
var posi = -1;
console.log(all_fathers);
console.log(all_childs);
hierarchy.labels_add.push(id_label);
for (var i = 0; all_fathers[i]; i++) {
posi = is_in_tab(all_fathers[i], hierarchy.labels_add, 0, 1);
if (posi == -1) {
hierarchy.labels_add.push(all_fathers[i]);
}
}
for (var i = 0; all_childs[i]; i++) {
posi = is_in_tab(all_childs[i], hierarchy.labels_add, 0, 1);
if (posi == -1) {
hierarchy.labels_add.push(all_childs[i]);
}
}
}
var hierarchy = new Vue({
el: '#hierarchy',
data: {
all_labels: this.all_labels = JSON.parse(request_ajax("labels")),
table: order_intent_labels_tab(),
is_active: create_empty_tab(40),
labels_add: []
},
methods: {
activate_lo: function (index) {
var id_lab = this.table[index][0];
this.is_active[index] += 1;
if (this.is_active[index] % 2 == 1) {
selection_label(this.table[index][0]);
//this.labels_add.push(index);
} else
this.labels_add.splice(this.labels_add.indexOf(id_lab), 1);
document.form1.labels.value = this.labels_add;
}
}
});
</script>
</html>