<!DOCTYPE html5> <html> <head> {% import "header.html" as header %} <title>Channels</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="/static/css/common.css"> <script src="/static/js/common.js"></script> <script src="/static/js/api.js"></script> <script src="/static/js/spinner.js"></script> <style> #content_body { display: flex; flex-grow: 1; flex-shrink: 0; flex-basis: auto; flex-direction: column; width: 1440px; margin: auto; max-width: 100%; } #new_channel_textbox, #new_channel_button { width: 200px; } .channel_card_no_pending, .channel_card_pending { margin: 8px; padding: 10px; border-radius: 4px; border: 1px solid #000; } .channel_card_pending { background-color: #ffffaa; } .channel_card_no_pending { background-color: #aaffaa; } </style> </head> <body> {{header.make_header()}} <div id="content_body"> <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(false)">Refresh new videos</button></span> <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(true)">Refresh everything</button></span> <div> <input type="text" id="new_channel_textbox"> <button id="new_channel_button" onclick="add_channel_form(event)">Add new channel</button> </div> {% for channel in channels %} {% if channel.has_pending() %} <div class="channel_card_pending"> {% else %} <div class="channel_card_no_pending"> {% endif %} <a href="/channel/{{channel.id}}">{{channel.name}}</a> <a href="/channel/{{channel.id}}/pending">(p)</a> {% if channel.automark not in [none, "pending"] %} <span>automark: {{channel.automark}}</span> {% endif %} </div> {% endfor %} </div> </body> <script type="text/javascript"> var box = document.getElementById('new_channel_textbox'); var button = document.getElementById('new_channel_button'); common.bind_box_to_button(box, button); function add_channel_form(event) { if (box.value !== "") { api.channels.add_channel(box.value, add_channel_callback); } } function add_channel_callback(response) { if (response.meta.status == 200) { window.location.href = "/channel/" + response.data.id; } else { alert(JSON.stringify(response)); } } function refresh_all_channels_form(force) { console.log(`Refreshing all channels, force=${force}.`); api.channels.refresh_all_channels(force, refresh_all_channels_callback) } function refresh_all_channels_callback(response) { if (response.meta.status == 200) { common.refresh(); } else { alert(JSON.stringify(response)); } } </script> </html>