From f0b918aa2cb44d9a82356476df0e7a3aefbb0583 Mon Sep 17 00:00:00 2001 From: Lili Date: Wed, 9 Nov 2022 14:35:45 +0100 Subject: [PATCH] add tabs to dashboard tab with recent redeems and counters then tab with redeems info recent redeems open by default --- tlapbot/default_redeems.py | 2 +- tlapbot/static/dashboard.js | 19 ++++ tlapbot/static/style.css | 37 ++++++- tlapbot/templates/dashboard.html | 178 +++++++++++++++++-------------- 4 files changed, 156 insertions(+), 80 deletions(-) create mode 100644 tlapbot/static/dashboard.js diff --git a/tlapbot/default_redeems.py b/tlapbot/default_redeems.py index 32d9c0f..b94a4a1 100644 --- a/tlapbot/default_redeems.py +++ b/tlapbot/default_redeems.py @@ -1,6 +1,6 @@ REDEEMS={ "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."}, "request": {"price": 100, "type": "note", "info": "Request a gamemode, level, skin, etc."} } \ No newline at end of file diff --git a/tlapbot/static/dashboard.js b/tlapbot/static/dashboard.js new file mode 100644 index 0000000..193529b --- /dev/null +++ b/tlapbot/static/dashboard.js @@ -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"; + } \ No newline at end of file diff --git a/tlapbot/static/style.css b/tlapbot/static/style.css index 0d7c5e0..9ea94a6 100644 --- a/tlapbot/static/style.css +++ b/tlapbot/static/style.css @@ -101,4 +101,39 @@ pre{padding: 1em;} } select { width: auto; -} \ No newline at end of file +} + +.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; + } \ No newline at end of file diff --git a/tlapbot/templates/dashboard.html b/tlapbot/templates/dashboard.html index 4b8fcce..b880186 100644 --- a/tlapbot/templates/dashboard.html +++ b/tlapbot/templates/dashboard.html @@ -4,86 +4,108 @@ Redeems Dashboard - -

Redeems Dashboard

- {% if (username and users ) %} - - - - - - - {% for user in users %} - - - - - {% endfor %} -
Points balance:
{{ user[0] }} {{ user[1] }}
- {% endif %} +
- {% if counters %} - - - - - - - {% for counter in counters %} - - - - - {% endfor %} -
Counters
{{ counter[0] }} {{ counter[1] }}
- {% endif %} + - {% if queue %} - - - - - - - - - - {% for row in queue %} - - - - - {% if row[2] %} - +
+ + +
+ +
+ +

Redeems Dashboard

+ {% if (username and users ) %} +
timeredeemredeemernote
{{ row[0].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}{{ row[1] }}{{ row[3] }}{{ row[2] }}
+ + + + + + {% for user in users %} + + + + + {% endfor %} +
Points balance:
{{ user[0] }} {{ user[1] }}
{% endif %} - - {% endfor %} - - {% endif %} - -

Currently Active Redeems

- - {% if redeems %} - - - - - - - - - - {% for redeem, redeem_info in redeems.items() %} - - - - - {% if redeem_info["info"] %} - + + {% if counters %} +
redeempricetypedescription
{{ redeem }}{{ redeem_info["price"] }}{{ redeem_info["type"] }}{{ redeem_info["info"] }}
+ + + + + + {% for counter in counters %} + + + + + {% endfor %} +
Counters
{{ counter[0] }} {{ counter[1] }}
{% endif %} - - {% endfor %} - - {% endif %} - + + {% if queue %} + + + + + + + + + + {% for row in queue %} + + + + + {% if row[2] %} + + {% endif %} + + {% endfor %} +
TimeRedeemRedeemerNote
{{ row[0].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}{{ row[1] }}{{ row[3] }}{{ row[2] }}
+ {% endif %} + +
+ +
+

Currently Active Redeems

+ + {% if redeems %} + + + + + + + + + + {% for redeem, redeem_info in redeems.items() %} + + + + + {% if redeem_info["info"] %} + + {% endif %} + + {% endfor %} +
RedeemPriceTypeDescription
{{ redeem }}{{ redeem_info["price"] }}{{ redeem_info["type"] }}{{ redeem_info["info"] }}
+ {% endif %} + +
+ + + + +