Bug 23019: (follow-up) Fix usability issues
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / upload-images.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% SET footerjs = 1 %]
4 [% INCLUDE 'doc-head-open.inc' %]
5 <title>Koha &rsaquo; Tools &rsaquo; Upload images</title>
6 [% INCLUDE 'doc-head-close.inc' %]
7 <style>
8     #fileuploadstatus,#fileuploadfailed,#jobpanel,#jobstatus,#jobfailed { display : none; }
9 </style>
10 </head>
11
12 <body id="tools_upload-images" class="tools">
13 [% INCLUDE 'header.inc' %]
14 [% INCLUDE 'cat-search.inc' %]
15
16 <div id="breadcrumbs">
17     <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
18     <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo;
19     [% IF ( uploadimage ) %]
20         <a href="/cgi-bin/koha/tools/upload-cover-image.pl">Upload local cover image</a> &rsaquo; Upload results
21     [% ELSE %]
22         Upload local cover image
23     [% END %]
24 </div>
25
26 <div class="main container-fluid">
27     <div class="row">
28         <div class="col-sm-10 col-sm-push-2">
29             <main>
30
31                 <h1>Upload local cover image</h1>
32
33                 [% IF ( uploadimage ) %]
34                     <p>Image upload results :</p>
35                     <ul>
36                         <li>[% total | html %] images found</li>
37                         [% IF ( error ) %]
38                             <li>
39                                 <div class="dialog alert">
40                                     [% IF ( error == 'UZIPFAIL' ) %]
41                                         <p><strong>Failed to unzip archive.<br />Please ensure you are uploading a valid zip file and try again.</strong></p>
42                                     [% ELSIF ( error == 'OPNLINK' ) %]
43                                         <p><strong>Cannot open folder index (idlink.txt or datalink.txt) to read.<br />Please verify that it exists.</strong></p>
44                                     [% ELSIF ( error == 'OPNIMG' ) %]
45                                         <p><strong>Cannot process file as an image.<br />Please ensure you only upload GIF, JPEG, PNG, or XPM images.</strong></p>
46                                     [% ELSIF ( error == 'DELERR' ) %]
47                                         <p><strong>Unrecognized or missing field delimiter.<br />Please verify that you are using either a single quote or a tab.</strong></p>
48                                     [% ELSIF ( error == 'DBERR' ) %]
49                                         <p><strong>Unable to save image to database.</strong></p>
50                                     [% ELSE %]
51                                         <p><strong>An unknown error has occurred.<br />Please review the error log for more details.</strong></p>
52                                     [% END %]
53                                 </div>
54                             </li>
55                         [% END # /IF error  %]
56                         <li><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]">View final record</a></li>
57                         <li><a href="/cgi-bin/koha/tools/tools-home.pl">Back</a></li>
58                     </ul>
59                     <hr />
60                 [% END # /IF uploadimage %]
61                 <ul>
62                     <li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
63                 </ul>
64
65                 <form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
66                     <fieldset class="rows" >
67                         <legend>Upload images</legend>
68                         <ol>
69                             <li>
70                                 <div id="fileuploadform">
71                                     <label for="fileToUpload" class="required">Select the file to upload: </label>
72                                     <input type="file" id="fileToUpload" name="fileToUpload" required="required" class="required" />
73                                     <span class="required">Required</span>
74                                 </div>
75                             </li>
76                         </ol>
77                         <fieldset class="action"><button class="submit btn btn-default">Upload file</button></fieldset>
78                     </fieldset>
79
80                     <div id="uploadpanel">
81                         <div id="fileuploadstatus" class="progress_panel">Upload progress:
82                             <progress max="100" value="0" id="fileuploadprogress">
83                             </progress>
84                             <span class="fileuploadpercent">0</span>%
85                         </div>
86                         <div id="fileuploadfailed"></div>
87                     </div>
88                 </form> <!-- /#uploadfile -->
89
90                 <form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
91                     <fieldset class="rows">
92                         <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
93                         <input type="hidden" name="runinbackground" id="runinbackground" value="" />
94                         <input type="hidden" name="completedJobID" id="completedJobID" value="" />
95                     </fieldset>
96                     <fieldset class="rows">
97                         <legend>File type</legend>
98                         <ol>
99                             [% UNLESS itemnumber %]
100                                 <li class="radio">
101                                     [% IF (filetype != 'image' ) %]
102                                         <input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" />
103                                     [% ELSE %]
104                                         <input type="radio" id="zipfile" name="filetype" value="zip" />
105                                     [% END %]
106                                     <label for="zipfile">ZIP file</label>
107                                 </li>
108                                 <li class="radio">
109                                     [% IF (filetype == 'image' ) %]
110                                         <input type="radio" id="image" name="filetype" value="image" checked="checked" />
111                                     [% ELSE %]
112                                         <input type="radio" id="image" name="filetype" value="image" />
113                                     [% END %]
114                                     <label for="image">Image file</label>
115                                 </li>
116                                 <li class="radio">
117                                     [% IF ( filetype == 'image' ) %]
118                                         <span id="bibnum">
119                                     [% ELSE %]
120                                         <span id="bibnum" style="display: none">
121                                     [% END %]
122                                     <label for="biblionumber">Enter cover biblionumber: </label>
123                                     <input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" size="15" /></span>
124                                 </li>
125                             [% ELSE %]
126                                 <label for="itemnumber">Cover itemnumber: </label>
127                                 <input type="text" id="itemnumber" name="itemnumber" value="[% itemnumber | html %]" size="15" readonly="readonly" />
128                                 <input type="hidden" name="filetype" value="image" />
129                             [% END %]
130                         </ol>
131                     </fieldset>
132                     <fieldset class="rows">
133                         <legend>Options</legend>
134                         <ol>
135                             <li class="checkbox">
136                                 [% IF AllowMultipleCovers == 0 %]
137                                     <input type="checkbox" id="replace" name="replace" checked="checked" disabled="disabled" value="1" />
138                                 [% ELSE %]
139                                     <input type="checkbox" id="replace" name="replace" value="1" />
140                                 [% END %]
141                                 <label for="replace">Replace existing covers</label>
142                             </li>
143                         </ol>
144                     </fieldset>
145                     <fieldset class="action">
146                         <button type="submit" class="btn btn-default btn-sm">Process images</button>
147                     </fieldset>
148                 </form> <!-- /#processfile -->
149
150             </main>
151         </div> <!-- /.col-sm-10.col-sm-push-2 -->
152
153         <div class="col-sm-2 col-sm-pull-10">
154             <aside>
155                 [% INCLUDE 'tools-menu.inc' %]
156             </aside>
157         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
158      </div> <!-- /.row -->
159
160 [% MACRO jsinclude BLOCK %]
161     [% Asset.js("js/tools-menu.js") | $raw %]
162     [% Asset.js("js/file-upload.js") | $raw %]
163     <script>
164         function StartUpload() {
165             if( $('#fileToUpload').prop('files').length == 0 ) return;
166             $('#uploadform button.submit').prop('disabled',true);
167             $("#fileuploadstatus").show();
168             $("#uploadedfileid").val('');
169             xhr= AjaxUpload( $('#fileToUpload'), $('#fileuploadprogress'), 'temp=1', cbUpload );
170         }
171         function cbUpload( status, fileid, errors ) {
172             if( status=='done' ) {
173                 $("#uploadedfileid").val( fileid );
174                 $('#fileToUpload').prop('disabled',true);
175                 $("#processfile").show();
176             } else {
177                 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") ];
178                 var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
179                 $("#fileuploadstatus").hide();
180                 $("#fileuploadfailed").show();
181                 $("#fileuploadfailed").text( _("Upload status: ") +
182                     ( status=='failed'? _("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
183                     ( status=='denied'? _("Denied"): status ))
184                 );
185                 $("#processfile").hide();
186             }
187         }
188         $(document).ready(function(){
189             $("#processfile").hide();
190             $("#zipfile").click(function(){
191                 $("#bibnum").hide();
192             });
193             $("#image").click(function(){
194                 $("#bibnum").show();
195             });
196             $("#uploadfile").validate({
197                 submitHandler: function(form) {
198                     StartUpload();
199                     return false;
200                 }
201             });
202         });
203     </script>
204 [% END %]
205
206 [% INCLUDE 'intranet-bottom.inc' %]