Cowboy programming

README.md

@@ -106,3 +106,13 @@ pm2 logs
 ```bash
 docker-compose up -d
 ```
+
+## Notes to self
+Making changes is currently hard.
+I don't have time to set up a local environment - it's not easy enough. 
+So I'm Cowboy-programming. 
+And another issue: My regular yochayco linux user has no permissions to edit files.
+So I'm either using vim, or doing 'save as' in `/tmp` folder and then copying from `mn__` user.
+And the worst part: This `mn__` user can't push to remote git.
+I've cloned the project and I can update it with `yochayco` but the local repo is out of sync since `yochayco` won't write to `.git` folder.
+From the cloned project I'm making PRs to yonatanmil but there is no real reason to do that I guess.

app/lib/db.js

@@ -38,10 +38,9 @@ function generateAppGlamFromDb(element) {
 }
 
 async function getAllGlams() {
-  const result = await query(SQL`SELECT * FROM glams`);
+  const result = await query(SQL`SELECT * FROM glams ORDER BY fullname`);
   return result.rows.map(generateAppGlamFromDb);
 }
-
 exports.getAllGlams = getAllGlams;
 
 async function getGlamByName(name) {

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}}

app/pages/views/index.hbs

@@ -128,6 +128,10 @@
 		flex-direction: column;
 	}
 
+	.data-card.hover, .data-card:hover {
+		background-color:#2687ff;
+	}
+
 	.data-card-title {
 		font-size: 17px;
 		color: inherit;
@@ -332,15 +336,15 @@
 				});
 			</script>
 		</div>
-		<div class="data-card">
+		<div class="data-card page-views">
 			<a href="{{glam.name}}/page-views" class="data-card-title">{{langDict.views.index.report.viewsDate}}</a>
 			<div class="data-card-number">{{toLocaleString data.yesterdayMediacount}}</div>
 		</div>
-		<div class="data-card">
+		<div class="data-card page-views">
 			<a href="{{glam.name}}/page-views" class="data-card-title">{{langDict.views.index.report.viewsThisMonth}}</a>
 			<div class="data-card-number">{{toLocaleString data.thisMonthMediacount}}</div>
 		</div>
-		<div class="data-card">
+		<div class="data-card page-views">
 			<a href="{{glam.name}}/page-views" class="data-card-title">{{langDict.views.index.report.monthlyAvgViews}}</a>
 			<div class="data-card-number">{{toLocaleString data.thisYearMonthlyAvg}}</div>
 		</div>
@@ -349,11 +353,11 @@
 				class="data-card-title">{{langDict.views.index.report.relatedCategories}}</a>
 			<div class="data-card-number">{{toLocaleString data.categoriesCount}}</div>
 		</div>
-		<div class="data-card">
+		<div class="data-card usage">
 			<a href="{{glam.name}}/usage" class="data-card-title">{{langDict.views.index.report.articleUsage}}</a>
 			<div class="data-card-number">{{toLocaleString data.articlesCount}}</div>
 		</div>
-		<div class="data-card">
+		<div class="data-card usage">
 			<a href="{{glam.name}}/usage" class="data-card-title">{{langDict.views.index.report.projectsUsage}}</a>
 			<div class="data-card-number">{{toLocaleString data.projectsCount}}</div>
 		</div>
@@ -564,5 +568,27 @@
 			window.location.href += "/search/" + inputVal;
 		}
 	});
+
+	const pageViewsCards = document.querySelectorAll('.data-card.page-views');
+
+	pageViewsCards.forEach(card => {
+			card.addEventListener('mouseenter', () => {
+					pageViewsCards.forEach(c => c.classList.add('hover'));
+			});
+			card.addEventListener('mouseleave', () => {
+					pageViewsCards.forEach(c => c.classList.remove('hover'));
+			});
+	});
+
+	const usageCards = document.querySelectorAll('.data-card.usage');
+
+	usageCards.forEach(card => {
+			card.addEventListener('mouseenter', () => {
+					usageCards.forEach(c => c.classList.add('hover'));
+			});
+			card.addEventListener('mouseleave', () => {
+					usageCards.forEach(c => c.classList.remove('hover'));
+			});
+	});
 </script>
-{{/mainWrapper}}
+{{/mainWrapper}}

app/pages/views/recommender-page/index.hbs

@@ -58,11 +58,11 @@
           <h6>{{langDict.views.index.chart}}</h6>
           <div class="select-chart select-chart-large">
             <select id="switch_page">
+              <option selected value="recommender">{{langDict.views.index.cards.suggestions.title}}</option>
               <option value="user-contributions">{{langDict.views.index.cards.userContribution.title}}</option>
               <option value="category-network">{{langDict.views.index.cards.categoryNetwork.title}}</option>
               <option value="usage">{{langDict.views.index.cards.usage.title}}</option>
               <option value="page-views">{{langDict.views.index.cards.views.title}}</option>
-              <option selected value="recommender">{{langDict.views.index.cards.suggestions.title}}</option>
             </select>
           </div>
         </div>
@@ -123,4 +123,4 @@
   <script type="text/javascript" src="/views/recommender-page/functions.js"></script>
 </body>
 
-</html>
+</html>

app/pages/views/usage/index.hbs

@@ -59,9 +59,9 @@
 					<h6>{{langDict.views.index.chart}}</h6>
 					<div class="select-chart select-chart-large">
 						<select id="switch_page">
+							<option selected value="usage">{{langDict.views.index.cards.usage.title}}</option>
 							<option value="user-contributions">{{langDict.views.index.cards.userContribution.title}}</option>
 							<option value="category-network">{{langDict.views.index.cards.categoryNetwork.title}}</option>
-							<option selected value="usage">{{langDict.views.index.cards.usage.title}}</option>
 							<option value="page-views">{{langDict.views.index.cards.views.title}}</option>
 							<option value="recommender">{{langDict.views.index.cards.suggestions.title}}</option>
 						</select>
@@ -158,4 +158,4 @@
 	<script type="text/javascript" src="/views/json-generation.js"></script>
 </body>
 
-</html>
+</html>

app/stats.js

@@ -0,0 +1,17 @@
+process.env.ENV = "production";
+
+const { getAllGlams } = require("./lib/db");
+
+async function stats() {
+  const glams = await getAllGlams();
+  let total = 0;
+  for (const glam of glams) {
+    const { rows } = await glam.connection.query(`SELECT COUNT(*) as value from images WHERE img_timestamp between '2022-01-01' AND '2023-12-31'`);
+    const [{ value }] = rows;
+    console.log(glam.name, value);
+    total += +value;
+  }
+  console.log(total);
+}
+
+stats();