Ignore:
Timestamp:
Oct 24, 2013, 2:32:48 PM (9 years ago)
Author:
Nicklas Nordborg
Message:

Fixes #523: Show/hide detail rows in Case summary

It is now possible to toggle the visibility of details for each section. The current state is submitted with AJAX to the server and stored in a user-setting, which means that it is remembered between logins. The "GetCaseInfo?" command will also retrieve the visibility status so that the summary page can be initialized to the current state.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/net.sf.basedb.reggie/trunk/resources/reports/case_summary.jsp

    r2099 r2100  
    309309  var caseInfo = response.caseInfo;
    310310  var site = response.site;
     311  initSections(response.sections);
    311312  var consentOk = true;
    312313 
    … …  
    776777  printNote += ' You may have to <i>scale down</i> to fit everything on the width of the page.';
    777778  openPrintWindow('<%=ID%>', 'all-content', 'Case summary - <%=HTML.encodeTags(caseName)%>', 'portrait', printNote, '../', 'case_summary.css');
     779}
     780
     781function toggleDetails(event)
     782{
     783  var sectionId = event.currentTarget.sectionId;
     784  var details = document.getElementById(sectionId+'-details');
     785  // If the details section is 'forcibly' hidden (eg. no items of that type), ignore this call
     786  if (details.style.display == 'none') return;
     787 
     788  // Add 'hide-details' class to main <div section-info> if it is visible
     789  var section = document.getElementById(sectionId+'-info');
     790  var isVisible = section.className.indexOf('hide-details') == -1;
     791  Main.addOrRemoveClass(section, 'hide-details', isVisible);
     792
     793  // Save to BASE setting
     794  var url = '../CaseSummary.servlet?ID=<%=ID%>&cmd=SetSectionVisibility';
     795  url += '&section='+sectionId+'&hidden='+(isVisible ? 1 : 0);
     796  var request = Ajax.getXmlHttpRequest();
     797  request.open("POST", url, false);
     798  request.send(null);
     799 
     800  if (debug) Main.debug(request.responseText);
     801}
     802
     803function initSections(sections)
     804{
     805  for (var s = 0; s < sections.length; s++)
     806  {
     807    var section = sections[s];
     808
     809    var details = document.getElementById(section.id+'-details');
     810    // If the details section is 'forcibly' hidden (eg. no items of that type), ignore this call
     811    if (details.style.display != 'none')
     812    {
     813      var headerDiv = document.getElementById(section.id+'-header');
     814      if (headerDiv)
     815      {
     816        Main.addClass(headerDiv, 'link');
     817        headerDiv.title = 'Hide/show details';
     818        headerDiv.sectionId = section.id;
     819        headerDiv.addEventListener('click', toggleDetails, false);
     820      }
     821     
     822      var sectionDiv = document.getElementById(section.id+'-info');
     823      Main.addOrRemoveClass(sectionDiv, 'hide-details', section.hiddenDetails);
     824    }
     825  }
    778826}
    779827
    … …  
    855903          <thead>
    856904            <tr id="case.name">
    857               <th>Case</th>
     905              <th id="case-header">Case</th>
    858906            </tr>
    859907          </thead>
    860           <tbody id="case-details">
     908          <tbody id="case-details" class="info-details">
    861909            <tr id="case.registrationDate">
    862910              <th>Registration date</th>
    … …  
    884932          <thead>
    885933            <tr id="patient.name">
    886               <th>Patient</th>
     934              <th id="patient-header">Patient</th>
    887935            </tr>
    888936          </thead>
    889           <tbody id="patient-details">
     937          <tbody id="patient-details" class="info-details">
    890938            <tr id="patient.registrationDate">
    891939              <th>Registration date</th>
    … …  
    916964          <thead>
    917965            <tr id="blood.name">
    918               <th>Blood</th>
     966              <th id="blood-header">Blood</th>
    919967            </tr>
    920968          </thead>
    921           <tbody id="blood-details">
     969          <tbody id="blood-details" class="info-details">
    922970            <tr id="blood.registrationDate">
    923971              <th>Registration date</th>
    … …  
    951999          <thead>
    9521000            <tr id="specimen.name">
    953               <th>Specimen</th>
     1001              <th id="specimen-header">Specimen</th>
    9541002            </tr>
    9551003          </thead>
    956           <tbody id="specimen-details">
     1004          <tbody id="specimen-details" class="info-details">
    9571005            <tr id="specimen.registrationDate">
    9581006              <th>Registration date</th>
    … …  
    10011049          <thead>
    10021050            <tr id="nospecimen.name">
    1003               <th>NoSpecimen</th>
     1051              <th id="nospecimen-header">NoSpecimen</th>
    10041052            </tr>
    10051053          </thead>
    1006           <tbody id="nospecimen-details">
     1054          <tbody id="nospecimen-details" class="info-details">
    10071055            <tr id="nospecimen.registrationDate">
    10081056              <th>Registration date</th>
    … …  
    10331081          <thead>
    10341082            <tr id="histology.name">
    1035               <th>Histology</th>
     1083              <th id="histology-header">Histology</th>
    10361084            </tr>
    10371085          </thead>
    1038           <tbody id="histology-details">
     1086          <tbody id="histology-details" class="info-details">
    10391087            <tr id="histology.registrationDate">
    10401088              <th>Registration date</th>
    … …  
    10841132          <thead>
    10851133            <tr id="lysate.name">
    1086               <th>Lysate</th>
     1134              <th id="lysate-header">Lysate</th>
    10871135            </tr>
    10881136          </thead>
    1089           <tbody id="lysate-details">
     1137          <tbody id="lysate-details" class="info-details">
    10901138            <tr id="lysate.registrationDate">
    10911139              <th>Registration date</th>
    … …  
    11281176          <thead>
    11291177            <tr id="rna.name">
    1130               <th>RNA</th>
     1178              <th id="rna-header">RNA</th>
    11311179            </tr>
    11321180          </thead>
    1133           <tbody id="rna-details">
     1181          <tbody id="rna-details" class="info-details">
    11341182            <tr id="rna.flag" class="dynamic-column">
    11351183              <th>Flag</th>
    … …  
    11931241          <thead>
    11941242            <tr id="dna.name">
    1195               <th>DNA</th>
     1243              <th id="dna-header">DNA</th>
    11961244            </tr>
    11971245          </thead>
    1198           <tbody id="dna-details">
     1246          <tbody id="dna-details" class="info-details">
    11991247            <tr id="dna.registrationDate">
    12001248              <th>Registration date</th>
    … …  
    12311279          <thead>
    12321280            <tr id="ft.name">
    1233               <th>FlowThrough</th>
     1281              <th id="ft-header">FlowThrough</th>
    12341282            </tr>
    12351283          </thead>
    1236           <tbody id="ft-details">
     1284          <tbody id="ft-details" class="info-details">
    12371285            <tr id="ft.registrationDate">
    12381286              <th>Registration date</th>
    … …  
    12661314          <thead>
    12671315            <tr id="mrna.name">
    1268               <th>mRNA</th>
     1316              <th id="mrna-header">mRNA</th>
    12691317            </tr>
    12701318          </thead>
    1271           <tbody id="mrna-details">
     1319          <tbody id="mrna-details" class="info-details">
    12721320            <tr id="mrna.registrationDate">
    12731321              <th>Registration date</th>
    … …  
    12951343          <thead>
    12961344            <tr id="cdna.name">
    1297               <th>cDNA</th>
     1345              <th id="cdna-header">cDNA</th>
    12981346            </tr>
    12991347          </thead>
    1300           <tbody id="cdna-details">
     1348          <tbody id="cdna-details" class="info-details">
    13011349            <tr id="cdna.registrationDate">
    13021350              <th>Registration date</th>
    … …  
    13211369          <thead>
    13221370            <tr id="lib.name">
    1323               <th>Library</th>
     1371              <th id="lib-header">Library</th>
    13241372            </tr>
    13251373          </thead>
    1326           <tbody id="lib-details">
     1374          <tbody id="lib-details" class="info-details">
    13271375            <tr id="lib.registrationDate">
    13281376              <th>Registration date</th>
    … …  
    13651413          <thead>
    13661414            <tr id="pooledlib.name">
    1367               <th>Pooled Library</th>
     1415              <th id="pooledlib-header">Pooled Library</th>
    13681416            </tr>
    13691417          </thead>
    1370           <tbody id="pooledlib-details">
     1418          <tbody id="pooledlib-details" class="info-details">
    13711419            <tr id="pooledlib.registrationDate">
    13721420              <th>Registration date</th>
Note: See TracChangeset for help on using the changeset viewer.