Bug 21438: Update two-column templates with Bootstrap grid: Patron card creator
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / patroncards / image-manage.tt
1 [% SET footerjs = 1 %]
2     [% INCLUDE 'doc-head-open.inc' %]
3     <title>Koha &rsaquo; Tools &rsaquo; Patron card creator &rsaquo; Images</title>
4     [% INCLUDE 'doc-head-close.inc' %]
5 </head>
6
7 <body id="pcard_image-manage" class="tools pcard">
8 [% INCLUDE 'header.inc' %]
9 [% INCLUDE 'cat-search.inc' %]
10 <div id="breadcrumbs">
11     <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
12     <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo;
13     <a href="/cgi-bin/koha/patroncards/home.pl">Patron card creator</a> &rsaquo;
14     Images
15 </div>
16
17 <div class="main container-fluid">
18     <div class="row">
19         <div class="col-sm-10 col-sm-push-2">
20             <main>
21
22                 [% INCLUDE 'patroncards-toolbar.inc' %]
23                 [% INCLUDE 'patroncards-errors.inc' %]
24                 <div class="row">
25                     <div class="col-sm-6">
26                         <h1>Upload additional images for patron cards</h1>
27                         <p>Manage additional images to use as logo, decoration or background on a patron card layout.</p>
28                         <form name="upload_images" method="post" action="/cgi-bin/koha/patroncards/image-manage.pl" enctype="multipart/form-data">
29                             <fieldset class="brief">
30                                 <div class="hint">Only PNG, GIF, JPEG, XPM formats are supported. Maximum image size is 500KB.</div>
31                                 <ol>
32                                 <li>
33                                     <label for="uploadfile">Select the file to upload: </label>
34                                     <input type="file" id="uploadfile" name="uploadfile" />
35                                     <input type="hidden" id="image" name="filetype" value="image" />
36                                 </li>
37                                 <li>
38                                     <label for="image_name">Image name: </label>
39                                     <div class="hint">
40                                         This will be the name by which you will refer to this image in the patron card layout editor.
41                                     </div>
42                                     <div class="hint">
43                                         To replace an image, delete it, upload a new file and give it the same image name.
44                                     </div>
45
46                                     <input type="text" id="image_name" name="image_name" size="20" />
47                                 </li>
48                                 </ol>
49                                 <div class="action">
50                                     <input type="hidden" name="op" value="upload" />
51                                     <input class="btn btn-default btn-default" id="uploadsu" type="submit" value="Upload" />
52                                 </div>
53                                 [% IF ( IMPORT_SUCCESSFUL ) %]
54                                     <div class="dialog message">
55                                     <h3>Image successfully uploaded</h3>
56                                     <ul><li>File: [% SOURCE_FILE | html %]</li>
57                                     <li>Image name: [% IMAGE_NAME | html %]</li></ul>
58                                     </div>
59                                 [% END %]
60                             </fieldset>
61
62                         </form>
63                     </div>
64                     <div class="col-sm-6">
65                     <h1>Delete Images</h1>
66                         [% IF ( TABLE ) %]
67                         <form name="delete_images" method="post" action="/cgi-bin/koha/patroncards/image-manage.pl" enctype="multipart/form-data">
68                             <fieldset class="brief">
69                                 <div class="hint">
70                                     Select one or more images to delete.
71                                 </div>
72                                <table>
73                                     [% FOREACH TABL IN TABLE %]
74
75                                     [% IF ( TABL.header_fields ) %]
76
77                                     <tr>
78                                     [% FOREACH header_field IN TABL.header_fields %]
79                                     [% SWITCH header_field.field_label -%]
80                                         [% CASE "ID" %]
81                                             <th>Image ID</th>
82                                         [% CASE "Name" %]
83                                             <th>Name</th>
84                                         [% CASE " " %]
85                                             <th>Delete</th>
86                                         [% CASE %]
87                                            <th>[% header_field.field_label | html %]</th>
88                                     [% END %]
89                                     [% END %]
90                                     </tr>
91                                     [% ELSE %]
92                                     <tr>
93                                     [% FOREACH text_field IN TABL.text_fields %]
94                                     [% IF ( text_field.select_field ) %]
95                                         <td>
96                                             <a class="delete_image btn btn-default btn-xs" href="/cgi-bin/koha/patroncards/image-manage.pl?op=delete&image_id=[% text_field.field_value | html %]"><i class="fa fa-trash"></i> Delete</a>
97                                         </td>
98                                         <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value | html %]" /></td>
99                                     [% ELSIF ( text_field.field_value ) %]
100                                         <td>[% text_field.field_value | html %]</td>
101                                     [% ELSE %]
102                                         <td>&nbsp;</td>
103                                     [% END %]
104                                     [% END %]
105                                     </tr>
106                                     [% END %]
107                                     [% END %]
108                                 </table>
109                                 <div class="action">
110                                     <input type="hidden" name="op" value="delete" />
111                                     <input class="btn btn-default btn-default" type="button" id="delete" value="Delete selected" />
112                                 </div>
113                                 [% IF ( DELETE_SUCCESSFULL ) %]
114                                 <div id="dialog" class="dialog message">
115                                     <h3>Image(s) successfully deleted</h3>
116                                 </div>
117                                 [% END %]
118                             </fieldset>
119                         </form>
120                         [% ELSE %]
121                         <fieldset class="brief">
122                             <div class="hint">
123                                 No images are currently available.
124                             </div>
125                             [% IF ( DELETE_SUCCESSFULL ) %]
126                                 <div id="dialog" class="dialog message">
127                                     <h3>Image(s) successfully deleted</h3>
128                                 </div>
129                             [% END %]
130                         </fieldset>
131                         [% END %]
132                     </div>
133                 </div>
134
135             </main>
136         </div> <!-- /.col-sm-10.col-sm-push-2 -->
137
138         <div class="col-sm-2 col-sm-pull-10">
139             <aside>
140                 [% INCLUDE 'tools-menu.inc' %]
141             </aside>
142         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
143      </div> <!-- /.row -->
144
145 [% MACRO jsinclude BLOCK %]
146     <script>
147         function DeleteConfirm() {
148             var results = selected_images("delete");
149             if (results.images) {
150                 var msg = _("Are you sure you want to delete image(s): %s?").format(results.image_ids);
151                 var answer = confirm(msg);
152                 if (answer) {
153                     window.location = "/cgi-bin/koha/patroncards/image-manage.pl?op=delete&" + results.images;
154                 } else {
155                     return; // abort delete
156                 }
157             } else {
158                 alert(_("Please select image(s) to delete."));
159             }
160         }
161
162         function selected_images(op) {
163             var selected = new Array;
164             var image_ids = new Array;
165             if (document.delete_images.action.length) {
166                 for (i=0;i<document.delete_images.action.length;i++){
167                     if (document.delete_images.action[i].checked){
168                         selected.push("image_id=" + document.delete_images.action[i].value);
169                         image_ids.push(document.delete_images.action[i].value);
170                     }
171                 }
172                 images = selected.join("&");
173                 return {images:images, image_ids:image_ids};
174             }
175             else if (document.delete_images.action.checked){
176                     return {images:"image_id="+document.delete_images.action.value, image_ids:document.delete_images.action.value};
177             }
178             return (-1);
179         }
180         $(document).ready(function() {
181             $("#delete").click(function(){
182                 return DeleteConfirm();
183             });
184             $(".delete_image").on("click", function(){
185                 return confirmDelete( _("Are you sure you want to delete this image?") );
186             });
187         });
188     </script>
189 [% END %]
190
191 [% INCLUDE 'intranet-bottom.inc' %]