class syntax added

src/index.html

@@ -10,7 +10,7 @@
   #bar {
     width: 0%;
     height: 30px;
-    background-color: #4CAF50;
+    background-color: #4caf50;
   }
 </style>
 <script>
@@ -19,11 +19,13 @@
   let pollingStatus;
 
   function startProgressBar(timeout) {
-    runner = setInterval(()=>{setProgressBarStatus(timeout)}, 1000);
+    runner = setInterval(() => {
+      setProgressBarStatus(timeout);
+    }, 1000);
   }
 
   function setProgressBarStatus(timeout) {
-    showStatus('Run Asynch Process on Back-end')
+    showStatus("Run Async Process on Back-end");
     let progressBar = document.getElementById("bar");
     if (parseInt(progressBar.style.width) >= 100) {
       clearInterval(runner);
@@ -37,83 +39,82 @@
     }
   }
 
-
-  function PublishForm(form, url) {
-    function sendMessage(timeout) {
-      startProgressBar(timeout);
-      fetch(`${url}/?after=${timeout}`, {
-        method: 'GET'
-      }).then((res) => {
-        console.log('here we got res', res)
-      });
-    }
-
-    form.onsubmit = function () {
-      let timeout = form.timeout.value;
-
-      if (timeout) {
-        form.timeout.value = '';
-        disableButton();
-        sendMessage(timeout);
-      }
-      return false;
-    };
-  }
-  function showStatus(pollingStatus){
-    console.log(pollingStatus)
-    let statusMessage = document.getElementById('status');
+  function showStatus(pollingStatus) {
+    console.log(pollingStatus);
+    let statusMessage = document.getElementById("status");
     statusMessage.innerHTML = pollingStatus;
   }
+
   function disableButton() {
-    let btn = document.getElementById('submitBtn');
+    let btn = document.getElementById("submitBtn");
     btn.disabled = !btn.disabled;
   }
 
-  function SubscribePane(elem, url) {
-    console.log('RUN IUT')
-    async function subscribe() {
-      console.log('RUN INSIDE')
-      setTimeout(()=>{showStatus('Connected')},1000);
-      let response = await fetch(url);
+  class PublishForm {
+    constructor(form, url) {
+      this.url = url;
+      form.onsubmit = () => {
+        let timeout = form.timeout.value;
+        if (timeout) {
+          form.timeout.value = "";
+          disableButton();
+          this.sendMessage(timeout);
+        }
+        return false;
+      };
+    }
+    async sendMessage(timeout) {
+      startProgressBar(timeout);
+      const res = await fetch(`${this.url}/?after=${timeout}`);
+      console.log(res);
+    }
+  }
+
+  class SubscribePane {
+    constructor(elem, url) {
+      this.elem = elem;
+      this.url = url;
+    }
+    async subscribe() {
+      console.log("RUN INSIDE");
+      setTimeout(() => {
+        showStatus("Connected");
+      }, 1000);
+      let response = await fetch(this.url);
       if (response.status == 502) {
-        showStatus('Connection Fault');
-        await subscribe();
-      } else if (response.status != 200) {
-        showStatus('Connection Fault');
-        await subscribe();
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        await subscribe();
-      } else {
+        showStatus("Connection Fault");
+        await this.subscribe();
+        await new Promise((resolve) => setTimeout(resolve, 1000));
         // Got message
-        console.log(response.status, url)
-        showStatus('Got Response');
-        await subscribe();
+        console.log(response.status, this.url);
+        showStatus("Got Response");
       }
+      await this.subscribe();
     }
-    subscribe();
   }
-  </script>
-<div class ="container"> 
-<div class="row">
-  <h2>Send message to Back-End! Get Answer after :</h>
-</div>
-<form name="publish" class="row">
-      <input type="number" name="timeout" />
-      <input id="submitBtn" type="submit" value="Send" />
-</form>
-<div id="subscribe">
+</script>
+<div class="container">
+  <div class="row">
+    <h2>Send message to Back-End! Get Answer after :</h2>
   </div>
+  <form name="publish" class="row">
+    <input type="number" name="timeout" />
+    <input id="submitBtn" type="submit" value="Send" />
+  </form>
+  <div id="subscribe"></div>
   <h3 id="status" class="row center"></h3>
-<div class="row">
-
-  <div id="progress">
-    <div id="bar"></div>
+  <div class="row">
+    <div id="progress">
+      <div id="bar"></div>
+    </div>
   </div>
 </div>
-</div>
 
 <script>
-  new PublishForm(document.forms.publish, 'publish');
+  new PublishForm(document.forms.publish, "publish");
   // // random url parameter to avoid any caching issues
-  new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
-</script>
+  new SubscribePane(
+    document.getElementById("subscribe"),
+    "subscribe?random=" + Math.random()
+  ).subscribe();
+</script>

src/polling-server.ts

@@ -9,7 +9,7 @@ const expressRoutes = new AppRouter(app);
 expressRoutes.init();
 const port = process.env.PORT;
 app.use(express.static("src")) // serve the whole directory
-
+process.env.PORT = "3000"
 app.listen(process.env.PORT, () => {
   console.log(`Express server app listening on port ${process.env.PORT}!`);
 });