implementiere die Anzeige des Vertretungsplans

2 files changed, 32 insertions, 41 deletions

diff --git a/index.html b/index.html
index 8f41c48..83a25a8 100644
--- a/index.html
+++ b/index.html
@@ -42,22 +42,8 @@
                     </form>
                 </div>
             </div>
-
-            <div data-role="page" class="page" id="overview" data-prefetch>
-                <div data-role="header">
-                    <h1>WvS VPlan | Vertretungen</h1>
-                </div>
-                <div role="main" class="ui-content">
-                    hier stehen die Vertretungen
-                    <div id="output">
-                    </div>
-                    <div display:none>
-                        <iframe id="input"></iframe>
-                        <iframe id="processor" src="js/pdf.js"></iframe>
-                    </div>
-                </div>
-            </div>
         </div>
+
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         <script type="text/javascript">
diff --git a/js/index.js b/js/index.js
index b9c7242..f07f600 100644
--- a/js/index.js
+++ b/js/index.js
@@ -16,36 +16,43 @@
  *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-function show_pdf(url){
-    $('#input').attr('src', url);
+var page_html = '\
+<div data-role="page" class="page" id="page-{ID}" data-prefetch>\
+    <div data-role="header">\
+        <h1>WvS VPlan | Vertretungen</h1>\
+    </div>\
+    <div role="main" class="ui-content">\
+        <canvas id="canvas-{ID}" style="border:1px solid black;"/>\
+    </div>\
+</div>\
+';
 
-    console.log("Download fertig, parse PDF");
+function show_pdf(url, filename){
+    name = encodeURIComponent(filename.replace(".pdf", ""));
 
-    var input = document.getElementById("input");
-    var processor = document.getElementById("processor");
-    var output = document.getElementById("output");
+    console.log("Download fertig, zeige PDF " + name);
 
-    window.addEventListener("message", function(event){
-        if(event.source != processor.contentWindow) return;
+    $("#loginpage").after(page_html.replace(/{ID}/g, name));
+    location.href = "#page-" + name;
 
-        switch(event.data){
-            case "ready":
-                var xhr = new XMLHttpRequest;
-                xhr.open("GET", input.getAttribute("src"), true);
-                xhr.responseType = "arraybuffer";
+    PDFJS.getDocument(url).then(function(pdf){
+        pdf.getPage(1).then(function(page){
+            var scale = 1.5;
+            var viewport = page.getViewport(scale);
+            var canvas = document.getElementById("canvas-" + name);
+            var context = canvas.getContext('2d');
 
-                xhr.onload = function(event){
-                    processor.contentWindow.postMessage(this.response, "*");
-                };
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
 
-                xhr.send();
-                break;
+            var renderContext = {
+                canvasContext: context,
+                viewport: viewport
+            };
 
-            default:
-                output.textContent = event.data.replace(/\s+/g, " ");
-                break;
-        }
-    }, true);
+            page.render(renderContext);
+        });
+    });
 }
 
 function fail(text){
@@ -71,7 +78,7 @@ function download_pdf(link){
                             sPath,
                             function(theFile){
                                 console.log("Download fertig: " + theFile.toURL());
-                                show_pdf(theFile.toURL());
+                                show_pdf(theFile.toURL(), filename);
                             },
                             function(error){
                                 console.log("Fehler: " + error.source + " - "+ error.target + " - " + error.code);
@@ -119,8 +126,6 @@ function get_overview(link){
         }
 
         console.log('Übersichts-Request erfolgreich');
-
-        location.href = '#overview';
     });
 
     request.fail(function(jqXHR, textStatus){