Fix index page

2024-09-21 01:34:53 +05:00
parent e10cb6795e
commit 791aa1e85b
4 changed files with 246 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Текущий статус печей</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="styles/index.css">
+</head>
+<body>
+  <div class="container-fluid">
+    <div id="First_Head" class="row m-0 pl-1 pr-1 pt-1 pb-0">
+      <div id="Main" class="col-12 text-center">
+        Диаграмма статуса печей
+      </div>
+    </div>
+    <div id="Second_Head" class="row m-0 pl-1 pr-1 pt-0 pb-1 align-items-center">
+      <div class="col-12 col-lg-4 text-center">
+        Время клиента: <span id="DateClient"></span>
+      </div>
+      <div class="col-12 col-lg-4 text-center">
+        Время сервера: <span id="DateServer"></span>
+      </div>
+      <div class="col-12 col-lg-4 text-center">
+        Время синхр.: <span id="DateSynch"></span>
+      </div>
+      <div id="Error_Border" class="col-12 text-center m-0 alert alert-danger alert-dismissible fade show" role="alert">
+        <strong>Ошибка: </strong> <span id="Error_Message">Здесь будет текст ошибки</span>
+        <button id="Update_Button" type="button" class="close" aria-label="Close">&#8635;</button>
+      </div>
+    </div>
+
+    <div id="Canvas_Body">
+      <canvas id="canvas"> </canvas>
+    </div>
+
+    <div id="Third_Head" class="row m-0 pl-1 pr-1 pt-0 pb-0 align-items-center">
+      <div class="col-12 text-left">
+        <span class="status-indicator" style="background-color: #0ff;"></span>Выгрузка-загрузка,
+        <span class="status-indicator" style="background-color: #00f;"></span>Вакуумирование,
+        <span class="status-indicator" style="background-color: #f00;"></span>Токовая операция,
+        <span class="status-indicator" style="background-color: #0f0;"></span>Охлаждение,
+        <span class="status-indicator" style="background-color: #8500b6;"></span>Разведение,
+        <span class="status-indicator" style="background-color: #f0f;"></span>ВУР
+      </div>
+      <div class="col-12 text-left">
+        <span class="status-indicator-small" style="background-color: #00f;"></span>Приварка,
+        <span class="status-indicator-small" style="background-color: #0f0;"></span>Плавка,
+        <span class="status-indicator-small" style="background-color: #f00;"></span>Оплав
+      </div>
+    </div>
+	
+	<div class="text-right fixed-button">
+		<a href="test.html" class="btn btn-primary">Тест</a>
+	</div>
+
+	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+    <script src="CanvasCycleVDP/Diagram.min.js"></script>
+    <script src="scripts/index.js"></script>
+  </div>
+</body>
+</html>
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,152 @@
+// 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, 3], 9: [6, 3], 10: [7, 3], 11: [8, 3],
+			12: [9, 3], 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();
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -266,7 +266,7 @@ but6.onclick = function () {
 function sendCycleData() {
 	const url = `${window.location.origin}/api/currcycles`;
 	fetch(url, {
-		method: 'POST',
+		method: 'POST'
 	})
 	.then(response => {
 		if (!response.ok) {
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,28 @@
+@media (min-width: 768px){
+	#Main {
+		font-size: 25px;
+	}
+}
+
+.fixed-button {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+}
+
+.alert {
+	display: none;
+}
+
+.status-indicator {
+	display: inline-block;
+	margin: 0px 5px 0px 0px;
+	padding: 10px;
+}
+
+.status-indicator-small {
+	display: inline-block;
+	height: 9px;
+	margin: 10px 5px 0px 0px;
+	padding: 0px 19px 0px 0px;
+}