started implementing Vue Router; updated README.md; corrected an italian translation

README.md

@@ -6,9 +6,10 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 
 - Use Vue as much as possible
   - First step: rewrite the app in Single File Components way ✅
-  - Second step: Remove jQuery
+  - Second step: Implement routing for the whole app using Vue Router
+  - Third step: Remove jQuery
 - Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
-  - Use ES2020 async imports
+  - Use ES2020 async imports, if possible
 - Make the UI look coherent
   - Style buttons
   - Style text inputs
@@ -19,6 +20,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 	- Better placeholer before analyzing and error feedback
 - Settings tab
 	- Maybe tabbing the section for easy navigation
+	- Could use a carousel, but it's not worth adding a new dep
 - Add Custom Context menu to objects
   - Copy Link where possible
   - Copy Image URL where possible

package-lock.json

@@ -2804,6 +2804,11 @@
 			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz",
 			"integrity": "sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA=="
 		},
+		"vue-router": {
+			"version": "3.3.4",
+			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
+			"integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+		},
 		"vue-template-compiler": {
 			"version": "2.6.11",
 			"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",

package.json

@@ -22,7 +22,8 @@
 		"svg-country-flags": "^1.2.7",
 		"toastify-js": "^1.8.0",
 		"vue": "^2.6.11",
-		"vue-i18n": "^8.18.2"
+		"vue-i18n": "^8.18.2",
+		"vue-router": "^3.3.4"
 	},
 	"devDependencies": {
 		"@rollup/plugin-alias": "^3.1.0",

src/app.js

@@ -7,6 +7,7 @@ window.vol = {
 
 import App from '@components/App.vue'
 import i18n from '@/plugins/i18n'
+// import router from '@/plugins/router'
 
 import $ from 'jquery'
 import { socket } from '@/utils/socket'
@@ -21,8 +22,8 @@ function startApp() {
 }
 
 function mountApp() {
-	// TODO Remove the App instance from the window when deemix will be a complete Vue App
 	new Vue({
+		// router,
 		i18n,
 		render: h => h(App)
 	}).$mount('#app')
@@ -148,10 +149,8 @@ socket.on('errorMessage', function(error) {
 })
 
 socket.on('queueError', function(queueItem) {
-	if (queueItem.errid)
-		toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
-	else
-		toast(queueItem.error, 'error')
+	if (queueItem.errid) toast(i18n.t(`errors.ids.${queueItem.errid}`), 'error')
+	else toast(queueItem.error, 'error')
 })
 
 socket.on('alreadyInQueue', function(data) {

src/components/TheMainContent.vue

@@ -1,5 +1,7 @@
 <template>
 	<main id="main_content">
+		<!-- <router-link to="/tracklist/132">Go to Foo</router-link> -->
+		<!-- <router-view></router-view> -->
 		<TheMiddleSection />
 		<TheDownloadTab />
 	</main>
@@ -13,6 +15,9 @@ export default {
 	components: {
 		TheMiddleSection,
 		TheDownloadTab
+	},
+	mounted() {
+		console.log(this.$route)
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -26,7 +26,7 @@
 			<a href="https://codeberg.org/RemixDev/deemix/wiki/Getting-your-own-ARL" target="_blank">
 				{{ $t('settings.login.arl.question') }}
 			</a>
-			<button id="settings_btn_updateArl" @click="login" style="width:100%;">
+			<button id="settings_btn_updateArl" @click="login" style="width: 100%;">
 				{{ $t('settings.login.arl.update') }}
 			</button>
 		</div>

src/components/TracklistTab.vue

@@ -60,9 +60,9 @@
 									</i>
 									{{
 										track.title +
-											(track.title_version && track.title.indexOf(track.title_version) == -1
-												? ' ' + track.title_version
-												: '')
+										(track.title_version && track.title.indexOf(track.title_version) == -1
+											? ' ' + track.title_version
+											: '')
 									}}
 								</div>
 							</td>
@@ -131,7 +131,7 @@
 				</template>
 			</tbody>
 		</table>
-		<span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
+		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px;">{{ label }}</span>
 		<footer>
 			<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', [$tc(`globals.listTabs.${type}`, 1)])}` }}
@@ -289,10 +289,11 @@ export default {
 			}
 		},
 		selectRow(index, track) {
-			track.selected = !track.selected;
+			track.selected = !track.selected
 		}
 	},
 	mounted() {
+		console.log('tracklist mounted')
 		EventBus.$on('tracklistTab:reset', this.reset)
 		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 

src/lang/it.js

@@ -106,7 +106,7 @@ const it = {
 		needTologin: 'Devi accedere al tuo account Deezer, fino a quel momento non potrai scaricare nulla.',
 		openSettings: 'Apri le impostazioni',
 		sections: {
-			popularPlaylists: 'Playlyst Popolari',
+			popularPlaylists: 'Playlist Popolari',
 			popularAlbums: 'Album più riprodotti'
 		}
 	},

src/plugins/router.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import TracklistTab from '@components/TracklistTab.vue'
+
+console.log(TracklistTab)
+
+Vue.use(VueRouter)
+
+const routes = [
+	{
+		path: '/tracklist/:id',
+		component: TracklistTab
+	},
+	// 404
+	{
+		path: '*',
+		component: TracklistTab
+	}
+]
+
+const router = new VueRouter({
+	mode: 'history',
+	// linkActiveClass: 'open',
+	routes,
+	scrollBehavior(to, from, savedPosition) {
+		return { x: 0, y: 0 }
+	}
+})
+
+router.beforeEach((to, from, next) => {
+	console.log({ from, to })
+	next()
+})
+
+export default router