nicolas
/
Beer-Catalog
mirror of https://github.com/nmasse-itix/Beer-Catalog.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

add a throbber and a refresh button + handle errors

master
Nicolas Massé 8 years ago
parent
3ca82129e3
commit
8b25b79add
3 changed files with 51 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      beer.css
  2. 20
      beer.js
  3. 16
      index.html

18
beer.css
View File

@ -41,3 +41,21 @@ img {
margin-right: 30px; margin-right: 30px;
font-size: 50%; font-size: 50%;
} }
.error {
text-align: center;
}
.error h1 {
font-size: 400%;
margin-bottom: -10px;
}
.hidden {
display: none;
}
.refresh {
text-align: center;
font-size: 200%;
}

20
beer.js
View File

@ -2,6 +2,9 @@ define(function(require, exports, module) {
module.exports = function () { module.exports = function () {
var flags = require("flags.js"); var flags = require("flags.js");
var config = require("config.js"); var config = require("config.js");
$(".error,.catalog").toggleClass("hidden", true);
$(".throbber").toggleClass("hidden", false);
$(".catalog ul").empty();
$.ajax({ $.ajax({
"url": config.baseURL + "/beer?page=0" + (config.extraQueryStringSuffix != null ? "&" + config.extraQueryStringSuffix : ""), "url": config.baseURL + "/beer?page=0" + (config.extraQueryStringSuffix != null ? "&" + config.extraQueryStringSuffix : ""),
"success": function (data, status, xhr) { "success": function (data, status, xhr) {
@ -18,12 +21,27 @@ module.exports = function () {
.text(data[i].name) .text(data[i].name)
.prepend($("<span>").text(flag).toggleClass("flag")) .prepend($("<span>").text(flag).toggleClass("flag"))
.append($("<span>").text(rating).toggleClass("rating")) .append($("<span>").text(rating).toggleClass("rating"))
.appendTo($(".catalog")); .appendTo($(".catalog ul"));
} }
$(".catalog").toggleClass("hidden", false);
$(".throbber").toggleClass("hidden", true);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
$("#error_message").text(e.message);
$(".error").toggleClass("hidden", false);
$(".throbber").toggleClass("hidden", true);
} }
}, },
"error": function (xhr, status, error) {
if (xhr.status == "403") {
$("#error_message").text("API Quota reached !");
} else {
$("#error_message").text("Sorry ! HTTP Status Code " + xhr.status);
}
$(".error").toggleClass("hidden", false);
$(".throbber").toggleClass("hidden", true);
},
"headers": config.additionalHeaders != null ? config.additionalHeaders : {} "headers": config.additionalHeaders != null ? config.additionalHeaders : {}
}); });
}; };

16
index.html
View File

@ -6,9 +6,10 @@
<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.js'></script> <script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js'></script>
<script type='text/javascript'> <script type='text/javascript'>
require(['beer'], function (initBeerUI) { require(['beer'], function (loadBeers) {
$(document).ready(function() { $(document).ready(function() {
initBeerUI(); $(".refresh").on("click", loadBeers);
loadBeers();
}); });
}); });
</script> </script>
@ -17,7 +18,16 @@
<body> <body>
<img src="brew.png" /> <img src="brew.png" />
<h1>BEER CATALOG</h1> <h1>BEER CATALOG</h1>
<ul class="catalog"> <div class="catalog">
<ul>
</ul> </ul>
<div class="refresh">🔄</div>
</div>
<img src="https://media.giphy.com/media/x7IqIRf6pNR2E/giphy.gif" class="throbber hidden" />
<div class="error hidden">
<h1>⚠️</h1>
<span id="error_message"></span>
<div class="refresh">🔄</div>
</div>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save