Skip to content
Snippets Groups Projects
browse.html 5.57 KiB
Newer Older
<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>