Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Make app function.

Browse source
This commit is contained in:
Tyler-A 2020-07-05 18:14:59 -06:00
parent e4c81beefe
commit af75bbc522
14 changed files with 865 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
index.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Lists For Spotify</title>
<!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./css/track.css">
<link rel="stylesheet" href="./css/artist.css">
<!-- Javascript Imports -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./components/artist.js" defer async></script>
<script src="./components/track.js" defer async></script>
<script src="https://unpkg.com/v-tooltip"></script>
<script src="./js/text_computation.js"></script>
<script src="./app.js" defer></script>
<script src="./js/auth.js"></script>
<script src="./js/data.js"></script>
</head>
<body>
<div id="app" v-cloak>
<div id="login" v-if="!is_authed">
<div class="card center">
<a :href="spotify_auth_url">
<button id="spotify-login">Login With Spotify</button>
</a>
<p class="error" v-if="error.auth">{{error.auth}}</p>
<p>{{auth.alert}}</p>
</div>
</div>
<div id="main" v-else v-cloak>
<div class="flex-row">
<div v-cloak class="account-info">
<img v-if="user.image" :src="user.image" :alt="`${user.name}'s profile picture`" class="profile-picture">
{{user.name}}
</div>
<div class="type">
<select v-model="type">
<option value="" disabled>Please Select A Type</option>
<option value="Tracks">Tracks</option>
<option value="Artists">Artists</option>
</select>
</div>
<div class="duration">
<select v-model="duration">
<option value="" disabled>Please Select A Duration</option>
<option value="long_term">Several Years</option>
<option value="medium_term">~6 Months</option>
<option value="short_term">~4 Weeks</option>
</select>
</div>
<div class="limit">
<input type="number" v-model="count" placeholder="How Many?">
</div>
<div id="submit-button" v-if="button_type && duration">
<button @click="get_data()">Get Top {{count > 1 ? count : ``}} {{button_type}}</button>
</div>
</div>
<div class="flex-row error" v-if="error.main">{{error.main}}</div>
<div class="body" v-if="data.tracks.length > 0">
<track-card
v-for="top_track in data.tracks"
:track="top_track"
:key="top_track.id"
></track-card>
</div>
<div class="body" v-if="data.artists.length > 0">
<artist
v-for="top_artist in data.artists"
:artist="top_artist"
:key="top_artist.id"
></artist>
</div>
</div>
</div>
</body>
</html>