|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<v-layout justify-center align-center>
|
|
|
<v-flex xs12 sm8>
|
|
|
+ <!-- Link encoder -->
|
|
|
<v-card>
|
|
|
<v-container fluid fill-height>
|
|
|
<v-layout column align-center>
|
|
@@ -10,11 +11,11 @@
|
|
|
<v-form>
|
|
|
<h2>*Host configuration</h2>
|
|
|
<v-text-field
|
|
|
- v-model="form.webAppUrl"
|
|
|
+ v-model="encoder.webAppUrl"
|
|
|
label="*Web application link"
|
|
|
/>
|
|
|
<v-text-field
|
|
|
- v-model="form.hostConfig"
|
|
|
+ v-model="encoder.hostConfig"
|
|
|
label="*Server link"
|
|
|
/>
|
|
|
|
|
@@ -22,7 +23,7 @@
|
|
|
<v-layout row wrap>
|
|
|
<v-flex xs4>
|
|
|
<v-checkbox
|
|
|
- v-model="form.userId.activated"
|
|
|
+ v-model="encoder.userId.activated"
|
|
|
color="primary"
|
|
|
label="User ID"
|
|
|
/>
|
|
@@ -30,10 +31,10 @@
|
|
|
<v-spacer />
|
|
|
<v-flex xs8>
|
|
|
<v-text-field
|
|
|
- v-model="form.userId.value"
|
|
|
+ v-model="encoder.userId.value"
|
|
|
label="User ID"
|
|
|
type="text"
|
|
|
- :disabled="!form.userId.activated"
|
|
|
+ :disabled="!encoder.userId.activated"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
@@ -41,7 +42,7 @@
|
|
|
<v-layout row wrap>
|
|
|
<v-flex xs4>
|
|
|
<v-checkbox
|
|
|
- v-model="form.experimentId.activated"
|
|
|
+ v-model="encoder.experimentId.activated"
|
|
|
color="primary"
|
|
|
label="Experiment ID"
|
|
|
/>
|
|
@@ -49,10 +50,10 @@
|
|
|
<v-spacer />
|
|
|
<v-flex xs8>
|
|
|
<v-text-field
|
|
|
- v-model="form.experimentId.value"
|
|
|
+ v-model="encoder.experimentId.value"
|
|
|
label="Experiment ID"
|
|
|
type="text"
|
|
|
- :disabled="!form.experimentId.activated"
|
|
|
+ :disabled="!encoder.experimentId.activated"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
@@ -62,20 +63,20 @@
|
|
|
<v-layout row wrap>
|
|
|
<v-flex xs4>
|
|
|
<v-checkbox
|
|
|
- v-model="form.experimentName.activated"
|
|
|
+ v-model="encoder.experimentName.activated"
|
|
|
color="primary"
|
|
|
label="Experiment name"
|
|
|
- @click="form.sceneName.activated = false"
|
|
|
+ @click="encoder.sceneName.activated = false"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
<v-flex xs8>
|
|
|
<v-select
|
|
|
- v-model="form.experimentName.value"
|
|
|
- :items="experimentsSelectItems"
|
|
|
+ v-model="encoder.experimentName.value"
|
|
|
+ :items="encoder.experimentsSelectItems"
|
|
|
item-text="text"
|
|
|
item-value="value"
|
|
|
label="Experiment name"
|
|
|
- :disabled="!form.experimentName.activated"
|
|
|
+ :disabled="!encoder.experimentName.activated"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
@@ -83,48 +84,77 @@
|
|
|
<v-layout row wrap>
|
|
|
<v-flex xs4>
|
|
|
<v-checkbox
|
|
|
- v-model="form.sceneName.activated"
|
|
|
+ v-model="encoder.sceneName.activated"
|
|
|
color="primary"
|
|
|
label="Scene name"
|
|
|
- :disabled="!form.experimentName.activated || form.experimentName.value === ''"
|
|
|
+ :disabled="!encoder.experimentName.activated || encoder.experimentName.value === ''"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
<v-spacer />
|
|
|
<v-flex xs8>
|
|
|
<v-select
|
|
|
- v-model="form.sceneName.value"
|
|
|
- :items="scenesSelectItems"
|
|
|
+ v-model="encoder.sceneName.value"
|
|
|
+ :items="encoder.scenesSelectItems"
|
|
|
item-text="text"
|
|
|
item-value="value"
|
|
|
label="Scene name"
|
|
|
- :disabled="!form.sceneName.activated"
|
|
|
+ :disabled="!encoder.sceneName.activated"
|
|
|
/>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
|
|
|
|
<v-btn color="primary" @click="generateLink">Generate link</v-btn>
|
|
|
|
|
|
- <div v-if="linkOutput && dataOutput">
|
|
|
+ <div v-if="encoder.linkOutput && encoder.dataOutput">
|
|
|
<h2 class="mt-5">Result</h2>
|
|
|
<v-textarea
|
|
|
- :value="linkOutput"
|
|
|
+ :value="encoder.linkOutput"
|
|
|
label="Your generated link"
|
|
|
type="text"
|
|
|
readonly
|
|
|
/>
|
|
|
|
|
|
Data in the generated link:
|
|
|
- <pre>{{ dataOutput }}</pre>
|
|
|
+ <pre>{{ encoder.dataOutput }}</pre>
|
|
|
</div>
|
|
|
|
|
|
<v-slide-y-transition mode="out-in">
|
|
|
- <v-alert v-if="alertMessage" :value="true" type="info" v-text="alertMessage" />
|
|
|
+ <v-alert v-if="encoder.alertMessage" :value="true" type="info" v-text="encoder.alertMessage" />
|
|
|
</v-slide-y-transition>
|
|
|
</v-form>
|
|
|
</v-card-text>
|
|
|
</v-layout>
|
|
|
</v-container>
|
|
|
</v-card>
|
|
|
+ <!--/ Link encoder -->
|
|
|
+
|
|
|
+ <!-- Link decoder -->
|
|
|
+ <v-card class="mt-5">
|
|
|
+ <v-container fluid fill-height>
|
|
|
+ <v-layout column align-center>
|
|
|
+ <v-card-title class="headline d-block text-md-center font-weight-bold">Link decoder</v-card-title>
|
|
|
+
|
|
|
+ <v-card-text>
|
|
|
+ <v-form>
|
|
|
+ <v-text-field
|
|
|
+ v-model="decoder.link"
|
|
|
+ label="Link to decode"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div v-if="decoder.dataOutput">
|
|
|
+ Data in the provided link:
|
|
|
+ <pre>{{ decoder.dataOutput }}</pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-slide-y-transition mode="out-in">
|
|
|
+ <v-alert v-if="decoder.alertMessage" :value="true" type="info" v-text="decoder.alertMessage" />
|
|
|
+ </v-slide-y-transition>
|
|
|
+ </v-form>
|
|
|
+ </v-card-text>
|
|
|
+ </v-layout>
|
|
|
+ </v-container>
|
|
|
+ </v-card>
|
|
|
+ <!--/ Link decoder -->
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
|
</template>
|
|
@@ -139,7 +169,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {
|
|
|
+ encoder: {
|
|
|
webAppUrl: 'https://diran.univ-littoral.fr',
|
|
|
hostConfig: 'https://diran.univ-littoral.fr',
|
|
|
|
|
@@ -161,36 +191,48 @@ export default {
|
|
|
sceneName: {
|
|
|
activated: false,
|
|
|
value: ''
|
|
|
- }
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- experimentsSelectItems: null,
|
|
|
- scenesSelectItems: null,
|
|
|
+ experimentsSelectItems: null,
|
|
|
+ scenesSelectItems: null,
|
|
|
+
|
|
|
+ linkOutput: null,
|
|
|
+ dataOutput: null,
|
|
|
+ alertMessage: null
|
|
|
+ },
|
|
|
|
|
|
- linkOutput: null,
|
|
|
- dataOutput: null,
|
|
|
- alertMessage: null
|
|
|
+ decoder: {
|
|
|
+ link: '',
|
|
|
+ dataOutput: null,
|
|
|
+ alertMessage: null
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
- 'form.experimentName.activated'(newValue) {
|
|
|
+ 'encoder.experimentName.activated'(newValue) {
|
|
|
// Reset available scenes if experiment changed
|
|
|
- if (!newValue) this.scenesSelectItems = null
|
|
|
+ if (!newValue) this.encoder.scenesSelectItems = null
|
|
|
},
|
|
|
- 'form.experimentName.value'(newValue) {
|
|
|
+ 'encoder.experimentName.value'(newValue) {
|
|
|
// Reset available scenes if experiment changed
|
|
|
- if (newValue !== '') this.scenesSelectItems = getExperimentSceneList(this.form.experimentName.value)
|
|
|
+ if (newValue !== '') this.encoder.scenesSelectItems = getExperimentSceneList(this.encoder.experimentName.value)
|
|
|
},
|
|
|
- 'form.sceneName.activated'(newValue) {
|
|
|
+ 'encoder.sceneName.activated'(newValue) {
|
|
|
// Load available scenes when sceneName is activated
|
|
|
- if (newValue) this.scenesSelectItems = getExperimentSceneList(this.form.experimentName.value)
|
|
|
- else this.scenesSelectItems = null
|
|
|
+ if (newValue) this.encoder.scenesSelectItems = getExperimentSceneList(this.encoder.experimentName.value)
|
|
|
+ else this.encoder.scenesSelectItems = null
|
|
|
+ },
|
|
|
+
|
|
|
+ 'decoder.link'(newValue) {
|
|
|
+ this.decoder.alertMessage = null
|
|
|
+ if (newValue) this.decode(newValue)
|
|
|
+ else this.decoder.dataOutput = null
|
|
|
}
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
- this.experimentsSelectItems = Experiments.map(expe => ({
|
|
|
+ this.encoder.experimentsSelectItems = Experiments.map(expe => ({
|
|
|
text: `${expe.name} - ${expe.meta.fullName}`,
|
|
|
value: expe.name
|
|
|
}))
|
|
@@ -201,26 +243,49 @@ export default {
|
|
|
this.alertMessage = null
|
|
|
|
|
|
// Check host configuration is set
|
|
|
- if (this.form.webAppUrl === '' || this.form.hostConfig === '') {
|
|
|
- this.alertMessage = 'The host configuration is required.'
|
|
|
- this.linkOutput = null
|
|
|
- this.dataOutput = null
|
|
|
+ if (this.encoder.webAppUrl === '' || this.encoder.hostConfig === '') {
|
|
|
+ this.encoder.alertMessage = 'The host configuration is required.'
|
|
|
+ this.encoder.linkOutput = null
|
|
|
+ this.encoder.dataOutput = null
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// Generate the link
|
|
|
- const obj = {
|
|
|
- hostConfig: this.form.hostConfig
|
|
|
+ let obj = {
|
|
|
+ hostConfig: this.encoder.hostConfig
|
|
|
+ }
|
|
|
+ if (this.encoder.userId.activated && this.encoder.userId.value !== '') obj.userId = this.encoder.userId.value
|
|
|
+ if (this.encoder.experimentId.activated && this.encoder.experimentId.value !== '') obj.experimentId = this.encoder.experimentId.value
|
|
|
+ if (this.encoder.experimentName.activated && this.encoder.experimentName.value !== '') obj.experimentName = this.encoder.experimentName.value
|
|
|
+ if (this.encoder.sceneName.activated && this.encoder.sceneName.value !== '') obj.sceneName = this.encoder.sceneName.value
|
|
|
+
|
|
|
+ const q = btoa(JSON.stringify(obj)).replace(/[=]/g, '')
|
|
|
+ this.encoder.linkOutput = `${this.encoder.webAppUrl}/#/?q=${q}`
|
|
|
+ this.encoder.dataOutput = JSON.stringify(obj, null, 2)
|
|
|
+ },
|
|
|
+
|
|
|
+ decode(link) {
|
|
|
+ try {
|
|
|
+ const matched = link.match(/\?q=(.*)/)
|
|
|
+ if (!matched || matched.length !== 2) throw new Error('The provided link is invalid.')
|
|
|
+ let q = matched[1]
|
|
|
+ try {
|
|
|
+ q = atob(q)
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ throw new Error('"q" is not a base64-encoded string.')
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ q = JSON.parse(q)
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ throw new Error(`"q" encoded data is not JSON valid. Decoded base64 data: ${q}`)
|
|
|
+ }
|
|
|
+ this.decoder.dataOutput = JSON.stringify(q, null, 2)
|
|
|
+ }
|
|
|
+ catch (err) {
|
|
|
+ this.decoder.alertMessage = err.message
|
|
|
}
|
|
|
- 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)
|
|
|
}
|
|
|
}
|
|
|
}
|