var demoVal1 = 0;
var demoVal2 = 0;
class DashboardElement {
	
	name = '';
	type = '';
	sizes = {width:'500', height:'250'}
	elm = null;
	content = null;
	nabor = null;
	
	constructor(parentBox, name, type, nabor, width, height){
		
		this.name = name;
		this.type = type;
		this.sizes.width = width;
		this.sizes.height = height;
		this.nabor = nabor;
		
		this.elm = document.createElementNS('http://www.w3.org/2000/svg','svg');
		
		this.elm.setAttribute('width',this.sizes.width+'px');
		this.elm.setAttribute('height',this.sizes.height+'px');
		this.elm.setAttribute('version','1.1');
		this.elm.setAttribute('viewbox','0 0 '+this.sizes.width+' '+ this.sizes.height );
		
		this.zaprosContent();
		//this.elm.content = 
			
		
		//document.querySelector('#'+parentBox).appendChild(this.elm);
		parentBox.appendChild(this.elm);
		
	}
	
	zaprosContent(){
		
		var fetch_status;
		fetch('/demo/dashboard/zapros.php', {
			method: "POST",
			// Set the headers
			headers: {
				'Accept': 'application/json',
				'Content-Type': 'application/json'
			},
			cache: 'no-store',
			// Set the post data
			body: JSON.stringify({
				name : this.name,
				type : this.type,
				nabor : this.nabor,
				width : this.sizes.width,
				height : this.sizes.height,
				demo1 : demoVal1,
				demo2 : demoVal2
			})
		})
		.then(response => response.text())
		.then(data => this.setContent(data))
		.catch(error => this.setContent(error));
		
	}
	
	
	setContent(txt){
	
		this.elm.innerHTML = txt;
	}
	
}



function RefreshData(elms){
	
	demoVal1 = Math.floor(Math.random() * (1000 - 700 + 1)) + 700;
	demoVal2 = Math.floor(Math.random() * (1000 - 700 + 1)) + 700;
	
	elms.forEach( elm => {
		
		elm.zaprosContent();	
	});
	
}

var timeLeft = 60;
window.onload = function(){


	var dElements = [];
	
	
	document.querySelectorAll('div.boardElement').forEach( elm => {
		
		dElements.push(new DashboardElement(elm, elm.dataset.name, elm.dataset.type, elm.dataset.nabor, elm.dataset.width, elm.dataset.height));
		
	});
	
	document.querySelector('.refresh').addEventListener('click', event => {
	
		timeLeft = 60;
		RefreshData(dElements);
		
	});
	
	document.querySelector('.button').addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

	
	function updTimer1()
	{
		timeLeft--;
		if (timeLeft <= 0){
			
			timeLeft = 60;
			RefreshData(dElements);
		}
		document.querySelector('.timer').innerHTML = 'Автоматическое обновление через ' + timeLeft + ' сек';
	}
	
	RefreshData(dElements);
	const timerId1 = setInterval(updTimer1, 1000);
	

};