source: extensions/net.sf.basedb.labenv/trunk/resources/reports/labenvironmentdatabasestatistics.jsp @ 2486

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.clients.web.Base" 
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.labenv");
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final User user = User.getById(dc, sc.getLoggedInUserId());
  %>
<base:page type="default" >
<base:head scripts="ajax.js" styles="path.css">
  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
  <script language="JavaScript" src="boxplot.js" type="text/javascript" charset="UTF-8"></script>
    
    
  <script language="JavaScript">
  var currentStep = 1;
  var debug = false;
/*
  var numCols;
  var unknownSite = 0;
  var unknownCreation;
  var numPatientsNoSamples = 0;
  var debug01 = null;
*/
  
  window.onload = function()
  {
    // Create lab sensor menu from configuration data
    createSensorMenu();
  };

  function createSensorMenu()
  {
    // Get lab sensor configurations dynamically from server data
    var frm = document.forms['labenv'];
    var labSensorConfigList = getLabSensorConfigList();
    if (labSensorConfigList != null)
    {
      // Construct lab sensor menu from JSON data
      var sensorSelect = document.getElementById('sensorSelectId');
      for (var i=0; i < labSensorConfigList.length; i++)
      {
        // Get URL and name for lab sensor number 'i'
        var labSensorConfig = labSensorConfigList[i];
        var sensorUrl = labSensorConfig['url'];
        var sensorName = labSensorConfig['name'];
        // Create and add new option element to select menu
        var optionEl = document.createElement('option');
        optionEl.setAttribute('value',sensorUrl);
        optionEl.innerHTML = sensorName;
        sensorSelect.appendChild(optionEl);
      }
    }
  }

  function getLabSensorConfigList()
  {
    // Get lab sensor configurations JSON object with AJAX
    var frm = document.forms['labenv'];
    var request = Ajax.getXmlHttpRequest();
    var url = '../../labenv.jar/LabEnvironment.servlet?ID=<%=ID%>&cmd=GetLabSensorConfigList';
    request.open("GET", url, false); 
    request.send(null);
  
    //if (debug) Main.debug(request.responseText);
    //Main.debug(request.responseText);

    var response = JSON.parse(request.responseText);
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
  
    // Get sensor configurations information from the AJAX response
    var labSensorConfigList = response.labSensorConfigList;

    return labSensorConfigList;
  }

  function fromDateTimeOnChange()
  {
    var frm = document.forms['labenv'];
    var todaysDate = new Date();
    fromDateIsValid = false;
    setInputStatus('fromdate', '', '');
  
    var fromDate = frm.fromdate.value;
    var fromTime = frm.fromtime.value;
  
    if (fromDate != '' || fromTime != '')
    {
      // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.
      fromDate = autoFillDate(fromDate);
      frm.fromdate.value = fromDate;

      fromTime = autoFillTime(fromTime);
      frm.fromtime.value = fromTime;
    
      if (!Dates.isDate(fromDate, 'yyyyMMdd'))
      {
        setInputStatus('fromdate', 'Not a valid date', 'invalid');
        return;
      }   
    
      if (!Dates.isDate(fromDate + ' ' + fromTime, 'yyyyMMdd HHmm'))
      {
        if (fromDate != '') setInputStatus('fromdate', 'Not a valid time (if time unknown, also leave date field blank)', 'invalid');
        return;
      }
      setInputStatus('fromdate', '', 'valid');
    }
    fromDateIsValid = true;
    toDateTimeOnChange();
  }

  function toDateTimeOnChange()
  {
    var frm = document.forms['labenv'];
    var todaysDate = new Date();
    toDateIsValid = false;
    setInputStatus('todate', '', '');
  
    var toDate = frm.todate.value;
    var toTime = frm.totime.value;
  
    if (toDate != '' || toTime != '')
    {
      // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.
      toDate = autoFillDate(toDate);
      frm.todate.value = toDate;

      toTime = autoFillTime(toTime);
      frm.totime.value = toTime;
    
      if (!Dates.isDate(toDate, 'yyyyMMdd'))
      {
        setInputStatus('todate', 'Not a valid date', 'invalid');
        return;
      }   
    
      if (!Dates.isDate(toDate + ' ' + toTime, 'yyyyMMdd HHmm'))
      {
        if (toDate != '') setInputStatus('todate', 'Not a valid time (if time unknown, also leave date field blank)', 'invalid');
        return;
      }
      setInputStatus('todate', '', 'valid');
    }
    toDateIsValid = true;
  }

  var intervalIsValid = true;
  
  function goNext()
  {
    if (currentStep == 1)
    {
      gotoStep2();
    }
  }
/*  
  function getSites()
  {
    // Get sites JSON object with AJAX
    var frm = document.forms['labenv'];
    var request = Ajax.getXmlHttpRequest();
    var url = '../LabEnvironment.servlet?ID=<%=ID%>&cmd=getsites';    
    request.open("GET", url, false); 
    request.send(null);
  
    if (debug) Main.debug(request.responseText);

    var response = JSON.parse(request.responseText);
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
  
    // Get site information from the AJAX response
    var sitesList = response.sitesList;

    return sitesList;
  }
*/

  function gotoStep2()
  {
    var frm = document.forms['labenv'];
    frm.reporttype.disabled = true;
    // Hide report period input fields
    document.getElementById("reportPeriodSubSection01").style.display = 'none';
    document.getElementById("reportPeriodSubSection02").style.display = 'none';
    document.getElementById("reportPeriodSubSection04").style.display = 'none';
    // Hide view type pop-up menu
    document.getElementById("viewTypeSubSection01").style.display = 'none';
    document.getElementById("viewTypeSubSection02").style.display = 'none';
    document.getElementById("viewTypeSubSection04").style.display = 'none';
/*
    // Hide chart site pop-up menu
    document.getElementById("chartSiteSubSection01").style.display = 'none';
    document.getElementById("chartSiteSubSection02").style.display = 'none';
    document.getElementById("chartSiteSubSection04").style.display = 'none';
*/
    // Hide day-time filter input fields
    document.getElementById("dayTimeFilterSubSection01").style.display = 'none';
    document.getElementById("dayTimeFilterSubSection02").style.display = 'none';
    document.getElementById("dayTimeFilterSubSection04").style.display = 'none';
    // Hide weekday filter pop-up menu
    document.getElementById("weekDayFilterSubSection01").style.display = 'none';
    document.getElementById("weekDayFilterSubSection02").style.display = 'none';
    document.getElementById("weekDayFilterSubSection04").style.display = 'none';
    // Hide chart variant pop-up menu
    document.getElementById("chartVariantSubSection01").style.display = 'none';
    document.getElementById("chartVariantSubSection02").style.display = 'none';
    document.getElementById("chartVariantSubSection04").style.display = 'none';
    if (frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentdailydistribution'
      || frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentweeklydistribution')
    {
      // Show report period input fields
      document.getElementById("reportPeriodSubSection01").style.display = 'block';
      document.getElementById("reportPeriodSubSection02").style.display = 'block';
      document.getElementById("reportPeriodSubSection04").style.display = 'block';
      document.getElementById("reportPeriodSubSection01Header").innerHTML="From";
      document.getElementById("reportPeriodSubSection04HelpText").innerHTML="Start date+time (YYYYMMDD, HHMM) Blank fields give data from start.";
      // Show view type pop-up menu
      document.getElementById("viewTypeSubSection01").style.display = 'block';
      document.getElementById("viewTypeSubSection02").style.display = 'block';
      document.getElementById("viewTypeSubSection04").style.display = 'block';
    }
    if (frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentdailydistribution'
      || frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentweeklydistribution')
    {
      // Show weekday filter pop-up menu
      document.getElementById("weekDayFilterSubSection01").style.display = 'block';
      document.getElementById("weekDayFilterSubSection02").style.display = 'block';
      document.getElementById("weekDayFilterSubSection04").style.display = 'block';
    }
    if (frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentweeklydistribution')
    {
      // Show day-time filter input fields
      document.getElementById("dayTimeFilterSubSection01").style.display = 'block';
      document.getElementById("dayTimeFilterSubSection02").style.display = 'block';
      document.getElementById("dayTimeFilterSubSection04").style.display = 'block';
    }
    if (frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentdailydistribution'
      || frm.reporttype[frm.reporttype.selectedIndex].value == 'labenvironmentweeklydistribution')
    {
      // Show chart data pop-up menu
      document.getElementById("chartVariantSubSection01").style.display = 'block';
      document.getElementById("chartVariantSubSection02").style.display = 'block';
      document.getElementById("chartVariantSubSection04").style.display = 'block';
    }
    Main.show('parameterSection');
        
    Main.show('gocreate');    
    Main.hide('gonext');
    frm.fromdate.focus();
    currentStep = 2;
  }
  
  function dateOnChange()
  {
    var frm = document.forms['labenv'];   
    var fdate;
    var tdate;
    
    intervalIsValid = false;
    setInputStatus('displayInterval','','valid');
    if (frm.fromdate.value != null && frm.fromdate.value != '')
    {
      frm.fromdate.value = autoFillDate(frm.fromdate.value);      
      if (!Dates.isDate(frm.fromdate.value, 'yyyyMMdd'))
      {
        setInputStatus('displayInterval','Not a valid from-date', 'invalid');
        return;
      }
      else
      {
        fdate = frm.fromdate.value;
        fdate = new Date(fdate.substr(0,4), parseInt(fdate.substr(4,2), 10)-1, fdate.substr(6,2));
      }
    }
    
    if (frm.todate.value != null && frm.todate.value != '')
    {
      frm.todate.value = autoFillDate(frm.todate.value);
      if (!Dates.isDate(frm.todate.value, 'yyyyMMdd'))
      {
        setInputStatus('displayInterval', 'Not a valid to-date', 'invalid');
        return;
      }
      else
      {
        tdate = frm.todate.value;
        tdate = new Date(tdate.substr(0,4), parseInt(tdate.substr(4,2), 10)-1, tdate.substr(6,2));
      }
    }
    
    if (tdate != null && fdate != null)
    {
      if (fdate > tdate)
      {
        setInputStatus('displayInterval', 'Invalid period', 'invalid')
        return;
      }     
    }
    intervalIsValid = true;
  }
  
  function goCreate()
  {
    //alert("goCreate(): Start");
    if (!intervalIsValid) return;
    var frm = document.forms['labenv'];   
    var reportType = frm.reporttype[frm.reporttype.selectedIndex].value;    
    frm.fromdate.disabled = true;
    frm.fromtime.disabled = true;
    frm.todate.disabled = true;
    frm.totime.disabled = true;
    if (reportType == 'labenvironmentdailydistribution' || reportType == 'labenvironmentweeklydistribution')
    {
      frm.weekdayfilter.disabled = true;
    }
    if (reportType == 'labenvironmentweeklydistribution')
    {
      frm.filterfromtime.disabled = true;
      frm.filtertotime.disabled = true;
    }
/*
    var chartSite = frm.chartvariant[frm.chartsite.selectedIndex].value;
*/    
    var chartVariant = frm.chartvariant[frm.chartvariant.selectedIndex].value;    
    if (reportType == 'labenvironmentdailydistribution' || reportType == 'labenvironmentweeklydistribution')
    {
/*
      frm.viewtype.disabled = true;
      frm.chartsite.disabled = true;
*/
      frm.chartvariant.disabled = true;
    }
    Main.hide('gocreate');
    Main.show('reportSection');
    var url = '../LabEnvironmentStatistics.servlet?ID=<%=ID%>&cmd='+reportType;   
    
    if (frm.fromdate.value != null) url += '&fdate='+frm.fromdate.value;
    if (frm.fromtime.value != null) url += '&ftime='+frm.fromtime.value;
    if (frm.todate.value != null) url += '&tdate='+frm.todate.value;
    if (frm.totime.value != null) url += '&ttime='+frm.totime.value;
    if (reportType == 'labenvironmentdailydistribution' || reportType == 'labenvironmentweeklydistribution')
    {
      if (frm.weekdayfilter.value != null) url += '&weekdayfilter='+frm.weekdayfilter.value;
    }
    if (reportType == 'labenvironmentweeklydistribution')
    {
      if (frm.filterfromtime.value != null) url += '&filterfromtime='+frm.filterfromtime.value;
      if (frm.filtertotime.value != null) url += '&filtertotime='+frm.filtertotime.value;
    }
    if (reportType == 'labenvironmentdailydistribution' || reportType == 'labenvironmentweeklydistribution')
    {
      if (frm.chartvariant.value != null) url += '&cvariant='+frm.chartvariant.value;
    }
    
    
    var request = Ajax.getXmlHttpRequest();
    request.open("GET", url, true);
    Ajax.setReadyStateHandler(request, onPlotGenerated);
    request.send(null);
  }
  
  function onPlotGenerated(request)
  {
    var frm = document.forms['labenv'];   
    var reportType = frm.reporttype[frm.reporttype.selectedIndex].value;
    //alert("onPlotGenerated(): reportType = " + reportType); 
    if (debug) Main.debug(Main.encodeTags(request.responseText));
    var response = JSON.parse(request.responseText);  
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
    var report = response.report;
    var permissionDeniedForPatientName = report.permissionDeniedForPatientName;
    var reportTable;
    var cellElement = document.getElementById('reportdiv');
    
    if (report != null)
    {
      //if ('labenvironmentdailydistribution' == reportType)
      if (reportType == 'labenvironmentdailydistribution' || reportType == 'labenvironmentweeklydistribution')
      {
        //alert("onPlotGenerated(): Inside plot block for labenvironmentdailydistribution");
        var draw_area_wdt = 700;
        var draw_area_hgt = 550;
        var draw_scale_factor = 2;
        var jsonStatisticsPlotArray = report.plotStatistics;
        // Draw plots
        setInnerHTML('reportdiv', '');
        for (var plotIndex in jsonStatisticsPlotArray)
        {
          //
          // Get plot JSON data container with extra info and plot data
          var plotJsonDataContainer = jsonStatisticsPlotArray[plotIndex];
          // Get plot JSON extra info and plot data
          var plotChartVariant = plotJsonDataContainer['chartVariant'];
          var plotViewType = plotJsonDataContainer['viewType'];
          var plotOptionalHeadline = plotJsonDataContainer['optionalHeadline'];
          var boxPlotJsonData = plotJsonDataContainer['plotData'];
          // Create plot from plot JSON data
          if (plotOptionalHeadline != null && plotOptionalHeadline != '')
          {
            // Print optional headline
            var headlineText = document.createElement('text');
            headlineText.innerHTML = "<BR>" + plotOptionalHeadline + "<BR>";
            cellElement.appendChild(headlineText);
          }
          var plotKey = plotChartVariant + '_' + plotViewType;
          // Add plot
          var canvasInTable = document.createElement('canvas');
          canvasInTable.setAttribute('id', plotKey);
          canvasInTable.setAttribute('width', draw_area_wdt * draw_scale_factor);
          canvasInTable.setAttribute('height', draw_area_hgt * draw_scale_factor);
          //alert("onPlotGenerated(): Calling createBoxPlot()");
          createBoxPlot(boxPlotJsonData, canvasInTable, draw_area_wdt, draw_area_hgt, draw_scale_factor);
          cellElement.appendChild(canvasInTable);         
          canvasInTable.addEventListener('mousemove', drawCanvasGuidelines, false);
          canvasInTable.addEventListener('mouseleave', hideCanvasGuidelines, false);
        }
        // Print optional appended info
        var appendedInfo = report.appendedInfo;
        if (appendedInfo != null && appendedInfo != '')
        {
          // Print optional headline
          var infoText = document.createElement('text');
          infoText.innerHTML = "<BR>" + appendedInfo + "<BR>";
          cellElement.appendChild(infoText);
        }
      }
    }
    else
    {
      var messageCell = getTableCellElement('No values could be found during given period', 'reportheader');
      var messageRow = document.createElement('tr');
      messageRow.appendChild(messageCell);      
      var messageTable = getReportTable();
      messageTable.appendChild(messageRow);
      reportTable = messageTable;     
    }
    Main.show('printButton');
    Main.show('gorestart');   
  }

  function getJSONData(jsonObject, key)
  {
    var data = getJSONData(jsonObject, key, '');
    return data;
  }

  function getJSONData(jsonObject, key, defaultChoice)
  {
    var data = defaultChoice;
    if (jsonObject != null)
    {
      if (jsonObject[key] != null)
      {
        data = jsonObject[key];
      }
    }
    return data;
  }

  function getReportTable()
  {
      var reportTable = document.createElement('table');
      reportTable.setAttribute('class','reporttable');
      reportTable.setAttribute('border','1');     
      return reportTable;
  }
  
  function getTableCellElement(text, clazz, colspan, rowspan)
  {
    var cellElement = document.createElement('td');
    text = new String(text);    
    var textArray = text.split("\n");   
    if (textArray.length > 1)
    { 
      for (var i=0;i<textArray.length;i++)
      {       
        if (i>0)cellElement.appendChild(document.createElement('br'));
        cellElement.appendChild(document.createTextNode(textArray[i]));
      }     
    }
    else
    {
      cellElement.appendChild(document.createTextNode(text));
    }
    cellElement.setAttribute('class', clazz);
    if (colspan != null) cellElement.setAttribute('colspan', colspan);
    if (rowspan != null) cellElement.setAttribute('rowspan', rowspan);
    
    return cellElement;
  }
  
  function getListElement(itemText)
  {
    var listElement = document.createElement('li');
    var textNode = document.createTextNode(itemText);
    listElement.appendChild(textNode);
    return listElement;
  }

  /**
   *  addHyphensToDateStr()
   *
   *  Adds hyphens to date string in yyyymmdd format to
   *  get yyyy-mm-dd format. If input string already contains
   *  hyphen(s), the input string is returned unchanged.
   *  If input string is null or empty, '????-??-??' is returned.
   *
   *  @param dateStr String Input date string in yyyy-mm-dd or yyyymmdd format.
   *  @return String Date string in yyyy-mm-dd format.
   */
  function addHyphensToDateString(dateStr)
  {
    var dateWithHyphensStr = '????-??-??';
    if (dateStr != null && dateStr != '')
    {
      // Check if input string already contains hyphen
      if (dateStr.indexOf("-") >= 0)
      {
        // Date already has hyphen(s)
        dateWithHyphensStr = dateStr;
      }
      else
      {
        // Date in yyyymmdd format
        var yearStr = dateStr.substr(0,4);
        var monthStr = dateStr.substr(4,2);
        var dayStr = dateStr.substr(6,2);     
        dateWithHyphensStr = yearStr + '-' + monthStr + '-' + dayStr;
      }
    }
    return dateWithHyphensStr;
  }

  /**
   *  dateStrToDate()
   *
   *  Takes an input date string in yyyy-mm-dd or yyyymmdd format
   *  and returns a date corresponding to the date string.
   *  If input string is null or empty, null is returned.
   *
   *  @param dateStr String Input date string in yyyy-mm-dd or yyyymmdd format.
   *  @return Date Date corresponding to input date string.
   */
  function dateStrToDate(dateStr)
  {
    var date = null;
    if (dateStr != null && dateStr != '')
    {
      // Check if input string already contains hyphen
      if (dateStr.indexOf("-") >= 0)
      {
        // Date in yyyy-mm-dd format
        var yearStr = dateStr.substr(0,4);
        var monthStr = dateStr.substr(5,2);
        var dayStr = dateStr.substr(8,2);     
        var date = new Date(parseInt(yearStr, 10), parseInt(monthStr, 10)-1, parseInt(dayStr, 10));
      }
      else
      {
        // Date in yyyymmdd format
        var yearStr = dateStr.substr(0,4);
        var monthStr = dateStr.substr(4,2);
        var dayStr = dateStr.substr(6,2);     
        var date = new Date(parseInt(yearStr, 10), parseInt(monthStr, 10)-1, parseInt(dayStr, 10));
      }
    }
    return date;
  }

  /*
   *  Get the ISO week number for a given date
   * 
   *  Based on code at http://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
   *
   *  @param date String Input date to get ISO week number for.
   *  @return int ISO week number for input date.
   */
  function getISOWeekNumber(date)
  {
    tmpDate = new Date(date);
    tmpDate.setHours(0,0,0);
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday day number 7
    tmpDate.setDate(tmpDate.getDate() + 4 - (tmpDate.getDay() || 7));
    // Get first day of year
    var yearStart = new Date(tmpDate.getFullYear(), 0, 1);
    // Calculate full weeks to nearast Thursday (86400000 = 24*60*60*1000 number of ms in a day)
    var weekNo = Math.ceil(( ( (tmpDate - yearStart) / 86400000) + 1)/7);
    return weekNo;
  }

  function goPrint()
  {
    var printNote = '<b>Note!</b> For better printing set page orientation to <i>portrait</i>.';
    printNote += ' Scale down to <i>90%</i> to fit 2 plots per page.';
    openPrintWindow('<%=ID%>', 'reportcell', 'Lab environment statistics', 'portrait', printNote, '../');
  }
  
  var xGuide;
  var yGuide;
  
  function drawCanvasGuidelines(event)
  {
    if (!xGuide)
    {
      xGuide = document.getElementById('x-guide');
      yGuide = document.getElementById('y-guide');
    }
    var canvas = event.target;
    var centerX = event.clientX;
    var centerY = event.clientY;
    var canvasPos = Main.getElementPosition(canvas);
    var startX = canvasPos.left+50;
    var widthX = canvasPos.width-100;
    var startY = canvasPos.top+80;
    var heightY = canvasPos.height-160;
    if (centerY < startY || centerY > startY+heightY)
    {
      // Hide when mouse is in the text area below or over the plot
      yGuide.style.display = 'none';
    }
    else
    {
      yGuide.style.top = (centerY-2) + 'px';
      yGuide.style.left = startX + 'px';
      yGuide.style.width = widthX + 'px';
      yGuide.style.display = 'block';
    }
    if (centerX < startX || centerX > startX + widthX)
    {
      // Hide when mouse is in the text area to the left or right of the plot
      xGuide.style.display = 'none';
    }
    else
    {
      // Avoid drawing outside the avilable hight (causes an extra pair of scroll bars)
      var yLimit = Main.getWindowHeight();
      if (startY+heightY > yLimit)
      {
        heightY = yLimit-startY;
      }
      xGuide.style.top = startY + 'px';
      xGuide.style.left = (centerX-2) + 'px';
      xGuide.style.height = heightY + 'px';
      xGuide.style.display = 'block';
    }

  }
  
  function hideCanvasGuidelines(event)
  {
    xGuide.style.display = 'none';
    yGuide.style.display = 'none';
  }
  </script>
  
  <style>
  canvas
  {
    width: 700px;
    height: 550px;
  }
  </style>
  </base:head>
  <base:body onload="init()">
    <p:path><p:pathelement 
      title="LabEnv" href="<%="./labenvironmentdatabasestatistics.jsp?ID="+ID%>" 
      /><p:pathelement title="Lab environment statistics" 
      /></p:path>
    <div id="x-guide" style="position: absolute; z-index: 99; display: none; background-color: #224488; width: 1px;"></div>
    <div id="y-guide" style="position: absolute; z-index: 99; display: none; background-color: #224488; height: 1px;"></div>
    <div class="content">
  
    <form name="labenv" onsubmit="return false;">
      <!-- 1. Report type-->
      <table border="0" cellspacing="0" cellpadding="0" class="stepform">
      <tr>
        <td rowspan="3" class="stepno">1</td>
        <td class="steptitle">Report type</td>
      </tr>
      <tr>
        <td class="stepfields">
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr valign="top">
            <td class="prompt">Report</td>
            <td class="input">
              <select name="reporttype">
                <option value="labenvironmentdailydistribution" selected="yes">Daily distribution statistics</option>
                <option value="labenvironmentweeklydistribution">Weekly distribution statistics</option>
              </select>
            </td>
            <td class="status" id="report.status"></td>
            <td class="help">
              <span id="report.message" class="message" style="display: none;"></span>
              Select which report to generate.
            </td>
          </tr>
          </table>
        </td>
      </tr>
      </table>
      
      <div id="parameterSection" style="display:none;">
        <p></p>
        <!-- 2. Report parameters-->
        <table border="0" cellspacing="0" cellpadding="0" class="stepform">
        <tr>
          <td rowspan="3" class="stepno">2</td>
          <td class="steptitle">Report parameters</td>
        </tr>
        <tr>
          <td class="stepfields">
<!--
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
              <td class="prompt">Sensor</td>
              <td class="input">
                <select id="sensorSelectId" name="sensorSelect">
                  <option value="all">All</option>
                </select>
              </td>
              <td class="status" id="sensorSelect.status"></td>
              <td class="help"><span id="time.message" class="message" style="display: none;"></span></td>
            </tr>     
            <tr id="fromDateTimeSection" valign="top">
              <td class="prompt">From</td>
              <td class="input">Date <input type="text" name="fromdate" value="" size="12" maxlength="10" 
                  onkeypress="focusOnEnter(event, 'fromtime')" onblur="fromDateTimeOnChange()">
                Time <input type="text" name="fromtime" value="" size="6" maxlength="4" 
                  onkeypress="focusOnEnter(event, 'fromdate')" onblur="fromDateTimeOnChange()"></td>
              <td class="status" id="fromdatetime.status"></td>
              <td class="help"><span id="fromdatetime.message" class="message" style="display: none;"></span>Start date+time (YYYYMMDD, HHMM) Blank fields give data from start</td>
            </tr>
            <tr id="toDateTimeSection" valign="top">
              <td class="prompt">To</td>
              <td class="input">Date <input type="text" name="todate" value="" size="12" maxlength="10"
                  onkeypress="focusOnEnter(event, 'toTime')" onblur="toDateTimeOnChange()">
                Time <input type="text" name="totime" value="" size="6" maxlength="4"
                  onkeypress="focusOnEnter(event, 'totime')" onblur="toDateTimeOnChange()"></td>
              <td class="status" id="todatetime.status"></td>
              <td class="help"><span id="todatetime.message" class="message" style="display: none;"></span>End date+time (YYYYMMDD, HHMM) Blank fields give data to end</td>
            </tr>
            </table>
-->
            <table border="0" cellspacing="0" cellpadding="0" width="100%">           
            <tr>
              <td valign="top" class="prompt">
                <div id="reportPeriodSubSection01" style="display:none;">
                  <text id="reportPeriodSubSection01Header">From</text>
                </div>
              </td>
              <td valign="top" class="input">
                <div id="reportPeriodSubSection02" style="display:none;">
                  Date <input type="text" name="fromdate" value="" size="12" maxlength="10" 
                  onkeypress="focusOnEnter(event, 'fromTime')" onblur="fromDateTimeOnChange()">
                  Time <input type="text" name="fromtime" value="" size="6" maxlength="4" 
                  onkeypress="focusOnEnter(event, 'fromdate')" onblur="fromDateTimeOnChange()">
                </div>
              </td>
              <td valign="top" class="status" id="sensorSelect.status"></td>
              <td class="help">
                <div id="reportPeriodSubSection04" style="display:none;">
                  <span id="sensorSelect.message" class="message" style="display: none;"></span>
                  <text id="reportPeriodSubSection04HelpText">Select sensor(s)</text><br>
                </div>
              </td>
            </tr> 
            <tr>
              <td valign="top" class="prompt">
                <div id="viewTypeSubSection01" style="display:none;">
                  To
                </div>
              </td>
              <td valign="top" class="input">
                <div id="viewTypeSubSection02" style="display:none;">
                  Date <input type="text" name="todate" value="" size="12" maxlength="10" 
                  onkeypress="focusOnEnter(event, 'totime')" onblur="toDateTimeOnChange()">
                  Time <input type="text" name="totime" value="" size="6" maxlength="4" 
                  onkeypress="focusOnEnter(event, 'todate')" onblur="toDateTimeOnChange()">
                </div>
              </td>
              <td valign="top" class="status" id="displayViewType.status"></td>
              <td class="help">
                <div id="viewTypeSubSection04" style="display:none;">
                  <span id="displayViewType.message" class="message" style="display: none;"></span>
                  End date+time (YYYYMMDD, HHMM) Blank fields give data to end.
                </div>
              </td>
            </tr>
            <tr>
              <td valign="top" class="prompt">
                <div id="dayTimeFilterSubSection01" style="display:none;">
                  Daytime filter
                </div>
              </td>
              <td valign="top" class="input">
                <div id="dayTimeFilterSubSection02" style="display:none;">
                  From time <input type="text" name="filterfromtime" value="" size="6" maxlength="4" 
                  onkeypress="focusOnEnter(event, 'filtertotime')" onblur="toDateTimeOnChange()">
                  To time <input type="text" name="filtertotime" value="" size="6" maxlength="4" 
                  onkeypress="focusOnEnter(event, 'todate')" onblur="toDateTimeOnChange()">
                </div>
              </td>
              <td valign="top" class="status" id="dayTimeFilter.status"></td>
              <td class="help">
                <div id="dayTimeFilterSubSection04" style="display:none;">
                  <span id="dayTimeFilter.message" class="message" style="display: none;"></span>
                  Select what daytime interval to include in statistics (HHMM). Note that climate control in some labs are only active during day. Blank fields give data for full day.
                </div>
              </td>
            </tr>
<!--
            <tr>
              <td valign="top" class="prompt">
                <div id="chartSiteSubSection01" style="display:none;">
                  Chart site
                </div>
              </td>
              <td valign="top" class="input">
                <div id="chartSiteSubSection02" style="display:none;">
                  <select id="chartSiteSelect" name="chartsite">
                    <option value="allsitestogether" selected="yes">All sites together</option>
                  </select>
                </div>
              </td>
              <td valign="top" class="status" id="displaychartSite.status"></td>
              <td class="help">
                <div id="chartSiteSubSection04" style="display:none;">
                  <span id="displaysite.message" class="message" style="display: none;"></span>
                  Select what site to take input data from.
                </div>
              </td>
            </tr>
-->
            <tr>
              <td valign="top" class="prompt">
                <div id="weekDayFilterSubSection01" style="display:none;">
                  Week day filter
                </div>
              </td>
              <td valign="top" class="input">
                <div id="weekDayFilterSubSection02" style="display:none;">
                  <select id="weekDayFilterSelectId" name="weekdayfilter">
                    <option value="all">All</option>
                    <option value="mondaytofriday">Mon-Fri only</option>
                    <option value="saturdaytosunday">Sat-Sun only</option>
                    <option value="workdays" selected="yes">Workdays</option>
                    <option value="nonworkdays">Non-workdays</option>
                  </select>
                </div>
              </td>
              <td valign="top" class="status" id="weekDayFilter.status"></td>
              <td class="help">
                <div id="weekDayFilterSubSection04" style="display:none;">
                  <span id="weekDayFilter.message" class="message" style="display: none;"></span>
                  Select what weekdays to include in statistics. Note that climate control in some labs are shut down on non-workdays (Saturdays, Sundays and work-free days related to holidays).
                </div>
              </td>
            </tr>
            <tr>
              <td valign="top" class="prompt">
                <div id="chartVariantSubSection01" style="display:none;">
                  Chart data
                </div>
              </td>
              <td valign="top" class="input">
                <div id="chartVariantSubSection02" style="display:none;">
                  <select id="sensorSelectId" name="chartvariant">
                    <option value="all">All</option>
                  </select>
                </div>
              </td>
              <td valign="top" class="status" id="displaychartVariant.status"></td>
              <td class="help">
                <div id="chartVariantSubSection04" style="display:none;">
                  <span id="displaychartVariant.message" class="message" style="display: none;"></span>
                  Select what data to report.
                </div>
              </td>
            </tr>
            </table>
          </td>
        </tr>
        </table>
      </div>
      
      <div id="reportSection" style="display:none;">
        <p></p>
        <table border="0" cellspacing="0" cellpadding="0" class="stepform">
        <tr>
          <td rowspan="3" class="stepno">3</td>
          <td class="steptitle">Generated report
            <span id="printButton" class="link" style="float:right; display: none;" onclick="goPrint()"><img src="../images/print.png" style="padding-right: 0.5em;">Print version&hellip;</span>
          </td>
        </tr>
        <tr>
          <td id="reportcell" class="stepfields">
            <div id="reportdiv" style="text-align: center;">
              <div class="loading" id="loading">
              <table>
              <tr>
                <td><img src="../images/loading.gif"></td>
                <td id="loading.msg">Generating report...</td>
              </tr>
              </table>
              </div>
            </div>
          </td>
        </tr>
        </table>
      </div>  
      
      <div class="messagecontainer error" id="errorMessage" style="display: none; width: 950px; margin-left: 20px; margin-bottom: 0px;"></div>    
        
      <table style="margin-left: 20px; margin-top: 10px;" class="navigation">
        <tr>
          <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" style="display: none;"/></td>
<!--
          <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)" /></td>
          <td><base:button id="gocreate" title="Generate" image="<%=home+"/images/gonext.png"%>" onclick="goCreate()" style="display: none;"/></td>         
          <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
-->
          <td><base:button id="gonext" title="Next" image="<%="gonext.png"%>" onclick="goNext(true)" /></td>
          <td><base:button id="gocreate" title="Generate" image="<%="gonext.png"%>" onclick="goCreate()" style="display: none;"/></td>          
          <td><base:button id="gorestart" title="Restart" image="<%="goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
          <td id="gonext.message" class="message"></td>
        </tr>
      </table>      
    </form>
    </div>
    
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>