Added User ID and Experiment ID support

src/components/ResetAppButton.vue

@@ -2,7 +2,7 @@
   <div class="text-xs-center">
     <v-dialog
       v-model="showDialog"
-      width="600"
+      width="800"
       :fullscreen="$vuetify.breakpoint.smAndDown"
     >
       <template v-slot:activator="{ on }">
@@ -23,7 +23,7 @@
         <v-card-actions>
           <v-btn color="secondary" flat @click="showDialog = false">Cancel</v-btn>
           <v-spacer />
-          <v-flex xs6>
+          <v-flex xs8>
             <v-select
               v-model="selectedItems"
               :items="items"
@@ -74,7 +74,7 @@ export default {
       selectedItems: [],
       items: [
         { text: 'GDPR consent', value: 'gdprConsent' },
-        { text: 'Host configuration', value: 'hostConfig' },
+        { text: 'Host configuration and User/Experiment ID', value: 'hostConfig' },
         { text: 'Progression', value: 'progression' }
       ]
     }

src/store/actions.js

@@ -51,6 +51,10 @@ export default {
       })
   },
 
+  setUserExperimentId({ commit }, { userId, experimentId }) {
+    commit('setUserExperimentId', { userId, experimentId })
+  },
+
   async connectToWs({ state, getters }) {
     if (state.socket.isConnected) return /*eslint-disable-line */
     else if (getters.isHostConfigured) {
@@ -80,7 +84,13 @@ export default {
   },
 
   sendMessage({ state }, { msgId, msg = undefined }) {
-    Vue.prototype.$socket.send(JSON.stringify({ uuid: state.uuid, msgId, msg }))
+    Vue.prototype.$socket.send(JSON.stringify({
+      uuid: state.uuid,
+      userId: state.userId,
+      experimentId: state.experimentId,
+      msgId,
+      msg
+    }))
   },
 
   async loadScenesList({ getters: { isHostConfigured, getHostURI }, commit }) {

src/store/index.js

@@ -13,6 +13,8 @@ const vuexLocal = new VuexPersistence({
   key: 'webexpe-state',
   reducer: state => ({
     uuid: state.uuid,
+    userId: state.userId,
+    experimentId: state.experimentId,
     gdprConsent: state.gdprConsent,
     hostConfig: state.hostConfig,
     scenesList: state.scenesList,

src/store/mutations.js

@@ -36,6 +36,8 @@ export default {
     const defaultStateObj = defaultState()
     if (gdprConsent) {
       state.gdprConsent = false
+      delete state.userId
+      delete state.experimentId
       delete state.hostConfig
       delete state.progression
       delete state.scenesList
@@ -46,6 +48,8 @@ export default {
       if (state.socket.isConnected)
         this._vm.$disconnect()
       state.hostConfig = defaultStateObj.hostConfig
+      state.userId = defaultStateObj.userId
+      state.experimentId = defaultStateObj.experimentId
     }
     if (progression) {
       // Reset progression and recreate the progression object
@@ -58,6 +62,11 @@ export default {
     state.hostConfig = newConfig
   },
 
+  setUserExperimentId(state, { userId, experimentId }) {
+    state.userId = userId
+    state.experimentId = experimentId
+  },
+
   setListScenes(state, scenes) {
     state.scenesList = scenes
     createProgressionObj(state, scenes)

src/store/state.js

@@ -1,6 +1,8 @@
 // Deep copy to not mutate it with the store (default state is needed when reloading after a refresh)
 export default () => JSON.parse(JSON.stringify({
   uuid: null,
+  userId: null,
+  experimentId: null,
   gdprConsent: false,
   hostConfig: {
     ssl: null,

src/views/HostConfig.vue

@@ -33,9 +33,45 @@
                     required
                   />
 
+                  <v-layout row wrap>
+                    <v-flex xs5>
+                      <v-checkbox
+                        v-model="id.hasUserId"
+                        color="primary"
+                        :label="`I have an user ID`"
+                      />
+                    </v-flex>
+                    <v-spacer />
+                    <v-flex xs6>
+                      <v-text-field
+                        v-model="id.user"
+                        label="User ID"
+                        type="text"
+                        :disabled="!id.hasUserId"
+                      />
+                    </v-flex>
+                  </v-layout>
 
-                  <v-btn color="error" @click="reset">Reset Form</v-btn>
+                  <v-layout row wrap>
+                    <v-flex xs5>
+                      <v-checkbox
+                        v-model="id.hasExperimentId"
+                        color="primary"
+                        :label="`I have an experiment ID`"
+                      />
+                    </v-flex>
+                    <v-spacer />
+                    <v-flex xs6>
+                      <v-text-field
+                        v-model="id.experiment"
+                        label="Experiment ID"
+                        type="text"
+                        :disabled="!id.hasExperimentId"
+                      />
+                    </v-flex>
+                  </v-layout>
 
+                  <v-btn color="error" @click="reset">Reset Form</v-btn>
                   <v-btn color="success" @click="validate">Submit</v-btn>
 
                   <v-slide-y-transition mode="out-in">
@@ -68,6 +104,13 @@ export default {
         port: '80'
       },
 
+      id: {
+        user: null,
+        hasUserId: false,
+        experiment: null,
+        hasExperimentId: false
+      },
+
       loadingMessage: null,
       configErrorMessage: null
     }
@@ -89,11 +132,15 @@ export default {
   },
 
   methods: {
-    ...mapActions(['setHostConfig']),
+    ...mapActions(['setHostConfig', 'setUserExperimentId']),
     reset() {
       this.config.ssl = true
       this.config.host = ''
       this.config.port = null
+      this.id.user = null
+      this.id.hasUserId = false
+      this.id.experiment = null
+      this.id.hasExperimentId = false
       this.configErrorMessage = null
       this.$refs.form.reset()
     },
@@ -104,6 +151,7 @@ export default {
       this.configErrorMessage = null
       try {
         await this.setHostConfig(this.config)
+        this.setUserExperimentId({ userId: this.id.user, experimentId: this.id.experiment })
       }
       catch (err) {
         console.error(err)