diff --git a/assets/js/app.js b/assets/js/app.js index 88cc340..0107cb9 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -21,6 +21,7 @@ const starsContainer = document.querySelector('#stars'); const avatarWrapper = document.querySelector('#avatar-wrapper'); const nameValue = document.querySelector('#name'); const urlValue = document.querySelector('#url'); +const organizationsValue = document.querySelector('#organizations'); const userLocationValue = document.querySelector('#location'); const bioValue = document.querySelector('#bio'); const rankingContainer = document.querySelector('#ranking'); @@ -124,8 +125,13 @@ function inspectFormSubmitHandler(e) { followers { totalCount }, - organizations { - totalCount + organizations(first: 100) { + totalCount, + nodes { + name, + url, + avatarUrl + } }, repositories(first: 100) { totalCount, @@ -191,6 +197,7 @@ function inspectFormSubmitHandler(e) { fillValue(userSinceDateValue, createdAtMoment.format('(DD.MM.YYYY)')); fillStatisticsContainer(userSinceContainer, createdAtMoment.fromNow(), currentTimestamp - createdAtTimestamp); fillStatisticsContainer(reposContainer, userData.repositories.totalCount); + fillValue(organizationsValue, getOrganizationsValue(userData.organizations.nodes), true); let starsCount = 0; userData.repositories.nodes.forEach(repo => { @@ -347,6 +354,14 @@ function round(num) { return Math.round(num * 10) / 10; } +function getOrganizationsValue(organizations) { + let organizationsValue = ''; + organizations.forEach((organization) => { + organizationsValue += '' + organization.name + ''; + }); + return organizationsValue; +} + function fillStatisticsContainer(container, value, rawValue) { if(typeof rawValue === 'undefined') { rawValue = value; @@ -374,7 +389,7 @@ function fillRankingContainer(container, value, maxValue) { progressBar.setAttribute('aria-valuenow', rankPercentage); fillValue(valueContainer, value + ' / ' + maxValue); } -function fillValue(container, value) { +function fillValue(container, value, allowHtml) { if(Number.isInteger(value)) { let valueAnimation = new CountUp(container, 0, value); valueAnimation.start(); @@ -382,7 +397,11 @@ function fillValue(container, value) { if(!value || value === '') { value = '-'; } - container.innerText = value; + if(allowHtml) { + container.innerHTML = value; + } else { + container.innerText = value; + } } } diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index 9dfd7c4..1ff9b49 100644 --- a/assets/scss/styles.scss +++ b/assets/scss/styles.scss @@ -172,3 +172,10 @@ $avatar-border-size: 5px; background-color: red; transition: width 2s ease-out; } +#organizations img { + width: 35px; + height: 35px; + border-radius: 3px; + margin-bottom: 3px; + margin-right: 3px; +} diff --git a/index.html b/index.html index 918a0a2..f7fa19c 100755 --- a/index.html +++ b/index.html @@ -59,6 +59,7 @@

Should we hire that dev?

-

-

-

+