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">
  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

      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;
    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) {
      } else {
    4. Set the tab title

      Set the tab value
       if (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