Conversation
jonbarrow
left a comment
There was a problem hiding this comment.
Mostly just style and consistency changes. Most of this will be redone/removed in the future so I'm not too worried about the finer details right now. Once the admin panel is done being rewritten I planned to add a kanban board to it and ditch GitHub Projects entirely, so once that's done we can do all this tagging and filtering and stuff in a more streamlined way
public/assets/js/filter-progress.js
Outdated
| const progressCards = document.getElementsByClassName('purple-card') | ||
|
|
||
| function showWithFilter(filter){ | ||
| for (const card of progressCards){ | ||
| const type = card.getAttribute('type') | ||
| if (filter === "none" || type.toLowerCase().includes(filter)){ | ||
| card.classList.remove('off') | ||
| } | ||
| else { | ||
| card.classList.add('off') | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const buttons = document.getElementById('filter-container').children | ||
| let selectedButton = buttons[0] | ||
| for (const button of buttons){ | ||
| button.addEventListener('click',(event) => { | ||
| selectedButton.classList.remove('primary') | ||
| selectedButton = event.target | ||
| selectedButton.classList.add('primary') | ||
| showWithFilter(event.target.id); | ||
| }) | ||
| } No newline at end of file |
There was a problem hiding this comment.
| const progressCards = document.getElementsByClassName('purple-card') | |
| function showWithFilter(filter){ | |
| for (const card of progressCards){ | |
| const type = card.getAttribute('type') | |
| if (filter === "none" || type.toLowerCase().includes(filter)){ | |
| card.classList.remove('off') | |
| } | |
| else { | |
| card.classList.add('off') | |
| } | |
| } | |
| } | |
| const buttons = document.getElementById('filter-container').children | |
| let selectedButton = buttons[0] | |
| for (const button of buttons){ | |
| button.addEventListener('click',(event) => { | |
| selectedButton.classList.remove('primary') | |
| selectedButton = event.target | |
| selectedButton.classList.add('primary') | |
| showWithFilter(event.target.id); | |
| }) | |
| } | |
| const progressCards = document.getElementsByClassName('purple-card'); | |
| function showWithFilter(filter) { | |
| for (const card of progressCards) { | |
| const type = card.getAttribute('type'); | |
| if (filter === "none" || type.toLowerCase().includes(filter)) { | |
| card.classList.remove('off'); | |
| } else { | |
| card.classList.add('off'); | |
| } | |
| } | |
| } | |
| const buttons = document.getElementById('filter-container').children; | |
| let selectedButton = buttons[0]; | |
| for (const button of buttons) { | |
| button.addEventListener('click', (event) => { | |
| selectedButton.classList.remove('primary'); | |
| selectedButton = event.target; | |
| selectedButton.classList.add('primary'); | |
| showWithFilter(event.target.id); | |
| }) | |
| } |
There was a problem hiding this comment.
I can't make multiple suggestions over the same lines in one review, but I would also prefer to not use the children property on filter-container. Instead using querySelectorAll targeting the buttons would be safer in the event that we need to restructure the HTML and not worry about updating the JS
src/cache.js
Outdated
| } | ||
| } | ||
| } | ||
| `; //Loophole to get the ReadMe No Matter the branch name |
There was a problem hiding this comment.
The website is behind on this, but we've been moving to the comment format made by better comments
| `; //Loophole to get the ReadMe No Matter the branch name | |
| `; // * Loophole to get the ReadMe No Matter the branch name |
src/cache.js
Outdated
| main: object(expression: "main:README.md") { | ||
| ... on Blob { | ||
| text | ||
| } | ||
| } | ||
| master: object(expression: "master:README.md") { | ||
| ... on Blob { | ||
| text | ||
| } | ||
| } |
There was a problem hiding this comment.
You don't have to do this in 2 steps. Target HEAD rather than a branch and it gives you the repositories default branch
| main: object(expression: "main:README.md") { | |
| ... on Blob { | |
| text | |
| } | |
| } | |
| master: object(expression: "master:README.md") { | |
| ... on Blob { | |
| text | |
| } | |
| } | |
| readme: object(expression: "HEAD:README.md") { | |
| ... on Blob { | |
| text | |
| } | |
| } |
src/cache.js
Outdated
| } | ||
| `; //Loophole to get the ReadMe No Matter the branch name | ||
|
|
||
| const serviceApps = ["account","nex","friends","wii u chat", "juxt", "website"] |
There was a problem hiding this comment.
| const serviceApps = ["account","nex","friends","wii u chat", "juxt", "website"] | |
| const serviceApps = ["account", "nex", "friends", "wii u chat", "juxt", "website"]; |
This could also probably go on multiple lines, but I won't require it
src/cache.js
Outdated
| async function getRepoType(name, title){ | ||
| const data = await github.request(GetRepositoryDescription, { | ||
| orgName: 'PretendoNetwork', | ||
| repoName: name | ||
| }) | ||
| let readMe = "" | ||
| if (data.repository.main != null) | ||
| readMe = data.repository.main.text | ||
| else | ||
| readMe = data.repository.master.text | ||
|
|
||
| readMe = readMe.split('\n')[0].toLowerCase() | ||
| let description = data.repository.description | ||
| if (description != null) | ||
| description = description.toLowerCase() | ||
| else | ||
| description = "" | ||
| return await setRepoType(title.toLowerCase(),description,readMe) | ||
| } | ||
|
|
||
|
|
||
| async function setRepoType(title, description, readMe){ | ||
| let types = [] | ||
| let isGame = true | ||
| for (let app of serviceApps) | ||
| if (title.includes(app)){ | ||
| types.push("Service") | ||
| isGame = false | ||
| break | ||
| } | ||
|
|
||
| if (isGame) { | ||
| types.push("Game") | ||
| } | ||
|
|
||
| if (title.includes('(') && isGame){ | ||
| if (title.includes('3ds')) | ||
| types.push("3DS") | ||
| else | ||
| types.push("Wii U") | ||
| return types | ||
| } | ||
|
|
||
|
|
||
| if (title === 'nex' || title.includes('juxt') || title.includes('account')){ | ||
| types.push('3DS') | ||
| types.push('Wii U') | ||
| if (title.includes('juxt')) | ||
| types.push("Website") | ||
| } | ||
| else if (title.includes('web')){ | ||
| types.push("Website") | ||
| } | ||
| else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')){ | ||
| types.push('3DS') | ||
| } | ||
| else{ | ||
| types.push('Wii U') | ||
| } | ||
|
|
||
| return types | ||
| } |
There was a problem hiding this comment.
| async function getRepoType(name, title){ | |
| const data = await github.request(GetRepositoryDescription, { | |
| orgName: 'PretendoNetwork', | |
| repoName: name | |
| }) | |
| let readMe = "" | |
| if (data.repository.main != null) | |
| readMe = data.repository.main.text | |
| else | |
| readMe = data.repository.master.text | |
| readMe = readMe.split('\n')[0].toLowerCase() | |
| let description = data.repository.description | |
| if (description != null) | |
| description = description.toLowerCase() | |
| else | |
| description = "" | |
| return await setRepoType(title.toLowerCase(),description,readMe) | |
| } | |
| async function setRepoType(title, description, readMe){ | |
| let types = [] | |
| let isGame = true | |
| for (let app of serviceApps) | |
| if (title.includes(app)){ | |
| types.push("Service") | |
| isGame = false | |
| break | |
| } | |
| if (isGame) { | |
| types.push("Game") | |
| } | |
| if (title.includes('(') && isGame){ | |
| if (title.includes('3ds')) | |
| types.push("3DS") | |
| else | |
| types.push("Wii U") | |
| return types | |
| } | |
| if (title === 'nex' || title.includes('juxt') || title.includes('account')){ | |
| types.push('3DS') | |
| types.push('Wii U') | |
| if (title.includes('juxt')) | |
| types.push("Website") | |
| } | |
| else if (title.includes('web')){ | |
| types.push("Website") | |
| } | |
| else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')){ | |
| types.push('3DS') | |
| } | |
| else{ | |
| types.push('Wii U') | |
| } | |
| return types | |
| } | |
| async function getRepoType(name, title) { | |
| const data = await github.request(getRepositoryDescription, { | |
| orgName: 'PretendoNetwork', | |
| repoName: name | |
| }); | |
| const readme = data.repository.readme.text.split('\n')[0].toLowerCase(); | |
| const description = data.repository.description?.toLowerCase() || ''; | |
| return setRepoType(title.toLowerCase(), description, readme); | |
| } | |
| function setRepoType(title, description, readMe) { | |
| const types = []; | |
| let isGame = true; | |
| for (const app of serviceApps) { | |
| if (title.includes(app)) { | |
| types.push('Service'); | |
| isGame = false; | |
| break; | |
| } | |
| } | |
| if (isGame) { | |
| types.push('Game'); | |
| } | |
| if (title.includes('(') && isGame) { | |
| if (title.includes('3ds')) { | |
| types.push('3DS'); | |
| } else { | |
| types.push('Wii U'); | |
| } | |
| return types; | |
| } | |
| if (title === 'nex' || title.includes('juxt') || title.includes('account')) { | |
| types.push('3DS'); | |
| types.push('Wii U'); | |
| if (title.includes('juxt')) { | |
| types.push('Website'); | |
| } | |
| } else if (title.includes('web')) { | |
| types.push('Website'); | |
| } else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')) { | |
| types.push('3DS'); | |
| } else { | |
| types.push('Wii U'); | |
| } | |
| return types; | |
| } |
src/cache.js
Outdated
| const GetRepositoryDescription = gql` | ||
| query GetRepositoryDescription($orgName: String!, $repoName: String!){ |
There was a problem hiding this comment.
| const GetRepositoryDescription = gql` | |
| query GetRepositoryDescription($orgName: String!, $repoName: String!){ | |
| const getRepositoryDescription = gql` | |
| query getRepositoryDescription($orgName: String!, $repoName: String!){ |
src/cache.js
Outdated
| todo: [] | ||
| } | ||
| }, | ||
| type: [] |
There was a problem hiding this comment.
| type: [] | |
| types: [] |
src/cache.js
Outdated
| const types = await getRepoType(project.url.split("/")[4], project.title) | ||
| extractedData.type = types |
There was a problem hiding this comment.
| const types = await getRepoType(project.url.split("/")[4], project.title) | |
| extractedData.type = types | |
| extractedData.types = await getRepoType(project.url.split("/")[4], project.title); |
Or just set this directly on the object rather than reassigning it here
Need Mobile layout design
This PR (which I will trun into a draft) adds the filter Progress like in the Figma Design


The Filters then can also be localised if needed
Old:
New: