SMMP/public_html/view/js/history.js

// On referencie toutes les sections
var section = {
	view: {
		text:      '#CONTAINER > section[data-sublink="view"] ',
        element:   document.querySelector('#CONTAINER > section[data-sublink="view"]'),
        search: {
            bar:  document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar'),
            func: null,
            time: null // search time manager (interval)
        },
    },

	details: {
		text:    '#CONTAINER > section[data-sublink="details"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="details"]')
    },

	archive: {
		text:    '#CONTAINER > section[data-sublink="archive"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="archive"] #archive_clean')
    },

};


/* GESTION DE L'AFFICHAGE DES ENTREES
*
*/
if( section.view.element != null ){

	/* (0) On gère le zoom sur un log  via URL */
	if( pageManager.vars.length > 1 && !isNaN(pageManager.vars[1]) ){
		document.location = '#'+pageManager.vars[1];
		if( document.getElementById(pageManager.vars[1]) != null )
			document.getElementById(pageManager.vars[1]).addClass('selected');
	}

	/* (1) On recupere tous les liens */
	section.view.link = {
		details: document.querySelectorAll(section.view.text + 'button[data-details]')
	};


    /* (2) Gestion de la recherche instantannee */
    section.view.search.func = function(){
        var search = {
			path: 'historyDefault/search',
			keywords: section.view.search.bar.value
		};

		// On envoie la requete
		api.send(search, function(result){
            if( result.error == 0 ){ // si aucune erreur

				// On enregistre tous les UID dans un tableau
				var uid_list = [];
                for( var i = 0 ; i < result.history.length ; i++ )
                    uid_list.push( parseInt(result.history[i].id_history) );

				// On recupere la liste des elements correspondants aux logs
                var history_list = document.querySelectorAll(section.view.text + '> article.inline-row[id]');

				// Pour chaque log
				for( var i = 0 ; i < history_list.length ; i++ ){
                    console.log(uid_list, history_list);
					// Si doit etre visible
					if( uid_list.indexOf(parseInt(history_list[i].id)) > -1 )
                        history_list[i].remClass('hidden');
					// Si ne doit pas etre visible
                    else
						history_list[i].addClass('hidden');
				}
			}
		});
    };

	section.view.search.bar.addEventListener('keyup', function(e){

        if( section.view.search.time != null )
            clearTimeout(section.view.search.time);

        section.view.search.time = setTimeout(section.view.search.func, 500);

    }, false);


	/* (3) On gere la "redirection" vers les détail */
	for( var i = 0 ; i < section.view.link.details.length ; i++ ){

		section.view.link.details[i].addEventListener('click', function(e){
			pageManager.vars = [ 'details', e.target.getData('details') ];
			pageManager.refresh();
		}, false);

    }



}












/* GESTION DE L'ARCHIVAGE
*
*/
if( section.archive.element != null ){

	/* (1) Gestion du clic pour archivage */
	section.archive.element.addEventListener('click', function(e){

		e.preventDefault();

		/* (2) Create popup */
		var PopupManager = new Popup();

		var confirm_content = {
			title:   "Archivage de l'historique",
			content: "L'historique sera définitivement supprimé de la plateforme après la création de l'archive. Cette opération ne peut être annulée.",
			type:    "search",
			action:  "Archiver"
		};

		/* (3) Ask for confirmation */
		PopupManager.ask(confirm_content, function(is_confirmed){

			// {3.1} If cancelled -> abort //
			if( !is_confirmed )
				return;

			// {3.2} Manage request //
			api.send({path: 'historyDefault/archive'}, function(result){

				if( result.error == 0 )
					document.location = result.link;

			});

		});

	}, false);

}









/* GESTION DE L'AFFICHAGE DES DETAILS
*
*/
if( section.details.element != null ){

	/* (1) Get useful DOM Elements
	---------------------------------------------------------*/
	/* (1) Get parent */
	section.details.parent = {
		text: section.details.text+'article.timeline.container ',
		element: document.querySelector( section.details.text+'article.timeline.container ' )
	};

	/* (2) Get SVG tag */
	section.details.svg = {
		text: section.details.parent.text+'svg.timeline ',
		element: document.querySelector( section.details.parent.text+'svg.timeline ' )
	};

	/* (3) Get each event node */
	section.details.event = {
		text: section.details.svg.text+'circle.around ',
		list: document.querySelectorAll( section.details.svg.text+'circle.around ' )
	};

	/* (4) Get infobox node */
	section.details.info = {
		text: section.details.parent.text+'div.timeline.infobox ',
		element: document.querySelector( section.details.parent.text+'div.timeline.infobox ' )
	};

	/* (5) Bind infobox sub-elements */
	section.details.info.input = {

	};



	/* (2) Function: scroll-x on mouse hover
	---------------------------------------------------------*/
	/* (1) Bind slider event */
	section.details.parent.element.addEventListener('mousemove', function(e){

		var container = e.target.parentNode;

		console.log(e.clientX-container.offsetLeft, e.clientY-container.offsetTop);

	}, false);





	/* (3) Function: show infobox on click on event
	---------------------------------------------------------*/
	/* (1) Set click handler */
	section.details.event.handler = function(target){

		section.details.info.element.addClass('active');
		console.log('show infobox on element', target);

	};

	/* (2) Trigger event */
	section.details.svg.element.addEventListener('click', function(e){

		// {1} Trigger function only if element is an 'around circle' //
		if( e.target.nodeName && e.target.getData('user') && e.target.getData('machine') && e.target.getData('action') && e.target.getData('time') )
			section.details.event.handler(e.target);

	}, false);


}