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

    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

      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

      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:

      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: 

      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. 

      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

      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 

  • No labels