diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..c002f11c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This weeks assignment was to create a Tracker for Github. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I struggled a lot this week, I took several approaches until i finnaly got it to work I can honesty say It was like walking in the dark. +I just wished I had more time to read about the topic and truly understand it. + ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +sjupunktertracker.netlify.app \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..7fd89a8a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,32 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const pieData = { + labels: ['Projects to go', 'Projects done'], + datasets: [ + { + label: 'Technigo project progress', + data: [19, 6], + backgroundColor: ['RGB(27, 27, 33)', 'RGB(230, 211, 65)'], + borderColor: '#21262c', + hoverOffset: 2, + }, + ], +} + +const pieConfig = { + type: 'bar', + data: pieData, +} + +const pieChart = new Chart(ctx, pieConfig) + +const updatePieChart = (chart, newData) => { + chart.data.datasets.forEach(dataset => { + dataset.data.pop() + dataset.data.push(newData) + }) + chart.update() +} + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..2541267a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,34 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - + + + + + GitHub Tracker + + + +
+

GitHub Tracker

+
+

Projects

+
+

Filter by

+ + + +
+
+

Sort by:

+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..324437fd 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,208 @@ +// GITHUB API +const USER = 'Dopest0727' +const PARENT_OWNER = 'Technigo' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const USER_URL = `https://api.github.com/users/${USER}` + +// GLO VAR +const projects = document.getElementById('projects') +const userData = document.getElementById('userData') + +// FILTER BY +const filterAllBtn = document.getElementById('filterAllBtn') +const filterLangJsBtn = document.getElementById('filterLangJsBtn') +const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn') + +const sortSizeBtn = document.getElementById('sortSizeBtn') +const sortCreatedBtn = document.getElementById('sortCreatedBtn') +const sortNameBtn = document.getElementById('sortNameBtn') + +let reposArr = [] +let reposData = {} + +const pullReqData = { + total: 19, + done: 4, +} + +const fetchAllReposFromUser = () => { + // FETCH MY REPOS + fetch(REPOS_URL) + .then(res => res.json()) + .then(allRepos => { + // FILTER FORKED REPOS + let filteredRepos = allRepos.filter( + repo => repo.name.includes('project-') && repo.fork + ) + sortRepos(filteredRepos, 'pushed_at', true) + fetchFullRepo(filteredRepos) + }) + .catch(err => alert('fetchAllReposFromUser error: ', err)) +} + +const fetchFullRepo = repos => { + // FETCH DATA FROM REPOS + Promise.all(repos.map(repo => fetch(repo.url))) + .then(res => Promise.all(res.map(res => res.json()))) + .then(repos => { + repos.forEach(repo => { + if (repo.parent.owner.login === PARENT_OWNER) { + reposArr.push(repo) + reposData[repo.name] = { pullRequest: '', authors: '', commits: '' } + + generateProjectCard(repo) + const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100` + fetchCommits(COMMITS_URL, repo) + } + }) + }) + .catch(err => alert('fetchFullRepo error:', err)) +} + +const generateProjectCard = repo => { + // GITHUB PROJJECT CARD GENERATOR + projects.innerHTML += /*html*/ ` +
+
+

${repo.name}

+

${repo.language}

+
+

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

+

Pull request

+
+

Commits:

+

Size: ${repo.size}

+
+

Updated: ${new Date(repo.pushed_at).toDateString()}

+

Commit authors:

+
+ ` +} + +const fetchCommits = (myCommitsUrl, repo) => { + // FETCH COMMITS + fetch(myCommitsUrl) + .then(res => res.json()) + .then(data => { + // FILTER COMMITS AFTER REPO WAS FORKES + const commitsSinceFork = data.filter(commit => commit.commit.author.date > repo.created_at) + // storing necessary data for later sorting + reposData[repo.name].commits = commitsSinceFork + populateCommits(repo, commitsSinceFork) + getCollaborators(commitsSinceFork, repo) + }) + .catch(err => alert('fetchCommits error: ', repo.name, err)) +} + +const populateCommits = (repo, commits) => { + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}, ` +} + +const getCollaborators = (commits, repo) => { + // filter out each commit author and stor for later sort + let authors = {} + commits.forEach(commit => { + if (!Object.keys(authors).includes(commit.author.login)) { + authors[commit.author.login] = { + avatar_url: commit.author.avatar_url, + html_url: commit.author.html_url, + } + } + }) + reposData[repo.name].authors = authors + populateCollaborators(authors, repo) + fetchPullRequestsArray(repo, Object.keys(authors)) +} + +const populateCollaborators = (authors, repo) => { + for (const author in authors) { + if (Object.keys(authors).length > 1) { + document.getElementById( + `collaborators-${repo.name}` + ).innerHTML += `` + } else { + document.getElementById(`collaborators-${repo.name}`).innerHTML = + 'Individual project' + } + } +} + +const fetchPullRequestsArray = (repo, authors) => { + // FETCH PULL REQUEST FROM REPO + const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100` + fetch(PULL_URL) + .then(res => res.json()) + .then(data => { + // only pick pull requests connected to user + const myPullReq = data.find(pull => authors.includes(pull.user.login)) + if (myPullReq) { + pullReqData.done++ + reposData[repo.name].pullRequest = myPullReq + updatePieChart(pieChart, pullReqData.done) + } + populatePullRequest(myPullReq, repo) + }) + .catch(err => alert('fetchPullRequestsArray error:', err)) +} + +const populatePullRequest = (myPullReq, repo) => { + if (myPullReq) { + document.getElementById( + `pull-${repo.name}` + ).innerHTML = `Pull request` + } else { + document.getElementById(`pull-${repo.name}`).innerHTML = 'No pull request' + } +} + +const fetchUser = () => { + fetch(USER_URL) + .then(res => res.json()) + .then(data => { + userData.innerHTML += `

${data.login}

` + }) + .catch(err => alert('fetchCommits error: ', err)) +} + +const sortRepos = (array, param, init) => { + array.sort((a, b) => { + if (a[param] > b[param]) { + return -1 + } else if (a[param] < b[param]) { + return 1 + } else { + return 0 + } + }) + if (param === 'name') array.reverse() + if (!init) regenerateProjectCards(reposArr) +} + +const filterRepos = (array, lang) => { + if (lang !== 'All') { + const filteredReposArr = array.filter(repo => repo.language === lang) + regenerateProjectCards(filteredReposArr) + } else { + regenerateProjectCards(array) + } +} + +const regenerateProjectCards = repos => { + projects.innerHTML = '' + repos.forEach(repo => { + generateProjectCard(repo) + populateCommits(repo, reposData[repo.name].commits) + populateCollaborators(reposData[repo.name].authors, repo) + populatePullRequest(reposData[repo.name].pullRequest, repo) + }) +} + +sortSizeBtn.addEventListener('click', () => sortRepos(reposArr, 'size', false)) +sortNameBtn.addEventListener('click', () => sortRepos(reposArr, 'name', false)) +sortCreatedBtn.addEventListener('click', () => sortRepos(reposArr, 'created_at', false)) +filterLangJsBtn.addEventListener('click', () => filterRepos(reposArr, 'JavaScript')) +filterLangHtmlBtn.addEventListener('click', () => filterRepos(reposArr, 'HTML')) +filterAllBtn.addEventListener('click', () => filterRepos(reposArr, 'All')) + +fetchAllReposFromUser() +fetchUser() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..457d1af7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,190 @@ -body { - background: #FFECE9; +.body { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Montserrat', sans-serif; + background-color: #000000; + color: white; + max-width: 400px; + margin: auto; + box-sizing: border-box; +} + +.header { + text-align: center; +} + +.user-data { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; +} + +.user-name { + font-size: 30px; + margin: 20px 0 10px 0; +} + +.avatar-user { + width: 100%; + border-radius: 5%; + border-radius: 5px; +} + +.project-header { + text-align: center; +} + +.avatar-collaborator { + box-sizing: border-box; + height: 30px; + border-radius: 50%; + padding: 0 2px; +} + +.filters-sorting { + display: flex; + align-items: center; + margin: 5px 0; +} + +.filters-sorting-heading { + margin: 20px 10px; +} + +.filters-sorting button { + height: 30px; + border: 1px solid #21262c; + border-radius: 5px; + padding: 5px 10px; + margin: 0 7px; + background-color: #ffffff; + color: #1a1a1a; +} + +.projects { + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; +} + +.chart { + margin: 40px; + height: 400px; + width: 400px; +} + +.repo-info { + display: flex; + flex-wrap: wrap; + flex-direction: column; + border: 2px solid #30353b; + border-radius: 5px; + padding: 10px; + margin: 0; +} + +.repo-heading { + display: flex; + justify-content: space-between; + align-items: center; +} + +.numbers { + display: flex; + gap: 4px; +} + +.repo { + font-size: 20px; + margin: 5px 0; +} + +.lang { + border-radius: 10px; + color: black; + padding: 0 4px; +} + +.JavaScript { + background-color: #f1e15a; + border: 1px solid #f1e15a; + border-radius: 5px; + padding: 5px 10px; +} + +.HTML, +.CSS { + background-color: #e44c27; + border: 1px solid #e44c27; + border-radius: 5px; + padding: 5px 10px; +} + +.info, +.update, +.commit, +.size, +.pull, +.collaboration { + margin: 5px 0; + display: flex; + align-items: center; +} + +a:link { + color: #579def; + text-decoration: none; +} + +a:visited { + color: #579def; + text-decoration: none; +} + +a:hover { + color: #579def; + text-decoration: underline; +} + +@media (min-width: 768px) { + .body { + max-width: 990px; + } + .projects { + flex-direction: row; + flex-wrap: wrap; + } + .repo-info { + width: 45%; + } + .chart { + max-width: 400px; + } +} + +@media (min-width: 992px) { + .body { + max-width: 1100px; + } + .repo-info { + width: 30%; + } + .chart { + max-width: 400px; + } +} + +@media (min-width: 1200px) { + .body { + max-width: 1500px; + } + .repo-info { + width: 22%; + } + .chart { + max-width: 400px; + } } \ No newline at end of file