Allow streamer to set vote point values

db/95-procedures.sql

@@ -36,3 +36,11 @@ CREATE OR REPLACE PROCEDURE update_request_score_modifier(updateurl varchar, sco
 		UPDATE scores SET scoreModifier = scoreModifier + scoreDiff WHERE url = updateurl;
 		CALL update_scores();
 	$$;
+
+CREATE OR REPLACE PROCEDURE update_vote_points(normaluser int, follower int, subscriber int)
+	LANGUAGE SQL
+	AS $$
+		UPDATE config SET normaluservotepoints = normaluser,
+			followervotepoints = follower, subscribervotepoints = subscriber;
+		CALL update_scores();
+	$$;

public/main.js

@@ -318,12 +318,27 @@ function updateColors(colors) {
 		});
 }
 
+function updateVotePoints(user,follower,subscriber) {
+	streamerSettingsErrReset();
+	fetch("/api/updateVotePoints", { method: 'POST', body: new URLSearchParams({
+		user: user,
+		follower: follower,
+		subscriber: subscriber
+	})})
+		.then(response => {
+			if (response.ok) {
+				location.reload();
+			} else {
+				response.text().then(streamerSettingsErr);
+			}
+		});
+}
+
 updateTable();
 
 document.addEventListener("keydown", function onEvent(event) {
     if (event.key === "Escape") {
-        closeMessageModal();
+        closeAllModals();
-        closeAddRequestModal();
     }
 });
 document.getElementById("modalBackground").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeAllModals();});

public/style.css

@@ -185,3 +185,14 @@ div#nav-userpic {
 #deleteRequestLink {
   color: #f00;
 }
+
+#streamerSettingsMain {
+  max-height: 65vh;
+  overflow-y: scroll;
+}
+
+#votepoints {
+  padding: 0 1.5em;
+  display: flex;
+  justify-content: space-between;
+}

src/app.ts

@@ -285,6 +285,44 @@ app.post("/api/updateColors", async (request, response) => {
 	response.send('Successfully updated colors');
 });
 
+app.post("/api/updateVotePoints", async (request, response) => {
+	if (request.session) await validateApiToken(request.session);
+	if (!request.session || !request.session.user) {
+		response.status(401);
+		response.send("Session expired; please log in again");
+		return;
+	}
+	var streamerid = await db.query(queries.getStreamerId).then((result: pg.QueryResult) => result.rows[0]['userid']);
+	if (request.session.user.id != streamerid) {
+		response.status(401);
+		response.send("You are not the streamer");
+		return;
+	}
+	if (!request.body.user) {
+		response.status(400);
+		response.send("Missing user");
+		return;
+	}
+	if (!request.body.follower) {
+		response.status(400);
+		response.send("Missing follower");
+		return;
+	}
+	if (!request.body.subscriber) {
+		response.status(400);
+		response.send("Missing subscriber");
+		return;
+	}
+	var user = request.body.user as number;
+	var follower = request.body.follower as number;
+	var subscriber = request.body.subscriber as number;
+	response.type('text/plain');
+	await db.query(Object.assign(queries.updateVotePoints,{ values: [user,follower,subscriber] }))
+	.catch((e: any) => errorHandler(request,response,e));
+	response.status(200);
+	response.send('Successfully updated page title');
+});
+
 app.post("/api/deleteRequest", async (request, response) => {
 	if (request.session) await validateApiToken(request.session);
 	if (!request.session || !request.session.user) {
@@ -439,10 +477,9 @@ app.get("/", async (request, response) => {
 			loggedIn: false,
 			clientId: config.twitchClientId,
 			urlPrefix: config.urlPrefix,
-			pageTitle: streamerConfig.title,
 			streamerName: streamerInfo['displayname'],
 			streamerProfilePicture: streamerInfo['imageurl'],
-			colors: streamerConfig.colors
+			config: streamerConfig,
 		});
 	} else {
 		var validStates = JSON.stringify((await db.query(queries.getValidStates).then((result: pg.QueryResult) => result.rows)).map((row: any) => row.state));
@@ -452,10 +489,9 @@ app.get("/", async (request, response) => {
 			userProfilePicture: request.session.user.profile_image_url,
 			validStates: validStates,
 			isStreamer: streamerInfo['userid'] == request.session.user.id,
-			pageTitle: streamerConfig.title,
 			streamerName: streamerInfo['displayname'],
 			streamerProfilePicture: streamerInfo['imageurl'],
-			colors: streamerConfig.colors
+			config: streamerConfig,
 		});
 	}
 });

src/queries.ts

@@ -47,6 +47,11 @@ export const updateColors = {
 	text: "UPDATE config SET colors = $1"
 }
 
+export const updateVotePoints = {
+	name: "updateVotePoints",
+	text: "CALL update_vote_points($1,$2,$3)"
+}
+
 // Request-related queries
 export const getRequests = {
 	name: "getRequests",

views/main.eta

@@ -3,7 +3,7 @@
 	<head>
 		<link rel=stylesheet href=/style.css />
 		<link rel=stylesheet href=/colors.css />
-		<title><%~ it.pageTitle.replace('{username}',it.streamerName) %></title>
+		<title><%~ it.config.title.replace('{username}',it.streamerName) %></title>
 		<script>
 			window.loggedIn = <%= it.loggedIn %>;
 			window.validStates = <%~ it.validStates %>;
@@ -14,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"><%~ it.pageTitle.replace('{username}',`<a href="https://twitch.tv/${it.streamerName}">${it.streamerName}</a>`) %></div>
+			<div id="nav-title"><%~ it.config.title.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>
@@ -120,11 +120,30 @@
 				<h2>Streamer Settings</h2>
 				<div class="error" id="streamerSettingsError"></div>
 				<br>
+				<div id="streamerSettingsMain">
+					<div>
+						<h3 style='margin-bottom: 0.5em'>Vote Point Values</h3>
+						<p>
+							<div id="votepoints">
+								<div style="display: inline-block">User: <input type="number" id="userVotePoints" style="width: 3em" value="<%~ it.config.normaluservotepoints %>"></input></div>
+								<div style="display: inline-block">Follower: <input type="number" id="followerVotePoints" style="width: 3em" value="<%~ it.config.followervotepoints %>"></input></div>
+								<div style="display: inline-block">Subscriber: <input type="number" id="subscriberVotePoints" style="width: 3em" value="<%~ it.config.subscribervotepoints %>"></input></div>
+							</div>
+							<br>
+							<button onclick="updateVotePoints(
+								document.getElementById('userVotePoints').value,
+								document.getElementById('followerVotePoints').value,
+								document.getElementById('subscriberVotePoints').value
+								)">Submit</button>
+							<button onclick="updateVotePoints(10,50,100)">Reset</button>
+						</p>
+					</div>
+					<hr>
 					<div>
 						<h3 style='margin-bottom: 0.5em'>Customization</h3>
 						<p>
 							Page Title:
-						<input type="text" id="pageTitle" style="width: 15em" value="<%~ it.pageTitle %>"></input>
+							<input type="text" id="pageTitle" style="width: 15em" value="<%~ it.config.title %>"></input>
 							<button onclick="updatePageTitle(document.getElementById('pageTitle').value)">Submit</button>
 							<button onclick="updatePageTitle('{username}\'s Learn Request Queue')">Reset</button>
 						</p>
@@ -132,15 +151,15 @@
 							<h3>Colors:</h3>
 							<p>Click a color to change it</p>
 							<b>Background:</b><br>
-						Primary: <input type="color" id="color-bg-primary" value="<%= it.colors.bg.primary %>"></input><br>
+							Primary: <input type="color" id="color-bg-primary" value="<%= it.config.colors.bg.primary %>"></input><br>
-						Table: <input type="color" id="color-bg-table" value="<%= it.colors.bg.table %>"></input><br>
+							Table: <input type="color" id="color-bg-table" value="<%= it.config.colors.bg.table %>"></input><br>
-						Navbar: <input type="color" id="color-bg-navbar" value="<%= it.colors.bg.navbar %>"></input><br>
+							Navbar: <input type="color" id="color-bg-navbar" value="<%= it.config.colors.bg.navbar %>"></input><br>
-						Error: <input type="color" id="color-bg-error" value="<%= it.colors.bg.error %>"></input><br>
+							Error: <input type="color" id="color-bg-error" value="<%= it.config.colors.bg.error %>"></input><br>
 							<br>
 							<b>Foreground:</b><br>
-						Primary: <input type="color" id="color-fg-primary" value="<%= it.colors.fg.primary %>"></input><br>
+							Primary: <input type="color" id="color-fg-primary" value="<%= it.config.colors.fg.primary %>"></input><br>
-						Link Hover: <input type="color" id="color-fg-ahover" value="<%= it.colors.fg.ahover %>"></input><br>
+							Link Hover: <input type="color" id="color-fg-ahover" value="<%= it.config.colors.fg.ahover %>"></input><br>
-						Title: <input type="color" id="color-fg-title" value="<%= it.colors.fg.title %>"></input><br>
+							Title: <input type="color" id="color-fg-title" value="<%= it.config.colors.fg.title %>"></input><br>
 							<br>
 							<button onclick="updateColors(getColorObject())">Submit</button>
 							<button onclick="updateColors({bg:{error: '#ff0000',table: '#282828',navbar: '#666666',primary: '#444444'},fg: { title: '#eeeeee', ahover: '#ffffff', primary: '#dddddd'}})">Reset</button>
@@ -153,5 +172,6 @@
 					</div>
 				</div>
 			</div>
+		</div>
 	</body>
 </html>