From af1b647b5d827b04ad17970f5057fd58a68035e2 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <neviynhd@gmail.com>
Date: Mon, 5 Oct 2015 23:49:59 +0100
Subject: [PATCH] Added error message for api refresh failure.

---
 static/quiz_item.coffee |  8 +++++---
 static/quiz_item.js     | 11 +++++++++--
 templates/layout.html   |  2 +-
 templates/quiz.html     |  6 ++++++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/static/quiz_item.coffee b/static/quiz_item.coffee
index ead896e..fba391d 100644
--- a/static/quiz_item.coffee
+++ b/static/quiz_item.coffee
@@ -67,10 +67,12 @@ $("#get-help").click (e) ->
 
 $("#api-refresh").click (e) ->
   e.preventDefault();
-  $.post("/refresh");
-  refreshQuestion()
+  $.post("/refresh").success(() -> refreshQuestion()).fail(() -> $('#error-area').show());
+
+$('#error-area').find('button').click () ->
+  $('#error-area').hide()
 
 $ ->
   $(document).ready ->
     $('[data-toggle="tooltip"]').tooltip();
-    refreshQuestion();
\ No newline at end of file
+    refreshQuestion();
diff --git a/static/quiz_item.js b/static/quiz_item.js
index 1722f13..e728441 100644
--- a/static/quiz_item.js
+++ b/static/quiz_item.js
@@ -90,8 +90,15 @@
 
   $("#api-refresh").click(function(e) {
     e.preventDefault();
-    $.post("/refresh");
-    return refreshQuestion();
+    return $.post("/refresh").success(function() {
+      return refreshQuestion();
+    }).fail(function() {
+      return $('#error-area').show();
+    });
+  });
+
+  $('#error-area').find('button').click(function() {
+    return $('#error-area').hide();
   });
 
   $(function() {
diff --git a/templates/layout.html b/templates/layout.html
index ef5146f..e0256b7 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -25,7 +25,7 @@
 
     <!-- Optional theme -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
diff --git a/templates/quiz.html b/templates/quiz.html
index b3244f2..a4b7dd2 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -27,6 +27,12 @@
     </div>
 </nav>
 <div class="container-fluid">
+    <div class="row">
+        <div class="col-md-12 text-center">
+            <div id="error-area" class="alert alert-danger alert-dismissible collapse" role="alert">
+                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>Cannot refresh API. Try again later.</div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-md-12 text-center"><p class="question-size" id="question-area"></p><img id="question-image" src=""></div>
     </div>