mgmt.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  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" onclick="window.open('{{ url_for('web_panels.mgmtqueue') }}', '_blank')">Rewards Queue Management</button>
  12. <button class="tablinks" data-tab="managerewards" onclick="openTab(event, 'managerewards')">Rewards</button>
  13. <button class="tablinks" data-tab="categories" onclick="openTab(event, 'categories')">Categories</button>
  14. <button class="tablinks" data-tab="accounts" onclick="openTab(event, 'accounts')">Manage Accounts</button>
  15. <button class="tablinks" data-tab="announcements" onclick="openTab(event, 'announcements')">Announcements</button>
  16. <button class="tablinks" data-tab="todolist" onclick="openTab(event, 'todolist')">To-Do List</button>
  17. <button class="tablinks" data-tab="alerts" onclick="openTab(event, 'alerts')">Alerts</button>
  18. <button class="tablinks" data-tab="settings" onclick="openTab(event, 'settings')">Settings</button>
  19. {% if kofi_integration %}
  20. <button class="tablinks" data-tab="kofi-settings" onclick="openTab(event, 'kofi-settings')">Kofi Settings</button>
  21. {% endif %}
  22. </div>
  23. <img src="/static/img/ownchatbotwide.png">
  24. </div>
  25. <div id='managerewards' class="tabcontent">
  26. <h3>Manage Rewards</h3>
  27. <body>
  28. <div>
  29. <h4>Reward Types:</h4>
  30. <ul>
  31. <li><u>Redeems</u> are standard stream point rewards. They get added to the queue for the streamer to fulfill.</li>
  32. <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>
  33. <ul>
  34. <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>
  35. </ul>
  36. <li><u>Votes</u> are just that, votes. Your viewers can vote on them.</li>
  37. <li><u>Goals</u> are rewards that everyone in chat can contribute to. The streamer fulfills the reward when the goal is reached.</li>
  38. <li>Add rewards to categories to enable and disable groups of rewards.</li>
  39. <li>Rewards with no categories are inactive.</li>
  40. </ul>
  41. </div>
  42. <table>
  43. <tr>
  44. <td>
  45. </td>
  46. <td>
  47. </td>
  48. <td>
  49. </td>
  50. <td>
  51. </td>
  52. </tr>
  53. <tr>
  54. <td>
  55. <a href="{{ url_for('web_panels.add', reward_type='redeem') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Redeem</button></a><br>
  56. </td>
  57. <td>
  58. <a href="{{ url_for('web_panels.add', reward_type='special') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Special</button></a><br>
  59. </td>
  60. <td>
  61. <a href="{{ url_for('web_panels.add', reward_type='vote') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Vote</button></a><br>
  62. </td>
  63. <td>
  64. <a href="{{ url_for('web_panels.add', reward_type='goal') }}"><button class="button button2" onclick="openTab(event, 'managerewards')">Create a Goal</button></a><br>
  65. </td>
  66. </tr>
  67. </table>
  68. <br>
  69. {% if rewards %}
  70. Rewards in <span style="color: red !important;">red</span> are inactive. To activate a reward, add it to an active category.
  71. <table>
  72. <thead>
  73. <tr>
  74. <th style="width:15%">Name</th>
  75. <th>Target</th>
  76. <th>Price</th>
  77. <th>Info</th>
  78. <th>Cool down</th>
  79. <th>Category</th>
  80. <th style="width:15%">Actions</th>
  81. </tr>
  82. </thead>
  83. <tbody>
  84. {% for reward, reward_info in rewards.items() %}
  85. {% if reward in active_rewards %}
  86. <tr>
  87. {% else %}
  88. <tr style="color: red;">
  89. {% endif %}
  90. <td>{{ prefix }}{{ reward }}</td>
  91. {% if reward_info["type"] == "goal" %}
  92. <td>{{ reward_info["target"] }}</td>
  93. {% else %}
  94. <td>N/A</td>
  95. {% endif %}
  96. {% if reward_info["type"] == "goal" %}
  97. <td>N/A</td>
  98. {% else %}
  99. <td>{{ reward_info["price"] }}</td>
  100. {% endif %}
  101. <td>{{ reward_info["info"] }}</td>
  102. {% if reward_info["cooldown"] > 0 %}
  103. {% set minutes_label = 'minute' if reward_info["cooldown"] == 1 else 'minutes' %}
  104. <td>{{ reward_info["cooldown"] }} {{ minutes_label }}</td>
  105. {% else %}
  106. <td>None</td>
  107. {% endif %}
  108. <td>{{ reward_info["categories"] | join(', ') }}</td>
  109. <td>
  110. <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
  111. <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
  112. {% if reward_info["type"] == "goal" or reward_info["type"] == "vote" %}
  113. <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>
  114. {% endif %}
  115. </td>
  116. </tr>
  117. {% endfor %}
  118. </tbody>
  119. </table>
  120. {% endif %}
  121. </body>
  122. </div>
  123. <div id='accounts' class="tabcontent">
  124. <body>
  125. <h3>Manage Viewer Accounts</h3>
  126. {% if users %}
  127. <table>
  128. <thead>
  129. <tr>
  130. <th>User</th>
  131. <th>Points balance</th>
  132. <th>Email</th>
  133. <th>Authed</th>
  134. <th></th>
  135. </tr>
  136. </thead>
  137. <tbody>
  138. {% for user in users %}
  139. <tr>
  140. <td> {{ user[1] }} </td>
  141. {% set points_label = 'point' if user[2] == 1 else 'points' %}
  142. <td>{{ user[2] }} {{ points_label }}</td>
  143. {% if user[4] %}
  144. <td>{{ user[4] }}</td>
  145. {% else %}
  146. <td>none</td>
  147. {% endif %}
  148. {% if user[3] %}
  149. <td>Yes</td>
  150. {% else %}
  151. <td>No</td>
  152. {% endif %}
  153. <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>
  154. </tr>
  155. {% endfor %}
  156. </tbody>
  157. </table>
  158. {% endif %}
  159. </body>
  160. </div>
  161. <div id='categories' class="tabcontent">
  162. <body>
  163. <h3>Manage Categories</h3>
  164. <div>
  165. &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>
  166. <table>
  167. <thead>
  168. <tr>
  169. <th style="width: 50%;"><h3>Active Categories</h3></th>
  170. <th style="width: 50%;"><h3>Inactive Categories</h3></th>
  171. </tr>
  172. </thead>
  173. <tbody>
  174. <tr>
  175. <td>
  176. {% for cat in active_categories %}
  177. &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>
  178. {% endfor %}
  179. </td>
  180. <td>
  181. {% for cat in inactive_categories %}
  182. &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>
  183. {% endfor %}
  184. </td>
  185. </tr>
  186. </tbody>
  187. </table>
  188. </div>
  189. </body>
  190. </div>
  191. <div id='announcements' class="tabcontent">
  192. <body>
  193. <form method="POST" action="/mgmt/announcements">
  194. <table>
  195. <h3>Manage Announcements</h3>
  196. <table>
  197. <thead>
  198. <tr style="border-bottom: none;">
  199. <th style="width: 20%;"></th>
  200. <th style="width: 50%;"></th>
  201. <th></th>
  202. </tr>
  203. </thead>
  204. <tr>
  205. <td> <label for="announce_enable">Enable:</label> </td>
  206. {% if settings_info[9] %}
  207. <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[9] }}" checked> </td>
  208. {% else %}
  209. <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[9] }}"> </td>
  210. {% endif %}
  211. <td>Enable periodic announcements</td>
  212. </tr>
  213. <tr>
  214. <td> <label for="announce_interval">Interval:</label> </td>
  215. <td> <input type="number" name="announce_interval" value="{{ settings_info[10] }}" size="2" required> minutes</td>
  216. <td>How long between each announcement?</td>
  217. </tr>
  218. <tr>
  219. <td> <label for="announcements">Announcements:</label> </td>
  220. <td>
  221. <textarea name="announcements" rows="5" cols="50">{{ announcements | join('\n') }}</textarea>
  222. </td>
  223. <td>Enter your announcements, one per line. May contain html <a href=https://www.w3schools.com/tags/tag_img.asp>IMG tags</a> to display images.</td>
  224. </tr>
  225. </table>
  226. <br><button class="button button2" type="submit">Save Changes</button><br>
  227. </form>
  228. <br><br>
  229. </body>
  230. </div>
  231. <div id='settings' class="tabcontent">
  232. <body style="text-align: left;">
  233. <form method="POST" action="/mgmt/settings">
  234. <table>
  235. <h3>OwnchatBot Settings</h3>
  236. <thead>
  237. <tr style="border-bottom: none;">
  238. <th style="width: 20%;"></th>
  239. <th></th>
  240. <th style="width: 50%;"></th>
  241. </tr>
  242. </thead>
  243. <tr>
  244. <td> <label for="points_interval">Points Interval:</label> </td>
  245. <td> <input type="number" name="points_interval" value="{{ settings_info[1] }}" size="5" required> minutes</td>
  246. <td>How often do you want to award your viewers points?</td>
  247. </tr>
  248. <tr>
  249. <td> <label for="points_award">Points Award:</label> </td>
  250. <td> <input type="number" name="points_award" value="{{ settings_info[2] }}" size="5" required> points</td>
  251. <td>How many points do you want to award them?</td>
  252. </tr>
  253. <tr>
  254. <td> <label for="gunicorn_logging">Gunicorn Logging:</label> </td>
  255. {% if settings_info[3] %}
  256. <td> <input type="checkbox" name="gunicorn_logging" value="{{ settings_info[3] }}" checked> </td>
  257. {% else %}
  258. <td> <input type="checkbox" name="gunicorn_logging" value="{{ settings_info[3] }}"> </td>
  259. {% endif %}
  260. <td>Enable Gunicorn logging integration.</td>
  261. </tr>
  262. <tr>
  263. <td> <label for="prefix">Chat Command Prefix:</label> </td>
  264. <td> <input type="text" name="prefix" maxlength="1" size="1" value="{{ settings_info[4] }}" required> </td>
  265. <td>Character that preceeds chat commands, so OwnchatBot knows what to look for.<br>Example: "{{ settings_info[4] }}points"</td>
  266. </tr>
  267. </table>
  268. <h3>Owncast Integration</h3>
  269. <table>
  270. <thead>
  271. <tr style="border-bottom: none;">
  272. <th style="width: 20%;"></th>
  273. <th></th>
  274. <th style="width: 50%;"></th>
  275. </tr>
  276. </thead>
  277. <tr>
  278. <td> <label for="access_id">Access Token Name:</label> </td>
  279. <td style="padding: 5px;"> <input type="text" name="access_id" value="{{ settings_info[0] }}" size="40"> </td>
  280. <td>Create in Owncast Admin panel. Integrations -> Access Tokens (check all three boxes)</td>
  281. </tr>
  282. <tr>
  283. <td> <label for="access_token">Access Token:</label> </td>
  284. <td style="padding: 5px;"> <input type="password" name="access_token" value="{{ settings_info[5] }}" size="40"> </td>
  285. <td>The token you created above.</td>
  286. </tr>
  287. <tr>
  288. <td> <label for="owncast_url">Your Owncast URL:</label> </td>
  289. <td> <input type="text" name="owncast_url" value="{{ settings_info[6] }}" size="40"> </td>
  290. <td>The external URL of your Owncast instance, with "http://" or "https://".</td>
  291. </tr>
  292. </table>
  293. <h3>Kofi Integration</h3>
  294. <table>
  295. <thead>
  296. <tr style="border-bottom: none;">
  297. <th style="width: 20%;"></th>
  298. <th></th>
  299. <th style="width: 50%;"></th>
  300. </tr>
  301. </thead>
  302. <tr>
  303. <td> <label for="kofi_integration">Enable:</label> </td>
  304. {% if settings_info[8] %}
  305. <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[8] }}" checked> </td>
  306. <td>Enable Ko-fi integration.</td>
  307. {% else %}
  308. <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[8] }}"> </td>
  309. <td>Enable Ko-fi integration. ("Kofi Settings" button will appear in the navigation bar when enabled.)</td>
  310. {% endif %}
  311. </tr>
  312. <tr>
  313. <td> <label for="kofi_token">Verification Token:</label> </td>
  314. <td style="padding: 5px;"> <input type="password" name="kofi_token" value="{{ settings_info[7] }}" size="40"> </td>
  315. <td>Get from Kofi -> More -> API -> Webhooks -> Advanced -> Verification Token.</td>
  316. </tr>
  317. </table>
  318. <br><button class="button button2" type="submit">Save Changes</button><br>
  319. </form>
  320. <br><br>
  321. </body>
  322. </div>
  323. <div id='kofi-settings' class="tabcontent">
  324. <body style="text-align: left;">
  325. <form method="POST" action="/mgmt/ksettings">
  326. <table>
  327. <h3>Kofi Settings</h3>
  328. <h4> Donations </h4>
  329. <thead>
  330. <tr style="border-bottom: none;">
  331. <th style="width: 20%;"></th>
  332. <th></th>
  333. <th style="width: 50%;"></th>
  334. </tr>
  335. </thead>
  336. <tr>
  337. <td> <label for="enable_donations">Enable points for donations:</label> </td>
  338. {% if kofi_settings['donations'] %}
  339. <td> <input type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}" checked> </td>
  340. {% else %}
  341. <td> <input type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}"> </td>
  342. {% endif %}
  343. <td>Enable awarding points for donations</td>
  344. </tr>
  345. <tr>
  346. <td> <label for="set_donation_points">Points per dollar:</label> </td>
  347. <td> <input type="number" name="set_donation_points" value="{{ kofi_settings['donation_points'] }}" size="5" required> points</td>
  348. <td>How many points should viewers recieve, for every dollar they donate?</td>
  349. </tr>
  350. <tr>
  351. <td> <label for="kofi_url">Kofi Page:</label> </td>
  352. <td style="padding: 5px;"> <input type="text" name="kofi_url" value="{{ kofi_settings['kofi_url'] }}" size="30"> </td>
  353. <td>What is your Kofi page URL?</td>
  354. </tr>
  355. <tr>
  356. <table>
  357. <h4> Subscriptions </h4>
  358. <tbody>
  359. <tr>
  360. <td> <label for="enable_subs">Enable points for subscriptions:</label> </td>
  361. {% if kofi_settings['subs'] %}
  362. <td> <input type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}" checked> </td>
  363. {% else %}
  364. <td> <input type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}"> </td>
  365. {% endif %}
  366. <td>Enable awarding points for monthly subscriptions</td>
  367. </tr>
  368. <tr>
  369. <td> <label for="sub_points">Points per month:</label> </td>
  370. <td> <input type="number" name="sub_points" value="{{ kofi_settings['sub_points'] }}" size="6" required> points</td>
  371. <td>How many points should subscribers recieve every month?</td>
  372. </tr>
  373. </tbody>
  374. </table>
  375. </tr>
  376. <tr>
  377. <table>
  378. <h4> Logo </h4>
  379. <tbody>
  380. <tr style="border-bottom: none;">
  381. Which logo would you like to use?
  382. </tr>
  383. {% for kofi_logo in kofi_logos %}
  384. {% if loop.index0 % 8 == 0 %}
  385. <tr style="border-bottom: none;">
  386. {% endif %}
  387. <td>
  388. <label for="kofi_logo"><img src="/static/img/kofi/{{ kofi_logo }}"></label>
  389. {% if kofi_logo == kofi_settings['kofi_logo'] %}
  390. <input type="radio" name="kofi_logo" value="{{ kofi_logo }}" checked>
  391. {% else %}
  392. <input type="radio" name="kofi_logo" value="{{ kofi_logo }}">
  393. {% endif %}
  394. </td>
  395. {% if loop.index0 % 8 == 7 or loop.last %}
  396. </tr> <!-- Close the row after 8 items or at the end -->
  397. {% endif %}
  398. {% endfor %}
  399. </tbody>
  400. </table>
  401. </tr>
  402. </table>
  403. <br><button class="button button2" type="submit">Save Changes</button><br>
  404. </form>
  405. <br><br>
  406. <i>Kofi subscription tier support coming soon.</i>
  407. </body>
  408. </div>
  409. <div id='todolist' class="tabcontent">
  410. <script>
  411. function focusInput() { // Function to focus on the input field
  412. document.getElementById('itemInput').focus();
  413. }
  414. </script>
  415. <body onload="focusInput()">
  416. <h1>To-Do List</h1>
  417. <form id="todo-item-form" method="POST" onsubmit="focusInput()" action="/mgmt/addtodoitem">
  418. <input type="text" id="itemInput" name="item" placeholder="Add a new item">
  419. <button id="todo-item-form" class="button button2" type="submit">Add</button>
  420. </form>
  421. <ul>
  422. {% if items %}
  423. {% for item in items %}
  424. {% if item.crossed == 'no' %}
  425. <li style="text-decoration:none;">
  426. {{ item.name }}
  427. <a href="{{ url_for('web_panels.cross', item_id=loop.index0) }}">[Cross Off]</a>&nbsp;<span style="color: red;"><a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}">[Remove]</a></span>
  428. </li>
  429. {% else %}
  430. <li> <span style="text-decoration:line-through;">
  431. {{ item.name }}</span>
  432. <a href="{{ url_for('web_panels.uncross', item_id=loop.index0) }}">[Un-Cross]</a>&nbsp;<span style="color: red;"><a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}">[Remove]</a></span>
  433. </li>
  434. {% endif %}
  435. {% endfor %}
  436. {% endif %}
  437. </ul>
  438. <form action="/mgmt/clearlist" method="get" style="display: inline;">
  439. <button class="button button2" type="submit" class="button">Clear List</button>
  440. </form>
  441. <br><br>
  442. </div>
  443. <div id='alerts' class="tabcontent">
  444. <body>
  445. <h2>Customize Your Alerts</h2>
  446. <table>
  447. <thead>
  448. <tr style="border-bottom: none;">
  449. <th style="width: 20%;">Type</th>
  450. <th style="width: 20%;">Image</th>
  451. <th></th>
  452. <th style="width: 15%;"></th>
  453. <th style="width: 25%;">Browser Source</th>
  454. </tr>
  455. </thead>
  456. <tr>
  457. <form id="nf_upload" action="/mgmt/alertupload/FOLLOWER_ALERT" method="post" enctype="multipart/form-data">
  458. <td>New Follower:</td>
  459. {% set follower_alert = alerts_dict["FOLLOWER_ALERT"] %}
  460. {% if follower_alert %}
  461. {% if "webm" in follower_alert %}
  462. <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}" type="video/webm"></video></td>
  463. {% else %}
  464. <td><img src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}"></td>
  465. {% endif %}
  466. {% else %}
  467. <td>Empty</td>
  468. {% endif %}
  469. <td><input type="file" name="FOLLOWER_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
  470. <td><button id="nf_upload" class="button button2" type="submit">Upload</button>
  471. </form>&nbsp
  472. <a href="{{ url_for('web_panels.del_alert', alert_type='FOLLOWER_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
  473. <td>/alert/follower</td>
  474. </tr>
  475. <tr>
  476. <form id="nms_upload" action="/mgmt/alertupload/MILESTONE_ALERT" method="post" enctype="multipart/form-data">
  477. <td>Milestone Reached:</td>
  478. {% set milestone_alert = alerts_dict["MILESTONE_ALERT"] %}
  479. {% if milestone_alert %}
  480. {% if "webm" in milestone_alert %}
  481. <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}" type="video/webm"></video></td>
  482. {% else %}
  483. <td><img src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}"></td>
  484. {% endif %}
  485. {% else %}
  486. <td>Empty</td>
  487. {% endif %}
  488. <td><input type="file" name="MILESTONE_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
  489. <td><button id="nms_upload" class="button button2" type="submit">Upload</button></form>&nbsp
  490. <a href="{{ url_for('web_panels.del_alert', alert_type='MILESTONE_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
  491. <td>/alert/milestone</td>
  492. </tr>
  493. <tr>
  494. <form id="ng_upload" action="/mgmt/alertupload/GOAL_ALERT" method="post" enctype="multipart/form-data">
  495. <td>Goal Reached:</td>
  496. {% set goal_alert = alerts_dict["GOAL_ALERT"] %}
  497. {% if goal_alert %}
  498. {% if "webm" in goal_alert %}
  499. <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}" type="video/webm"></video></td>
  500. {% else %}
  501. <td><img src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}"></td>
  502. {% endif %}
  503. {% else %}
  504. <td>Empty</td>
  505. {% endif %}
  506. <td><input type="file" name="GOAL_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
  507. <td><button id="ng_upload" class="button button2" type="submit">Upload</button></form>&nbsp
  508. <a href="{{ url_for('web_panels.del_alert', alert_type='GOAL_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
  509. <td>/alert/goal</td>
  510. </tr>
  511. </table>
  512. </body>
  513. </div>
  514. <br><br>
  515. </html>