this repo has no description
Extended to 25 and added some numbering
+16
-11
+16
-11
src/components/LookUp.vue
+16
-11
src/components/LookUp.vue
···
31
31
const userHandle = ref("");
32
32
const loading = ref(false);
33
33
const artists = ref<{ name: string; plays: number }[]>([]);
34
-
const tracks = ref<{ name: string; plays: number }[]>([]);
34
+
const tracks = ref<{ name: string; artist: string; plays: number }[]>([]);
35
35
const totalSongs = ref(0);
36
+
37
+
const formatNumber = (n: number) => n.toLocaleString();
36
38
37
39
const lookup = async () => {
38
40
loading.value = true;
···
80
82
) {
81
83
continue;
82
84
}
83
-
// new version
84
-
85
+
// new version of lexicon
85
86
if (play.value?.artists) {
86
87
for (const artist of play.value?.artists) {
87
88
let alreadyPlayed = inner_artists.find(
···
98
99
}
99
100
}
100
101
} else if (play.value?.artistNames) {
101
-
// old version
102
+
// old version of lexicon
102
103
for (const arist of play.value?.artistNames) {
103
104
let alreadyPlayed = inner_artists.find(
104
105
(a) => a.name === arist,
···
130
131
// update reactive values incrementally (top 10)
131
132
artists.value = inner_artists
132
133
.sort((a, b) => b.plays - a.plays)
133
-
.slice(0, 10);
134
+
.slice(0, 25);
134
135
tracks.value = inner_tracks
135
136
.sort((a, b) => b.plays - a.plays)
136
-
.slice(0, 10);
137
+
.slice(0, 25);
137
138
totalSongs.value = totalCount;
138
139
139
140
cursor = response.data.cursor;
···
183
184
></span>
184
185
<div v-if="tracks.length > 0" class="mt-8">
185
186
<h2 class="text-2xl font-bold mb-4">
186
-
Top Songs out of {{ totalSongs }}
187
+
Top Songs out of {{ formatNumber(totalSongs) }}
187
188
</h2>
188
189
<div class="overflow-x-auto">
189
190
<table class="table w-full">
190
191
<thead>
191
192
<tr>
193
+
<th>Rank</th>
192
194
<th>Plays</th>
193
195
<th>Song</th>
194
196
</tr>
195
197
</thead>
196
198
<tbody>
197
-
<tr v-for="track in tracks" :key="track.name">
198
-
<td>{{ track.plays }}</td>
199
+
<tr v-for="(track, idx) in tracks" :key="track.name">
200
+
<td>{{ idx + 1 }}.</td>
201
+
<td>{{ formatNumber(track.plays) }}</td>
199
202
<td>{{ track.name }} by {{ track.artist }}</td>
200
203
</tr>
201
204
</tbody>
···
208
211
<table class="table w-full">
209
212
<thead>
210
213
<tr>
214
+
<th>Rank</th>
211
215
<th>Plays</th>
212
216
<th>Artist</th>
213
217
</tr>
214
218
</thead>
215
219
<tbody>
216
-
<tr v-for="artist in artists" :key="artist.name">
217
-
<td>{{ artist.plays }}</td>
220
+
<tr v-for="(artist, idx) in artists" :key="artist.name">
221
+
<td>{{ idx + 1 }}.</td>
222
+
<td>{{ formatNumber(artist.plays) }}</td>
218
223
<td>{{ artist.name }}</td>
219
224
</tr>
220
225
</tbody>