Downloading multiple text files to the device and showing transfer progress

Downloading multiple text files to the device and showing transfer progress

I have been tasked with creating what on paper seems a simple mobile application. Because of the portability, we have chosen the Intel XDK as our development tool utilising HTML5/JQuery.

Basically, the mobile app will have three options:

 1. Download data - stock, operators, accounts etc. 
 2. Process transactions - record items allocated to the end user and by whom.
 3. Upload transactions - pass transaction details back to Back Office
    system.

I have made a start on the first of the options, Download data, where a number of text files need to be copied to the device, read in turn and imported into a database for use with the second option.
 
My code below is an attempt to show 3 buttons on the first 'page'. The app swaps to another page on pressing the download data button, which shows some blurb and Yes/No buttons. On pressing Yes, the app swaps to a further page where I would like to show the progress of each file being downloaded.
  2. <!DOCTYPE html>
  3. <html>
  4. <!--
  5.   * Copyright © 2012-2015, Intel Corporation. All rights reserved.
  6.   * Please see the included LICENSE.md file for license terms and conditions.
  7.   -->
  8. <head>
  9.     <title>Gift of Kit</title>
  10.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">

  12. <!-- This is a blank template, include any desired javascript frameworks, libraries, CSS here and start developing your app  -->

  14.     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">

  16.     <style>
  17.         @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100%; zoom: 100% ; }
  18.         @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
  19.     </style>

  21. <!-- Recommended location for your JavaScript libraries -->
  22.     <script src="cordova.js" id="xdkJScordova_"></script>
  23.     <link rel="stylesheet" href="themes/giftofkit.css" />
  24.     <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
  25.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
  26.     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  27.     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  29.     <script src="js/main.js"></script>
  30.     <script>
  31.         $(document).ready(function() {
  32.         var bodyHeight = $("body").height();
  33.         var vwptHeight = $(window).height();
  34.         if (vwptHeight > bodyHeight) {
  35.             $("div.pgFooter").css("position","absolute").css("bottom",0);
  36.         }
  37.         });      

  39.     </script>

  41.     <script id="xdkJSonDeviceReady_">
  42.         function onDeviceReady() {                                          // ignored by "Standard HTML5 web app"
  43.             if( navigator.splashscreen && navigator.splashscreen.hide ) {   // Cordova hide splashscreen detected, use it
  44.                 navigator.splashscreen.hide() ;
  45.             }
  46.         }
  47.         document.addEventListener("deviceready", onDeviceReady, false) ;    // ignored by "Standard HTML5 web app"
  48.     </script>
  49.     <link rel="stylesheet" href="css/main.css" type="text/css">

  51. </head>
  52. <body>
  53.     <div data-role="page" id="pgMenu" class="pgMenu">
  54.         <div data-role="header" id="pgMenuHeader" class="pgHeader">
  55.             <b>Gift of Kit</b>
  56.         </div>

  58.         <div data-role="main" class="pgContent">
  59.             <div data-role="controlgroup" data-type="vertical">
  60.                 <a href="#pgDownload" class="ui-btn ui-corner-all ui-shadow" data-transition="flip">Download Data</a>
  61.                 <a href="#pgProcess" class="ui-btn ui-corner-all ui-shadow" data-transition="flip">Process Transactions</a>
  62.                 <a href="#pgUpload" class="ui-btn ui-corner-all ui-shadow" data-transition="flip">Upload Transactions</a>
  63.             </div>
  64.         </div>

  66.         <div data-role="footer" id="pgMenuFooter" class="pgFooter">
  67.             <img src="images/blank.png" class="logo" alt="Medoc Computers" /><b class="pgFooter">&copy; Medoc Computers</b>
  68.         </div>
  69.     </div> 
  70.     <div data-role="page" id="pgDownload">
  71.         <div data-role="header" id="pgDownloadHeader" class="pgHeader">
  72.             <b>Gift of Kit</b>
  73.         </div>

  75.         <div data-role="main" class="pgContent">
  76.             <p>You are about to download multiple files to this device and refresh the database.</p>
  77.             <p>Please confirm you wish to continue.</p>
  78.             <div data-role="controlgroup" data-type="horizontal">
  79.                 <a href="#pgImport" class="ui-btn ui-corner-all ui-shadow" data-transition="flip" id="btnYes">Yes</a>
  80.                 <a href="#" class="ui-btn ui-corner-all ui-shadow" data-rel="back">No</a>
  81.             </div>
  82.         </div>

  84.         <div data-role="footer" id="pgDownloadFooter" class="pgFooter">
  85.             <img src="images/blank.png" class="logo" alt="Medoc Computers" /><b class="pgFooter">&copy; Medoc Computers</b>
  86.         </div>
  87.     </div> 
  88.     <div data-role="page" id="pgImport">
  89.         <div data-role="header" id="pgImportHeader" class="pgHeader">
  90.             <b>Gift of Kit</b>
  91.         </div>

  93.         <div data-role="main" class="pgContent">
  94.             <progress value="0" min="0" max="100" id="progress"></progress>
  95.             <div id="size"></div>
  96.             <div id="downloaded"></div>
  97.             
  98.             <a href="#pgMenu" class="ui-btn ui-corner-all ui-shadow" data-transition="flip">Go Back</a>
  99.         </div>

  101.         <div data-role="footer" id="pgImportFooter" class="pgFooter">
  102.             <img src="images/blank.png" class="logo" alt="Medoc Computers" /><b class="pgFooter">&copy; Medoc Computers</b>
  103.         </div>
  104.     </div> 
  105.     <div data-role="page" id="pgProcess">
  106.         <div data-role="header" id="pgProcessHeader" class="pgHeader">
  107.             <b>Gift of Kit</b>
  108.         </div>

  110.         <div data-role="main" class="pgContent">
  111.             <a href="#" class="ui-btn ui-corner-all ui-shadow" data-rel="back">Go Back</a>
  112.         </div>

  114.         <div data-role="footer" id="pgProcessFooter" class="pgFooter">
  115.             <img src="images/blank.png" class="logo" alt="Medoc Computers" /><b class="pgFooter">&copy; Medoc Computers</b>
  116.         </div>
  117.     </div> 
  118.     <div data-role="page" id="pgUpload">
  119.         <div data-role="header" id="pgUploadHeader" class="pgHeader">
  120.             <b>Gift of Kit</b>
  121.         </div>

  123.         <div data-role="main" class="pgContent">
  124.             <p id="temp"></p>
  125.             <a href="#" class="ui-btn ui-corner-all ui-shadow" data-rel="back">Go Back</a>
  126.         </div>

  128.         <div data-role="footer" id="pgUploadFooter" class="pgFooter">
  129.             <img src="images/blank.png" class="logo" alt="Medoc Computers" /><b class="pgFooter">&copy; Medoc Computers</b>
  130.         </div>
  131.     </div> 
  132.     <script>
  133.         $( "#pgImport" ).focus(function( event ) {
  134.             var file1State = downloadFile("S\zcaug13");
  135.             var file2State = downloadFile("S\safc_2feb");
  136.             var file3State = downloadFile("S\sales_query.sql");
  137.        
  138.             if ( file1State == 0 || file2State == 0 || file3State == 0 ) {
  139.                 alert("Downloading Cancelled");
  140.             } else if ( file1State == 1 || file2State == 1 || file3State == 1 ) {
  141.                 alert("Downloading Failed");
  142.             } else {
  143.                 alert("Downloading Successful");
  144.             }
  145.         
  146.         });
  147.         
  148.         function downloadFile(fn) {
  149.             var fileName = fn;
  150.             var xhr = new XMLHttpRequest();
  151.             var stat;
  152.         
  153.             xhr.addEventListener("progress", updateProgress, false);
  154.             xhr.addEventListener("load", transferComplete, false);
  155.             xhr.addEventListener("error", transferFailed, false);
  156.             xhr.addEventListener("abort", transferCanceled, false);

  158.             xhr.open("GET", fileName);
  159.         
  160.             function updateProgress(oEvent) 
  161.             {
  162.                 if (oEvent.lengthComputable) 
  163.                 {
  164.                     var percentComplete = (oEvent.loaded / oEvent.total) * 100;            
  165.                     document.getElementById("progress").setAttribute("value", percentComplete);//just a random value
  166.                     document.getElementById("size").innerHTML = oEvent.total;
  167.                     document.getElementById("downloaded").innerHTML = oEvent.loaded; 
  168.                 }    
  169.                 else 
  170.                 {
  171.                     document.getElementById("progress").setAttribute("value", 30);//just a random value
  172.                     document.getElementById("size").innerHTML = "unknown";
  173.                     document.getElementById("downloaded").innerHTML = "unknown"; 
  174.                 }
  175.             }
  176.         
  177.             function transferComplete(oEvent)
  178.             {
  179.                 return 2;
  180.             }
  181.         
  182.             function transferFailed(oEvent)
  183.             {
  184.                 return 1;
  185.             }
  186.         
  187.             function transferCanceled(oEvent)
  188.             {
  189.                 return 0;
  190.             }
  191.         
  192.             xhr.send();
  193.         }
  194.     </script>
  195. </body>
  196. </html>

However my knowledge of HTML5/JQuery is not good and I have already hit my first hurdle.

The file download is happening before the progress page is displayed.

I have a couple of questions:

 1. How do I make the file download happen after the progress page as been displayed?
 2. How do I make it show progress for each file in turn?

Any help greatly appreciated.