From c1b8180fce0b20250d68f0dcd0b646561f2fcd06 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sun, 15 Apr 2018 22:39:10 +0200
Subject: [PATCH 1/2] i18n for playlist views

---
 front/src/views/playlists/Detail.vue | 24 ++++++++++++------------
 front/src/views/playlists/List.vue   | 21 +++++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 2769317e6..61968c2e7 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment" v-title="'Playlist'">
+    <div v-if="isLoading" class="ui vertical segment" v-title="$t('Playlist')">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
@@ -9,28 +9,28 @@
           <i class="circular inverted list yellow icon"></i>
           <div class="content">
             {{ playlist.name }}
-            <div class="sub header">
-              Playlist containing {{ playlistTracks.length }} tracks,
-              by <username :username="playlist.user.username"></username>
-            </div>
+            <i18next tag="div" class="sub header" path="Playlist containing {%0%} tracks, by {%1%}">
+              {{ playlistTracks.length }}
+              <username :username="playlist.user.username"></username>
+            </i18next>
           </div>
         </h2>
         <div class="ui hidden divider"></div>
         </button>
-        <play-button class="orange" :tracks="tracks">Play all</play-button>
+        <play-button class="orange" :tracks="tracks">{{ $t('Play all') }}</play-button>
         <button
           class="ui icon button"
           v-if="playlist.user.id === $store.state.auth.profile.id"
           @click="edit = !edit">
           <i class="pencil icon"></i>
-          <template v-if="edit">End edition</template>
-          <template v-else>Edit...</template>
+          <template v-if="edit">{{ $t('End edition') }}</template>
+          <template v-else>{{ $t('Edit...') }}</template>
         </button>
         <dangerous-button class="labeled icon" :action="deletePlaylist">
-          <i class="trash icon"></i> Delete
-          <p slot="modal-header">Do you want to delete the playlist "{{ playlist.name }}"?</p>
-          <p slot="modal-content">This will completely delete this playlist and cannot be undone.</p>
-          <p slot="modal-confirm">Delete playlist</p>
+          <i class="trash icon"></i> {{ $t('Delete') }}
+          <p slot="modal-header">{{ $t('Do you want to delete the playlist "{% playlist %}"?', {playlist: playlist.name}) }}</p>
+          <p slot="modal-content">{{ $t('This will completely delete this playlist and cannot be undone.') }}</p>
+          <p slot="modal-confirm">{{ $t('Delete playlist') }}</p>
         </dangerous-button>
       </div>
     </div>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 96aa36c47..32ee5aafa 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -1,21 +1,21 @@
 <template>
-  <div v-title="'Playlists'">
+  <div v-title="$t('Playlists')">
     <div class="ui vertical stripe segment">
-      <h2 class="ui header">Browsing playlists</h2>
+      <h2 class="ui header">{{ $t('Browsing playlists') }}</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <template v-if="$store.state.auth.authenticated">
           <button
             @click="$store.commit('playlists/chooseTrack', null)"
-            class="ui basic green button">Manage your playlists</button>
+            class="ui basic green button">{{ $t('Manage your playlists') }}</button>
           <div class="ui hidden divider"></div>
         </template>
         <div class="fields">
           <div class="field">
-            <label>Search</label>
-            <input type="text" v-model="query" placeholder="Enter an playlist name..."/>
+            <label>{{ $t('Search') }}</label>
+            <input type="text" v-model="query" :placeholder="$t('Enter an playlist name...')"/>
           </div>
           <div class="field">
-            <label>Ordering</label>
+            <label>{{ $t('Ordering') }}</label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ option[1] }}
@@ -23,14 +23,14 @@
             </select>
           </div>
           <div class="field">
-            <label>Ordering direction</label>
+            <label>{{ $t('Ordering direction') }}</label>
             <select class="ui dropdown" v-model="orderingDirection">
-              <option value="">Ascending</option>
-              <option value="-">Descending</option>
+              <option value="">{{ $t('Ascending') }}</option>
+              <option value="-">{{ $t('Descending') }}</option>
             </select>
           </div>
           <div class="field">
-            <label>Results per page</label>
+            <label>{{ $t('Results per page') }}</label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
@@ -76,6 +76,7 @@ export default {
     Pagination
   },
   data () {
+    console.log('YOLO', this.$t)
     let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
     return {
       isLoading: true,

From 0213ec6d02a2841df07015a14a771b2b94c124c3 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 18 Apr 2018 18:54:30 +0200
Subject: [PATCH 2/2] Removed console.log calls

---
 front/src/components/Sidebar.vue   | 1 -
 front/src/main.js                  | 2 +-
 front/src/views/playlists/List.vue | 1 -
 front/src/views/radios/Detail.vue  | 1 -
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 96047ab98..45487b6fb 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -159,7 +159,6 @@ export default {
       // for half the height of the containers display area
       var scrollBack = (container.scrollHeight - container.scrollTop <= container.clientHeight) ? 0 : container.clientHeight / 2
       container.scrollTop = container.scrollTop - scrollBack
-      console.log(container.scrollHeight - container.scrollTop, container.clientHeight)
     }
   },
   watch: {
diff --git a/front/src/main.js b/front/src/main.js
index 0c4129411..e7907d536 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -35,7 +35,7 @@ Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)
 Vue.config.productionTip = false
 Vue.directive('title', {
-  inserted: (el, binding) => { console.log(binding.value); document.title = binding.value + ' - Funkwhale' },
+  inserted: (el, binding) => { document.title = binding.value + ' - Funkwhale' },
   updated: (el, binding) => { document.title = binding.value + ' - Funkwhale' }
 })
 
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 32ee5aafa..5001fb14d 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -76,7 +76,6 @@ export default {
     Pagination
   },
   data () {
-    console.log('YOLO', this.$t)
     let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
     return {
       isLoading: true,
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 397dcb49e..b3b500cf6 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -83,7 +83,6 @@ export default {
       axios.get(url).then((response) => {
         self.radio = response.data
         axios.get(url + 'tracks', {params: {page: this.page}}).then((response) => {
-          console.log(response.data.count)
           this.totalTracks = response.data.count
           this.tracks = response.data.results
         }).then(() => {