From 03fdfa33ddf4d1a451d97e8a787f1c53c30b764a Mon Sep 17 00:00:00 2001
From: Moritz Warning <moritzwarning@web.de>
Date: Sat, 7 Sep 2024 22:00:03 +0200
Subject: [PATCH] add eror message box

Signed-off-by: Moritz Warning <moritzwarning@web.de>
---
 www/index.css  | 10 ++++++++
 www/index.html |  2 ++
 www/index.js   | 63 +++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/www/index.css b/www/index.css
index 6b688fdb..f42df951 100644
--- a/www/index.css
+++ b/www/index.css
@@ -457,3 +457,13 @@ body {
     color: #d0d0d0;
   }
 }
+
+#alert {
+  position: absolute;
+  z-index: 1001;
+  height: 2em;
+  line-height: 2em;
+  width: 100%;
+  background-color: red;
+  text-align: center;
+}
diff --git a/www/index.html b/www/index.html
index 27cf709d..fa280671 100644
--- a/www/index.html
+++ b/www/index.html
@@ -76,6 +76,8 @@
       </div>
     </header>
 
+    <div id="alert" class="hide"></div>
+
     <div class="container">
       <div>
         <h2 class="tr-load">Download OpenWrt Firmware for your Device</h2>
diff --git a/www/index.js b/www/index.js
index 68af9bb5..389c6578 100644
--- a/www/index.js
+++ b/www/index.js
@@ -35,6 +35,16 @@ function htmlToElement(html) {
   return e.content.firstChild;
 }
 
+function showAlert(message) {
+  $("#alert").innerText = String(message);
+  show("#alert");
+}
+
+function hideAlert(message) {
+  hide("#alert");
+  $("#alert").innerText = "";
+}
+
 function getModelTitles(titles) {
   return titles.map((e) => {
     if (e.title) {
@@ -239,8 +249,18 @@ function translate(lang) {
     apply(current_language, current_language_json);
   } else {
     fetch("langs/" + new_lang + ".json")
-      .then((obj) => obj.json())
-      .then((mapping) => apply(new_lang, mapping));
+      .then((obj) => {
+        if (obj.status == 200) {
+          hideAlert();
+          return obj.json();
+        } else {
+          showAlert(`Failed to fetch ${obj.uri}`);
+        }
+      })
+      .then((mapping) => apply(new_lang, mapping))
+      .catch((err) => {
+        showAlert(err);
+      });
   }
 }
 
@@ -673,7 +693,12 @@ function changeModel(version, overview, title) {
       cache: "no-cache",
     })
       .then((obj) => {
-        return obj.json();
+        if (obj.status == 200) {
+          hideAlert();
+          return obj.json();
+        } else {
+          showAlert(`Failed to fetch ${obj.uri}`);
+        }
       })
       .then((mobj) => {
         mobj["id"] = entry.id;
@@ -685,7 +710,8 @@ function changeModel(version, overview, title) {
           id: entry.id,
           target: entry.target,
         };
-      });
+      })
+      .catch((err) => showAlert(err));
   } else {
     updateImages();
     current_device = {};
@@ -723,16 +749,24 @@ function setup_uci_defaults() {
   let link = icon.getAttribute("data-link");
   let textarea = $("#uci-defaults-content");
   icon.onclick = function () {
-    fetch(link).then((response) => {
-      response.text().then((text) => {
+    fetch(link)
+      .then((obj) => {
+        if (obj.status == 200) {
+          hideAlert();
+          return obj.text();
+        } else {
+          showAlert(`Failed to fetch ${obj.uri}`);
+        }
+      })
+      .then((text) => {
         // toggle text
         if (textarea.value.indexOf(text) != -1) {
           textarea.value = textarea.value.replace(text, "");
         } else {
           textarea.value = textarea.value + text;
         }
-      });
-    });
+      })
+      .catch((err) => showAlert(err));
   };
 }
 
@@ -785,7 +819,8 @@ async function init() {
         image_url_override: obj.image_url_override,
         default_version: obj.stable_version,
       };
-    });
+    })
+    .catch((err) => showAlert(err));
 
   if (!config.versions) {
     config.versions = upstream_config.versions;
@@ -816,7 +851,12 @@ async function init() {
     let overview_url = `${config.overview_urls[version]}/.overview.json`;
     fetch(overview_url, { cache: "no-cache" })
       .then((obj) => {
-        return obj.json();
+        if (obj.status == 200) {
+          hideAlert();
+          return obj.json();
+        } else {
+          showAlert(`Failed to fetch ${obj.uri}`);
+        }
       })
       .then((obj) => {
         var dups = {};
@@ -877,7 +917,8 @@ async function init() {
 
         // trigger update of current selected model
         $("#models").onfocus();
-      });
+      })
+      .catch((err) => showAlert(err));
   });
 
   setup_uci_defaults();