active-forks/js/main.js

149 lines
3.8 KiB
JavaScript
Raw Normal View History

window.addEventListener('load', () => {
2019-04-10 06:13:48 +02:00
initDT(); // Initialize the DatatTable and window.columnNames variables
2019-04-10 06:13:48 +02:00
const repo = getRepoFromUrl();
2019-04-10 06:13:48 +02:00
if (repo) {
document.getElementById('q').value = repo;
fetchData();
}
});
2019-04-10 06:13:48 +02:00
document.getElementById('form').addEventListener('submit', e => {
e.preventDefault();
fetchData();
});
2017-03-30 20:17:39 +02:00
2017-03-30 19:44:00 +02:00
function fetchData() {
2019-04-10 06:13:48 +02:00
const repo = document.getElementById('q').value;
const re = /[-_\w]+\/[-_.\w]+/;
const urlRepo = getRepoFromUrl();
if (!urlRepo || urlRepo !== repo) {
window.history.pushState('', '', `#${repo}`);
}
if (re.test(repo)) {
fetchAndShow(repo);
} else {
showMsg(
'Invalid GitHub repository! Format is <username>/<repo>',
'danger'
);
}
2017-03-30 19:44:00 +02:00
}
2019-04-10 06:13:48 +02:00
function updateDT(data) {
// Remove any alerts, if any:
if ($('.alert')) $('.alert').remove();
// Format dataset and redraw DataTable. Use second index for key name
const forks = [];
for (let fork of data) {
fork.repoLink = `<a href="https://github.com/${fork.full_name}">Link</a>`;
fork.ownerName = fork.owner.login;
forks.push(fork);
}
const dataSet = forks.map(fork =>
window.columnNamesMap.map(colNM => fork[colNM[1]])
);
window.forkTable
.clear()
.rows.add(dataSet)
.draw();
}
function initDT() {
2019-04-10 06:13:48 +02:00
// Create ordered Object with column name and mapped display name
window.columnNamesMap = [
// [ 'Repository', 'full_name' ],
['Link', 'repoLink'], // custom key
['Owner', 'ownerName'], // custom key
['Name', 'name'],
['Branch', 'default_branch'],
['Stars', 'stargazers_count'],
['Forks', 'forks'],
['Open Issues', 'open_issues_count'],
['Size', 'size'],
['Last Push', 'pushed_at'],
];
// Sort by stars:
const sortColName = 'Stars';
const sortColumnIdx = window.columnNamesMap
.map(pair => pair[0])
.indexOf(sortColName);
// Use first index for readable column name
// we use moment's fromNow() if we are rendering for `pushed_at`; better solution welcome
window.forkTable = $('#forkTable').DataTable({
columns: window.columnNamesMap.map(colNM => {
return {
title: colNM[0],
render:
colNM[1] === 'pushed_at'
? (data, type, _row) => {
if (type === 'display') {
return moment(data).fromNow();
}
return data;
}
2019-04-10 06:13:48 +02:00
: null,
};
}),
order: [[sortColumnIdx, 'desc']],
});
}
2019-04-10 06:13:48 +02:00
function fetchAndShow(repo) {
repo = repo.replace('https://github.com/', '');
repo = repo.replace('http://github.com/', '');
repo = repo.replace('.git', '');
fetch(
`https://api.github.com/repos/${repo}/forks?sort=stargazers&per_page=100`
)
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => {
console.log(data);
updateDT(data);
})
.catch(error => {
const msg =
error.toString().indexOf('Forbidden') >= 0
? 'Error: API Rate Limit Exceeded'
: error;
showMsg(`${msg}. Additional info in console`, 'danger');
console.error(error);
});
2017-03-30 19:44:00 +02:00
}
function showMsg(msg, type) {
2019-04-10 06:13:48 +02:00
let alert_type = 'alert-info';
2019-04-10 06:13:48 +02:00
if (type === 'danger') {
alert_type = 'alert-danger';
}
2019-04-10 06:13:48 +02:00
document.getElementById('footer').innerHTML = '';
2019-04-10 06:13:48 +02:00
document.getElementById('data-body').innerHTML = `
<div class="alert ${alert_type} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
${msg}
</div>
`;
2017-03-30 19:44:00 +02:00
}
function getRepoFromUrl() {
2019-04-10 06:13:48 +02:00
const urlRepo = location.hash && location.hash.slice(1);
2019-04-10 06:13:48 +02:00
return urlRepo && decodeURIComponent(urlRepo);
2017-03-30 19:44:00 +02:00
}