Skip to content

[WIP] Unify configuration and application state getters/setters #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[WIP] Unify configuration and application state getters/setters #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 39 additions & 17 deletions components/cal/map.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ import { type Stop, stopToStopCsv } from '~/src/stop'
import { type Route, routeToRouteCsv } from '~/src/route'
import type { Bbox, Feature, PopupFeature, MarkerFeature } from '~/src/geom'
import { colors, routeTypes } from '~/src/constants'
import type { CensusGeography } from '~/src/census'
import type { ScenarioFilterResult } from '~/src/scenario/scenario'
import type { ScenarioConfig, ScenarioFilterResult } from '~/src/scenario/scenario'
import type { UIConfig } from '~/pages/tne.vue'

const emit = defineEmits<{
setBbox: [value: Bbox]
Expand All @@ -54,15 +54,37 @@ const emit = defineEmits<{
}>()

const props = defineProps<{
bbox: Bbox
dataDisplayMode: string
colorKey: string
displayEditBboxMode?: boolean
hideUnmarked: boolean
censusGeographiesSelected: CensusGeography[]
// bbox: Bbox
// dataDisplayMode: string
// colorKey: string
// displayEditBboxMode?: boolean
// hideUnmarked: boolean
// censusGeographiesSelected: CensusGeography[]
scenarioFilterResult?: ScenarioFilterResult
}>()

const scenarioConfig = defineModel<ScenarioConfig | null>('scenarioConfig')
const uiConfig = defineModel<UIConfig>('uiConfig')

const bbox = computed(() => {
return scenarioConfig.value?.bbox || { valid: false, ne: { lon: 0, lat: 0 }, sw: { lon: 0, lat: 0 } }
})
const displayEditBboxMode = computed(() => {
return uiConfig.value?.displayEditBboxMode || false
})
const dataDisplayMode = computed(() => {
return uiConfig.value?.dataDisplayMode || 'default'
})
const colorKey = computed(() => {
return uiConfig.value?.colorKey || 'default'
})
const hideUnmarked = computed(() => {
return uiConfig.value?.hideUnmarked || false
})
const censusGeographiesSelected = computed(() => {
return []
})

const showShareMenu = ref(false)
const toggleShareMenu = useToggle(showShareMenu)

Expand All @@ -71,15 +93,15 @@ const toggleShareMenu = useToggle(showShareMenu)

// Compute initial center point; do not update
const centerPoint = {
lon: (props.bbox.sw.lon + props.bbox.ne.lon) / 2,
lat: (props.bbox.sw.lat + props.bbox.ne.lat) / 2
lon: (bbox.value.sw.lon + bbox.value.ne.lon) / 2,
lat: (bbox.value.sw.lat + bbox.value.ne.lat) / 2
}

// Polygon for drawing bbox area
const bboxArea = computed(() => {
const f: Feature[] = []
if (props.bbox.valid && props.displayEditBboxMode) {
const p = props.bbox
if (bbox.value.valid && displayEditBboxMode.value) {
const p = bbox.value
const coords = [[
[p.sw.lon, p.sw.lat],
[p.sw.lon, p.ne.lat],
Expand All @@ -104,7 +126,7 @@ const bboxArea = computed(() => {
const bboxMarkers = computed(() => {
const ret: MarkerFeature[] = []

if (!props.displayEditBboxMode) {
if (!displayEditBboxMode.value) {
return ret
}

Expand All @@ -116,14 +138,14 @@ const bboxMarkers = computed(() => {
swElement.appendChild(swIconElement)

ret.push({
point: props.bbox.sw,
point: bbox.value.sw,
color: '#ff0000',
draggable: true,
element: swElement,
onDragEnd: (c: any) => {
emit('setBbox', {
valid: true,
ne: props.bbox.ne,
ne: bbox.value.ne,
sw: {
lon: c.target.getLngLat().lng,
lat: c.target.getLngLat().lat,
Expand All @@ -140,14 +162,14 @@ const bboxMarkers = computed(() => {
neElement.appendChild(neIconElement)

ret.push({
point: props.bbox.ne,
point: bbox.value.ne,
color: '#00ff00',
draggable: true,
element: neElement,
onDragEnd: (c: any) => {
emit('setBbox', {
valid: true,
sw: props.bbox.sw,
sw: bbox.value.sw,
ne: {
lon: c.target.getLngLat().lng,
lat: c.target.getLngLat().lat,
Expand Down
55 changes: 23 additions & 32 deletions components/cal/query.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
Specify your desired date range and geographic bounds. Then click <em>Run Query</em>.
</tl-msg-info>

<div class="cal-body">
<div v-if="scenarioConfig && uiConfig" class="cal-body">
<tl-msg-box variant="text" title="Date range">
<o-field>
<template #label>
Expand All @@ -17,7 +17,7 @@
<o-icon icon="information" />
</o-tooltip>
</template>
<o-datepicker v-model="startDate" />
<o-datepicker v-model="scenarioConfig.startDate" />
</o-field>
<o-field addons>
<template #label>
Expand All @@ -26,7 +26,7 @@
<o-icon icon="information" />
</o-tooltip>
</template>
<o-datepicker v-if="!selectSingleDay" v-model="endDate" />
<o-datepicker v-if="!selectSingleDay" v-model="scenarioConfig.endDate" />
<o-button @click="toggleSelectSingleDay()">
{{ selectSingleDay ? 'Set an end date' : 'Remove end date' }}
</o-button>
Expand All @@ -36,7 +36,7 @@
<tl-msg-box variant="text" title="Geographic Bounds">
<tl-msg-warning v-if="debugMenu" class="mt-4" style="width:400px" title="Debug menu">
<o-field label="Preset bounding box">
<o-select v-model="cannedBbox">
<o-select v-model="uiConfig.cannedBbox">
<option v-for="[cannedBboxName, cannedBboxDetails] of cannedBboxes.entries()" :key="cannedBboxName" :value="cannedBboxName">
{{ cannedBboxDetails.label }}
</option>
Expand All @@ -48,7 +48,7 @@
<br>
<o-field label="Data options">
<o-checkbox
v-model="scheduleEnabled"
v-model="scenarioConfig.scheduleEnabled"
:true-value="true"
:false-value="false"
>
Expand All @@ -67,32 +67,32 @@
</o-tooltip>
</template>
<o-select
v-model="geomSource"
v-model="uiConfig.geomSource"
:options="geomSources"
/>
</o-field>
</div>

<div class="column is-half" :class="{ 'is-hidden': geomSource !== 'adminBoundary' }">
<div class="column is-half" :class="{ 'is-hidden': uiConfig.geomSource !== 'adminBoundary' }">
<o-field>
<template #label>
Boundary Type
</template>
<o-select
v-model="geomLayer"
:options="props.censusGeographyLayerOptions"
v-model="uiConfig.geomLayer"
:options="uiConfig.censusGeographyLayerOptions"
/>
</o-field>
</div>
</div>

<div class="container is-max-tablet" :class="{ 'is-hidden': geomSource !== 'adminBoundary' }">
<div class="container is-max-tablet" :class="{ 'is-hidden': uiConfig.geomSource !== 'adminBoundary' }">
<o-field>
<template #label>
Include Boundaries
</template>
<o-taginput
v-model="geographyIds"
v-model="scenarioConfig.geographyIds"
v-model:input="geomSearch"
:open-on-focus="true"
:options="selectedGeographyTagOptions"
Expand Down Expand Up @@ -124,9 +124,10 @@
<script setup lang="ts">
import { useToggle } from '@vueuse/core'
import { useLazyQuery } from '@vue/apollo-composable'
import type { Bbox, Point } from '~/src/geom'
import type { UIConfig } from '~/pages/tne.vue'
import { cannedBboxes, geomSources } from '~/src/constants'
import { type CensusDataset, type CensusGeography, geographySearchQuery } from '~/src/census'
import type { ScenarioConfig } from '~/src/scenario/scenario'

const emit = defineEmits([
'setBbox',
Expand All @@ -135,34 +136,24 @@ const emit = defineEmits([
])

const loadExampleData = async () => {
emit('loadExampleData', cannedBbox.value)
emit('loadExampleData', uiConfig.value?.cannedBbox)
}

const props = defineProps<{
censusGeographyLayerOptions: { label: string, value: string }[]
mapExtentCenter: Point | null
}>()
const scenarioConfig = defineModel<ScenarioConfig | null>('scenarioConfig')
const uiConfig = defineModel<UIConfig>('uiConfig')

const bbox = defineModel<Bbox>('bbox', { default: null })
const geographyIds = defineModel<number[]>('geographyIds')
const censusGeographiesSelected = defineModel<CensusGeography[]>('censusGeographiesSelected', { default: [] })
const cannedBbox = defineModel<string>('cannedBbox', { default: null })
// Local state
const debugMenu = useDebugMenu()
const endDate = defineModel<Date>('endDate')
const geomLayer = defineModel<string>('geomLayer')
const geomSearch = ref('')
const geomSource = defineModel<string>('geomSource')
const scheduleEnabled = defineModel<boolean>('scheduleEnabled')
const selectSingleDay = ref(true)
const startDate = defineModel<Date>('startDate')
const toggleSelectSingleDay = useToggle(selectSingleDay)

const geomSearchVars = computed(() => {
return {
layer: geomLayer.value,
layer: uiConfig.value?.geomLayer,
search: geomSearch.value,
limit: 10,
focus: props.mapExtentCenter,
focus: uiConfig.value?.mapExtentCenter,
}
})

Expand All @@ -181,8 +172,8 @@ const {
)

watch(geomSearchVars, () => {
if ((geomSearch.value || '').length >= 2 && geomLayer.value) {
if (geomSearch.value && geomLayer.value) {
if ((geomSearch.value || '').length >= 2 && uiConfig.value?.geomLayer) {
if (geomSearch.value && uiConfig.value.geomLayer) {
geomLoad(geographySearchQuery)
} else {
geomRefetch()
Expand All @@ -193,7 +184,7 @@ watch(geomSearchVars, () => {
const selectedGeographyTagOptions = computed((): { value: number, label: string }[] => {
// Combine both the selected geographies and the search results
const geogs: CensusGeography[] = []
for (const geo of censusGeographiesSelected.value || []) {
for (const geo of uiConfig.value?.censusGeographiesSelected || []) {
geogs.push({
...geo,
})
Expand Down Expand Up @@ -232,7 +223,7 @@ const selectedGeographyTagOptions = computed((): { value: number, label: string
/////////////////////////////////////////

const validQueryParams = computed(() => {
return startDate.value && bbox?.value?.valid
return scenarioConfig?.value?.startDate && scenarioConfig?.value?.bbox
})
</script>

Expand Down
Loading