feat: Add notifications and jobs page handlers for settings and heade…

…r components
wajeht · Aug 14, 2024 · 09e905a · 09e905a
1 parent 4f3998f
commit 09e905a
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 21 deletions.
diff --git a/src/handler.ts b/src/handler.ts
@@ -43,10 +43,18 @@ export function getSettingsPageHandler(req: Request, res: Response) {
 	});
 }
 
-// GET /profile
-export function getProfilePageHandler(req: Request, res: Response) {
-	return res.render('profile.html', {
-		path: '/profile',
+// GET /notifications
+export function getNotificationsPageHandler(req: Request, res: Response) {
+	return res.render('settings.html', {
+		path: '/notifications',
+		layout: '../layouts/auth.html',
+	});
+}
+
+// GET /jobs
+export function getJobsPageHandler(req: Request, res: Response) {
+	return res.render('jobs.html', {
+		path: '/jobs',
 		layout: '../layouts/auth.html',
 	});
 }

diff --git a/src/router.ts b/src/router.ts
@@ -3,12 +3,13 @@ import {
 	postNotificationHandler,
 	getHomePageHandler,
 	getAppsPageHandler,
+	getJobsPageHandler,
+	getNotificationsPageHandler,
 	postCreateAppHandler,
 	getNewAppChannelPageHandler,
 	getAppPageHandler,
 	getTermsOfServicePageHandler,
 	getSettingsPageHandler,
-	getProfilePageHandler,
 	getLogoutHandler,
 	getCreateNewAppPageHandler,
 	getAppNotificationsPageHandler,
@@ -45,7 +46,9 @@ router.get('/apps/:id/notifications', catchAsyncErrorMiddleware(getAppNotificati
 
 router.get('/settings', catchAsyncErrorMiddleware(getSettingsPageHandler));
 
-router.get('/profile', catchAsyncErrorMiddleware(getProfilePageHandler));
+router.get('/jobs', catchAsyncErrorMiddleware(getJobsPageHandler));
+
+router.get('/notifications', catchAsyncErrorMiddleware(getNotificationsPageHandler));
 
 router.get('/logout', catchAsyncErrorMiddleware(getLogoutHandler));
 

diff --git a/src/views/components/header.html b/src/views/components/header.html
@@ -6,14 +6,13 @@ <h1><a href="/">Notify</a></h1>
 
   <nav style="display: flex; justify-content: space-between; align-items: center;">
     <div style="display: flex; align-items: center; gap: 10px;">
-      <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>;" href="/apps">Apps</a>
-      <a style="font-weight: <%= path === '/jobs' ? 'bold' : 'normal' %>;" href="/jobs">Jobs</a>
-      <a style="font-weight: <%= path === '/notifications' ? 'bold' : 'normal' %>;" href="/notifications">Notifications</a>
+      <a style="font-weight: <%= path === '/apps' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/apps' ? 'underline' : 'none' %>;" href="/apps">Apps</a>
+      <a style="font-weight: <%= path === '/jobs' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/jobs' ? 'underline' : 'none' %>;" href="/jobs">Jobs</a>
+      <a style="font-weight: <%= path === '/notifications' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/notifications' ? 'underline' : 'none' %>;" href="/notifications">Notifications</a>
     </div>
 
     <div style="display: flex; align-items: center; gap: 10px;">
-      <a style="font-weight: <%= path === '/profile' ? 'bold' : 'normal' %>;" href="/profile">Profile</a>
-      <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>;" href="/settings">Settings</a>
+      <a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>; text-decoration: <%= path === '/settings' ? 'underline' : 'none' %>;" href="/settings">Settings</a>
       <a href="/logout">Logout</a>
     </div>
   </nav>

diff --git a/src/views/layouts/app.html b/src/views/layouts/app.html
@@ -2,18 +2,18 @@
 <html lang="en">
 	<%- include('../components/head.html') %>
 
-	<body style="display: flex; flex-direction: column; gap: 10px; min-height: 100vh;">
+	<body style="display: flex; flex-direction: column; gap: 20px; min-height: 100vh;">
 		<%- include('../components/header.html') %>
 
 		<main style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
-			<h2 >Apps / <%= app.id %></h2>
+			<h2>Apps / <%= app.id %></h2>
 
 			<div style="display: grid; grid-template-columns: 20% 80%;">
 				<aside style="display: inline-block;">
 					<div style="display: flex; flex-direction: column; gap: 5px">
-						<a style="font-weight: <%= path === `/apps/${app.id}` ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>">App</a>
-						<a style="font-weight: <%= /\/apps\/.*\/channels/.test(path) ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>/channels">Channels</a>
-						<a style="font-weight: <%= /\/apps\/.*\/notifications/.test(path) ? 'bold' : 'normal' %>;" href="/apps/<%= app.id %>/notifications">Notifications</a>
+						<a style="font-weight: <%= path === `/apps/${app.id}` ? 'bold' : 'normal' %>; text-decoration: <%= path === `/apps/${app.id}` ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>">App</a>
+						<a style="font-weight: <%= /\/apps\/.*\/channels/.test(path) ? 'bold' : 'normal' %>; text-decoration: <%= /\/apps\/.*\/channels/.test(path) ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>/channels">Channels</a>
+						<a style="font-weight: <%= /\/apps\/.*\/notifications/.test(path) ? 'bold' : 'normal' %>; text-decoration: <%= /\/apps\/.*\/notifications/.test(path) ? 'underline' : 'none' %>;" href="/apps/<%= app.id %>/notifications">Notifications</a>
 					</div>
 				</aside>
 

diff --git a/src/views/layouts/auth.html b/src/views/layouts/auth.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<%- include('../components/head.html') %>
 
-	<body style="display: flex; flex-direction: column; gap: 10px; min-height: 100vh;">
+	<body style="display: flex; flex-direction: column; gap: 20px; min-height: 100vh;">
 		<%- include('../components/header.html') %>
 
 		<main style="flex: 1;">

diff --git a/src/views/pages/jobs.html b/src/views/pages/jobs.html
@@ -0,0 +1,4 @@
+<div>
+  <h2>Jobs</h2>
+  <p>jobs</p>
+</div>
diff --git a/src/views/pages/notifications.html b/src/views/pages/notifications.html
@@ -0,0 +1,4 @@
+<div>
+  <h2>Notifications</h2>
+  <p>notifications</p>
+</div>
diff --git a/src/views/pages/profile.html b/src/views/pages/profile.html