HostConfig.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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-flex xs3>
  13. <v-select
  14. v-model="config.ssl"
  15. :items="[false, true]"
  16. label="SSL"
  17. />
  18. </v-flex>
  19. <v-text-field
  20. v-model="config.host"
  21. label="Host IP address or hostname"
  22. :rules="[v => !!v || 'Host is required']"
  23. required
  24. />
  25. <v-text-field
  26. v-model="config.port"
  27. label="Port"
  28. type="number"
  29. :rules="[v => !!v || 'Port is required']"
  30. required
  31. />
  32. <v-layout row wrap>
  33. <v-flex xs5>
  34. <v-checkbox
  35. v-model="id.hasUserId"
  36. color="primary"
  37. :label="`I have an user ID`"
  38. />
  39. </v-flex>
  40. <v-spacer />
  41. <v-flex xs6>
  42. <v-text-field
  43. v-model="id.user"
  44. label="User ID"
  45. type="text"
  46. :disabled="!id.hasUserId"
  47. />
  48. </v-flex>
  49. </v-layout>
  50. <v-layout row wrap>
  51. <v-flex xs5>
  52. <v-checkbox
  53. v-model="id.hasExperimentId"
  54. color="primary"
  55. :label="`I have an experiment ID`"
  56. />
  57. </v-flex>
  58. <v-spacer />
  59. <v-flex xs6>
  60. <v-text-field
  61. v-model="id.experiment"
  62. label="Experiment ID"
  63. type="text"
  64. :disabled="!id.hasExperimentId"
  65. />
  66. </v-flex>
  67. </v-layout>
  68. <v-btn color="error" @click="reset">Reset Form</v-btn>
  69. <v-btn color="success" @click="validate">Submit</v-btn>
  70. <v-slide-y-transition mode="out-in">
  71. <v-alert v-if="configErrorMessage" :value="true" type="error" v-text="configErrorMessage" />
  72. </v-slide-y-transition>
  73. </v-form>
  74. </v-slide-y-transition>
  75. </v-card-text>
  76. </v-layout>
  77. </v-container>
  78. </v-card>
  79. </v-flex>
  80. </v-layout>
  81. </template>
  82. <script>
  83. import Loader from '@/components/Loader.vue'
  84. import { mapActions } from 'vuex'
  85. export default {
  86. name: 'HostConfig',
  87. components: {
  88. Loader
  89. },
  90. data() {
  91. return {
  92. config: {
  93. ssl: false,
  94. host: 'diran.univ-littoral.fr',
  95. port: '80'
  96. },
  97. id: {
  98. user: null,
  99. hasUserId: false,
  100. experiment: null,
  101. hasExperimentId: false
  102. },
  103. loadingMessage: null,
  104. configErrorMessage: null
  105. }
  106. },
  107. watch: {
  108. 'config.ssl'(newValue) {
  109. if (newValue === true) this.config.port = 443
  110. }
  111. },
  112. mounted() {
  113. // if (process.env.NODE_ENV === 'development')
  114. // this.config = {
  115. // ssl: false,
  116. // host: 'localhost',
  117. // port: '5000'
  118. // }
  119. },
  120. methods: {
  121. ...mapActions(['setHostConfig', 'setUserExperimentId']),
  122. reset() {
  123. this.config.ssl = true
  124. this.config.host = ''
  125. this.config.port = null
  126. this.id.user = null
  127. this.id.hasUserId = false
  128. this.id.experiment = null
  129. this.id.hasExperimentId = false
  130. this.configErrorMessage = null
  131. this.$refs.form.reset()
  132. },
  133. async validate() {
  134. if (!this.$refs.form.validate()) return
  135. this.loadingMessage = 'Checking host configuration...'
  136. this.configErrorMessage = null
  137. try {
  138. await this.setHostConfig(this.config)
  139. this.setUserExperimentId({ userId: this.id.user, experimentId: this.id.experiment })
  140. }
  141. catch (err) {
  142. console.error(err)
  143. this.configErrorMessage = err.message
  144. return
  145. }
  146. finally {
  147. this.loadingMessage = null
  148. }
  149. // Success while configuring the project's host
  150. }
  151. }
  152. }
  153. </script>