Adding error handling to not finding plex libraries

src/main/resources/static/js/plex_libraries.js

@@ -47,8 +47,24 @@ function setPreloaderVisibility(bool) {
     $("#progressBar").toggle(bool);
 }
 
+function setSearchEnabled(bool) {
+    if(bool) {
+        $("#search").css("waves-effect waves-light btn");
+    } else {
+        $("#search").css("waves-effect waves-light btn disabled");
+    }
+}
+
+function clearLibrariesAndErrors() {
+    $("#libraryException").html('');
+    $("#libraryCheckboxes").html('');
+}
+
 function getLibraries() {
 
+    setSearchEnabled(false);
+    clearLibrariesAndErrors();
+
     let obj = JSON.parse(document.cookie);
     let token = obj.plex_token;
     let port = obj.port;
@@ -73,7 +89,12 @@ function getLibraries() {
         success: function (data) {
             allLibraries = data;
             setPreloaderVisibility(false);
+            setSearchEnabled(true);
             generateLibrariesCheckbox(data);
+        }, error: function (data) {
+            setPreloaderVisibility(false);
+            setSearchEnabled(false);
+            setErrorMessage();
         }
     });
 }
@@ -85,6 +106,10 @@ function encodeQueryData(data) {
     return ret.join('&');
 }
 
+function setErrorMessage() {
+    $('#libraryCheckboxes').html('<p>Something went wrong. Please make sure your connection to Plex is correct. You can navigate back in the title bar and retry. Check the browser and Docker logs for more information.</p>');
+}
+
 function generateLibrariesCheckbox() {
     let obj = JSON.parse(document.cookie);
     let selectedLibraries = obj.libraries || [];

src/main/resources/static/plex_libraries.html

@@ -62,12 +62,14 @@
 
                 <div id="libraryCheckboxes" class="grey-text text-lighten-4"></div>
 
+                <div id="libraryException" class="div class='row' grey-text text-lighten-4"></div>
+
                 <div class="row">
                     <div class="col s1">
                         <a class="waves-effect waves-light btn white teal-text" id="back">Back</a>
                     </div>
                     <div class="col s1">
-                        <a class="waves-effect waves-light btn" id="search">Search</a>
+                        <a class="waves-effect waves-light btn disabled" id="search">Search</a>
                     </div>
                 </div>