Skip to content
This repository has been archived by the owner on Oct 26, 2020. It is now read-only.

Commit

Permalink
added japan race length and buttons to compare page
Browse files Browse the repository at this point in the history
  • Loading branch information
@LsHallo
LsHallo committed Oct 19, 2019
1 parent cce17fb commit 441d793
Show file tree
Hide file tree
Showing 6 changed files with 446 additions and 332 deletions.
2 changes: 1 addition & 1 deletion .idea/jsLinters/eslint.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 49 additions & 1 deletion docs/compare.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,58 @@ <h2 class="link-center d-inline-block align-middle">Compare Races</h2>
</div>
</div>
<div class="loading"></div>

<!--Toggle data points-->
<div class="form-check ml-sm-2">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="togglePoints" name="example1">
<label class="custom-control-label" for="togglePoints">Data Points</label>
</div>
</div>

<!--share button-->
<div class="ml-2">
<button data-placement="top" data-popover-content="#sharePopoverContent" data-toggle="popover" id="sharePopover" class="btn">
<img src="img/share.svg" class="darkModeIcon d-block share" alt="Share Icon" style="max-width: 30px; max-height: 30px;" data-toggle="tooltip" title="Share">
</button>

<div class="hidden d-none" id="sharePopoverContent">
<div class="popover-heading">
Share Url
</div>

<div class="popover-body">
<div class="autohide" id="shareUrlTooltip" data-toggle="tooltip-click" data-placement="top" data-original-title="Copied">
<div class="form-group">
<label class="sr-only" for="shareUrl">Share Url</label>
<input type="text" class="form-control select-focus input-min-width" id="shareUrl" readonly>
<small class="form-text text-muted">Copy to share the selected time range</small>
</div>
</div>
</div>
</div>
</div>

<!--Dark mode button-->
<button id="darkModeToggle" class="ml-1 btn" data-toggle="tooltip" data-placement="top" title="Toggle Dark Mode">
<img id="moon" class="darkModeIcon moon" alt="Moon Icon" src="img/moon.svg" style="max-width: 30px; max-height: 30px;">
<img id="sun" class="darkModeIcon sun active" alt="Sun Icon" src="img/sun.svg" style="max-width: 30px; max-height: 30px;">
</button>

<div class="mr-0 ml-auto input-group">
<div class="input-group-prepend">
<label class="input-group-text">Export</label>
</div>
<div class="input-group-append">
<input type="button" class="btn btn-outline-info" value="JSON" id="export-json">
<input type="button" class="btn btn-outline-info" value="Excel" id="export-xls">
<input type="button" class="btn btn-outline-info" value="Image" id="export-img">
</div>
</div>
</div>
</div>
<div id="helpText">
<h1>Please select 2 races an click apply to show a chart.</h1>
<h1>Please select 2 races and click apply to show a chart.</h1>
</div>
<div id="complete-chart-container">
<div id="chart-container">
Expand Down
64 changes: 7 additions & 57 deletions docs/js/chartloader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ let exportImageHandler = undefined;
//if requested data is inside one of the previous loaded data elements
let chartDataHistory = [];

//Cached jQuery selectors for improved performance
let filterButton = $('#apply-filter-button');
let filterButtonMobile = $('#apply-filter-button-mobile');
let loadingIcon = $('.loading');

function showTable(from, to) {
let cachedChartData = inChartDataHistory(from, to);
if(cachedChartData === undefined) {
Expand Down Expand Up @@ -351,9 +356,6 @@ function generateFavicon(data) {
}
}

let filterButton = $('#apply-filter-button');
let filterButtonMobile = $('#apply-filter-button-mobile');
let loadingIcon = $('.loading');
//Startup function
$(function() {
let from = new Date(new Date().setDate(new Date().getDate() - 1));
Expand Down Expand Up @@ -425,58 +427,6 @@ $(function() {
if(localStorage.getItem('darkMode') !== null) {
setDarkMode(JSON.parse(localStorage.getItem('darkMode')));
}

$('[data-toggle="tooltip"]').tooltip();

//Custom popover content
$("[data-toggle=popover]").popover({
html : true,
sanitize: false,
content: function() {
let content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
let title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
$(document).on('shown.bs.popover', function() {
$("input.select-focus").on("click", function () {
$(this).trigger("select");
document.execCommand('copy');
});
});

//Dynamically bind event to new tooltips in popover
let body = $('body');
body.tooltip({
selector: '[data-toggle=tooltip-click]',
trigger: 'click',
delay: {show: 200, hide: 400}
});
//Hide popover tooltip after 2s as it does not close automatically
$(document).on('shown.bs.tooltip', function(e) {
if($(e.target).hasClass('autohide')) {
setTimeout(function() {
$(e.target).tooltip('hide');
}, 2000);

}
});

//Add custom beforeDraw to chart so the background on exported image is colored
Chart.plugins.register({
beforeDraw: function(c) {
let ctx = c.chart.ctx;
ctx.fillStyle = $('body').css('background-color');
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});

//Add smooth transition to color effect after page has loaded to avoid distracting color fade
body.css('transition', 'background-color .4s');
$('.datepicker, .input-group-text, .form-control, .custom-control-label, h2').css('transition', 'background-color .4s, border-color .4s');
});


Expand All @@ -490,7 +440,7 @@ class ChartData {
}

findMaximum(data) {
let max = -1;
let max = -Infinity;
for(let i = 0; i < data.length; i++) {
if(parseInt(data[i][0]) > max) {
max = parseInt(data[i][0]);
Expand All @@ -500,7 +450,7 @@ class ChartData {
}

findMinimum(data) {
let min = 8640000000000000;
let min = Infinity;
for(let i = 0; i < data.length; i++) {
if(parseInt(data[i][0]) < min) {
min = parseInt(data[i][0]);
Expand Down
54 changes: 54 additions & 0 deletions docs/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,60 @@ function showPoints(show) {
}
}

$(function () {
$('[data-toggle="tooltip"]').tooltip();

//Custom popover content
$("[data-toggle=popover]").popover({
html : true,
sanitize: false,
content: function() {
let content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
let title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
$(document).on('shown.bs.popover', function() {
$("input.select-focus").on("click", function () {
$(this).trigger("select");
document.execCommand('copy');
});
});

//Dynamically bind event to new tooltips in popover
let body = $('body');
body.tooltip({
selector: '[data-toggle=tooltip-click]',
trigger: 'click',
delay: {show: 200, hide: 400}
});
//Hide popover tooltip after 2s as it does not close automatically
$(document).on('shown.bs.tooltip', function(e) {
if($(e.target).hasClass('autohide')) {
setTimeout(function() {
$(e.target).tooltip('hide');
}, 2000);

}
});

//Add custom beforeDraw to chart so the background on exported image is colored
Chart.plugins.register({
beforeDraw: function(c) {
let ctx = c.chart.ctx;
ctx.fillStyle = $('body').css('background-color');
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});

//Add smooth transition to color effect after page has loaded to avoid distracting color fade
body.css('transition', 'background-color .4s');
$('.datepicker, .input-group-text, .form-control, .custom-control-label, h2').css('transition', 'background-color .4s, border-color .4s');
});

//Extend jQuery with custom function
$.fn.animateWidth = function (width, opacity) {
this.animate({
Expand Down
82 changes: 72 additions & 10 deletions docs/js/compare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ let races = {
'jpn': {
id: 17,
name: 'Japan',
start: 1570943400000
start: 1570943400000,
length: '1:21:46'
},
'mex': {
id: 18,
Expand Down Expand Up @@ -207,31 +208,51 @@ function showTable(selectedRaces) {
lineChart.update();
setDarkMode(darkModeEnabled());
lineChart.update();

compareBtn.prop('disabled', false);
loading.animateWidth(0, 0);

updateShareUrl(selectedRaces);
}
}

//Update from and get in the url bar
function updateShareUrl(selectedRaces) {
let url = new URL(window.location);
url.search = ""; //remove all previous params
for(let i = 0; i < selectedRaces.length; i++) {
url.searchParams.set('r' + i, selectedRaces[i].short);
}
$('#shareUrl').attr('value', url.href);
$('#sharePopover').popover('hide');
}

function getSelectedRaces() {
let compareSource = $('#compareSource');
let compareTarget = $('#compareTarget');
let source = compareSource.val();
let target = compareTarget.val();
return [races[source], races[target]];

let sourceObj = races[source];
sourceObj.short = source;
let targetObj = races[target];
targetObj.short = target;
return [sourceObj, targetObj];
}

function fillSelectOptions() {
let compareSource = $('#compareSource');
let compareTarget = $('#compareTarget');
let completedRaces = [];
for(let shorthand in races) {
let race = races[shorthand];
let name = race.name;
let length = parseTime(race.length);
let start = race.start;
let disabled = true;

let now = new Date().getTime();
if(now > start + length * 1000) {
if(now > start) {
completedRaces.push({index: shorthand, start: start});
disabled = false;
}
$('<option>', {
Expand All @@ -240,7 +261,21 @@ function fillSelectOptions() {
text: name
}).appendTo([compareSource, compareTarget]);
}
compareTarget.val('rus');

//sort completed races by start time
completedRaces.sort(function(a, b) {
if(a.start > b.start) {
return 1;
} else if(b.start > a.start) {
return -1;
}
return 0;
});
if(completedRaces.length > 1) {
compareSource.val(completedRaces[completedRaces.length - 2].index);
compareTarget.val(completedRaces[completedRaces.length - 1].index);
}

}

/**
Expand All @@ -265,27 +300,34 @@ function parseTime(time) {
}

function getDurationOfRaces() {
let oneMissing = false;
let requestPending = false;
for(let short in races) {
if (races[short].start < new Date().getTime() && races[short].length === undefined) {
oneMissing = true;
requestPending = true;
let ergastUrl = "https://ergast.com/api/f1/2019/{{race}}/results.json";
let raceNum = races[short].id;
let requestUrl = ergastUrl.replace('{{race}}', raceNum);
$.get({
url: requestUrl,
success: function (data) {
let time = data['MRData']['RaceTable']['Races'][0]['Results'][0]['Time']['time'];
console.log(races[short].length);
races[short].length = time.split('.')[0].toString();
console.log(races[short].length);
this.duration = parseTime(time) / 60;
$('#compareBtn').prop('disabled', false);
requestPending = false;
},
error: function(err) {
console.error("Request to ergast api failed. Assuming race took 2h maximum time.");
//Should ergast be not available fill with maximum time a race needs
races[short].length = '2:00:00';
this.duration = 120;
$('#compareBtn').prop('disabled', false);
requestPending = false;
}
});
}
}
if(!oneMissing) {
if(!requestPending) {
$('#compareBtn').prop('disabled', false);
}
}
Expand All @@ -295,10 +337,30 @@ $(function() {
$('#compareBtn').on('click', function () {
showTable(getSelectedRaces());
});
$('#togglePoints').on('click', function () {
showPoints($(this).prop('checked'));
});
$('#darkModeToggle').on('click', function () {
setDarkMode(!darkModeEnabled());
});
getDurationOfRaces();
setDarkMode(darkModeEnabled());

let params = handleGetParameters();
if(params[0] !== null && params[1] !== null) {
let r1 = races[params[0]];
r1.short = params[0];
let r2 = races[params[1]];
r2.short = params[1];
let selectedRaces = [r1, r2];
showTable(selectedRaces);
}
});

function handleGetParameters() {
let url = new URL(window.location);
return [url.searchParams.get('r0'), url.searchParams.get('r1')];
}

class RaceData {
constructor(name, data, start) {
Expand Down
Loading

0 comments on commit 441d793

Please sign in to comment.