mikeymop/index.html

## index.html
<html>
<head>
  <meta charset="utf-8"/>
  <script type="module">
      import { Util } from './js/util.js';
      window.onload = function() {
          console.log("loading");
          const util = new Util();
      }
  </script>
</head>
<body>

</body>
</html>

## js-date.js
export class TimeStamp extends Date {
    unixtime = null;

    constructor(time) {
        //takes unix time and makes into a datetime
        super();
        this.unixtime = Number(time) * 1000;
    }

    // setTime(time) {
    //     this.unixtime = time;
    // }

    getMonthName() {
        let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        let a = new Date(Number(this.unixtime));
        let month = months[a.getMonth()];
        return month;

    }
}

## js-util.js
import { TimeStamp } from './date.js';

// export class Util {

//     songs = null;
//     listens = null;
//     payload = null;
//     widget = null;

//     constructor() {
//         this.songs = null;
//         this.listens = null;
//         this.create();
//     }

//     create() {
//         console.log("creating Util...");
//         this.getSongHistory();
//         this.createProjectWidget();
//     }

//     getSongHistory() {
//         let url = "https://api.listenbrainz.org/1/user/mikeymop/listens"
//         console.log(`Getting listen history from:\n${url}`);
//         fetch(url, {
//             "method": 'GET',
//         }).then((response) => {
//             console.log(`response:\n${response}`);
//             return response.json();
//         }).then((data) => {
//             console.log(`fetch got:\n${JSON.stringify(data)}`);
//             this.listens = data.listens;
//             this.createMusicWidget(JSON.stringify(data));
//         });
//     }

//     createMusicWidget(data) {
//         console.log(`creating music widget...`);

//         data = JSON.parse(data);
//         this.listens = data.payload.listens;
//         let t = new TimeStamp(1576541156 * 1000);
//         let music_widget = document.querySelector('#music-widget');
//         music_widget.class = "card";
//         music_widget.innerHTML = `
//           <h3 class="card-title"> Recent Listens: &#x1F3B6</h3>
//           <div id="disclaimer" class="card-subtitle" mb-2 text-muted>
//             Listen history courtesy of <a href="https://listenbrainz.org/user/mikeymop">ListenBrainz</a>
//           </div>
//           <div id="track-list" class="card-body">
//             <table class="table table-condensed" id="listens">
//               <thead>
//                 <tr>
//                   <th>Listen Time:</th>
//                   <th>Artist:</th>
//                   <th>Song:</th>
//                 </tr>
//               </thead>
//             </table>
//           </div>
//         `;
//         let table = document.querySelector('.table');
//         let tbody = document.createElement('tbody');
//         let i = 0;
//         for(let entry of this.listens) {
//             if(i == 10) { break; }
//             this.addRow(tbody, entry, i);
//             i += 1;
//         }
//         table.appendChild(tbody);
//     }

//     addRow(tbody, entry, idx) {
//         console.log(`addrow`);
//         let t_stamp = new TimeStamp(Number(entry.listened_at));
//         let track = entry.track_metadata;
//         let row = document.createElement("tr");
//         if(idx == 0) {
//             row.innerHTML = `
//               <td> &#x1F3A7 ${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
//               <td>${track.artist_name}</td>
//               <td>${track.track_name}</td>
//             `;
//         } else {
//             row.innerHTML = `
//               <td>${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
//               <td>${track.artist_name}</td>
//               <td>${track.track_name}</td>
//             `;
//         }
//         tbody.appendChild(row);
//     }

//     createProjectWidget() {
//         let project_widget = document.querySelector("#project-widget");
//         project_widget.innerHTML = `
//           <h3>Recent Projects:</h3>
//           <table>
//             <tr>
//               <th>
//                 <div class="card" style="width: 18rem; padding: 10px; margin: .8rem">
//                   <img src="http://defrances.co/img/icon.png" class="card-image" style="margin: auto; width: 5rem; height: 5rem"></img>
//                   <div class="card-title" style="margin: 5px;">Personal Blog <a href="http://defrances.co"><i>(Link)</i></a></div>
//                   <div class="card-body">
//                       <p class="card-text">My Personal Website, written using node.js and hugo</p>
//                   </div>
//                 </div>
//               </th>
//               <th>
//                 <div class="card" style="width: 18rem; padding: 10px; margin: .8rem">
//                   <img src="https://via.placeholder.com/150" class="card-image" style="margin: auto; width: 5rem; height: 5rem"></img>
//                   <div class="card-title" style="margin: 5px;">Grader Gater <a href="https://web.njit.edu/~md537/dev"><i>(Link)</i></a></div>
//                   <div class="card-body">
//                       <p class="card-text">A SPA created for the CS 490 Final Project</p>
//                   </div>
//                 </div>
//               </th>
//             <tr>
//           </table>
//         `;
//     }
// }

export class Util {

    listens = null;

    constructor() {
        console.log("utils constructor");
        this.create();
    }
    create() {
        this.getSongHistory();
    }

    getSongHistory() {
        let url = "https://api.listenbrainz.org/1/user/mikeymop/listens"
        console.log(`Getting listen history from:\n https://api.listenbrainz.org/1/user/[listenbrainz-uname]/listens`);
        fetch(url, {
            "method": 'GET',
        }).then((response) => {
            return response.json();
        }).then((data) => {
            console.log(`fetch got:\n${JSON.stringify(data)}`);
            this.listens = JSON.stringify(data.payload.listens);
            this.createMusicWidget();
        });
    }

    createMusicWidget() {
        let data = JSON.parse(this.listens);
        let music_widget = document.querySelector('body');

        music_widget.innerHTML = `
          <h3 class="widget-title"> Recent Listens: &#x1F3B6</h3>
          <div id="disclaimer">
            Listen history courtesy of <a href="https://listenbrainz.org/user/mikeymop">ListenBrainz</a>
          </div>
          <div id="track-list">
            <table class="table" id="listens">
              <thead>
                <tr>
                  <th>Listen Time:</th>
                  <th>Artist:</th>
                  <th>Song:</th>
                </tr>
              </thead>
            </table>
          </div>
        `;
        let table = document.querySelector('.table');
        let tbody = document.createElement('tbody');
        let i = 0 // keep track of iterations

        for (let entry of data) {
            this.addRow(tbody, entry, i);
        }
        table.appendChild(tbody);
    }

    addRow(tbody, entry, idx) {
        console.log(`addrow: ${JSON.stringify(entry.track_metadata.track_name)}`);
        let track = entry.track_metadata;
        let row = document.createElement("tr");
        let t_stamp = new TimeStamp(Number(entry.listened_at));

        row.innerHTML = `
          <td>${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
          <td>${track.artist_name}</td>
          <td>${track.track_name}</td>
        `;

        tbody.appendChild(row);
    }
}
	<html>
	<head>
	<meta charset="utf-8"/>
	<script type="module">
	import { Util } from './js/util.js';
	window.onload = function() {
	console.log("loading");
	const util = new Util();
	}
	</script>
	</head>
	<body>

	</body>
	</html>
	export class TimeStamp extends Date {
	unixtime = null;

	constructor(time) {
	//takes unix time and makes into a datetime
	super();
	this.unixtime = Number(time) * 1000;
	}

	// setTime(time) {
	// this.unixtime = time;
	// }

	getMonthName() {
	let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
	let a = new Date(Number(this.unixtime));
	let month = months[a.getMonth()];
	return month;

	}
	}
	import { TimeStamp } from './date.js';

	// export class Util {

	// songs = null;
	// listens = null;
	// payload = null;
	// widget = null;

	// constructor() {
	// this.songs = null;
	// this.listens = null;
	// this.create();
	// }

	// create() {
	// console.log("creating Util...");
	// this.getSongHistory();
	// this.createProjectWidget();
	// }

	// getSongHistory() {
	// let url = "https://api.listenbrainz.org/1/user/mikeymop/listens"
	// console.log(`Getting listen history from:\n${url}`);
	// fetch(url, {
	// "method": 'GET',
	// }).then((response) => {
	// console.log(`response:\n${response}`);
	// return response.json();
	// }).then((data) => {
	// console.log(`fetch got:\n${JSON.stringify(data)}`);
	// this.listens = data.listens;
	// this.createMusicWidget(JSON.stringify(data));
	// });
	// }

	// createMusicWidget(data) {
	// console.log(`creating music widget...`);

	// data = JSON.parse(data);
	// this.listens = data.payload.listens;
	// let t = new TimeStamp(1576541156 * 1000);
	// let music_widget = document.querySelector('#music-widget');
	// music_widget.class = "card";
	// music_widget.innerHTML = `
	// <h3 class="card-title"> Recent Listens: &#x1F3B6</h3>
	// <div id="disclaimer" class="card-subtitle" mb-2 text-muted>
	// Listen history courtesy of <a href="https://listenbrainz.org/user/mikeymop">ListenBrainz</a>
	// </div>
	// <div id="track-list" class="card-body">
	// <table class="table table-condensed" id="listens">
	// <thead>
	// <tr>
	// <th>Listen Time:</th>
	// <th>Artist:</th>
	// <th>Song:</th>
	// </tr>
	// </thead>
	// </table>
	// </div>
	// `;
	// let table = document.querySelector('.table');
	// let tbody = document.createElement('tbody');
	// let i = 0;
	// for(let entry of this.listens) {
	// if(i == 10) { break; }
	// this.addRow(tbody, entry, i);
	// i += 1;
	// }
	// table.appendChild(tbody);
	// }

	// addRow(tbody, entry, idx) {
	// console.log(`addrow`);
	// let t_stamp = new TimeStamp(Number(entry.listened_at));
	// let track = entry.track_metadata;
	// let row = document.createElement("tr");
	// if(idx == 0) {
	// row.innerHTML = `
	// <td> &#x1F3A7 ${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
	// <td>${track.artist_name}</td>
	// <td>${track.track_name}</td>
	// `;
	// } else {
	// row.innerHTML = `
	// <td>${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
	// <td>${track.artist_name}</td>
	// <td>${track.track_name}</td>
	// `;
	// }
	// tbody.appendChild(row);
	// }

	// createProjectWidget() {
	// let project_widget = document.querySelector("#project-widget");
	// project_widget.innerHTML = `
	// <h3>Recent Projects:</h3>
	// <table>
	// <tr>
	// <th>
	// <div class="card" style="width: 18rem; padding: 10px; margin: .8rem">
	// <img src="http://defrances.co/img/icon.png" class="card-image" style="margin: auto; width: 5rem; height: 5rem"></img>
	// <div class="card-title" style="margin: 5px;">Personal Blog <a href="http://defrances.co"><i>(Link)</i></a></div>
	// <div class="card-body">
	// <p class="card-text">My Personal Website, written using node.js and hugo</p>
	// </div>
	// </div>
	// </th>
	// <th>
	// <div class="card" style="width: 18rem; padding: 10px; margin: .8rem">
	// <img src="https://via.placeholder.com/150" class="card-image" style="margin: auto; width: 5rem; height: 5rem"></img>
	// <div class="card-title" style="margin: 5px;">Grader Gater <a href="https://web.njit.edu/~md537/dev"><i>(Link)</i></a></div>
	// <div class="card-body">
	// <p class="card-text">A SPA created for the CS 490 Final Project</p>
	// </div>
	// </div>
	// </th>
	// <tr>
	// </table>
	// `;
	// }
	// }

	export class Util {

	listens = null;

	constructor() {
	console.log("utils constructor");
	this.create();
	}
	create() {
	this.getSongHistory();
	}

	getSongHistory() {
	let url = "https://api.listenbrainz.org/1/user/mikeymop/listens"
	console.log(`Getting listen history from:\n https://api.listenbrainz.org/1/user/[listenbrainz-uname]/listens`);
	fetch(url, {
	"method": 'GET',
	}).then((response) => {
	return response.json();
	}).then((data) => {
	console.log(`fetch got:\n${JSON.stringify(data)}`);
	this.listens = JSON.stringify(data.payload.listens);
	this.createMusicWidget();
	});
	}

	createMusicWidget() {
	let data = JSON.parse(this.listens);
	let music_widget = document.querySelector('body');

	music_widget.innerHTML = `
	<h3 class="widget-title"> Recent Listens: &#x1F3B6</h3>
	<div id="disclaimer">
	Listen history courtesy of <a href="https://listenbrainz.org/user/mikeymop">ListenBrainz</a>
	</div>
	<div id="track-list">
	<table class="table" id="listens">
	<thead>
	<tr>
	<th>Listen Time:</th>
	<th>Artist:</th>
	<th>Song:</th>
	</tr>
	</thead>
	</table>
	</div>
	`;
	let table = document.querySelector('.table');
	let tbody = document.createElement('tbody');
	let i = 0 // keep track of iterations

	for (let entry of data) {
	this.addRow(tbody, entry, i);
	}
	table.appendChild(tbody);
	}

	addRow(tbody, entry, idx) {
	console.log(`addrow: ${JSON.stringify(entry.track_metadata.track_name)}`);
	let track = entry.track_metadata;
	let row = document.createElement("tr");
	let t_stamp = new TimeStamp(Number(entry.listened_at));

	row.innerHTML = `
	<td>${t_stamp.getMonthName()} ${t_stamp.getDate()} ${t_stamp.getFullYear()}</td>
	<td>${track.artist_name}</td>
	<td>${track.track_name}</td>
	`;

	tbody.appendChild(row);
	}
	}