Untitled



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HitTastic! The Fantastic hit site!</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script type='text/javascript'
src='http://www.free-map.org.uk/osmuk/jslib/leaflet.js'></script>
<link rel='stylesheet' type='text/css'
href='http://www.free-map.org.uk/osmuk/jslib/leaflet.css' />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<style>
		body {
    background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.8) 100%,rgba(255,255,255,0.9) 100%),url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/qKKjDnx/close-up-hd-movie-of-a-record-player-playing-a-vinyl-black-record-the-needle-is-being-put-onto-the-record-and-removed-again_ekgj-lxf__F0000.png");
}
	.underline{
		border-bottom: 1px solid #A9A9A9;
	}
	th{
		text-align: center;
	}
@media screen and (max-width: 768px) {
    .map{
        width: 75%!important;
        height: auto!important;
    }

}


	</style>
	<script type='text/javascript'>

// function ajaxrequest()
// {
//     var xhr2 = new XMLHttpRequest();

//     xhr2.addEventListener ("load", (responseReceived));

//     var a = document.getElementById("artist").value;

//     xhr2.open("GET" , "http://edward2.solent.ac.uk/~jtongue/WAD/WebServices.php?artist=" + a);
//     xhr2.send();
// }

function ajaxrequest()
{
    var xhr2 = new XMLHttpRequest();


    xhr2.addEventListener ("load",  (e) =>
                {
                    //var output = "";
                    var data = JSON.parse(e.target.responseText);
                       for(var i=0; i<data.length; i++)
                    {
                        var p = document.createElement("p");
                        var newText = document.createTextNode('Song Name:' + data[i].title + 'Artist:' + data[i].artist + 'Downloads:' + data[i].downloads + '');
                        var newButton = document.createElement("input");
                        newButton.setAttribute('type','button');
                        newButton.setAttribute('value','DOWNLOAD')
                        newButton.setAttribute('id','btn' +data[i].songid);
                        p.appendChild(newText);
                        p.appendChild(newButton);
                        document.getElementById('resultsContainer').appendChild(p);


                        newButton.addEventListener("click", (e) =>
                        	{

                        var songId = e.target.id.substring(3);
                        alert(songId);
                        var user = "SarahBrown";
                        var pass = "newyork791";
                        var xhr2 = new XMLHttpRequest();
                        var data = new FormData();
                        data.append("songid", songId);
                        xhr2.addEventListener("load", downloadresponse);
                        xhr2.open("POST" , "/~jdearmer/wad/l4/downloadwebservice.php");
                        xhr2.setRequestHeader("Authorization","Basic " + btoa(user + ":" + pass));
    					xhr2.send(data);
                        	});
                    }
                     // document.getElementById("response").innerHTML=output;
                } );

    var a = document.getElementById("artist").value;

    xhr2.open("GET" , "/~jtongue/WAD/WebServices.php?artist=" + a);
    xhr2.send();
}


    function downloadresponse(e)
    {
        console.log(e.target.responseText);
    	var result = document.createElement("div");
    	if (e.target.status==402) {
    		var failed = document.createTextNode("You have no money.");
    		result.appendChild(failed);
    		document.body.appendChild(result);
    	}
    	else
    	{
    		var succeed = document.createTextNode("You purchased this song.");
    		result.appendChild(succeed);
    		document.body.appendChild(result);
    	}
    }

function init()
{
 var app = new MappingApp();
}
function MappingApp(){
        this.map = L.map ("map1");
            this.tilelayer = L.tileLayer
        ("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            { attribution: this.attrib } ).addTo(this.map);

    this.attrib="Map data copyright OpenStreetMap contributors, Open Database Licence";


    this.map.setView([51.430614,-1.148620], 14);
    document.getElementById("searchBtn").addEventListener("click", this.ajaxrequest2.bind(this));
}

MappingApp.prototype.ajaxrequest2 = function()
{
    var xhr2 = new XMLHttpRequest();

    xhr2.addEventListener ("load", this.responseReceived2.bind(this));

    var a = document.getElementById("artist").value;

    xhr2.open("GET" , "http://edward2.solent.ac.uk/wad/artists.php?artist=" + a);
    console.log(a);
    xhr2.send();
}
MappingApp.prototype.responseReceived2 = function(e)
{

    var output = ""; // initialise output to blank text
    var artistData = JSON.parse(e.target.responseText);

        var lat = artistData.lat;
        var lon = artistData.lon;
        var town = artistData.hometown;
        console.log(lat);
        console.log(lon);
        var artistPos = [lat, lon];
        this.map.setView(artistPos, 14);
        var homeTownmarker =  L.marker(artistPos).addTo(this.map);
        homeTownmarker.bindPopup(town);
}


</script>
</head>
<body onload="init()">
	<div class="container">
		<div class="row">
			<div class="col col-lg-12" style="text-align: center;"><h2>HitTastic!</h2></div>
		</div>
		<div class="row">
			<div class="col col-lg-12" style="text-align: center;">Welcome to HitTastic! This is a site that shows all of the number 1 hits from 1960 onward. You'll be sure to find something you love here!</div>
		</div>
		<div class="row">
			<div class="col col-lg-12 text-center" >
<p>
Artist: <br />
<input id="artist" value="Oasis"/>

<input type="button" value="Go!" onclick="ajaxrequest()" />
<input type="button" id="searchBtn" value="Where is this artist from?" />
</p>

			</div>
		</div>
		<div class="row">
			<div class="col col-lg-12 text-center " id="">
				<table align="center" cellpadding="10" style="background-color:rgba(255, 255, 255, 0.5);">
					<thead>
						<tr>
							<th>Results</th>
						</tr>
					</thead>
					<tbody id="resultsContainer">
					</tbody>
				</table>
			</div>
		</div>
	</div>
    <div id="map1" class="map" style="width:584px; height:418px; text-align: center; margin: 0 auto;" align="center"> </div>


<!-- JS added at end of page to help load times. BootStrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>