From 8dfa2960ae0e67763cbaa2ba34b2f015954f0413 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 29 Sep 2008 19:00:20 -0500
Subject: [PATCH] Adding progress bar and some other visual enhancements to
 file upload interactions.

Signed-off-by: Galen Charlton <galen.charlton@liblime.com>
Signed-off-by: Chris Cormack <chris@bigballofwax.co.nz>
---
 .../prog/en/css/staff-global.css              |  10 +--
 .../prog/en/includes/background-job.inc       |   1 +
 .../prog/en/includes/file-upload.inc          |   5 +-
 .../en/modules/offline_circ/process_koc.tmpl  |  78 ++++++++++++++++++
 .../en/modules/tools/stage-marc-import.tmpl   |  49 +++++++----
 koha-tmpl/intranet-tmpl/prog/img/progress.png | Bin 0 -> 224 bytes
 6 files changed, 117 insertions(+), 26 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tmpl
 create mode 100644 koha-tmpl/intranet-tmpl/prog/img/progress.png

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 40bcadb9cb..ff7d1a1c94 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -1400,7 +1400,7 @@ input[type=submit], input[type=button] {
 	color: #333333;
 }
 
-input.submit {
+input.submit,button.submit {
 	border: 1px solid #999999;
 	border-top-color: #666;
 	border-left-color: #666;
@@ -1417,11 +1417,7 @@ input[type=submit]:active, input[type=button]:active {
 	border : 1px inset #999999;
 }
 
-input.submit:active {
-	border : 1px inset #999999;
-}
-
-input[type=reset], input[type=button], input.submit {
+input[type=reset], input[type=button], input.submit, button.submit {
 	border: 1px outset #999999;
 	border-top-color: #666;
 	border-left-color: #666;
@@ -1430,7 +1426,7 @@ input[type=reset], input[type=button], input.submit {
 	color: #333333;
 }
 
-input[type=reset]:active, input[type=button]:active, input.submit:active {
+input[type=reset]:active, input[type=button]:active, input.submit:active, button.submit:active {
 	border : 1px inset #999999;
 }
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc
index 8272fe93a9..0e30e7a712 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc
@@ -59,6 +59,7 @@
             });
 
             // and submit the request
+			$("#jobpanel").show();
             $("#jobstatus").show();
             $.ajax({
                 data: inputs.join('&'),
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc
index a2f7328e27..271532dc08 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc
@@ -24,6 +24,7 @@
     function ajaxFileUpload()
     {
         fileUploadProgressTimerCanceled = false;
+		$("#uploadpanel").show();
         $("#fileuploadstatus").show();
         fileUploadProgressTimer = setInterval("updateProgress()",500);
         $.ajaxFileUpload (
@@ -48,7 +49,9 @@
                         $("#fileuploadfailed").text("Upload failed -- database in maintenance state");
                     } else {
                          $("#uploadedfileid").val(data.fileid);
-                         $("#fileuploadprogress").text("100");
+                         $("#fileuploadprogress").css("background-position","0px 0px");
+						 $("#processfile").show();
+                        $("#fileuploadpercent").text("100");
                     }
                     fileUploadProgressTimerCanceled = true;
                     clearInterval(fileUploadProgressTimer);
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tmpl b/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tmpl
new file mode 100644
index 0000000000..4c1d2ea6b4
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tmpl
@@ -0,0 +1,78 @@
+<!-- TMPL_INCLUDE NAME="doc-head-open.inc" -->
+<title>Koha &rsaquo; Circulation &rsaquo; Offline Circulation File Upload</title>
+<!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
+<!-- TMPL_INCLUDE NAME="file-upload.inc" -->
+<!-- TMPL_INCLUDE NAME="background-job.inc" -->
+<script type="text/javascript">
+//<![CDATA[
+$(document).ready(function(){
+	$("#processfile").hide();
+});
+function CheckUpload(f){
+	if(f.fileToUpload.value == ""){
+		alert("Please choose a file to upload");
+	} else {
+		return ajaxFileUpload()
+	}
+		return false;
+}
+function CheckForm(f) {
+    if (f.uploadedfileid.value == '') {
+        alert('Please upload a file first.');
+    } else {
+		$("#fileuploadstatus").hide();
+		$("#fileuploadform").slideUp();
+        return submitBackgroundJob(f);
+    }
+    return false;
+}
+
+//]]>
+</script>
+<style type="text/css">
+	#fileuploadstatus,#jobstatus { margin:.4em; }
+	#fileuploadprogress,#jobprogress{ width:150px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
+</style>
+</head>
+<body>
+<!-- TMPL_INCLUDE NAME="header.inc" -->
+<!-- TMPL_INCLUDE NAME="circ-search.inc" -->
+
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a> &rsaquo; Offline Circulation File Upload</div>
+
+<div id="doc" class="yui-t7">
+   
+   <div id="bd">
+
+<!-- TMPL_IF NAME="transactions_loaded" -->
+  <h2>Koha Offline Circulation</h2>
+  <p>Your data was processed. Here are the results.</p>
+  <!-- TMPL_LOOP NAME="messages" -->
+    <p><!-- TMPL_VAR NAME="message" --></p>
+  <!-- /TMPL_LOOP -->
+<!-- TMPL_ELSE -->
+  <h2>Upload Offline Circulation Data</h2>
+   <div id="fileuploadform">
+     <form method="post" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" enctype="multipart/form-data">
+		<fieldset class="brief">
+       <ol><li><label for="fileToUpload">Choose .koc File: </label>
+       <input type="file" id="fileToUpload" size="50" name="fileToUpload" /></li></ol>
+	   <fieldset class="action"><input type="button" class="submit" value="Upload file" onclick="CheckUpload(this.form);" /></fieldset>
+	   </fieldset>
+     </form>
+     <div id="fileuploadstatus" style="display:none">Upload progress: <div id="fileuploadprogress"></div> <span id="fileuploadpercent">0</span>%</div>
+     <div id="fileuploadfailed" style="display:none"></div>
+   </div>
+   <form action="process_koc.pl" id="processfile" method="post" enctype="multipart/form-data">
+     <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
+     <input type="hidden" name="runinbackground" id="runinbackground" value="" />
+     <input type="hidden" name="completedJobID" id="completedJobID" value="" />
+     <input type="submit" value="Process offline circulation file" onclick="return CheckForm(this.form);" id="mainformsubmit" />
+     <div id="jobstatus" style="display:none">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+     <div id="jobfailed" style="display:none"></div>
+   </form>
+<!-- /TMPL_IF -->
+
+
+</div>
+<!-- TMPL_INCLUDE NAME="intranet-bottom.inc" -->
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tmpl b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tmpl
index e47a12e86f..f69237e9af 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tmpl
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tmpl
@@ -3,11 +3,20 @@
 <!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
 <!-- TMPL_INCLUDE NAME="file-upload.inc" -->
 <!-- TMPL_INCLUDE NAME="background-job.inc" -->
+<style type="text/css">
+	#uploadpanel,#fileuploadstatus,#fileuploadfailed,#jobpanel,#jobstatus,#jobfailed { display : none; }
+	#fileuploadstatus,#jobstatus { margin:.4em; }
+	#fileuploadprogress,#jobprogress{ width:150px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }</style>
 <script type="text/javascript">
 //<![CDATA[
-
+$(document).ready(function(){
+	$("#processfile").hide();
+	$("#uploadfile").submit(function(){
+		alert("Hey!");
+	});
+});
 function CheckForm(f) {
-    if (f.uploadedfileid.value == '') {
+    if ($("#fileToUpload").value == '') {
         alert('Please upload a file first.');
     } else {
         return submitBackgroundJob(f);
@@ -22,7 +31,7 @@ function CheckForm(f) {
 <!-- TMPL_INCLUDE NAME="header.inc" -->
 <!-- TMPL_INCLUDE NAME="cat-search.inc" -->
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; Stage MARC Records For Import</div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; <!-- TMPL_IF name="uploadmarc" --><a href="/cgi-bin/koha/tools/stage-marc-import.pl">Stage MARC Records For Import</a> &rsaquo; Upload Results<!-- TMPL_ELSE -->Stage MARC Records For Import<!-- /TMPL_IF --></div>
 
 <div id="doc3" class="yui-t2">
    
@@ -31,7 +40,6 @@ function CheckForm(f) {
 	<div class="yui-b">
 
 <h1>Stage MARC Records For Import</h1>
-
 <!-- TMPL_IF name="uploadmarc" -->
 <p>MARC Staging results :</p>
 <ul>
@@ -60,21 +68,24 @@ function CheckForm(f) {
 	<li>Select a MARC file to stage in the import reservoir.  It will be parsed, and each valid record staged for later import into the catalog.</li>
 	<li>You can enter a name for this import. It may be useful, when creating a biblio, to remember where the suggested MARC data comes from!</li>
 </ul>
-<fieldset class="rows">
-<legend>Stage records into the reservoir</legend><ol>
+<form method="post" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" id="uploadfile" enctype="multipart/form-data">
+<fieldset class="rows" id="uploadform">
+<legend>Stage records into the reservoir</legend>
+<ol>
 	<li>
         <div id="fileuploadform">
-        <form method="post" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" enctype="multipart/form-data">
 		<label for="fileToUpload">Select the file to stage: </label>
-		<input type="file" id="fileToUpload" name="fileToUpload" /><br />
-        <button class="input" onclick="return ajaxFileUpload();">Upload file</button>
-		</form>
-        <div id="fileuploadstatus" style="display:none">Upload progress: <span id="fileuploadprogress">0</span>%</div>
-        <div id="fileuploadfailed" style="display:none"></div>
-        </div>
-	</li>
-</ol></fieldset>
-    <form method="post" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" enctype="multipart/form-data">
+		<input type="file" id="fileToUpload" name="fileToUpload" />
+        </div>	</li>
+</ol>
+        <fieldset class="action"><button class="submit" onclick="return ajaxFileUpload();">Upload file</button></fieldset>
+</fieldset>
+		
+        <div id="uploadpanel"><div id="fileuploadstatus">Upload progress: <div id="fileuploadprogress"></div> <span id="fileuploadpercent">0</span>%</div>
+        <div id="fileuploadfailed"></div></div>
+</form>
+
+    <form method="post" id="processfile" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" enctype="multipart/form-data">
 <fieldset class="rows">
         <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
         <input type="hidden" name="runinbackground" id="runinbackground" value="" />
@@ -132,8 +143,10 @@ function CheckForm(f) {
     </ol>
   </fieldset>
   <fieldset class="action"><input type="button" id="mainformsubmit" onclick="return CheckForm(this.form);" value="Stage for import" /></fieldset>
-  <div id="jobstatus" style="display:none">Job progress: <span id="jobprogress">0</span>%</div>
-  <div id="jobfailed" style="display:none"></div>
+ 
+       <div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+     <div id="jobfailed"></div></div>
+  
 </form>
 <!-- /TMPL_IF -->
 
diff --git a/koha-tmpl/intranet-tmpl/prog/img/progress.png b/koha-tmpl/intranet-tmpl/prog/img/progress.png
new file mode 100644
index 0000000000000000000000000000000000000000..965bd1afbc673a469d4a2372485500f26f96ca59
GIT binary patch
literal 224
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!xj2}Cq^08I8$gOB-O<;Pfnog#bJnhxK)z&&
zYeY$Kep*R+Vo@rCV@iHfs)A>3VtQ&&YGO)d;mK4Rpdy|CpAgrQqc0g2KU(wfmqO=3
z(S9Whpm>z0i(^Q|t)zsMl$4|-Db-FzMy8HL6OImbMy3pt4IT>UR7c~?nKK&`r>JzX
ia4fi}pwNheGGHiNDLD0F&?aG^EexKnelF{r5}E+->OtWE

literal 0
HcmV?d00001

-- 
2.39.5