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;
+}

index.php

@@ -59,176 +59,28 @@
 </body>
 
 </html>
-<script>
+<script type="module">
     "use strict";
 
+    import * as methods from "./JS/methods.js";
+
     let btnRefresh = document.getElementById("btnRefresh");
     let btnSetNewTemps = document.getElementById("btnSetNewTemps");
 
-    let tbxBedTemp = document.getElementById("tbxBedTempTarget");
-    let tbxHotEndTemp = document.getElementById("tbxHotEndTempTarget");
-
-    let loading = true;
-
     document.addEventListener("DOMContentLoaded", function() {
-        load();
+        methods.load();
     });
     var timer = window.setInterval(function() {
-        RecoverPrinterInfos();
+        methods.RecoverPrinterInfos();
-        RecoverJobInfos();
+        methods.RecoverJobInfos();
     }, 1000)
     btnRefresh.addEventListener('click', event => {
-        RecoverPrinterInfos();
+        methods.RecoverPrinterInfos();
     });
     btnSetNewTemps.addEventListener('click', event => {
         let bedTemp = parseInt(tbxBedTemp.value);
         let hotEndTemp = parseInt(tbxHotEndTemp.value);
-        setNewBedTemps(bedTemp);
+        methods.setNewBedTemps(bedTemp);
-        setNewHotEndTemps(hotEndTemp);
+        methods.setNewHotEndTemps(hotEndTemp);
     });
-
-    //Helpers
-    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;
-        }
-    }
-
-    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));
-    }
-
-    //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 = {
-            "command": "target",
-            "target": temp
-        }
-        sendPostRequest(url, json);
-    }
-
-    function setNewHotEndTemps(temp) {
-        let url = "http://192.168.50.239/api/printer/tool";
-        let json = {
-            "command": "target",
-            "targets": {
-                "tool0": temp
-            }
-        }
-        sendPostRequest(url, json);
-    }
-
-    //Vue
-    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;
-    }
-
-    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;
-    }
 </script>