const templateIcons = {
	alarmConfirm			: `<svg xmlns="http://www.w3.org/2000/svg" style="fill:#F99" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>`,
	alarmConfirmed 		: `<svg xmlns="http://www.w3.org/2000/svg" style="fill:#bd8c1c" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`
}
var AppTemplate = 
{
	/*
	variableNameToPL :
	{
		Status1: 		'Stan',	CurrentP1: 'Prąd',	WorkTimeP1: 'Łączny czas pracy', StopTimeP1: 'Czas zatrzymania', CounterP1: 'Liczba załączeń', WasteP1: 'Ilość cieczy',
		StatusP1P2: 'Stan',	CurrentP2: 'Prąd',	WorkTimeP2: 'Łączny czas pracy', StopTimeP2: 'Czas zatrzymania', CounterP2: 'Liczba załączeń', WasteP2: 'Ilość cieczy'
	},
	*/
	decodeValue : function (regData)
	{
		return regData.value;
	},
/*
-------------------------------------------------------------------------------------------------------------------------
*/	
	SITE_SETTINGS : 
	{
		options_singleModems : function (modemData)
		{
			let modems = `<option value='null'> - - BRAK - - </option>`;
			for (var i = 0; i < modemData.length; i++)
			{
				modems += `<option value='${modemData[i]}'>${modemData[i]}</option>`;
			}
			return modems;
		},
		div_singleDevice_new : function (devData, modemList, onlyContent = false)
		{
			
			let htmlCode = '';
			if (!onlyContent)
				htmlCode += `<div class='dev-detail-2-con single-pump-detail'>`;
			let htmlAdm = '';
			if (modemList instanceof Array)
			{
				modemList = this.options_singleModems(modemList);
			}
			if (modemList.length > 70)
			{
				htmlAdm = `	<div class='' style="width:260px">
				  						<p>DANE TECHNICZNE</p>
				  						<span class='d-desc'>Id PLC</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceId' data-variable_id='${devData.controllerId}'>${devData.controllerId}</span>
				  						<span class='d-desc'>${txtLabel.settings_tabDev2}</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceName' data-variable_id='${devData.controllerId}'>${devData.controllerName}</span>
				  						<span class='d-desc'>Modem</span>
				  						<select class='fn-select-change el-select criticalEdit sel-modems' data-val='${devData.modemName}' data-fnc="dbChangeModemForDevice" data-devid='${devData.controllerId}'>
				  							${modemList}
				  						</select>
				  						<span class='d-desc' style='margin-top: 6px;'>Monitoring</span>
				    					<select class='fn-select-change el-select criticalEdit sel-is-active' data-val='${devData.isActiv}' data-fnc="dbChangeDeviceActive" data-devid='${devData.controllerId}'>
				    						<option value='0'>NIE</option>
				    						<option value='1'>TAK</option>
				    					</select>
				  						<span class='d-desc' style='margin-top: 6px;'>Priorytet</span>
				    					<select class='fn-select-change el-select criticalEdit sel-is-active' data-val='${devData.prior}' data-fnc="dbChangeFlushPriority" data-devid='${devData.controllerId}'>
				    						<option value='1'>1</option>
				    						<option value='2'>2</option>
				    						<option value='3'>3</option>
				    					</select>
				    					<br>
				    					<br>
				    					<br>
											<span class='del-btn make-action' data-ma-fn="S_S_deleteDevice" data-d-id="${devData.controllerId}" data-d-name="${devData.controllerName}">
												<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
												 Usuń
											</span>						
				  					</div>`;
			}
			htmlCode +=`			    		
			    			<div class="dev-detail-2-title">
		    					${devData.controllerName}
		    				</div>
								<div class='dev-detail-2-desc'>
									<div class="single-dev-sett">
										${htmlAdm}
				  					<div class='' style='padding: 10px;'>
				  						<i class='fa fa-pencil-square-o action-showAllDevImg' data-devid='${devData.controllerId}' style='cursor:pointer;color: #bFb; font-size: 18px;'></i></span>
				  						<img class='img-pump-settings' data-devid='${devData.controllerId}' src='${devData.imgPath}' />
				  					</div>			    							
									</div>
								</div>`;
			if (!onlyContent)
				htmlCode += `</div>`;
			return htmlCode;
		},
		div_singleDevice_new_old : function (devData, modemList, onlyContent = false)
		{
			
			let htmlCode = '';
			if (!onlyContent)
				htmlCode += `<div class='dev-detail-2-con single-pump-detail'>`;
			let htmlAdm = '';
			if (modemList instanceof Array)
			{
				modemList = this.options_singleModems(modemList);
			}
			if (modemList.length > 70)
			{
				htmlAdm = `	<div class=''>
				  						<p>DANE TECHNICZNE</p>
				  						<span class='d-desc'>Id PLC</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceId' data-variable_id='${devData.controllerId}'>${devData.controllerId}</span>
				  						<span class='d-desc'>Modem</span>
				  						<select class='fn-select-change el-select criticalEdit sel-modems' data-val='${devData.modemName}' data-fnc="dbChangeModemForDevice" data-devid='${devData.controllerId}'>
				  							${modemList}
				  						</select>
				  						<span class='d-desc' style='margin-top: 6px;'>Monitoring</span>
				    					<select class='fn-select-change el-select criticalEdit sel-is-active' data-val='${devData.isActiv}' data-fnc="dbChangeDeviceActive" data-devid='${devData.controllerId}'>
				    						<option value='0'>NIE</option>
				    						<option value='1'>TAK</option>
				    					</select>
				    					<br>
				    					<br>
				    					<br>
											<span class='del-btn make-action' data-ma-fn="S_S_deleteDevice" data-d-id="${devData.controllerId}" data-d-name="${devData.controllerName}">
												<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
												 Usuń
											</span>						
				  					</div>`;
			}
			htmlCode +=`			    		
			    			<div class="dev-detail-2-title">
		    					${devData.controllerName}
		    				</div>
								<div class='dev-detail-2-desc'>
									<div class="single-dev-sett">
										${htmlAdm}
				  					<div class=''>
				  						<p>DANE OBIEKTU</p>
				  						<span class='d-desc'>Kontakt</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceUserNameSurname' data-variable_id='${devData.controllerId}'>${devData.operatorName}</span>
				  						<span class='d-desc'>Telefon</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceUserPhone' data-variable_id='${devData.controllerId}'>${devData.operatorPhone}</span>
				  						<span class='d-desc'>Adres</span>
				  						<span class='d-val canBeEditable' data-edit_fn='editDeviceUserAddress' data-variable_id='${devData.controllerId}'>${devData.operatorAddress}</span>
				  						<span class='d-desc'>Notatka</span>
				  						<span class='d-val canBeEditable editMultiline' data-edit_fn='editDeviceUserNote' data-variable_id='${devData.controllerId}'>${devData.operatorNotes}</span>
				  					</div>
				  					<div class='' style='padding: 10px;'>
				  						<i class='fa fa-pencil-square-o action-showAllDevImg' data-devid='${devData.controllerId}' style='cursor:pointer;color: #bFb; font-size: 18px;'></i></span>
				  						<img class='img-pump-settings' data-devid='${devData.controllerId}' src='${devData.imgPath}' />
				  					</div>			    							
									</div>
								</div>`;
			if (!onlyContent)
				htmlCode += `</div>`;
			return htmlCode;
		},
		div_singleModem_new : function (modemData, onlyContent = false)
		{
			let htmlCode = '';
			if (!onlyContent)
				htmlCode += `<div class="ps-modem-s">`;
			htmlCode += `
									<span class='d-desc'>ID modemu</span>
									<span class='d-val canBeEditable criticalEdit' data-edit_fn="editSettingsModemName" data-variable_id="${modemData.id}">${modemData.modemName}</span>
	    						<span class='d-desc'>Lokalizacja</span>
	    						<span class='d-val canBeEditable' data-edit_fn="editSettingsModemLocationName" data-variable_id="${modemData.id}">${modemData.locationName}</span>
									<span class='d-desc'>AKTYWNY</span>
									<select class='fn-select-change el-select criticalEdit' data-val='${modemData.isActive}' data-fnc="dbChangeModemActive" data-devid='${modemData.id}' style='' value='${modemData.isActive}'>
										<option value='0'>NIE</option>
										<option value='1'>TAK</option>
									</select>		
									<span class='del-btn make-action' data-ma-fn="S_S_deleteModem" data-m-id="${modemData.id}" data-m-name="${modemData.modemName}">
										<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
										 Usuń
									</span>						
							`;
			if (!onlyContent)
				htmlCode += `</div>`;
			return htmlCode;
		},
		div_customerInfo : function (cInfo)
		{	
			return `
							<span class='d-desc'>NAZWA FIRMY</span><span class='d-val'>${cInfo.companyName}</span>
							<span class='d-desc'>NUMER NIP</span><span class='d-val'>${cInfo.nip}</span>
							<span class='d-desc'>E-MAIL</span><span class='d-val'>${cInfo.email}</span>
							<span class='d-desc'>Osoba</span><span class='d-val'>${cInfo.nameSurname}</span>
							<span class='d-desc'>NR TELEFONU</span><span class='d-val'>${cInfo.phone}</span>
							<span class='d-desc'>ADRES KORESPONDENCYJNY</span><span class='d-val'>${cInfo.compCoresp}</span>
						`;
		},
/*
-------------------------------------------------------------------------------------------------------------------------
*/	
		SUB_USERS : 
		{
			rowOperator: function(userData)
			{
				
			},
			rowEndUser : function (userData)
			{
				
			},
			rowUser : function (userData, btnIndx)
			{
				var tplAdd = 
				{
					usrIcon : `<i class="fa fa-user"></i>`,
					sUsrIcon : `<i class="fa fa-user-o"></i>`,
					devIcon : `<i class="fa fa-laptop"></i>`,
					faxIcon : `<i class="fa fa-fax"></i>`,
					plusIcon : `<i class="fa fa-plus"></i>`,
					icon : `<i class="fa fa-user"></i>`,
					addClass : "",
					subUsersCountInfo : "",
					devicesCounterInfo : userData.devices.length,
					modemCounterInfo :  "",
					toggleIcon : (userData.status=="1")?"fa-toggle-on":"fa-toggle-off",
					allowAddSubuser : (userData.perm!="EU")?`<i class="fa fa-user-plus fa-big" aria-hidden="true" onclick="SUB_USERS.addEndUser('${userData.email}', '${userData.id}')"></i>`:'',
					removeUser : (userData.perm=="EU" || userData.subusers.length==0)?`<i class="fa fa-close delete-button" aria-hidden="true" onclick="SUB_USERS.deleteUser('${userData.mail}', '${userData.id}')"></i>`:''
				}
				if (userData.perm=="EU")
				{
					tplAdd.icon = tplAdd.sUsrIcon;
					tplAdd.addClass = "su";
				}
				else
				{
					tplAdd.modemCounterInfo = tplAdd.faxIcon + " " + userData.modems.length + "";
					tplAdd.subUsersCountInfo = tplAdd.sUsrIcon + " " + userData.subusers.length + "";
				}
				var htmlUserDevices = this.userDevices(userData, btnIndx);				
				var htmlUserModems = ``;				
				if (userData.perm != "EU")
				{
					if (userData.modems.length > 0)
					{
						var htmlUserModemsList = ``;
						for (var i = 0; i < userData.modems.length; i++)
						{
							htmlUserModemsList += `
																<div class="dev-detail-con">
																  <div class="flex-container su-dev-list-cont">
																    <div class="su-dev-list">
																    	${tplAdd.faxIcon}
																    </div>
																    <div class="su-dev-list">
																    </div>
																    <div class="su-dev-list flex-grow">
															    		${userData.modems[i].name}
																    </div>
																    <div style="text-align:right" class="flex-grow su-dev-list">																    
																    	<i class="fa fa-close delete-button make-action" data-ma-fn="S_U_removeModemFromUser" data-ma-modem-id="${userData.modems[i].id}" data-ma-modem-name="${userData.modems[i].name}" data-ma-user-id="${userData.id}" data-ma-user-name="${userData.mail}"></i>
																		</div>
																  </div>
																</div>
																`;
						}
					}
					else
					{
						htmlUserModemsList = `<div class="dev-detail-con"><div class="flex-container su-dev-list-cont">Brak dodanych modemów</div></div>`;
					}
					htmlUserModems = 
						`<div>
							<div class="user-modems-devices-list make-action" data-ma-fn="S_S_ToggleParam">
					  		Modemy ${tplAdd.faxIcon}
					  		<div class="toggle-icon" style="flex-grow: 1;text-align:right">
						    	<i class="fa fa-chevron-down" aria-hidden="true"></i>
								</div>
							</div>
				  		<div class="dev-detail-desc param toggle-slide">
				  			<div style="text-align:center;color: #399E97;padding-bottom: 10px;margin: 0 auto;width: 60px;" class="make-action" data-ma-fn="S_U_AddModem" data-ma-user-id="${userData.id}" data-ma-user-name="${userData.mail}">
					  			<i class="fa fa-fax fa-big" aria-hidden="true"></i>
					  			<i class="fa fa-plus" aria-hidden="true"></i>
				  			</div>
				  			${htmlUserModemsList}				  			
				  		</div>
				  	</div>`;
				}
				var htmlRes = `
				<div class="dev-detail-con ${tplAdd.addClass}">
				  <div class="btn-elp flex-container make-action" style="margin:4px 0;" data-ma-fn="S_S_ToggleParam">
				    <div class="su-name txt-left flex-grow">${tplAdd.icon} ${userData.mail}</div>
				    <div style = "" class="su-settings">
				    	<div class="detail-div">
				    		<i class="fa ${tplAdd.toggleIcon} fa-big" aria-hidden="true" onclick="javascript:event.stopPropagation();SUB_USERS.changeAccess('${userData.id}',${userData.status})"></i>
				    	</div>
				    	<div class="detail-div">
				    		${tplAdd.subUsersCountInfo}
				    	</div>
				    	<div class="detail-div">
				    		${tplAdd.modemCounterInfo}
				    	</div>
				    	<div class="detail-div">
				    		${tplAdd.devIcon + " " + tplAdd.devicesCounterInfo + ""}
				    	</div>				    	
				    </div>
				    <div class="toggle-icon">
				    	<i class="fa fa-chevron-down" aria-hidden="true" style="float:right222;margin: 3px 20px;"></i>
						</div>
				  </div>
				  <div class="dev-detail-desc param toggle-slide" style="padding: 0;">
				  	${htmlUserModems}				  	
				  	<div>
				  		<div class="user-modems-devices-list make-action" data-ma-fn="S_S_ToggleParam">
					  		Urządzenia <i class="fa fa-laptop" aria-hidden="true"></i>
					  		<div class="toggle-icon" style="flex-grow: 1;text-align:right">
						    	<i class="fa fa-chevron-down" aria-hidden="true"></i>
								</div>
							</div>
				  		<div class="dev-detail-desc param toggle-slide" style="padding: 0px;">
				  			<div class="flex-container" style="padding: 6px;text-align: right">
						  		<div class="su-dev-list" style="flex-grow:1">
						  			${tplAdd.allowAddSubuser}
			    				</div>
						  		<div class="su-dev-list" style="flex-grow:1">
						  			<span style="cursor:pointer" onclick="SUB_USERS.addUserDevice('${userData.mail}', '${userData.id}', ${btnIndx})">
						  				<i class="fa fa-laptop fa-big"></i>
						  				<i class="fa fa-plus" style="margin-left:-6px"></i>
			    					</span>
			    				</div>
			    				<div class="su-dev-list" style="flex-grow:1">
			    					${tplAdd.removeUser}${userData.mail}
			    				</div>
			    			</div>
						  	${htmlUserDevices}		    				
							  <div style="clear:both"></div>
				  		</div>
				  	</div>
				  	
				  	
				  	
	 				</div>
				</div>`;
				return htmlRes;
			},
			userDevices : function (userData,btnIndx)
			{
				var htmlRes = "";
				for (var i = 0; i < userData.devices.length; i++)
					htmlRes += `
					<div class="dev-detail-con">
					  <div class="flex-container su-dev-list-cont">
					    <div class="su-dev-list">
					    	<i class="fa fa-laptop"></i>
					    </div>
					    <div class="su-dev-list">
					    	${userData.devices[i].controllerId}
					    </div>
					    <div class="su-dev-list flex-grow">
				    		${userData.devices[i].controllerName}<br>
				    		${userData.devices[i].locationName}
					    </div>
					    <div style="text-align:right" class="flex-grow su-dev-list">
					    	<i class="fa fa-close delete-button" aria-hidden="true" onclick="SUB_USERS.removeDeviceFromUser('${userData.id}', '${userData.devices[i].controllerId}', '${userData.mail}', ${btnIndx})"></i>
							</div>
					  </div>
					</div>`;
				return htmlRes;
			},
			footer : function (usr)
			{
				if (usr.perm == "AD")
					return `<br><i class="fa fa-user-plus fa-big" aria-hidden="true" onclick="SUB_USERS.addOperator()"></i>`;
				if (usr.perm == "OP")
					return `<br><i class="fa fa-user-plus fa-big" aria-hidden="true" onclick="SUB_USERS.addEndUser('${usr.email}', '${usr.id}')"></i>`;
				if (usr.perm == "EU")
					return '';
			}
		}			
	},
/*
-------------------------------------------------------------------------------------------------------------------------
*/	
	SITE_PUMPING_STATIONS : {
		modemsSelectList: function(modems)
		{
			let ret = "",counter = 0;
			let dChart = "";
			for (key in modems) {
				if (!modems[key].hideByFilter) {
					let loopChart = `<svg width="125px" height="25px" style="display:block">`;
					if (modems[key].serverData.onlineStatus)
					{
						let modCLT = modems[key].serverData.connectionLoopTime;
						if (modCLT.length)
						{
							const minLT = modCLT.reduce((min, p) => p.time < min ? p.time : min, modCLT[0].time);
							//let av = 0;
							modCLT.map(e=>{e.time-minLT+5});
							//modCLT.map(e=>{av+=e.time});
							//av = av/modCLT.length;
							const maxLT = modCLT.reduce((max, p) => p.time > max ? p.time : max, modCLT[0].time);
							
							let x=0;
							modCLT.forEach(e => {
								//loopChart += `<rect x="${x}" width="5" height="${25/maxLT*e.time}" class="${e.time>av?'rect-ov-av':''}"><title>${e.endTime}  (${e.time}s)</title></rect>`;
								loopChart += `<rect x="${x}" width="5" height="${25/maxLT*e.time}"><title>${e.endTime}  (${e.time}s)</title></rect>`;
							  x+=5;
							})
							loopChart+=`</svg>`;
						}
						
					}
					counter += modems[key].devices.length;
					ret += `<div class="ps-modem ${modems[key].selected?'selected':''}" data-modem-name='${key}'>
										<p>${key}</p>
										<span>${modems[key].serverData.onlineStatus?'<div class="txt-center c-success">ON-LINE</div>':'<div class="txt-center c-critical">OFF-LINE</div>'}</span>
										<span>Urządzeń: ${modems[key].devices.length}</span>
										<div class="modem-loop-chart">
												${loopChart}
										</div>
									</div>`;
				}
			}
			return ret;
		},
		
		deviceListSingleDev : function(device)
		{
			let htmlRes = '';
			let ledBgColor = "#000";
			if (typeof device.serverData=="undefined")
				device.serverData = {onlineStatus : false};
	  	if (!device.serverData.onlineStatus)
		  {
		  	ledBgColor = "#000";					
			}
			else
			{
				if (device.serverData.alarmsReadTime == null)
				{
					ledBgColor = "#888";
				}
				else
				{
					if (device.serverData.alarms.length)
					{
						ledBgColor = "#F88";
					}
					else
					{
						if (typeof(device.serverData.regs[47]) != "undefined" && device.serverData.regs[47].rawVal == 1)
						{
							ledBgColor = "#FF8";
						}
						else
						{
							let isReady = false;
							for (let i = 43; i <=46; i++)
							{
								if (typeof(device.serverData.regs[i]) != "undefined" && device.serverData.regs[i].rawVal == 16)
									isReady = true;
							}
							if (isReady)
							{
								ledBgColor = "#8FF";
							}
							else
							{
								if (typeof(device.serverData.regs[47]) != "undefined" && (device.serverData.regs[47].rawVal == 64 || device.serverData.regs[47].rawVal == 32))
								{
									ledBgColor = "linear-gradient(180deg, #7F7 50%, #55F 50%)";
								}
								else
								{ 
									ledBgColor = "#8F8";
								}
							}
						}
					}
				}
			}
				
				
				
				
				
				
			htmlRes += `<div class="ps-device-status" style="background:${ledBgColor}"></div>`;			
			if (device.serverData.onlineStatus)
			{
				const pumpCount = device.serverData.pumpCount;
					
		    if (isNaN(device.serverData.transmitQ))
		      device.serverData.transmitQ = 0;
				htmlRes += `<div class="txt-center c-success">ON-LINE <span style="font-size:10px;padding-left:20px;color:#fff">${device.serverData.lastActivityTime}</span></div>`;	
				htmlRes += `<div class="txt-center c-success d-stat">TX: ${device.serverData.transmitQality.tx} | txFAIL: ${device.serverData.transmitQality.retr} | QTY: ${device.serverData.transmitQ.toFixed(2)} </div>`;	
				let alarms = "";
				device.serverData.alarms.forEach(a=>{
					alarms += `<div class="single-detail">
												<div>${a.time}</div>
												<div>${a.name}</div>
											</div>`
				});
				htmlRes += `<div class="alarms-detail-container ${device.selViewAlarms?'show-alarms':''}">
											<div class="alarms-info">${alarms}</div>
											<div class="detail-info">`;	
				let sensorsType = null;
				for (key in device.serverData.regs)
				{
					const r = device.serverData.regs[key];
					if (typeof(r.value) == "undefined" || r.value == null)
						r.value = "- - -";
					const rrt = r.regReadTime==null?'Brak odczytu':r.regReadTime;
					if (r.xid == "work_mode")
					{
						htmlRes += `<div class="single-detail">
													<div>${r.name}</div>
													<div>${r.value}</div>
												</div>`;
					}
					if (r.xid == "pump_mode")
					{
						htmlRes += `<div class="single-detail">
													<div>${r.name}</div>
													<div>${r.value}</div>
												</div>`;
					}
					
					if (r.xid == "sensor_type")
					{
						htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${r.name}</div>
													<div>${r.value}</div>
												</div>`;
						sensorsType = r.value;
					}
					
					if (r.xid == "sensor_level_digit" )
					{
						if (sensorsType == "SA")	//zmienna 49 = 4 :"SA"
						{
							let valLevel = "<div class='sensor-level'>";
							if (r.value & 1)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
								
							if (r.value & 8)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
								
							valLevel += "</div>";
							htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
														<div>${r.name}</div>
														<div>${valLevel}</div>
													</div>`;
						}
						else if (sensorsType == "3xP" || sensorsType == "HSI") //zmienna 49= 1:"3xP" || "8":"HSI
						{
							let valLevel = "<div class='sensor-level'>";
							if (r.value & 1)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							if (r.value & 2)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							if (r.value & 8)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							valLevel += "</div>"; 
							htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
														<div>${r.name}</div>
														<div>${valLevel}</div>
													</div>
													<div class="single-detail" style="height:25px">
													</div>`;
						}
						else if (sensorsType == "4xP") //zmienna 49= 2:"4xP",,
						{
							let valLevel = "<div class='sensor-level'>";
							if (r.value & 1)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							if (r.value & 2)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							if (r.value & 4)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							if (r.value & 8)
								valLevel += `<div class='sensor-on'></div>`;
							else
								valLevel += `<div></div>`;
							valLevel += "</div>"; 
							htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
														<div>${r.name}</div>
														<div>${valLevel}</div>
													</div>
													<div class="single-detail" style="height:25px">
													</div>`;
						}						
					}
					if (r.xid == "sensor_level_analog" && sensorsType == "SA")
					{
						htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${r.name}</div>
													<div>${r.value} [${r.suffix}]</div>
												</div>`;
						let levelVal = {
							vOff: device.serverData.regs[546].value,
							vOn1p: device.serverData.regs[547].value,
							vOn2p: device.serverData.regs[548].value,
							vAlarm: device.serverData.regs[549].value,
							vMax: device.serverData.regs[550].value,
							floatOff: parseFloat(device.serverData.regs[546].value),
							floatOn1p: parseFloat(device.serverData.regs[547].value),
							floatOn2p: parseFloat(device.serverData.regs[548].value),
							floatAlarm: parseFloat(device.serverData.regs[549].value),
							floatMax: parseFloat(device.serverData.regs[550].value)
						}
						//let barH = (($(".sa-sensor-level").height() * r.value) / levelVal.floatMax)-2;
						if (device.serverData.regs[27].rawVal == 3 || device.serverData.regs[27].rawVal == 7 || device.serverData.regs[27].rawVal == 15)
						{
							htmlRes += `
												<div class="" style="padding-bottom:15px;display: flex;justify-content: center;">
							    				<div class="sa-sensor-level ">
										        <div class="sa-max ${r.value>=levelVal.floatMax?'full':''}"><div><span>${levelVal.vMax}</span></div><p>MAX</p></div>
										        <div class="sa-alarm ${r.value>=levelVal.floatAlarm?'full':''}"><div><span>${levelVal.vAlarm}</span></div><p>Alarm</p></div>
										        <div class="sa-on2p ${r.value>=levelVal.floatOn2p?'full':''}"><div><span>${levelVal.vOn2p}</span></div><p>ON2P</p></div>
										        <div class="sa-on1p ${r.value>=levelVal.floatOn1p?'full':''}"><div><span>${levelVal.vOn1p}</span></div><p>ON1P</p></div>
										        <div class="sa-off ${r.value>=levelVal.floatOff?'full':''}"><div><span>${levelVal.vOff}</span></div><p>OFF</p></div>
										        <div class="sa-null"><div></div><p></p></div>
							    				</div>
												</div>`;
						}
						else{
							htmlRes += `
												<div class="" style="padding-bottom:15px;display: flex;justify-content: center;">
							    				<div class="sa-sensor-level ">
										        <div class="sa-max ${r.value>=levelVal.floatMax?'full':''}"><div><span>${levelVal.vMax}</span></div><p>MAX</p></div>
										        <div class="sa-alarm ${r.value>=levelVal.floatAlarm?'full':''}"><div><span>${levelVal.vAlarm}</span></div><p>Alarm</p></div>
										        <div class="sa-on1p ${r.value>=levelVal.floatOn1p?'full':''}"><div><span>${levelVal.vOn1p}</span></div><p>ON1P</p></div>
										        <div class="sa-off ${r.value>=levelVal.floatOff?'full':''}"><div><span>${levelVal.vOff}</span></div><p>OFF</p></div>
										        <div class="sa-null"><div></div><p></p></div>
							    				</div>
												</div>`;							
						}						
						/*htmlRes += `
												<div class="" style="padding-bottom:15px;display: flex;justify-content: center;">
							    				<div class="sa-sensor-level ">
							    					<span class="sa-bar" style="height: ${barH}px"></span>
										        <div class="sa-max ${r.value>=levelVal.floatMax?'full':''}"><div><span>${levelVal.vMax}</span></div><p>MAX</p></div>
										        <div class="sa-alarm ${r.value>=levelVal.floatAlarm?'full':''}"><div><span>${levelVal.vAlarm}</span></div><p>Alarm</p></div>
										        <div class="sa-on2p ${r.value>=levelVal.floatOn2p?'full':''}"><div><span>${levelVal.vOn2p}</span></div><p>ON2P</p></div>
										        <div class="sa-on1p ${r.value>=levelVal.floatOn1p?'full':''}"><div><span>${levelVal.vOn1p}</span></div><p>ON1P</p></div>
										        <div class="sa-off ${r.value>=levelVal.floatOff?'full':''}"><div><span>${levelVal.vOff}</span></div><p>OFF</p></div>
										        <div class="sa-null"><div></div><p></p></div>
							    				</div>
												</div>`;*/
												
					}
				}				
				htmlRes += `<div class="single-detail" style="justify-content:center;font-size:16px;">Dane pompy `;
				for (i = 0; i < pumpCount; i++)
				{
					if (i == device.selPump2ShowDetail)
						htmlRes += `<span class="ps-sel-pump-display-data active">${i + 1}</span>`;
					else
						htmlRes += `<span class="ps-sel-pump-display-data">${i + 1}</span>`;
				}
				htmlRes += `</div>`;
				
				htmlRes += `<div class="ps-sel-pump-detail">`;
				htmlRes += this.pumpDetail(device);
				htmlRes += `</div>
										</div>`;
			}
			else
			{
				htmlRes += `<div class="txt-center c-critical">OFF-LINE</div>`;
			}			
			htmlRes += `</div>`;
			return 	htmlRes;
		},
		
		devicesList : function (device)
		{
			let htmlRes = '';			
			htmlRes += `<div class="ps-device did_${device.id}" data-device-id='${device.id}' data-modemTab-id='${device.modem}' style='order:${device.order}'>`;			
			htmlRes += `<div class="ps-device-title ${device.serverData.onlineStatus&&device.serverData.alarms.length?'bg-critical':''}">${device.name}</div>`;			
			if (device.serverData.onlineStatus)
			{
				const pumpCount = device.serverData.pumpCount;//parseInt(device.serverData.regs['48'].value.substr(0, 1));//rejestr z trybem pomp - PumpModeAct
					
		    if (isNaN(device.serverData.transmitQ))
		      device.serverData.transmitQ = 0;
				htmlRes += `<div class="txt-center c-success">ON-LINE <span style="font-size:10px;padding-left:20px;color:#fff">${device.serverData.lastActivityTime}</span></div>`;	
				htmlRes += `<div class="txt-center c-success">TX: ${device.serverData.transmitQality.tx} | txFAIL: ${device.serverData.transmitQality.retr} | QTY: ${device.serverData.transmitQ.toFixed(2)} </div>`;	
				let alarms = "";
				device.serverData.alarms.forEach(a=>{
					alarms += `<div class="single-detail">
												<div>${a.time}</div>
												<div>${a.name}</div>
											</div>`
				});
				htmlRes += `<div class="alarms-detail-container ${device.selViewAlarms?'show-alarms':''}">
											<div class="alarms-info">${alarms}</div>
											<div class="detail-info">`;	
				for (key in device.serverData.regs)
				{
					const r = device.serverData.regs[key];
					if (typeof(r.value) == "undefined" || r.value == null)
						r.value = "- - -";
					if (r.xid == "work_mode")
					{
						htmlRes += `<div class="single-detail">
													<div>${r.name}</div>
													<div>${r.value}</div>
												</div>`;
					}
					if (r.xid == "pump_mode")
					{
						htmlRes += `<div class="single-detail">
													<div>${r.name}</div>
													<div>${r.value}</div>
												</div>`;
					}
					let sensorsType = null;
					if (r.xid == "sensor_type")
					{
						htmlRes += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${reg.name}</div>
													<div>${reg.value}</div>
												</div>`;
						sensorsType = r.value;
					}
				}				
			
				htmlRes += `<div class="single-detail" style="justify-content:center;font-size:16px;">Dane pompy `;
				for (i = 0; i < pumpCount; i++)
				{
					if (i == device.selPump2ShowDetail)
						htmlRes += `<span class="ps-sel-pump-display-data active">${i + 1}</span>`;
					else
						htmlRes += `<span class="ps-sel-pump-display-data">${i + 1}</span>`;
				}
				htmlRes += `</div>`;
				
				htmlRes += `<div class="ps-sel-pump-detail">`;
				htmlRes += this.pumpDetail(device);
				htmlRes += `</div>
										</div>
										</div>`;
			}
			else
			{
				htmlRes += `<div class="txt-center c-critical">OFF-LINE</div>`;
			}			
			htmlRes += `</div>`;
			return 	htmlRes;
		},
		pumpDetail : function(device)
		{
			const pumpReg = [
							[417, 43,  85,  86,	 87,  88,  89],
							[449, 44,  92,  93,	 94,  95,  96],
							[481, 45,  99, 100,	101, 102, 103],
							[513, 46, 106, 107,	108, 109, 110]
						]
			const pDetail = pumpReg[device.selPump2ShowDetail];
			let htmlRes = ``;
			pDetail.forEach(e=>{
						const r = device.serverData.regs[e];
						let sfx = '';
						if (typeof(r.value) == "undefined" || r.value === null)
							r.value = "- - -";
						if (r.suffix)
							sfx = ` [${r.suffix}]`;
						let addInfo = '';
						if (e == 85 || e == 92 || e == 99 || e == 106)
						{
							addInfo = ` / ${device.serverData.regs[e - 1].value}`;
						}
						htmlRes += `<div class="single-detail">
													<div>${r.name}</div>
													<div>${r.value}${addInfo}${sfx}</div>
												</div>`;
					})
			return htmlRes;
		}
	},	
/*
-------------------------------------------------------------------------------------------------------------------------
*/	
	SITE_MAP : {
		pumpStationInfo : function(data)
		{	
			let sDetail = `<div style="text-align:center">Ostatnia komunikacja:<br><b>${data.lastActivityTime==null?"Brak danych":data.lastActivityTime}</b></div>`;
			let sensorsType = null;

			for (key in data.regs)
			{
				const reg = data.regs[key];
				if (typeof(reg.value) == "undefined" || reg.value == null)
					reg.value = "- - -";
				const rrt = reg.regReadTime==null?'Brak odczytu':reg.regReadTime;
				if (reg.xid == "work_mode")
				{
					sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
												<div>${reg.name}</div>
												<div>${reg.value}</div>
											</div>`;
				}
				if (reg.xid == "pump_mode")
				{
					sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
												<div>${reg.name}</div>
												<div>${reg.value}</div>
											</div>`;
				}
				if (reg.xid == "sensor_type")
				{
					sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
												<div>${reg.name}</div>
												<div>${reg.value}</div>
											</div>`;
					sensorsType = reg.value;
				}
				
				if (reg.xid == "sensor_level_digit" )
				{
					if (sensorsType == "SA")	//zmienna 49 = 4 :"SA"
					{
						let valLevel = "<div class='sensor-level'>";
						if (reg.value & 1)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
							
						if (reg.value & 8)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
							
						valLevel += "</div>";
						sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${reg.name}</div>
													<div>${valLevel}</div>
												</div>`;
					}
					else if (sensorsType == "3xP" || sensorsType == "HSI") //zmienna 49= 1:"3xP" || "8":"HSI
					{
						let valLevel = "<div class='sensor-level'>";
						if (reg.value & 1)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						if (reg.value & 2)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						if (reg.value & 8)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						valLevel += "</div>"; 
						sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${reg.name}</div>
													<div>${valLevel}</div>
												</div>
												<div class="single-detail" style="height:25px">
												</div>`;
					}
					else if (sensorsType == "4xP") //zmienna 49= 2:"4xP",,
					{
						let valLevel = "<div class='sensor-level'>";
						if (reg.value & 1)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						if (reg.value & 2)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						if (reg.value & 4)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						if (reg.value & 8)
							valLevel += `<div class='sensor-on'></div>`;
						else
							valLevel += `<div></div>`;
						valLevel += "</div>"; 
						sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
													<div>${reg.name}</div>
													<div>${valLevel}</div>
												</div>
												<div class="single-detail" style="height:25px">
												</div>`;
					}						
				}				
				if (reg.xid == "sensor_level_analog" && sensorsType == "SA")
				{
					sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${rrt}">
												<div>${reg.name}</div>
												<div>${reg.value} [${reg.suffix}]</div>
											</div>`;
					let levelVal = {
							vOff: data.regs[546].value,
							vOn1p: data.regs[547].value,
							vOn2p: data.regs[548].value,
							vAlarm: data.regs[549].value,
							vMax: data.regs[550].value,
							floatOff: parseFloat(data.regs[546].value),
							floatOn1p: parseFloat(data.regs[547].value),
							floatOn2p: parseFloat(data.regs[548].value),
							floatAlarm: parseFloat(data.regs[549].value),
							floatMax: parseFloat(data.regs[550].value)
					}
					if (data.regs[27].rawVal == 3 || data.regs[27].rawVal == 7 || data.regs[27].rawVal == 15)
					{
						sDetail += `
											<div class="" style="padding-bottom:15px;display: flex;justify-content: center;">
						    				<div class="sa-sensor-level ">
									        <div class="sa-max ${reg.value>=levelVal.floatMax?'full':''}"><div><span>${levelVal.vMax}</span></div><p>MAX</p></div>
									        <div class="sa-alarm ${reg.value>=levelVal.floatAlarm?'full':''}"><div><span>${levelVal.vAlarm}</span></div><p>Alarm</p></div>
									        <div class="sa-on2p ${reg.value>=levelVal.floatOn2p?'full':''}"><div><span>${levelVal.vOn2p}</span></div><p>ON2P</p></div>
									        <div class="sa-on1p ${reg.value>=levelVal.floatOn1p?'full':''}"><div><span>${levelVal.vOn1p}</span></div><p>ON1P</p></div>
									        <div class="sa-off ${reg.value>=levelVal.floatOff?'full':''}"><div><span>${levelVal.vOff}</span></div><p>OFF</p></div>
									        <div class="sa-null"><div></div><p></p></div>
						    				</div>
											</div>`;
					}
					else{
						sDetail += `
											<div class="" style="padding-bottom:15px;display: flex;justify-content: center;">
						    				<div class="sa-sensor-level ">
									        <div class="sa-max ${r.value>=levelVal.floatMax?'full':''}"><div><span>${levelVal.vMax}</span></div><p>MAX</p></div>
									        <div class="sa-alarm ${r.value>=levelVal.floatAlarm?'full':''}"><div><span>${levelVal.vAlarm}</span></div><p>Alarm</p></div>
									        <div class="sa-on1p ${r.value>=levelVal.floatOn1p?'full':''}"><div><span>${levelVal.vOn1p}</span></div><p>ON1P</p></div>
									        <div class="sa-off ${r.value>=levelVal.floatOff?'full':''}"><div><span>${levelVal.vOff}</span></div><p>OFF</p></div>
									        <div class="sa-null"><div></div><p></p></div>
						    				</div>
											</div>`;							
					}		
				}
			}
			return sDetail;
		},
		panelPumpsDetail : function(data, pumpCount)
		{
			/*const pumpReg = [
							[416, 417,    43,    85,   86,	87, 88,   89,  90],
							[448, 449,    44,    92,   93,	94, 95,   96,  97],
							[480, 481,    45,    99,  100,	101, 102, 103, 104],
							[512, 513,    46,    106, 107,	108, 109, 110, 111]
						]*/
			const pumpReg = [
							[417, 43,  85,  86,	 87,  88,  89],
							[449, 44,  92,  93,	 94,  95,  96],
							[481, 45,  99, 100,	101, 102, 103],
							[513, 46, 106, 107,	108, 109, 110]
						]
			let sDetail = `<div>`;
			if (pumpCount)
			{				
				for (i = 0; i < pumpCount; i++)
				{
					sDetail += `<div class="single-detail" style="justify-content:center;font-size:16px;">Dane pompy ${i + 1}</div>`;
					pumpReg[i].forEach(e=>{						
						let sfx = '', addInfo = '';
						if (!data[e]){
							data[e] = {value: "- - -", name: "- - -", regReadTime: null}
						}
						else{
							if (typeof(data[e].value) == "undefined" || data[e].value === null)
								data[e].value = "- - -";
							if (data[e].suffix)
								sfx = ` [${data[e].suffix}]`;
							if (e == 85 || e == 92 || e == 99 || e == 106)
							{
								if (data[e - 1])
									addInfo = ` / ${data[e - 1].value}`;
							}
						}
						sDetail += `<div class="single-detail" title = "Ostatni odczyt: ${data[e].regReadTime==null?'Brak odczytu':data[e].regReadTime}">
													<div>${data[e].name}</div>
													<div>${data[e].value}${addInfo}${sfx}</div>
												</div>`;
					})
				}
			}
			else
			{
				sDetail += `<div class="single-detail">BRAK DANYCH DO WYŚWIETLENIA</div>`;
			}
			sDetail += `</div>`;
			return sDetail;
		},
		panelCurrentAlarms :function (data = [], lastReadTime = null)
		{
			let sDetail = `<div><div class="single-detail" style="justify-content:center;font-size:16px;">Lista alarmów ${lastReadTime!=null?'('+lastReadTime+')':''}</div>`;
			if (data.length == 0)
			{
				if (lastReadTime == null)
					sDetail += `<div class="single-detail">NIE ODCZYTANO LIST ALARMÓW</div>`;			
				else
					sDetail += `<div class="single-detail">BRAK ALARMÓW</div>`;
			}			
			for (var i = 0; i < data.length; i++)
			{
				var lrv = data[i];
				let ico = ``;
				if (lrv.isActive && !lrv.isConfirmed)
				{
					ico = `<p style="margin: 0 0 0 10px;" class='make-action' data-ma-fn="S_M_confirmAlarm" data-a-id="${lrv.suid}">
									${templateIcons.alarmConfirm}
								</p>`;
				}
				if (lrv.isActive && lrv.isConfirmed)
				{
					ico = `<p style="margin: 0 0 0 10px;">
									${templateIcons.alarmConfirmed}
								</p>`;
				}
				sDetail += `<div class="single-detail" style="color:#f9f">
											<div>${data[i].time}</div>
											<div style="display: flex;align-items: center;justify-content: flex-end;">
												${data[i].name}${ico}
											</div>
										</div>`;
			}
			sDetail += `</div>`;			
			return sDetail;
		},
		panelCurrentAlarms_hitorySection :function (data = [], lastReadTime = null)
		{
			let sDetail = `<div><div class="single-detail" style="justify-content:center;font-size:16px;">ALARMY HISTORYCZNE</div></div>`;
			if (data.length == 0)
			{
				sDetail += `<div class="single-detail">BRAK ALARMÓW HISTORYCZNYCH</div>`;			
			}			
			for (var i = 0; i < data.length; i++)
			{
				sDetail += `<div class="single-detail">
											<div>${data[i].time}</div>
											<div style="display: flex;align-items: center;justify-content: flex-end;">
												${data[i].name}
											</div>
										</div>`;
			}
			sDetail += `</div>`;
			return sDetail;
		},
		panelCurrentAlarmsAllDevices : function(data)
		{
			let alarms = [];
			for (key in data)
			{
				const al = data[key].serverData.alarms;
				if (data[key].serverData.onlineStatus && al && al.length > 0)
				{
					for (let i = 0; i < al.length; i++)
					{
						alarms.push({devId:key,devName:data[key].name, alTime:al[i].time, alName: al[i].name});
					}
					
				}
			}
			let sDetail = `<div><div class="single-detail" style="justify-content:center;font-size:16px;">Zbiorcza lista alarmów</div>`;
			if (alarms.length > 0)
			{
				alarms.sort(function (a, b){const x = a.devName.toLowerCase(); const y = b.devName.toLowerCase();return x < y ? -1 : x > y ? 1 : 0});
			
			
				sDetail += `<div><table class='panel-map-table alarm-list-all-device'>`;
				for (var i = 0; i < alarms.length; i++)
				{
					sDetail += `<tr data-dev-id='${alarms[i].devId}'><td>${alarms[i].alTime}</td><td>${alarms[i].devName}</td><td>${alarms[i].alName}</td></tr>`;
				}
				sDetail += `</table></div>`;
			}
			else
			{
				sDetail += `<div class="single-detail">BRAK ALARMÓW</div>`;
			}
			sDetail += `</div>`;	
			/*
			if (data.alarms.length == 0)
				sDetail += `<div class="single-detail">BRAK ALARMÓW</div>`;
			for (var i = 0; i < data.alarms.length; i++)
			{
				var lrv = data.alarms[i];
			}
			*/
			return sDetail;
		},
		panelSelectedInfo : function(data)
		{
			var sDetail = `<div><table class='panel-map-table'>`;
			if (data.length == 0)
			{
				sDetail += `<div class="single-detail">BRAK ZAZNACZONYCH URZĄDZEŃ</div></table></div>`;
			}
			else
			{
				for (var i = 0; i < data.length; i++)
				{
					var lrv = data[i];
					var dName = lrv.name;
					if (dName == "- - - -")
						dName = lrv.id;
					sDetail += `<tr><td>${dName}</td><td></td></tr>`;
				}
				sDetail += `</table></div>`;
				sDetail += `<div style="padding:10px;">
											<button class="btn-elp btn-panel-action" data-ma-fn="force-start-pump" style="width:100%;margin-bottom:10px">Uruchom wybrane pompownie</button>
											<button class="btn-elp btn-panel-action" data-ma-fn="force-stop-pump" style="width:100%;margin-bottom:10px">Zatrzymaj wybrane pompownie</button>
											<button class="btn-elp btn-panel-action" data-ma-fn="force-auto-pump" style="width:100%;margin-bottom:10px">Przełącz "auto" wybrane pompownie</button>
										</div>`;
			}
			return sDetail;
		},
		panelGroupSelectedInfo : function (data)
		{
			var sDetail = `<div><table class='panel-map-table_'>`;
			if (data.length == 0)
			{
				sDetail += `<div class="single-detail">BRAK ZAZNACZONYCH URZĄDZEŃ</div></table></div>`;
			}
			else
			{
				sDetail += `<tr><td>
											ZDALNE STEROWANIE 
										</td>
										<td>
											<button class="btn-elp btn-panel-group" style="width:68px" data-ma-fn="group-control-remote-control-1">TAK</button>
										</td>
										<td>
											<button class="btn-elp btn-panel-group" style="width:68px" data-ma-fn="group-control-remote-control-0">NIE</button>
										</td></tr>
										<tr><td>
											POZWÓL NA PRACĘ  
										</td>
										<td colspan=2>
											<button class="btn-elp btn-panel-group" data-ma-fn="group-control-remote-control-start">TAK</button>
										</td></tr>
										</table>
										<p style="text-align:center">Lista sterowników</p>`;
				for (var i = 0; i < data.length; i++)
				{
					var lrv = data[i];
					var dName = lrv.name;
					if (dName == "- - - -")
						dName = lrv.id;
					sDetail += `<div class="single-detail">
												<div>${dName}</div>
												<div>
													<svg class="btn-panel-group group-devices" data-ma-fn="group-control-remove" data-d-id="${lrv.id}" style="width:18px;height:18px" viewBox="0 0 24 24">
  													<path fill="#F88" d="M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z" />
													</svg>
												</div>
											</div>`;
				}
				sDetail += `</div>`;
			}
			return sDetail;
		},
		panelManualControl : function(data)
		{
			if (data == null)
				return '<p style="text-align:center;">- - - - -</p>';
			if (!data.serverData.onlineStatus)
				return '<p style="text-align:center; color: rgb(255, 91, 91);">OFF-LINE</span>';
			let htmlActPx = `<tr><td>
													P1 Aktywna
 												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p1-1">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p1-0">NIE</button>
												</td></tr>`;
			if (data.serverData.pumpCount>1)
				htmlActPx += `<tr><td>
												P2 Aktywna
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p2-1">TAK</button>
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p2-0">NIE</button>
											</td></tr>`;
			if (data.serverData.pumpCount>2)
				htmlActPx += `<tr><td>
												P3 Aktywna
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p3-1">TAK</button>
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p3-0">NIE</button>
											</td></tr>`;
			if (data.serverData.pumpCount>3)
				htmlActPx += `<tr><td>
												P4 Aktywna
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p4-1">TAK</button>
											</td>
											<td>
												<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-status-p4-0">NIE</button>
											</td></tr>`;
			
			let htmlHandWork = `<tr><td>
														Praca ręczna P1
													</td>
													<td>
														<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p1-1">TAK</button>
													</td>
													<td>
														<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p1-0">NIE</button>
													</td></tr>`;
			if (data.serverData.pumpCount>1)
				htmlHandWork +=`<tr><td>
													Praca ręczna P2
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p2-1">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p2-0">NIE</button>
												</td></tr>`;
			if (data.serverData.pumpCount>2)
				htmlHandWork +=`<tr><td>
													Praca ręczna P3
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p3-1">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p3-0">NIE</button>
												</td></tr>`;
			if (data.serverData.pumpCount>3)
				htmlHandWork +=`<tr><td>
													Praca ręczna P4
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p4-1">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-handWork-p4-0">NIE</button>
												</td></tr>`;
			
			let sDetail = `<div style="text-align:center">STEROWANIE RĘCZNE</div>`;
			sDetail += `<div style="padding:10px;">
										<table>
											<tr>
												<td>
													Tryb pracy
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-workmode-auto">AUTO</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-workmode-stop">STOP</button>
												</td>
											</tr>
											<tr>
												<td>
													Wycisz
												</td>
												<td colspan="2">
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-lsa-mute">TAK</button>
												</td>
											</tr>
											<tr>
												<td>
													Syrena
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-lsa-on">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-lsa-off">NIE</button>
												</td>
											</tr>
											<tr>
												<td>
													Ochrona
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-protection-off">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-protection-on">NIE</button>
												</td>
											</tr>
											<tr>
												<td>
													AC serwis
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-ac-service-on">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-ac-service-off">NIE</button>
												</td>
											</tr>
											<tr>
												<td>
													Kasuj alarmy
												</td>
												<td colspan="2">
													<button class="btn-elp btn-panel-action" data-ma-fn="manual-control-delete-alarms">TAK</button>
												</td>
											</tr>
											${htmlActPx}
											<tr>
												<td colspan="3" style="text-align:center">
													Czas pracy ręcznej
													<input id="hand-work-time" value="30" style="width:60px" /> s
												</td>
											</tr>		
											${htmlHandWork}
											<tr>
												<td>
													Łącze 1 do 1
												</td>
												<td>
													<button class="btn-elp btn-panel-action-service-mode" data-ma-fn="manual-control-one-2-one-on">TAK</button>
												</td>
												<td>
													<button class="btn-elp btn-panel-action-service-mode" data-ma-fn="manual-control-one-2-one-off">NIE</button>
												</td>
											</tr>								
											</table>
									</div>`;		
			return sDetail;
		},
		panelOperatorInfo : function(data)
		{
			var sDetail = `<div>`;
			if (data.prm>=10)
			{
				sDetail += `<div class="single-detail">
												<div>Osoba</div>
												<div class="d-val canBeEditable" data-edit_fn="editDeviceUserNameSurname" data-variable_id="${data.devId}" contenteditable="false">${data.name}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Telefon</div>
												<div class="d-val canBeEditable" data-edit_fn="editDeviceUserPhone" data-variable_id="${data.devId}" contenteditable="false">${data.phone}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Adres</div>
												<div class="d-val canBeEditable" data-edit_fn="editDeviceUserAddress" data-variable_id="${data.devId}" contenteditable="false">${data.address}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Informacje dodatkowe</div>
												<div class="d-val canBeEditable editMultiline" data-edit_fn="editDeviceUserNote" data-variable_id="${data.devId}"  contenteditable="false">${data.notes}</div>
											</div>`;
				sDetail += `</div>`;
			}
			else
			{
				sDetail += `<div class="single-detail">
												<div>Osoba</div>
												<div class="d-val">${data.name}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Telefon</div>
												<div class="d-val">${data.phone}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Adres</div>
												<div class="d-val">${data.address}</div>
											</div>`;
				sDetail += `<div class="single-detail">
												<div>Informacje dodatkowe</div>
												<div class="d-val">${data.notes}</div>
											</div>`;
				sDetail += `</div>`;
			}
			return sDetail;			
		},
		selectDevices : function(data, devsList=null)
		{
			let devTab = [];
			if (devsList === null)
			{
				for (let i = 0; i < data.length; i++)
				{
					if (data[i].type=="device")
					{
						devTab.push({id : data[i].devId, title : data[i].title.replace("\n","<br>")})
					}
				}
			}
			else
			{
				devTab = devsList;
			}
			devTab.sort(function (a, b){const x = a.title.toLowerCase(); const y = b.title.toLowerCase();return x < y ? -1 : x > y ? 1 : 0});
			let ret = "";
			if (devTab.length > 0)
			{
				for (let i = 0; i < devTab.length; i++)
				{
					ret += `<div class="sk-select-option" data-dev-id="${devTab[i].id}">${devTab[i].title}</div>`;
				}
			}
			else
			{
				ret = `<option selected="">Brak urządzeń</option>`;
			}			
			return ret;
		}
	},
/*
-------------------------------------------------------------------------------------------------------------------------
*/	
	SITE_CHARTS : {
		generateVariableContent : function(data)
		{
			let _res = "<p>Brak zmiennych do wyświetlenia</p>";
			if (data.variable.length > 0)
			{
				_res = `<table style='margin:0 auto;' class='table-elp'>`;
				for (let i = 0; i < data.variable.length; i++)
				{
					_res += `
									<tr class='variable4chart row-selectable' data-v_id='${data.variable[i].varNumber}' >
										<td>${data.variable[i].varDescription}</td>
									</tr>`;
				}
				_res += `</table>`;
			}
			return _res;
		},
		generateDevicesContent : function(data)
		{
			let _res = "<p>Brak urządzeń do wyświetlenia</p>";
			if (data.devices.length > 0)
			{
				_res = `<table style='margin:0 auto;' class='table-elp'></tr>`;
				for (let i = 0; i < data.devices.length; i++)
				{
					_res += `
									<tr class='devices4chart row-selectable' data-d_id='${data.devices[i].id}' >
										<td>${data.devices[i].name!="- - - -"?data.devices[i].name:data.devices[i].id}</td>
									</tr>`;
				}
				_res += `</table>`;
			}
			return _res;
		}
		
	}

}