hedera-web/js/hedera/gui.js

const Module = require('./module');
const Tpl = require('./gui.xml').default;
const kebabToCamel = require('vn/string-util').kebabToCamel;
const routes = require('../../import').routes;
require('./gui.scss');

module.exports = new Class({
	Extends: Vn.Component,
	Properties: {
		conn: {
			type: Db.Connection
			,set(x) {
				this.link({_conn: x}, {'loading-changed': this._onConnLoadChange });
			}
			,get() {
				return this._conn;
			}
		}
	}

	,forms: {}
	,activeForm: null
	,activeCss: null
	,requestedForm: null
	,menuShown: false
	,menuOptions: {}
	,choosedOption: null
	,_shown: false
	,_scrollTimeout: null
	,_navbarVisible: true

	,initialize(props) {
		this.loadTemplateFromString(Tpl);
		this.loadingCount = 0;

		this.$.background.onclick = function() {};

		this.$.leftPanel.addEventListener('click', function(event) {
			event.stopPropagation();
		});

		Vn.Component.prototype.initialize.call(this, props);

		var sql = 'SELECT id, name, nickname FROM account.myUser;'
			+'SELECT defaultForm FROM config;'
			+'SELECT url FROM imageConfig;'
			+'SELECT dbproduccion FROM vn.config;'
			+'SELECT productionDomain, testDomain FROM config;';
		this._conn.execQuery(sql, this.onMainQueryDone.bind(this));

		this.loadMenu();
	}
	
	,show() {
		if (this._shown)
			return;
	
		this._shown = true;
		this.doc.body.appendChild(this.node);
		Htk.Toast.pushTop(this.$.formHolder);
		
		if (Vn.isMobile()) {
			this._onScrollHandler = this._onScroll.bind(this);
			window.addEventListener('scroll', this._onScrollHandler );
		}

		this.formParam = new Vn.Param({
			lot: this.hash,
			name: 'form',
		});
		this.formParam.on('changed', this._onFormChange, this);
		
		if (!localStorage.getItem('hederaCookies')) {
			localStorage.setItem('hederaCookies', true);
			Htk.Toast.showWarning(_('By using this site you accept cookies'));
		}

		this.supplantInit();
	}
	
	,hide() {
		if (!this._shown)
			return;
	
		this._shown = false;

		if (Vn.isMobile())
			window.removeEventListener('scroll', this._onScrollHandler);

		Htk.Toast.popTop();
		this.formParam.unref();
		this.closeForm();
		this.hideMenu();
		Vn.Node.remove(this.node);
	}
	
	,logout() {
		this.onLogoutClick();
	}
	
	,async onLogoutClick() {
		try {
			await this._conn.close();
		} finally {
			this.emit('logout');
		}
	}

	,_onConnLoadChange(conn, isLoading) {
		if (isLoading)
			this.loaderPush();
		else
			this.loaderPop();
	}

	,onMainQueryDone(resultSet) {
		// Retrieving the user name

		this.user = resultSet.fetchObject();
		Vn.Node.setText(this.$.userName, this.user.nickname);

		// Retrieving configuration parameters

		var res = resultSet.fetchResult();
		var columns = res.columns;
	
		if (res.next())
		for (var i = 0; i < res.columns.length; i++)
			Vn.Config[columns[i].name] = res.get(columns[i].name);

		// Retrieving configuration parameters

		Vn.Config.imageUrl = resultSet.fetchValue();

		// Retrieving configuration parameters

		var isTesting = !resultSet.fetchValue();

		if (isTesting) {
			this.$.devInfo.style.display = 'block';
			this.$.version.textContent = Vn.Cookie.get('vnVersion');
		}

		// Retrieving configuration parameters

		var res = resultSet.fetchObject();

		if (res && res.testDomain) {
			if (location.host != res.productionDomain) {
				var linkText = 'Old website';
				var linkField = 'productionDomain';
			} else {
				var linkText = 'Test the new website';
				var linkField = 'testDomain';
			}
			
			Vn.Node.setText(this.$.testLink, _(linkText));
			this.$.testLink.href = '//'+ res.get(linkField);
			this.$.testLink.style.display = 'block';
		} else
			this.$.testLink.style.display = 'none';

		// Loading the default form

		this._onFormChange();
	}
	
	,loadMenu() {
		var sql = 'SELECT * FROM myMenu';
		this._conn.execQuery(sql, this._onMenuLoad.bind(this));
	}

	,_onMenuLoad(resultSet) {
		// Retrieving menu sections		

		var res = resultSet.fetchData();	
		var sectionMap = {};
		let i = 0;

		for (const row of res) {
			var parent = row.parentFk;
			
			if (!sectionMap[parent])
				sectionMap[parent] = [];
				
			sectionMap[parent].push(i++);
		}

		Vn.Node.removeChilds(this.$.mainMenu);
		this.createMenu(res, sectionMap, null, this.$.mainMenu);
	}

	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Menu

	,createMenu(res, sectionMap, parent, ul) {
		var sections = sectionMap[parent];
		if (!sections) return;

		for (var i = 0; i < sections.length; i++) {
			res.row = sections[i];
			const row = res[sections[i]];
		
			var li = this.createElement('li');
			ul.appendChild(li);
	
			var text = this.createTextNode(_(row.description));

			var a = this.createElement('a');
			
			if (row.path) {
				a.href = this.hash.make({form: row.path});
				this.menuOptions[row.path] = a;
			}

			a.appendChild(text);
			li.appendChild(a);
			
			var formId = row.id;
			
			if (sectionMap[formId]) {
				var submenu = this.createElement('ul');
				submenu.className = 'submenu';
				li.appendChild(submenu);

				li.addEventListener('mouseover',
					this._onLiMouseHover.bind(this, submenu, a));
				li.addEventListener('mouseout',
					this._onLiMouseOut.bind(this));

				this.createMenu(res, sectionMap, formId, submenu);
			}
		}
	}

	,_onLiMouseHover(submenu, parent) {
		if (this.menuShown)
			return;

		this.hideSubmenu();
		this.activeSubmenu = submenu;

		var rect = parent.getBoundingClientRect();
		Vn.Node.addClass(submenu, 'popup');
		submenu.style.left = rect.right +'px';
		submenu.style.top = rect.top +'px';
	}
	
	,_onLiMouseOut() {
		this.timeout = setTimeout(this.hideSubmenu.bind(this), 160);
	}
	
	,hideSubmenu() {
		var submenu = this.activeSubmenu;
	
		if (submenu) {
			Vn.Node.removeClass(submenu, 'popup');
			submenu.style.left = '';
			submenu.style.top = '';
			clearTimeout(this.timeout);
			this.activeSubmenu = null;
			this.timeout = 0;
		}
	}

	,onMenuClick(event) {
		event.stopPropagation();
		this.showMenu();
	}

	,showMenu() {
		this.showBackground();
		Vn.Node.addClass(this.$.leftPanel, 'show');
		this.menuShown = true;

		this.hideMenuCallback = this.hideMenu.bind(this);
		this.doc.addEventListener('click', this.hideMenuCallback);
	}

	,hideMenu() {
		if (!this.menuShown)
			return;
	
		this.hideBackground();
		Vn.Node.removeClass(this.$.leftPanel, 'show');
		this.menuShown = false;
		
		this.doc.removeEventListener('click', this.hideMenuCallback);
		this.hideMenuCallback = null;
	}

	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Navigation bar
	
	,_onScroll() {
		if (this._scrollTimeout === null)
			this._scrollTimeout = setTimeout(
				this._scrollTimeoutFunc.bind(this), 150);
	}
	
	,_scrollTimeoutFunc() {
		if (!this._shown)
			return;
		
		var navbar = this.$.topBar;
		var yOffset = Vn.Browser.getPageYOffset();
		var showNavbar = this._lastYOffset > yOffset || yOffset < navbar.offsetHeight;
		
		if (showNavbar !== this._navbarVisible) {
			if (showNavbar)
				var translateY = 0;
			else
				var translateY = -navbar.offsetHeight;

			navbar.style.transform =
				'translateZ(0) translateY('+ translateY +'px)';
		}
		
		this._navbarVisible = showNavbar;
		this._lastYOffset = yOffset;
		this._scrollTimeout = null;
	}

	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Background

	,showBackground() {
		Vn.Node.addClass(this.$.background, 'show');
	}

	,hideBackground() {
		Vn.Node.removeClass(this.$.background, 'show');
	}

	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Spinner
	
	,loaderPush() {
		this.loadingCount++;

		if (this.loadingCount == 1)
			this.$.loader.start();
	}
	
	,loaderPop() {
		if (this.loadingCount == 0)
			return;
		
		this.loadingCount--;
		
		if (this.loadingCount == 0)
			this.$.loader.stop();
	}
	
	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Forms
	
	,async _onFormChange() {
		var formPath = this.formParam.value;
		
		if (!formPath)
			formPath = Vn.Config.defaultForm;
		
		this.hideMenu();
		this.loaderPush();
		this.closeForm();
		this.requestedForm = formPath;

		var newChoosedOption = this.menuOptions[formPath];
		
		if (newChoosedOption) {
			Vn.Node.addClass(newChoosedOption, 'selected');
			this.choosedOption = newChoosedOption;
		}

		await Vn.Locale.load(`forms/${formPath}`);

		let FormKlass;
		
		try {
			FormKlass = (await this.importForm(formPath)).default;
		} catch (err) {
			this.loaderPop();
			console.log(err);
			return Htk.Toast.showError(_('Error loading form') +`: ${err.message}`);
		}

		this.loaderPop();

		if (!this._shown)
			return;

		this.activeForm = new FormKlass(this);
		this.activeForm.open();
	}

	,async importForm(path) {
		const states = path.split('/');
		let importFn = routes;
		for (let i = 0; i < states.length && importFn; i++)
			importFn = importFn[kebabToCamel(states[i])];
		if (!importFn)
			throw new Error(`Route '${path}' does not exist`);
		return importFn();
	}
	
	,setForm(form) {
		const holder = this.$.formHolder;
		Vn.Node.removeChilds(holder);

		if (form) {
			holder.appendChild(form);
			holder.classList.add('move-start');
			setTimeout(() => this._onSetFormTimeout(), 10);
		}
	}
	
	,_onSetFormTimeout() {
		const holder = this.$.formHolder;
		holder.classList.remove('move-start');
		holder.classList.add('move-end');
		holder.addEventListener('transitionend',
			() => holder.classList.remove('move-end'),
			{once: true}
		);
	}
	
	,setTitle(title) {
		Vn.Node.removeChilds(this.$.title);
	
		if (title)
			this.$.title.appendChild(title);
	}
	
	,setActions(actions) {
		Vn.Node.removeChilds(this.$.actionBar);
				
		if (actions)
			this.$.actionBar.appendChild(actions);
	}
	
	,closeForm() {
		if (this.activeForm) {
			Vn.Node.removeClass(this.$.formHolder, 'show');
			this.activeForm.close();
			this.activeForm._destroy();
			this.activeForm = null;
		}

		if (this.activeCss) {
			Vn.excludeCss(this.activeCss);
			this.activeCss = null;
		}

		if (this.choosedOption) {
			Vn.Node.removeClass(this.choosedOption, 'selected');
			this.choosedOption = null;
		}
	}
	
	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Reports
	
	,openReport(reportName, lot) {
		this.loaderPush();

		var module = new Module('reports', reportName);
		module.addCallback(this._onReportLoad.bind(this, lot));
	}
	
	,_onReportLoad(lot, module) {
		this.loaderPop();

		if (module.error) {
			Htk.Toast.showError(_('Error loading report'));
			return;
		}
		
		var report = new module.klass(module, this);
		report.open(lot);
	}
	
	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Supplant
	
	,supplantInit() {
		var user = sessionStorage.getItem('supplantUser');

		if (user != null)
			this.supplantUser(user);
	}

	,supplantUser(user, callback) {
		this._conn.supplantUser(user,
			this._onUserSupplant.bind(this, callback, user));
	}
	
	,_onUserSupplant(callback, user, supplantOk, err) {
		if (err) throw err;
	
		sessionStorage.setItem('supplantUser', user);
		this.loadMenu();
	
		var sql = 'SELECT nickname FROM account.myUser';
		this._conn.execQuery(sql, this._onSupplantName.bind(this));
		
		if (callback)
			callback();
	}

	,_onSupplantName(resultSet) {
		var userName = resultSet.fetchValue();
		Vn.Node.setText(this.$.supplanted, userName);
		this.$.supplant.classList.toggle('show', true);
	}

	,onSupplantExitClick() {
		this.$.supplant.classList.toggle('show', false);
		this._conn.supplantEnd();
		sessionStorage.removeItem('supplantUser',
			sessionStorage.getItem('supplantUser'));
		this.loadMenu();
		this._onFormChange();
	}
	
	//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Destroy

	,_destroy() {
		this.hide();
		Vn.Component.prototype.initialize.call(this);
	}
});