progress.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Imapsync online</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8. -->
  9. </head>
  10. <body>
  11. <h1>Imapsync online</h1>
  12. <input
  13. data-toggle="tooltip" data-placement="top" title="It is usually an email address or its left part before @"
  14. type="text" class="form-control input-lg" id="user1" name="user1" tabindex="1"
  15. placeholder="Enter source login name">
  16. <pre id="user2">
  17. </pre>
  18. <button type="button"
  19. onclick="imapsync('?lalala=zzz&host1=sss&user1=uuu&password1=uuu&host2=ttt&user2=uuu&password2=uuu&simulong=22&debugenv=on', handleRun)"
  20. >Run imapsync
  21. </button>
  22. <!--
  23. &debugcgi=on&debugenv=on
  24. -->
  25. <button type="button"
  26. onclick="abort( '?host1=&user1=&password1=&host2=&user2=&password2=&abort=on' )"
  27. >Abort imapsync
  28. </button>
  29. <h2>Console of imapsync run</h2>
  30. <pre id="console">
  31. </pre>
  32. <h2>Console of abort</h2>
  33. <pre id="abort">
  34. </pre>
  35. <h2>Log of imapsync run</h2>
  36. <pre id="output" >
  37. </pre>
  38. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  39. <script>
  40. $("#user2").text("toto");
  41. $("#user1").val("RRRR");
  42. var readyStateStr = {
  43. 0: "Request not initialized",
  44. 1: "Server connection established",
  45. 2: "Response headers received",
  46. 3: "Processing request",
  47. 4: "Finished and response is ready"
  48. } ;
  49. function imapsync( querystring, cFunction ) {
  50. var xhr ;
  51. xhr = new XMLHttpRequest( ) ;
  52. var timerRefreshLog = setInterval( function() { refreshLog( xhr ) }, 3000 ) ;
  53. xhr.onreadystatechange = function( ) {
  54. cFunction( this, timerRefreshLog ) ;
  55. } ;
  56. xhr.open( "GET", "/cgi-bin/imapsync" + querystring, true ) ;
  57. xhr.send( ) ;
  58. }
  59. function handleRun( xhr, timerRefreshLog ) {
  60. $( "#console" ).text( "Status: " + xhr.status + " " + xhr.statusText + ".\n"
  61. + "State: " + readyStateStr[ xhr.readyState ] + "\n" ) ;
  62. if ( xhr.status == 200 && xhr.readyState == 4 ) {
  63. var headers = xhr.getAllResponseHeaders( ) ;
  64. $( "#console" ).append( "\n" + headers + "\n" ) ;
  65. clearInterval( timerRefreshLog ) ;
  66. refreshLog( xhr ) ; // a last time
  67. }
  68. }
  69. function refreshLog( xhr ) {
  70. $( "#output" ).html( xhr.responseText ) ;
  71. }
  72. function abort( querystring ) {
  73. var xhr ;
  74. xhr = new XMLHttpRequest( ) ;
  75. xhr.onreadystatechange = function( ) {
  76. handleAbort( this ) ;
  77. } ;
  78. xhr.open( "GET", "/cgi-bin/imapsync" + querystring, true ) ;
  79. xhr.send( ) ;
  80. }
  81. function handleAbort( xhr ) {
  82. $( "#abort" ).text( "Status: " + xhr.status + " " + xhr.statusText + ".\n"
  83. + "State: " + readyStateStr[ xhr.readyState ] + "\n" ) ;
  84. if ( xhr.status == 200 && xhr.readyState == 4 ) {
  85. var headers = xhr.getAllResponseHeaders( ) ;
  86. $( "#abort" ).append( "\n" + headers + "\n" ) ;
  87. $( "#abort" ).append( xhr.responseText ) ;
  88. }
  89. }
  90. </script>
  91. </body>
  92. </html>