Handle request error and display error message

piRstone · Aug 21, 2020 · 2ba038f · 2ba038f
1 parent 70ea199
commit 2ba038f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -83,6 +83,23 @@ p, label {
     display: inline-block;
 }
 
+#server-error {
+    font-size: 12px;
+    color: #b3b3b3;
+    text-align: center;
+    margin: 60px 10px;
+}
+
+#server-error span {
+    display: block;
+}
+
+#server-error span:first-child {
+    font-size: 14px;
+    color: #f90000;
+    margin-bottom: 10px;
+}
+
 #settings {
     display: inline-block;
     height: 15px;

diff --git a/js/popup.js b/js/popup.js
@@ -1,9 +1,10 @@
 var stations = [];
 
-function getStations(success) {
+function getStations(success, error) {
     var url = "https://bql.pirstone.com/webapps/bql/stations.php";
     $.get(url, function(data) {
         var data = JSON.parse(data);
+        console.log(data);
         // Sort stations by id
         data.sort(function(a, b) {
             if (a.number < b.number)
@@ -14,7 +15,8 @@ function getStations(success) {
         });
         stations = data;
         success();
-    });
+    })
+    .fail(error);
 }
 
 function displayInfos(data) {
@@ -296,6 +298,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
         $('#settings').click(openOptions);
         $('#add-station').click(showStationsList);
+    }, function() {
+        $("#server-error").removeClass("hide");
     });
 });
 

diff --git a/popup.html b/popup.html
@@ -19,6 +19,10 @@ <h1>Bicloo Quick Look</h1>
         </div>
         <div id="main">
             <p id="empty-stations">Ajoutez vos stations pour commencer &#8599;</p>
+            <p id="server-error" class="hide">
+                <span>Une erreur s'est produite pendant la récupération des stations.</span>
+                <span>Si l'erreur persiste, envoyez un email à <strong>contact@pirstone.com</strong>.</span>
+            </p>
             <div id="fav-journee" class="hide">
                 <h5 class="fav-j-title">Mon trajet préféré</h5>
                 <ul>