source: trunk/www/common/calendar.jsp @ 5425

<%-- $Id: calendar.jsp 5425 2010-09-23 13:30:07Z nicklas $
  ------------------------------------------------------------------
  Copyright (C) 2005 Nicklas Nordborg
  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg

  This file is part of BASE - BioArray Software Environment.
  Available at http://base.thep.lu.se/

  BASE is free software; you can redistribute it and/or
  modify it under the terms of the GNU General Public License
  as published by the Free Software Foundation; either version 3
  of the License, or (at your option) any later version.

  BASE is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with BASE. If not, see <http://www.gnu.org/licenses/>.
  ------------------------------------------------------------------

  A window for selecting a date interactively from a calendar

  @param title The title of the input field on the parent form
  @param form The name of the form where the input field is located
  @param input The name of the input field containing the current date value
  @param callback A javascript function to call to set the date in the
    opener's form (optional)

  @author Nicklas
  @version 2.0
--%>
<%@ page session="false"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="java.util.Date"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%
  final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
  String title = request.getParameter("title");
  String form = request.getParameter("form");
  String input = request.getParameter("input");
  String callback = request.getParameter("callback");
  boolean datetime = Values.getBoolean(request.getParameter("datetime"));
  String format = Values.getString(request.getParameter("format"), datetime ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd");
  final float scale = Base.getScale(sc);
%>
<base:page type="popup" title="<%=title%>">
<base:head styles="calendar.css?x">
  <script language="JavaScript">

  var datetime = <%=datetime ? "1" : "0"%>;
  var dateFormat = '<%=HTML.javaScriptEncode(format)%>';
  var currentDate;
  function init()
  {
    currentDate = getInitialDate();
    showFullDate(currentDate);
  }

  function getInitialDate()
  {
    var frm = window.opener.document.forms['<%=form%>'];
    var dateString = frm['<%=input%>'].value;
    var date = Dates.parseString(dateString, '<%=HTML.javaScriptEncode(format)%>');
    if (date == null) date = new Date();
    return date;
  }

  function saveCurrentDate()
  {
    var frm = document.forms['calendar'];
    if (!validate())
    {
      alert(document.getElementById('error').innerHTML);
      return;
    }
    var formattedDate = Dates.formatDate(currentDate, dateFormat);
    <%
    if (callback == null)
    {
      %>
      var frm = window.opener.document.forms['<%=form%>'];
      frm['<%=input%>'].value = formattedDate;
      <%
    }
    else
    {
      %>
      window.opener.<%=callback%>('<%=form%>', '<%=input%>', formattedDate);
      <%
    }
    %>
    window.close();
  }
  
  function showFullDate(date)
  {
    var frm = document.forms['calendar'];
    // Year is a regular input field
    frm.year.value = Dates.getFourDigitYear(date.getFullYear());
    // Month is a selection list
    Forms.selectListOption(frm.month, date.getMonth());
    // Days in the month are displayed as a table
    displayMonth(date.getFullYear(), date.getMonth(), date);
    // Time (if present) are regular input fields
    if (datetime)
    {
      frm.hours.value = zeroPad(date.getHours());
      frm.minutes.value = zeroPad(date.getMinutes());
      frm.seconds.value = zeroPad(date.getSeconds());
    }
    // Finally, a complete formatted date is created
    document.getElementById('current').innerHTML = Dates.formatDate(date, dateFormat);
  }
  
  function zeroPad(value)
  {
    return value <= 9 ? '0' + value : value;
  }

  function setDate(date)
  {
    if (!validate()) return;
    currentDate.setFullYear(date.getFullYear());
    currentDate.setMonth(date.getMonth());
    currentDate.setDate(date.getDate());
    if (datetime)
    {
      showFullDate(currentDate);
    }
    else
    {
      saveCurrentDate();
    }
  }

  function setTime()
  {
    if (!validate()) return;
    var frm = document.forms['calendar'];
    currentDate.setHours(frm.hours.value);
    currentDate.setMinutes(frm.minutes.value);
    currentDate.setSeconds(frm.seconds.value);
    document.getElementById('current').innerHTML = Dates.formatDate(currentDate, dateFormat);
  }
  
  function setToday()
  {
    currentDate = new Date();
    saveCurrentDate();
  }
  
  function displayMonth(year, month, current)
  {
    var date = Dates.newDate(year, month, 1);
    var today = new Date();
    var firstDay = date.getDay();
    firstDay = firstDay == 0 ? 6 : firstDay - 1;
    var dayOfMonth = 1-firstDay;
    var daysInMonth = Dates.daysInMonth(year, month+1);
    for (var week = 1; week <= 6; week++) // >
    {
      for (var day = 0; day <= 6; day++) // >
      {
        var cell = document.getElementById('w'+week+'d'+day);
        if (dayOfMonth < 1 || dayOfMonth > daysInMonth)
        {
          cell.firstChild.nodeValue = '';
          cell.theDate = '';
          if (day == 0 && week > 4) Main.hide('w' + week);
        }
        else
        {
          cell.firstChild.nodeValue = dayOfMonth;
          cell.theDate = Dates.newDate(year, month, dayOfMonth);
          if (day == 0) Main.show('w' + week);
        }
        if (year == today.getFullYear() && month == today.getMonth() && dayOfMonth == today.getDate())
        {
          Main.addClass(cell, 'today');
        }
        else
        {
          Main.removeClass(cell, 'today');
        }
        if (year == current.getFullYear() && month == current.getMonth() && dayOfMonth == current.getDate())
        {
          Main.addClass(cell, 'current');
        }
        else
        {
          Main.removeClass(cell, 'current');
        }
        dayOfMonth++;
      }
    }
  }
  
  function changeMonth()
  {
    if (!validate()) return;
    var frm = document.forms['calendar'];
    var month = Number(frm.month[frm.month.selectedIndex].value);
    var year = Number(frm.year.value);
    displayMonth(year, month, currentDate);
  }

  function addToYear(delta)
  {
    var frm = document.forms['calendar'];
    var nextYear = parseInt(frm.year.value, 10) + delta;
    frm.year.value = nextYear;
    changeMonth();
  }
  
  function addToHour(delta)
  {
    var frm = document.forms['calendar'];
    var nextHour = parseInt(frm.hours.value, 10) + delta;
    if (nextHour < 0) nextHour = 0;
    if (nextHour > 23) nextHour = 23;
    frm.hours.value = zeroPad(nextHour);
    setTime();
  }

  function addToMinute(delta)
  {
    var frm = document.forms['calendar'];
    var nextMinute = parseInt(frm.minutes.value, 10) + delta;
    if (nextMinute < 0) nextMinute = 0;
    if (nextMinute > 59) nextMinute = 59;
    frm.minutes.value = zeroPad(nextMinute);
    setTime();
  }

  function addToSecond(delta)
  {
    var frm = document.forms['calendar'];
    var nextSecond = parseInt(frm.seconds.value, 10) + delta;
    if (nextSecond < 0) nextSecond = 0;
    if (nextSecond > 59) nextSecond = 59;
    frm.seconds.value = zeroPad(nextSecond);
    setTime();
  }

  function showError(message)
  {
    document.getElementById('error').innerHTML = message;
    Main.show('error');
    Main.hide('current');
  }

  function validate()
  {
    var frm = document.forms['calendar'];
    if (frm.year.value.length != 4) 
    {
      showError('Year must have four digits');
      return false;
    }
    if (datetime)
    {
      var hours = parseInt(frm.hours.value, 10);
      if (hours < 0 || hours > 23)
      {
        showError('Hours must be a value between 0 and 23');
        return false;
      }
      var minutes = parseInt(frm.minutes.value, 10);
      if (minutes < 0 || minutes > 59)
      {
        showError('Minutes must be a value between 0 and 59');
        return false;
      }
      var seconds = parseInt(frm.seconds.value, 10);
      if (seconds < 0 || seconds > 59)
      {
        showError('Seconds must be a value between 0 and 59');
        return false;
      }
    }
    Main.hide('error');
    Main.show('current');
    return true;
  }
  </script>
</base:head>
<base:body onload="init()">
  <form name="calendar" onsubmit="return false;">
  <h3 class="docked"><%=title%><base:help helpid="calendar.selectday" /></h3>
  <div class="boxed">

    <table width="100%" border="0" cellspacing=0 cellpadding=0 style="margin-bottom: 4px;" >
    <tr>
    <td>
    <select name="month" onchange="changeMonth();">
      <option value="0">January
      <option value="1">February
      <option value="2">March
      <option value="3">April
      <option value="4">May
      <option value="5">June
      <option value="6">July
      <option value="7">August
      <option value="8">September
      <option value="9">October
      <option value="10">November
      <option value="11">December
    </select>
    </td>
    <td style="text-align: right;">
      <input type="text" class="text" name="year" size="4" maxlength="4" 
        onkeypress="return Numbers.integerOnly(event);"
        onkeyup="changeMonth()">
    </td>
    <td width="12px">
      <table border="0" cellspacing="2" cellpadding="0">
      <tr><td><base:icon image="mini_scroll_up.png" onclick="addToYear(1)" tooltip="Next year"/></td></tr>
      <tr><td><base:icon image="mini_scroll_down.png" onclick="addToYear(-1)" tooltip="Previous year"/></td></tr>
      </table>
    </td>
    </tr>
    </table>
    <div style="min-height: <%=(int)(scale*130)%>px;">
    <table width="100%" border=0 cellspacing=0 cellpadding=0 class="calendar">
    <tr>
      
      <td class="day">Mon</td>
      <td class="day">Tue</td>
      <td class="day">Wed</td>
      <td class="day">Thu</td>
      <td class="day">Fri</td>
      <td class="day">Sat</td>
      <td class="day">Sun</td>
    </tr>
    <%
    for (int week = 1; week < 7; ++week)
    {
      %>
      <tr id="w<%=week%>">
      <%
      for (int day = 0; day < 7; ++day)
      {
        %>
        <td id="w<%=week%>d<%=day%>" 
          class="date <%=day==6 ? "sunday" : ""%>" 
          onmouseover="if (this.theDate) Main.addClass(this, 'hover')" 
          onmouseout="Main.removeClass(this, 'hover');"
          onclick="if (this.theDate) setDate(this.theDate)"><%=day%></td>
        <%
      }
      %>
      </tr>
      <%
    }
    %>
    </table>
    </div>
    <%
    if (datetime)
    {
      %>
      <table border="0" cellspacing=2 cellpadding=0 align="center" style="padding-top: 4px;">
      <tr>
        <td class="time">Time</td>
        <td><input class="text" type="text" name="hours" title="Hours" size="2" maxlength="2" 
          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
        <td width="12px">
          <table border="0" cellspacing="1" cellpadding="0">
          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToHour(1)" tooltip="Add one hour"/></td></tr>
          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToHour(-1)" tooltip="Subtract one hour"/></td></tr>
          </table>
        </td>
        <td><input class="text" type="text" name="minutes" title="Minutes" size="2" maxlength="2" 
          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
        <td width="12px">
          <table border="0" cellspacing="1" cellpadding="0">
          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToMinute(1)" tooltip="Add one minute"/></td></tr>
          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToMinute(-1)" tooltip="Subtract one minute"/></td></tr>
          </table>
        </td>
        <td><input class="text" type="text" name="seconds" title="Seconds" size="2" maxlength="2" 
          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
        <td width="12px">
          <table border="0" cellspacing="1" cellpadding="0">
          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToSecond(1)" tooltip="Add one second"/></td></tr>
          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToSecond(-1)" tooltip="Subtract one second"/></td></tr>
          </table>
        </td>
      </tr>
      </table>
      <%
    }
    %>
  </div>
  </form>
  <p></p>
  <div id="error" class="error" style="display: none;"></div>
  <div id="current" style="text-align: center; font-weight: bold;"></div>
  <base:buttongroup align="center">
    <base:button image="today.png" onclick="setToday()" title="<%=datetime ? "Now" : "Today"%>" />
    <base:button onclick="saveCurrentDate()" title="Ok" visible="<%=datetime%>"/>
    <base:button onclick="window.close()" title="Cancel" />
  </base:buttongroup>
</base:body>
</base:page>