ScenesList.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <div>
  3. Scenes list
  4. <v-card>
  5. <v-card-title>
  6. Search into scenes
  7. <v-spacer />
  8. <v-text-field
  9. v-model="search"
  10. append-icon="search"
  11. label="Search"
  12. single-line
  13. hide-details
  14. />
  15. </v-card-title>
  16. <v-container
  17. fluid
  18. grid-list-md
  19. >
  20. <v-layout row wrap>
  21. <v-flex
  22. md3
  23. v-for="aScene in filteredScenes()"
  24. :key="aScene.name"
  25. >
  26. <v-card>
  27. <a
  28. :href="aScene.thumbLink"
  29. >
  30. <v-img
  31. :src="aScene.thumbLink"
  32. height="200px"
  33. />
  34. </a>
  35. <v-card-title primary-title>
  36. <div>
  37. <div class="headline">{{ aScene.name }}</div>
  38. </div>
  39. <v-spacer />
  40. </v-card-title>
  41. </v-card>
  42. </v-flex>
  43. </v-layout>
  44. </v-container>
  45. </v-card>
  46. </div>
  47. </template>
  48. <script>
  49. import { API_ROUTES } from '@/functions'
  50. import { mapGetters } from 'vuex'
  51. export default {
  52. name: 'ScenesList',
  53. data() {
  54. return {
  55. scenes: [],
  56. search: ''
  57. }
  58. },
  59. computed: {
  60. ...mapGetters(['getHostURI'])
  61. },
  62. async mounted() {
  63. // define empyt scenes list
  64. this.scenes = []
  65. const scenesList = await fetch(`${this.getHostURI}${API_ROUTES.listScenes}`)
  66. .then(res => res.json())
  67. for (const aScene of scenesList.data) {
  68. const { data: thumb } = await fetch(`${this.getHostURI}${API_ROUTES.getImage(aScene, 'max')}`).then(res => res.json())
  69. let sceneObj = {
  70. name: thumb.sceneName,
  71. thumbLink: `${this.getHostURI}${thumb.link}`,
  72. qualitiesLink: `${this.getHostURI}${API_ROUTES.listSceneQualities(aScene)}`
  73. }
  74. this.scenes.push(sceneObj)
  75. }
  76. },
  77. methods: {
  78. filteredScenes: function () {
  79. let searchCriteria = this.search
  80. return this.scenes.filter(function (s) {
  81. return s.name.includes(searchCriteria) || searchCriteria === ''
  82. })
  83. }
  84. }
  85. }
  86. </script>