From 913ef8a973551fa7e00daa607c523dbb495c0dd2 Mon Sep 17 00:00:00 2001 From: Louis-Olivier Brassard <louis@loupbrun.ca> Date: Sat, 10 Aug 2019 15:56:56 -0400 Subject: [PATCH] WIP Home: parcours aleatoires page accueil --- src/components/HomeComponent.vue | 63 +++++++++++++------ .../partials/epigram/Translation.vue | 13 ++-- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/src/components/HomeComponent.vue b/src/components/HomeComponent.vue index 663c5b2..0344982 100644 --- a/src/components/HomeComponent.vue +++ b/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) }) diff --git a/src/components/partials/epigram/Translation.vue b/src/components/partials/epigram/Translation.vue index 8e0bcd8..01145d3 100644 --- a/src/components/partials/epigram/Translation.vue +++ b/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 -- GitLab