From 1c34b3f0139fcad8ecb520ceb1aea2f731bbc7b7 Mon Sep 17 00:00:00 2001
From: Dessa Simpson <dxs@k7dxs.net>
Date: Sun, 21 Feb 2021 20:13:47 -0700
Subject: [PATCH] Get page title and colors from database

See #18
---
 db/05-config.sql |  6 ++++--
 src/app.ts       | 14 +++++++++++++-
 src/queries.ts   |  5 +++++
 views/colors.eta | 41 +++++++++++++++++++++++++++++++++++++++++
 views/main.eta   |  7 ++++---
 5 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 views/colors.eta

diff --git a/db/05-config.sql b/db/05-config.sql
index edf6d9e..1c4b65a 100644
--- a/db/05-config.sql
+++ b/db/05-config.sql
@@ -3,8 +3,10 @@ CREATE TABLE config (
 	normaluservotepoints int NOT NULL,
 	followervotepoints int NOT NULL,
 	subscribervotepoints int NOT NULL,
+	title varchar NOT NULL,
+	colors jsonb NOT NULL,
 	PRIMARY KEY (rowLock)
 );
 
-INSERT INTO config (normalUserVotePoints,followerVotePoints,subscriberVotePoints)
-	VALUES (10,50,100);
+INSERT INTO config (normalUserVotePoints,followerVotePoints,subscriberVotePoints,title,colors)
+	VALUES (10,50,100,'{username}''s Learn Request Queue','{"bg": {"primary": "#444444","table": "#282828","navbar": "#666666","error": "#ff0000"},"fg": {"primary": "#dddddd","ahover": "#ffffff","title": "#eeeeee"}}');
diff --git a/src/app.ts b/src/app.ts
index 494aae9..3bdc436 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -302,7 +302,7 @@ app.get("/callback", async (request, response) => {
 app.get("/", async (request, response) => {
 	if (request.session) await validateApiToken(request.session);
 	var streamerInfo = await db.query(queries.getStreamerInfo).then((result: pg.QueryResult) => result.rows[0]);
-	var validStates = JSON.stringify((await db.query(queries.getValidStates).then((result: pg.QueryResult) => result.rows)).map((row: any) => row.state));
+	var config = await db.query(queries.getConfig).then((result: pg.QueryResult) => result.rows[0]);
 	if (typeof streamerInfo == 'undefined') {
 		response.redirect(307, `https://id.twitch.tv/oauth2/authorize?client_id=${config.twitchClientId}&redirect_uri=${config.urlPrefix}/callback&response_type=code&scope=channel:read:subscriptions moderation:read`);
 		return;
@@ -312,22 +312,34 @@ app.get("/", async (request, response) => {
 			loggedIn: false,
 			clientId: config.twitchClientId,
 			urlPrefix: config.urlPrefix,
+			pageTitle: config.title,
 			streamerName: streamerInfo['displayname'],
 			streamerProfilePicture: streamerInfo['imageurl']
 		});
 	} else {
+		var validStates = JSON.stringify((await db.query(queries.getValidStates).then((result: pg.QueryResult) => result.rows)).map((row: any) => row.state));
 		response.render('main.eta', {
 			loggedIn: true,
 			userName: request.session.user.display_name,
 			userProfilePicture: request.session.user.profile_image_url,
 			validStates: validStates,
 			isStreamer: streamerInfo['userid'] == request.session.user.id,
+			pageTitle: config.title,
 			streamerName: streamerInfo['displayname'],
 			streamerProfilePicture: streamerInfo['imageurl']
 		});
 	}
 });
 
+app.get("/colors.css", async (_request, response) => {
+	var streamerInfo = await db.query(queries.getStreamerInfo).then((result: pg.QueryResult) => result.rows[0]);
+	var colors = await db.query(queries.getConfig).then((result: pg.QueryResult) => result.rows[0]['colors']);
+	console.log(colors);
+	if (typeof streamerInfo == 'undefined') return;
+	response.contentType("text/css");
+	response.render('colors.eta', colors);
+});
+
 // Streamer Panel
 //app.get("/streamer/", async (request, response) => {
 //
diff --git a/src/queries.ts b/src/queries.ts
index 7b6725e..b9eeeb7 100644
--- a/src/queries.ts
+++ b/src/queries.ts
@@ -26,6 +26,11 @@ export const getStreamerInfo = {
 	text: "SELECT userid,displayname,imageurl FROM streamer_user_vw"
 }
 
+export const getConfig = {
+	name: "getConfig",
+	text: "SELECT * FROM config"
+}
+
 export const updateStreamer = {
 	name: "updateStreamer",
 	text: "INSERT INTO streamer (userid,tokenPair) VALUES ($1,$2)\
diff --git a/views/colors.eta b/views/colors.eta
new file mode 100644
index 0000000..b98c5da
--- /dev/null
+++ b/views/colors.eta
@@ -0,0 +1,41 @@
+body {
+    background-color: <%= it.bg.primary %>;
+    color: <%= it.fg.primary %>;
+}
+
+a {
+	color: <%= it.fg.primary %>;
+}
+
+a:hover {
+	color: <%= it.fg.ahover %>;
+}
+
+.error {
+    background-color: <%= it.bg.error %>;
+}
+
+#navbar {
+	background-color: <%= it.bg.navbar %>;
+}
+
+#nav-title, #nav-title a {
+	color: <%= it.fg.title %>;
+}
+
+#main {
+	background-color: <%= it.bg.table %>;
+}
+
+#modalBackground {
+	background-color: <%= it.bg.primary %>;
+	background-color: <%= it.bg.primary %>aa;
+}
+
+.modal {
+	background-color: <%= it.bg.primary %>;
+}
+
+#deleteRequestLink {
+  color: <%= it.bg.error %>;
+}
diff --git a/views/main.eta b/views/main.eta
index 90f9f82..c04023e 100644
--- a/views/main.eta
+++ b/views/main.eta
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<link rel=stylesheet href=style.css />
-		<title><%= it.streamerName %>'s Learn Request Queue</title>
+		<link rel=stylesheet href=/style.css />
+		<link rel=stylesheet href=/colors.css />
+		<title><%= it.pageTitle.replace('{username}',it.streamerName) %></title>
 		<script>
 			window.loggedIn = <%= it.loggedIn %>;
 			window.validStates = <%~ it.validStates %>;
@@ -13,7 +14,7 @@
 	<body>
 		<div id="navbar">
 			<div id="nav-streamerpic"><a href="https://twitch.tv/<%= it.streamerName %>"><img src="<%= it.streamerProfilePicture %>" /></a></div>
-			<div id="nav-title"><a href="https://twitch.tv/<%= it.streamerName %>"><%= it.streamerName %></a>'s Learn Request Queue</div>
+			<div id="nav-title"><%~ it.pageTitle.replace('{username}',`<a href="https://twitch.tv/${it.streamerName}">${it.streamerName}</a>`) %></div>
 			<div id="nav-requests"><a href="/">Requests</a></div>
 			<%- if (it.loggedIn) { -%>
 			<div id="nav-addrequest"><a href="#" onclick="openAddRequestModal()">Add Request</a></div>