Changeset 5423

Timestamp:

Sep 23, 2010, 11:09:55 AM (12 years ago)

Author:

Nicklas Nordborg

Message:

References #1512: Add support for datetime annotation types

Makes it possible to crete TIMESTAMP annotation types and to enter values for them.

This is basically 3) in the ticket description.

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/formatter/FormatterFactory.java (modified) (1 diff)
• www/admin/annotationtypes/edit_annotationtype.jsp (modified) (4 diffs)
• www/admin/annotationtypes/list_annotationtypes.jsp (modified) (2 diffs)
• www/admin/annotationtypes/view_annotationtype.jsp (modified) (3 diffs)
• www/common/annotations/annotate.jsp (modified) (5 diffs)
• www/common/calendar.jsp (modified) (10 diffs)
• www/images/mini_scroll_down.png (added)
• www/images/mini_scroll_up.png (added)
• www/include/scripts/main.js (modified) (1 diff)
• www/include/styles/calendar.css (modified) (2 diffs)

trunk/src/clients/web/net/sf/basedb/clients/web/formatter/FormatterFactory.java

@@ -262 +262 @@
       return getDateFormatter(sc);
     }
+    else if (type == Type.TIMESTAMP)
+    {
+      return getDateTimeFormatter(sc);
+    }
     else if (type == Type.BOOLEAN)
     {

trunk/www/admin/annotationtypes/edit_annotationtype.jsp

@@ -2 +2 @@
   ------------------------------------------------------------------
   Copyright (C) 2005 Nicklas Nordborg
-  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
+  Copyright (C) 2006 Jari H�kkinen, Nicklas Nordborg
 
   This file is part of BASE - BioArray Software Environment.
@@ -132 +132 @@
   String jsDateFormat = HTML.javaScriptEncode(dateFormat);
   String htmlDateFormat = HTML.encodeTags(dateFormat);
+  
+  Formatter<Date> dateTimeFormatter = FormatterFactory.getDateTimeFormatter(sc);
+  String dateTimeFormat = FormatterSettings.getDateTimeFormat(sc);
+  String jsDateTimeFormat = HTML.javaScriptEncode(dateTimeFormat);
+  String htmlDateTimeFormat = HTML.encodeTags(dateTimeFormat);
   %>
   <base:page type="popup" title="<%=title%>">
@@ -483 +488 @@
             <%
           }
+          else if (valueType == Type.TIMESTAMP)
+          {
+            %>
+            <table border="0" cellspacing="0" cellpadding="0">
+            <tr>
+            <td>
+              <input <%=clazz%> type="text" name="defaultValue" 
+                value="<%=HTML.encodeTags(defaultValue)%>" 
+                size="30" maxlength="30 "title="Enter date in format: <%=htmlDateTimeFormat%>">&nbsp;
+            </td>
+            <td>
+              <base:button 
+                onclick="<%="Dates.selectDateTime('Default value', 'annotationType', 'defaultValue', null, '"+jsDateTimeFormat+"')"%>" 
+                image="calendar.png"
+                title="Calendar&hellip;" 
+                tooltip="Select a date and time from a calendar" 
+              />
+            </td>
+            </tr>
+            </table>
+            <%
+          }
           else if (valueType == Type.STRING)
           {
@@ -711 +738 @@
             <a href="javascript:Main.zoom('Values', 'annotationtype', 'values')" title="Edit in larger window"><base:icon image="zoom.gif" /></a><br>
             One date value (<%=htmlDateFormat%>) per line
+          </td>
+        </tr>
+        <%
+      }
+      else if (valueType == Type.TIMESTAMP)
+      {
+        %>
+        <tr>
+          <td class="prompt">Input box width</td>
+          <td>
+            <input <%=clazz%> type="text" name="width" 
+              value="<%=annotationType == null ? "" : annotationType.getWidth()%>" 
+              size="12" maxlength="10" onkeypress="return Numbers.integerOnly(event)">
           </td>
         </tr>

trunk/www/admin/annotationtypes/list_annotationtypes.jsp

@@ -1 +1 @@
 <%-- $Id$
   ------------------------------------------------------------------
-  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg, Martin Svensson
+  Copyright (C) 2006 Jari H�kkinen, Nicklas Nordborg, Martin Svensson
   Copyright (C) 2007 Johan Enell, Nicklas Nordborg, Martin Svensson
 
@@ -612 +612 @@
                   /></tbl:cell>
                 <tbl:cell column="isEnumeration"><%=item.isEnumeration() ? 
-                  HTML.encodeTags(Values.getString(item.getValues(), ", ", true)) : 
+                  HTML.encodeTags(Values.getString((List)item.getValues(), ", ", true, (Formatter)FormatterFactory.getTypeFormatter(sc, item.getValueType()) )) : 
                   "<i>- no -</i>"%></tbl:cell>
                 <tbl:cell column="requiredForMiame"><%=item.isRequiredForMiame() ? "yes" : "no"%></tbl:cell>

trunk/www/admin/annotationtypes/view_annotationtype.jsp

@@ -1 +1 @@
 <%-- $Id$
   ------------------------------------------------------------------
-  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg, Martin Svensson
+  Copyright (C) 2006 Jari H�kkinen, Nicklas Nordborg, Martin Svensson
   Copyright (C) 2007 Martin Svensson
 
@@ -63 +63 @@
   import="java.util.Date"
   import="java.util.Set"
+  import="java.util.List"
 %>
 <%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
@@ -283 +284 @@
         <td class="prompt">Enumeration</td>
         <td><%=annotationType.isEnumeration() ? 
-          HTML.encodeTags(Values.getString(annotationType.getValues(), ", ", true, 
-            annotationType.getValueType() == Type.DATE ? dateFormatter : null)) : "no"%></td>
+          HTML.encodeTags(Values.getString((List)annotationType.getValues(), ", ", true, 
+            (Formatter)FormatterFactory.getTypeFormatter(sc, annotationType.getValueType()))) : "no"%></td>
       </tr>
       <tr>

trunk/www/common/annotations/annotate.jsp

@@ -2 +2 @@
   ------------------------------------------------------------------
   Copyright (C) 2005 Nicklas Nordborg
-  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
+  Copyright (C) 2006 Jari H�kkinen, Nicklas Nordborg
   Copyright (C) 2007 Nicklas Nordborg
 
@@ -88 +88 @@
   String htmlDateFormat = HTML.encodeTags(dateFormat);
 
+  Formatter<Date> dateTimeFormatter = FormatterFactory.getDateTimeFormatter(sc);
+  String dateTimeFormat = FormatterSettings.getDateTimeFormat(sc);
+  String jsDateTimeFormat = HTML.javaScriptEncode(dateTimeFormat);
+  String htmlDateTimeFormat = HTML.encodeTags(dateTimeFormat);
+  
   final Annotatable item = itemId == 0 ? null : (Annotatable)itemType.getById(dc, itemId);
   final boolean writePermission = item == null ? true : item.hasPermission(Permission.WRITE);
@@ -190 +195 @@
       List values = null;
       Unit unit = at.getDefaultUnit();
+      Type valueType = at.getValueType();
       if (existing != null && existing.containsKey(at))
       {
@@ -206 +212 @@
         for (Object value : values)
         {
-          if (value instanceof Date) value = dateFormatter.format((Date)value);
+          if (value instanceof Date) 
+          {
+            if (valueType == Type.TIMESTAMP)
+            {
+              value = dateTimeFormatter.format((Date)value);
+            }
+            else
+            {
+              value = dateFormatter.format((Date)value);
+            }
+          }
           %>
           values[values.length] = '<%=HTML.javaScriptEncode(value.toString())%>';
@@ -807 +823 @@
             <%
           }
+          else if (valueType == Type.TIMESTAMP)
+          {
+            %>
+            <table>
+            <tr>
+            <td>
+              <b><%=HTML.encodeTags(at.getName())%></b> (Timestamp)<br>
+              <input <%=clazz%> type="text" name="<%=inputName%>" value=""
+                size="30" maxlength="30" title="Enter date + time in format: <%=htmlDateTimeFormat%>"
+                onblur="valueOnBlur(this.value)">
+            </td>
+            <td>
+                <br>
+                <base:button 
+                  onclick="<%="Dates.selectDateTime('Value', 'annotations', '"+inputName+"', 'setDateCallback', '"+jsDateTimeFormat+"')"%>" 
+                  image="calendar.png"
+                  title="Calendar&hellip;" 
+                  tooltip="Select date and time from a calendar" 
+                />
+            </td>
+            </tr>
+            </table>
+            <%
+          }
           if (at.supportUnits() && !at.isEnumeration())
           {

trunk/www/common/calendar.jsp

@@ -2 +2 @@
   ------------------------------------------------------------------
   Copyright (C) 2005 Nicklas Nordborg
-  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
+  Copyright (C) 2006 Jari H�kkinen, Nicklas Nordborg
 
   This file is part of BASE - BioArray Software Environment.
@@ -33 +33 @@
 --%>
 <%@ 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"
@@ -39 +41 @@
 <%@ 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");
-  String format = Values.getString(request.getParameter("format"), "yyyy-MM-dd");
+  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">
+<base:head styles="calendar.css?x">
   <script language="JavaScript">
+
+  var datetime = <%=datetime ? "1" : "0"%>;
+  var dateFormat = '<%=HTML.javaScriptEncode(format)%>';
+  var currentDate;
   function init()
   {
-    var date = getDate();
-    var frm = document.forms['calendar'];
-    Forms.selectListOption(frm.month, date.getMonth());
-    frm.year.value = Dates.getFourDigitYear(date.getFullYear());
-    displayMonth(date.getFullYear(), date.getMonth(), date);
-  }
-  
-  function getDate()
+    currentDate = getInitialDate();
+    showFullDate(currentDate);
+  }
+
+  function getInitialDate()
   {
     var frm = window.opener.document.forms['<%=form%>'];
@@ -65 +71 @@
     return date;
   }
-  
-  function setDate(theDate)
-  {
-    var formattedDate = Dates.formatDate(theDate, '<%=HTML.javaScriptEncode(format)%>');
+
+  function saveCurrentDate()
+  {
+    var frm = document.forms['calendar'];
+    if (!validate())
+    {
+      alert(document.getElementById('error').innerHTML);
+      return;
+    }
+    var formattedDate = Dates.formatDate(currentDate, dateFormat);
     <%
     if (callback == null)
@@ -87 +99 @@
   }
   
+  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()
   {
-    setDate(new Date());
+    currentDate = new Date();
+    saveCurrentDate();
   }
   
@@ -107 +171 @@
         if (dayOfMonth < 1 || dayOfMonth > daysInMonth)
         {
-          cell.firstChild.nodeValue = ' ';
+          cell.firstChild.nodeValue = '';
           cell.theDate = '';
+          if (day == 0 && week > 4) Main.hide('w' + week);
         }
         else
@@ -114 +179 @@
           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())
@@ -138 +204 @@
   function changeMonth()
   {
-    var frm = document.forms['calendar'];
-    if (frm.year.value.length != 4) 
-    {
-      Main.showInline('invalidyear');
-      return;
-    }
-    else
-    {
-      Main.hide('invalidyear');
-    }
+    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, getDate());
-  }
-  
+    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="changeMonth(); return false;">
+  <form name="calendar" onsubmit="return false;">
   <h3 class="docked"><%=title%><base:help helpid="calendar.selectday" /></h3>
   <div class="boxed">
@@ -179 +315 @@
     </td>
     <td style="text-align: right;">
-      <span id="invalidyear" class="error" style="display: none;">Year must have 4 digits!</span>
       <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>
@@ -220 +361 @@
     %>
     </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>
-  <table align="center">
-  <tr>
-    <td><base:button image="today.png" onclick="setToday()" title="Today" /></td>
-    <td><base:button onclick="window.close()" title="Cancel" /></td>
-  </tr>
-  </table>
+  <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>

trunk/www/include/scripts/main.js

@@ -1366 +1366 @@
     url += '&ID='+getSessionId();
     if (callback) url += '&callback='+callback;
-    Main.openPopup(url, title.replace(/[^\w]/, ''), 350, 240);
-  }
+    Main.openPopup(url, title.replace(/[^\w]/, ''), 440, 340);
+  }
+
+  /*
+    Opens a popup window allowing a user to select a date and time graphically. The 
+    current value is taken from the specified input field of the specified form and 
+    is saved back to it when the window is closed.
+  
+    @param title The title of the window
+    @param form The name of the form where the input field is located
+    @param input The name of the input field that holds the date value
+    @param callback If specified, the date is returned by using this javascript call instead
+      of by setting the form field
+  */
+  this.selectDateTime = function(title, form, input, callback, format)
+  {
+    var url = getRoot()+'common/calendar.jsp?datetime=1&title='+escape(title)+'&form='+form+'&input='+input+'&format='+escape(format);
+    url += '&ID='+getSessionId();
+    if (callback) url += '&callback='+callback;
+    Main.openPopup(url, title.replace(/[^\w]/, ''), 440, 340);
+  }
+
+
 }
 

trunk/www/include/styles/calendar.css

@@ -2 +2 @@
   ------------------------------------------------------------------
   Copyright (C) 2005 Nicklas Nordborg
-  Copyright (C) 2006 Jari Häkkinen
+  Copyright (C) 2006 Jari H�kkinen
 
   This file is part of BASE - BioArray Software Environment.
@@ -51 +51 @@
 }
 
+.time {
+  padding-left: 2px;
+  font-weight: bold;
+}
+
 .today, .current {
   font-weight: bold;