+
+
+
diff --git a/code/script.js b/code/script.js
index db3bcfdf..2d2ecf70 100644
--- a/code/script.js
+++ b/code/script.js
@@ -3,13 +3,34 @@ const API_USER = `https://api.github.com/users/${username}`
const API_REPOS = `https://api.github.com/users/${username}/repos` // const or let ?
const profile = document.getElementById('profile')
const projects = document.getElementById('projects')
+const projects2 = document.getElementById('projects2')
+
+
+
+
+function openCity(evt, cityName) {
+ var i, tabcontent, tablinks
+ tabcontent = document.getElementsByClassName("tabcontent")
+ for (i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none"
+ }
+ tablinks = document.getElementsByClassName("tablinks")
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "")
+ }
+ document.getElementById(cityName).style.display = "block"
+ evt.currentTarget.className += " active"
+}
+
+
+
const createProfile = () => {
- fetch(API_USER)
+ fetch(API_USER, options)
.then(res => res.json())
.then(data => {
profile.innerHTML = `
@@ -19,74 +40,194 @@ const createProfile = () => {
})
}
+const addCommits = (repo) => {
+ fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options)
+ .then(res => res.json())
+ .then(data => {
+ const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre')
+ // document.getElementById(repo.name).innerHTML += `
+ // Number of commits from the user: ${userCommits.length} on a total of ${data.length}
+ //Commit messages:
+ // ` + + // TEST + document.getElementById(`${repo.name}-repoInfos`).innerHTML += ` +Number of commits from the user: ${userCommits.length} on a total of ${data.length}
+ ` + + + const userFiveLastCommits = userCommits.slice(1, 5) + console.log(userFiveLastCommits) + userFiveLastCommits.forEach(item => { + // document.getElementById(repo.name).innerHTML += ` + //
+
+
+`
+
+
+
+
+ // document.getElementById(repo.name).innerHTML += `
+ //
+ //
+ //
+ // `
+ drawLanguagesChart(htmlPercentage, cssPercentage, jsPercentage, idChart)
+ })
+}
+
+
+// À ARRANGER
+const addPullComments = (repo) => {
+ fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`, options)
+ .then(res => res.json())
+ .then(data => {
+ const userPulls = data.filter((item) => item.user.login === 'nadialefebvre')
+ userPulls.forEach(pull => {
+ fetch(pull.review_comments_url)
+ .then(res => res.json())
+ .then(data => {
+ console.log(repo.name)
+ console.log(data)
+ data.forEach(comment => {
+ // document.getElementById(repo.name).innerHTML += `
+ // Comments from PR: ${comment.body}
+ // ` + // TEST + document.getElementById(`${repo.name}-repoPullComments`).innerHTML = ` +
+ //
+ // `
+
+
+
+
+ // TEST
projects.innerHTML += `
- Name: ${repo.name}
+ //URL: ${repo.name}
+ //Default branch: ${repo.default_branch}
+ //Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
+ //
- ${item.commit.message}
- `
- })
- })
+ document.getElementById(`${repo.name}-repoInfos`).innerHTML += `
+ ${item.commit.message}
+ `
})
})
}
@@ -81,8 +123,7 @@ const addLanguageChart = (repo) => {
fetch(`https://api.github.com/repos/${username}/${repo.name}/languages`, options)
.then(res => res.json())
.then(languages => {
-
- // gros paquet de gogosses pour calculer les pourcentages : reste à ajouter le % maintenant...
+ // many variables for percentage calculation : needs to find a way to add % now...
const html = languages.HTML === undefined ? 0 : languages.HTML
const css = languages.CSS === undefined ? 0 : languages.CSS
const js = languages.JavaScript === undefined ? 0 : languages.JavaScript
@@ -92,142 +133,88 @@ const addLanguageChart = (repo) => {
const idChart = `${repo.name}Chart`
- // TEST
document.getElementById(`${repo.name}-repoLanguages`).innerHTML += `
`
-
-
-
- // document.getElementById(repo.name).innerHTML += `
- // ${comment.body}
-`
-
-
- })
+ const reviewID = data[0].pull_request_review_id
+ addCodeReviewInfos(repo, pull, reviewID)
})
})
})
}
+const addCodeReviewInfos = (repo, pull, reviewID) => {
-
-
-const createRepoCard = () => {
- fetch(API_REPOS, options) // options object is passed as 2nd argument to fetch() function. // TO REMOVE BEFORE GIT PUSH
+ fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls/${pull.number}/reviews/${reviewID}`)
.then(res => res.json())
.then(data => {
- const filteredRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-'))
- drawProjectsChart(filteredRepos.length)
- filteredRepos.forEach(repo => {
- const options = { day: 'numeric', month: 'long', year: 'numeric' }
- // projects.innerHTML += `
- //
+
+
diff --git a/code/script.js b/code/script.js
index e3898f15..74343534 100644
--- a/code/script.js
+++ b/code/script.js
@@ -3,6 +3,8 @@ const API_USER = `https://api.github.com/users/${username}`
const API_REPOS = `https://api.github.com/users/${username}/repos`
const profile = document.getElementById('profile')
const projects = document.getElementById('projects')
+const sortMenu = document.getElementById('sortMenu')
+
@@ -25,6 +27,7 @@ const openTab = (event, tabName) => {
+
const createProfile = () => {
fetch(API_USER, options)
.then(res => res.json())
@@ -36,18 +39,36 @@ const createProfile = () => {
})
}
-const createRepoCard = () => {
+const createRepoCard = (reposToUse = null) => {
fetch(API_REPOS, options) // options object is passed as 2nd argument to fetch() function. // TO REMOVE BEFORE GIT PUSH
.then(res => res.json())
.then(data => {
- const filteredRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-'))
-console.log(filteredRepos)
- // sortByDate(filteredRepos)
- // sortByReverseDate(filteredRepos)
- // sortByReverseName(filteredRepos)
- // sortByCommits()
-
- drawProjectsChart(filteredRepos.length)
+ const selectSorting = () => {
+ console.log(sortMenu.value)
+ if (sortMenu.value === 'Z to A') {
+ sortByNameZA(filteredRepos)
+ } else if (sortMenu.value === 'Recent to old') {
+ sortByDateRecentOld(filteredRepos)
+ } else if (sortMenu.value === 'Old to recent') {
+ sortByDateOldRecent(filteredRepos)
+ } else {
+ sortByNameAZ(filteredRepos)
+ }
+ console.log(filteredRepos)
+ projects.innerHTML = ''
+ createRepoCard(filteredRepos)
+ }
+
+ let filteredRepos
+ if (reposToUse === null)
+ {
+ filteredRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-'))
+ sortMenu.addEventListener('change', selectSorting)
+ } else {
+ filteredRepos = reposToUse
+ }
+
+ //drawProjectsChart(filteredRepos.length)
filteredRepos.forEach(repo => {
const options = { day: 'numeric', month: 'long', year: 'numeric' }
projects.innerHTML += `
@@ -109,8 +130,9 @@ const addCommits = (repo) => {
Repo name: ${repo.name}
-Repo URL: ${repo.name}
-Default branch: ${repo.default_branch}
-Repo last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
+
+
`
- fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`)
- .then(res => res.json())
- .then(data => {
- console.log(data)
- const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre')
- document.getElementById(repo.name).innerHTML += `
-
+
+
+
+
+
+
+
+
+
+ Name: ${repo.name}
+ +
+
+
+ Languages
+ +
+
+
+ Commit messages
+ +
+
Code review comments:
+(none)
+ Number of commits from the user: ${userCommits.length} on a total of ${data.length}
-Commit messages:
- ` - userCommits.forEach(item => { - document.getElementById(repo.name).innerHTML += ` -URL: ${repo.name}
+Default branch : ${repo.default_branch}
+Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
+ ` + + // Get the element with id="defaultOpen" and click on it + document.getElementById(`${repo.name}-defaultOpen`).click() + + + + + + addCommits(repo) + addPullComments(repo) + addLanguageChart(repo) + + }) }) } -createProfile() -createRepoCard() -//Remember to pass along your filtered repos as an argument when -//you are calling this function -const getPullRequests = (repos) => { - //Get all the PRs for each project. - repos.forEach(repo => { - fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls') - .then(res => res.json()) - .then(data => { - //TODO - //1. Find only the PR that you made by comparing pull.user.login - // with repo.owner.login - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument - }) - }) - } +createProfile() +createRepoCard() diff --git a/code/style.css b/code/style.css index 0bd4c055..498f475d 100644 --- a/code/style.css +++ b/code/style.css @@ -2,8 +2,80 @@ body { background: #FFECE9; } +img { + max-width: 50px; +} + .repo { border: solid 1px red; padding: 10px; margin-bottom: 10px; +} + +.chart-container { + width: 50%; + min-width: 100px; + max-width: 200px; +} + +.chart-container.main { + width: 100%; + min-width: 100px; + max-width: 400px; + +} + +.projects { + display: flex; + flex-direction: column; +} + + + +* {box-sizing: border-box} +body {font-family: "Lato", sans-serif;} + +/* Style the tab */ +.tab { + float: left; + border: 1px solid #ccc; + background-color: #f1f1f1; + width: 30%; + height: 300px; +} + +/* Style the buttons inside the tab */ +.tab button { + display: block; + background-color: inherit; + color: black; + padding: 22px 16px; + width: 100%; + border: none; + outline: none; + text-align: left; + cursor: pointer; + transition: 0.3s; + font-size: 17px; +} + +/* Change background color of buttons on hover */ +.tab button:hover { + background-color: #ddd; +} + +/* Create an active/current "tab button" class */ +.tab button.active { + background-color: #ccc; +} + +/* Style the tab content */ +.tabcontent { + float: left; + background-color: #f1f1f1; + padding: 0px 12px; + border: 1px solid #ccc; + width: 70%; + border-left: none; + height: 300px; } \ No newline at end of file From 77ca55ecb26a256d88d4e950a2c9d2487ad24529 Mon Sep 17 00:00:00 2001 From: Nadia Lefebvre <95084122+nadialefebvre@users.noreply.github.com> Date: Sun, 20 Feb 2022 18:00:48 +0100 Subject: [PATCH 05/28] added some sorting options --- code/script.js | 269 +++++++++++++++++++++++-------------------------- code/style.css | 4 +- 2 files changed, 131 insertions(+), 142 deletions(-) diff --git a/code/script.js b/code/script.js index 2d2ecf70..e3898f15 100644 --- a/code/script.js +++ b/code/script.js @@ -1,34 +1,30 @@ const username = 'nadialefebvre' const API_USER = `https://api.github.com/users/${username}` -const API_REPOS = `https://api.github.com/users/${username}/repos` // const or let ? +const API_REPOS = `https://api.github.com/users/${username}/repos` const profile = document.getElementById('profile') const projects = document.getElementById('projects') -const projects2 = document.getElementById('projects2') -function openCity(evt, cityName) { - var i, tabcontent, tablinks - tabcontent = document.getElementsByClassName("tabcontent") - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none" +const openTab = (event, tabName) => { + let i + let tabContent = event.currentTarget.parentNode.parentNode.getElementsByClassName("tab-content") + for (i = 0; i < tabContent.length; i++) { + tabContent[i].style.display = "none" } - tablinks = document.getElementsByClassName("tablinks") - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" active", "") + let tabButton = event.currentTarget.parentNode.getElementsByClassName("tab-button") + for (i = 0; i < tabButton.length; i++) { + tabButton[i].className = tabButton[i].className.replace(" active", "") } - document.getElementById(cityName).style.display = "block" - evt.currentTarget.className += " active" + document.getElementById(tabName).style.display = "block" + event.currentTarget.className += " active" } - - - const createProfile = () => { fetch(API_USER, options) .then(res => res.json()) @@ -40,38 +36,84 @@ const createProfile = () => { }) } -const addCommits = (repo) => { - fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options) +const createRepoCard = () => { + fetch(API_REPOS, options) // options object is passed as 2nd argument to fetch() function. // TO REMOVE BEFORE GIT PUSH .then(res => res.json()) .then(data => { - const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre') - // document.getElementById(repo.name).innerHTML += ` - //Number of commits from the user: ${userCommits.length} on a total of ${data.length}
- //Commit messages:
- // ` + const filteredRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-')) +console.log(filteredRepos) + // sortByDate(filteredRepos) + // sortByReverseDate(filteredRepos) + // sortByReverseName(filteredRepos) + // sortByCommits() - // TEST - document.getElementById(`${repo.name}-repoInfos`).innerHTML += ` -Number of commits from the user: ${userCommits.length} on a total of ${data.length}
- ` + drawProjectsChart(filteredRepos.length) + filteredRepos.forEach(repo => { + const options = { day: 'numeric', month: 'long', year: 'numeric' } + projects.innerHTML += ` +
+ ${item.commit.message}
- // `
+
- // TEST
- document.getElementById(`${repo.name}-repoCommitMessages`).innerHTML += `
- ${item.commit.message}
- `
+
+
+
+
+ `
+ document.getElementById(`${repo.name}-repoInfos`).innerHTML += `
+
+
+
+
+
+
+
+
- const userFiveLastCommits = userCommits.slice(1, 5)
- console.log(userFiveLastCommits)
- userFiveLastCommits.forEach(item => {
- // document.getElementById(repo.name).innerHTML += `
- // Name: ${repo.name}
+ +URL: ${repo.name}
+Default branch : ${repo.default_branch}
+Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
+ ` + // Get the element with id="defaultOpen" and click on it + document.getElementById(`${repo.name}-defaultOpen`).click() + addCommits(repo) + fetchPullRequest(repo) + addLanguageChart(repo) + }) + }) +} +const addCommits = (repo) => { + fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options) + .then(res => res.json()) + .then(data => { + // why item.author.login === username doesn't work here?? + const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre') + + document.getElementById(`${repo.name}-repoInfos`).innerHTML += ` +Number of commits from the user: ${userCommits.length} on a total of ${data.length}
+ ` + + const userFiveLastCommits = userCommits.slice(1, 5) + userFiveLastCommits.forEach(item => { + document.getElementById(`${repo.name}-repoCommitMessages`).innerHTML += ` +
- //
- //
- // `
drawLanguagesChart(htmlPercentage, cssPercentage, jsPercentage, idChart)
})
}
-
-
-// À ARRANGER
-const addPullComments = (repo) => {
- fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`, options)
+const fetchPullRequest = (repo) => {
+ // fix it because only 1 page of 30 PR is fetched, link: https://docs.github.com/en/rest/reference/pulls#list-pull-requests (added ?per_page=100&page=1 to URL, but it doesn't fix the problem for when the PR will go to page 2-3-4...)
+ fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100&page=1`, options)
.then(res => res.json())
.then(data => {
- const userPulls = data.filter((item) => item.user.login === 'nadialefebvre')
+ const userPulls = data.filter((item) => item.user.login === username)
userPulls.forEach(pull => {
fetch(pull.review_comments_url)
.then(res => res.json())
.then(data => {
- console.log(repo.name)
- console.log(data)
- data.forEach(comment => {
- // document.getElementById(repo.name).innerHTML += `
- // Comments from PR: ${comment.body}
- // ` - - - // TEST - document.getElementById(`${repo.name}-repoPullComments`).innerHTML = ` -
- //
- // `
-
-
-
-
- // TEST
- projects.innerHTML += `
- Name: ${repo.name}
- //URL: ${repo.name}
- //Default branch: ${repo.default_branch}
- //Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
- //
-
- `
-
- document.getElementById(`${repo.name}-repoInfos`).innerHTML += `
-
-
-
-
-
-
-
-
-
-
- Name: ${repo.name}
- -
-
-
- Languages
- -
-
-
- Commit messages
- -
-
- Code review comments:
-(none)
- URL: ${repo.name}
-Default branch : ${repo.default_branch}
-Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
- ` - - // Get the element with id="defaultOpen" and click on it - document.getElementById(`${repo.name}-defaultOpen`).click() - - - - - - addCommits(repo) - addPullComments(repo) - addLanguageChart(repo) - - - }) + document.getElementById(`${repo.name}-repoPullComments`).innerHTML = ` +${data.body}
+ + ` }) } +const sortByDate = (filteredRepos) => { + filteredRepos.sort(function (a, b) { + return new Date(a.created_at) - new Date(b.created_at) + }) +} +const sortByReverseDate = (filteredRepos) => { + filteredRepos.sort(function (a, b) { + return new Date(b.created_at) - new Date(a.created_at) + }) +} +const sortByReverseName = (filteredRepos) => { + filteredRepos.sort(function (a, b) { + var nameA = a.name.toUpperCase() // ignore upper and lowercase + var nameB = b.name.toUpperCase() // ignore upper and lowercase + if (nameA > nameB) { + return -1 + } + if (nameA < nameB) { + return 1 + } + // names must be equal + return 0 + }) +} +// const sortByCommits = () => { +// fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options) +// .then(res => res.json()) +// .then(data => { +// // why item.author.login === username doesn't work here?? +// const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre') +// console.log(userCommits.length) - +// userCommits.sort(function (a, b) { +// return a.length - b.length +// }) +// }) +// } createProfile() -createRepoCard() +createRepoCard() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 498f475d..7d69bdbf 100644 --- a/code/style.css +++ b/code/style.css @@ -42,6 +42,7 @@ body {font-family: "Lato", sans-serif;} background-color: #f1f1f1; width: 30%; height: 300px; + margin-bottom: 20px; } /* Style the buttons inside the tab */ @@ -70,7 +71,7 @@ body {font-family: "Lato", sans-serif;} } /* Style the tab content */ -.tabcontent { +.tab-content { float: left; background-color: #f1f1f1; padding: 0px 12px; @@ -78,4 +79,5 @@ body {font-family: "Lato", sans-serif;} width: 70%; border-left: none; height: 300px; + overflow: auto; } \ No newline at end of file From af62a90ecdc522aaba8d6cbbeaacc0db031ae54f Mon Sep 17 00:00:00 2001 From: Nadia Lefebvre <95084122+nadialefebvre@users.noreply.github.com> Date: Sun, 20 Feb 2022 21:02:40 +0100 Subject: [PATCH 06/28] added a dropdown for selecting sorting option --- code/index.html | 7 +++ code/script.js | 112 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 90 insertions(+), 29 deletions(-) diff --git a/code/index.html b/code/index.html index 5407a61b..1ba1bf1b 100644 --- a/code/index.html +++ b/code/index.html @@ -27,6 +27,13 @@GitHub Tracker
Number of commits from the user: ${userCommits.length} on a total of ${data.length}
` - const userFiveLastCommits = userCommits.slice(1, 5) - userFiveLastCommits.forEach(item => { + // const userFiveLastCommits = userCommits.slice(1, 5) + // userFiveLastCommits.forEach(item => { + userCommits.forEach(item => { document.getElementById(`${repo.name}-repoCommitMessages`).innerHTML += `GitHub Tracker
-
-
-
+ GitHub Tracker
+
+
+
+ ${data.name}
-${data.name}
` }) } @@ -44,7 +46,6 @@ const createRepoCard = (reposToUse = null) => { .then(res => res.json()) .then(data => { const selectSorting = () => { - console.log(sortMenu.value) if (sortMenu.value === 'Z to A') { sortByNameZA(filteredRepos) } else if (sortMenu.value === 'Recent to old') { @@ -54,60 +55,28 @@ const createRepoCard = (reposToUse = null) => { } else { sortByNameAZ(filteredRepos) } - console.log(filteredRepos) projects.innerHTML = '' createRepoCard(filteredRepos) } let filteredRepos - if (reposToUse === null) - { + if (reposToUse === null) { filteredRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-')) + drawProjectsChart(filteredRepos.length) sortMenu.addEventListener('change', selectSorting) } else { filteredRepos = reposToUse - } + } - //drawProjectsChart(filteredRepos.length) filteredRepos.forEach(repo => { - const options = { day: 'numeric', month: 'long', year: 'numeric' } - projects.innerHTML += ` -
-
- `
+ setRepoCardStructure(repo)
+ const options = { day: 'numeric', month: 'long', year: 'numeric' }
document.getElementById(`${repo.name}-repoInfos`).innerHTML += `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Name: ${repo.name}
- -URL: ${repo.name}
Default branch : ${repo.default_branch}
Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}
` - // Get the element with id="defaultOpen" and click on it document.getElementById(`${repo.name}-defaultOpen`).click() @@ -118,6 +87,38 @@ const createRepoCard = (reposToUse = null) => { }) } +const setRepoCardStructure = (repo) => { + projects.innerHTML += ` +
+
+ `
+}
const addCommits = (repo) => {
fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options)
@@ -127,7 +128,7 @@ const addCommits = (repo) => {
const userCommits = data.filter((item) => item.commit.author.name === 'Nadia Lefebvre')
document.getElementById(`${repo.name}-repoInfos`).innerHTML += `
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name: ${repo.name}
+ +Number of commits from the user: ${userCommits.length} on a total of ${data.length}
+Number of commits for this fork: ${userCommits.length} on a total of ${data.length}
` // const userFiveLastCommits = userCommits.slice(1, 5) @@ -145,23 +146,20 @@ const addLanguageChart = (repo) => { fetch(`https://api.github.com/repos/${username}/${repo.name}/languages`, options) .then(res => res.json()) .then(languages => { - // many variables for percentage calculation : needs to find a way to add % now... + // variables so data will be 0 and not undefined if = 0 const html = languages.HTML === undefined ? 0 : languages.HTML const css = languages.CSS === undefined ? 0 : languages.CSS const js = languages.JavaScript === undefined ? 0 : languages.JavaScript - const htmlPercentage = Math.round(html / (html + css + js) * 1000) / 10 - const cssPercentage = Math.round(css / (html + css + js) * 1000) / 10 - const jsPercentage = Math.round(js / (html + css + js) * 1000) / 10 const idChart = `${repo.name}Chart` document.getElementById(`${repo.name}-repoLanguages`).innerHTML += ` -
+
`
- drawLanguagesChart(htmlPercentage, cssPercentage, jsPercentage, idChart)
+ drawLanguagesChart(html, css, js, idChart)
})
}
@@ -190,14 +188,14 @@ const addCodeReviewInfos = (repo, pull, reviewID) => {
.then(data => {
document.getElementById(`${repo.name}-repoPullComments`).innerHTML = `
Ixo*8s{qT?%n{+AFW4ThiQK0v(&qeCtr_8
z*=Lo%Vf#~jeaboUTD1o>WAfS!`mO9i&a3Mb66hp9lZDlRmHd-YDJo)jyYd_bxQ?K~
zTH>vBA>%=k$z?ma?1ju>oo7~dD%Y*WY^Q83mbANXKbQ|^4i$oT*9(T&I;ysD8c)gd
zDjM=p#M@E1Rn?z}jfZdD;C^<{|GnWH(V1yZbD`;wie{ksYu-N-o>27*`R3neg#Ly7
z(Iyi6&&dBc@HINZ{ml7>DwUr}rvJGayadPIUagv+{8-a_&v4oF({;2|HJ(iQG=H$C
z1&(ihOqNme)&ua{Pfaw$i|^xHd5o|nQ$D>r14Lo!_AMCcYlT0$yf8i%oRbVOu}!k&
zQ~Y!Ga4|^!P!^0AH--nHamUlDwI@rych?5+mF7bIyKDIT?#&ND$H8}?$6XHHt}+c_l=vzy>*!Azh*u4F~7HHeQDQ0hIb+yRv?TmqV9BP~X
z)iH1?^$>Jn>`U>t(RYEx(of$>@DnXtkM&O9NpP4|=dQjNzkB7loY`$?GZVJijn4nA
z2Ft`OMn?`|=GZqQ_Pp$Jq?^>xrn7&VB+S)>o%Ehr*d@K9zGa({`ZB9ce|wLo&vf3a
z@vw{W`2H?!bmT944FdS>Z@_ni*ApM)n8FtDd?oYrxGRun{(MF9*K|%H%{$Qi4UfO1
zv1GNs9Q_2(ho^MAjzo0|@=c
zevdF~L&AQ9{g|~CJvw1O!hZDZ!fc$E7Tzflgg|JMc%Q!f@`p5;(T$L0wFw`+(=L5+0SP{L`4bL-Bik;TpKmSOt{J
zV^sbb9fH<<&O7e)ROr9y{dLfZc~6~R6hTK-0o3L{D(kbM_(|xg*#pB}KA@b*zb^g^
zm)nm+=aPBhkCnXk
z*B=0X*{kw@qm_9Duf2AeA^OkcGswAof((7m{QNqz^9OkDNv7s+D05Keb0N}sKg{RP
QVD1U!&xj&4U_}G}0`C
-
+
+
- Project GitHub Tracker
+
+ Nadia Lefebvre - GitHub Tracker
-
+
${data.body}
- + ` }) } const sortByNameAZ = (filteredRepos) => { - filteredRepos.sort(function(a, b) { + filteredRepos.sort(function (a, b) { const nameA = a.name.toLowerCase() // ignore upper and lowercase const nameB = b.name.toLowerCase() // ignore upper and lowercase if (nameA < nameB) { @@ -212,7 +210,7 @@ const sortByNameAZ = (filteredRepos) => { } const sortByNameZA = (filteredRepos) => { - filteredRepos.sort(function(a, b) { + filteredRepos.sort(function (a, b) { const nameA = a.name.toLowerCase() // ignore upper and lowercase const nameB = b.name.toLowerCase() // ignore upper and lowercase if (nameA > nameB) { @@ -227,33 +225,19 @@ const sortByNameZA = (filteredRepos) => { } const sortByDateRecentOld = (filteredRepos) => { - filteredRepos.sort(function(a, b) { + filteredRepos.sort(function (a, b) { return new Date(b.created_at) - new Date(a.created_at) }) } const sortByDateOldRecent = (filteredRepos) => { - filteredRepos.sort(function(a, b) { + filteredRepos.sort(function (a, b) { return new Date(a.created_at) - new Date(b.created_at) }) } -// const selectSorting = (filteredRepos) => { -// console.log(sortMenu.value) -// if (sortMenu.value === 'Z to A') { -// sortByNameZA(filteredRepos) -// } else if (sortMenu.value === 'Recent to old') { -// sortByDateRecentOld(filteredRepos) -// } else if (sortMenu.value === 'Old to recent') { -// sortByDateOldRecent(filteredRepos) -// } else { -// sortByNameAZ(filteredRepos) -// } -// } - - -createProfile() +createHeader() createRepoCard() diff --git a/code/style.css b/code/style.css index 7d69bdbf..1c7c011d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,55 +1,107 @@ +* { + box-sizing: border-box; +} + body { - background: #FFECE9; + font-family: "Lato", sans-serif; + background-color: #112d4e; + color: white; + padding: 20px; } -img { - max-width: 50px; +a { + color: #3f72af; + font-weight: bold; + text-decoration: none; } -.repo { - border: solid 1px red; - padding: 10px; - margin-bottom: 10px; +.main-page { + display: flex; + flex-direction: column; + justify-content: center; } -.chart-container { - width: 50%; - min-width: 100px; - max-width: 200px; +.header-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } -.chart-container.main { - width: 100%; - min-width: 100px; - max-width: 400px; +.header-box .title { + background-color: #DBE2EF; + padding: 20px; + color: #3f72af; + border-radius: 4px; +} +.user-profile { + text-align: center; } -.projects { +.user-profile img { + max-width: 200px; + border-radius: 50%; +} + +.sorting-dropdown { display: flex; - flex-direction: column; + flex-direction: row; + justify-content: flex-end; } +select { + display: flex; + align-self: center; + border: transparent; + border-radius: 2px; + outline: none; + font-size: inherit; + color: #112d4e; + width: fit-content; + text-align: center; + margin-bottom: 20px; +} + +.languages-chart { + width: 75%; + /* min-width: 250px; + max-width: 300px; */ +} + +.projects-chart { + width: 275px; + /* width: auto; */ + margin-bottom: 20px; +} +.projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + color: #112d4e; +} -* {box-sizing: border-box} -body {font-family: "Lato", sans-serif;} +.tab-card { + margin: 20px; + width: 500px; +} /* Style the tab */ .tab { float: left; - border: 1px solid #ccc; - background-color: #f1f1f1; + /* border: 1px solid #3f72af; */ + background-color: #f9f7f7; width: 30%; height: 300px; - margin-bottom: 20px; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; - color: black; + color: #112d4e; padding: 22px 16px; width: 100%; border: none; @@ -62,22 +114,46 @@ body {font-family: "Lato", sans-serif;} /* Change background color of buttons on hover */ .tab button:hover { - background-color: #ddd; + background-color: #dbe2ef; } /* Create an active/current "tab button" class */ .tab button.active { - background-color: #ccc; + background-color: #3f72af; + color: white; } /* Style the tab content */ .tab-content { float: left; - background-color: #f1f1f1; + background-color: #f9f7f7; padding: 0px 12px; - border: 1px solid #ccc; + /* border: 1px solid #3f72af; */ width: 70%; border-left: none; height: 300px; overflow: auto; +} + +@media only screen and (min-width: 800px) { + .header-box { + flex-direction: row; + justify-content: space-between; + /* align-items: center; */ + } + + .header-box .title { + width: 175px; +text-align: center; + } + + .user-profile { + width: 275px; + } + + .projects-chart { + width: 275px; + } + + } \ No newline at end of file From 8b11f88ab50967f1a449876f0acd5df6205050ed Mon Sep 17 00:00:00 2001 From: Nadia Lefebvre <95084122+nadialefebvre@users.noreply.github.com> Date: Tue, 22 Feb 2022 09:41:42 +0100 Subject: [PATCH 08/28] working on the styling --- code/chart.js | 16 ---------------- code/script.js | 17 ++++++++++++----- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/code/chart.js b/code/chart.js index 0dd17d03..c5fbc6b4 100644 --- a/code/chart.js +++ b/code/chart.js @@ -155,22 +155,6 @@ const drawLanguagesChart = (html, css, js, idChart) => { weight: '700' }, cornerRadius: 4 - // callbacks: { - // body: titleTooltip - - // // label: function(context) { - // // let label = context.dataset.label || ''; - - // // if (label) { - // // label += ': '; - // // } - // // if (context.parsed.y !== null) { - // // label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y); - // // } - // // return label; - // // } - // } - } } } diff --git a/code/script.js b/code/script.js index 86463659..358bb821 100644 --- a/code/script.js +++ b/code/script.js @@ -28,10 +28,17 @@ const openTab = (event, tabName) => { +// TO REMOVE BEFORE GIT PUSH +// TO REMOVE BEFORE GIT PUSH + + + + + const createHeader = () => { - fetch(API_USER, options) + fetch(API_USER) .then(res => res.json()) .then(data => { userProfile.innerHTML = ` @@ -42,7 +49,7 @@ const createHeader = () => { } const createRepoCard = (reposToUse = null) => { - fetch(API_REPOS, options) // options object is passed as 2nd argument to fetch() function. // TO REMOVE BEFORE GIT PUSH + fetch(API_REPOS) // options object is passed as 2nd argument to fetch() function. // TO REMOVE BEFORE GIT PUSH .then(res => res.json()) .then(data => { const selectSorting = () => { @@ -121,7 +128,7 @@ const setRepoCardStructure = (repo) => { } const addCommits = (repo) => { - fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options) + fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`) .then(res => res.json()) .then(data => { // why item.author.login === username doesn't work here?? @@ -143,7 +150,7 @@ const addCommits = (repo) => { const addLanguageChart = (repo) => { - fetch(`https://api.github.com/repos/${username}/${repo.name}/languages`, options) + fetch(`https://api.github.com/repos/${username}/${repo.name}/languages`) .then(res => res.json()) .then(languages => { // variables so data will be 0 and not undefined if = 0 @@ -166,7 +173,7 @@ const addLanguageChart = (repo) => { const fetchPullRequest = (repo) => { // fix it because only 1 page of 30 PR is fetched, link: https://docs.github.com/en/rest/reference/pulls#list-pull-requests (added ?per_page=100&page=1 to URL, but it doesn't fix the problem for when the PR will go to page 2-3-4...) - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100&page=1`, options) + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100&page=1`) .then(res => res.json()) .then(data => { const userPulls = data.filter((item) => item.user.login === username) From 5483f47fc975428fd71250bdcf3f0e2a18b08fae Mon Sep 17 00:00:00 2001 From: Nadia Lefebvre <95084122+nadialefebvre@users.noreply.github.com> Date: Tue, 22 Feb 2022 15:40:47 +0100 Subject: [PATCH 09/28] still on styling --- code/chart.js | 13 +++-- code/favicon.ico | Bin 0 -> 15406 bytes code/index.html | 40 ++++++++++++---- code/script.js | 64 ++++++++++++------------- code/style.css | 120 ++++++++++++++++++++++++++++++----------------- 5 files changed, 149 insertions(+), 88 deletions(-) create mode 100644 code/favicon.ico diff --git a/code/chart.js b/code/chart.js index c5fbc6b4..30e6611c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,16 +1,16 @@ //DOM-selector for the canvas 👇 -const projectsChart = document.getElementById('projectsChart').getContext('2d') +const reposChart = document.getElementById('reposChart').getContext('2d') //"Draw" the chart here 👇 // what's not working below is commented out // global options -Chart.defaults.font.family = 'Lato' +Chart.defaults.font.family = 'Roboto' Chart.defaults.font.size = 18 Chart.defaults.color = 'white' -const drawProjectsChart = (amount) => { - new Chart(projectsChart, { +const drawReposChart = (amount) => { + new Chart(reposChart, { type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea data: { labels: ['Done', 'To do'], @@ -129,11 +129,14 @@ const drawLanguagesChart = (html, css, js, idChart) => { }, legend: { display: true, - position: 'left', + position: 'top', labels: { color: '#112D4E', usePointStyle: true, pointStyle: 'rect', + font: { + size: 12 + } }, // removes on click event: not able to strike through a label by clicking on it onClick: null, diff --git a/code/favicon.ico b/code/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..db384e627f6627bdaac40ce526190706d96b3b0f GIT binary patch literal 15406 zcmeHNU2qgd5FV9x;lcMjQ9SbGYYwISDNBn7m6D1|iKhH13*(6p2{8fui3L$pgdjqK z;t$5c3l|cTaJl0M`5`D3^9L6q5H%N~MBpSLm*lSPo@6(>d%N6T_Po6_GgWi5JJUV= zO>a-%_D(Z)7rTcoUCOY{VlOXY?0&{rR@UtOie-#dV&BS@bK}byYrBuJ6-a|D$T8cG zjc)lNFT2q7W_B1WBv`{1cqLgXxpmu~fX1C`r7_-mN}dDvmWTOuGitHub Tracker
-
-
+
-
+
-