123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219 |
- <template>
- <v-layout justify-center align-center>
- <v-flex xs12 sm8>
- <v-card>
- <v-container fluid fill-height>
- <v-layout column align-center>
- <v-card-title class="headline d-block text-md-center font-weight-bold">Link generator</v-card-title>
- <v-card-text>
- <v-form>
- <h2>*Host configuration</h2>
- <h4>Web application configuration</h4>
- <v-text-field
- v-model="form.webAppUrl"
- label="*Web application link"
- />
- <h4>Server configuration</h4>
- <v-flex xs3>
- <v-select
- v-model="form.server.ssl"
- :items="[false, true]"
- label="*SSL"
- />
- </v-flex>
- <v-text-field
- v-model="form.server.host"
- label="*Host IP address or hostname"
- />
- <v-text-field
- v-model="form.server.port"
- label="*Port"
- type="number"
- />
- <h2>User ID and experiment ID</h2>
- <v-layout row wrap>
- <v-flex xs5>
- <v-checkbox
- v-model="form.userId.activated"
- color="primary"
- label="User ID"
- />
- </v-flex>
- <v-spacer />
- <v-flex xs6>
- <v-text-field
- v-model="form.userId.value"
- label="User ID"
- type="text"
- :disabled="!form.userId.activated"
- />
- </v-flex>
- </v-layout>
- <v-layout row wrap>
- <v-flex xs5>
- <v-checkbox
- v-model="form.experimentId.activated"
- color="primary"
- label="Experiment ID"
- />
- </v-flex>
- <v-spacer />
- <v-flex xs6>
- <v-text-field
- v-model="form.experimentId.value"
- label="Experiment ID"
- type="text"
- :disabled="!form.experimentId.activated"
- />
- </v-flex>
- </v-layout>
- <h2>Experiment name and scene name</h2>
- <v-layout row wrap>
- <v-flex xs5>
- <v-checkbox
- v-model="form.experimentName.activated"
- color="primary"
- label="Experiment name"
- />
- </v-flex>
- <v-spacer />
- <v-flex xs6>
- <v-text-field
- v-model="form.experimentName.value"
- label="Experiment name"
- type="text"
- :disabled="!form.experimentName.activated"
- />
- </v-flex>
- </v-layout>
- <v-layout row wrap>
- <v-flex xs5>
- <v-checkbox
- v-model="form.sceneName.activated"
- color="primary"
- label="Scene name"
- />
- </v-flex>
- <v-spacer />
- <v-flex xs6>
- <v-text-field
- v-model="form.sceneName.value"
- label="Scene name"
- type="text"
- :disabled="!form.sceneName.activated"
- />
- </v-flex>
- </v-layout>
- <v-btn color="primary" @click="generateLink">Generate link</v-btn>
- <div v-if="linkOutput && dataOutput">
- <h2 class="mt-5">Result</h2>
- <v-textarea
- :value="linkOutput"
- label="Your generated link"
- type="text"
- disabled
- />
- Data in the generated link:
- <pre>{{ dataOutput }}</pre>
- </div>
- <v-slide-y-transition mode="out-in">
- <v-alert v-if="alertMessage" :value="true" type="info" v-text="alertMessage" />
- </v-slide-y-transition>
- </v-form>
- </v-card-text>
- </v-layout>
- </v-container>
- </v-card>
- </v-flex>
- </v-layout>
- </template>
- <script>
- export default {
- name: 'LinkGenerator',
- components: {
- },
- data() {
- return {
- form: {
- webAppUrl: 'http://diran.univ-littoral.fr',
- server: {
- ssl: false,
- host: 'diran.univ-littoral.fr',
- port: '80'
- },
- userId: {
- activated: false,
- value: ''
- },
- experimentId: {
- activated: false,
- value: ''
- },
- experimentName: {
- activated: false,
- value: ''
- },
- sceneName: {
- activated: false,
- value: ''
- }
- },
- linkOutput: null,
- dataOutput: null,
- alertMessage: null
- }
- },
- methods: {
- generateLink() {
- this.alertMessage = null
- // Check host configuration is set
- if (this.form.webAppUrl === '' || this.form.server.host === '' || this.form.server.port === '') {
- this.alertMessage = 'The host configuration is required.'
- this.linkOutput = null
- this.dataOutput = null
- return
- }
- // Generate the link
- const obj = {
- hostConfig: {
- ssl: this.form.server.ssl,
- host: this.form.server.host,
- port: this.form.server.port
- }
- }
- if (this.form.userId.activated && this.form.userId.value !== '')obj.userId = this.form.userId.value
- if (this.form.experimentId.activated && this.form.experimentId.value !== '')obj.experimentId = this.form.experimentId.value
- if (this.form.experimentName.activated && this.form.experimentName.value !== '')obj.experimentName = this.form.experimentName.value
- if (this.form.sceneName.activated && this.form.sceneName.value !== '')obj.sceneName = this.form.sceneName.value
- // eslint-disable-next-line no-div-regex
- const q = btoa(JSON.stringify(obj)).replace(/=/g, '')
- this.linkOutput = `${this.form.webAppUrl}/#/?q=${q}`
- this.dataOutput = JSON.stringify(obj, null, 2)
- }
- }
- }
- </script>
|