App.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <v-app :dark="darkMode">
  3. <div v-if="!loadingMessage && isGdprValidated && isHostConfigured">
  4. <ResetAppMenu ref="resetApp" />
  5. <!-- DISABLE : This part is commented to disable view of menu when starting scene experiment -->
  6. <!-- Sidebar menu -->
  7. <!--<v-navigation-drawer
  8. v-model="drawer"
  9. clipped
  10. fixed
  11. app
  12. >
  13. <v-list dense>
  14. <v-list-tile to="/experiments" exact>
  15. <v-list-tile-action>
  16. <v-icon>library_books</v-icon>
  17. </v-list-tile-action>
  18. <v-list-tile-content>
  19. <v-list-tile-title>List of experiments</v-list-tile-title>
  20. </v-list-tile-content>
  21. </v-list-tile>
  22. <v-list-tile to="/linkGenerator" exact>
  23. <v-list-tile-action>
  24. <v-icon>share</v-icon>
  25. </v-list-tile-action>
  26. <v-list-tile-content>
  27. <v-list-tile-title>Link generator</v-list-tile-title>
  28. </v-list-tile-content>
  29. </v-list-tile>
  30. <v-fade-transition>
  31. <v-list-tile v-if="showResetAppInMenu" @click="$refs.resetApp.show(), drawer = false">
  32. <v-list-tile-action>
  33. <v-icon>refresh</v-icon>
  34. </v-list-tile-action>
  35. <v-list-tile-content>
  36. <v-list-tile-title>Application reset menu</v-list-tile-title>
  37. </v-list-tile-content>
  38. </v-list-tile>
  39. </v-fade-transition>
  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 @click="showResetAppInMenu = !showResetAppInMenu">SIN3D</v-toolbar-title>
  47. </v-toolbar> -->
  48. <!--/ Top bar -->
  49. </div>
  50. <!-- Pages content -->
  51. <v-content>
  52. <v-container fill-height style="padding-top:0px !important; padding-bottom:0px !important">
  53. <v-layout justify-center>
  54. <v-flex xs12>
  55. <v-scroll-x-reverse-transition mode="out-in">
  56. <!-- View injected here -->
  57. <router-view />
  58. <!--/ View injected here -->
  59. </v-scroll-x-reverse-transition>
  60. </v-flex>
  61. </v-layout>
  62. </v-container>
  63. </v-content>
  64. <!--/ Pages content -->
  65. </v-app>
  66. </template>
  67. <script>
  68. import './style.css'
  69. import ResetAppMenu from '@/components/ResetAppMenu.vue'
  70. import { mapGetters, mapActions } from 'vuex'
  71. export default {
  72. components: {
  73. ResetAppMenu
  74. },
  75. data() {
  76. return {
  77. darkMode: true,
  78. drawer: false,
  79. showResetAppInMenu: 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.load(this.loadScenesList, 'Loading scenes list...')
  107. }
  108. },
  109. async load(fn, loadingMessage) {
  110. try {
  111. this.loadingMessage = loadingMessage
  112. await fn()
  113. }
  114. catch (err) {
  115. console.error(err)
  116. this.loadingErrorMessage = err.message
  117. return
  118. }
  119. finally {
  120. this.loadingMessage = null
  121. }
  122. }
  123. }
  124. }
  125. </script>