Skip to content

Commit 7b7caa1

Browse files
isedwardsisedwards
authored
Merge pull request #28 from opencdms/wip-switch-to-existing-pickers
WIP - switch to existing pickers
2 parents 783a9d3 + 2a28f71 commit 7b7caa1

5 files changed

Lines changed: 141 additions & 75 deletions

File tree

‎src/components/AppSidebar.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@
4747
<template v-slot:activator="{ props }">
4848
<v-list-item v-bind="props" prepend-icon="mdi-table" title="Data"/>
4949
</template>
50-
<v-list-item router :to="{name: 'data-ingest'}" prepend-icon="mdi-spirit-level" title="data-ingest"/>
51-
<v-list-item router :to="{name: 'data-extract'}" prepend-icon="mdi-spirit-level" title="data-extract"/>
52-
<v-list-item router :to="{name: 'data-inventory'}" prepend-icon="mdi-spirit-level" title="data-inventory"/>
53-
<v-list-item router :to="{name: 'data-map'}" prepend-icon="mdi-spirit-level" title="data-map"/>
54-
<v-list-item router :to="{name: 'data-station'}" prepend-icon="mdi-spirit-level" title="data-station"/>
55-
<v-list-item router :to="{name: 'data-parameter'}" prepend-icon="mdi-spirit-level" title="data-parameter"/>
50+
<v-list-item router :to="{name: 'data-ingest'}" prepend-icon="mdi-database-arrow-left" title="data-ingest"/>
51+
<v-list-item router :to="{name: 'data-extract'}" prepend-icon="mdi-database-arrow-right" title="data-extract"/>
52+
<v-list-item router :to="{name: 'data-inventory'}" prepend-icon="mdi-abacus" title="data-inventory"/>
53+
<v-list-item router :to="{name: 'data-map'}" prepend-icon="mdi-map" title="data-map"/>
54+
<v-list-item router :to="{name: 'data-station'}" prepend-icon="mdi-map-marker" title="data-station"/>
55+
<v-list-item router :to="{name: 'data-parameter'}" prepend-icon="mdi-thermometer" title="data-parameter"/>
5656
</v-list-group>
5757
<v-divider/>
5858

‎src/registry.json‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,6 @@
5353
"display": true,
5454
"package": "@opencdms"
5555
},
56-
{
57-
"component": "VListItem",
58-
"name": "data-station",
59-
"to": "/observations/station",
60-
"routeName": "data-station",
61-
"icon": "mdi-construction",
62-
"display": true,
63-
"package": "@opencdms"
64-
},
65-
{
66-
"component": "VListItem",
67-
"name": "data-station",
68-
"to": "/observations/station/",
69-
"routeName": "data-station",
70-
"icon": "mdi-construction",
71-
"display": true,
72-
"package": "@opencdms"
73-
},
7456
{
7557
"component": "VListItem",
7658
"name": "data-parameter",

‎src/router/routes.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,29 @@ const routes = [
209209
}
210210
]
211211
},
212+
213+
{
214+
path: '/data',
215+
name: 'data',
216+
children: [
217+
{
218+
path: 'station',
219+
name: 'data-station',
220+
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/data-station.vue')
221+
}
222+
]
223+
},
224+
{
225+
path: '/data/station/:id(.*)',
226+
children: [
227+
{
228+
path: '',
229+
name: 'data-station-id',
230+
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/data-station.vue'),
231+
}
232+
]
233+
},
234+
212235
{
213236
path: '/forms/observation-type/create',
214237
name: 'observation-type-form',

‎src/views/data-station.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<data-station title="data-station" content="This page is under construction" description="station centered view of observations" />
3+
<data-station/>
44
</div>
55
</template>
66

‎src/web-components/data-station.vue‎

Lines changed: 111 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,130 @@
11
<template>
2-
<v-card>
3-
<v-card-title>{{ title }}</v-card-title>
4-
<v-card-text>{{ content }}</v-card-text>
5-
<v-card-text>{{ description }}</v-card-text>
6-
</v-card>
2+
<v-container>
3+
<v-row>
4+
<v-col :cols="12">
5+
<v-card>
6+
<v-card-title>Select station</v-card-title>
7+
<v-card-text><select-host v-model="selectedHost"/></v-card-text>
8+
</v-card>
9+
</v-col>
10+
</v-row>
11+
12+
<v-row>
13+
</v-row>
14+
15+
<v-row v-if='host'>
16+
<v-col :cols="12">
17+
<v-card>
18+
<v-card-title>Select from available data for {{ $route.params.id }}</v-card-title>
19+
20+
<v-card-item>
21+
<v-container>
22+
<v-row style="height: 400px;">
23+
<v-col :cols="4"><select-observed-property/></v-col>
24+
<v-col :cols="4"><VueDatePicker :enable-time-picker="false" label="phenomenon_start" v-model="start_date" hint="Phenomenon start date" persistent-hint></VueDatePicker></v-col>
25+
<v-col :cols="4"><VueDatePicker :enable-time-picker="false" label="phenomenon_end" v-model="end_date" hint="Phenomenon end date" persistent-hint></VueDatePicker></v-col>
26+
</v-row>
27+
</v-container>
28+
</v-card-item>
29+
30+
</v-card>
31+
</v-col>
32+
</v-row>
33+
34+
</v-container>
35+
36+
737
</template>
838

939
<script>
10-
import { defineComponent } from 'vue';
11-
import { VCard, VCardTitle, VCardText } from 'vuetify/lib/components';
40+
import { defineComponent, ref, watchEffect, computed, watch } from 'vue';
41+
import { VCard, VCardTitle, VCardText, VCardItem, VTabs, VTab, VBtn, VAutocomplete } from 'vuetify/lib/components';
42+
import { VContainer, VCol, VRow } from 'vuetify/lib/components';
1243
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured} from 'vue';
44+
import { useRoute, useRouter } from 'vue-router';
45+
46+
import {useRepo} from 'pinia-orm';
47+
48+
import SelectHost from '@/web-components/pickers/select-host.vue';
49+
import SelectObservedProperty from '@/web-components/pickers/select-observed-property.vue';
50+
import VueDatePicker from '@vuepic/vue-datepicker';
51+
//import VueDatePicker from '@/web-components/pickers/date-picker.vue';
52+
import '@vuepic/vue-datepicker/dist/main.css';
53+
54+
const start_date = ref();
55+
const end_date = ref();
56+
57+
// opencdms imports
58+
import Host from '@/models/Host';
59+
1360
export default defineComponent({
14-
name: 'data-station',
15-
props: {
16-
title: {
17-
type: String,
18-
required: true,
19-
},
20-
content: {
21-
type: String,
22-
required: true,
23-
},
24-
description: {
25-
type: String,
26-
required: true,
27-
}
28-
},
61+
name: 'station',
2962
components: {
3063
VCard,
3164
VCardTitle,
3265
VCardText,
66+
VCardItem,
67+
VTabs,
68+
VTab,
69+
VBtn,
70+
VAutocomplete, VContainer, VCol, VRow,
71+
SelectHost,
72+
SelectObservedProperty,
73+
VueDatePicker
3374
},
3475
methods: {},
35-
setup() {
36-
// lifecycle hooks
37-
onBeforeMount( () => {
38-
// This hook is called before the component is mounted to the DOM.
39-
// This is a good place to do any necessary setup before the component is visible.
40-
});
41-
onMounted( () => {
42-
// This hook is called after the component is mounted to the DOM.
43-
// This is a good place to perform any necessary DOM manipulations, initialize
44-
// third-party libraries, or set up event listeners.
45-
});
46-
onBeforeUpdate( () => {
47-
// This hook is called when a component's data changes, but before the DOM is re-rendered.
48-
// This is a good place to make any necessary calculations or changes before the component
49-
// is updated.
50-
});
51-
onUpdated( () => {
52-
// This hook is called after the component is updated and the DOM is re-rendered.
53-
// This is a good place to perform any necessary DOM manipulations or update third-party
54-
// libraries.
55-
});
56-
onBeforeUnmount( () => {
57-
// This hook is called before the component is unmounted from the DOM.
58-
// This is a good place to clean up any resources or event listeners that were set up in
59-
// onMounted.
76+
setup(props) {
77+
// set up varaiables
78+
const selectedHost = ref(null)
79+
const router = useRouter();
80+
const geom = ref(null);
81+
// set up repos
82+
const hostRepo = useRepo(Host);
83+
const hostOptions = computed(() => { return hostRepo.all() });
84+
const host = ref(null)
85+
86+
const edit = () => {
87+
router.push('/data/station/'+route.params.id+'/edit');
88+
};
89+
90+
const fetchRecord = async(identifier) => {
91+
// load selected host
92+
host.value = useRepo(Host).where('id',route.params.id).first();
93+
}
94+
95+
// add watch to update the geom
96+
watch(host, (newVal) => {
97+
if( newVal ){
98+
const coords = newVal.location.match(/POINT\(([-\d\.]+)\s+([-\d\.]+)\)/);
99+
const latlng = [parseFloat(coords[1]), parseFloat(coords[2])];
100+
geom.value = {
101+
type: 'Feature',
102+
geometry: {
103+
type: 'Point',
104+
coordinates: latlng
105+
}
106+
}
107+
}
108+
console.log(geom.value)
60109
});
61-
onUnmounted( () => {
62-
// This hook is called after the component is unmounted from the DOM.
63-
// This is a good place to perform any final cleanup or tear down of resources.
110+
111+
const route = useRoute();
112+
const data = ref([]);
113+
114+
115+
onMounted( async() => {
116+
fetchRecord( route.params.id );
117+
watchEffect( () => {
118+
fetchRecord( route.params.id );
119+
});
120+
watch( (selectedHost), (data) => {
121+
router.push('/data/station/'+data.id);
122+
} )
64123
});
65124
onErrorCaptured( () => {});
125+
return {host, edit, hostOptions, selectedHost, geom};
66126
}
67127
68128
});
129+
69130
</script>

0 commit comments

Comments
 (0)