Adding files

html/scripts/app.js

@@ -0,0 +1,168 @@
+(function(){
+
+	let DefaultTpl = 
+		'<div class="head">{{title}}</div>' +
+			'<div class="menu-items">' + 
+				'{{#items}}<div class="menu-item" data-value="{{value}}">{{label}}</div>{{/items}}' +
+			'</div>'+
+		'</div>'
+	;
+
+	let DefaultWithTypeAndCountTpl = 
+		'<div class="head">{{title}}</div>' +
+			'<div class="menu-items">' + 
+				'{{#items}}<div class="menu-item" data-value="{{value}}" data-remove-on-select="{{removeOnSelect}}" data-type="{{type}}" data-count="{{count}}">{{label}}</div>{{/items}}' +
+			'</div>'+
+		'</div>'
+	;
+
+	let menus = {
+
+		cloakroom : {
+		  title     : 'Vestiaire',
+		 	visible   : false,
+		 	current   : 0,
+		 	hasControl: true,
+		 	template  : DefaultTpl,
+
+		  items: [
+		  	{label: 'Tenue civile',   value: 'citizen_wear'},
+		  	{label: 'Tenue de travail', value: 'job_wear'}
+		  ]
+		},
+	}
+
+	let renderMenus = function(){
+		for(let k in menus){
+
+			let elem = $('#menu_' + k);
+
+			elem.html(Mustache.render(menus[k].template, menus[k]));
+
+			if(menus[k].visible)
+				elem.show();
+			else
+				elem.hide();
+
+		}
+	}
+
+	let showMenu = function(menu){
+
+		currentMenu = menu;
+
+		for(let k in menus)
+			menus[k].visible = false;
+
+		menus[menu].visible = true;
+
+		renderMenus();
+
+		if(menus[currentMenu].items.length > 0){
+
+			$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+			$('#menu_' + currentMenu + ' .menu-item:eq(0)').addClass('selected');
+
+			menus[currentMenu].current = 0;
+			currentVal                 = menus[currentMenu].items[menus[currentMenu].current].value;
+			currentType                = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('type');
+			currentCount               = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('count');
+		}
+		
+		isMenuOpen        = true
+	}
+
+	let hideMenus = function(){
+		
+		for(let k in menus)
+			menus[k].visible = false;
+
+		renderMenus();
+		isMenuOpen = false;
+	}
+
+	let isMenuOpen        = false
+	let currentMenu       = null;
+	let currentControl    = null;
+	let currentVal        = null;
+	let currentType       = null;
+	let currentCount      = null;
+
+	renderMenus();
+
+	window.onData = function(data){
+
+		if(data.showMenu === true){
+			showMenu(data.menu);
+		}
+
+		if(data.showMenu === false){
+			hideMenus();
+		}
+
+		if(data.move && isMenuOpen){
+
+			if(data.move == 'UP'){
+				if(menus[currentMenu].current > 0)
+					menus[currentMenu].current--;
+			}
+
+			if(data.move == 'DOWN'){
+				
+				let max = $('#menu_' + currentMenu + ' .menu-item').length;
+
+				if(menus[currentMenu].current < max - 1)
+					menus[currentMenu].current++;
+			}
+
+			$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+			$('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').addClass('selected');
+
+			currentVal   = menus[currentMenu].items[menus[currentMenu].current].value;
+			currentType  = $('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').data('type');
+			currentCount = $('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').data('count');
+		}
+
+		if(data.enterPressed){
+
+			if(isMenuOpen) {
+
+				$.post('http://esx_jobs/select', JSON.stringify({
+					menu : currentMenu,
+					val  : currentVal,
+					type : currentType,
+					count: currentCount
+				}))
+
+				let elem = $('#menu_' + currentMenu + ' .menu-item.selected')
+
+				if(elem.data('remove-on-select') == true){
+					
+					elem.remove();
+
+					menus[currentMenu].items.splice(menus[currentMenu].current, 1)
+					menus[currentMenu].current = 0;
+
+					$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+					$('#menu_' + currentMenu + ' .menu-item:eq(0)').addClass('selected');
+					
+					currentVal   = menus[currentMenu].items[0].value;
+					currentType  = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('type');
+					currentCount = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('count');
+				}
+
+			} 
+
+		}
+
+		if(data.backspacePressed){
+			if(isMenuOpen && currentMenu == 'cloakroom'){
+				hideMenus();
+			}
+		}
+
+	}
+
+	window.onload = function(e){ window.addEventListener('message', function(event){ onData(event.data) }); }
+
+})()