Page History

1. Create a new scala template in geodashboard/app/views/detail_view/tabs

   Code Block
   language scala title Scala Template
   @()(implicit lang: Lang) <div class="tab-pane" id="dissolved-oxygen-profile"> </div>

   
   

2. In Geodashboard/app/views/detail.scala.html
   

   1. Create the tab

      Code Block
      language scala title Link to the scala template
      <li id="dissolved-oxygen-tab"><a href="#dissolved-oxygen-profile" data-toggle="tab">Dissolved Oxygen</a></li>

      Note: The href needs to match the id in the Scala Template

   2. Import the scala template

      Code Block
      language scala title Import the scala template
      @detail_view.tabs.dissolved_oxygen()

      This adds the code from the template to the DOM

3. In Geodashboard /src/javascript/views/DetailView.js
   

   1. Create the following objects:

      
      

      Code Block
      language js title Initialize variables
      var dissolved_oxygen_params = []; var dissolvedOxygenMap = {};

      
      
      

   2. Where properties are being assigned to a params map for each tab add something similar to: 

      Code Block
      language js title Fill up the parameters map and params list
      else if (parr[0].id.indexOf('ignored') == -1 && parr[0].get('detailView') === 'dissolved_oxygen') { dissolvedOxygenMap[parr[0].id] = key; dissolved_oxygen_params.push(parr[0].id); }

      
      

   3. Add code to toggle on and off the tab based on if there is at least one parameter for that tab. 

      Code Block
      language js title Toggle on and off the tab
      if (dissolved_oxygen_params.length > 0) { $("#dissolved-oxygen-tab").toggle(true); } else { $("#dissolved-oxygen-tab").toggle(false); }

      
      

   4. Set the tab title

      Code Block
      language js title Set the tab value
      if (source.get('tabs').dissolvedOxygen) { $('#dissolved-oxygen-tab').find('a').text(source.get('tabs').dissolvedOxygen); }

      
      

4. Add a Changelog entry
5. Define the specifics of the tab on the Seagrant/GLTG/IMLCZO project, so it gets copied over
6. Define the functionality for creating the graphs and filling up the tab in 3.c after toggling on the tab. 

Sample Pull request: https://opensource.ncsa.illinois.edu/bitbucket/projects/GEOD/repos/geodashboard/pull-requests/543/overview