songs table WIP

STiBaRC · Mar 26, 2020 · dfde416 · dfde416
1 parent 77343bd
commit dfde416
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/album/index.html b/album/index.html
@@ -38,7 +38,7 @@
                 </span>
                 <span class="links" id="nav-links" style="display: none">
                     <a class="" href="../">Home</a>
-                    <a class="active" href="../releases/">Releases</a>
+                    <a class="" href="../releases/">Releases</a>
                     <a class="" href="../contact/">Contact</a>
                     <a class="" href="../about/">About</a>
                 </span>
@@ -68,6 +68,20 @@ <h1 id="title">Loading</h1>
                             </div>
                         </span>
 
+                        <div class="songs-area" style="margin: 1.5rem 0 2rem 0;">
+
+                            <h1>Songs</h1>
+
+                            <table id="songs" style="width:100%; text-align: left">
+                                <tr>
+                                    <th>#</th>
+                                    <th>TITLE</th> 
+                                </tr>
+
+                            </table>
+
+                        </div>
+
                     </div>
 
                 </section>

diff --git a/assets/css/album.css b/assets/css/album.css
@@ -17,7 +17,7 @@
 }
 .album-top .info #type{
     text-transform: uppercase;
-    color: var(--light-text);
+    color: rgba(255, 255, 255, 0.6);
     font-size: 1.05rem;
 }
 .album-top .info #title{
@@ -41,6 +41,19 @@
     font-weight: 400;
     color: var(--light-text);
 }
+
+/* song area */
+.song-area{
+
+}
+th, td {
+    padding: 15px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+}
+table {
+    border-spacing: 0;
+}
+
 @media only screen and (max-width: 1280px){
     .album-top .info #title{
         font-size: 2.75rem;

diff --git a/assets/js/album.js b/assets/js/album.js
@@ -1,31 +1,43 @@
 var albumID = parseInt(getAllUrlParams().id);
 
-loadAlbumInfo();
-
-
-var data;
-
 function loadAlbumInfo(){
 
     var xhttp = new XMLHttpRequest();
     xhttp.onload = function() {
 
-        data = JSON.parse(xhttp.responseText);
+        var data = JSON.parse(xhttp.responseText);
         $('load').style.display = 'none';
         $('album-top').style.display = '';
 
-//		for (var i = 1; i < Object.keys(tmp).length+1; i++) {
-//			artist(i,tmp[i]);
-//        }
+        var cover       = artworkPath + data['albums'][albumID]['artwork']['500px'];
+        var type        = data['albums'][albumID]['type'];
+        var title       = data['albums'][albumID]['name'];
+        var artistId    = parseInt(data['albums'][albumID]['artist']);
+
+        var artist      = data['artists'][artistId]['name'];
+        var year        = data['albums'][albumID]['year'];
+
+        var songCount   = Object.keys(data['albums'][albumID]['songs']).length;
 
-        $('mainCover').src = artworkPath + data['albums'][albumID]['artwork']['500px'];
-        $('type').innerHTML = data['albums'][albumID]['type'];
-        $('title').innerHTML = data['albums'][albumID]['name'];
-        $('artist').innerHTML = data['artists'][parseInt(data['albums'][albumID]['artist'])]['name'];
-        $('year').innerHTML = data['albums'][albumID]['year'];
-        $('count').innerHTML = Object.keys(data['albums'][albumID]['songs']).length;
+        var songs       = '<tr><th>#</th><th>TITLE</th></tr> ';
+
+        for (let i = 0; i < songCount; i++){
+            var currentSong = data['albums'][albumID]['songs'][i];
+            songs += '<tr><td>'+(i+1)+'</td><td>'+data['songs'][currentSong]['name']+'</td></tr>';
+        }
+
+
+        $('mainCover').src = cover;
+        $('type').innerHTML = type;
+        $('title').innerHTML = title;
+        $('artist').innerHTML = artist
+        $('year').innerHTML = year;
+        $('count').innerHTML = songCount;
+        $('songs').innerHTML =  songs;
 
     };
     xhttp.open("GET", '/data.json', true);
     xhttp.send();
-}
+}
+
+loadAlbumInfo();