Finished?!

webapp/src/main.ts

@@ -1,10 +1,13 @@
 import ClimateChart from "./ClimateChart";
 
-const ROOT_URL: string = "climate/";
 const CHART_DOM_ID: string = "myChart";
+let rootUrl: string = "";
 
 function createClimateChart() {
     const pathname = window.location.pathname;
+    if (pathname !== "/") {
+        rootUrl += pathname.match(/\/[^?\s]*/)[0];
+    }
     let minutesDisplayed = 60;
     const argsStart = pathname.search(/\?minute-span=/);
     if (argsStart !== -1) {
@@ -13,15 +16,24 @@ function createClimateChart() {
             minutesDisplayed = parsedMins;
         }
     }
-    return new ClimateChart(ROOT_URL, CHART_DOM_ID, minutesDisplayed);
+    return new ClimateChart(rootUrl, CHART_DOM_ID, minutesDisplayed);
 }
 
 const overlay = document.createElement('div');
-overlay.innerText = 'Loading data...';
-overlay.className = 'overlay';
-document.getRootNode().appendChild(overlay);
+overlay.classList.add('overlay', 'center');
+const textContainer = document.createElement('span');
+textContainer.innerText = 'Loading data...';
+overlay.appendChild(textContainer);
 
-const climateChart = createClimateChart();
-climateChart.onLoaded(() => {
-    overlay.classList.add('hidden');
-})
+document.onreadystatechange = (e) => {
+    document.getElementById("root").appendChild(overlay);
+    const climateChart = createClimateChart();
+    climateChart.onLoaded(() => {
+        overlay.classList.add('hidden');
+    });
+    climateChart.onErrored((e) => {
+        overlay.classList.remove('hidden');
+        textContainer.innerText = `An error occurred: ${e}\nTry restarting the page.`;
+    });
+    document.onreadystatechange = () => {};
+};