CanvasCycleVDP/scripts/index.js

// Global Params
const htmlDateClient = document.getElementById("DateClient");
const htmlDateServer = document.getElementById("DateServer");
const htmlDateSynch = document.getElementById("DateSynch");
const htmlErrMSG = document.getElementById("Error_Message");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const update_button = document.getElementById("Update_Button");

const diagram = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);
diagram.BuildDefault();
diagram.Cycle(true);

// Date formatting functions
const FNL = (a, b) => String(a).padStart(b, '0');
const DateToString = (date) => `${date.getFullYear()}.${FNL(date.getMonth() + 1, 2)}.${FNL(date.getDate(), 2)} ${FNL(date.getHours(), 2)}:${FNL(date.getMinutes(), 2)}:${FNL(date.getSeconds(), 2)}`;

let dateClient = null;
let dateServer = null;
let dateSynch = null;

function PrintDateNow() {
	const dn = new Date();
	if (dateServer && dateClient) {
		dateServer.setMilliseconds(dateServer.getMilliseconds() + (dn - dateClient));
	}
	dateClient = dn;
	htmlDateClient.innerHTML = DateToString(dateClient);
	if (dateServer) {
		htmlDateServer.innerHTML = DateToString(dateServer);
	}
	if (dateSynch) {
		htmlDateSynch.innerHTML = DateToString(dateSynch);
	}

	setTimeout(PrintDateNow, 1000);
};

function updateDate(type, date) {
	if (date instanceof Date) {
		if (type === 'server') {
			dateClient = null;
			dateServer = date;
		} else if (type === 'sync') {
			dateSynch = date;
		}
	} else {
		if (type === 'server') dateServer = null;
		else if (type === 'synch') dateSynch = null;
	}
};

function updateDateSynch(date) {
  if (typeof date.getMonth === 'function') {
    dateSynch = date;
  } else
    dateSynch = null;
};


// Resize canvas
function Resize() {
	const isWide = window.innerWidth > window.innerHeight;
	canvas.height = isWide
		? window.innerHeight - 20
			- document.getElementById("First_Head").offsetHeight
			- document.getElementById("Second_Head").offsetHeight
			- document.getElementById("Third_Head").offsetHeight
		: diagram.ProcCount() * 25;
	canvas.width = document.getElementById("Canvas_Body").offsetWidth;
	diagram.Rotate(!isWide);
    diagram.RectParam(0.5, 0.5, canvas.width - 1, canvas.height - 1);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	diagram.Print(ctx);
};

window.addEventListener("load", Resize, false);
window.addEventListener("resize", Resize, false);

// Autoprint diagram
function PrintCycle() {
	diagram.Print(ctx);
	setTimeout(PrintCycle, 1000);
};
PrintCycle();

function handleError(message) {
	htmlErrMSG.innerHTML = message;
	$("#Error_Border").show();
	$("#Update_Button").show();
};

// Update Status
async function UpdateStatus() {
	try {
		const response = await fetch('api/currcycles', {
			method: 'POST'
		});
		
		if(!response.ok) {
			throw new Error("Не удается установить соединение");
		}
		
		const data = await response.json();
		
		if(!data.currTime) {
			throw new Error("Ошибка в полученных данных: отсутствует время сервера");
		}
		
		updateDate('synch', new Date());
		updateDate('server', new Date(data.currTime));
		
		if (!Array.isArray(data.data)) {
			throw new Error("Ошибка в полученных данных: отсутствует массив данных");
		}
		
		const cycleMapping = {
			0: [0, -1],
			1: [0, -1],
			2: [1, 0],
			5: [2, 0],
			6: [3, 0],
			7: [4, 0],
			8: [5, 2],
			9: [6, 2],
			10: [7, 2],
			11: [8, 2],
			12: [9, 2],
			14: [1, 1],
			15: [2, 1],
			16: [3, 1]
		};
		
		data.data.forEach(item => {
			const idx = item.vdp - 1;
			const [s, b] = cycleMapping[item.cycle] || [-1, -1];
			diagram.ChangeStatProc(idx, s, 0);
			diagram.ChangeStatBlink(idx, b);
			diagram.StartDate(idx, new Date(item.factStart));
			diagram.EndDate(idx, new Date(item.thinkEnd));
		});
		
		diagram.Cycle(true);
		diagram.Print(ctx);
	} catch (error) {
		handleError(error.message);
	} finally {
		setTimeout(UpdateStatus, 60 * 1000);
	}
};

UpdateStatus();

function ConvDate(a) {
	const [datePart, timePart] = a.split("T");
	const [year, month, day] = datePart.split("-");
	const [hours, minutes, seconds] = timePart.split(":");
	return new Date(year, month - 1, day, hours, minutes, seconds);
};

update_button.onclick =  UpdateStatus;

PrintDateNow();