XHTML corrections: tools and reports
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / holidays.tmpl
1 <!-- TMPL_INCLUDE NAME="doc-head-open.inc" -->
2 <title>Koha &rsaquo; Tools &rsaquo; Holidays</title>
3 <!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
4 <!-- TMPL_INCLUDE NAME="calendar.inc" -->
5 <script language="JavaScript" type="text/javascript">
6 //<![CDATA[
7         // Captura el evento onmousemove para cualquier navegador
8         if (document.layers) { // Netscape
9                 document.captureEvents(Event.MOUSEMOVE);
10             document.onmousemove = captureMousePosition;
11         } else if (document.all) { // Internet Explorer
12             document.onmousemove = captureMousePosition;
13         } else if (document.getElementById) { // Netcsape 6
14             document.onmousemove = captureMousePosition;
15         }
16
17         var mouseXMax = 0;
18         var mouseYMax = 0;
19         var mouseX = 0;
20         var mouseY = 0;
21
22         function captureMousePosition(e) {
23             if (document.layers) {
24                     mouseX = e.pageX;
25                         mouseY = e.pageY;
26                 mouseXMax = window.innerWidth + window.pageXOffset;
27                     mouseYMax = window.innerHeight + window.pageYOffset;
28             } else if (document.all) {
29                     mouseX = window.event.x + document.body.scrollLeft;
30                 mouseY = window.event.y + document.body.scrollTop;
31                 mouseXMax = document.body.clientWidth + document.body.scrollLeft;
32                 mouseYMax = document.body.clientHeight + document.body.scrollTop;
33             } else if (document.getElementById) {
34                 mouseX = e.pageX;
35                     mouseY = e.pageY;
36                 mouseXMax = window.innerWidth + window.pageXOffset;
37                 mouseYMax = window.innerHeight + window.pageYOffset;
38             }
39         }
40
41         function holidayOperation(formObject, opType) {
42                 var op = document.getElementsByName('operation');
43                 op[0].value = opType;
44                 formObject.submit();
45         }
46
47         // This function shows the "Show Holiday" panel //
48         function showHoliday (exceptionPosibility, dayName, day, month, year, weekDay, title, description) {
49                 
50                 var panel = document.getElementById('showHoliday');
51                 panel.style.display = 'inline';
52                 document.getElementById('newHoliday').style.display = 'none';
53                 panel.style.top = mouseYMax/2;
54                 panel.style.left = (mouseXMax/2) - 250;
55                 document.getElementById('showDayname').value = dayName;
56                 document.getElementById('showBranchName').value = document.getElementById('branch').value;
57                 document.getElementById('showDay').value = day;
58                 document.getElementById('showMonth').value = month;
59                 document.getElementById('showYear').value = year;
60                 document.getElementById('showDescription').value = description;
61                 document.getElementsByName('showWeekday')[0].value = weekDay;
62                 document.getElementById('showTitle').value = title;
63                 
64                 if (exceptionPosibility == 1) {
65                         document.getElementById('exceptionPosibility').style.display = 'inline';
66                 } else {
67                         document.getElementById('exceptionPosibility').style.display = 'none';
68                 }
69         }
70
71         // This function shows the "Add Holiday" panel //
72         function newHoliday (dayName, day, month, year, weekDay) {
73                 var panel = document.getElementById('newHoliday');
74                 panel.style.display = 'inline';
75                 document.getElementById('showHoliday').style.display = 'none';
76                 panel.style.top = mouseYMax/2;
77                 panel.style.left = (mouseXMax/2)  - 250;
78                 document.getElementById('newDayname').value = dayName;
79                 document.getElementById('newBranchName').value = document.getElementById('branch').value;
80                 document.getElementById('newDay').value = day;
81                 document.getElementById('newMonth').value = month;
82                 document.getElementById('newYear').value = year;
83                 document.getElementsByName('newWeekday')[0].value = weekDay;
84         }
85
86         function hidePanel(aPanelName) {
87                 document.getElementById(aPanelName).style.display = 'none';
88         }
89
90         function changeBranch () {
91                 var branch = document.getElementById('branch').options[document.getElementById('branch').selectedIndex].value;
92                 location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch;
93         }
94
95         function additionalInformation (anExplanation) {
96                 var panel = document.getElementById('information');
97                 var paragraph = document.getElementById('explanation');
98                 panel.style.display = 'inline'
99                 panel.style.top = mouseY;
100                 panel.style.left = mouseX;
101                 var info = document.createTextNode(anExplanation);
102                 if (paragraph.hasChildNodes()) {
103                         paragraph.removeChild(paragraph.lastChild);
104                 }
105                 paragraph.appendChild(info);
106         }
107
108         function Help() {
109                 newin=window.open("/cgi-bin/koha/help.pl","Koha Help",'width=600,height=600,toolbar=false,scrollbars=yes');
110         }
111 //]]>
112 </script>
113
114 <style type="text/css">
115 .normalday { 
116         background-color :  #EDEDED;
117         color :  Black; 
118         border : 1px solid #000000;
119 }
120
121 .exception {
122         background-color :  #EDEDED;
123         color :  Black;                 
124         border : 1px solid #000000;
125 }
126
127 .holiday { 
128         background-color :  red;
129         color :  Black; 
130         border : 1px solid #000000;
131 }
132
133 .repeatableday { 
134         background-color :  yellow;
135         color :  Black; 
136         border : 1px solid #000000;
137 }
138
139 .information {
140         z-index : 1;
141         background-color :  #DCD2F1;
142         width : 300px;
143         display : none;
144         border : 1px solid #000000;
145         color :  #000000;
146         font-size :  8pt;
147         font-weight :  bold;
148     background-color :  #FFD700;
149         cursor :  pointer;
150         padding : 2px;
151 }
152
153 .panel {
154         z-index : 1;
155         width : 500px;
156         display : none;
157         border : 1px solid #000000;
158         padding : 3px;
159         position: absolute;
160         background-color: #CCCCCC;
161 }
162
163 div.dmy {
164         display:inline;
165 }
166
167 .blacklabel, div.dmy input {
168         background-color:#FFFFFF;
169         color:Black;
170         font-size:10px;
171 }
172
173 </style>
174 </head>
175 <body>
176 <!-- TMPL_INCLUDE NAME="header.inc" -->
177 <!-- TMPL_INCLUDE NAME="cat-search.inc" -->
178
179 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; Holidays</div>
180
181 <div id="doc3" class="yui-t2">
182    
183    <div id="bd">
184         <div id="yui-main">
185         <div class="yui-b">
186
187
188 <!-- ******************************** FLAT PANELS ******************************************* -->
189 <!-- *****           Makes all the flat panel to deal with holidays                     ***** -->
190 <!-- **************************************************************************************** -->
191
192 <!-- ********************** Panel for showing already loaded holidays *********************** -->
193 <div class="panel" id="showHoliday">
194         <form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">
195                 <h2>Edit this holiday</h2>
196                 <p>
197                         <label for="showBranchName">Library</label>
198                         <input type="text" size="20" id="showBranchName" name="showBranchName" readonly="readonly" class="blacklabel" />
199                 </p>
200                 <p>
201                         <label for="showDayname">Day name</label>
202                         <input type="text" size="20" id="showDayname" name="showDayname" readonly="readonly" class="blacklabel" />
203                         <input type="hidden" name="showWeekday" />
204                 </p>
205                 <div class="dmy">
206                         <label for="showDay">Day</label> <input type="text" size="2" id="showDay" name="showDay" readonly="readonly" />
207                         <label for="showMonth">Month</label> <input type="text" size="2" id="showMonth" name="showMonth" readonly="readonly" />
208                         <label for="showYear">Year</label> <input type="text" size="4" id="showYear" name="showYear" readonly="readonly" />             
209                 </div>
210             <p><label for="showDescription">Description:</label>
211                         <br />
212                         <textarea rows="2" cols="40" id="showDescription" name="showDescription"></textarea>    
213                 </p>
214                 <div id="exceptionPosibility" style="position:static">
215                         <input type="radio" name="showOperation" id="showOperationExc" value="exception" /> <label for="showOperationExc">Generate an exception to this holiday.</label>
216                         <a href="#" onclick=" additionalInformation('You can make an exception for this holiday rule. This means that you will be able to say for a repeatable holiday, that there is one of those days that is going to be an exception.')"><img src="<!-- TMPL_VAR NAME="themelang" -->/images/more.gif" border="0" alt="More information" /></a>
217                 </div>
218                 <input type="radio" name="showOperationDel" id="showOperationDel" value="delete" checked="checked" /> <label for="showOperationDel">Delete this holiday</label>.
219                 <a href="#" onclick=" additionalInformation('This will delete this holiday rule. In case it is a repeatable holiday, this option checks for posible exceptions. In case those exists, this option take care of set this exceptions to regular holidays.')"><img src="<!-- TMPL_VAR NAME="themelang" -->/images/more.gif" border="0" alt="More information" /></a>
220                 <p>
221                         <input type="submit" name="submit" value="Save" />
222                         <input type="button" name="cancel2" value="Cancel" onclick=" hidePanel('showHoliday');hidePanel('information')" />
223                 </p>
224         </form>
225 </div>
226
227 <!-- ***************************** Panel to deal with new holidays **********************  -->
228 <div class="panel" id="newHoliday">
229         <form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">
230                 <h2>Add new holiday</h2>
231                 <p>
232                         <label for="newBranchName">Library</label>
233                         <input type="text" size="20" id="newBranchName" name="newBranchName" readonly="readonly" class="blacklabel" />
234                 </p>
235                 <p>
236                         <label for="newDayname">Day name</label>
237                         <input type="text" size="20" id="newDayname" name="newDayname" readonly="readonly" class="blacklabel" />
238                         <input type="hidden" name="newWeekday" />
239                 </p>
240                 <div class="dmy">
241                         <label for="newDay">Day</label> <input type="text" size="2" id="newDay" name="newDay" readonly="readonly" />
242                         <label for="newMonth">Month</label> <input type="text" size="2" id="newMonth" name="newMonth"  readonly="readonly" />
243                         <label for="newYear">Year</label> <input type="text" size="4" id="newYear" name="newYear" readonly="readonly" />
244                 </div>
245                 <p><label for="newDescription">Description:</label>
246                         <br />
247                         <textarea rows="2" cols="40" id="newDescription" name="newDescription"></textarea>
248                 </p>
249                         <input type="radio" name="newOperation" id="newOperationOnce" value="holiday" checked="checked" />
250                         <label for="newOperationOnce">Holiday only on this day</label>.
251                         <a href="#" onclick=" additionalInformation('Make a single holiday. For example, selecting August 1st, 2012 will make it holiday, but will not affect August 1st in other years.')"><img src="<!-- TMPL_VAR NAME="themelang" -->/images/more.gif" border="0" alt="More information" /></a>
252                         <br />
253                         <input type="radio" name="newOperation" id="newOperationDay" value="weekday" />
254                         <label for="newOperationDay">Holiday repeated every same day of the week</label>.
255                         <a href="#" onclick=" additionalInformation('Make this weekday a holiday, every week. For example, if your library is closed on Saturdays, use this option to make every Saturday a holiday.')"><img src="<!-- TMPL_VAR NAME="themelang" -->/images/more.gif" border="0" alt="More information" /></a>
256                         <br />
257                         <input type="radio" name="newOperation" id="newOperationYear" value="repeatable" />
258                         <label for="newOperationYear">Holiday repeated yearly on the same date</label>.
259                         <a href="#" onclick=" additionalInformation('This will take this day and month as a reference to make it holiday. Through this option, you can repeat this rule for every year. For example, selecting August 1st will make August 1st a holiday every year.')"><img src="<!-- TMPL_VAR NAME="themelang" -->/images/more.gif" border="0" alt="More information" /></a>
260                         <p>
261                                 <input type="submit" name="submit" value="Save" />
262                                 <input type="button" name="cancel2" value="Cancel" onclick=" hidePanel('newHoliday');hidePanel('information')" />
263                         </p>
264         </form>
265 </div>
266
267 <!-- *************************************************************************************** -->
268 <!-- ******                          END OF FLAT PANELS                               ****** -->
269 <!-- *************************************************************************************** -->
270
271 <!-- *************************************************************************************** -->
272 <!-- ******                     START OF INFORMATION PANEL                            ****** -->
273 <!-- *************************************************************************************** -->
274
275 <div class="information" style="position:absolute" id="information" onclick=" hidePanel('information')">
276         <table>
277                 <tr>
278                         <td>
279                                 <img src="<!-- TMPL_VAR NAME="themelang" -->/images/info.gif" border="0" style="vertical-align:middle" alt="" />
280                         </td>
281                         <td>
282                                 <p id="explanation" style="display:inline;align:justify"></p>
283                         </td>
284                 </tr>
285         </table>
286 </div>
287
288 <!-- ************************************************************************************** -->
289 <!-- ******                      END OF INFORMATION PANEL                            ****** -->
290 <!-- ************************************************************************************** -->
291
292 <h1>Define the holidays for branch <!-- TMPL_VAR name="BRANCHES" --></h1>
293         <ul>
294                 <li>Search in the calendar the day you want to set as holiday.</li>
295                 <li>Complete the information in the right area.</li>
296                 <li>Once you finish the steps above, click Save.</li>
297         </ul>
298         <p>
299                 <span class="normalday">Working day</span>
300                 <span class="holiday">Unique holiday</span>
301                 <span class="repeatableday">Repeatable holiday</span>
302                 <span class="exception">Holiday exception</span>
303         </p>
304
305 <!-- ************************************************************************************** -->
306 <!-- ******                              MAIN SCREEN CODE                            ****** -->
307 <!-- ************************************************************************************** -->
308 <h2>Calendar information</h2>
309 <div id="calendar-container">
310 <script type="text/javascript">
311         /* Creates all the structures to deal with all diferents kinds of holidays */
312         var week_days = new Array();
313         var holidays = new Array();
314         var exception_holidays = new Array();
315         var day_month_holidays = new Array();
316         var hola= "<!-- TMPL_VAR NAME="code" -->";
317         <!-- TMPL_LOOP NAME="WEEK_DAYS_LOOP" -->
318         week_days["<!-- TMPL_VAR NAME="KEY" -->"] = {title:"<!-- TMPL_VAR NAME="TITLE" -->", description:"<!-- TMPL_VAR NAME="DESCRIPTION" -->"};
319         <!-- /TMPL_LOOP -->
320         <!-- TMPL_LOOP NAME="HOLIDAYS_LOOP" -->
321         holidays["<!-- TMPL_VAR NAME="KEY" -->"] = {title:"<!-- TMPL_VAR NAME="TITLE" -->", description:"<!-- TMPL_VAR NAME="DESCRIPTION" -->"};
322         <!-- /TMPL_LOOP -->
323         <!-- TMPL_LOOP NAME="EXCEPTION_HOLIDAYS_LOOP" -->
324         exception_holidays["<!-- TMPL_VAR NAME="KEY" -->"] = {title:"<!-- TMPL_VAR NAME="TITLE" -->", description:"<!-- TMPL_VAR NAME="DESCRIPTION" -->"};
325         <!-- /TMPL_LOOP -->
326         <!-- TMPL_LOOP NAME="DAY_MONTH_HOLIDAYS_LOOP" -->
327         day_month_holidays["<!-- TMPL_VAR NAME="KEY" -->"] = {title:"<!-- TMPL_VAR NAME="TITLE" -->", description:"<!-- TMPL_VAR NAME="DESCRIPTION" -->"};
328         <!-- /TMPL_LOOP -->
329
330         /* This function gives css clases to each kind of day */
331         function dateStatusHandler(date) {
332                 var day = date.getDate();
333                 var month = date.getMonth() + 1;
334                 var year = date.getFullYear();
335                 var weekDay = date.getDay();
336                 var dayMonth = month + '/' + day;
337                 var dateString = year + '/' + month + '/' + day;
338                 if (exception_holidays[dateString] != null) {
339                         return 'exception';
340                 } else if ((week_days[weekDay] != null) || (day_month_holidays[dayMonth] != null)) {
341                         return 'repeatableday';
342                 } else if (holidays[dateString] != null) {
343                         return 'holiday';
344                 } else {
345                         return 'normalday';
346                 }
347         }
348
349         /* This function is in charge of showing the correct panel considering the kind of holiday */
350         function dateChanged(calendar) {
351                 var day = calendar.date.getDate();
352                 var month = calendar.date.getMonth() + 1;
353                 var year = calendar.date.getFullYear();
354                 var weekDay = calendar.date.getDay();
355                 var dayName = calendar.date.print('%A');
356                 var dayMonth = month + '/' + day;
357                 var dateString = year + '/' + month + '/' + day;
358                 if (calendar.dateClicked) {
359                         if (holidays[dateString] != null) {
360                                 showHoliday(0, dayName, day, month, year, weekDay, holidays[dateString].title,  holidays[dateString].description);
361                         } else if (exception_holidays[dateString] != null) {
362                                 showHoliday(0, dayName, day, month, year, weekDay, exception_holidays[dateString].title, exception_holidays[dateString].description);
363                         } else if (week_days[weekDay] != null) {
364                                 showHoliday(1, dayName, day, month, year, weekDay, week_days[weekDay].title,    week_days[weekDay].description);
365                         } else if (day_month_holidays[dayMonth] != null) {
366                                 showHoliday(1, dayName, day, month, year, weekDay, day_month_holidays[dayMonth].title, day_month_holidays[dayMonth].description);
367                         } else {
368                                 newHoliday(dayName, day, month, year, weekDay);
369                         }
370                 }
371         };
372         Calendar.setup(
373                 {
374                         flat : "calendar-container",
375                         flatCallback : dateChanged,
376                         dateStatusFunc : dateStatusHandler
377                 }
378         );
379 </script>
380 </div>
381 </div>
382 </div>
383 <div class="yui-b">
384 <!-- TMPL_INCLUDE NAME="tools-menu.inc" -->
385 </div>
386 </div>
387 <!-- TMPL_INCLUDE NAME="intranet-bottom.inc" -->