ycdl/frontends/ycdl_flask/templates/channels.html

117 lines
2.8 KiB
HTML

<!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>