Customization!

Add ability to control page title and color scheme.

Also, partially implements manual triggering of cronjobs.

Fixes #18
This commit is contained in:
Dessa Simpson 2021-02-21 23:25:23 -07:00
parent 1c34b3f013
commit 6495e1c8ef
6 changed files with 294 additions and 40 deletions

View file

@ -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.pageTitle.replace('{username}',it.streamerName) %></title>
<script>
window.loggedIn = <%= it.loggedIn %>;
window.validStates = <%~ it.validStates %>;
@ -18,6 +18,9 @@
<div id="nav-requests"><a href="/">Requests</a></div>
<%- if (it.loggedIn) { -%>
<div id="nav-addrequest"><a href="#" onclick="openAddRequestModal()">Add Request</a></div>
<%- if (it.isStreamer) { -%>
<div id="nav-streamersettings"><a href="#" onclick="openStreamerSettingsModal()">Streamer Settings</a></div>
<%- } %>
<div id="nav-userpic"><img src="<%= it.userProfilePicture %>" /></div>
<div id="nav-username"><%= it.userName %></div>
<div id="nav-logout"><a href="/logout">Logout</a></div>
@ -39,11 +42,11 @@
</div>
<div id="modalBackground">
<div class="modal" id="messageModal">
<div class="modalClose"><a href="#" onclick="closeMessageModal()">&times;</a></div>
<div class="modalClose"><a href="#" onclick="closeAllModals()">&times;</a></div>
<span id="messageModalText"></span>
</div>
<div class="modal" id="addRequestModal">
<div class="modalClose"><a href="#" onclick="closeAddRequestModal()">&times;</a></div>
<div class="modalClose"><a href="#" onclick="closeAllModals()">&times;</a></div>
<h1>Add Request</h1>
<div class="error" id="addRequestError"></div>
<span id="addRequestInputContainer">
@ -53,7 +56,7 @@
Currently, only Youtube links are accepted.
</div>
<div class="modal" id="updateRequestModal">
<div class="modalClose"><a href="#" onclick="closeAddRequestModal()">&times;</a></div>
<div class="modalClose"><a href="#" onclick="closeAllModals()">&times;</a></div>
<h2>Update Request</h2>
<div class="error" id="updateRequestError"></div>
<br>
@ -84,7 +87,7 @@
</div>
<br>
<div>
<a id="updateMetadataLink" href="#" onclick="updateRequestMetadata(
<a href="#" onclick="updateRequestMetadata(
document.getElementById('updateRequestUrl').innerText
)">Update Request Metadata</a>
<br>
@ -112,6 +115,43 @@
<button onclick="closeDeleteRequestModal()">No</button>
<button onclick="deleteRequest(document.getElementById('updateRequestUrl').innerText)">Yes</button>
</div>
<div class="modal" id="streamerSettingsModal">
<div class="modalClose"><a href="#" onclick="closeAllModals()">&times;</a></div>
<h2>Streamer Settings</h2>
<div class="error" id="streamerSettingsError"></div>
<br>
<div>
<h3 style='margin-bottom: 0.5em'>Customization</h3>
<p>
Page Title:
<input type="text" id="pageTitle" style="width: 15em" value="<%~ it.pageTitle %>"></input>
<button onclick="updatePageTitle(document.getElementById('pageTitle').value)">Submit</button>
<button onclick="updatePageTitle('{username}\'s Learn Request Queue')">Reset</button>
</p>
<p>
<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>
Table: <input type="color" id="color-bg-table" value="<%= it.colors.bg.table %>"></input><br>
Navbar: <input type="color" id="color-bg-navbar" value="<%= it.colors.bg.navbar %>"></input><br>
Error: <input type="color" id="color-bg-error" value="<%= it.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>
Link Hover: <input type="color" id="color-fg-ahover" value="<%= it.colors.fg.ahover %>"></input><br>
Title: <input type="color" id="color-fg-title" value="<%= it.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>
</p>
</div>
<hr>
<div>
<h3 style='margin-bottom: 0.5em'>Batch Jobs</h3>
<a href="#" onclick="cronRequest('processBans')">Force Refresh Banned Users (NYI)</a>
</div>
</div>
</div>
</body>
</html>