Handle errors in the UI

public/js/app.js

@@ -1,4 +1,5 @@
 $(function() {
+    var errorTag = $('#error');
     var reloadPhotosTag = $('#reload_photos');
     var showLicenseTag = $('#show_license');
     var showLicenseVal = showLicenseTag.val();
@@ -11,10 +12,18 @@ $(function() {
     var applyLicenseTag = $('#apply_license');
     var licenseLinkTag = $('#license_link');
 
+    function controlsDisabled(disabled) {
+        reloadPhotosTag.prop('disabled', disabled);
+        showLicenseTag.prop('disabled', disabled);
+        showPrivacyTag.prop('disabled', disabled);
+        showIgnoredTag.prop('disabled', disabled);
+        selectLicenseTag.prop('disabled', disabled)
+    }
+
     function reloadPhotos(params = {}, path = '/photos/1') {
-        reloadPhotosTag.prop('disabled', true)
-        selectLicenseTag.prop('disabled', true)
+        controlsDisabled(true);
         $.getJSON(path, params, function(data) {
+            photosTag.children('.spinner').remove();
             console.log(data);
 
             if (data.path) {
@@ -23,9 +32,10 @@ $(function() {
                 showLicenseTag.change();
                 showPrivacyTag.change();
                 showIgnoredTag.change();
-                reloadPhotosTag.prop('disabled', false);
-                selectLicenseTag.prop('disabled', false);
+                controlsDisabled(false);
             }
+        }).fail(function() {
+            controlsDisabled(false);
         });
     }
 
@@ -36,6 +46,8 @@ $(function() {
             $.post('/user', {show_license: showLicenseTag.val()}, function() {
                 showLicenseVal = showLicenseTag.val();
                 showLicense();
+            }).fail(function() {
+                showLicenseTag.val(showLicenseVal);
             });
         }
     }
@@ -47,6 +59,8 @@ $(function() {
             $.post('/user', {show_privacy: showPrivacyTag.val()}, function() {
                 showPrivacyVal = showPrivacyTag.val();
                 showPrivacy();
+            }).fail(function() {
+                showPrivacyTag.val(showPrivacyVal);
             });
         }
     }
@@ -58,12 +72,23 @@ $(function() {
             $.post('/user', {show_ignored: showIgnoredTag.val()}, function() {
                 showIgnoredVal = showIgnoredTag.val();
                 showIgnored();
+            }).fail(function() {
+                showIgnoredTag.val(showIgnoredVal);
             });
         }
     }
 
+    errorTag.dialog({autoOpen: false, modal: true});
+    $(document).ajaxError(function(event, request, settings, error) {
+        if (request.responseJSON && request.responseJSON.error) {
+            errorTag.text(request.responseJSON.error);
+        } else {
+            errorTag.empty().append($('<div>').text(request.status + ' ' + error), $('<iframe>', {style: 'height: 100%; width: 100%;', srcdoc: request.responseText}));
+        }
+        errorTag.dialog('open');
+    });
     reloadPhotosTag.click(function() {
-        photosTag.empty();
+        photosTag.empty().append('<div class="spinner">');
         selectLicenseTag.val('').change();
         reloadPhotos({reload: true});
     });

views/index.erb

@@ -1,26 +1,30 @@
+<div id="error" title="error"></div>
+
 <div>
-    <button id="reload_photos" type="button">reload photos</button>
-    <select id="show_license">
+    <button disabled id="reload_photos" type="button">reload photos</button>
+    <select disabled id="show_license">
         <% @show_licenses.each do |show_license| %>
             <option <% if show_license == @user.show_license %>selected <% end %>value="<%= show_license.id %>"><%= show_license.name %></option>
         <% end %>
     </select>
-    <select id="show_privacy">
+    <select disabled id="show_privacy">
         <% @show_privacies.each do |show_privacy, name| %>
             <option <% if show_privacy == @user.show_privacy %>selected <% end %>value="<%= show_privacy %>"><%= name %></option>
         <% end %>
     </select>
-    <select id="show_ignored">
+    <select disabled id="show_ignored">
         <% @show_ignoreds.each do |show_ignored, name| %>
             <option <% if show_ignored == @user.show_ignored %>selected <% end %>value="<%= show_ignored %>"><%= name %></option>
         <% end %>
     </select>
 </div>
 
-<div id="photos" grid style="height: 66vh; overflow-y: auto;"></div>
+<div id="photos" grid style="height: 66vh; overflow-y: auto;">
+    <div class="spinner"></div>
+</div>
 
 <div>
-    <select id="select_license">
+    <select disabled id="select_license">
         <option value="" selected>select license</option>
         <% @licenses.each do |license| %>
             <option value="<%= license.id %>"><%= license.name %></option>
@@ -34,4 +38,5 @@
 var licenses = <%= @licenses.to_json %>;
 </script>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
 <script src="/js/app.js"></script>

views/layout.erb

@@ -10,6 +10,8 @@
         <title>flickr license</title>
 
         <link rel="stylesheet" href="https://cdn.concisecss.com/v4.1/concise.min.css">
+        <link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/v0.2/concise-ui.min.css">
+        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css">
     </head>
     <body>
         <header container>