From 9bf551bd6da41733417ed08573dc1939183dd920 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Thu, 13 Aug 2020 21:25:45 -0600
Subject: [PATCH] Add release date of album to track information

---
 src/components/modals/DetailedTrack.vue | 55 +++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/components/modals/DetailedTrack.vue b/src/components/modals/DetailedTrack.vue
index 94d201f..c35a011 100644
--- a/src/components/modals/DetailedTrack.vue
+++ b/src/components/modals/DetailedTrack.vue
@@ -7,7 +7,18 @@
 		>
 			<transition name="burst" @after-leave="$emit('close')">
 				<div v-if="content" class="modal">
-					<h2>"{{ track.name }}" Information</h2>
+					<h2 @click.self="show_all_feature_info = true">
+						"{{ track.name }}" Information
+						<div
+							class="release-date"
+						>
+							<span
+								v-tooltip="release_date_tooltip"
+							>
+								{{ track.album.release_date.replace(/-/g, `/`) }}
+							</span>
+						</div>
+					</h2>
 					<div class="audio-features-container">
 						<div
 							v-for="name in data_wanted"
@@ -35,21 +46,23 @@
 
 <script>
 import * as axios from "axios";
+import TrackAudioFeatureInfo from "./FeaturesInfo.vue";
 
 export default {
 	name: `DetailedTrackInfo`,
+	components: {},
 	props: {
 		track: {
 			type: Object,
 			required: true,
 		}
 	},
-	created() {},
 	data() { return {
 		container: false,
 		content: false,
+		show_feature_info: false,
+		show_all_feature_info: false,
 		data_populated: false,
-		tooltips: {},
 		data_points: {},
 		data_wanted: [
 			`acousticness`,
@@ -62,6 +75,20 @@ export default {
 			`valence`,
 			`popularity`,
 		],
+		months: {
+			"01": "January",
+			"02": "Febuary",
+			"03": "March",
+			"04": "April",
+			"05": "May",
+			"06": "June",
+			"07": "July",
+			"08": "August",
+			"09": "September",
+			"10": "October",
+			"11": "November",
+			"12": "December",
+		}
 	}},
 	mounted() {
 		this.$nextTick(function() {
@@ -79,6 +106,21 @@ export default {
 			.catch(err => console.error(err))
 		})
 	},
+	computed: {
+		release_date_tooltip() {
+			let parts = this.track.album.release_date.split(`-`);
+			switch (this.track.album.release_date_precision) {
+				case `year`:
+					return release[0];
+				case `month`:
+					return `${this.months[parts[1]]}, ${parts[0]}`
+				case `day`:
+					return `${this.months[parts[1]]} ${parts[2]}, ${parts[0]}`
+				default:
+					return ``;
+			};
+		},
+	},
 	methods: {
 		get_percentage(key) {
 			let value = this.data_points[key];
@@ -123,6 +165,13 @@ export default {
 
 h2 {
 	text-align: center;
+	position: relative;
+}
+
+.release-date {
+	position: absolute;
+	font-size: 0.6em;
+	width: 100%;
 }
 
 .audio-features-container {