add tabs to dashboard
tab with recent redeems and counters then tab with redeems info recent redeems open by default
This commit is contained in:
parent
73194a0fc8
commit
f0b918aa2c
|
|
@ -1,6 +1,6 @@
|
||||||
REDEEMS={
|
REDEEMS={
|
||||||
"hydrate": {"price": 60, "type": "list"},
|
"hydrate": {"price": 60, "type": "list"},
|
||||||
"lurk": {"price": 1, "type": "counter"},
|
"lurk": {"price": 1, "type": "counter", "info": "Let everyone know you're going to lurk."},
|
||||||
"react": {"price": 200, "type": "note", "info": "Attach a link to a video for me to react to."},
|
"react": {"price": 200, "type": "note", "info": "Attach a link to a video for me to react to."},
|
||||||
"request": {"price": 100, "type": "note", "info": "Request a gamemode, level, skin, etc."}
|
"request": {"price": 100, "type": "note", "info": "Request a gamemode, level, skin, etc."}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
function openTab(event, tabName) {
|
||||||
|
var i, tabcontent, tablinks;
|
||||||
|
|
||||||
|
// Get all elements with class="tabcontent" and hide them
|
||||||
|
tabcontent = document.getElementsByClassName("tabcontent");
|
||||||
|
for (i = 0; i < tabcontent.length; i++) {
|
||||||
|
tabcontent[i].style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all elements with class="tablinks" and remove the class "active"
|
||||||
|
tablinks = document.getElementsByClassName("tablinks");
|
||||||
|
for (i = 0; i < tablinks.length; i++) {
|
||||||
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the current tab, and add an "active" class to the button that opened the tab
|
||||||
|
document.getElementById(tabName).style.display = "block";
|
||||||
|
evt.currentTarget.className += " active";
|
||||||
|
}
|
||||||
|
|
@ -102,3 +102,38 @@ pre{padding: 1em;}
|
||||||
select {
|
select {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the buttons that are used to open the tab content */
|
||||||
|
.tab button {
|
||||||
|
background-color: inherit;
|
||||||
|
float: left;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 14px 16px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change background color of buttons on hover */
|
||||||
|
.tab button:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create an active/current tablink class */
|
||||||
|
.tab button.active {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the tab content */
|
||||||
|
.tabcontent {
|
||||||
|
display: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,16 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Redeems Dashboard</title>
|
<title>Redeems Dashboard</title>
|
||||||
</head>
|
</head>
|
||||||
|
<div id="script">
|
||||||
|
|
||||||
|
<script src="/static/dashboard.js"></script>
|
||||||
|
|
||||||
|
<div class="tab">
|
||||||
|
<button class="tablinks" onclick="openTab(event, 'dashboard')", id="defaultOpen">Redeems Dashboard</button>
|
||||||
|
<button class="tablinks" onclick="openTab(event, 'redeems-list')">List of Redeems</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id='dashboard' class="tabcontent">
|
||||||
<body>
|
<body>
|
||||||
<h3>Redeems Dashboard</h3>
|
<h3>Redeems Dashboard</h3>
|
||||||
{% if (username and users ) %}
|
{% if (username and users ) %}
|
||||||
|
|
@ -42,10 +52,10 @@
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>time</th>
|
<th>Time</th>
|
||||||
<th>redeem</th>
|
<th>Redeem</th>
|
||||||
<th>redeemer</th>
|
<th>Redeemer</th>
|
||||||
<th>note</th>
|
<th>Note</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
{% for row in queue %}
|
{% for row in queue %}
|
||||||
|
|
@ -61,16 +71,19 @@
|
||||||
</table>
|
</table>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</body>
|
</body>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id='redeems-list' class="tabcontent">
|
||||||
<h3>Currently Active Redeems</h3>
|
<h3>Currently Active Redeems</h3>
|
||||||
<body>
|
<body>
|
||||||
{% if redeems %}
|
{% if redeems %}
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>redeem</th>
|
<th>Redeem</th>
|
||||||
<th>price</th>
|
<th>Price</th>
|
||||||
<th>type</th>
|
<th>Type</th>
|
||||||
<th>description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
{% for redeem, redeem_info in redeems.items() %}
|
{% for redeem, redeem_info in redeems.items() %}
|
||||||
|
|
@ -86,4 +99,13 @@
|
||||||
</table>
|
</table>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</body>
|
</body>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Get the element with id="defaultOpen" and click on it
|
||||||
|
document.getElementById("defaultOpen").click();
|
||||||
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue