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

Last change on this file since 5907 was 5907, checked in by Nicklas Nordborg, 10 years ago

References #1655: GUI improvements

New design on some more pages:

  • Impersonate
  • Switch user
  • Calendar
  • Close popup message
  • Configure columns
  • Manage lists contexts
  • View help
  • Set owner
  • Share items
  • About
  • Property svn:eol-style set to native
  • Property svn:keywords set to Id
File size: 10.7 KB
Line 
1<%-- $Id: calendar.jsp 5907 2011-12-13 08:36:28Z nicklas $
2  ------------------------------------------------------------------
3  Copyright (C) 2005 Nicklas Nordborg
4  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
5
6  This file is part of BASE - BioArray Software Environment.
7  Available at http://base.thep.lu.se/
8
9  BASE is free software; you can redistribute it and/or
10  modify it under the terms of the GNU General Public License
11  as published by the Free Software Foundation; either version 3
12  of the License, or (at your option) any later version.
13
14  BASE is distributed in the hope that it will be useful,
15  but WITHOUT ANY WARRANTY; without even the implied warranty of
16  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
17  GNU General Public License for more details.
18
19  You should have received a copy of the GNU General Public License
20  along with BASE. If not, see <http://www.gnu.org/licenses/>.
21  ------------------------------------------------------------------
22
23  A window for selecting a date interactively from a calendar
24
25  @param title The title of the input field on the parent form
26  @param form The name of the form where the input field is located
27  @param input The name of the input field containing the current date value
28  @param callback A javascript function to call to set the date in the
29    opener's form (optional)
30
31  @author Nicklas
32  @version 2.0
33--%>
34<%@ page pageEncoding="UTF-8" session="false"
35  import="net.sf.basedb.core.SessionControl"
36  import="net.sf.basedb.util.Values"
37  import="net.sf.basedb.clients.web.Base"
38  import="net.sf.basedb.clients.web.util.HTML"
39  import="java.util.Date"
40%>
41<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
42<%
43  final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
44  String title = request.getParameter("title");
45  String form = request.getParameter("form");
46  String input = request.getParameter("input");
47  String callback = request.getParameter("callback");
48  boolean datetime = Values.getBoolean(request.getParameter("datetime"));
49  String format = Values.getString(request.getParameter("format"), datetime ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd");
50  final float scale = Base.getScale(sc);
51%>
52<base:page type="popup" title="<%=title%>">
53<base:head styles="calendar.css">
54  <script language="JavaScript">
55
56  var datetime = <%=datetime ? "1" : "0"%>;
57  var dateFormat = '<%=HTML.javaScriptEncode(format)%>';
58  var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
59  var currentDate;
60 
61  var calendarYear;
62  var calendarMonth;
63 
64  function init()
65  {
66    currentDate = getInitialDate();
67    showFullDate(currentDate);
68  }
69
70  function getInitialDate()
71  {
72    var frm = window.opener.document.forms['<%=form%>'];
73    var dateString = frm['<%=input%>'].value;
74    var date = Dates.parseString(dateString, '<%=HTML.javaScriptEncode(format)%>');
75    if (date == null) date = new Date();
76    return date;
77  }
78
79  function saveCurrentDate(notime)
80  {
81    var frm = document.forms['calendar'];
82    if (!validate())
83    {
84      return;
85    }
86    if (datetime && !notime)
87    {
88      currentDate.setHours(frm.hours.value);
89      currentDate.setMinutes(frm.minutes.value);
90      currentDate.setSeconds(frm.seconds.value);
91    }
92    var formattedDate = Dates.formatDate(currentDate, dateFormat);
93    <%
94    if (callback == null)
95    {
96      %>
97      var frm = window.opener.document.forms['<%=form%>'];
98      frm['<%=input%>'].value = formattedDate;
99      <%
100    }
101    else
102    {
103      %>
104      window.opener.<%=callback%>('<%=form%>', '<%=input%>', formattedDate);
105      <%
106    }
107    %>
108    window.close();
109  }
110 
111  function showFullDate(date, notime)
112  {
113    calendarYear = date.getFullYear();
114    calendarMonth = date.getMonth();
115   
116    var frm = document.forms['calendar'];
117    // Update month and year
118    document.getElementById('year').innerHTML = Dates.getFourDigitYear(date.getFullYear());
119    document.getElementById('month').innerHTML = MONTHS[date.getMonth()];
120    // Days in the month are displayed as a table
121    displayMonth(date.getFullYear(), date.getMonth(), currentDate);
122    // Time (if present) are regular input fields
123    if (datetime && !notime)
124    {
125      frm.hours.value = zeroPad(date.getHours());
126      frm.minutes.value = zeroPad(date.getMinutes());
127      frm.seconds.value = zeroPad(date.getSeconds());
128    }
129  }
130 
131  function zeroPad(value)
132  {
133    return value <= 9 ? '0' + value : value;
134  }
135
136  function setDate(date)
137  {
138    currentDate.setFullYear(date.getFullYear());
139    currentDate.setMonth(date.getMonth());
140    currentDate.setDate(date.getDate());
141    if (datetime)
142    {
143      showFullDate(currentDate, true);
144    }
145    else
146    {
147      saveCurrentDate();
148    }
149  }
150
151 
152  function setToday()
153  {
154    currentDate = new Date();
155    saveCurrentDate(true);
156  }
157 
158  function displayMonth(year, month, current)
159  {
160    var date = Dates.newDate(year, month, 1);
161    var today = new Date();
162    var firstDay = date.getDay();
163    firstDay = firstDay == 0 ? 6 : firstDay - 1;
164    var dayOfMonth = 1-firstDay;
165    var daysInMonth = Dates.daysInMonth(year, month+1);
166    for (var week = 1; week <= 6; week++) // >
167    {
168      for (var day = 0; day <= 6; day++) // >
169      {
170        var cell = document.getElementById('w'+week+'d'+day);
171        if (dayOfMonth < 1 || dayOfMonth > daysInMonth)
172        {
173          cell.firstChild.nodeValue = '';
174          cell.theDate = '';
175          Main.removeClass(cell, 'validdate');
176          if (day == 0 && week > 4) Main.hide('w' + week);
177        }
178        else
179        {
180          cell.firstChild.nodeValue = dayOfMonth;
181          cell.theDate = Dates.newDate(year, month, dayOfMonth);
182          Main.addClass(cell, 'validdate');
183          if (day == 0) Main.show('w' + week);
184        }
185        if (year == today.getFullYear() && month == today.getMonth() && dayOfMonth == today.getDate())
186        {
187          Main.addClass(cell, 'today');
188        }
189        else
190        {
191          Main.removeClass(cell, 'today');
192        }
193        if (year == current.getFullYear() && month == current.getMonth() && dayOfMonth == current.getDate())
194        {
195          Main.addClass(cell, 'current');
196        }
197        else
198        {
199          Main.removeClass(cell, 'current');
200        }
201        dayOfMonth++;
202      }
203    }
204  }
205 
206  function addToMonth(delta)
207  {
208    calendarMonth += delta;
209    if (calendarMonth < 0) 
210    {
211      calendarMonth = 11;
212      calendarYear--;
213    }
214    if (calendarMonth > 11)
215    {
216      calendarMonth = 0;
217      calendarYear++;
218    }
219    showFullDate(new Date(calendarYear, calendarMonth, 1));
220  }
221 
222  function addToHour(delta)
223  {
224    var frm = document.forms['calendar'];
225    var nextHour = parseInt(frm.hours.value, 10) + delta;
226    if (nextHour < 0) nextHour = 0;
227    if (nextHour > 23) nextHour = 23;
228    frm.hours.value = zeroPad(nextHour);
229  }
230
231  function addToMinute(delta)
232  {
233    var frm = document.forms['calendar'];
234    var nextMinute = parseInt(frm.minutes.value, 10) + delta;
235    if (nextMinute < 0) nextMinute = 0;
236    if (nextMinute > 59) nextMinute = 59;
237    frm.minutes.value = zeroPad(nextMinute);
238  }
239
240  function addToSecond(delta)
241  {
242    var frm = document.forms['calendar'];
243    var nextSecond = parseInt(frm.seconds.value, 10) + delta;
244    if (nextSecond < 0) nextSecond = 0;
245    if (nextSecond > 59) nextSecond = 59;
246    frm.seconds.value = zeroPad(nextSecond);
247  }
248
249  function showError(message)
250  {
251    alert(message);
252  }
253
254  function validate()
255  {
256    var frm = document.forms['calendar'];
257    if (datetime)
258    {
259      var hours = parseInt(frm.hours.value, 10);
260      if (hours < 0 || hours > 23)
261      {
262        frm.hours.focus();
263        showError('Hours must be a value between 0 and 23');
264        return false;
265      }
266      var minutes = parseInt(frm.minutes.value, 10);
267      if (minutes < 0 || minutes > 59)
268      {
269        frm.minutes.focus();
270        showError('Minutes must be a value between 0 and 59');
271        return false;
272      }
273      var seconds = parseInt(frm.seconds.value, 10);
274      if (seconds < 0 || seconds > 59)
275      {
276        frm.seconds.focus();
277        showError('Seconds must be a value between 0 and 59');
278        return false;
279      }
280    }
281    return true;
282  }
283  </script>
284</base:head>
285<base:body onload="init()">
286  <h1><%=title%><base:help helpid="calendar.selectday" /></h1>
287  <form name="calendar" onsubmit="return false;">
288  <div class="content filled">
289
290    <div style="position: absolute; top: 0px; left: 0px; right: 0px; height: 2em; text-align: center;">
291      <table style="height: 100%; margin:auto;"><tr><td>
292      <base:icon image="goback.png" onclick="addToMonth(-1)" />
293      </td>
294      <td style="width: 15em;">
295      <b>
296      <span id="month"></span>
297      <span id="year"></span>
298      </b>
299      </td>
300      <td>
301      <base:icon image="gonext.png" onclick="addToMonth(1)"/>
302      </td></tr></table>
303    </div>
304
305   
306    <div style="position: absolute; top: 2em; bottom: 2em; width: 100%;">
307    <table class="calendar">
308    <tr>
309      <td class="day">Mon</td>
310      <td class="day">Tue</td>
311      <td class="day">Wed</td>
312      <td class="day">Thu</td>
313      <td class="day">Fri</td>
314      <td class="day">Sat</td>
315      <td class="day">Sun</td>
316    </tr>
317    <%
318    for (int week = 1; week < 7; ++week)
319    {
320      %>
321      <tr id="w<%=week%>" style="max-height: 1.5em;">
322      <%
323      for (int day = 0; day < 7; ++day)
324      {
325        %>
326        <td id="w<%=week%>d<%=day%>" 
327          class="date <%=day==6 ? "sunday" : ""%>" 
328          onclick="if (this.theDate) setDate(this.theDate)"><%=day%></td>
329        <%
330      }
331      %>
332      </tr>
333      <%
334    }
335    %>
336    </table>
337    </div>
338    <%
339    if (datetime)
340    {
341      %>
342      <div style="position: absolute; height: 2em; left: 0px; right: 0px; bottom: 0em; text-align: center;">
343      <table style="height: 100%; margin:auto;">
344      <tr>
345        <td class="time">Time</td>
346        <td><input class="text" type="text" name="hours" title="Hours" size="2" maxlength="2" 
347          onkeypress="return Numbers.integerOnly(event)"></td>
348        <td style="width: 1.5em;">
349          <table>
350          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToHour(1)" tooltip="Add one hour"/></td></tr>
351          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToHour(-1)" tooltip="Subtract one hour"/></td></tr>
352          </table>
353        </td>
354        <td><input class="text" type="text" name="minutes" title="Minutes" size="2" maxlength="2" 
355          onkeypress="return Numbers.integerOnly(event)"></td>
356        <td style="width: 1.5em;">
357          <table>
358          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToMinute(1)" tooltip="Add one minute"/></td></tr>
359          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToMinute(-1)" tooltip="Subtract one minute"/></td></tr>
360          </table>
361        </td>
362        <td><input class="text" type="text" name="seconds" title="Seconds" size="2" maxlength="2" 
363          onkeypress="return Numbers.integerOnly(event)"></td>
364        <td style="width: 1.5em;">
365          <table>
366          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToSecond(1)" tooltip="Add one second"/></td></tr>
367          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToSecond(-1)" tooltip="Subtract one second"/></td></tr>
368          </table>
369        </td>
370      </tr>
371      </table>
372      </div>
373      <%
374    }
375    %>
376  </div>
377  </form>
378 
379 
380  <base:buttongroup subclass="dialogbuttons">
381    <base:button image="today.png" onclick="setToday()" title="<%=datetime ? "Now" : "Today"%>" />
382    <base:button onclick="saveCurrentDate()" title="Ok" visible="<%=datetime%>"/>
383    <base:button onclick="window.close()" title="Cancel" />
384  </base:buttongroup>
385</base:body>
386</base:page>
Note: See TracBrowser for help on using the repository browser.