153 lines
4.2 KiB
JavaScript
153 lines
4.2 KiB
JavaScript
// 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, 2], 5: [2, 2], 6: [3, 2],
|
||
7: [4, 2], 8: [5, 0], 9: [6, 0], 10: [7, 0], 11: [8, 0],
|
||
12: [9, 0], 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();
|