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>
   6     Koha &rsaquo;
   7     Tools &rsaquo;
   8     Upload local cover image
   9     [% IF ( biblio ) %]
  10         &rsaquo; [% INCLUDE 'biblio-title-head.inc' %]
  11     [% END %]
  12 </title>
  13 [% INCLUDE 'doc-head-close.inc' %]
  14 [% FILTER collapse %]
  15     <style>
  16         #fileuploadstatus,
  17         #fileuploadfailed,
  18         #jobpanel,
  19         #jobstatus,
  20         #jobfailed,
  21         #fileuploadform,
  22         #upload_file_type,
  23         #upload_options,
  24         #process_images {
  25             display: none;
  26         }
  27         #uploadpanel {
  28             clear:both;
  29             margin-top: .9em;
  30         }
  31         #filedrag {
  32             background-color: #FFF;
  33             outline: 2px dashed #92b0b3;
  34             outline-offset: -10px;
  35             font-weight: bold;
  36             font-size: 130%;
  37             text-align: center;
  38             position: relative;
  39             padding: 50px 20px;
  40             margin: 1em;
  41
  42             cursor: default;
  43         }
  44
  45         #click_to_select:hover {
  46             color: #538200;
  47             cursor: pointer;
  48         }
  49
  50         #filedrag.hover {
  51             outline-offset: -20px;
  52             outline-color: #c8dadf;
  53             background-color: #fff;
  54         }
  55
  56         #messages {
  57             font-weight: normal;
  58         }
  59         .cover_preview {
  60             margin:1em;
  61             max-height:200px;
  62             max-width:200px;
  63         }
  64         .progress_panel {
  65             border: 0;
  66             border-radius: 0;
  67             margin: .9em;
  68             background-color: #FFF;
  69         }
  70         .fa-file-archive-o {
  71             color: #777;
  72             font-size: 300%
  73         }
  74     </style>
  75 [% END %]
  76 </head>
  77
  78 <body id="tools_upload-images" class="tools">
  79 [% WRAPPER 'header.inc' %]
  80     [% INCLUDE 'cat-search.inc' %]
  81 [% END %]
  82
  83 [% WRAPPER 'sub-header.inc' %]
  84 <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
  85     <ol>
  86         <li>
  87             <a href="/cgi-bin/koha/mainpage.pl"><i class="fa fa-home"></i></a>
  88         </li>
  89         <li>
  90             <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
  91         </li>
  92         <li>
  93             <a href="/cgi-bin/koha/tools/upload-cover-image.pl">Upload local cover image</a>
  94         </li>
  95
  96         [% IF ( uploadimage ) %]
  97             <li>
  98                 <a href="#" aria-current="page">
  99                     Upload results
 100                 </a>
 101             </li>
 102             [% IF ( biblionumber ) %]
 103                <li>
 104                     <a href="#" aria-current="page"><em>[% INCLUDE 'biblio-title.inc' %]</em></a>
 105                 </li>
 106             [% END %]
 107         [% ELSIF itemnumber %]
 108             <li>
 109                 <a href="#" aria-current="page">
 110                     Upload cover for itemnumber: [% itemnumber | html %]
 111                 </a>
 112             </li>
 113         [% ELSIF biblionumber %]
 114             <li>
 115                 <a href="#" aria-current="page">
 116                     Upload cover for biblionumber: [% biblionumber | html %]
 117                 </a>
 118             </li>
 119         [% ELSE %]
 120             <li>
 121                 <a href="#" aria-current="page">
 122                     Upload local cover image
 123                 </a>
 124             </li>
 125         [% END %]
 126     </ol>
 127 </nav>
 128 [% END %]
 129
 130 <div class="main container-fluid">
 131     <div class="row">
 132         <div class="col-sm-10 col-sm-push-2">
 133             <main>
 134
 135                 [% UNLESS itemnumber || biblionumber %]
 136                     <h1>Upload local cover image</h1>
 137                 [% ELSIF biblio %]
 138                     <h1>
 139                         Upload local cover image for <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]"><em>[% INCLUDE 'biblio-title.inc' %]</em></a>
 140                         [% IF ( itemnumber ) %],  Item number: [% itemnumber | html %][% END %]
 141                     </h1>
 142                 [% ELSIF itemnumber %]
 143                     <h1>Upload local cover image for item number: [% itemnumber | html %]</h1>
 144                 [% END %]
 145
 146                 [% IF ( uploadimage ) %]
 147                     <h2>Image upload results :</h2>
 148                     <div id="upload_results">
 149                         [% IF ( error ) %]
 150                             <div class="dialog alert">
 151                                 [% IF ( error == 'UZIPFAIL' ) %]
 152                                     <p><strong>Failed to unzip archive.<br />Please ensure you are uploading a valid zip file and try again.</strong></p>
 153                                 [% ELSIF ( error == 'OPNLINK' ) %]
 154                                     <p><strong>Cannot open folder index (idlink.txt or datalink.txt) to read.<br />Please verify that it exists.</strong></p>
 155                                 [% ELSIF ( error == 'OPNIMG' ) %]
 156                                     <p><strong>Cannot process file as an image.<br />Please ensure you only upload GIF, JPEG, PNG, or XPM images.</strong></p>
 157                                 [% ELSIF ( error == 'DELERR' ) %]
 158                                     <p><strong>Unrecognized or missing field delimiter.<br />Please verify that you are using either a single quote or a tab.</strong></p>
 159                                 [% ELSIF ( error == 'DBERR' ) %]
 160                                     <p><strong>Unable to save image to database.</strong></p>
 161                                 [% ELSE %]
 162                                     <p><strong>An unknown error has occurred.<br />Please review the error log for more details.</strong></p>
 163                                 [% END %]
 164                             </div>
 165                         [% END # /IF error  %]
 166                         <h3>[% total | html %] images found</h3>
 167                         <ul>
 168                             [% FOREACH result IN results %]
 169                                 <li><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% result.biblionumber | uri %]">[% result.title | html %]</a></li>
 170                             [% END %]
 171                         </ul>
 172                         <hr />
 173                     </div> <!-- /#upload_results -->
 174                 [% END # /IF uploadimage %]
 175
 176                 <ul>
 177                     [% UNLESS itemnumber || biblionumber %]
 178                         <li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
 179                     [% ELSE %]
 180                         <li>Select an image file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
 181                     [% END %]
 182                 </ul>
 183
 184                 <div class="row">
 185                     [% IF ( cover_images ) %]
 186                         <div class="col-sm-9">
 187                     [% ELSE %]
 188                         <div class="col-sm-12">
 189                     [% END %]
 190
 191                         <form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
 192                             <fieldset class="rows" >
 193                                 <div id="fileuploadform">
 194                                     <label for="fileToUpload">Select the file to upload: </label>
 195                                     <input type="file" id="fileToUpload" name="fileToUpload" />
 196                                 </div>
 197
 198                                 <div id="filedrag">
 199                                     <a id="click_to_select" href="#">Drop files here or click to select a file</a>
 200                                     <div id="messages"></div>
 201                                 </div>
 202
 203                                 <div id="uploadpanel">
 204                                     <div id="fileuploadstatus" class="progress_panel">Upload progress:
 205                                         <progress max="100" value="0" id="fileuploadprogress">
 206                                         </progress>
 207                                         <span class="fileuploadpercent">0</span>%
 208                                     </div>
 209                                     <div id="fileuploadfailed"></div>
 210                                 </div>
 211                             </fieldset>
 212                         </form> <!-- /#uploadfile -->
 213
 214                         <form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
 215                             <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
 216                             <input type="hidden" name="runinbackground" id="runinbackground" value="" />
 217                             <input type="hidden" name="completedJobID" id="completedJobID" value="" />
 218
 219                             [% IF itemnumber %]
 220                                 <input type="hidden" id="itemnumber" name="itemnumber" value="[% itemnumber | html %]" />
 221                                 <input type="hidden" name="filetype" value="image" />
 222                             [% ELSIF biblionumber %]
 223                                 <input type="hidden" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" />
 224                                 <input type="hidden" name="filetype" value="image" />
 225                             [% END %]
 226
 227
 228                             <fieldset id="upload_options" class="rows">
 229                                 <ol>
 230                                     [% UNLESS itemnumber || biblionumber %]
 231                                         <li class="radio">
 232                                             [% IF (filetype != 'image' ) %]
 233                                                 <input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" />
 234                                             [% ELSE %]
 235                                                 <input type="radio" id="zipfile" name="filetype" value="zip" />
 236                                             [% END %]
 237                                             <label for="zipfile">ZIP file</label>
 238                                         </li>
 239                                         <li class="radio">
 240                                             [% IF (filetype == 'image' ) %]
 241                                                 <input type="radio" id="image" name="filetype" value="image" checked="checked" />
 242                                             [% ELSE %]
 243                                                 <input type="radio" id="image" name="filetype" value="image" />
 244                                             [% END %]
 245                                             <label for="image">Image file</label>
 246                                         </li>
 247                                         <li id="biblionumber_entry">
 248                                             <label for="biblionumber">Bibliographic record number: </label>
 249                                             <input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" size="15" />
 250                                         </li>
 251                                     [% END %]
 252                                     <li class="radio">
 253                                         <label for="replace">
 254                                         [% IF AllowMultipleCovers == 0 %]
 255                                             <input type="checkbox" id="replace" name="replace" value="" disabled="disabled" checked="checked" />
 256                                             Existing covers will be replaced
 257                                         [% ELSE %]
 258                                             <input type="checkbox" id="replace" name="replace" value="1" />
 259                                             Replace existing covers
 260                                         [% END %]
 261                                     </li>
 262                                 </ol>
 263                             </fieldset>
 264
 265                             <fieldset id="process_images" class="action">
 266                                 <button type="submit" class="btn btn-default btn-sm save_image">Process images</button>
 267                                 [% IF ( biblionumber ) %]
 268                                     <a class="cancel cancel_image" href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]">Cancel</a>
 269                                 [% ELSE %]
 270                                     <a class="cancel cancel_image" href="/cgi-bin/koha/tools/upload-cover-image.pl">Cancel</a>
 271                                 [% END %]
 272                             </fieldset>
 273                         </form> <!-- /#processfile -->
 274                     </div> <!-- /.col-sm-9/.col-sm-12 -->
 275
 276                     [% IF ( cover_images.size ) %]
 277                         <div class="col-sm-3">
 278                             <h3>Existing images</h3>
 279                             <ul class="thumbnails">
 280                                 [% FOREACH img IN cover_images %]
 281                                     [% IF img %]
 282                                         <li id="imagenumber-[% img.imagenumber | html %]" class="thumbnail">
 283                                             <a class="show_cover" data-coverimg="[% img.imagenumber | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% img.imagenumber | html %]">
 284                                                 [% IF ( imagenumber == img.imagenumber ) %]
 285                                                     <img class="selected" id="thumbnail_[% img.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail" />
 286                                                 [% ELSE %]
 287                                                     <img id="thumbnail_[% img.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail" />
 288                                                 [% END %]
 289                                             </a>
 290                                             <a href="#" class="remove" data-coverimg="[% img.imagenumber | html %]"><i class="fa fa-trash"></i> Delete image</a>
 291                                         </li>
 292                                     [% END # /IF img %]
 293                                 [% END # /FOREACH img %]
 294                             </ul> <!-- /ul.thumbnails -->
 295                         </div> <!-- /.col-sm-3 -->
 296                     [% END # /IF images.size %]
 297
 298                 </div> <!-- /.row -->
 299             </main>
 300         </div> <!-- /.col-sm-10.col-sm-push-2 -->
 301
 302         <div class="col-sm-2 col-sm-pull-10">
 303             <aside>
 304                 [% INCLUDE 'tools-menu.inc' %]
 305             </aside>
 306         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
 307      </div> <!-- /.row -->
 308
 309 [% MACRO jsinclude BLOCK %]
 310     [% Asset.js("js/tools-menu.js") | $raw %]
 311     <script>
 312         var interface = "[% interface | html %]";
 313         var theme = "[% theme | html %]";
 314         var biblionumber = "[% biblionumber | html %]";
 315     </script>
 316     [% Asset.js("js/upload-images.js") | $raw %]
 317
 318     </script>
 319 [% END %]
 320
 321 [% INCLUDE 'intranet-bottom.inc' %]