ExperimentBlock.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <div>
  3. <v-container grid-list-md text-xs-center fluid>
  4. <v-layout row wrap>
  5. <!-- Experiment header -->
  6. <v-flex xs12>
  7. <!-- DISABLE : This part is commented to disable view of back scene selection button when starting scene experiment -->
  8. <!--
  9. <v-layout justify-start>
  10. <v-btn flat exact :to="`/experiments/${experimentName}`">
  11. <v-icon left>arrow_back</v-icon>
  12. Back to scene selection
  13. </v-btn>
  14. </v-layout>
  15. -->
  16. <h2>Experiment "{{ $route.meta.fullName }}"</h2>
  17. <h3>{{ sceneName }}</h3>
  18. <slot name="header"></slot>
  19. </v-flex>
  20. <!--/ Experiment header -->
  21. <!-- Loading screen -->
  22. <loader v-if="loadingMessage" :message="loadingMessage" />
  23. <!--/ Loading screen -->
  24. <!-- Experiment -->
  25. <template v-else-if="!loadingErrorMessage">
  26. <slot name="content"></slot>
  27. </template>
  28. <!--/ Experiment -->
  29. </v-layout>
  30. </v-container>
  31. </div>
  32. </template>
  33. <script>
  34. import Loader from '@/components/Loader.vue'
  35. export default {
  36. name: 'ExperimentBlock',
  37. components: {
  38. Loader
  39. },
  40. props: {
  41. experimentName: {
  42. type: String,
  43. required: true
  44. },
  45. sceneName: {
  46. type: String,
  47. required: true
  48. },
  49. loadingMessage: {
  50. type: String,
  51. required: false,
  52. default: null
  53. },
  54. loadingErrorMessage: {
  55. type: String,
  56. required: false,
  57. default: null
  58. }
  59. }
  60. }
  61. </script>