@page @model NowModel @{ ViewData["Title"] = "Now - Selector"; } <div class="text-center"> <h1 class="display-4">Now</h1> <div id="app" class="app col-12"> <now-playing-card :track="currentlyPlaying.track" v-if="currentlyPlaying !== null && currentlyPlaying !== undefined"></now-playing-card> <now-playing-card v-else></now-playing-card> <popularity :track="currentlyPlaying.track" v-if="currentlyPlaying !== null && currentlyPlaying !== undefined && currentlyPlaying.track != null && currentlyPlaying.track != undefined"></popularity> <audio-feature-card :feature="trackFeatures" v-if="trackFeatures !== null && trackFeatures !== undefined"></audio-feature-card> <audio-feature-chart-card :feature="trackFeatures" v-if="trackFeatures !== null && trackFeatures !== undefined"></audio-feature-chart-card> <play-count-card :count="playCount" :track="lastfmTrack" :username="playCount.username" v-if="playCount !== null && playCount !== undefined"></play-count-card> <info-card v-for="card in cards" :html="card.content"></info-card> <artist-breakdown :play_count="playCount" v-if="showArtistBreakdown"></artist-breakdown> <play-count-chart-card-comb :data_points="combinedData" :chart_id="'combined'" :earliest_date="earliestDate" v-if="showAlbumChart"></play-count-chart-card-comb> <play-count-chart-card :data_points="playCount.trackCountData" :title="trackGraphTitle" :chart_id="'track'" :earliest_date="earliestDate" :latest_date="latestDate" :colour="'#7a99c2'" v-if="showTrackChart"></play-count-chart-card> <play-count-chart-card :data_points="playCount.albumCountData" :title="albumGraphTitle" :chart_id="'album'" :earliest_date="earliestDate" :latest_date="latestDate" :colour="'#a34c77'" v-if="showAlbumChart"></play-count-chart-card> <play-count-chart-card :data_points="playCount.artistCountData" :title="artistGraphTitle" :chart_id="'artist'" :earliest_date="earliestDate" :latest_date="latestDate" :colour="'#598556'" v-if="showArtistChart"></play-count-chart-card> </div> </div> @section Scripts { <script type="module" src="~/js/now.bundle.js"></script> }