[Koha-patches] [PATCH] Adding progress bar and some other visual enhancements to file upload interactions.
Galen Charlton
galen.charlton at liblime.com
Wed Oct 1 19:19:28 CEST 2008
Hi Owen,
I've pushed this patch and the one for manage-marc-import, but I
noticed a glitch: when uploading a large file or processing a large
job, 95% progress (for example) is displayed with only three quarters
of the progress bar filled.
Regards,
Galen
On Mon, Sep 29, 2008 at 7:00 PM, Owen Leonard <oleonard at myacpl.org> wrote:
> ---
> .../intranet-tmpl/prog/en/css/staff-global.css | 10 +---
> .../prog/en/includes/background-job.inc | 6 ++-
> .../intranet-tmpl/prog/en/includes/file-upload.inc | 9 +++-
> .../prog/en/modules/offline_circ/process_koc.tmpl | 40 ++++++++++++----
> .../prog/en/modules/tools/stage-marc-import.tmpl | 49 ++++++++++++-------
> koha-tmpl/intranet-tmpl/prog/img/progress.png | Bin 0 -> 224 bytes
> 6 files changed, 77 insertions(+), 37 deletions(-)
> 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 5532ca2..167ca81 100644
> --- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
> +++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
> @@ -1369,7 +1369,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;
> @@ -1386,11 +1386,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;
> @@ -1399,7 +1395,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 cfa9e94..28b76a6 100644
> --- a/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc
> +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/background-job.inc
> @@ -15,7 +15,10 @@
> if (json.job_status == 'completed') {
> percentage = 100;
> }
> - $("#jobprogress").text(percentage);
> + var bgproperty = (parseInt(percentage)-300)+"px 0px";
> + $("#jobprogress").css("background-position",bgproperty);
> + $("#jobprogresspercent").text(percentage);
> +
> if (percentage == 100) {
> clearInterval(backgroundJobProgressTimer); // just in case form submission fails
> completeJob();
> @@ -57,6 +60,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 cd18f0b..8dd2c47 100644
> --- a/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc
> +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/file-upload.inc
> @@ -14,7 +14,9 @@
> inFileUploadProgressTimer = true;
> $.getJSON("/cgi-bin/koha/tools/upload-file-progress.pl", function(json) {
> if (!fileUploadProgressTimerCanceled) {
> - $("#fileuploadprogress").text(json.progress);
> + var bgproperty = (parseInt(json.progress)-300)+"px 0px";
> + $("#fileuploadprogress").css("background-position",bgproperty);
> + $("#fileuploadpercent").text(json.progress);
> }
> inFileUploadProgressTimer = false;
> });
> @@ -22,6 +24,7 @@
> function ajaxFileUpload()
> {
> fileUploadProgressTimerCanceled = false;
> + $("#uploadpanel").show();
> $("#fileuploadstatus").show();
> fileUploadProgressTimer = setInterval("updateProgress()",500);
> $.ajaxFileUpload (
> @@ -46,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
> index 0b233af..4c1d2ea 100644
> --- 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
> @@ -5,11 +5,23 @@
> <!-- 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;
> @@ -17,6 +29,10 @@ function CheckForm(f) {
>
> //]]>
> </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" -->
> @@ -24,6 +40,10 @@ function CheckForm(f) {
>
> <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a> › 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>
> @@ -34,23 +54,25 @@ function CheckForm(f) {
> <h2>Upload Offline Circulation Data</h2>
> <div id="fileuploadform">
> <form method="post" action="<!-- TMPL_VAR name="SCRIPT_NAME" -->" enctype="multipart/form-data">
> - <label for="fileToUpload">Choose .koc File: </label>
> - <input type="file" id="fileToUpload" name="fileToUpload" /><br />
> - <button class="input" onclick="return ajaxFileUpload();">Upload file</button>
> + <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: <span id="fileuploadprogress">0</span>%</div>
> + <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" method="post" enctype="multipart/form-data">
> + <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: <span id="jobprogress">0</span>%</div>
> + <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 -->
>
>
> -</body>
> -</html>
> +</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 e2f4486..9a768f2 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> › <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> › Stage MARC Records For Import</div>
> +<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> › <!-- TMPL_IF name="uploadmarc" --><a href="/cgi-bin/koha/tools/stage-marc-import.pl">Stage MARC Records For Import</a> › 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="" />
> @@ -128,8 +139,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 at N?(olHy`uVBq!ia0y~yVAKJ!xj2}Cq^08I8$gOB-O<;Pfnog#bJnhxK)z&&
> zYeY$Kep*R+Vo at 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
>
> --
> 1.5.5.GIT
>
> _______________________________________________
> Koha-patches mailing list
> Koha-patches at lists.koha.org
> http://lists.koha.org/mailman/listinfo/koha-patches
>
--
Galen Charlton
VP, Research & Development, LibLime
galen.charlton at liblime.com
p: 1-888-564-2457 x709
skype: gmcharlt
More information about the Koha-patches
mailing list