Skip to content

Commit

Permalink
sheet close
Browse files Browse the repository at this point in the history
  • Loading branch information
@devincowan
devincowan committed Feb 27, 2024
1 parent a80df58 commit 607bf25
Showing 1 changed file with 52 additions and 50 deletions.
102 changes: 52 additions & 50 deletions frontend/src/components/TheBottomSheet.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,58 @@
<template>
<v-bottom-sheet v-model="showSheet" inset>
<!-- <v-btn @click="showSheet = false">
close
</v-btn> -->
<v-card height="100%">
<v-card-item class="text-center">
<v-card-title>{{ featureStore.activeFeature.sword.river_name }}</v-card-title>
<v-card-subtitle>
{{ featureStore.activeFeature.sword.reach_id }}
</v-card-subtitle>
</v-card-item>

<v-card height="100%">
<v-card-item class="text-center">
<v-card-title>{{ featureStore.activeFeature.sword.river_name }}</v-card-title>
<v-card-subtitle>
{{ featureStore.activeFeature.sword.reach_id }}
</v-card-subtitle>
</v-card-item>

<v-card-text>
<!-- TODO this linechart should only show single plot -->
<LineChart :data="featureStore.visData" />
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title>
<div>SWORD Info</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="(value, key, i) in featureStore.activeFeature.sword" :key="i">
<v-divider v-if="i < Object.keys(featureStore.activeFeature.sword).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title>
<div>HydroCron Query</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="(value, key, i) in featureStore.activeFeature.params" :key="i">
<v-divider v-if="i < Object.keys(featureStore.activeFeature.params).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title>
<div>SWOT Data ({{ featureStore.activeFeature.hits }} points)</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="swotFeature in featureStore.activeFeature.results.geojson.features" :key="swotFeature.index">
<div v-for="(value, key, i) in swotFeature.properties" :key="i">
<v-divider v-if="i < Object.keys(swotFeature.properties).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-card-text>
</v-card>
<v-card-text>
<!-- TODO this linechart should only show single plot -->
<LineChart :data="featureStore.visData" />
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title>
<div>SWORD Info</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="(value, key, i) in featureStore.activeFeature.sword" :key="i">
<v-divider v-if="i < Object.keys(featureStore.activeFeature.sword).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title>
<div>HydroCron Query</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="(value, key, i) in featureStore.activeFeature.params" :key="i">
<v-divider v-if="i < Object.keys(featureStore.activeFeature.params).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title>
<div>SWOT Data ({{ featureStore.activeFeature.hits }} points)</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
<div v-for="swotFeature in featureStore.activeFeature.results.geojson.features" :key="swotFeature.index">
<div v-for="(value, key, i) in swotFeature.properties" :key="i">
<v-divider v-if="i < Object.keys(swotFeature.properties).length - 1" />
<div>{{ key }}: {{ value }}</div>
</div>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-card-text>
</v-card>
</v-bottom-sheet>
</template>
<script setup>
Expand Down

0 comments on commit 607bf25

Please sign in to comment.