Bug 28242: added captions to tables and legends to forms
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-full-serial-issues.tt
1 [% USE Koha %]
2 [% USE KohaDates %]
3 [% USE Branches %]
4 [% INCLUDE 'doc-head-open.inc' %]
5 <title>Full subscription history for [% bibliotitle | html %] &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
6 [% INCLUDE 'doc-head-close.inc' %]
7 [% BLOCK cssinclude %]
8     [% FILTER collapse %]
9     <style>
10         div.tabsub {
11             clear: both;
12         }
13         #filterform label {
14             font-weight: bold;
15         }
16         #filterform select {
17             width: 100%;
18         }
19         #subtabs a {
20             display: block;
21             float: left;
22             border: 1px solid #CCC;
23             padding: .2em .4em;
24             margin: .3em;
25             text-decoration: none;
26             font-size: 115%;
27         }
28
29         #subtabs strong {
30             display: block;
31             float: left;
32             font-size: 115%;
33             padding: .2em .4em;
34             margin: 0.3em 0;
35         }
36
37         #subtabs {
38             margin-top: 1em;
39         }
40         .action .btn {
41             font-size: 90%;
42             width: 100%;
43         }
44         .menu-collapse {
45             padding: .5em;
46         }
47         a.currentsubtab {
48             background-color: #FFC;
49         }
50     </style>
51     [% END %]
52 [% END %]
53 </head>
54 [% INCLUDE 'bodytag.inc' bodyid='opac-full-serial-issues' bodyclass='scrollto' %]
55 [% INCLUDE 'masthead.inc' %]
56
57     <div class="main">
58         <nav aria-label="breadcrumb">
59             <ul class="breadcrumb">
60                 <li class="breadcrumb-item">
61                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
62                 </li>
63                 <li class="breadcrumb-item">
64                     <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a>
65                 </li>
66                 <li class="breadcrumb-item active" aria-current="page">
67                     <a href="#">Full subscription history</a>
68                 </li>
69             </ul>
70         </nav>
71
72         <div class="container-fluid">
73             <div class="row">
74                 <div class="col-lg-2">
75                     <div id="searchfacetscontainer">
76                         <div id="search-facets">
77                             <form action="/cgi-bin/koha/opac-serial-issues.pl" id="filterform">
78                                 <legend><h2><a href="#" class="menu-collapse-toggle">Refine your search</a></h2></legend>
79                             <ul class="menu-collapse">
80                                 <li>
81                                     <label for="libraryfilter">Library: </label>
82                                     <select id="libraryfilter" name="libraryfilter"></select>
83                                     <label for="subscriptionidfilter">Subscription: </label>
84                                     <select id="subscriptionidfilter" name="subscriptionfilter" disabled="disabled"></select>
85                                 </li>
86                                 <li class="action">
87                                     <input type="reset" id="reset" class="btn btn-primary" value="Clear" />
88                                 </li>
89                             </ul>
90                             </form>
91                         </div> <!-- / #search-facets -->
92                     </div> <!-- / #searchfacetscontainer -->
93                     <div id="navigation">
94                         [% INCLUDE 'navigation.inc' %]
95                     </div>
96                 </div> <!-- / .col-lg-2 -->
97                 <div class="col-10 order-first order-md-first order-lg-2">
98                     <div id="fullserialissues" class="maincontent">
99                         [% UNLESS ( popup ) %]
100                             <h1>Full subscription history for [% bibliotitle | html %]</h1>
101                             <div id="views">
102                                 <span class="view"><a id="Normalview" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]">Normal view</a></span>
103                                 <span class="view"><a id="Briefhistory" href="/cgi-bin/koha/opac-serial-issues.pl?biblionumber=[% biblionumber | html %]&amp;selectview=small">Brief history</a></span>
104                                 <span class="view"><span id="Fullhistory">Full history</span></span>
105                             </div>
106                         [% END %]
107
108                         <div id="subtabs">
109                             <strong>Show year: </strong>
110                             [% FOREACH year IN years %]
111                                 [% IF ( year.year ) %]
112                                     <a class="tabsubs" href="#" onclick="showlayer([% year.year | html %]); return false;">[% year.year | html %]</a>
113                                 [% END %]
114                             [% END %]
115                         </div>
116
117                         [% FOREACH year IN years %]
118                             [% IF loop.first %]
119                                 <div class="yeardata tabsub" id="show[% year.year | html %]" style="display:block">
120                             [% ELSE %]
121                                 <div class="yeardata tabsub" id="show[% year.year | html %]" style="display:none">
122                             [% END %]
123                                 <table class="subscriptionstclass table table-bordered table-striped">
124                                     <caption class="sr-only">Subscriptions</caption>
125                                     <thead>
126                                         <tr>
127                                             <th>Date</th>
128                                             <th>Library</th>
129                                             <th>Notes</th>
130                                             <th>Date received</th>
131                                             <th>Number</th>
132                                             <th>Status</th>
133                                             <th>Subscription</th>
134                                         </tr>
135                                     </thead>
136                                     <tbody>
137                                         [% FOREACH serial IN year.serials %]
138                                             <tr>
139                                                 <td data-order="[% serial.publisheddate | html %]">
140                                                     [% IF ( serial.publisheddate ) %]
141                                                         [% IF serial.publisheddatetext %]
142                                                             [% serial.publisheddatetext | html %]
143                                                         [% ELSE %]
144                                                             [% serial.publisheddate | $KohaDates %]
145                                                         [% END %]
146                                                     [% ELSE %]
147                                                         &nbsp;
148                                                     [% END %]
149                                                 </td>
150                                                 <td class="libraryfilterclass">[% Branches.GetName( serial.branchcode ) | html %]</td>
151                                                 <td>[% serial.notes | html %]</td>
152                                                 [% IF ( serial.status2 && serial.planneddate ) %]
153                                                     <td data-order="[% serial.planneddate | html %]">
154                                                         [% serial.planneddate | $KohaDates %]
155                                                 [% ELSE %]
156                                                     <td data-order="9999-12-31">
157                                                         &nbsp;
158                                                 [% END %]
159                                                 </td>
160                                                 <td>[% serial.serialseq | html %]</td>
161                                                 <td>
162                                                     [% IF ( serial.status1 ) %]Expected[% END %]
163                                                     [% IF ( serial.status2 ) %]Arrived[% END %]
164                                                     [% IF ( serial.status3 ) %]Late[% END %]
165                                                     [% IF ( serial.status4 ) %]Missing[% END %]
166                                                         [% IF ( serial.status41 ) %]Missing (never received)[% END %]
167                                                         [% IF ( serial.status42 ) %]Missing (sold out)[% END %]
168                                                         [% IF ( serial.status43 ) %]Missing (damaged)[% END %]
169                                                         [% IF ( serial.status44 ) %]Missing (lost)[% END %]
170                                                     [% IF ( serial.status5 ) %]Not available[% END %]
171                                                     [% IF ( serial.status6 ) %]Delete[% END %]
172                                                     [% IF ( serial.status7 ) %]Claimed[% END %]
173                                                     [% IF ( serial.status8 ) %]Stopped[% END %]
174                                                 </td>
175                                                 <td class="subscriptionidfilterclass">[% serial.subscriptionid | html %]</td>
176                                             </tr>
177                                         [% END %]
178                                     </tbody>
179                                 </table>
180                             </div> <!-- / .yeardata tabsub -->
181                         [% END # / FOREACH year %]
182                     </div> <!-- / #fullserialissues -->
183                 </div> <!-- / .col-10 -->
184             </div> <!-- / .row -->
185         </div> <!-- / .container-fluid -->
186     </div> <!-- / .main -->
187
188 [% INCLUDE 'opac-bottom.inc' %]
189 [% BLOCK jsinclude %]
190     [% INCLUDE 'datatables.inc' %]
191     <script>
192         $(document).ready(function(){
193             showlayer([% yearmin | html %]);
194             $("a.tabsubs:first").addClass("currentsubtab");
195             $("#filterform").submit(function(){
196                 filterByLibrary();
197                 return false;
198             });
199             $("#libraryfilter").change(function(){
200                 filterByLibrary();
201             });
202             $("#subscriptionidfilter").change(function(){
203                 filterBySubscriptionId();
204             });
205             $("#reset").click(function(){
206                 clearFilters();
207             });
208             $("a.tabsubs").click(function(){
209                 $("a.tabsubs").removeClass("currentsubtab");
210                 $(this).addClass("currentsubtab");
211             });
212             $(".subscriptionstclass").dataTable($.extend(true, {}, dataTablesDefaults, {
213                 "order": [[ 0, "desc" ]]
214             }));
215         });
216
217         // Filters initialization
218         function initFilters() {
219             // Deleting everything from the library filter
220             $("#libraryfilter option").remove();
221
222             // Getting each branchcode from the currently displayed tab
223             var subarray = [];
224             $("div#" + currentYear + " table.subscriptionstclass tbody tr:visible td.libraryfilterclass").each(function() {
225                 if (subarray.indexOf($(this).text()) == -1) { subarray.push($(this).text()); }
226             });
227
228             // Setting the option values with branchcodes
229             $("#libraryfilter").append('<option value="all">'+_("(All)")+'</option>');
230             for (var i = 0; i < subarray.length; i++) {
231                 $("#libraryfilter").append('<option value="' + subarray[i] + '">' + subarray[i] + '</option>');
232             }
233         }
234
235         // Filter by Library
236         function filterByLibrary() {
237
238             selectedStatus = $("#libraryfilter").val();
239
240             // Reset the filters but keeps the selected library
241             clearFilters(true);
242
243             if (selectedStatus != 'all') {
244
245                 // We hide everything
246             $("table.subscriptionstclass tbody tr").hide();
247
248             // Then show the lines that match the currently selected library
249             $("table.subscriptionstclass tbody tr td.libraryfilterclass:contains(" + selectedStatus + ")").parent().show();
250
251
252             // We then prepare the subscription filter :
253
254             // Getting subscription id's for the selected library
255             var subarray = [];
256             $("div#" + currentYear + " table.subscriptionstclass tbody tr:visible td.subscriptionidfilterclass").each(function() {
257                 if (subarray.indexOf($(this).text()) == -1) { subarray.push($(this).text()); }
258             });
259             // Setting the option values with subscription id's
260             $("#subscriptionidfilter").append('<option value="all">'+_("(All)")+'</option>');
261             for (var i = 0; i < subarray.length; i++) {
262                 $("#subscriptionidfilter").append('<option value="' + subarray[i] + '">' + subarray[i] + '</option>');
263             }
264
265             // Subscription filtering is now ready
266             $("#subscriptionidfilter").removeAttr("disabled");
267             }
268         }
269
270         // Filter by subscription id
271         function filterBySubscriptionId() {
272
273             selectedSubscription = $("#subscriptionidfilter").val();
274             selectedLibrary      = $("#libraryfilter").val();
275
276             if (selectedSubscription == "all") {
277             clearFilters(true);
278             filterByLibrary();
279             } else {
280
281             // We hide everything
282             $("table.subscriptionstclass tbody tr").hide();
283
284             // Then show the lines that match the currently selected library
285             $("table.subscriptionstclass tbody tr td.libraryfilterclass:contains(" + selectedLibrary + ")").parent().show();
286
287             // Then hide the lines where the subscription id does not match the selected one
288             $("table.subscriptionstclass tbody tr td.subscriptionidfilterclass").not(
289                 $("table.subscriptionstclass tbody tr td.subscriptionidfilterclass:contains(" + selectedSubscription + ")")
290             ).parent().hide();
291             }
292         }
293
294         // Clears filters : reset everything
295         // (Though preserves the selected library if the keeplibrary parameter is set to true)
296         function clearFilters(keeplibrary) {
297             // Show all content
298             $("table.subscriptionstclass tbody tr").show();
299
300             // Remove old subscription options
301             $("#subscriptionidfilter option").remove();
302             $("#subscriptionidfilter option").append('<option value="all">'+_("(All)")+'</option>');
303             $("#subscriptionidfilter").attr("disabled", "disabled");
304
305             if (keeplibrary != true) {
306             // Reinit library options
307             initFilters();
308             $("#libraryfilter option[value=all]").attr("selected", "selected");
309             }
310         }
311
312         function showlayer(numlayer){
313             $(".yeardata").each(function(){
314                 ong = $(this).attr("id");
315                 if(ong == "show"+numlayer){
316                     $(this).show();
317                     currentYear = ong;
318                 } else  {
319                     $(this).hide();
320                 }
321             });
322             clearFilters();
323         }
324     </script>
325 [% END %]