forked from HackYourFuture/JavaScript3
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
145 lines (121 loc) · 4.91 KB
/
index.js
File metadata and controls
145 lines (121 loc) · 4.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
'use strict';
{
function fetchJSON(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status < 400) {
resolve(xhr.response);
} else {
reject(new Error(xhr.statusText));
}
}
};
xhr.send();
});
}
function createAndAppend(name, parent, options = {}) {
const elem = document.createElement(name);
parent.appendChild(elem);
if (options != null) {
Object.keys(options).forEach((key) => {
const value = options[key];
if (key === 'text') {
elem.innerText = value;
} else {
elem.setAttribute(key, value);
}
});
}
return elem;
}
function sortData(data, key) {
const sortedData = data.sort(function (a, b) {
let elem1 = a[key].toLowerCase();
let elem2 = b[key].toLowerCase();
if (elem1 < elem2) { return -1; }
if (elem1 > elem2) { return 1; }
return 0;
});
return sortedData;
}
function fillRepositoryList(dataRepositories, root) {
const select = createAndAppend('select', root, { id: 'selectRepositories' });
const sortedData = sortData(dataRepositories, 'name');
sortedData.forEach(elem => {
createAndAppend('option', select, { text: elem.name, value: elem.id });
});
//Listener For Repository
document.getElementById('selectRepositories').addEventListener("change", e => {
const rightRepDetail = document.getElementById("idRepositoryDetails");
if (rightRepDetail.hasChildNodes) {
rightRepDetail.remove();
}
detailedInfoRepository();
});
return sortedData;
}
function fillUser(dataUser, root) {
dataUser.forEach(user => {//sortedUser
const link2UserPage = createAndAppend('a', root, { href: user.html_url });
const divUser = createAndAppend('div', link2UserPage, { src: user.avatar_url, class: 'userOne' });
createAndAppend('img', divUser, { src: user.avatar_url, class: 'userImg' });
createAndAppend('p', divUser, { text: user.login, class: 'userLogin' });
createAndAppend('p', divUser, { text: user.contributions, class: 'userContribution' });
});
}
function addExtraText(parent, boldText, normalText, url) {
const pRepository = createAndAppend('p', parent, { text: "" });
if (url) {
const boldRepoLabelElem = createAndAppend('b', pRepository, { text: boldText });
const ancRepository = createAndAppend('a', boldRepoLabelElem, { href: url });
ancRepository.appendChild(document.createTextNode(normalText));
} else {
createAndAppend('b', pRepository, { text: boldText });
pRepository.appendChild(document.createTextNode(normalText));
}
}
function detailedInfoRepository() {
const index = document.getElementById('selectRepositories').selectedIndex;
const divRepDetails = createAndAppend('div', document.getElementById("root"), { class: 'clsRepositoryDetails', id: 'idRepositoryDetails' });
//Left part - Repository Description
const divLeftDetails = createAndAppend('div', divRepDetails, { class: 'clsLeftDetails' });
addExtraText(divLeftDetails, "Repository: ", sortedRepos[index].name, sortedRepos[index].html_url);
addExtraText(divLeftDetails, "Description: ", sortedRepos[index].description, null);
addExtraText(divLeftDetails, "Forks: ", sortedRepos[index].forks, null);
addExtraText(divLeftDetails, "Updated: ", sortedRepos[index].updated_at, null);
//Right Part - Repository Users
const divRightDetails = createAndAppend('div', divRepDetails, { class: 'clsRightDetails' });
fetchJSON(sortedRepos[index].contributors_url).then((dataUser) => fillUser(dataUser, divRightDetails)
).catch((err) => {
errorHandler(err.message);
});
}
function errorHandler(error) {
const root = document.getElementById('root');
const errContainer = createAndAppend('div', root, { class: 'alert-error' });
createAndAppend('p', errContainer, { text: error.message });
const rightRepDetail = document.getElementById("idRepositoryDetails");
if (rightRepDetail.hasChildNodes) {
rightRepDetail.remove();
}
}
function main(url) {
const root = document.getElementById('root');
const divRepositoryContainer = createAndAppend('div', root, { id: 'divRepositoryContainer' });
fetchJSON(url)
.then((data) => {
createAndAppend('p', divRepositoryContainer, { text: 'HYF Repositories', id: 'repositoryLabel' });
sortedRepos = fillRepositoryList(data, divRepositoryContainer);
detailedInfoRepository();
}).catch((err) => {
errorHandler(err.message);
});
}
let sortedRepos;
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
window.onload = () => main(HYF_REPOS_URL);
}