From 6eb907fa45d8e1f26520e2d3c8fdf8d3724384f8 Mon Sep 17 00:00:00 2001 From: dstN Date: Wed, 6 May 2020 19:05:25 +0200 Subject: [PATCH] new UI --- index.html | 211 ++++++++++++++++++++++++++++++++++++++++++++------- main.js | 47 +++++++++--- selectbox.js | 49 ++++++++++++ style.css | 131 +++++++++++++++++++++++++++++--- 4 files changed, 392 insertions(+), 46 deletions(-) create mode 100644 selectbox.js diff --git a/index.html b/index.html index 2ea8f4d..1022361 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,192 @@ - - - - - - -
- -
-
- - { - -
+ + + + + + +
+

Transfermarkt Scraper

+

+ Please choose the starting year and ending year which you want to scrape from: +

+
+
+ +
- - } - -
-
-

Scraping...

- 

-      
+      

+        
+        
+      

+      
+    
+  

+  

+    
+      {
+    
+    

+
+
     

-    
-  
+    
+      }
+    
+  

+  

+    
Scraping...

+    

+    
+    
+  

+  
+  
+
+
 
diff --git a/main.js b/main.js
index 73cf3a0..14d7a1b 100644
--- a/main.js
+++ b/main.js
@@ -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('
'+currentYearString+': [ 
');
-      $(".json").append('
');
+      var currentYearString = '"'+startyear+'"';
+      $(".json").append('
'+currentYearString+': [ 
');
+      $(".json").append('
');
       var tableRows = $(data).find(".items>tbody>tr");
       tableRows.each(function() {
         var rank = $(this).find(">td:first-of-type").text(); // get rank within year
@@ -82,13 +83,13 @@ function ajaxCall(iterate){
           transferHistoryLink: "https://www.transfermarkt.com" + transferHistoryLink
         };
         var playerJSON = JSON.stringify(playerObj); // object to JSON
-        $("."+iterate+".before").append("
"+playerJSON+"
"); // parse json to browser
+        $("."+startyear+".before").append("
"+playerJSON+"
"); // parse json to browser
       });
-      $("."+iterate+".after").append("],");
+      $("."+startyear+".after").append("],");
 
-      if(iterate++ < endDate) {
+      if(startyear++ < endyear) {
         $(".loadingScrape").removeClass("visible");
-        ajaxCall(iterate);
+        ajaxCall(startyear);
       }
       else {
         $(".loadingScrape").removeClass("visible");
@@ -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('
Scraping done!
');
         $(".copy button").addClass("visible");
         $("#copy").addClass("visible");
@@ -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) {
+    $('Error: Please select a starting year.').insertBefore("#submitButton");
+  }
+  else if(!endValue) {
+    $('Error: Please select an ending year.').insertBefore("#submitButton");
+  }
+  else if(startValue > endValue) {
+    $('Error: The starting year must be lower than the ending year.').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;
 }
diff --git a/selectbox.js b/selectbox.js
new file mode 100644
index 0000000..315567e
--- /dev/null
+++ b/selectbox.js
@@ -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('
');
+    $this.after('
');
+
+    var $styledSelect = $this.next('div.select-styled');
+    $styledSelect.text($this.children('option').eq(0).text());
+
+    var $list = $('
    ', {
+        'class': 'select-options'
+    }).insertAfter($styledSelect);
+
+    for (var i = 0; i < numberOfOptions; i++) {
+        $('
  • ', {
+            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();
+    });
+
+});
diff --git a/style.css b/style.css
index c742016..fb69c6e 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,12 @@ html {
   background-color: #252525;
   color: #fff;
   font-size: 16px;
+  margin: 0;
+  padding: 0;
+}
+body {
+  margin: 0;
+  padding: 0;
 }
 ::selection {
   background: #e03100;
@@ -12,10 +18,6 @@ html {
   background: #e03100;
   color: #fff;
 }
-body>*{
-  display: none !important;
-  visibility: hidden !important;
-}
 .table {
   display: none !important;
   visibility: hidden !important;
@@ -23,6 +25,11 @@ body>*{
 .copy {
   display: block !important;
   visibility: visible !important;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  z-index: 0;
 }
 .loadingScrape {
   opacity: 0;
@@ -41,11 +48,6 @@ body>*{
   -ms-animation: text-snake 1s infinite alternate;
   animation: text-snake 1s infinite alternate;
 }
-.visible {
-  opacity: 1;
-  visibility: visible;
-  transition: all ease-in-out 1.5s;
-}
 .doneScrape {
   color: #fff;
   text-align: center;
@@ -132,3 +134,114 @@ button:hover {
        	         -16px 16px 2px rgba(0,0,0,0.7);
   }
 }
+.form-control {
+  display: block;
+  margin-bottom: 10px;
+}
+.form-control label {
+  display: block;
+  margin-bottom: 10px;
+}
+.form {
+  text-align: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all ease-in-out 1.5s;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transition: all ease-in-out 1.5s;
+  z-index: 99;
+}
+/* Selectboxes */
+.select-hidden {
+  display: none;
+  visibility: hidden;
+  padding-right: 10px;
+}
+
+.select {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  color: #fff;
+  width: 220px;
+  height: 40px;
+}
+
+.select-styled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #284cff;
+  filter: hue-rotate(140deg);
+  padding: 8px 15px;
+  -moz-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  -webkit-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+.select-styled:after {
+  content: "";
+  width: 0;
+  height: 0;
+  border: 7px solid transparent;
+  border-color: #fff transparent transparent transparent;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+}
+.select-styled:hover {
+  background-color: #252525;
+  filter: hue-rotate(0deg);
+}
+.select-styled:active, .select-styled.active {
+  background-color: #252525;
+  filter: hue-rotate(0deg);
+}
+.select-styled:active:after, .select-styled.active:after {
+  top: 9px;
+  border-color: transparent transparent #fff transparent;
+}
+
+.select-options {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 999;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #284cff;
+  filter: hue-rotate(140deg);
+  max-height: 35vh;
+  overflow-y: scroll;
+}
+.select-options li {
+  margin: 0;
+  padding: 12px 0;
+  text-indent: 15px;
+  border-top: 1px solid #252525;
+  -moz-transition: all 0.15s ease-in;
+  -o-transition: all 0.15s ease-in;
+  -webkit-transition: all 0.15s ease-in;
+  transition: all 0.15s ease-in;
+}
+.select-options li:hover {
+  color: #c0392b;
+  background: #fff;
+}
+.select-options li[rel="hide"] {
+  display: none;
+}