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