twitchsingstools/web/admin.html

198 lines
10 KiB
HTML
Raw Normal View History

<html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Karaokards bot for twitch chat">
<meta name="author" content="Martyn Ranyard">
<title>Karaokards</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/cover.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
li.match-nomatch{
background-color: #1e2122;
}
li.match-matchtrack{
background-color: #E9B000;
}
li.match-fullmatch{
background-color: #008F95;
}
li.match-matchtrackfuzzt{
background-color: darkgray;
}
li.match-fullmatchfuzzy{
background-color: darkgray;
}
a{
text-decoration-line: underline;
}
.displaySetting{
display: inline
}
.hiddenDisplaySetting{
display: none;
}
.hiddenSave {
display: none;
}
.editSetting{
display: none;
}
.visibleEditSetting{
display: inline;
}
.visibleSave {
display: inline;
}
th {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Karaokards</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="/">Home</a>
</nav>
</div>
</header>
<main role="main" class="inner cover">
<script>
function editMode() {
var alldisps = document.getElementsByClassName("displaySetting");
for (item of alldisps) {
item.classList.add("hiddenDisplaySetting")
}
for (item of alldisps) {
item.classList.remove("displaySetting")
}
var alldisps = document.getElementsByClassName("editSetting");
for (item of alldisps) {
item.classList.add("visibleEditSetting")
}
for (item of alldisps) {
item.classList.remove("editSetting")
}
document.getElementById("saveButton").classList.remove("hiddenSave")
document.getElementById("saveButton").classList.add("visibleSave")
document.getElementById("leaveButton").classList.remove("hiddenSave")
document.getElementById("leaveButton").classList.add("visibleSave")
document.getElementById("yuhateme").classList.remove("hiddenSave")
document.getElementById("yuhateme").classList.add("visibleSave")
}
</script>
<h1 class="cover-heading">Karaokards admin panel for {{.Channel}}!!!</h1>
<ul class="nav nav-tabs" style="width: 80%;">
<li class="nav-item">
<a id="insights" class="nav-link active panel" href="#" onclick="tabClick(this)">Insights</a>
</li>
<li class="nav-item">
<a id="data" class="nav-link panel" href="#" onclick="tabClick(this)">Data</a>
</li>
<li class="nav-item">
<a id="csv" class="nav-link panel" href="#" onclick="tabClick(this)">CSV</a>
</li>
<li class="nav-item">
<a id="bot" class="nav-link panel" href="#" onclick="tabClick(this)">Bot</a>
</li>
</ul>
<div style="width: 80%;overflow-y: scroll; display: block;" id="insightspanel" class="controlpanel">
Top 10 Songs :
<table>
<thead><tr><td>What</td><td>Sings</td>
{{ range .TopNSongs }}
<tr><td>{{ .SongTitle }}</td><td>{{ .Sings }}</td></tr>
{{ end }}
</table>
</div>
<div style="width: 80%;overflow-y: scroll; display: none;" id="datapanel" class="controlpanel">
<table>
<thead><tr><td>Published</td><td>Who</td><td>What</td><td>Last sang this song</td><td>Last dueted with performer</td></tr></thead>
{{ range .SongData }}
<tr><td title="{{ .Date }}">{{ .Date | niceDate }}</td><td>{{ .SongTitle }}</td><td>{{ .OtherSinger }}</td><td title="{{ .LastSungSong }}">{{ .LastSungSong | niceDate }}</td><td title="{{ .LastSungSinger }}">{{ .LastSungSinger | niceDate }}</td></tr>
{{ end }}
</table>
</div>
<div style="overflow-y: scroll; display: none;" id="csvpanel" class="controlpanel">
<h2>CSV support coming!</h2>
</div>
<div style="overflow-y: scroll; display: none;" id="botpanel" class="controlpanel">
{{ if .HasLeft }}
<h2>Not in your channel at the moment!</h2>
<p>The bot is not currently in your channel, chances are you've not ever asked it to join, you asked it to leave, or something went horribly wrong.</p>
<p>You can invite the bot to your channel by clicking here : <input id="joinButton" type="submit" name="join" value="Come on in"></p>
{{ else }}
<form method="POST">
{{ if .Leaving }}
<h2>Do you really want this bot to leave your channel?</h2>
<p><input id="leaveButton" type="submit" name="reallyleave" value="Really leave twitch channel"></p>
{{ else }}
<h2>Note you can give your moderators the url you are on right now to control this bot. They don't have to be logged into twitch to do so.</h2>
<table>
<thead><tr><td>Channel Data :</td><td><input type="button" value="Edit" onclick="javascript:editMode();"></td></tr></thead>
<tbody>
<tr><td>Member of channel since {{.SinceTimeUTC}}</td></tr>
<tr><td>Command for prompt:</td><td class="displaySetting"></tdclass>{{.Command}}</td><td class="editSetting"><input type="text" name="Command" value="{{.Command}}"></td></tr>
<tr><td>Extra prompts (one per line):</td><td class="displaySetting">{{.ExtraStrings}}</td><td class="editSetting"><textarea name="ExtraStrings" >{{.ExtraStrings}}</textarea></td></tr>
<tr><td>&nbsp;</td><td><input id="saveButton" type="submit" class="hiddenSave" name="save" value="Save changes"></td></tr>
<tr id="yuhateme" class="hiddenSave"><td>Or... please don't go but...</td></tr>
<tr><td><input id="leaveButton" type="submit" class="hiddenSave" name="leave" value="Leave twitch channel"></td></tr>
</tbody>
</table>
{{ end }}
{{ end }}
</div>
</form>
<script type="text/javascript">
function tabClick(self) {
var theTabs = document.querySelectorAll(".panel")
for (tab of theTabs) {
tab.className = "nav-link panel"
}
self.className = "nav-link panel active"
var thePanels = document.querySelectorAll(".controlpanel")
for (panel of thePanels) {
panel.style.display = "none"
}
document.getElementById(self.id+"panel").style.display = "block"
}
</script>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</footer>
</div>
</body>
</html>
</body>
</html>