Bug 19744: Move template JavaScript to the footer: Offline circulation
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / offline_circ / process_koc.tt
index 0aae78b..f6c7acf 100644 (file)
@@ -1,39 +1,9 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Circulation &rsaquo; Offline circulation file upload</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% INCLUDE 'file-upload.inc' %]
-<script type="text/javascript" src="[% themelang %]/js/background-job-progressbar.js"></script>
-<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:200px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
-</style>
 </head>
+
 <body id="ocirc_process_koc" class="circ ocirc">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'circ-search.inc' %]
@@ -60,23 +30,32 @@ function CheckForm(f) {
        [% IF ( message.payment ) %]<p>Accepted payment ([% message.amount %]) from <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% message.borrowernumber %]">[% message.firstname %] [% message.surname %]</a> ([% message.cardnumber %]): [% message.datetime %]</p>[% END %]
   [% END %]
 [% ELSE %]
-  <h2>Upload offline circulation data</h2>
+   <h2>Upload offline circulation data</h2>
+
    <div id="fileuploadform">
-     <form method="post" action="[% SCRIPT_NAME %]" enctype="multipart/form-data">
+     <form method="post" action="/cgi-bin/koha/offline_circ/process_koc.pl" enctype="multipart/form-data" class="validated">
                <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>
+            <input class="required" required="required" type="file" id="fileToUpload" size="50" name="fileToUpload" />
+            <span class="required">Required</span>
+       </li></ol>
+       <fieldset class="action"><input type="button" class="submit" value="Upload file" id="upload_file" /></fieldset>
           </fieldset>
      </form>
-     <div id="fileuploadstatus" style="display:none">Upload progress: <div id="fileuploadprogress"></div> <span id="fileuploadpercent">0</span>%</div>
+     <div id="fileuploadstatus" class="progress_panel" style="display:none">Upload progress: <progress id="fileuploadprogress" max="100" value="0"></progress> <span class="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">
+
+   <form action="enqueue_koc.pl" id="processfile" method="post" enctype="multipart/form-data">
+     <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
+     <input type="submit" value="Add to offline circulation queue" id="queueformsubmit" />
+   </form>
+
+   <form action="process_koc.pl" id="enqueuefile" 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" />
+     <input type="submit" value="Apply directly" 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>
@@ -84,4 +63,71 @@ function CheckForm(f) {
 
 
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/background-job-progressbar.js"></script>
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/file-upload.js"></script>
+    <script type="text/javascript">
+        var xhr;
+        $(document).ready(function(){
+            $("#enqueuefile").hide();
+            $("#processfile").hide();
+            $("#upload_file").on("click",function(){
+                StartUpload();
+            });
+            $("#queueformsubmit").on("click",function(){
+                var processfile = document.getElementById("processfile");
+                return CheckForm( processfile );
+            });
+            $("#mainformsubmit").on("click",function(){
+                var enqueuefile = document.getElementById("enqueuefile");
+                return CheckForm( enqueuefile );
+            });
+        });
+
+        function StartUpload() {
+            if( $('#fileToUpload').prop('files').length == 0 ) return;
+            $('#fileuploadform input.submit').prop('disabled',true);
+            $("#fileuploadfailed").hide();
+            $("#processfile").hide();
+            $("#fileuploadstatus").show();
+            $("form#processfile #uploadedfileid").val('');
+            $("form#enqueuefile #uploadedfileid").val('');
+            xhr= AjaxUpload( $('#fileToUpload'), $('#fileuploadprogress'), 'temp=1', cbUpload );
+        }
+
+        function cbUpload( status, fileid, errors ) {
+            if( status=='done' ) {
+                $("form#processfile #uploadedfileid").val( fileid );
+                $("form#enqueuefile #uploadedfileid").val( fileid );
+                $('#fileToUpload').prop('disabled',true);
+                $("#processfile").show();
+                $("#enqueuefile").show();
+            } else {
+                var errMsgs = [ _("Error code 0 not used"), _("File already exists"), _("Directory is not writeable"), _("Root directory for uploads not defined"), _("Temporary directory for uploads not defined") ];
+                var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
+                $("#fileuploadstatus").hide();
+                $("#fileuploadfailed").show();
+                $("#fileuploadfailed").text( _("Upload status: ") +
+                    ( status=='failed'? _("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
+                    ( status=='denied'? _("Denied"): status ))
+                );
+            }
+        }
+
+        function CheckForm(f) {
+            if (f.uploadedfileid.value == '') {
+                alert(_("Please upload a file first."));
+            } else {
+                $("#fileuploadstatus").hide();
+                $("#fileuploadform").slideUp();
+                $("#mainformsubmit").prop('disabled',true);
+                $("#queueformsubmit").prop('disabled',true);
+                return submitBackgroundJob(f);
+            }
+            return false;
+        }
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]