From 2ba038f43ba68be8dbe285b7f7b196c00831e1c6 Mon Sep 17 00:00:00 2001
From: Pierre Lavalley <pierre.lavalley@gmail.com>
Date: Fri, 21 Aug 2020 15:57:08 +0200
Subject: [PATCH] Handle request error and display error message

---
 css/style.css | 17 +++++++++++++++++
 js/popup.js   |  8 ++++++--
 popup.html    |  4 ++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index eb7c057..cbf9e11 100644
--- 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
index 454dc3e..7277607 100644
--- 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
index 1f6299f..64966b8 100644
--- 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>