Added Filter Progress

locales/en_US.json

@@ -391,5 +391,13 @@
 		"cancel": "Cancel",
 		"confirm": "Confirm",
 		"close": "Close"
+	},
+	"filter": {
+		"none": "All",
+		"wiiu": "Wii U",
+		"3ds": "3DS",
+		"web": "Web",
+		"game": "Game",
+		"service": "Service"
 	}
 }

public/assets/css/main.css

@@ -766,6 +766,7 @@ section.update-signup div.circle {
 }
 
 .feature-progress-chart {
+	width: 100px;
 	position: relative;
 }
 .feature-progress-chart p {

public/assets/css/progress.css

@@ -10,4 +10,38 @@ MOVE PROGRESS CSS HERE
 #quick-nav a:hover {
 	color: var(--text-shade-3);
 	text-decoration: underline;
+}
+
+.progress-filter {
+	padding: 8px 72px;
+    border-radius: 10px;
+    background: var(--bg-shade-0);
+    grid-column: span 2;
+}
+
+.progress-filter .container {
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+	grid-gap: 20px;
+}
+
+.progress-filter .container button {
+	padding: 0px;
+}
+
+.off {
+	display: none;
+}
+
+@media screen and (max-width: 900px) {
+
+	.progress-filter {
+		grid-column: span 1;
+		padding: 10px;
+	}
+
+	.progress-filter .container {
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+	}
 }

public/assets/js/filter-progress.js

@@ -0,0 +1,24 @@
+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);
+    })
+}

src/cache.js

@@ -69,6 +69,25 @@ query getProjectsV2Fields($id: ID!, $cursor: String!) {
 	}
 }
 `;
+const GetRepositoryDescription = gql`
+query GetRepositoryDescription($orgName: String!, $repoName: String!){
+    repository(owner: $orgName, name: $repoName) {
+		description
+        main: object(expression: "main:README.md") {
+            ... on Blob {
+                text
+            }
+        }
+        master: object(expression: "master:README.md") {
+            ... on Blob {
+                text
+            }
+        }        
+    }
+}
+`; //Loophole to get the ReadMe No Matter the branch name
+
+const serviceApps = ["account","nex","friends","wii u chat", "juxt", "website"]
 
 let githubProjectsCache = {
 	update_time: 0,
@@ -133,6 +152,69 @@ async function getGitHubProjectsV2Fields(id, after='') {
 	return fields;
 }
 
+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 getGithubProjectsCache() {
 	if (githubCacheBeingFetched) {
 		return githubProjectsCache;
@@ -172,7 +254,8 @@ async function updateGithubProjectsCache() {
 				done: [],
 				in_progress: [],
 				todo: []
-			}
+			},
+			type: []
 		};
 
 		const fields = await getGitHubProjectsV2Fields(project.id);
@@ -181,6 +264,9 @@ async function updateGithubProjectsCache() {
 			extractedData.cards[field.column.toLowerCase().replace(' ', '_')]?.push(field.title);
 		}
 
+		const types = await getRepoType(project.url.split("/")[4], project.title)
+		extractedData.type = types
+
 		projectsCacheData.sections.push(extractedData);
 	}
 

views/progress.handlebars

@@ -24,24 +24,24 @@
 			<p class="localeReplace">{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}</p>
 		</div>
 
-		<div id="quick-nav">
-			<h1 class="title dot">Quick Nav</h1>
-			<ul>
-				{{#each progressLists.sections}}
-				<li>
-					<a href="#{{slug this.title}}">{{this.title}}</a>
-				</li>
-				{{/each}}
-			</ul>
+		<div class="progress-filter">
+			<div class="container" id="filter-container">
+				<button class="filter primary" id="none"> {{locale.filter.none}} </button>
+				<button class="filter" id="wii u"> {{locale.filter.wiiu}} </button>
+				<button class="filter" id="3ds"> {{locale.filter.3ds}} </button>
+				<button class="filter" id="web"> {{locale.filter.web}} </button>
+				<button class="filter" id="game"> {{locale.filter.game}} </button>
+				<button class="filter" id="service"> {{locale.filter.service}} </button>
+			</div>
 		</div>
-		<br>
+
 		{{#each progressLists.sections}}
-		<div class="purple-card" id="{{slug this.title}}">
+		<div class="purple-card" id="{{slug this.title}}" type="{{this.type}}">
 			{{> progress-list data=this }}
 		</div>
 		{{/each}}
 	</div>
-
+	<script src="/assets/js/filter-progress.js"></script>
 	{{> footer }}
 
 </div>