Merge branch 'release/v0.3.0'

DOCUMENTATION/00-home.md

@@ -1,4 +1,4 @@
-# Antoine_Internship
+# SIN3D
 
 ## Summary
 

README.md

@@ -1,12 +1,20 @@
-# Antoine_Internship
+# SIN3D
+> Synthesis Image Noise Detection on Distributed Data (SIN3D)
+
 A web app to collect data on noise detection by humans on images.
 
 ## Download project
 ```sh
-git clone https://gogs.univ-littoral.fr/Prise3D/Antoine_Internship.git
-cd Antoine_Internship
+git clone https://gogs.univ-littoral.fr/Prise3D/SIN3D.git
+cd SIN3D
 ```
 
+## Developer documentation
+See [`/DOCUMENTATION`](./DOCUMENTATION).
+
+## Data extraction
+You can use the [SIN3D-data-extract](https://gogs.univ-littoral.fr/Prise3D/SIN3D-data-extract) library to easily extract data from this application database.
+
 ## Run as a Docker instance
 ### Configure application
 Use the following environment variables to configure the application.
@@ -16,7 +24,7 @@ Use the following environment variables to configure the application.
 | `PORT` | `5000` | The port used by the started application |  ✅  | ✅ |
 | `SERVE_CLIENT` | `true` | Should the server serve client (Fully local application) |  ✅  | ⬜️ |
 | `IMAGES_PATH` | `./images` | The directory where the images are stored (absolute path if changed ⚠️) |  ✅  | ⬜️ |
-| `MONGO_URI` | `mongodb://localhost/webexpe` | MongoDB database connection URI |  ✅  | ⬜️ |
+| `MONGO_URI` | `mongodb://localhost/sin3d` | MongoDB database connection URI |  ✅  | ⬜️ |
 
 Configure more deeply the way the app works by modifying *[config.js](config.js)*.
 
@@ -25,7 +33,7 @@ Configure more deeply the way the app works by modifying *[config.js](config.js)
 | `apiPrefix` | `/api` | The url prefix for the API |
 | `imageServedUrl` | `/api/images` | The url prefix from where the images are served |
 | `serverPort` | `5000` | The port used by the server |
-| `mongoDatabaseURI` | `mongodb://localhost/webexpe` | MongoDB database connection URI |
+| `mongoDatabaseURI` | `mongodb://localhost/sin3d` | MongoDB database connection URI |
 | `imagesPath` | `./images` | The directory where the images are stored |
 | `serveClient` | `true` | Should the server serve client files from the `/dist` directory |
 | `fileNameConvention` | `/^(.*)?_([0-9]{2,})\.(.*)$/` | File name convention for images |
@@ -35,16 +43,6 @@ Configure more deeply the way the app works by modifying *[config.js](config.js)
 | `logger` | Logs : `logs/server.combined.log` Errors : `logs/server.error.log` | Default application logger |
 | `dbLogger` | Logs : `logs/db.log` Errors : `logs/db.error.log` | Database logger configuration |
 
-### Configure experiments
-If you want to use the default experiments configurations, you can skip this part, the Dockerfile does it for you.
-
-You can modify the configuration for each mixins, experiments or scene. To do so, you first need to initialize experiment configurations first.
-```sh
-cp -r experimentConfig.default experimentConfig
-```
-You can modify the configuration for each mixins, experiments or scene by modifying files in the newly created *`./experimentConfig`* directory.
-You configuration will be copied in the Docker instance.
-
 ### Run server + client
 Linux
 ```sh
@@ -165,7 +163,7 @@ The `docker-compose` script will automatically run tests. Use the following comm
 yarn test
 ```
 
-## Documentation
+## API Documentation
 The `docker-compose` script will automatically build the API documentation. Use the following command to build it by hand.
 ```sh
 yarn doc

config.js

@@ -16,7 +16,7 @@ export const imageServedUrl = apiPrefix + '/images'
 export const serverPort = parseInt(process.env.PORT, 10) || 5000
 
 // MongoDB database connection URI
-export const mongoDatabaseURI = process.env.MONGO_URI || 'mongodb://localhost:27017/webexpe'
+export const mongoDatabaseURI = process.env.MONGO_URI || 'mongodb://localhost:27017/sin3d'
 
 // The directory where the images are stored
 export const imagesPath = TEST_MODE

docker-compose.yml

@@ -26,7 +26,7 @@ services:
             NODE_ENV: "production"
             SERVE_CLIENT: "${SERVE_CLIENT:-true}"
             PORT: "5000"
-            MONGO_URI: "${MONGO_URI:-mongodb://mongo:27017/webexpe}"
+            MONGO_URI: "${MONGO_URI:-mongodb://mongo:27017/sin3d}"
         links:
             - mongo
         volumes:

package.json

@@ -1,7 +1,34 @@
 {
-  "name": "expe-web",
-  "version": "0.2.8",
+  "name": "sin3d",
+  "description": "Synthesis Image Noise Detection on Distributed Data",
+  "version": "0.3.0",
   "private": true,
+  "keywords": [
+    "noise",
+    "detection",
+    "synthesis image",
+    "distributed",
+    "data",
+    "web",
+    "experiment"
+  ],
+  "directories": {
+    "doc": "./DOCUMENTATION"
+  },
+  "homepage": "https://gogs.univ-littoral.fr/Prise3D/SIN3D",
+  "author": "Antoine Sauvage <contact@asauvage.fr> (https://asauvage.fr/)",
+  "contributors": [
+    "Jérôme Buisine <contact@jeromebuisine.fr> (https://jeromebuisine.fr/)",
+    "Samuel Delepoulle <delepoulle@lisic.univ-littoral.fr>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://gogs.univ-littoral.fr/Prise3D/SIN3D.git"
+  },
+  "bugs": {
+    "url": "https://gogs.univ-littoral.fr/Prise3D/SIN3D/issues"
+  },
+  "license": "MIT",
   "scripts": {
     "server:start": "node -r esm index.js",
     "server:start:no-delete-extracts": "node -r esm index.js --no-delete",
@@ -59,6 +86,9 @@
       "autoprefixer": {}
     }
   },
+  "engines": {
+    "node": ">= 8.30.0"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

src/App.vue

@@ -48,7 +48,7 @@
       <!-- Top bar -->
       <v-toolbar app fixed clipped-left>
         <v-toolbar-side-icon @click.stop="drawer = !drawer" />
-        <v-toolbar-title>Web experiment</v-toolbar-title>
+        <v-toolbar-title>SIN3D</v-toolbar-title>
       </v-toolbar>
       <!--/ Top bar -->
     </div>

src/functions.js

@@ -23,8 +23,6 @@ export const API_ROUTES = {
 
 export const delay = ms => new Promise(res => setTimeout(res, ms))
 
-export const buildURI = (ssl, host, port, route = '') => `${ssl ? 'https' : 'http'}://${host}:${port}${route}`
-
 export const sortIntArray = intArray => intArray ? intArray.sort((a, b) => a - b) : null
 
 export const findNearestUpper = (value, arrInt) => {

src/store/actions.js

@@ -1,5 +1,5 @@
 import router from '../router'
-import { API_ROUTES, buildURI, serialize } from '../functions'
+import { API_ROUTES, serialize } from '../functions'
 
 export default {
   setGdprValidated({ state, commit }) {
@@ -21,13 +21,13 @@ export default {
     commit('resetApp', { gdprConsent, hostConfig, progression })
   },
 
-  async setHostConfig({ commit, dispatch }, { ssl, host, port }) {
+  async setHostConfig({ commit, dispatch }, hostConfig) {
     // Timeout after 1s
     const controller = new AbortController()
     const signal = controller.signal
     setTimeout(() => controller.abort(), 1500)
 
-    const URI = buildURI(ssl, host, port, API_ROUTES.ping)
+    const URI = `${hostConfig}${API_ROUTES.ping}`
     return fetch(URI, { signal })
       .then(async res => {
         if (res.status !== 200) throw new Error(`Received wrong HTTP status code : ${res.status} (Need 200).`)
@@ -36,7 +36,7 @@ export default {
         if (content !== 'pong') throw new Error('Received wrong web content (Need to receive "pong").')
 
         // Configuration is valid
-        commit('setHostConfig', { ssl, host, port })
+        commit('setHostConfig', hostConfig)
         router.push('/experiments')
         dispatch('collectUserData')
       })

src/store/getters.js

@@ -1,5 +1,3 @@
-import { buildURI } from '../functions'
-
 export default {
   isGdprValidated(state) {
     if (!state) return
@@ -7,12 +5,12 @@ export default {
   },
   isHostConfigured(state) {
     if (!state) return
-    return !!(state.hostConfig.ssl !== null && state.hostConfig.host && state.hostConfig.port)
+    return state.hostConfig !== null
   },
   getHostURI(state, getters) {
     if (!state) return
     if (getters.isHostConfigured)
-      return buildURI(state.hostConfig.ssl, state.hostConfig.host, state.hostConfig.port)
+      return state.hostConfig
   },
 
   areScenesLoaded(state) {

src/store/index.js

@@ -10,7 +10,7 @@ Vue.use(Vuex)
 
 const vuexLocal = new VuexPersistence({
   storage: window.localStorage,
-  key: 'webexpe-state',
+  key: 'sin3d-state',
   reducer: state => ({
     customLinkData: state.customLinkData,
     uuid: state.uuid,

src/store/mutations.js

@@ -50,11 +50,7 @@ export default {
       return
     }
 
-    if (hostConfig) {
-      state.hostConfig = defaultStateObj.hostConfig
-      state.userId = defaultStateObj.userId
-      state.experimentId = defaultStateObj.experimentId
-    }
+    if (hostConfig) state.hostConfig = defaultStateObj.hostConfig
     if (progression) {
       // Reset progression and recreate the progression object
       state.progression = defaultStateObj.progression

src/store/state.js

@@ -4,11 +4,7 @@ export default () => JSON.parse(JSON.stringify({
   userId: null,
   experimentId: null,
   gdprConsent: false,
-  hostConfig: {
-    ssl: null,
-    host: null,
-    port: null
-  },
+  hostConfig: null,
   scenesList: null,
   progression: {},
   customLinkData: null

src/views/HostConfig.vue

@@ -10,29 +10,13 @@
               <v-slide-y-transition mode="out-in">
                 <loader v-if="loadingMessage" :message="loadingMessage" />
                 <v-form v-else ref="form">
-                  <v-flex xs3>
-                    <v-select
-                      v-model="config.ssl"
-                      :items="[false, true]"
-                      label="SSL"
-                    />
-                  </v-flex>
-
                   <v-text-field
-                    v-model="config.host"
-                    label="Host IP address or hostname"
+                    v-model="hostConfig"
+                    label="Host link"
                     :rules="[v => !!v || 'Host is required']"
                     required
                   />
 
-                  <v-text-field
-                    v-model="config.port"
-                    label="Port"
-                    type="number"
-                    :rules="[v => !!v || 'Port is required']"
-                    required
-                  />
-
                   <v-layout row wrap>
                     <v-flex xs5>
                       <v-checkbox
@@ -98,11 +82,7 @@ export default {
   },
   data() {
     return {
-      config: {
-        ssl: true,
-        host: 'diran.univ-littoral.fr',
-        port: '443'
-      },
+      hostConfig: null,
 
       id: {
         user: null,
@@ -116,27 +96,17 @@ export default {
     }
   },
 
-  watch: {
-    'config.ssl'(newValue) {
-      if (newValue === true) this.config.port = 443
-    }
-  },
-
   mounted() {
     // if (process.env.NODE_ENV === 'development')
-    //   this.config = {
-    //     ssl: false,
-    //     host: 'localhost',
-    //     port: '5000'
-    //   }
+    //   this.hostConfig = 'http://localhost:5000'
+
+    this.reset()
   },
 
   methods: {
     ...mapActions(['setHostConfig', 'setUserExperimentId']),
     reset() {
-      this.config.ssl = true
-      this.config.host = 'diran.univ-littoral.fr'
-      this.config.port = 443
+      this.hostConfig = 'https://diran.univ-littoral.fr'
       this.id.user = null
       this.id.hasUserId = false
       this.id.experiment = null
@@ -144,13 +114,14 @@ export default {
       this.configErrorMessage = null
       this.$refs.form.reset()
     },
+
     async validate() {
       if (!this.$refs.form.validate()) return
 
       this.loadingMessage = 'Checking host configuration...'
       this.configErrorMessage = null
       try {
-        await this.setHostConfig(this.config)
+        await this.setHostConfig(this.hostConfig)
         this.setUserExperimentId({ userId: this.id.user, experimentId: this.id.experiment })
       }
       catch (err) {

src/views/LinkGenerator.vue

@@ -9,33 +9,15 @@
             <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-model="form.hostConfig"
+                  label="*Server link"
                 />
 
-                <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 xs4>
@@ -159,11 +141,7 @@ export default {
     return {
       form: {
         webAppUrl: 'https://diran.univ-littoral.fr',
-        server: {
-          ssl: true,
-          host: 'diran.univ-littoral.fr',
-          port: '80'
-        },
+        hostConfig: 'https://diran.univ-littoral.fr',
 
         userId: {
           activated: false,
@@ -223,7 +201,7 @@ export default {
       this.alertMessage = null
 
       // Check host configuration is set
-      if (this.form.webAppUrl === '' || this.form.server.host === '' || this.form.server.port === '') {
+      if (this.form.webAppUrl === '' || this.form.hostConfig === '') {
         this.alertMessage = 'The host configuration is required.'
         this.linkOutput = null
         this.dataOutput = null
@@ -232,11 +210,7 @@ export default {
 
       // Generate the link
       const obj = {
-        hostConfig: {
-          ssl: this.form.server.ssl,
-          host: this.form.server.host,
-          port: this.form.server.port
-        }
+        hostConfig: this.form.hostConfig
       }
       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