Clean expe table script. Rename experience to experiment. refresh listscene navigation

src/App.vue

@@ -7,13 +7,14 @@
     <!--/ Application cache reset button -->
 
     <v-slide-y-transition mode="out-in">
+      <!-- Loading screen -->
+      <loader v-if="loadingMessage" :message="loadingMessage" />
+      <!--/ Loading screen -->
+
       <!-- Host connection configuration -->
-      <host-config v-if="!isHostConfigured" />
+      <host-config v-else-if="!isHostConfigured" />
       <!--/ Host connection configuration -->
 
-      <!-- Loading screen -->
-      <loader v-else-if="loadingMessage" :message="loadingMessage" />
-      <!--/ Loading screen -->
 
       <div v-else>
         <!-- Sidebar menu -->
@@ -24,21 +25,21 @@
           app
         >
           <v-list dense>
-            <v-list-tile to="/" exact>
+            <v-list-tile to="/experimentsList" exact>
               <v-list-tile-action>
-                <v-icon>home</v-icon>
+                <v-icon>library_books</v-icon>
               </v-list-tile-action>
               <v-list-tile-content>
-                <v-list-tile-title>Home</v-list-tile-title>
+                <v-list-tile-title>List of experiments</v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
 
-            <v-list-tile to="/experiencesList" exact>
+            <v-list-tile @click="loadScenes">
               <v-list-tile-action>
-                <v-icon>photo_library</v-icon>
+                <v-icon>refresh</v-icon>
               </v-list-tile-action>
               <v-list-tile-content>
-                <v-list-tile-title>Experiences list</v-list-tile-title>
+                <v-list-tile-title>Refresh list of scenes</v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
           </v-list>
@@ -48,7 +49,7 @@
         <!-- Top bar -->
         <v-toolbar app fixed clipped-left>
           <v-toolbar-side-icon @click.stop="drawer = !drawer" />
-          <v-toolbar-title>Web experience</v-toolbar-title>
+          <v-toolbar-title>Web experiment</v-toolbar-title>
         </v-toolbar>
         <!--/ Top bar -->
 
@@ -88,6 +89,8 @@ export default {
       drawer: false,
 
       hostConfigured: false,
+
+      loadingErrorMessage: null,
       loadingMessage: null
     }
   },
@@ -106,17 +109,21 @@ export default {
     ...mapActions(['loadScenesList']),
     async loadAppData() {
       if (this.isHostConfigured && !this.areScenesLoaded) {
-        this.loadingMessage = 'Loading scenes list...'
-        try {
-          await this.loadScenesList()
-        }
-        catch (err) {
-          this.loadingErrorMessage = err.message
-          return
-        }
-        finally {
-          this.loadingMessage = null
-        }
+        await this.loadScenes()
+      }
+    },
+
+    async loadScenes() {
+      this.loadingMessage = 'Loading scenes list...'
+      try {
+        await this.loadScenesList()
+      }
+      catch (err) {
+        this.loadingErrorMessage = err.message
+        return
+      }
+      finally {
+        this.loadingMessage = null
       }
     }
   }

src/components/ResetAppButton.vue

@@ -74,7 +74,6 @@ export default {
       selectedItems: [],
       items: [
         { text: 'Host configuration', value: 'hostConfig' },
-        { text: 'Scenes list', value: 'scenesList' },
         { text: 'Progression', value: 'progression' }
       ]
     }

src/router/experiences.js

@@ -1,14 +0,0 @@
-export default [
-  {
-    path: '/experiences/noReference',
-    name: 'ExperienceNoReference',
-    fullName: 'No reference image',
-    component: () => import('@/views/Experiences/NoReference.vue')
-  },
-  {
-    path: '/experiences/withReference',
-    name: 'ExperienceWithReference',
-    fullName: 'With reference image',
-    component: () => import('@/views/Experiences/WithReference.vue')
-  }
-]

src/router/experiments.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    path: '/experiments/noReference',
+    name: 'ExperimentNoReference',
+    fullName: 'No reference image',
+    component: () => import('@/views/Experiments/NoReference.vue')
+  },
+  {
+    path: '/experiments/withReference',
+    name: 'ExperimentWithReference',
+    fullName: 'With reference image',
+    component: () => import('@/views/Experiments/WithReference.vue')
+  }
+]

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from '@/views/Home.vue'
-import Experiences from './experiences'
+import ExperimentsList from '@/views/ExperimentsList.vue'
+import Experiments from './experiments'
 
 Vue.use(Router)
 
@@ -9,14 +9,13 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Home',
-      component: Home
+      redirect: '/experimentsList'
     },
     {
-      path: '/experiencesList',
-      name: 'ExperiencesList',
-      component: () => import('@/views/ExperiencesList.vue')
+      path: '/experimentsList',
+      name: 'ExperimentsList',
+      component: ExperimentsList
     },
-    ...Experiences
+    ...Experiments
   ]
 })

src/store/actions.js

@@ -1,16 +1,8 @@
 import { API_ROUTES, buildURI } from '../functions'
 
 export default {
-  async increment({ commit }, amount = 1) {
-    commit('increment', amount)
-  },
-
-  async decrement({ commit }, amount = 1) {
-    commit('increment', -amount)
-  },
-
-  resetApp({ commit }, { hostConfig = false, scenesList = false, progression = false }) {
-    commit('resetApp', { hostConfig, scenesList, progression })
+  resetApp({ commit }, { hostConfig = false, progression = false }) {
+    commit('resetApp', { hostConfig, progression })
   },
 
   async setHostConfig({ commit }, { protocol, host, port }) {
@@ -44,10 +36,10 @@ export default {
     commit('setListScenes', scenes.data)
   },
 
-  setExperienceProgress({ commit }, { experienceName, sceneName, data }) {
-    commit('setExperienceProgress', { experienceName, sceneName, data })
+  setExperimentProgress({ commit }, { experimentName, sceneName, data }) {
+    commit('setExperimentProgress', { experimentName, sceneName, data })
   },
-  setExperienceDone({ commit }, { experienceName, sceneName, done = true }) {
-    commit('setExperienceDone', { experienceName, sceneName, done })
+  setExperimentDone({ commit }, { experimentName, sceneName, done = true }) {
+    commit('setExperimentDone', { experimentName, sceneName, done })
   }
 }

src/store/mutations.js

@@ -1,14 +1,16 @@
 import { defaultState } from '@/store/state'
-import Experiences from '@/router/experiences'
+import Experiments from '@/router/experiments'
 
-export default {
-  increment(state, amount = 1) {
-    state.count += amount
-  },
+const checkProgression = (state, experimentName, sceneName) => {
+  if (!state.progression[experimentName])
+    state.progression[experimentName] = {}
+  if (!state.progression[experimentName][sceneName])
+    state.progression[experimentName][sceneName] = { done: false, data: {} }
+}
 
-  resetApp(state, { hostConfig, scenesList, progression }) {
+export default {
+  resetApp(state, { hostConfig, progression }) {
     if (hostConfig) state.hostConfig = defaultState.hostConfig
-    if (scenesList) state.scenesList = defaultState.scenesList
     if (progression) state.progression = defaultState.progression
   },
 
@@ -22,7 +24,7 @@ export default {
       acc[x] = { done: false, data: {} }
       return acc
     }, {})
-    const progressionObj = Experiences.reduce((acc, x) => {
+    const progressionObj = Experiments.reduce((acc, x) => {
       acc[x.name] = scenesProgressObj
       return acc
     }, {})
@@ -30,19 +32,12 @@ export default {
     state.progression = progressionObj
   },
 
-  setExperienceProgress(state, { experienceName, sceneName, data }) {
-    if (!state.progression[experienceName])
-      state.progression[experienceName] = {}
-    if (!state.progression[experienceName][sceneName])
-      state.progression[experienceName][sceneName] = { done: false, data: {} }
-    state.progression[experienceName][sceneName].data = data
+  setExperimentProgress(state, { experimentName, sceneName, data }) {
+    checkProgression(state, experimentName, sceneName)
+    state.progression[experimentName][sceneName].data = data
   },
-  setExperienceDone(state, { experienceName, sceneName, done }) {
-    if (!state.progression[experienceName])
-      state.progression[experienceName] = {}
-    if (!state.progression[experienceName][sceneName])
-      state.progression[experienceName][sceneName] = { done: false, data: {} }
-
-    state.progression[experienceName][sceneName].done = done
+  setExperimentDone(state, { experimentName, sceneName, done }) {
+    checkProgression(state, experimentName, sceneName)
+    state.progression[experimentName][sceneName].done = done
   }
 }

src/store/state.js

@@ -5,8 +5,7 @@ export const defaultState = {
     port: null
   },
   scenesList: null,
-  progression: {},
-  count: 0
+  progression: {}
 }
 
 // Deep copy defaultState to not modify it with the store

src/views/Experiences/NoReference.vue

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ExperienceNoReference'
+  name: 'ExperimentNoReference'
 }
 </script>

src/views/Experiences/WithReference.vue

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ExperienceWithReference'
+  name: 'ExperimentWithReference'
 }
 </script>

src/views/ExperiencesList.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="{ 'bigger-table': $vuetify.breakpoint.lgAndUp }">
-    List of experiences
+    List of experiments
 
 
     <v-card>
       <v-card-title>
-        Choose an experience
+        Choose an experiment
         <v-spacer />
         <v-text-field
           v-model="search"
@@ -25,7 +25,7 @@
         <template v-slot:items="props">
           <td>{{ props.item.name }}</td>
           <td class="text-xs-center">{{ props.item.completion }}</td>
-          <td class="text-xs-center"><v-btn small dark :to="props.item.link">Start experience</v-btn></td>
+          <td class="text-xs-center"><v-btn small dark :to="props.item.link">Start experiment</v-btn></td>
         </template>
         <template v-slot:no-results>
           <v-alert :value="true" color="error" icon="warning">
@@ -39,16 +39,16 @@
 
 <script>
 import { mapState } from 'vuex'
-import Experiences from '@/router/experiences'
+import Experiments from '@/router/experiments'
 
 export default {
-  name: 'ExperiencesList',
+  name: 'ExperimentsList',
   data() {
     return {
       search: '',
       pagination: { rowsPerPage: 10 },
       headers: [
-        { text: 'Experience name', value: 'name' },
+        { text: 'Experiment name', value: 'name' },
         { text: 'Completion', value: 'completion', align: 'center' },
         { text: 'Start', value: 'name', sortable: false, align: 'center' }
       ],
@@ -59,14 +59,18 @@ export default {
     ...mapState(['scenesList', 'progression'])
   },
   mounted() {
-    this.items = Experiences.map(x => {
+    this.items = Experiments.map(expe => {
       const res = {
-        name: x.fullName,
-        link: x.path
+        name: expe.fullName,
+        link: expe.path
+      }
+      // Check cache has an entry for each scenes in this experiment
+      if (this.progression[expe.name] && Object.keys(this.progression[expe.name]).every(y => this.scenesList.includes(y))) {
+        // Set experiment completion percentage
+        const numberOfDoneScenes = Object.keys(this.progression[expe.name]).filter(y => this.progression[expe.name][y].done).length
+        const percentage = Math.round(numberOfDoneScenes / this.scenesList.length * 100)
+        res.completion = `${percentage}%`
       }
-      // Check cache has an entry for each scenes in this experience
-      if (this.progression[x.name] && Object.keys(this.progression[x.name]).every(y => this.scenesList.includes(this.progression[x.name][y])))
-        res.completion = `${Object.keys(this.progression[x.name]).filter(y => this.progression[x.name][y]).length / this.scenesList.length * 100}%`
       else res.completion = '0%'
 
       return res

src/views/Home.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    Home page
-    <div>
-      <v-btn @click="decrement()">Decrement</v-btn>
-      <v-btn @click="$store.commit('increment', -count)">Reset</v-btn>
-      <v-btn @click="increment()">Increment</v-btn>
-    </div>
-    <div>
-      {{ count }}
-    </div>
-    Count should stay in the same state if you reload the page/close your browser.
-  </div>
-</template>
-
-<script>
-import { mapActions, mapState } from 'vuex'
-
-export default {
-  name: 'Home',
-  components: {},
-  computed: {
-    ...mapState(['count'])
-  },
-  methods: {
-    ...mapActions(['increment', 'decrement'])
-  }
-}
-</script>