benutze Popup mit Ladebalken und Fehlermeldungen beim Login

2 files changed, 62 insertions, 41 deletions

diff --git a/index.html b/index.html
index 90d6b61..eaa573a 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,9 @@
                 </div>
                 <div role="main" class="ui-content">
                     <a id='lnklogin' href='#loginpopup' data-rel="popup" data-role="button" data-position-to="window" data-inline="true" style="display:none;"></a>
-                    <div data-role="popup" id="loginpopup" data-theme="a">
-                        <form style="padding:10px 20px;">
+
+                    <div data-role="popup" id="loginpopup" data-theme="a" data-dismissible>
+                        <form style="padding:10px 20px;" id="loginform" action="javascript:login()">
                             <h3>Bitte einloggen</h3>
                             <label for="username" class="ui-hidden-accessible">Benutzername</label>
                             <input type="text" id="username" hint="Benutzername" autofocus required>
@@ -43,6 +44,21 @@
                             <input type="password" id="password" hint="Passwort" required>
                             <button type="submit">Einloggen</button>
                         </form>
+
+                        <div>
+                            <div id="loader" style="display:none;">
+                                <input name="slider" id="slider" data-highlight="true" min="0" max="100" value="50" type="range">
+                            </div>
+                        </div>
+
+                        <div class="ui-bar ui-bar-a ui-corner-all" style="display:none;" id="error_noconn">
+                            <center>Etwas ist schiefgelaufen.</center>
+                            <center>Versuche es in Kürze noch einmal.</center>
+                        </div>
+                        <div class="ui-bar ui-bar-a ui-corner-all" style="display:none;" id="error_passwd">
+                            <center>Deine Benutzerdaten stimmen nicht.</center>
+                            <center>Bitte versuche es erneut.</center>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/js/index.js b/js/index.js
index 8649175..140c585 100644
--- a/js/index.js
+++ b/js/index.js
@@ -16,6 +16,20 @@
  *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+// Login-Popup beim Start
+$('#loginpage').on('pagebeforeshow', function loginform(){
+    setTimeout(function(){
+        $('#lnklogin').click();
+    }, 500);
+});
+
+// einen Slider zu einem Ladebalken umstylen
+$(document).on('pageinit', function(){
+    $('#loader').parent().find('input').hide();
+    $('#loader').parent().find('.ui-slider-track').css('margin', '0 15px 0 15px');
+    $('#loader').parent().find('.ui-slider-handle').hide();
+});
+
 var page_html = '\n\
 <div data-role="page" class="page" id="page-vplan-{ID}" data-prefetch>\n\
     <div data-role="header">\n\
@@ -71,7 +85,9 @@ function render_pdf(viewerstr){
 }
 
 function fail(text){
-    alert("Etwas ist schiefgelaufen: " + text.toString());
+    $('#error_noconn').show("fast");
+    $('#loader').hide("slow");
+    console.log("Fehler: " + text.toString());
 }
 
 function download_pdf(link, id){
@@ -96,6 +112,7 @@ function download_pdf(link, id){
                                 $('#pdf-' + id).attr('data-plan-url', theFile.toURL());
 
                                 if(location.href.indexOf("page-") == -1){
+                                    $('#loader').hide("fast");
                                     $.mobile.changePage("#page-vplan-" + id);
                                 }
                             },
@@ -124,9 +141,7 @@ function get_plan(link, id){
         download_pdf(pdflink, id);
     });
 
-    request.fail(function(jqXHR, textStatus){
-        alert("Etwas ist schiefgelaufen: " + textStatus);
-    });
+    request.fail(fail);
 }
 
 function get_overview(link){
@@ -141,14 +156,14 @@ function get_overview(link){
 
         // Pages für Vertretungsplände erstellen und pageshow-Events festlegen
         
-        var resultl = result.match(plans_re).length;
+        var resultarr = result.match(plans_re);
 
-        if(resultl == 0){
-            //$.mobile.changePage("#loginpopup", {rel: "dialog", position-to: 'window', inline: 'true'});
-            $("#loginform").removeClass('ui-disabled');
-            return;
+        if(resultarr == null){
+            //TODO
         }
 
+        var resultl = resultarr.length;
+
         for(j = 0; j < resultl; j++){
             new_html = page_html.replace(/{ID}/g, j);
             
@@ -185,43 +200,33 @@ function get_overview(link){
         console.log('Übersichts-Request erfolgreich');
     });
 
-    request.fail(function(jqXHR, textStatus){
-        alert("Etwas ist schiefgelaufen: " + textStatus);
-    });
+    request.fail(fail);
 }
 
-$(document).on("pageinit", function login(){
-    $('#lnklogin').click();
-    $('#loginpopup').on("popupafterclose", function(event){
-        $.mobile.loading("show", {
-            text: "Lade...",
-            textVisible: true,
-            theme: "b",
-        });
-
-        var username = encodeURIComponent($("#username").val());
-        var password = encodeURIComponent($("#password").val());
-        var params = "username=" + username + "&password=" + password;
+function login(){
+    var username = encodeURIComponent($("#username").val());
+    var password = encodeURIComponent($("#password").val());
+    var params = "username=" + username + "&password=" + password;
 
-        var request = $.ajax({
-            type: "POST",
-            url: "https://***REMOVED***/moodle/login/index.php",
-            data: {username: username, password: password}
-        });
-        request.done(function(result){
-            var vertretungs_re = new RegExp("title=\"Vertretungsplan\" href=\"(http://***REMOVED***\\.de/moodle/course/view\\.php\\?id=\\d+)");
-            var link = vertretungs_re.exec(result)[1];
+    var request = $.ajax({
+        type: "POST",
+        url: "https://***REMOVED***/moodle/login/index.php",
+        data: {username: username, password: password}
+    });
+    
+    $('#loader').show("fast");
 
-            console.log('Login-Request erfolgreich: ' + link);
+    request.done(function(result){
+        var vertretungs_re = new RegExp("title=\"Vertretungsplan\" href=\"(http://***REMOVED***\\.de/moodle/course/view\\.php\\?id=\\d+)");
+        var link = vertretungs_re.exec(result)[1];
 
-            get_overview(link);
-        });
+        console.log('Login-Request erfolgreich: ' + link);
 
-        request.fail(function(jqXHR, textStatus){
-            alert("Etwas ist schiefgelaufen: " + textStatus);
-        });
+        get_overview(link);
     });
-});
+
+    request.fail(fail);
+}
 
 var app = {
     // Application Constructor