Add flags to countries and pagination

README.md

@@ -106,3 +106,15 @@ pm2 logs
 ```bash
 docker-compose up -d
 ```
+
+# FLOW
+
+## Adding a new organization
+
+1. User submits a response in the google form
+2. Supporter (that's you) gets an email notification (set it up in advance...)
+3. Verify the user's response validity
+4. Log in to the WikiGlams control panel. Use the details from the production config file.
+5. **Make sure that the `new_glam_listener` is running**
+6. **Create a new GLAM** with the relevant details of the organization
+7. Make sure that the `new_glam_listener` finishes the job

app/pages/index.hbs

@@ -6,7 +6,7 @@
 	}
 
 	.header {
-		margin-bottom: 30px;
+		margin-bottom: 20px;
 		display: flex;
 		justify-content: space-between;
 	}
@@ -112,6 +112,21 @@
 		margin-bottom: 16px;
 		text-align: left;
 	}
+	.paginator {
+		display: flex;
+		margin-bottom: 1rem;
+		column-gap: 0.75rem;
+    	align-items: center;
+	}
+	.paginator>a {
+		display: flex;
+		padding: 0 0.5rem;
+		font-weight: bold;
+		font-size: 1.5rem;
+		cursor: pointer;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
 <div class="pusher">
 	{{> sidebar}}
@@ -126,64 +141,89 @@
 			</form>
 			{{> langSelect}}
 		</div>
-		<div class="glams-boxes" id="glamsContainer">
-			{{#*inline "glamLink"}}
-			<div class="glam-container">
-				<img src="{{glam.image}}">
-				<div class="flag">
-					<img src="/assets/icons/countries/{{glam.country}}.png" alt="{{glam.country}}" />
-				</div>
-				<div class="text-block">
-					<a class="glam-link" href="/{{glam.name}}" alt="{{glam.category}}">
-						<h4>{{glam.fullname}}</h4>
-					</a>
-				</div>
-			</div>
-			{{/inline}}
-
-			{{#each glams}}
-				{{> glamLink glam=this}}
-			{{/each}}
+		<div class="paginator">
+			<a id="paginatePrevious">
+				&laquo;
+			</a>
+			<span id="pageText"></span>
+			<a id="paginateNext">&raquo;</a>
 		</div>
+		<div class="glams-boxes" id="glamsContainer"></div>
 	</main>
 </div>
 <script>
+	const GLAMS_PER_PAGE = 20;
 
 	const glams = {{ json glams }};
+	let filteredGlams = glams;
+	let page = 1;
+	let numOfPages = Math.ceil(glams.length / GLAMS_PER_PAGE);
 
 	const searchGlamForm = document.querySelector('#searchGlamForm');
 	const searchInput = searchGlamForm.querySelector('input[name="searchTerm"]');
 	const glamsContainer = document.querySelector('#glamsContainer');
+	const pageText = document.querySelector("#pageText");
+	const paginatePrevious = document.querySelector("#paginatePrevious")
+	const paginateNext = document.querySelector("#paginateNext")
 
-	function filterGlams() {
-		const value = searchInput.value.toLowerCase();
-		const glamsHtml = glams.reduce((html, glam) => {
-			if (glam.fullname.toLowerCase().includes(value)) {
-				html += `
-					<div class="glam-container">
-						<img src="${glam.image}">
-						<div class="flag">
-							<img src="/assets/icons/countries/${glam.country}.png" alt="${glam.country}" />
-						</div>
-						<div class="text-block">
-							<a class="glam-link" href="/${glam.name}" alt="${glam.category}">
-								<h4>${glam.fullname}</h4>
-							</a>
-						</div>
+	function getPaginatedGlams() {
+  		return filteredGlams.slice((page - 1) * GLAMS_PER_PAGE, page * GLAMS_PER_PAGE);
+	}
+
+	function updatePageText() {
+		pageText.innerHTML = page + " out of " + numOfPages;
+	}
+
+	function paginate(amount) {
+		page = Math.max(1, Math.min(numOfPages, page + amount));
+		updatePageText();
+		renderGlams();
+	}
+
+	function renderGlams() {
+		const glamsHtml =  getPaginatedGlams().reduce((html, glam) => {
+			html += `
+				<div class="glam-container">
+					<img src="${glam.image}">
+					<div class="flag">
+						<img src="/assets/icons/countries/${glam.country}.png" alt="${glam.country}" />
+					</div>
+					<div class="text-block">
+						<a class="glam-link" href="/${glam.name}" alt="${glam.category}">
+							<h4>${glam.fullname}</h4>
+						</a>
 					</div>
-				`;
-			}
+				</div>
+			`;
 			return html;
 		}, '');
 		if (glamsHtml) {
 			glamsContainer.innerHTML = glamsHtml;
 		} else {
+			page = 0;
 			glamsContainer.innerHTML = '<h1>0 {{langDict.results}}</h1>';
 		}
 	}
+
+	function filterGlams() {
+		const value = searchInput.value.toLowerCase();
+		filteredGlams = glams.filter((glam) => glam.fullname.toLowerCase().includes(value));
+		numOfPages = Math.ceil(filteredGlams.length / GLAMS_PER_PAGE);
+		renderGlams();
+	}
+
 	searchGlamForm.addEventListener('submit', (e) => {
 		e.preventDefault();
 	})
-	searchInput.addEventListener('keyup', () => filterGlams());
+	searchInput.addEventListener('keyup', () => {
+		page = 1;
+		filterGlams();
+		updatePageText();
+	});
+	paginatePrevious.addEventListener('click', () => paginate(-1));
+	paginateNext.addEventListener('click', () => paginate(1));
+	renderGlams();
+	updatePageText();
+
 </script>
 {{/mainWrapper}}

services/etl/glams_table.py

@@ -157,10 +157,12 @@ def _refresh_vis_stats_view(glam):
 
 def refresh_glams_visualizations(glams):
     logging.info(f" {datetime.now()} refreshing views for {len(glams)} glams")
+    futures = []
     with concurrent.futures.ThreadPoolExecutor(max_workers=100) as executor:
         for glam in glams:
-            executor.submit(_refresh_vis_sum_view, glam)
-            executor.submit(_refresh_vis_stats_view, glam)
+            fut1 = executor.submit(_refresh_vis_sum_view, glam)
+            fut2 = executor.submit(_refresh_vis_stats_view, glam)
+            futures.append((glam, fut1, fut2))
         logging.info(f" {datetime.now()} waiting for all data refreshes to be done")
         executor.shutdown(wait=True)
         logging.info(f" {datetime.now()} all data refreshes done")

services/report.py

@@ -4,9 +4,9 @@
 import sys
 
 START_YEAR = 2020
-END_YEAR = 2023
+END_YEAR = 2025
 
-FIELDS = ['Slug', 'Name', 'Wikimedia Category', 'Joined At', 'Country', f'Media Before {START_YEAR}', 'Media From 2020', 'Media From 2021', 'Media From 2022', 'Media From 2023', 'All Media']
+FIELDS = ['Slug', 'Name', 'Wikimedia Category', 'Joined At', 'Country', f'Media Before {START_YEAR}', 'Media From 2020', 'Media From 2021', 'Media From 2022', 'Media From 2023', 'Media From 2024', 'Media From 2025', 'All Media']
 
 filename = sys.argv[1]