HostConfig.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <v-layout justify-center align-center>
  3. <v-flex xs12 sm5>
  4. <v-card>
  5. <v-container fluid fill-height>
  6. <v-layout column align-center>
  7. <v-card-title class="headline d-block text-md-center font-weight-bold">Host configuration</v-card-title>
  8. <v-card-text>
  9. <v-slide-y-transition mode="out-in">
  10. <loader v-if="loadingMessage" :message="loadingMessage" />
  11. <v-form v-else ref="form">
  12. <v-text-field
  13. v-model="hostConfig"
  14. label="Host link"
  15. :rules="[v => !!v || 'Host is required']"
  16. required
  17. />
  18. <v-layout row wrap>
  19. <v-flex xs5>
  20. <v-checkbox
  21. v-model="id.hasUserId"
  22. color="primary"
  23. :label="`I have an user ID`"
  24. />
  25. </v-flex>
  26. <v-spacer />
  27. <v-flex xs6>
  28. <v-text-field
  29. v-model="id.user"
  30. label="User ID"
  31. type="text"
  32. :disabled="!id.hasUserId"
  33. />
  34. </v-flex>
  35. </v-layout>
  36. <v-layout row wrap>
  37. <v-flex xs5>
  38. <v-checkbox
  39. v-model="id.hasExperimentId"
  40. color="primary"
  41. :label="`I have an experiment ID`"
  42. />
  43. </v-flex>
  44. <v-spacer />
  45. <v-flex xs6>
  46. <v-text-field
  47. v-model="id.experiment"
  48. label="Experiment ID"
  49. type="text"
  50. :disabled="!id.hasExperimentId"
  51. />
  52. </v-flex>
  53. </v-layout>
  54. <v-btn color="error" @click="reset">Reset Form</v-btn>
  55. <v-btn color="success" @click="validate">Submit</v-btn>
  56. <v-slide-y-transition mode="out-in">
  57. <v-alert v-if="configErrorMessage" :value="true" type="error" v-text="configErrorMessage" />
  58. </v-slide-y-transition>
  59. </v-form>
  60. </v-slide-y-transition>
  61. </v-card-text>
  62. </v-layout>
  63. </v-container>
  64. </v-card>
  65. </v-flex>
  66. </v-layout>
  67. </template>
  68. <script>
  69. import Loader from '@/components/Loader.vue'
  70. import { mapActions } from 'vuex'
  71. export default {
  72. name: 'HostConfig',
  73. components: {
  74. Loader
  75. },
  76. data() {
  77. return {
  78. hostConfig: null,
  79. id: {
  80. user: null,
  81. hasUserId: false,
  82. experiment: null,
  83. hasExperimentId: false
  84. },
  85. loadingMessage: null,
  86. configErrorMessage: null
  87. }
  88. },
  89. mounted() {
  90. // if (process.env.NODE_ENV === 'development')
  91. // this.hostConfig = 'http://localhost:5000'
  92. this.reset()
  93. },
  94. methods: {
  95. ...mapActions(['setHostConfig', 'setUserExperimentId']),
  96. reset() {
  97. this.hostConfig = 'https://diran.univ-littoral.fr'
  98. this.id.user = null
  99. this.id.hasUserId = false
  100. this.id.experiment = null
  101. this.id.hasExperimentId = false
  102. this.configErrorMessage = null
  103. },
  104. async validate() {
  105. if (!this.$refs.form.validate()) return
  106. this.loadingMessage = 'Checking host configuration...'
  107. this.configErrorMessage = null
  108. try {
  109. await this.setHostConfig(this.hostConfig)
  110. this.setUserExperimentId({ userId: this.id.user, experimentId: this.id.experiment })
  111. }
  112. catch (err) {
  113. console.error(err)
  114. this.configErrorMessage = err.message
  115. return
  116. }
  117. finally {
  118. this.loadingMessage = null
  119. }
  120. // Success while configuring the project's host
  121. }
  122. }
  123. }
  124. </script>