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