From 21eeb9da843febf68619b4fe1d7345dc8f44c761 Mon Sep 17 00:00:00 2001 From: maxluli Date: Tue, 14 Feb 2023 09:36:51 +0100 Subject: [PATCH] Added last week work --- JS/helpers.js | 0 JS/methods.js | 0 JS/ui.js | 0 index.php | 128 ++++++++++++++++++++++++++++++++++++++------------ 4 files changed, 99 insertions(+), 29 deletions(-) create mode 100644 JS/helpers.js create mode 100644 JS/methods.js create mode 100644 JS/ui.js diff --git a/JS/helpers.js b/JS/helpers.js new file mode 100644 index 0000000..e69de29 diff --git a/JS/methods.js b/JS/methods.js new file mode 100644 index 0000000..e69de29 diff --git a/JS/ui.js b/JS/ui.js new file mode 100644 index 0000000..e69de29 diff --git a/index.php b/index.php index 9ce78d4..2235cc1 100644 --- a/index.php +++ b/index.php @@ -8,7 +8,7 @@ Document - +

Printer temperatures

@@ -21,11 +21,41 @@ Target :
NaN
+

Job

+

Status :

+

NaN

+

Completion :

+

NaN

+

Print time :

+

NaN

+

Time left :

+

NaN

+ +

Print

+

Estimated print time :

+

NaN

+ +

Filament

+

length :

+

NaN

+

volume :

+

NaN

+ +

File

+

Filename :

+

NaN

+

Last print time :

+

NaN

+ +

+ +

Monitor

+ @@ -45,6 +75,7 @@ }); var timer = window.setInterval(function() { RecoverPrinterInfos(); + RecoverJobInfos(); }, 1000) btnRefresh.addEventListener('click', event => { RecoverPrinterInfos(); @@ -56,19 +87,16 @@ setNewHotEndTemps(hotEndTemp); }); - - async function fetchData(url, options = {}) { + //Helpers + async function fetchData(url) { const defaultOptions = { headers: { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', + 'X-Api-Key': 'AB36FE568344446D92F87BACD84F02CB' } }; - const combinedOptions = { - ...defaultOptions, - ...options - }; try { - const response = await fetch(url, combinedOptions); + const response = await fetch(url, defaultOptions); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } @@ -80,25 +108,6 @@ } } - function load(){ - RecoverPrinterInfos(); - } - function RecoverPrinterInfos() { - const temperaturesRoute = 'http://192.168.50.239/api/printer'; - const headers = { - 'X-Api-Key': 'AB36FE568344446D92F87BACD84F02CB' - }; - fetchData(temperaturesRoute, { - headers - }).then(data => { - DisplayTemperatures(data); - }) - .catch(error => { - //alert(error); - console.error(error); - }); - } - function sendPostRequest(url, json) { var myHeaders = new Headers(); myHeaders.append("X-Api-Key", "AB36FE568344446D92F87BACD84F02CB"); @@ -115,10 +124,35 @@ fetch(url, requestOptions) .then(response => response.text()) - .then(result => console.log(result)) + .then( /*result => console.log(result)*/ ) .catch(error => console.log('error', error)); } + //Methods + function load() { + RecoverPrinterInfos(); + } + + function RecoverPrinterInfos() { + const temperaturesRoute = 'http://192.168.50.239/api/printer'; + fetchData(temperaturesRoute).then(data => { + DisplayTemperatures(data); + }) + .catch(error => { + console.error(error); + }); + } + + function RecoverJobInfos() { + let url = "http://192.168.50.239/api/job"; + fetchData(url).then(data => { + DisplayJob(data); + }) + .catch(error => { + console.error(error); + }); + } + function setNewBedTemps(temp) { let url = "http://192.168.50.239/api/printer/bed"; let json = { @@ -139,6 +173,7 @@ sendPostRequest(url, json); } + //Vue function DisplayTemperatures(data) { var bedTemp = data["temperature"]["bed"]["actual"]; var bedTempTarget = data["temperature"]["bed"]["target"]; @@ -161,4 +196,39 @@ lblHotEndTemp.innerHTML = hotEndTemp; lblHotEndTempTarget.innerHTML = hotEndTempTarget; } + + function DisplayJob(data) { + ///console.log(data.state); + ///console.log(data.progress); + ///console.log(data.job); + let lblJobStatus = document.getElementById("lblJobStatus"); + + let lblCompletion = document.getElementById("lblCompletion"); + let lblPrintTime = document.getElementById("lblPrintTime"); + let lblPrintTimeLeft = document.getElementById("lblPrintTimeLeft"); + + let lblEstimatedPrintTime = document.getElementById("lblEstimatedPrintTime"); + let lblFilamentLength = document.getElementById("lblFilamentLength"); + let lblFilamentVolume = document.getElementById("lblFilamentVolume"); + let lblJobFileName = document.getElementById("lblJobFileName"); + let lblJobFileLastPrintedTime = document.getElementById("lblJobFileLastPrintedTime"); + + lblJobStatus.innerHTML = data.state; + + lblCompletion.innerHTML = Math.floor(data.progress.completion * 100) / 100; + lblCompletion.innerHTML += "%"; + lblPrintTime.innerHTML = Math.floor((data.progress.printTime / 3600) * 100) / 100; + lblPrintTime.innerHTML += "H"; + lblPrintTimeLeft.innerHTML = Math.floor((data.progress.printTimeLeft / 3600) * 100) / 100; + lblPrintTimeLeft.innerHTML += "H"; + + lblEstimatedPrintTime.innerHTML = data.job.estimatedPrintTime; + if (data.job.filament != null) { + lblFilamentLength.innerHTML = data.job.filament.length; + lblFilamentVolume.innerHTML = data.job.filament.volume; + } + + lblJobFileName.innerHTML = data.job.file.name; + lblJobFileLastPrintedTime = data.job.lastPrintTime; + } \ No newline at end of file