source: branches/2.2.2/www/my_base/user/preferences.jsp @ 3138

<%-- $Id: preferences.jsp 3138 2007-02-20 07:34:13Z nicklas $
  ------------------------------------------------------------------
  Copyright (C) Authors contributing to this file.

  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 2
  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 this program; if not, write to the Free Software
  Foundation, Inc., 59 Temple Place - Suite 330,
  Boston, MA  02111-1307, USA.
  ------------------------------------------------------------------

  This page is used to display and modify the preferences for
  the logged in user. It displays a tabbed dialogue:

  @param page
    The name active page of the tabbed dialog.
    - appearance: Font sizes, scale factor, etc.

  Saving the form invokes the submit_user.jsp page with cmd=SavePreferences

  @author Nicklas
  @version 2.0
--%>
<%@ page session="false"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.Metadata"
  import="net.sf.basedb.core.ItemContext"
  import="net.sf.basedb.core.Permission"
  import="net.sf.basedb.util.ToStringComparator"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
  import="net.sf.basedb.util.Values"
  import="java.util.List"
  import="java.util.Set"
  import="java.util.TreeSet"
  import="java.util.HashSet"
  import="java.util.Arrays"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="t" uri="/WEB-INF/tab.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String activePage = request.getParameter("page");
final DbControl dc = sc.newDbControl();
try
{
  final User user = User.getById(dc, sc.getLoggedInUserId());
  
  final boolean hasImages = Values.getBoolean(sc.getUserClientSetting("toolbar.images"), true);
  final boolean hasText = Values.getBoolean(sc.getUserClientSetting("toolbar.text"), true);
  
  final String minColor = Values.getString(sc.getUserClientSetting("ratiocolor.min"), "0000FF");
  final String midColor = Values.getString(sc.getUserClientSetting("ratiocolor.mid"), "FFFFFF");
  final String maxColor = Values.getString(sc.getUserClientSetting("ratiocolor.max"), "FFFF00");
  
  ItemContext cc = sc.getCurrentContext(Item.USERCLIENTSETTING);
  List<String> recentColors = cc.getRecent("colors");
  List<String> recentDateFormats = cc.getRecent("dateFormats");
  List<String> recentDateTimeFormats = cc.getRecent("dateTimeFormats");
  %>

  <base:page type="popup" title="<%="Preferences for "+HTML.encodeTags(user.getName())%>">
  <base:head scripts="tabcontrol.js" styles="tabcontrol.css">
    <script language="JavaScript">
    // Validate the Appearance tab
    function validateAppearance()
    {
      var frm = document.forms['preferences'];
      var scale = parseInt(frm.scale.value);
      if (!Numbers.isInteger(frm.scale.value) || scale < 50 || scale > 200)
      {
        frm.scale.focus();
        frm.scale.select();
        alert("Please enter a scale value between 50 and 200.");
        return false;
      }
      var recent = parseInt(frm.recent.value);
      if (!Numbers.isInteger(frm.recent.value) || recent < 0 || recent > 10)
      {
        frm.recent.focus();
        frm.recent.select();
        alert("Please enter a value between 0 and 10.");
        return false;
      }
      return true;
    }
    function validatePlugins()
    {
      return true;
    }
    function validateMostRecent()
    {
      return true;
    }
    // Changes the scale value
    function setScale(newScale)
    {
      var frm = document.forms['preferences'];
      frm.scale.value = newScale;
    }
    // Submit the form
    function savePreferences()
    {
      var frm = document.forms['preferences'];
      if (TabControl.validateActiveTab('settings'))
      {
        var enabled = frm.enabled;
        for (var i = 0; i < enabled.length; i++) // >
        {
          enabled.options[i].selected = true;
        }
        frm.submit();
      }
    }
    
    function selectColor(title, field)
    {
      Main.selectColor(title, 'preferences', field, 'setColorCallback');
    }
    
    function setColorCallback(form, input, color)
    {
      var frm = document.forms['preferences'];
      frm[input].value = color;
      var display = document.getElementById(input);
      display.style.background = '#' + color;
    }
    
    function presetColorOnChange()
    {
      var frm = document.forms['preferences'];
      var colors = frm.presets[frm.presets.selectedIndex].value.split(',');
      setColorCallback('preferences', 'mincolor', colors[0]);
      setColorCallback('preferences', 'midcolor', colors[1]);
      setColorCallback('preferences', 'maxcolor', colors[2]);
      frm.presets.selectedIndex = 0;
    }
    
    function datePresetOnChange()
    {
      var frm = document.forms['preferences'];
      frm.date_format.value = frm.datePresets[frm.datePresets.selectedIndex].value;
      frm.datePresets.selectedIndex = 0;
    }
    
    function dateTimePresetOnChange()
    {
      var frm = document.forms['preferences'];
      frm.datetime_format.value = frm.dateTimePresets[frm.dateTimePresets.selectedIndex].value;
      frm.dateTimePresets.selectedIndex = 0;
    }
    
    function initItemTypes()
    {
      var frm = document.forms['preferences'];
      var enabled = frm.enabled;
      var disabled = frm.disabled;
      <%
      String mostRecent = Values.getString(sc.getUserClientSetting("menu.mostRecent"),
        "EXPERIMENT:BIOASSAYSET:TRANSFORMATION");
      Set<String> current = new HashSet<String>(Arrays.asList(mostRecent.split(":")));
      Set<Item> items = new TreeSet<Item>(new ToStringComparator<Item>(false));
      items.addAll(Metadata.getOwnableItems());
      items.add(Item.BIOASSAYSET);
      for (Item item : items)
      {
        String list = current.contains(item.name()) ? "enabled" : "disabled";
        %>
        var option = new Option('<%=item.toString()%>', '<%=item.name()%>');
        Forms.addListOption(<%=list%>, -1, option);
        <%
      }
      %>
    }
    
    // Moves all selected items in list1 to list2
    function moveBetween(list1, list2)
    {
      var moved = 0;
      for(i=0; i < list1.options.length; i++) // >
      {
        if (list1.options[i].selected)
        {
          moved++;
          list2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
          list1.options[i] = null;
          i--;
        }
      }
    }
    
    // Move all selected items in the list up or down
    function moveSelected(list, up)
    {
      var moved = Forms.moveListOptions(list, up);
    }
    </script>
  </base:head>
  <base:body onload="initItemTypes()">
  <p>

  <form action="submit_user.jsp?ID=<%=ID%>" method="post" name="preferences" 
    onsubmit="return false;">
  <input type=hidden name="cmd" value="SavePreferences">
  <input type="hidden" name="mincolor" value="0000FF">
  <input type="hidden" name="midcolor" value="000000">
  <input type="hidden" name="maxcolor" value="FFFF00">

  <h3 class="docked">Preferences for <%=HTML.encodeTags(user.getName())%> <base:help tabcontrol="settings" /></h3>
  <t:tabcontrol active="<%=activePage%>" id="settings" 
    contentstyle="<%="height: "+(int)(scale*260)+"px;"%>" 
    position="bottom">
  <t:tab 
    id="appearance" 
    title="Appearance" 
    validate="validateAppearance()" 
    helpid="userpreferences.appearance"
    >
    <table class="form" cellspacing=0>
    <tr>
      <td class="prompt">Font size</td>
      <td>
        <%
        String fontsize = Values.getString(sc.getUserClientSetting("appearance.fontsize"), "size_m.css");
        %>
        <input type="radio" name="fontsize" value="size_xs.css" 
          <%="size_xs.css".equals(fontsize) ? "checked" : ""%> onclick="setScale(80)"
          ><a href="javascript:document.forms['preferences'].fontsize[0].click()">XS</a>
        <input type="radio" name="fontsize" value="size_s.css" 
          <%="size_s.css".equals(fontsize) ? "checked" : ""%> onclick="setScale(90)"
          ><a href="javascript:document.forms['preferences'].fontsize[1].click()">S</a>
        <input type="radio" name="fontsize" value="size_m.css" 
          <%="size_m.css".equals(fontsize) ? "checked" : ""%> onclick="setScale(100)"
          ><a href="javascript:document.forms['preferences'].fontsize[2].click()">M</a>
        <input type="radio" name="fontsize" value="size_l.css" 
          <%="size_l.css".equals(fontsize) ? "checked" : ""%> onclick="setScale(120)"
          ><a href="javascript:document.forms['preferences'].fontsize[3].click()">L</a>
        <input type="radio" name="fontsize" value="size_xl.css" 
          <%="size_xl.css".equals(fontsize) ? "checked" : ""%> onclick="setScale(140)"
          ><a href="javascript:document.forms['preferences'].fontsize[4].click()">XL</a>
      </td>
    </tr>
    <tr>
      <td class="prompt">Scale factor</td>
      <td>
        <input class="text required" type="text" name="scale" 
        value="<%=Values.getInt(sc.getUserClientSetting("appearance.scale"), 100)%>" 
        size="4" maxlength="3"  onkeypress="return Numbers.integerOnly(event);">%
        (50 - 200)
      </td>
    </tr>
    <tr>
      <td class="prompt">Toolbar</td>
      <td>
        <input type="radio" name="toolbar" value="both" 
          <%=hasImages && hasText ? "checked" : "" %>
          ><a href="javascript:document.forms['preferences'].toolbar[0].click()">Images and text</a>
        <input type="radio" name="toolbar" value="images" 
          <%=hasImages && !hasText ? "checked" : "" %>
          ><a href="javascript:document.forms['preferences'].toolbar[1].click()">Images only</a>
        <input type="radio" name="toolbar" value="text" 
          <%=!hasImages && hasText ? "checked" : "" %>
          ><a href="javascript:document.forms['preferences'].toolbar[2].click()">Text only</a>
      </td>
    </tr>
    <tr>
      <td class="prompt">Recently used items</td>
      <td>
        <input class="text required" type="text" name="recent" 
          value="<%=Values.getInt(sc.getUserClientSetting("appearance.recent"), 4)%>" 
          size="4" maxlength="2"  onkeypress="return Numbers.integerOnly(event);">
        (0 - 10)
      </td>
    </tr>
    
    <tr>
      <td class="prompt">Ratio color range</td>
      <td>
        <table>
        <tr>
        <td><a href="javascript:selectColor('Color for min value', 'mincolor')"><div 
          id="mincolor" style="background: #<%=minColor%>;" class="colorbox"></div>Min</a></td>
        <td><a href="javascript:selectColor('Color for midpoint value', 'midcolor')"><div 
          id="midcolor" style="background: #<%=midColor%>;" class="colorbox"></div>Mid</a></td>
        <td><a href="javascript:selectColor('Color for max value', 'maxcolor')"><div 
          id="maxcolor" style="background: #<%=maxColor%>;" class="colorbox"></div>Max</td>
        
        <td>
          <select name="presets" onchange="presetColorOnChange()" class="selectionlist">
          <option value="">- presets -
          <option value="FF0000,FFFF00,00FF00">Red - Yellow - Green
          <option value="0000FF,FFFFFF,FFFF00">Blue - White - Yellow
          <option value="000000,999999,FFFFFF">Black - Grey - White
          <%
          if (recentColors != null && recentColors.size() > 0)
          {
            %>
            <option value="" class="recentheader">- recently used -
            <%
            for (int i = 0; i < recentColors.size(); ++i)
            {
              String color = recentColors.get(i);
              %>
              <option value="<%=color%>" class="recent"><%=color%>
              <%
            }
          }
          %>
          </select>
        </td>
        </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="prompt">Date format</td>
      <td>
        <input class="text" type="text" name="date_format" 
        value="<%=HTML.encodeTags(FormatterSettings.getDateFormat(sc))%>" 
        size="20">
        <select name="datePresets" onchange="datePresetOnChange()" class="selectionlist">
          <option value="">- presets -
          <option value="yyyy-MM-dd">yyyy-MM-dd
          <option value="d/M/yyyy">d/M/yyyy
          <option value="M/d/yyyy">M/d/yyyy
          <%
          if (recentDateFormats != null && recentDateFormats.size() > 0)
          {
            %>
            <option value="" class="recentheader">- recently used -
            <%
            for (int i = 0; i < recentDateFormats.size(); ++i)
            {
              String format = HTML.encodeTags(recentDateFormats.get(i));
              %>
              <option value="<%=format%>" class="recent"><%=format%>
              <%
            }
          }
          %>
        </select>
      </td>
    </tr>
    
    <tr>
      <td class="prompt">Date-time format</td>
      <td>
        <input class="text" type="text" name="datetime_format" 
        value="<%=HTML.encodeTags(FormatterSettings.getDateTimeFormat(sc))%>" 
        size="20">
        <select name="dateTimePresets" onchange="dateTimePresetOnChange()" class="selectionlist">
          <option value="">- presets -
          <option value="yyyy-MM-dd hh:mm:ss">yyyy-MM-dd hh:mm:ss
          <option value="d/M/yyyy hh:mm:ss">d/M/yyyy hh:mm:ss
          <option value="M/d/yyyy hh:mm:ss">M/d/yyyy hh:mm:ss
          <%
          if (recentDateTimeFormats != null && recentDateTimeFormats.size() > 0)
          {
            %>
            <option value="" class="recentheader">- recently used -
            <%
            for (int i = 0; i < recentDateFormats.size(); ++i)
            {
              String format = HTML.encodeTags(recentDateTimeFormats.get(i));
              %>
              <option value="<%=format%>" class="recent"><%=format%>
              <%
            }
          }
          %>
        </select>
      </td>
    </tr>
    <%
    int numDecimals = FormatterSettings.getNumDecimals(sc);
    %>
    <tr>
      <td class="prompt">Decimals</td>
      <td>
        <select name="decimals">
        <%
        for (int i = 0; i < 8; i++)
        {
          %>
          <option value="<%=i%>" <%=numDecimals == i ? "selected" : ""%>><%=i%>
          <%
        }
        %>
        <option value="-1" <%=numDecimals < 0 ? "selected" : ""%>>all
        </select>
      </td>
    </tr>
    
    </table>
    <div align="right">&nbsp;<i><base:icon image="required.gif" /> = required information</i></div>
  </t:tab>
  
  <t:tab
    id="plugins" 
    title="Plugins" 
    validate="validatePlugins()" 
    helpid="userpreferences.plugins"
    >
    <table class="form" cellspacing=0>
    <tr>
      <td class="prompt">Messages</td>
      <td>
        <%
        boolean sendMessage = Values.getBoolean(sc.getUserClientSetting("plugins.sendmessage"), true);
        %>
        <input type=checkbox name="sendmessage" value="1" <%=sendMessage ? "checked" : ""%>
          ><a href="javascript:document.forms['preferences'].sendmessage.click()">Send message when plugin completes</a>
      </td>
    </tr>
    </table>
  </t:tab>
  
  <t:tab
    id="mostRecent"
    title="Most recent"
    validate="validateMostRecent()"
    helpid="userpreferences.mostrecent"
    tooltip="Specify which items should be shown in the 'Most recent' menu."
    >
    <table border=0 cellspacing=0 cellpadding=2>
    <tr>
      <td style="vertical-align: middle">
        <br>
        <base:button
          onclick="moveSelected(document.forms['preferences'].enabled, false)" 
          title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>" 
          tooltip="Move up" 
        /><p>
        <base:button 
          onclick="moveSelected(document.forms['preferences'].enabled, true)" 
          title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>" 
          tooltip="Move down" 
        />
        <br>
      </td>
      <td>
        <b>Show in 'Most recent' menu</b><br>
        <select name="enabled" multiple size="14" style="width: 12em;"
          ondblclick="moveBetween(document.forms['preferences'].enabled, document.forms['preferences'].disabled)">
        </select>
      </td>
  
      <td>
         <br>
        <base:button
          onclick="moveBetween(document.forms['preferences'].disabled, document.forms['preferences'].enabled)" 
          title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>" 
          tooltip="Show this item in the 'Most recent' menu" 
        /><p>
        <base:button 
          onclick="moveBetween(document.forms['preferences'].enabled, document.forms['preferences'].disabled)" 
          title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>" 
          tooltip="Don't show this item in the 'Most recent' menu" 
        />
        <br>
      </td>
  
      <td>
        <b>Don't show</b><br>
        <select name="disabled" multiple size="14" style="width: 12em;" 
          ondblclick="moveBetween(document.forms['preferences'].disabled, document.forms['preferences'].enabled)">
        </select>
      </td>
    </tr>
    </table>
    <%
    boolean loadNames = Values.getBoolean(sc.getUserClientSetting("menu.mostRecent.loadNames"), false);
    %>
    <input type="checkbox" name="loadNames" value="1" <%=loadNames ? "checked" : ""%>> 
      <a href="javascript:document.forms['preferences'].loadNames.click()"
        >Load the names of all recent items</a>
  </t:tab>
  </t:tabcontrol>

  <p>
  <div align=center>
    <table align="center">
    <tr>
      <td width="50%"><base:button onclick="savePreferences();" title="Save" /></td>
      <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
    </tr>
    </table>
  </div>
  </form>
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>