Implemented barebones charts tab

public/index.html

@@ -321,6 +321,39 @@ <h2>Top Playlists</h2>
 
 					<div id="charts_tab" class="main_tabcontent">
 						<h1>Charts</h1>
+            <div v-if='country == ""' id="charts_selection">
+              <div class="release_grid">
+                <div v-for="release in countries" class="release clickable" @click="getTrackList" :data-title="release.title" :data-id="release.id">
+									<img class="rounded coverart" :src="release.picture_medium">
+								</div>
+              </div>
+            </div>
+            <div v-else id="charts_table">
+              <button @click="changeCountry">Change Country</button>
+              <button @contextmenu.prevent="openQualityModal"
+                @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/'+id">Download Chart</button>
+              <table>
+								<tr v-for="track in chart" class="track_row">
+									<td class="top-tracks-position" :class="{ first: track.position === 1 }">{{ track.position }}</td>
+									<td style="width: 48px; text-align: center;">
+										<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
+											:data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave"
+												v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
+												class="rounded coverart" :src="track.album.cover_small">
+									</td>
+									<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
+									<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
+										{{track.artist.name}}</td>
+									<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
+										{{track.album.title}}</td>
+									<td>{{convertDuration(track.duration)}}</td>
+									<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+										@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
+										class="clickable"><i class="material-icons">get_app</i>
+									</td>
+								</tr>
+							</table>
+            </div>
 					</div>
 
 					<div id="favorites_tab" class="main_tabcontent">
@@ -743,4 +776,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 <script type="module" src="/public/js/app.js"></script>
 
-</html>
+</html>

public/js/modules/components/charts-tab.js

@@ -0,0 +1,66 @@
+import { socket } from '../socket.js'
+import { artistView, albumView } from '../tabs.js'
+import Downloads from '../downloads.js'
+import QualityModal from '../quality-modal.js'
+import TrackPreview from '../track-preview.js'
+import Utils from '../utils.js'
+
+const ChartsTab = new Vue({
+	data() {
+		return {
+			country: '',
+      id: 0,
+      countries: [],
+      chart: []
+		}
+	},
+	methods: {
+    artistView,
+		albumView,
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
+		convertDuration: Utils.convertDuration,
+		addToQueue(e) {
+			e.stopPropagation()
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+    getTrackList(e){
+      this.country = e.currentTarget.dataset.title
+      localStorage.setItem('chart', this.country)
+      this.id = e.currentTarget.dataset.id
+      socket.emit('getChartTracks', this.id)
+    },
+    setTracklist(data){
+      this.chart = data
+    },
+    changeCountry(){
+      this.country = ''
+      this.id = 0
+    },
+		initCharts(data) {
+      this.countries = data
+      this.country = localStorage.getItem('chart') || ''
+      if (this.country){
+        let i = 0
+        for (i; i < this.countries.length; i++) if (this.countries[i].title == this.country) break
+        if (i != this.countries.length){
+          this.id = this.countries[i].id
+          socket.emit('getChartTracks', this.id)
+        }else{
+          this.country = ''
+          localStorage.setItem('chart', this.country)
+        }
+      }
+		}
+	},
+	mounted() {
+		socket.on('init_charts', this.initCharts)
+    socket.on('setChartTracks', this.setTracklist)
+	}
+}).$mount('#charts_tab')
+
+export default ChartsTab

public/js/modules/tabs.js

@@ -2,6 +2,7 @@ import ArtistTab from './components/artist-tab.js'
 import TracklistTab from './components/tracklist-tab.js'
 import LinkAnalyzerTab from './components/link-analyzer-tab.js'
 import HomeTab from './components/home-tab.js'
+import ChartsTab from './components/charts-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
 import MainSearch from './components/main-search.js'