12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <div>
- Scenes list
- <v-card>
- <v-container
- fluid
- grid-list-md
- >
- <v-layout row wrap>
- <v-flex
- md3
- v-for="aScene in scenes"
- :key="aScene.name"
- >
- <v-card>
- <a
- :href="aScene.thumbLink"
- >
- <v-img
- :src="aScene.thumbLink"
- height="200px"
- />
- </a>
- <v-card-title primary-title>
- <div>
- <div class="headline">{{ aScene.name }}</div>
- </div>
- <v-spacer />
- </v-card-title>
- </v-card>
- </v-flex>
- </v-layout>
- </v-container>
- </v-card>
- </div>
- </template>
- <script>
- import { API_ROUTES } from '@/functions'
- import { mapGetters } from 'vuex'
- export default {
- name: 'ScenesList',
- data() {
- return {
- scenes: []
- }
- },
- computed: {
- ...mapGetters(['getHostURI'])
- },
- async mounted() {
- // define empyt scenes list
- this.scenes = []
- const scenesList = await fetch(`${this.getHostURI}${API_ROUTES.listScenes}`)
- .then(res => res.json())
- for (const aScene of scenesList.data) {
- const { data: thumb } = await fetch(`${this.getHostURI}${API_ROUTES.getImage(aScene, 'max')}`).then(res => res.json())
- let sceneObj = {
- name: thumb.sceneName,
- thumbLink: `${this.getHostURI}${thumb.link}`,
- qualitiesLink: `${this.getHostURI}${API_ROUTES.listSceneQualities(aScene)}`
- }
- this.scenes.push(sceneObj)
- }
- }
- }
- </script>
|