mgmt.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>OCB Management Panel</title>
  5. <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
  6. <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  7. </head>
  8. <script src="/static/mgmtpanel.js"></script>
  9. <div class="navbar">
  10. <div class="tab">
  11. <button class="tablinks" data-tab="queue" onclick="openTab(event, 'queue')">Queue</button>
  12. <button class="tablinks" data-tab="accounts" onclick="openTab(event, 'accounts')">Manage Accounts</button>
  13. <button class="tablinks" data-tab="managerewards" onclick="openTab(event, 'managerewards')">Rewards</button>
  14. <button class="tablinks" data-tab="categories" onclick="openTab(event, 'categories')">Categories</button>
  15. <button class="tablinks" data-tab="announcements" onclick="openTab(event, 'announcements')">Announcements</button>
  16. <button class="tablinks" data-tab="settings" onclick="openTab(event, 'settings')">Settings</button>
  17. {% if kofi_integration %}
  18. <button class="tablinks" data-tab="kofi-settings" onclick="openTab(event, 'kofi-settings')">Kofi Settings</button>
  19. {% endif %}
  20. </div>
  21. <img src="/static/img/ownchatbotwide.png">
  22. </div>
  23. <div id='queue' class="tabcontent">
  24. <body>
  25. {% if votes %}
  26. <table>
  27. <thead>
  28. <tr>
  29. <th style="width: 20%;">Active Votes</th>
  30. <th style="width: 40%;">Description</th>
  31. <th style="width: 20%;">Price</th>
  32. <th style="width: 20%;">Current Tally</th>
  33. <th></th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. {% for vote in votes %}
  38. <tr>
  39. <td> {{ prefix }}{{ vote[0] }} </td>
  40. <td> {{ vote[2] }} </td>
  41. {% set points_label = 'point' if rewards[vote[0]]["price"] == 1 else 'points' %}
  42. <td> {{ rewards[vote[0]]["price"] }} {{ points_label }}</td>
  43. {% set votes_label = 'vote' if vote[1] == 1 else 'votes' %}
  44. <td> {{ vote[1] }} {{ votes_label }}</td>
  45. <td></td>
  46. </tr>
  47. {% endfor %}
  48. </tbody>
  49. </table>
  50. {% else %}
  51. <h3> You currently have no active votes. </h3>
  52. {% endif %}
  53. <br>
  54. <hr>
  55. {% if goals %}
  56. <table>
  57. <thead>
  58. <tr>
  59. <th style="width: 20%;">Active Goals</th>
  60. <th style="width: 40%;">Description</th>
  61. <th style="width: 25%;">Progress</th>
  62. <th></th>
  63. </tr>
  64. </thead>
  65. <tbody>
  66. {% for goal in goals %}
  67. <tr>
  68. <td> {{ prefix }}{{ goal[0] }} </td>
  69. <td> {{ goal[3] }} </td>
  70. {% set progress = goal[1] / goal[2] * 100 %}
  71. <td>
  72. <div class="bar-light-grey bar-tiny bar-round" style="position: relative;">
  73. <div class="bar-round bar-blue" style="text-align: center; width:{{ progress }}%;">{{ '%0.0f'| format(progress| float) }}%
  74. </div>
  75. {% set milestones = rewards[goal[0]]["milestones"] %}
  76. {% for milestone_key, milestone in milestones.items() %}
  77. {% if milestones[milestone_key][0] and milestones[milestone_key][1] %}
  78. {% if milestones[milestone_key][1] < goal[2] %}
  79. {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
  80. <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
  81. <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
  82. </div>
  83. {% endif %}
  84. {% endif %}
  85. {% endfor %}
  86. </div>
  87. </td>
  88. {% if goal[1] == goal[2] %}
  89. <td> {{ goal[1] }} / {{ goal[2] }} <img src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
  90. {% else %}
  91. <td> {{ goal[1] }} / {{ goal[2] }} </td>
  92. {% endif %}
  93. </tr>
  94. {% endfor %}
  95. <tr style="border-bottom: none;">
  96. <td>
  97. </td>
  98. <td>
  99. </td>
  100. <td style="font-size: small;">
  101. (Mouse over flags for details)
  102. </td>
  103. </tr>
  104. </tbody>
  105. </table>
  106. {% else %}
  107. <h3> You currently have no active goals. </h3>
  108. {% endif %}
  109. <hr>
  110. <h3>Redeems Queue</h3>
  111. {% if queue %}
  112. <a href="/mgmt/clearfulfilled"><button class="button button2" onclick="openTab(event, 'queue')">Clear Fullfilled Rewards</button></a>&nbsp;&nbsp;<a href="/mgmt/clearqueue"><button class="button button2" onclick="openTab(event, 'queue')">Clear All Rewards</button></a>
  113. <table>
  114. <thead>
  115. <tr>
  116. <th>Time</th>
  117. <th>Reward</th>
  118. <th>User</th>
  119. <th></th>
  120. </tr>
  121. </thead>
  122. <tbody>
  123. {% for row in queue %}
  124. <tr>
  125. <td>{{ row[1].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}</td>
  126. {% if row[4] %}
  127. <td><s>{{ rewards[row[2]]["info"] }}</s></td>
  128. {% else %}
  129. <td>{{ rewards[row[2]]["info"] }}</td>
  130. {% endif %}
  131. <td>{{ row[6] }}</td>
  132. {% if row[4] %}
  133. {% if row[5] %}
  134. <td>Refunded</td>
  135. {% else %}
  136. <td><a href="/mgmt/refund?reward={{ row[2] }}&username={{ row[6] }}&rewarder_id={{ row[3] }}&reward_id={{ row[0] }} "><button class="button button2" onclick="openTab(event, 'queue')">Refund</button></a></td>
  137. {% endif %}
  138. {% else %}
  139. <td><a href="/mgmt/fulfill?reward_id={{ row[0] }}&username={{ row[6] }}"><button class="button button2" onclick="openTab(event, 'queue')">Fulfill</button></a></td>
  140. {% endif %}
  141. </tr>
  142. {% endfor %}
  143. </tbody>
  144. </table>
  145. {% else %}
  146. <p>There are currently no rewards waiting in the queue.</p>
  147. {% endif %}
  148. </body>
  149. </div>
  150. <div id='accounts' class="tabcontent">
  151. <body>
  152. <h3>Manage Viewer Accounts</h3>
  153. {% if users %}
  154. <table>
  155. <thead>
  156. <tr>
  157. <th>User</th>
  158. <th>Points balance</th>
  159. <th>Email</th>
  160. <th></th>
  161. </tr>
  162. </thead>
  163. <tbody>
  164. {% for user in users %}
  165. <tr>
  166. <td> {{ user[1] }} </td>
  167. {% set points_label = 'point' if user[2] == 1 else 'points' %}
  168. <td>{{ user[2] }} {{ points_label }}</td>
  169. {% if user[4] %}
  170. <td>{{ user[4] }}</td>
  171. {% else %}
  172. <td>none</td>
  173. {% endif %}
  174. <td> <a href="/mgmt/edit_account/{{ user[0] }}?name={{ user[1] }}&points={{ user[2] }}&email={{ user[4] }}"><button class="button button2" onclick="openTab(event, 'panel')">Edit</button></a> </td>
  175. </tr>
  176. {% endfor %}
  177. </tbody>
  178. </table>
  179. {% endif %}
  180. </body>
  181. </div>
  182. <div id='managerewards' class="tabcontent">
  183. <h3>Manage Rewards</h3>
  184. <body>
  185. <div>
  186. <h4>Reward Types:</h4>
  187. <ul>
  188. <li><u>Redeems</u> are standard stream point redeems. They get added to the queue for the streamer to fulfill.</li>
  189. <li><u>Specials</u> are redeems, but they run system commands and scripts. This enables you to integrate a lot of other fun things, such as letting your viewers control lighting, activate devices, trigger webhooks, etc. Specials do not go into the queue, because they happen automagically.</li>
  190. <ul>
  191. <li>Be careful with this one. It does require some more advanced scripting/command line knowledge. Make sure you test your specials before letting viewers use them.</li>
  192. </ul>
  193. <li><u>Votes</u> are just that, votes. Your viewers can vote on them.</li>
  194. <li><u>Goals</u> are rewards that everyone in chat can contribute to. The streamer fulfills the reward when the goal is reached.</li>
  195. <li>Add rewards to categories to enable and disable groups of rewards.</li>
  196. <li>Rewards with no categories are inactive.</li>
  197. </ul>
  198. </div>
  199. <table>
  200. <tr>
  201. <td>
  202. </td>
  203. <td>
  204. </td>
  205. <td>
  206. </td>
  207. <td>
  208. </td>
  209. </tr>
  210. <tr>
  211. <td>
  212. <a href="{{ url_for('web_panels.add', reward_type='redeem') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Redeem</button></a><br>
  213. </td>
  214. <td>
  215. <a href="{{ url_for('web_panels.add', reward_type='special') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Special</button></a><br>
  216. </td>
  217. <td>
  218. <a href="{{ url_for('web_panels.add', reward_type='vote') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Vote</button></a><br>
  219. </td>
  220. <td>
  221. <a href="{{ url_for('web_panels.add', reward_type='goal') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Goal</button></a><br>
  222. </td>
  223. </tr>
  224. </table>
  225. <br>
  226. {% if rewards %}
  227. Rewards in <span style="color: red !important;">red</span> are inactive. To activate a reward, add it to an active category.
  228. <table>
  229. <thead>
  230. <tr>
  231. <th style="width:15%">Name</th>
  232. <th>Target</th>
  233. <th>Price</th>
  234. <th>Info</th>
  235. <th>Cool down</th>
  236. <th>Category</th>
  237. <th style="width:15%">Actions</th>
  238. </tr>
  239. </thead>
  240. <tbody>
  241. {% for reward, reward_info in rewards.items() %}
  242. {% if reward in active_rewards %}
  243. <tr>
  244. {% else %}
  245. <tr style="color: red;">
  246. {% endif %}
  247. <td>{{ prefix }}{{ reward }}</td>
  248. {% if reward_info["type"] == "goal" %}
  249. <td>{{ reward_info["target"] }}</td>
  250. {% else %}
  251. <td>N/A</td>
  252. {% endif %}
  253. {% if reward_info["type"] == "goal" %}
  254. <td>N/A</td>
  255. {% else %}
  256. <td>{{ reward_info["price"] }}</td>
  257. {% endif %}
  258. <td>{{ reward_info["info"] }}</td>
  259. {% if reward_info["cooldown"] > 0 %}
  260. {% set minutes_label = 'minute' if reward_info["cooldown"] == 1 else 'minutes' %}
  261. <td>{{ reward_info["cooldown"] }} {{ minutes_label }}</td>
  262. {% else %}
  263. <td>None</td>
  264. {% endif %}
  265. <td>{{ reward_info["categories"] | join(', ') }}</td>
  266. <td>
  267. <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: green;">Edit</span></button></a>&nbsp
  268. <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: red;">Delete</span></button></a>&nbsp
  269. {% if reward_info["type"] == "goal" or reward_info["type"] == "vote" %}
  270. <a href="{{ url_for('web_panels.reset', reward_name=reward, reward_type=reward_info["type"]) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Reset</span></button></a>
  271. {% endif %}
  272. </td>
  273. </tr>
  274. {% endfor %}
  275. </tbody>
  276. </table>
  277. {% endif %}
  278. </body>
  279. </div>
  280. <div id='categories' class="tabcontent">
  281. <body>
  282. <h3>Manage Categories</h3>
  283. <div>
  284. &nbsp;&nbsp;<a href="{{ url_for('web_panels.add', reward_type='category') }}"><button class="button button2" onclick="openTab(event, 'categories')">Create a new category</button></a><br>
  285. <table>
  286. <thead>
  287. <tr>
  288. <th style="width: 50%;"><h3>Active Categories</h3></th>
  289. <th style="width: 50%;"><h3>Inactive Categories</h3></th>
  290. </tr>
  291. </thead>
  292. <tbody>
  293. <tr>
  294. <td>
  295. {% for cat in active_categories %}
  296. &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/deactivate/{{ cat }}"><span style="color: green;">Deactivate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/active"><span style="color: red;">Delete</span></a><br>
  297. {% endfor %}
  298. </td>
  299. <td>
  300. {% for cat in inactive_categories %}
  301. &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/activate/{{ cat }}"><span style="color: green;">Activate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/inactive"><span style="color: red;">Delete</span></a><br>
  302. {% endfor %}
  303. </td>
  304. </tr>
  305. </tbody>
  306. </table>
  307. </div>
  308. </body>
  309. </div>
  310. <div id='announcements' class="tabcontent">
  311. <body>
  312. <form method="POST" action="/mgmt/announcements">
  313. <table>
  314. <h3>Manage Announcements</h3>
  315. <table>
  316. <thead>
  317. <tr style="border-bottom: none;">
  318. <th style="width: 20%;"></th>
  319. <th style="width: 50%;"></th>
  320. <th></th>
  321. </tr>
  322. </thead>
  323. <tr>
  324. <td> <label for="announce_enable">Enable:</label> </td>
  325. {% if settings_info[9] %}
  326. <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[9] }}" checked> </td>
  327. {% else %}
  328. <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[9] }}"> </td>
  329. {% endif %}
  330. <td>Enable periodic announcements</td>
  331. </tr>
  332. <tr>
  333. <td> <label for="announce_interval">Interval:</label> </td>
  334. <td> <input type="number" name="announce_interval" value="{{ settings_info[10] }}" size="2" required> minutes</td>
  335. <td>How long between each announcement?</td>
  336. </tr>
  337. <tr>
  338. <td> <label for="announcements">Announcements:</label> </td>
  339. <td>
  340. <textarea name="announcements" rows="5" cols="50">{{ announcements | join('\n') }}</textarea>
  341. </td>
  342. <td>Enter your announcements, one per line.</td>
  343. </tr>
  344. </table>
  345. <br><button class="button button2" type="submit">Save Changes</button><br>
  346. </form>
  347. <br><br>
  348. </body>
  349. </div>
  350. <div id='settings' class="tabcontent">
  351. <body style="text-align: left;">
  352. <form method="POST" action="/mgmt/settings">
  353. <table>
  354. <h3>OwnchatBot Settings</h3>
  355. <thead>
  356. <tr style="border-bottom: none;">
  357. <th style="width: 20%;"></th>
  358. <th></th>
  359. <th style="width: 50%;"></th>
  360. </tr>
  361. </thead>
  362. <tr>
  363. <td> <label for="mgmt_auth">Management Auth Code:</label> </td>
  364. <td style="padding: 5px;"> <input type="text" name="mgmt_auth" value="{{ settings_info[0] }}" size="30" required> </td>
  365. <td>Pregenerated during install. Goes in your management panel URL. Keep it secret. Keep it safe.<br>
  366. http://localhost:5000/mgmt?auth={{ settings_info[0] }}</td>
  367. </tr>
  368. <tr>
  369. <td> <label for="points_interval">Points Interval:</label> </td>
  370. <td> <input type="number" name="points_interval" value="{{ settings_info[1] }}" size="5" required> minutes</td>
  371. <td>How often do you want to award your viewers points?</td>
  372. </tr>
  373. <tr>
  374. <td> <label for="points_award">Points Award:</label> </td>
  375. <td> <input type="number" name="points_award" value="{{ settings_info[2] }}" size="5" required> points</td>
  376. <td>How many points do you want to award them?</td>
  377. </tr>
  378. <tr>
  379. <td> <label for="gunicorn_logging">Gunicorn Logging:</label> </td>
  380. {% if settings_info[3] %}
  381. <td> <input type="checkbox" name="gunicorn_logging" value="{{ settings_info[3] }}" checked> </td>
  382. {% else %}
  383. <td> <input type="checkbox" name="gunicorn_logging" value="{{ settings_info[3] }}"> </td>
  384. {% endif %}
  385. <td>Enable Gunicorn logging integration.</td>
  386. </tr>
  387. <tr>
  388. <td> <label for="prefix">Chat Command Prefix:</label> </td>
  389. <td> <input type="text" name="prefix" maxlength="1" size="1" value="{{ settings_info[4] }}" required> </td>
  390. <td>Character that preceeds chat commands, so OwnchatBot knows what to look for.<br>Example: "{{ settings_info[4] }}points"</td>
  391. </tr>
  392. </table>
  393. <h3>Owncast Integration</h3>
  394. <table>
  395. <thead>
  396. <tr style="border-bottom: none;">
  397. <th style="width: 20%;"></th>
  398. <th></th>
  399. <th style="width: 50%;"></th>
  400. </tr>
  401. </thead>
  402. <tr>
  403. <td> <label for="access_token">Access Token:</label> </td>
  404. <td style="padding: 5px;"> <input type="text" name="access_token" value="{{ settings_info[5] }}" size="40"> </td>
  405. <td>Create in Owncast Admin panel. Integrations -> Access Tokens</td>
  406. </tr>
  407. <tr>
  408. <td> <label for="owncast_url">Your Owncast URL:</label> </td>
  409. <td> <input type="text" name="owncast_url" value="{{ settings_info[6] }}" size="40"> </td>
  410. <td>The address of your Owncast instance. Can be an internal address, such as "localhost" if that's the case.</td>
  411. </tr>
  412. </table>
  413. <h3>Kofi Integration</h3>
  414. <table>
  415. <thead>
  416. <tr style="border-bottom: none;">
  417. <th style="width: 20%;"></th>
  418. <th></th>
  419. <th style="width: 50%;"></th>
  420. </tr>
  421. </thead>
  422. <tr>
  423. <td> <label for="kofi_integration">Enable:</label> </td>
  424. {% if settings_info[8] %}
  425. <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[8] }}" checked> </td>
  426. {% else %}
  427. <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[8] }}"> </td>
  428. {% endif %}
  429. <td>Enable Ko-fi integration.</td>
  430. </tr>
  431. <tr>
  432. <td> <label for="kofi_token">Verification Token:</label> </td>
  433. <td style="padding: 5px;"> <input type="text" name="kofi_token" value="{{ settings_info[7] }}" size="40"> </td>
  434. <td>Get from Kofi -> More -> API -> Webhooks -> Advanced -> Verification Token.</td>
  435. </tr>
  436. </table>
  437. <br><button class="button button2" type="submit">Save Changes</button><br>
  438. </form>
  439. <br><br>
  440. </body>
  441. </div>
  442. <div id='kofi-settings' class="tabcontent">
  443. <body style="text-align: left;">
  444. <form method="POST" action="/mgmt/ksettings">
  445. <table>
  446. <h3>Kofi Settings</h3>
  447. <thead>
  448. <tr style="border-bottom: none;">
  449. <th style="width: 20%;"></th>
  450. <th></th>
  451. <th style="width: 50%;"></th>
  452. </tr>
  453. </thead>
  454. <tr>
  455. <td> <label for="enable_tips">Enable points for tips:</label> </td>
  456. {% if kofi_settings['tips'] %}
  457. <td> <input type="checkbox" name="enable_tips" value="{{ kofi_settings['tips'] }}" checked> </td>
  458. {% else %}
  459. <td> <input type="checkbox" name="enable_tips" value="{{ kofi_settings['tips'] }}"> </td>
  460. {% endif %}
  461. <td>Enable awarding points for tips</td>
  462. </tr>
  463. <tr>
  464. <td> <label for="set_tip_points">Points per dollar:</label> </td>
  465. <td> <input type="number" name="set_tip_points" value="{{ kofi_settings['tip_points'] }}" size="5" required> points</td>
  466. <td>How many points should viewers recieve, for every dollar they tip?</td>
  467. </tr>
  468. <tr>
  469. <td> <label for="kofi_url">Kofi Page:</label> </td>
  470. <td style="padding: 5px;"> <input type="text" name="kofi_url" value="{{ kofi_settings['kofi_url'] }}" size="30"> </td>
  471. <td>What is your Kofi page URL?</td>
  472. </tr>
  473. <tr>
  474. <table>
  475. <tbody>
  476. <tr style="border-bottom: none;">
  477. Which logo would you like to use?
  478. </tr>
  479. {% for kofi_logo in kofi_logos %}
  480. {% if loop.index0 % 8 == 0 %}
  481. <tr style="border-bottom: none;">
  482. {% endif %}
  483. <td>
  484. <label for="kofi_logo"><img src="/static/img/kofi/{{ kofi_logo }}"></label>
  485. {% if kofi_logo == kofi_settings['kofi_logo'] %}
  486. <input type="radio" name="kofi_logo" value="{{ kofi_logo }}" checked>
  487. {% else %}
  488. <input type="radio" name="kofi_logo" value="{{ kofi_logo }}">
  489. {% endif %}
  490. </td>
  491. {% if loop.index0 % 8 == 7 or loop.last %}
  492. </tr> <!-- Close the row after 8 items or at the end -->
  493. {% endif %}
  494. {% endfor %}
  495. </tbody>
  496. </table>
  497. </tr>
  498. </table>
  499. <br><button class="button button2" type="submit">Save Changes</button><br>
  500. </form>
  501. <br><br>
  502. <i>Kofi subscription support coming soon.</i>
  503. </body>
  504. </div>
  505. </html>