App.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <v-app :dark="darkMode">
  3. <!-- Application cache reset button -->
  4. <div class="reset-button">
  5. <ResetAppButton />
  6. </div>
  7. <!--/ Application cache reset button -->
  8. <v-slide-y-transition mode="out-in">
  9. <!-- Loading screen -->
  10. <loader v-if="loadingMessage" :message="loadingMessage" />
  11. <!--/ Loading screen -->
  12. <!-- Host connection configuration -->
  13. <host-config v-else-if="!isHostConfigured" />
  14. <!--/ Host connection configuration -->
  15. <div v-else>
  16. <!-- Sidebar menu -->
  17. <v-navigation-drawer
  18. v-model="drawer"
  19. clipped
  20. fixed
  21. app
  22. >
  23. <v-list dense>
  24. <v-list-tile to="/experimentsList" exact>
  25. <v-list-tile-action>
  26. <v-icon>library_books</v-icon>
  27. </v-list-tile-action>
  28. <v-list-tile-content>
  29. <v-list-tile-title>List of experiments</v-list-tile-title>
  30. </v-list-tile-content>
  31. </v-list-tile>
  32. <v-list-tile @click="loadScenes">
  33. <v-list-tile-action>
  34. <v-icon>refresh</v-icon>
  35. </v-list-tile-action>
  36. <v-list-tile-content>
  37. <v-list-tile-title>Refresh list of scenes</v-list-tile-title>
  38. </v-list-tile-content>
  39. </v-list-tile>
  40. </v-list>
  41. </v-navigation-drawer>
  42. <!--/ Sidebar menu -->
  43. <!-- Top bar -->
  44. <v-toolbar app fixed clipped-left>
  45. <v-toolbar-side-icon @click.stop="drawer = !drawer" />
  46. <v-toolbar-title>Web experiment</v-toolbar-title>
  47. </v-toolbar>
  48. <!--/ Top bar -->
  49. <!-- Pages content -->
  50. <v-content>
  51. <v-container fill-height>
  52. <v-layout justify-center>
  53. <v-flex xs12>
  54. <v-scroll-x-reverse-transition mode="out-in">
  55. <!-- View injected here -->
  56. <router-view />
  57. <!--/ View injected here -->
  58. </v-scroll-x-reverse-transition>
  59. </v-flex>
  60. </v-layout>
  61. </v-container>
  62. </v-content>
  63. <!--/ Pages content -->
  64. </div>
  65. </v-slide-y-transition>
  66. </v-app>
  67. </template>
  68. <script>
  69. import ResetAppButton from '@/components/ResetAppButton.vue'
  70. import Loader from '@/components/Loader.vue'
  71. import HostConfig from '@/components/HostConfig.vue'
  72. import { mapGetters, mapActions } from 'vuex'
  73. export default {
  74. components: {
  75. ResetAppButton,
  76. Loader,
  77. HostConfig
  78. },
  79. data() {
  80. return {
  81. darkMode: true,
  82. drawer: false,
  83. hostConfigured: false,
  84. loadingErrorMessage: null,
  85. loadingMessage: null
  86. }
  87. },
  88. computed: {
  89. ...mapGetters(['isHostConfigured', 'areScenesLoaded'])
  90. },
  91. watch: {
  92. isHostConfigured(value) {
  93. if (!this.areScenesLoaded && value) this.loadAppData()
  94. }
  95. },
  96. mounted() {
  97. if (this.isHostConfigured && !this.areScenesLoaded) this.loadAppData()
  98. },
  99. methods: {
  100. ...mapActions(['loadScenesList']),
  101. async loadAppData() {
  102. if (this.isHostConfigured && !this.areScenesLoaded) {
  103. await this.loadScenes()
  104. }
  105. },
  106. async loadScenes() {
  107. this.loadingMessage = 'Loading scenes list...'
  108. try {
  109. await this.loadScenesList()
  110. }
  111. catch (err) {
  112. this.loadingErrorMessage = err.message
  113. return
  114. }
  115. finally {
  116. this.loadingMessage = null
  117. }
  118. }
  119. }
  120. }
  121. </script>
  122. <style scoped>
  123. .reset-button {
  124. position: absolute;
  125. right: 0;
  126. bottom: 0;
  127. z-index: 999;
  128. }
  129. </style>