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