ycdl/frontends/ycdl_flask/templates/channels.html
Ethan Dalool da8a6f0505
Use flex instead of grid to overcome 1,000 row browser limit.
Chrome stops adding grid rows after 1,000 and just piles them all
up on the bottom.
2021-11-08 02:01:01 -08:00

121 lines
3 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">
<link rel="stylesheet" href="/static/css/ycdl.css">
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/spinner.js"></script>
<style>
#new_channel_textbox,
#new_channel_button
{
width: 200px;
}
#channel_list
{
display: flex;
flex-direction: column;
row-gap: 8px;
}
.channel_card
{
padding: 10px;
border-radius: 4px;
border: 1px solid black;
}
.channel_card_pending
{
background-color: #ffffaa;
}
.channel_card_no_pending
{
background-color: #aaffaa;
}
</style>
</head>
<body>
{{header.make_header()}}
<div id="content_body">
<div><button class="refresh_button button_with_spinner" onclick="return refresh_all_channels_form(false);">Refresh new videos</button></div>
<div><button class="refresh_button button_with_spinner" onclick="return refresh_all_channels_form(true);">Refresh everything</button></div>
<div>
<input type="text" id="new_channel_textbox" placeholder="Channel id">
<button id="new_channel_button" class="button_with_spinner" onclick="return add_channel_form();">Add new channel</button>
</div>
<div id="channel_list">
{% for channel in channels|sort(attribute='name', case_sensitive=False) %}
{% if channel.has_pending() %}
<div class="channel_card channel_card_pending">
{% else %}
<div class="channel_card 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 %}
{% if not channel.autorefresh %}
<span>(autorefresh: no)</span>
{% endif %}
</div>
{% endfor %}
</div>
</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()
{
if (box.value === "")
{
return spinner.BAIL;
}
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>