Skip to content

Commit

Permalink
finish nav pill implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@chiaweh2
chiaweh2 committed Dec 11, 2024
1 parent 3763b27 commit ea2ee55
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 94 deletions.
105 changes: 30 additions & 75 deletions data_access.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,13 @@ <h1 class="userInputTitle"><em>Data Options</em></h1>
<br>
<br>

<input type="radio" class="radioData" id="radioOpendap" name="dataOptions" checked>
<!-- <input type="radio" class="radioData" id="radioOpendap" name="dataOptions" checked>
<label for="radioOpendap">OPeNDAP</label>
<input type="radio" class="radioData" id="radioWget" name="dataOptions">
<label for="radioWget">Download netCDF</label>
<input type="radio" class="radioData" id="radioCite" name="dataOptions">
<label for="radioCite">Data Citation</label>
<br>
<br> -->

<table class="rowGap">
<tr>
Expand Down Expand Up @@ -128,13 +128,13 @@ <h1 class="userInputTitle"><em>Data Options</em></h1>
<select id="imonthMOMCobaltForecastData"></select>
</td>
</tr>
</table>
</table>
<hr class="dot-hr-plot">
<button id="genQueryButton" class="btn btn-psl">Generate Queries</button>
</div>
<br>
<button id="genQueryButton" class="btn btn-psl">Generate Queries</button>
<hr class="dot-hr-plot">
</div>

<br>

<!-- creating the tab under bootstrap tab using navpil -->
<div class="row" id="dashNavDataAcess">
<ul class="nav nav-pills nav-justified hidden-xs" id="pills-data">
Expand Down Expand Up @@ -163,7 +163,7 @@ <h1 class="userInputTitle"><em>Data Options</em></h1>

<div class="row" id="dashContentDataAcess">
<div class="tab-content">
<!-- opendap -->
<!-- opendap pill -->
<div id='opendapView' class="tab-pane active view col-12">
<!-- URL -->
<h4><strong>OPeNDAP URL</strong></h4>
Expand Down Expand Up @@ -206,75 +206,30 @@ <h4><strong>OPeNDAP (R)</strong></h4>
<button id="copyButtonR" class="btn btn-psl">Copy R Code</button>
<hr class="dot-hr-plot">
</div>
</div>
</div>


<!-- netcdf download pill -->
<div id='downloadView' class="tab-pane view col-12">
<!-- button download -->
<h4><strong>Direct download</strong></h4>
<pre id="codeBlockDataInfo"><code class="codeBlockScroll">Please generate query first!</code></pre>
<a id="downloadHttp">
<button id="downloadButton" class="btn btn-psl">Download netCDF</button>
</a>
<hr class="dot-hr-plot">
<!-- Wget -->
<h4><strong>Wget (Unix/Linux terminal command)</strong></h4>
<pre id="codeBlockWget"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonWget" class="btn btn-psl">Copy Wget Code</button>
<hr class="dot-hr-plot">
</div>

<div class = "row">
<!-- Opendap radio activate -->
<div class="col-12 opendapOpt">
<h4><strong>OPeNDAP URL</strong></h4>
<p>
Using OPeNDAP can subset the data to a smaller region or time frame.
The OPeNDAP server has a <strong>500MB</strong> limit per request.
A loop is suggested to load data that is larger than 500 MB.
</p>
<pre id="codeBlockOpendap"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonOpendap" class="btn btn-psl">Copy OPeNDAP URL</button>
<hr class="dot-hr-plot">

<h4><strong>OPeNDAP (Python)</strong></h4>
<p>
Please follow the
<a href="https://noaa-cefi-portal.github.io/cefi-cookbook/content/how_to_conda.html" target="_blank">
<strong>environment setup</strong>
</a>
for the following Python code to work.
<a href="https://noaa-cefi-portal.github.io/cefi-cookbook/content/data_access/access_opendap/python_get_cefi.html" target="_blank">
<strong>A comprehensive tutorial (Python) can be found here</strong>
</a>
</p>
<pre id="codeBlockPython"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonPython" class="btn btn-psl">Copy Python Code</button>
<hr class="dot-hr-plot">

<h4><strong>OPeNDAP (R)</strong></h4>
<p>
Please follow the
<a href="https://noaa-cefi-portal.github.io/cefi-cookbook/content/how_to_conda.html" target="_blank">
<strong>environment setup</strong>
</a>
for the following R code to work.
<a href="https://noaa-cefi-portal.github.io/cefi-cookbook/content/data_access/access_opendap/r_get_cefi.html" target="_blank">
<strong>A comprehensive tutorial (R) can be found here</strong>
</a>
</p>
<pre id="codeBlockR"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonR" class="btn btn-psl">Copy R Code</button>
<hr class="dot-hr-plot">
</div>

<!-- Wget radio activate -->
<div class="col-12 wgetOpt hidden">
<h4><strong>Direct download</strong></h4>
<pre id="codeBlockDataInfo"><code class="codeBlockScroll">Please generate query first!</code></pre>
<a id="downloadHttp">
<button id="downloadButton" class="btn btn-psl">Download netCDF</button>
</a>
<hr class="dot-hr-plot">
<h4><strong>Wget (Unix/Linux terminal command)</strong></h4>
<pre id="codeBlockWget"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonWget" class="btn btn-psl">Copy Wget Code</button>
<hr class="dot-hr-plot">
</div>

<!-- Citation radio activate -->
<div class="col-12 citeOpt hidden">
<h4><strong>Citations</strong></h4>
<pre id="codeBlockCite"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonCite" class="btn btn-psl">Copy Citation</button>
<hr class="dot-hr-plot">
<!-- data citation pill -->
<div id='citationView' class="tab-pane view col-12">
<h4><strong>Citations</strong></h4>
<pre id="codeBlockCite"><code class="codeBlockScroll">Please generate query first!</code></pre>
<button id="copyButtonCite" class="btn btn-psl">Copy Citation</button>
<hr class="dot-hr-plot">
</div>
</div>
</div>

Expand Down
19 changes: 0 additions & 19 deletions data_access.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,6 @@ $('#periodMOMCobaltData').on('change', function() {
}
});

// event lister for radio button choice in data options in data query
$(document).ready(function(){
$("input[type='radio'].radioData").change(function(){
if ($("#radioOpendap").is(":checked")) {
$('.wgetOpt').addClass('hidden');
$('.citeOpt').addClass('hidden');
$('.opendapOpt').removeClass('hidden');
} else if ($("#radioWget").is(":checked")) {
$('.opendapOpt').addClass('hidden');
$('.citeOpt').addClass('hidden');
$('.wgetOpt').removeClass('hidden');
} else if ($("#radioCite").is(":checked")) {
$('.opendapOpt').addClass('hidden');
$('.wgetOpt').addClass('hidden');
$('.citeOpt').removeClass('hidden');
}
});
});

// event listener for data query button click
$('#genQueryButton').on('click', function() {
var dataType = $('#periodMOMCobaltData').val()
Expand Down

0 comments on commit ea2ee55

Please sign in to comment.