ycdl/frontends/ycdl_flask/templates/channels.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>
checkpoint 2016-11-29 04:16:16 +00:00			`<!DOCTYPE html5>`
			`<html>`
			`<head>`
			`{% import "header.html" as header %}`
			`<title>Channels</title>`
			`<meta charset="UTF-8">`
Add the meta viewport property. 2020-01-07 05:55:01 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0"/>`
Move CSS and JS into separate folders under static. 2020-05-22 02:43:45 +00:00			`<link rel="stylesheet" href="/static/css/common.css">`
			`<script src="/static/js/common.js"></script>`
Import common.js before api.js. 2020-06-17 21:13:33 +00:00			`<script src="/static/js/api.js"></script>`
Add spinners to channel refresh buttons. 2020-06-17 21:15:50 +00:00			`<script src="/static/js/spinner.js"></script>`
checkpoint 2016-11-29 04:16:16 +00:00
			`<style>`
			`#content_body`
			`{`
			`display: flex;`
checkpoint 2016-12-07 06:11:09 +00:00			`flex-grow: 1;`
			`flex-shrink: 0;`
			`flex-basis: auto;`
checkpoint 2016-11-29 04:16:16 +00:00			`flex-direction: column;`
checkpoint 2016-12-07 06:11:09 +00:00			`width: 1440px;`
			`margin: auto;`
			`max-width: 100%;`
checkpoint 2016-11-29 04:16:16 +00:00			`}`
			`#new_channel_textbox,`
			`#new_channel_button`
			`{`
			`width: 200px;`
			`}`
Rename CSS class channel_card_downloaded -> channel_card_no_pending. 2020-05-22 00:22:07 +00:00			`.channel_card_no_pending,`
checkpoint 2016-11-29 04:16:16 +00:00			`.channel_card_pending`
			`{`
			`margin: 8px;`
			`padding: 10px;`
			`border-radius: 4px;`
			`border: 1px solid #000;`
			`}`
			`.channel_card_pending`
			`{`
			`background-color: #ffffaa;`
			`}`
Rename CSS class channel_card_downloaded -> channel_card_no_pending. 2020-05-22 00:22:07 +00:00			`.channel_card_no_pending`
checkpoint 2016-11-29 04:16:16 +00:00			`{`
			`background-color: #aaffaa;`
			`}`
			`</style>`
			`</head>`


			`<body>`
			`{{header.make_header()}}`
			`<div id="content_body">`
Add spinners to channel refresh buttons. 2020-06-17 21:15:50 +00:00			`<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>`
checkpoint 2016-11-29 04:16:16 +00:00			`<div>`
			`<input type="text" id="new_channel_textbox">`
Add separate API endpoint for add_channel, apply to web ui. Previously, the "add channel" box was just calling refresh, which implicitly adds the channel. This adds a separate endpoint for add_channel, and as a bonus the web ui will navigate you to the channel after it has been loaded. 2020-05-22 03:37:34 +00:00			`<button id="new_channel_button" onclick="add_channel_form(event)">Add new channel</button>`
checkpoint 2016-11-29 04:16:16 +00:00			`</div>`
			`{% for channel in channels %}`
Big: Object-oriented channels & videos, match Etiquette structure. - Channels and videos are now objects instead of just dictionaries. - Copied Etiquette's use of cachemanager mixin to cache those objects. - Copied Etiquette's use of sql_ methods. - Copied Etiquette's use of namespaced javascript. - Copied Etiquette's use of config file. - Redid video_card css to use grid, better on mobile. - Improved usage of URL parameters with class=merge_class. - Wrote some actual content on readme. 2020-04-04 22:13:01 +00:00			`{% if channel.has_pending() %}`
checkpoint 2016-11-29 04:16:16 +00:00			`<div class="channel_card_pending">`
			`{% else %}`
Rename CSS class channel_card_downloaded -> channel_card_no_pending. 2020-05-22 00:22:07 +00:00			`<div class="channel_card_no_pending">`
checkpoint 2016-11-29 04:16:16 +00:00			`{% endif %}`
Big: Object-oriented channels & videos, match Etiquette structure. - Channels and videos are now objects instead of just dictionaries. - Copied Etiquette's use of cachemanager mixin to cache those objects. - Copied Etiquette's use of sql_ methods. - Copied Etiquette's use of namespaced javascript. - Copied Etiquette's use of config file. - Redid video_card css to use grid, better on mobile. - Improved usage of URL parameters with class=merge_class. - Wrote some actual content on readme. 2020-04-04 22:13:01 +00:00			`<a href="/channel/{{channel.id}}">{{channel.name}}</a> <a href="/channel/{{channel.id}}/pending">(p)</a>`
Indicate automark state on /channels listing. 2020-05-22 00:26:12 +00:00			`{% if channel.automark not in [none, "pending"] %}`
			`<span>automark: {{channel.automark}}</span>`
			`{% endif %}`
checkpoint 2016-11-29 04:16:16 +00:00			`</div>`
			`{% endfor %}`
			`</div>`
			`</body>`


			`<script type="text/javascript">`
			`var box = document.getElementById('new_channel_textbox');`
			`var button = document.getElementById('new_channel_button');`
Big: Object-oriented channels & videos, match Etiquette structure. - Channels and videos are now objects instead of just dictionaries. - Copied Etiquette's use of cachemanager mixin to cache those objects. - Copied Etiquette's use of sql_ methods. - Copied Etiquette's use of namespaced javascript. - Copied Etiquette's use of config file. - Redid video_card css to use grid, better on mobile. - Improved usage of URL parameters with class=merge_class. - Wrote some actual content on readme. 2020-04-04 22:13:01 +00:00			`common.bind_box_to_button(box, button);`
checkpoint 2016-11-29 04:16:16 +00:00
Add separate API endpoint for add_channel, apply to web ui. Previously, the "add channel" box was just calling refresh, which implicitly adds the channel. This adds a separate endpoint for add_channel, and as a bonus the web ui will navigate you to the channel after it has been loaded. 2020-05-22 03:37:34 +00:00			`function add_channel_form(event)`
checkpoint 2016-11-29 04:16:16 +00:00			`{`
			`if (box.value !== "")`
			`{`
Move function add_channel to api.js. 2020-06-03 20:00:44 +00:00			`api.channels.add_channel(box.value, add_channel_callback);`
checkpoint 2016-11-29 04:16:16 +00:00			`}`
			`}`
Add separate API endpoint for add_channel, apply to web ui. Previously, the "add channel" box was just calling refresh, which implicitly adds the channel. This adds a separate endpoint for add_channel, and as a bonus the web ui will navigate you to the channel after it has been loaded. 2020-05-22 03:37:34 +00:00			`function add_channel_callback(response)`
checkpoint 2016-11-29 04:16:16 +00:00			`{`
Add separate API endpoint for add_channel, apply to web ui. Previously, the "add channel" box was just calling refresh, which implicitly adds the channel. This adds a separate endpoint for add_channel, and as a bonus the web ui will navigate you to the channel after it has been loaded. 2020-05-22 03:37:34 +00:00			`if (response["meta"]["status"] == 200)`
			`{`
			`window.location.href = "/channel/" + response["data"]["id"];`
			`}`
Add spinners to channel refresh buttons. 2020-06-17 21:15:50 +00:00			`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));`
			`}`
Add separate API endpoint for add_channel, apply to web ui. Previously, the "add channel" box was just calling refresh, which implicitly adds the channel. This adds a separate endpoint for add_channel, and as a bonus the web ui will navigate you to the channel after it has been loaded. 2020-05-22 03:37:34 +00:00			`}`
checkpoint 2016-11-29 04:16:16 +00:00			`</script>`
			`</html>`