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

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

References #1655: GUI improvements

  • Added a CacheControlFilter which can be configured to disable caching for certain file types. This is very useful in a development environment, but not recommended in production.
  • Redesigned buttons with rounded corners.


  • Use more modern css rules for buttons and button groups. Got rid of "align" attribute that is deprecated in html.


  • Place buttons in popup dialogs using coordinates

relative to the bottom of the dialog so that they follow along if the dialog is resized. Only the popups in the "BASE" menu has been fixed so far.

Due to changes in css files, some other layout is now really "ugly", but this will be fixed later...

  • Property svn:eol-style set to native
  • Property svn:keywords set to Id
File size: 11.9 KB
Line 
1<%-- $Id: calendar.jsp 5900 2011-12-07 13:43:15Z 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 currentDate;
59  function init()
60  {
61    currentDate = getInitialDate();
62    showFullDate(currentDate);
63  }
64
65  function getInitialDate()
66  {
67    var frm = window.opener.document.forms['<%=form%>'];
68    var dateString = frm['<%=input%>'].value;
69    var date = Dates.parseString(dateString, '<%=HTML.javaScriptEncode(format)%>');
70    if (date == null) date = new Date();
71    return date;
72  }
73
74  function saveCurrentDate()
75  {
76    var frm = document.forms['calendar'];
77    if (!validate())
78    {
79      alert(document.getElementById('error').innerHTML);
80      return;
81    }
82    var formattedDate = Dates.formatDate(currentDate, dateFormat);
83    <%
84    if (callback == null)
85    {
86      %>
87      var frm = window.opener.document.forms['<%=form%>'];
88      frm['<%=input%>'].value = formattedDate;
89      <%
90    }
91    else
92    {
93      %>
94      window.opener.<%=callback%>('<%=form%>', '<%=input%>', formattedDate);
95      <%
96    }
97    %>
98    window.close();
99  }
100 
101  function showFullDate(date)
102  {
103    var frm = document.forms['calendar'];
104    // Year is a regular input field
105    frm.year.value = Dates.getFourDigitYear(date.getFullYear());
106    // Month is a selection list
107    Forms.selectListOption(frm.month, date.getMonth());
108    // Days in the month are displayed as a table
109    displayMonth(date.getFullYear(), date.getMonth(), date);
110    // Time (if present) are regular input fields
111    if (datetime)
112    {
113      frm.hours.value = zeroPad(date.getHours());
114      frm.minutes.value = zeroPad(date.getMinutes());
115      frm.seconds.value = zeroPad(date.getSeconds());
116    }
117    // Finally, a complete formatted date is created
118    document.getElementById('current').innerHTML = Dates.formatDate(date, dateFormat);
119  }
120 
121  function zeroPad(value)
122  {
123    return value <= 9 ? '0' + value : value;
124  }
125
126  function setDate(date)
127  {
128    if (!validate()) return;
129    currentDate.setFullYear(date.getFullYear());
130    currentDate.setMonth(date.getMonth());
131    currentDate.setDate(date.getDate());
132    if (datetime)
133    {
134      showFullDate(currentDate);
135    }
136    else
137    {
138      saveCurrentDate();
139    }
140  }
141
142  function setTime()
143  {
144    if (!validate()) return;
145    var frm = document.forms['calendar'];
146    currentDate.setHours(frm.hours.value);
147    currentDate.setMinutes(frm.minutes.value);
148    currentDate.setSeconds(frm.seconds.value);
149    document.getElementById('current').innerHTML = Dates.formatDate(currentDate, dateFormat);
150  }
151 
152  function setToday()
153  {
154    currentDate = new Date();
155    saveCurrentDate();
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 changeMonth()
207  {
208    if (!validate()) return;
209    var frm = document.forms['calendar'];
210    var month = Number(frm.month[frm.month.selectedIndex].value);
211    var year = Number(frm.year.value);
212    displayMonth(year, month, currentDate);
213  }
214
215  function addToYear(delta)
216  {
217    var frm = document.forms['calendar'];
218    var nextYear = parseInt(frm.year.value, 10) + delta;
219    frm.year.value = nextYear;
220    changeMonth();
221  }
222 
223  function addToHour(delta)
224  {
225    var frm = document.forms['calendar'];
226    var nextHour = parseInt(frm.hours.value, 10) + delta;
227    if (nextHour < 0) nextHour = 0;
228    if (nextHour > 23) nextHour = 23;
229    frm.hours.value = zeroPad(nextHour);
230    setTime();
231  }
232
233  function addToMinute(delta)
234  {
235    var frm = document.forms['calendar'];
236    var nextMinute = parseInt(frm.minutes.value, 10) + delta;
237    if (nextMinute < 0) nextMinute = 0;
238    if (nextMinute > 59) nextMinute = 59;
239    frm.minutes.value = zeroPad(nextMinute);
240    setTime();
241  }
242
243  function addToSecond(delta)
244  {
245    var frm = document.forms['calendar'];
246    var nextSecond = parseInt(frm.seconds.value, 10) + delta;
247    if (nextSecond < 0) nextSecond = 0;
248    if (nextSecond > 59) nextSecond = 59;
249    frm.seconds.value = zeroPad(nextSecond);
250    setTime();
251  }
252
253  function showError(message)
254  {
255    document.getElementById('error').innerHTML = message;
256    Main.show('error');
257    Main.hide('current');
258  }
259
260  function validate()
261  {
262    var frm = document.forms['calendar'];
263    if (frm.year.value.length != 4)
264    {
265      showError('Year must have four digits');
266      return false;
267    }
268    if (datetime)
269    {
270      var hours = parseInt(frm.hours.value, 10);
271      if (hours < 0 || hours > 23)
272      {
273        showError('Hours must be a value between 0 and 23');
274        return false;
275      }
276      var minutes = parseInt(frm.minutes.value, 10);
277      if (minutes < 0 || minutes > 59)
278      {
279        showError('Minutes must be a value between 0 and 59');
280        return false;
281      }
282      var seconds = parseInt(frm.seconds.value, 10);
283      if (seconds < 0 || seconds > 59)
284      {
285        showError('Seconds must be a value between 0 and 59');
286        return false;
287      }
288    }
289    Main.hide('error');
290    Main.show('current');
291    return true;
292  }
293  </script>
294</base:head>
295<base:body onload="init()">
296  <form name="calendar" onsubmit="return false;">
297  <h3 class="docked"><%=title%><base:help helpid="calendar.selectday" /></h3>
298  <div class="boxed">
299
300    <table width="100%" border="0" cellspacing=0 cellpadding=0 style="margin-bottom: 4px;" >
301    <tr>
302    <td>
303    <select name="month" onchange="changeMonth();">
304      <option value="0">January
305      <option value="1">February
306      <option value="2">March
307      <option value="3">April
308      <option value="4">May
309      <option value="5">June
310      <option value="6">July
311      <option value="7">August
312      <option value="8">September
313      <option value="9">October
314      <option value="10">November
315      <option value="11">December
316    </select>
317    </td>
318    <td style="text-align: right;">
319      <input type="text" class="text" name="year" size="4" maxlength="4" 
320        onkeypress="return Numbers.integerOnly(event);"
321        onkeyup="changeMonth()">
322    </td>
323    <td width="12px">
324      <table border="0" cellspacing="2" cellpadding="0">
325      <tr><td><base:icon image="mini_scroll_up.png" onclick="addToYear(1)" tooltip="Next year"/></td></tr>
326      <tr><td><base:icon image="mini_scroll_down.png" onclick="addToYear(-1)" tooltip="Previous year"/></td></tr>
327      </table>
328    </td>
329    </tr>
330    </table>
331    <div style="min-height: <%=(int)(scale*130)%>px;">
332    <table width="100%" border=0 cellspacing=0 cellpadding=0 class="calendar">
333    <tr>
334     
335      <td class="day">Mon</td>
336      <td class="day">Tue</td>
337      <td class="day">Wed</td>
338      <td class="day">Thu</td>
339      <td class="day">Fri</td>
340      <td class="day">Sat</td>
341      <td class="day">Sun</td>
342    </tr>
343    <%
344    for (int week = 1; week < 7; ++week)
345    {
346      %>
347      <tr id="w<%=week%>">
348      <%
349      for (int day = 0; day < 7; ++day)
350      {
351        %>
352        <td id="w<%=week%>d<%=day%>" 
353          class="date <%=day==6 ? "sunday" : ""%>" 
354          onclick="if (this.theDate) setDate(this.theDate)"><%=day%></td>
355        <%
356      }
357      %>
358      </tr>
359      <%
360    }
361    %>
362    </table>
363    </div>
364    <%
365    if (datetime)
366    {
367      %>
368      <table border="0" cellspacing=2 cellpadding=0 align="center" style="padding-top: 4px;">
369      <tr>
370        <td class="time">Time</td>
371        <td><input class="text" type="text" name="hours" title="Hours" size="2" maxlength="2" 
372          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
373        <td width="12px">
374          <table border="0" cellspacing="1" cellpadding="0">
375          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToHour(1)" tooltip="Add one hour"/></td></tr>
376          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToHour(-1)" tooltip="Subtract one hour"/></td></tr>
377          </table>
378        </td>
379        <td><input class="text" type="text" name="minutes" title="Minutes" size="2" maxlength="2" 
380          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
381        <td width="12px">
382          <table border="0" cellspacing="1" cellpadding="0">
383          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToMinute(1)" tooltip="Add one minute"/></td></tr>
384          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToMinute(-1)" tooltip="Subtract one minute"/></td></tr>
385          </table>
386        </td>
387        <td><input class="text" type="text" name="seconds" title="Seconds" size="2" maxlength="2" 
388          onkeypress="return Numbers.integerOnly(event)" onblur="setTime()"></td>
389        <td width="12px">
390          <table border="0" cellspacing="1" cellpadding="0">
391          <tr><td><base:icon image="mini_scroll_up.png" onclick="addToSecond(1)" tooltip="Add one second"/></td></tr>
392          <tr><td><base:icon image="mini_scroll_down.png" onclick="addToSecond(-1)" tooltip="Subtract one second"/></td></tr>
393          </table>
394        </td>
395      </tr>
396      </table>
397      <%
398    }
399    %>
400  </div>
401  </form>
402  <p></p>
403  <div id="error" class="error" style="display: none;"></div>
404  <div id="current" style="text-align: center; font-weight: bold;"></div>
405  <base:buttongroup>
406    <base:button image="today.png" onclick="setToday()" title="<%=datetime ? "Now" : "Today"%>" />
407    <base:button onclick="saveCurrentDate()" title="Ok" visible="<%=datetime%>"/>
408    <base:button onclick="window.close()" title="Cancel" />
409  </base:buttongroup>
410</base:body>
411</base:page>
Note: See TracBrowser for help on using the repository browser.