CanvasCycleVDP/scripts/test.js

let canvas = document.getElementById("canvas"); 
let ctx = canvas.getContext("2d");

//Функция изменения размера полотна
let menu = document.getElementById('menu'); 
let resizeTimeout;
function Resize() {
	clearTimeout(resizeTimeout);
	resizeTimeout = setTimeout(() => {
		canvas.width = window.innerWidth - 20;
		canvas.height = window.innerHeight - 30 - menu.clientHeight;
	}, 100);
}
window.addEventListener("load", Resize, false);
window.addEventListener("resize", Resize, false);

//Флаги для теста
let chkText   = document.getElementById('PText');
let chkData   = document.getElementById('DefData');
let chkRotate = document.getElementById('Rotate');
let chkloop   = document.getElementById('ChkLoop');
//Глобальные параметры для теста
const columnHeightBase = 200;
const columnWidthBase = 40;
const rectHeightBase = 40;
const rectWidthBase = 70;

const elementSpacing = 5;

//Функция проверки столбцов процесса
let but1 = document.getElementById('TestPercent'); 
but1.onclick = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	let height = columnHeightBase;
	let width = columnWidthBase;

	if (chkRotate.checked){
		[height, width] = [width, height];
	}

	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing))
	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing))
	
	for (let i = 0; i < maxColumnsX; i++) {
		for (let j = 0; j < maxColumnsY; j++) {
			const x = (i * (width + elementSpacing)) + 0.5;
			const y = (j * (height + elementSpacing)) + 0.5;
			
			const t = new PercentColumn(x, y, width, height);
			if (!chkData.checked){
				t.Color(getRColor());
			}
			t.Percent(Math.random() * 101);
			t.Rotate(chkRotate.checked);
			t.Print(ctx);
			if (chkText.checked){
				t.PrintText(ctx);
			}
		}
	}
};

//Функция проверки столбцов статусов
let but2 = document.getElementById('TestProcess'); 
but2.onclick = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	let height = columnHeightBase;
	let width = columnWidthBase;
	
	if (chkData.checked){
		height *= 2;
	}

	if (chkRotate.checked){
		[height, width] = [width, height];
	}
	
	const count = Math.floor(Math.random() * 6 + 2);
	const arrPoint = Array.from({ length: count }, () => Math.random() * 5 + 1);
	const arrColor = Array.from({ length: count }, () => getRColor());
	
	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing))
	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing))

	
	for (let i = 0; i < maxColumnsX; i++) {
		for (let j = 0; j < maxColumnsY; j++) {
			const x = (i * (width + elementSpacing)) + 0.5;
			const y = (j * (height + elementSpacing)) + 0.5;
			
			const t = new ProcessColumn(x, y, width, height);
			t.Rotate(chkRotate.checked);
			if (chkData.checked){
				t.BuildDefault();
			} else {
				for (let k = 0; k < count; k++) {
					t.AddRStat(k, arrPoint[k], arrColor[k]);
				}
			}
			t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1));
			t.Percent(Math.random() * 101);
			t.Print(ctx);
			if (chkText.checked) {
				t.PrintText(ctx);
			}
		}
	}
};

//Функция проверки мигалки
let but3 = document.getElementById('TestBlinkStatus');
but3.onclick = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	let height = rectHeightBase;
	let width = rectWidthBase;

	if (chkRotate.checked){
		[height, width] = [width, height];
	}

	const count = Math.floor(Math.random() * 5 + 1);
	const arrColor = Array.from({ length: count }, () => getRColor());

	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing));
	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing));

	for (let i = 0; i < maxColumnsX; i++) {
		for (let j = 0; j < maxColumnsY; j++) {
			const x = (i * (width + elementSpacing)) + 0.5;
			const y = (j * (height + elementSpacing)) + 0.5;
			
			const t = new BlinkStatus( x, y, width, height);
			t.Rotate(chkRotate.checked);
			if (chkData.checked) {
				t.BuildDefault();
			} else {
				for (let k = 0; k < count; k++) {
					t.AddStatus(k, arrColor[k]);
				}
			}
			t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1));
			t.Print(ctx);
			if (chkText.checked) {
				t.PrintText(ctx);
			}
		}
	}
};

//Функция проверки номера
let but4 = document.getElementById('TestNumberColumn');
but4.onclick = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	let height = rectHeightBase;
	let width = rectWidthBase;

	if (chkRotate.checked){
		[height, width] = [width, height];
	}
	
	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing));
	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing));
	
	let num = 0;
	for (var i = 0; i < maxColumnsX; i++) {
		for (var j = 0; j < maxColumnsY; j++) {
			const x = (i * (width + elementSpacing)) + 0.5;
			const y = (j * (height + elementSpacing)) + 0.5;
			const t = new NumberColumn(x, y, width, height, num++);
			t.Rotate(chkRotate.checked);
			t.Prostoy(Math.random() < 0.5);
			t.Print(ctx);
		}
	}
};

//Переменные для диаграммы
let cycle;
let diagTest;
//Функция цикла
function cycle_print() {
	diagTest.RectParam(0.5, 0.5, canvas.width - 1, canvas.height - 1)
	diagTest.Print(ctx);
	if (chkText.checked) {
		diagTest.PrintText(ctx);
	}
	if (diagTest.Cycle()) {
		cycle = setTimeout(cycle_print, 1000);
	}
}
let but5 = document.getElementById('TestDiagramStove');
but5.onclick = function () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	diagTest = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);	

	if (chkData.checked) {
		diagTest.BuildDefault();
		for (let i = 0; i < diagTest.ProcCount(); i++) {
			diagTest.ChangeStatProc(i,
				Math.floor(Math.random() * 11),
				Math.floor(Math.random() * 101));
			diagTest.ChangeStatBlink(i, Math.floor(Math.random() * 5 - 1));
			diagTest.ChangeStatNumb(i, Math.random() < 0.5);
		}
	} else {
		const countStove = Math.floor(Math.random() * 20 + 30);
		const countProc = Math.floor(Math.random() * 9 + 1);
		const countBlink = Math.floor(Math.random() * 4 + 1);

		const colorProc = Array.from({ length: countProc }, () => getRColor());
		const pointProc = Array.from({ length: countProc }, () => Math.random() * 10);
		const colorBlink = Array.from({ length: countBlink }, () => getRColor());

		for (let i = 0; i < countStove; i++) {
			const tP = new ProcessColumn(0, 0, 0, 0);
			for (let k = 0; k < countProc; k++) {
				tP.AddRStat(k, pointProc[k], colorProc[k]);
			}
			tP.Status(Math.floor(Math.random() * countProc));
			tP.Percent(Math.floor(Math.random() * 101));
			
			const tB = new BlinkStatus(0, 0, 0, 0);
			for (let k = 0; k < countBlink; k++) {
				tB.AddStatus(k, colorBlink[k]);
			}
			tB.Status(Math.floor(Math.random() * (countBlink + 1) -1));

			const tN = new NumberColumn(0, 0, 0, 0, i + 1);
			tN.Prostoy(Math.random() < 0.5);

			diagTest.AddProc(i, tP, tB, tN);
		}
	}
	diagTest.Rotate(chkRotate.checked);

	if (chkloop.checked) {
		for (let i = 0; i < diagTest.ProcCount(); i++) {
			const dStart = new Date();
			const dEnd = new Date();
			dStart.setSeconds(dStart.getSeconds() + Math.floor(Math.random() * 61 - 50));
			dEnd.setSeconds(dEnd.getSeconds() + Math.floor(Math.random() * 61 - 10));
			diagTest.StartDate(i, dStart);
			diagTest.EndDate(i, dEnd);
		}
		diagTest.Cycle(true);
		cycle_print();
	} else {
		diagTest.Print(ctx);
		if (chkText.checked) {
			diagTest.PrintText(ctx);
		}
	}
};

let but6 = document.getElementById('TestPost');
let btn6CycleSend;

but6.onclick = function () {
	sendCycleData();
}

function sendCycleData() {
	const url = `${window.location.origin}/api/currcycles`;
	fetch(url, {
		method: 'POST'
	})
	.then(response => {
		if (!response.ok) {
			throw new Error(`${response.status}: ${response.statusText}`);
		}
		return response.text();
	})
	.then(data => {
		PrintDiagram(data);
		handleLoop();
	})
	.catch(error => {
		alert(error.message);
	});
};

function handleLoop() {
	but6.disabled = chkloop.checked;
	if (but6.disabled) {
		btn6CycleSend = setTimeout(sendCycleData, 60000);
	}
};

function PrintDiagram(pechstatus) {
	const Pech = JSON.parse(pechstatus);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	const t = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);
	t.BuildDefault();
	t.Rotate(chkRotate.checked);

	const cycleMapping = {
		0: { s: 0, b: -1 },
		1: { s: 0, b: 1 },
		2: { s: 1, b: 0 },
		5: { s: 2, b: 0 },
		6: { s: 3, b: 0 },
		7: { s: 4, b: 0 },
		8: { s: 5, b: 3 },
		9: { s: 6, b: 3 },
		10: { s: 7, b: 3 },
		11: { s: 8, b: 3 },
		12: { s: 9, b: 3 },
		14: { s: 1, b: 1 },
		15: { s: 2, b: 1 },
		16: { s: 3, b: 1 },
	};
	
	for(const key in Pech.data) {
		const idx = Pech.data[key].vdp - 1;
		const cycleInfo = cycleMapping[Pech.data[key].cycle] || { s: 0, b: -1 };

		t.ChangeStatProc(idx, cycleInfo.s, 0);
		t.ChangeStatBlink(idx, cycleInfo.b);
		t.StartDate(idx, new Date(Pech.data[key].factStart));
		t.EndDate(idx, new Date(Pech.data[key].thinkEnd));
	}
	
	t.Print(ctx);
	if (chkText.checked) {
		t.PrintText(ctx);
	}
};

function getRColor() {
	const letters = '0123456789ABCDEF';
	const color = '#' + Array.from({ length: 6 }, () => letters[Math.floor(Math.random() * 16)]).join('');
	return color;
};