Skip to content

Commit

Permalink
new UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@dstN
dstN committed May 6, 2020
1 parent 040c470 commit 6eb907f
Show file tree
Hide file tree
Showing 4 changed files with 392 additions and 46 deletions.
211 changes: 185 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,192 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="loader">

</div>
<div class="table">
<span class="start">
{
</span>
<div class="json">

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
<div class="form visible">
<h1 class="doneScrape">Transfermarkt Scraper</h1>
<p>
Please choose the starting year and ending year which you want to scrape from:
</p>
<form action="javascript:void(0);" onsubmit="scrape()">
<div class="form-control">
<label for="startyear">Starting year:</label>
<select id="startyear" name="startyear">
<option disabled selected value>select a year</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
</select>
</div>
<span class="end">
}
</span>
</div>
<div class="copy">
<h1 class="loadingScrape">Scraping...</h1>
<pre id="copy"></pre>
<button onclick="copyFunction()">
Copy to clipboard
</button>
<div class="form-control">
<label for="endyear">Ending year:</label>
<select id="endyear" name="endyear">
<option disabled selected value>select a year</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
</select>
</div>
<button id="submitButton" class="visible" type="submit">Submit</button>
</form>
</div>
<div class="table">
<span class="start">
{
</span>
<div class="json">


</div>
<script type="text/javascript" src="main.js"></script>
</body>
<span class="end">
}
</span>
</div>
<div class="copy">
<h1 class="loadingScrape">Scraping...</h1>
<pre id="copy"></pre>
<button onclick="copyFunction()">
Copy to clipboard
</button>
<button onclick="scrapeReset()">
Scrape another!
</button>
</div>
<script type="text/javascript" src="selectbox.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>

</html>
47 changes: 36 additions & 11 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
var startDate = 1956; // first year a transfer fee was recorded on transfermarkt.com
var endDate = new Date().getFullYear(); // current Year
var getUrl = "https://www.transfermarkt.com/transfers/transferrekorde/statistik/top/saison_id/"; // ADD Year after saison_id/
function ajaxCall(iterate){
function ajaxCall(startyear, endyear){
$.ajax({
url: getUrl + iterate,
url: getUrl + startyear,
type: 'GET',
beforeSend: function() {
$(".copy .loadingScrape").addClass("visible");
$(".form").removeClass("visible");
},
complete: function() {

},
success: function(data) {
var currentYearString = '"'+iterate+'"';
$(".json").append('<div class="'+iterate+' before">'+currentYearString+': [ </div>');
$(".json").append('<div class="'+iterate+' after"></div>');
var currentYearString = '"'+startyear+'"';
$(".json").append('<div class="'+startyear+' before">'+currentYearString+': [ </div>');
$(".json").append('<div class="'+startyear+' after"></div>');
var tableRows = $(data).find(".items>tbody>tr");
tableRows.each(function() {
var rank = $(this).find(">td:first-of-type").text(); // get rank within year
Expand Down Expand Up @@ -82,13 +83,13 @@ function ajaxCall(iterate){
transferHistoryLink: "https://www.transfermarkt.com" + transferHistoryLink
};
var playerJSON = JSON.stringify(playerObj); // object to JSON
$("."+iterate+".before").append("<p id='"+playerID+"'>"+playerJSON+"</p>"); // parse json to browser
$("."+startyear+".before").append("<p id='"+playerID+"'>"+playerJSON+"</p>"); // parse json to browser
});
$("."+iterate+".after").append("<span>],</span>");
$("."+startyear+".after").append("<span>],</span>");

if(iterate++ < endDate) {
if(startyear++ < endyear) {
$(".loadingScrape").removeClass("visible");
ajaxCall(iterate);
ajaxCall(startyear);
}
else {
$(".loadingScrape").removeClass("visible");
Expand All @@ -98,6 +99,7 @@ function ajaxCall(iterate){
completeJSON = JSON.parse(completeJSON);
completeJSON = JSON.stringify(completeJSON, undefined, 2);
jsonoutput(syntaxHighlight(completeJSON));
$(".copy").addClass("visible");
$(".copy").prepend('<h1 class="doneScrape">Scraping done!</h1>');
$(".copy button").addClass("visible");
$("#copy").addClass("visible");
Expand All @@ -108,14 +110,37 @@ function ajaxCall(iterate){
}
});
}
ajaxCall(startDate);
function scrape() {
$(".form span").remove();
var startSelect = document.getElementById("startyear");
var endSelect = document.getElementById("endyear");
var startValue = startSelect.options[startSelect.selectedIndex].value;
var endValue = endSelect.options[endSelect.selectedIndex].value;

if(!startValue) {
$('<span class="key">Error: Please select a starting year.</span>').insertBefore("#submitButton");
}
else if(!endValue) {
$('<span class="key">Error: Please select an ending year.</span>').insertBefore("#submitButton");
}
else if(startValue > endValue) {
$('<span class="key">Error: The starting year must be lower than the ending year.</span>').insertBefore("#submitButton");
}
else {
ajaxCall(startValue, endValue);
}
}
function copyFunction() {
$("#copy").select();
document.execCommand("copy");
alert("Copied to clipboard!");
}

function scrapeReset() {
$(".copy pre").empty();
$(".copy .doneScrape").remove();
$(".copy, .copy pre, .copy button").removeClass("visible");
$(".form").addClass("visible");
}
function jsonoutput(input) {
document.getElementById("copy").innerHTML = input;
}
Expand Down
49 changes: 49 additions & 0 deletions selectbox.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
Reference: http://jsfiddle.net/BB3JK/47/
*/

$('select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;

$this.addClass('select-hidden');
$this.wrap('<div class="select"></div>');
$this.after('<div class="select-styled"></div>');

var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());

var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);

for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}

var $listItems = $list.children('li');

$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});

$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
//console.log($this.val());
});

$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});

});
Loading

0 comments on commit 6eb907f

Please sign in to comment.