From 5e6c21ee1b9618d504b66dcc676f1660c0be9645 Mon Sep 17 00:00:00 2001
From: Aaron Briggs <abriggs@contractor.usgs.gov>
Date: Sat, 18 Jun 2022 12:08:54 -0500
Subject: [PATCH] basic container structure
---
...p.vue => TimeDownloadGraphControlsApp.vue} | 7 +-
.../components/hydrograph/index.js | 16 ++--
.../vue-components/select-actions.vue | 9 ++
.../vue-components/time-span-shortcuts.vue | 90 ++++++++++---------
.../templates/macros/components.html | 2 +-
5 files changed, 70 insertions(+), 54 deletions(-)
rename assets/src/scripts/monitoring-location/components/hydrograph/{TimeSpanShortcutsApp.vue => TimeDownloadGraphControlsApp.vue} (53%)
create mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/TimeSpanShortcutsApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/TimeDownloadGraphControlsApp.vue
similarity index 53%
rename from assets/src/scripts/monitoring-location/components/hydrograph/TimeSpanShortcutsApp.vue
rename to assets/src/scripts/monitoring-location/components/hydrograph/TimeDownloadGraphControlsApp.vue
index 287e44804..7c22a8463 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/TimeSpanShortcutsApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/TimeDownloadGraphControlsApp.vue
@@ -1,15 +1,18 @@
<template>
- <div class="short-cut-time-span-container">
+ <div id="time-download-graph-controls">
<TimeSpanShortcuts />
+ <SelectActions />
</div>
</template>
<script>
import TimeSpanShortcuts from './vue-components/time-span-shortcuts.vue';
+import SelectActions from './vue-components/select-actions.vue';
export default {
- name: 'TimeSpanShortcutsApp',
+ name: 'TimeDownloadGraphControlsApp',
components: {
+ SelectActions,
TimeSpanShortcuts
}
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 7ac2f98b8..1ca93514c 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -41,8 +41,8 @@ import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip'
import DataTablesApp from './DataTablesApp.vue';
import GraphControlsApp from './GraphControlsApp.vue';
-import TimeSpanShortcutsApp from './TimeSpanShortcutsApp.vue';
import ParameterSelectionApp from './ParameterSelectionApp.vue';
+import TimeDownloadGraphControlsApp from './TimeDownloadGraphControlsApp.vue';
/* eslint-disable vue/one-component-per-file */
@@ -123,16 +123,18 @@ export const attachToNode = function(store,
// Render initial UI elements prior to completion of data fetching
if (!showOnlyGraph) {
- const timeSpanShortcutsApp = createApp(TimeSpanShortcutsApp, {});
- timeSpanShortcutsApp.use(ReduxConnectVue, {
+ const timeDownloadGraphControlsApp = createApp(TimeDownloadGraphControlsApp, {});
+ timeDownloadGraphControlsApp.use(ReduxConnectVue, {
store,
mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
mapStateToPropsFactory: createStructuredSelector
});
- timeSpanShortcutsApp.provide('store', store);
- timeSpanShortcutsApp.provide('siteno', siteno);
- timeSpanShortcutsApp.provide('agencyCd', agencyCd);
- timeSpanShortcutsApp.mount('.short-cut-time-span-container');
+ timeDownloadGraphControlsApp.provide('store', store);
+ timeDownloadGraphControlsApp.provide('siteno', siteno);
+ timeDownloadGraphControlsApp.provide('agencyCd', agencyCd);
+ timeDownloadGraphControlsApp.mount('#time-download-graph-controls-anchor');
+
+
select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
}
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
new file mode 100644
index 000000000..b92d28138
--- /dev/null
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
@@ -0,0 +1,9 @@
+<template>
+ <h2>actions here</h2>
+</template>
+
+<script>
+ export default {
+ name: 'SelectActions'
+ };
+</script>
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
index 6b5749a95..2fb202f9b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
@@ -1,55 +1,57 @@
<template>
- <div class="usa-form">
- <div
- v-if="ivData"
- class="iv-button-container"
- >
+ <div class="short-cut-time-span-container">
+ <div class="usa-form">
<div
- v-for="shortcut in ivShortcuts"
- :key="shortcut.label"
- class="usa-radio"
+ v-if="ivData"
+ class="iv-button-container"
>
- <input
- :id="`${shortcut.timeSpan}-input`"
- class="usa-radio__input"
- type="radio"
- name="time-span"
- :value="shortcut.timeSpan"
- :checked="selectedTimeSpan === shortcut.timeSpan"
- @click="setTimeSpan(shortcut.timeSpan)"
+ <div
+ v-for="shortcut in ivShortcuts"
+ :key="shortcut.label"
+ class="usa-radio"
>
- <label
- class="usa-radio__label"
- :for="`${shortcut.timeSpan}-input`"
- >
- {{ shortcut.label }}
- </label>
+ <input
+ :id="`${shortcut.timeSpan}-input`"
+ class="usa-radio__input"
+ type="radio"
+ name="time-span"
+ :value="shortcut.timeSpan"
+ :checked="selectedTimeSpan === shortcut.timeSpan"
+ @click="setTimeSpan(shortcut.timeSpan)"
+ >
+ <label
+ class="usa-radio__label"
+ :for="`${shortcut.timeSpan}-input`"
+ >
+ {{ shortcut.label }}
+ </label>
+ </div>
</div>
- </div>
- <div
- v-if="!ivData && gwData"
- class="gw-button-container"
- >
<div
- v-for="shortcut in gwShortcuts"
- :key="shortcut.label"
- class="usa-radio"
+ v-if="!ivData && gwData"
+ class="gw-button-container"
>
- <input
- :id="`${shortcut.timeSpan}-input`"
- class="usa-radio__input"
- type="radio"
- name="time-span"
- :value="shortcut.timeSpan"
- :checked="selectedTimeSpan === shortcut.timeSpan"
- @click="setTimeSpan(shortcut.timeSpan)"
- >
- <label
- class="usa-radio__label"
- :for="`${shortcut.timeSpan}-input`"
+ <div
+ v-for="shortcut in gwShortcuts"
+ :key="shortcut.label"
+ class="usa-radio"
>
- {{ shortcut.label }}
- </label>
+ <input
+ :id="`${shortcut.timeSpan}-input`"
+ class="usa-radio__input"
+ type="radio"
+ name="time-span"
+ :value="shortcut.timeSpan"
+ :checked="selectedTimeSpan === shortcut.timeSpan"
+ @click="setTimeSpan(shortcut.timeSpan)"
+ >
+ <label
+ class="usa-radio__label"
+ :for="`${shortcut.timeSpan}-input`"
+ >
+ {{ shortcut.label }}
+ </label>
+ </div>
</div>
</div>
</div>
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index 0ee520ec8..95c77a667 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -2,7 +2,7 @@
<div class="wdfn-component" data-component="hydrograph" data-siteno="{{ site_data.site_no }}"
data-agency-cd="{{ site_data.agency_cd }}" data-sitename="{{ site_data.station_nm }}"
data-parameter-code="{{ default_parameter_code }}">
- <div id="time-download-graph-controls">
+ <div id="time-download-graph-controls-anchor">
{% if iv_period_of_record or gw_period_of_record %}
<div class="short-cut-time-span-container"></div>
{% endif %}
--
GitLab