Splitted js into multiple files to be easier to use

JS/helpers.js

@@ -0,0 +1,39 @@
+export async function fetchData(url) {
+    const defaultOptions = {
+        headers: {
+            'Content-Type': 'application/json',
+            'X-Api-Key': 'AB36FE568344446D92F87BACD84F02CB'
+        }
+    };
+    try {
+        const response = await fetch(url, defaultOptions);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error(error);
+        return error;
+    }
+}
+
+export function sendPostRequest(url, json) {
+    var myHeaders = new Headers();
+    myHeaders.append("X-Api-Key", "AB36FE568344446D92F87BACD84F02CB");
+    myHeaders.append("Content-Type", "application/json");
+
+    var raw = JSON.stringify(json);
+
+    var requestOptions = {
+        method: 'POST',
+        headers: myHeaders,
+        body: raw,
+        redirect: 'follow'
+    };
+
+    fetch(url, requestOptions)
+        .then(response => response.text())
+        .then( /*result => console.log(result)*/ )
+        .catch(error => console.log('error', error));
+}

JS/methods.js

@@ -0,0 +1,46 @@
+import * as helpers from "./helpers.js";
+import * as ui from "./ui.js";
+
+export function load() {
+    helpers.RecoverPrinterInfos();
+}
+
+export function RecoverPrinterInfos() {
+    const temperaturesRoute = 'http://192.168.50.239/api/printer';
+    helpers.fetchData(temperaturesRoute).then(data => {
+            ui.DisplayTemperatures(data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
+}
+
+export function RecoverJobInfos() {
+    let url = "http://192.168.50.239/api/job";
+    helpers.fetchData(url).then(data => {
+            ui.DisplayJob(data);
+        })
+        .catch(error => {
+            console.error(error);
+        });
+}
+
+export function setNewBedTemps(temp) {
+    let url = "http://192.168.50.239/api/printer/bed";
+    let json = {
+        "command": "target",
+        "target": temp
+    }
+    helpers.sendPostRequest(url, json);
+}
+
+export function setNewHotEndTemps(temp) {
+    let url = "http://192.168.50.239/api/printer/tool";
+    let json = {
+        "command": "target",
+        "targets": {
+            "tool0": temp
+        }
+    }
+    helpers.sendPostRequest(url, json);
+}

JS/ui.js

@@ -0,0 +1,62 @@
+let loading = true;
+
+let tbxBedTemp = document.getElementById("tbxBedTempTarget");
+let tbxHotEndTemp = document.getElementById("tbxHotEndTempTarget");
+
+export function DisplayTemperatures(data) {
+    var bedTemp = data["temperature"]["bed"]["actual"];
+    var bedTempTarget = data["temperature"]["bed"]["target"];
+    var hotEndTemp = data["temperature"]["tool0"]["actual"];
+    var hotEndTempTarget = data["temperature"]["tool0"]["target"]
+
+    var lblBedTemp = document.getElementById("lblBedTemp");
+    var lblBedTempTarget = document.getElementById("lblBedTempTarget");
+    var lblHotEndTemp = document.getElementById("lblHotEndTemp");
+    var lblHotEndTempTarget = document.getElementById("lblHotEndTempTarget");
+
+    if (loading) {
+        tbxBedTemp.value = bedTempTarget;
+        tbxHotEndTemp.value = hotEndTempTarget;
+        loading = false;
+    }
+
+    lblBedTemp.innerHTML = bedTemp;
+    lblBedTempTarget.innerHTML = bedTempTarget;
+    lblHotEndTemp.innerHTML = hotEndTemp;
+    lblHotEndTempTarget.innerHTML = hotEndTempTarget;
+}
+
+export 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;
+}