App.vue 3.7 KB

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