Skip to content
Snippets Groups Projects
Commit d41ba76a authored by Briggs, Aaron Shane's avatar Briggs, Aaron Shane
Browse files

only use vue container

parent 5e6c21ee
No related branches found
No related tags found
1 merge request!351Wdfn 744 replace select actions with vue
Hide whitespace changes
Inline Side-by-side
assets/src/scripts/monitoring-location/components/hydrograph/index.js
+ 1
− 1
View file @ d41ba76a
......@@ -136,7 +136,7 @@ export const attachToNode = function(store,
select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
// select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
}
const graphContainer = nodeElem.select('.graph-container');
......
assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
+ 350
− 2
View file @ d41ba76a
<template>
<h2>actions here</h2>
<div id="time-download-graph-controls">
<div
class="short-cut-time-span-container"
data-v-app=""
>
<div class="short-cut-time-span-container">
<div class="usa-form">
<div class="iv-button-container">
<div class="usa-radio">
<input
id="P7D-input"
class="usa-radio__input"
type="radio"
name="time-span"
value="P7D"
><label
class="usa-radio__label"
for="P7D-input"
>7 days</label>
</div><div class="usa-radio">
<input
id="P30D-input"
class="usa-radio__input"
type="radio"
name="time-span"
value="P30D"
><label
class="usa-radio__label"
for="P30D-input"
>30 days</label>
</div><div class="usa-radio">
<input
id="P365D-input"
class="usa-radio__input"
type="radio"
name="time-span"
value="P365D"
><label
class="usa-radio__label"
for="P365D-input"
>1 year</label>
</div>
</div><!---->
</div>
</div>
</div>
<div class="select-actions-container">
<ul class="select-actions-button-group usa-button-group">
<li class="usa-button-group__item">
<button
class="usa-button"
aria-expanded="false"
aria-controls="change-time-span-container"
ga-on="click"
ga-event-category="select-action"
ga-event-action="change-time-span-container-toggle"
>
<span>Change time span</span>
</button>
</li><li class="usa-button-group__item">
<button
class="usa-button"
aria-expanded="false"
aria-controls="download-graph-data-container-select-actions"
ga-on="click"
ga-event-category="select-action"
ga-event-action="download-graph-data-container-select-actions-toggle"
>
<svg
class="usa-icon"
aria-hidden="true"
role="img"
><use :xlink:href="downloadIcon" /></svg><span>Retrieve data</span>
</button>
</li>
</ul><div
id="change-time-span-container"
hidden="true"
>
<div class="time-span-input-container">
<div class="date-range-container">
<span>Date range:</span><div>
<div class="usa-form-group">
<div
id="start-date-hint"
class="usa-hint"
>
mm/dd/yyyy
</div><div
class="usa-date-picker usa-date-picker--initialized"
data-min-date="1900-01-01"
data-max-date="2022-06-16"
data-range-date="2022-06-16"
data-default-value="2018-06-11"
>
<input
class="usa-input usa-date-picker__internal-input"
type="text"
maxlength="10"
size="10"
aria-label="Start date"
aria-describedby="start-date-hint"
aria-hidden="true"
tabindex="-1"
style="display: none;"
><div class="usa-date-picker__wrapper">
<input
id="start-date"
class="usa-input usa-date-picker__external-input"
type="text"
maxlength="10"
size="10"
name="start-date"
aria-label="Start date"
aria-describedby="start-date-hint"
>
<button
type="button"
class="usa-date-picker__button"
aria-haspopup="true"
aria-label="Toggle calendar"
/>
<div
class="usa-date-picker__calendar"
role="dialog"
aria-modal="true"
hidden=""
/>
<div
class="usa-sr-only usa-date-picker__status"
role="status"
aria-live="polite"
/>
</div><div class="usa-date-picker__wrapper">
<input
class="usa-input usa-date-picker__internal-input usa-date-picker__external-input"
type="text"
maxlength="10"
size="10"
aria-label="Start date"
aria-describedby="start-date-hint"
aria-hidden="true"
tabindex="-1"
style="display: none;"
>
<button
type="button"
class="usa-date-picker__button"
aria-haspopup="true"
aria-label="Toggle calendar"
/>
<div
class="usa-date-picker__calendar"
role="dialog"
aria-modal="true"
hidden=""
/>
<div
class="usa-sr-only usa-date-picker__status"
role="status"
aria-live="polite"
/>
</div>
</div>
</div><div class="usa-form-group">
<div
id="end-date-hint"
class="usa-hint"
>
mm/dd/yyyy
</div><div
class="usa-date-picker usa-date-picker--initialized"
data-min-date="2018-06-11"
data-max-date="2022-06-21"
data-range-date="2018-06-11"
data-default-value="2022-06-16"
>
<input
class="usa-input usa-date-picker__internal-input"
type="text"
maxlength="10"
size="10"
aria-label="End date"
aria-describedby="end-date-hint"
aria-hidden="true"
tabindex="-1"
style="display: none;"
><div class="usa-date-picker__wrapper">
<input
id="end-date"
class="usa-input usa-date-picker__external-input"
type="text"
maxlength="10"
size="10"
name="end-date"
aria-label="End date"
aria-describedby="end-date-hint"
>
<button
type="button"
class="usa-date-picker__button"
aria-haspopup="true"
aria-label="Toggle calendar"
/>
<div
class="usa-date-picker__calendar"
role="dialog"
aria-modal="true"
hidden=""
/>
<div
class="usa-sr-only usa-date-picker__status"
role="status"
aria-live="polite"
/>
</div><div class="usa-date-picker__wrapper">
<input
class="usa-input usa-date-picker__internal-input usa-date-picker__external-input"
type="text"
maxlength="10"
size="10"
aria-label="End date"
aria-describedby="end-date-hint"
aria-hidden="true"
tabindex="-1"
style="display: none;"
>
<button
type="button"
class="usa-date-picker__button"
aria-haspopup="true"
aria-label="Toggle calendar"
/>
<div
class="usa-date-picker__calendar"
role="dialog"
aria-modal="true"
hidden=""
/>
<div
class="usa-sr-only usa-date-picker__status"
role="status"
aria-live="polite"
/>
</div>
</div>
</div>
</div>
</div><div>Or</div><div class="days-before-today-container">
<div class="days-before-container">
<label
class="usa-label"
for="days-before-today"
>Days before today: </label><input
id="days-before-today"
class="usa-input"
name="days-before-today"
type="text"
maxlength="5"
>
</div>
</div>
</div><button
class="usa-button"
ga-on="click"
ga-event-category="TimeSeriesGraph"
ga-event-action="timeSpanChange"
>
Change time span
</button>
</div><div
id="download-graph-data-container-select-actions"
class="download-graph-data-container"
data-v-app=""
hidden="true"
>
<div class="download-data-component">
<fieldset class="usa-fieldset">
<legend class="usa-legend">
Select data to retrieve
</legend><div>
<input
id="select-actions-set-primary-data-download-button"
class="usa-radio__input"
type="radio"
name="select-actions-set"
><label
class="usa-radio__label"
for="select-actions-set-primary-data-download-button"
> Current time series </label>
</div><!----><!----><!----><div>
<input
id="select-actions-set-site-data-download-button"
class="usa-radio__input"
type="radio"
name="select-actions-set"
><label
class="usa-radio__label"
for="select-actions-set-site-data-download-button"
> About this location </label>
</div><div>
<!----><button
class="usa-button download-selected-data"
ga-on="click"
ga-event-category="download-selected-data"
ga-event-action="download"
>
<svg
class="usa-icon"
aria-hidden="true"
role="img"
><use :xlink:href="downloadIcon" /></svg> Retrieve
</button>
</div>
</fieldset><div class="download-info">
<div>
<div> A separate tab will open with the requested data. </div><div>
All data is in <a
href="https://waterdata.usgs.gov/nwis/?tab_delimited_format_info"
target="_blank"
>RDB</a> format.
</div><div>
Data is retrieved from <a
href="https://waterservices.usgs.gov"
target="_blank"
>USGS Water Data Services.</a>
</div><div>
If you are an R user, use the <a
href="https://usgs-r.github.io/dataRetrieval/"
target="_blank"
>USGS dataRetrieval package</a> to download, analyze and plot your data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import config from 'ui/config.js';
export default {
name: 'SelectActions'
name: 'SelectActions',
setup() {
const downloadIcon = `${config.STATIC_URL}img/sprite.svg#file_download`;
return {
downloadIcon
};
}
};
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment