WIP Home: parcours aleatoires page accueil

src/components/HomeComponent.vue

@@ -23,7 +23,7 @@
                       <span class="dash">
                         <span class="inner-dash"></span>
                       </span>
-                      {{ parcours.versions[0].title }}
+                      {{ versionLanguage(parcours.versions).title }}
                       <sup>{{ index + 1 | romanize }}</sup>
                     </router-link>
                   </li>
@@ -57,7 +57,8 @@ export default {
   data () {
     return {
       data: '/static/img/home/meleagre-in-love.png',
-      selectedParcours: []
+      selectedParcours: [],
+      parcoursAll: []
     }
   },
   created: function () {
@@ -68,31 +69,55 @@ export default {
       self.loader()
       self.hide()
       self.getCurrentThemeImg()
-      self.getParcoursData()
+      self.getSelectedParcours()
     })
   },
   methods: {
-    getParcoursData () {
+    versionLanguage: function (versions, options) {
+      return global.versionLanguage(versions, options)
+    },
+    getSelectedParcours () {
       var self = this
 
-      self.$http.get(global.api + 'keywords?category=' + global.parcoursKeywordId).then(function (response) {
-        var parcoursData = JSON.parse(response.bodyText)
-        var selectedParcours = []
-        var selectedParcoursIds = [
-          432, // Bestiaire
-          433, // Banquet
-          435 // Regrets de la vie passée
-        ]
-
-        // Only keep selected parcours
-        parcoursData.forEach(function (parcours) {
-          // If ID is within the selected parcours
-          if (selectedParcoursIds.indexOf(parcours.id_keyword) !== -1) {
-            selectedParcours.push(parcours)
+      // not really necessary, but just in case…
+      // if parcours data is not set, go get it, then come back :)
+      if (!self.parcoursAll || !self.parcoursAll.length) {
+        self.getParcoursData().then(function () {
+          self.getSelectedParcours()
+        })
+        return
+      }
+
+      // draw 7 random parcours
+      let maxToDisplay = 8
+      for (var i = 0; i < maxToDisplay; i++) {
+        let totalParcoursLen = self.parcoursAll.length
+        let random = Math.floor(Math.random() * totalParcoursLen)
+        console.log('all parcours', totalParcoursLen)
+
+        console.log('a random parcours', '(' + random + ')', self.parcoursAll[random])
+
+        self.selectedParcours.push(self.parcoursAll[random])
+
+        // remove that selected parcours to not draw it again
+        self.parcoursAll.splice(random, 1)
+      }
+    },
+    getParcoursData: function () {
+      var self = this
+      // return promise object
+      return self.$http.get(global.api + 'keywords?category=' + global.parcoursKeywordId).then(function (response) {
+        var parcoursAllData = JSON.parse(response.bodyText)
+
+        parcoursAllData.forEach(function (parcours, i) {
+          // if there is no title set for the parcours, not sexy for the homepage
+          // exclude it from the collection
+          if (!parcours.versions || !parcours.versions.length) {
+            parcoursAllData.splice(i, 1)
           }
         })
 
-        self.$set(self, 'selectedParcours', selectedParcours)
+        self.$set(this, 'parcoursAll', parcoursAllData)
       }, function (err) {
         console.error('Error retrieving parcours', err)
       })

src/components/partials/epigram/Translation.vue

@@ -19,6 +19,7 @@
       </h2>
       <div class="text-lang">
         <select v-model="selectedLanguage">
+          <option disabled value="">Langue…</option>
           <option
             v-for="language in availableVersions"
             v-bind:value="language"
@@ -83,7 +84,7 @@ export default {
     self.languages = global.languages
 
     // Set the language
-    self.setCustomLanguage(self.parseVersion(self.epigram.versions).id_language)
+//    self.setCustomLanguage(self.parseVersion(self.epigram.versions).id_language)
   },
   methods: {
     versionLanguage (versions, options) {
@@ -180,26 +181,22 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
       display: inline-block
 
   .text-title
-    position: relative
 
     h2
       font-size: 12px
 
     .text-lang
       background: url('/static/img/select-arrow.png') no-repeat left
-      width: 50px
+      width: 155px
+      padding-left: 10px
       overflow: hidden
-      position: absolute
-      top: 0
-      right: 0
-      margin-top: -5px
+      margin-left: auto
 
       select
         font-size: 10px
         text-transform: uppercase
         border: none
         color: #2c2c2c
-        width: 3.5em
         background: transparent
         outline: none