App.vue 3.4 KB

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