From 2d2a45a2a1c3d3535537644844c8064854124ad6 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Tue, 26 Oct 2021 11:53:49 -0700
Subject: [PATCH] Add web interface for Channel.set_name.

---
 .../backend/endpoints/channel_endpoints.py    | 11 +++++
 frontends/ycdl_flask/static/js/api.js         |  8 ++++
 frontends/ycdl_flask/templates/channel.html   | 43 ++++++++++++++++++-
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/frontends/ycdl_flask/backend/endpoints/channel_endpoints.py b/frontends/ycdl_flask/backend/endpoints/channel_endpoints.py
index 88f6d6c..7d97768 100644
--- a/frontends/ycdl_flask/backend/endpoints/channel_endpoints.py
+++ b/frontends/ycdl_flask/backend/endpoints/channel_endpoints.py
@@ -191,6 +191,17 @@ def post_set_download_directory(channel_id):
     response = {'download_directory': abspath}
     return flasktools.json_response(response)
 
+@flasktools.required_fields(['name'], forbid_whitespace=False)
+@site.route('/channel/<channel_id>/set_name', methods=['POST'])
+def post_set_name(channel_id):
+    name = request.form['name']
+    channel = common.ycdldb.get_channel(channel_id)
+
+    channel.set_name(name, commit=True)
+
+    response = {'name': channel.name}
+    return flasktools.json_response(response)
+
 @site.route('/channel/<channel_id>/set_queuefile_extension', methods=['POST'])
 def post_set_queuefile_extension(channel_id):
     extension = request.form['extension']
diff --git a/frontends/ycdl_flask/static/js/api.js b/frontends/ycdl_flask/static/js/api.js
index 3cdba57..3465045 100644
--- a/frontends/ycdl_flask/static/js/api.js
+++ b/frontends/ycdl_flask/static/js/api.js
@@ -59,6 +59,14 @@ function set_download_directory(channel_id, download_directory, callback)
     return common.post(url, data, callback);
 }
 
+api.channels.set_name =
+function set_name(channel_id, name, callback)
+{
+    const url = `/channel/${channel_id}/set_name`;
+    const data = {"name": name};
+    return common.post(url, data, callback);
+}
+
 api.channels.set_queuefile_extension =
 function set_queuefile_extension(channel_id, extension, callback)
 {
diff --git a/frontends/ycdl_flask/templates/channel.html b/frontends/ycdl_flask/templates/channel.html
index 1b903b2..8150920 100644
--- a/frontends/ycdl_flask/templates/channel.html
+++ b/frontends/ycdl_flask/templates/channel.html
@@ -162,7 +162,7 @@ https://stackoverflow.com/a/35153397
 {{header.make_header()}}
 <div id="content_body">
     {% if channel is not none %}
-    <h2>{{channel.name}}</h2>
+    <h1 id="channel_name">{{channel.name}}</h1>
     {% endif %}
 
     {% if channel is not none %}
@@ -261,6 +261,11 @@ https://stackoverflow.com/a/35153397
     <div class="tab" data-tab-title="Settings">
     <div>Channel ID: <code>{{channel.id}}</code></div>
 
+    <div>
+        <input type="text" id="set_name_input" placeholder="Name" value="{{channel.name or ''}}"/>
+        <button id="set_name_button" class="button_with_spinner" onclick="return set_name_form();">Set name</button>
+    </div>
+
     <div>
         <label><input type="checkbox" id="set_autorefresh_checkbox" {{"checked" if channel.autorefresh else ""}} onchange="return set_autorefresh_form(event);"/> Automatically refresh this channel regularly.</label>
         <span id="set_autorefresh_spinner" class="hidden">Working...</span>
@@ -666,6 +671,38 @@ function set_download_directory_callback(response)
     }
 }
 
+function set_name_form(event)
+{
+    const name = set_name_input.value.trim();
+    api.channels.set_name(CHANNEL_ID, name, set_name_callback);
+}
+
+function set_name_callback(response)
+{
+    window[set_name_button.dataset.spinnerCloser]();
+    if (response.meta.status != 200 || ! response.meta.json_ok)
+    {
+        alert(JSON.stringify(response));
+        return;
+    }
+
+    const name = response.data.name;
+    const h1 = document.getElementById("channel_name");
+    if (name === null)
+    {
+        set_name_input.value = "";
+        h1.innerText = CHANNEL_ID;
+        document.title = CHANNEL_ID;
+    }
+    else
+    {
+        set_name_input.value = name;
+        h1.innerText = name;
+        document.title = name;
+    }
+
+}
+
 function set_queuefile_extension_form(event)
 {
     const extension = set_queuefile_extension_input.value.trim();
@@ -695,6 +732,10 @@ function set_queuefile_extension_callback(response)
 
 if (CHANNEL_ID)
 {
+    var set_name_input = document.getElementById("set_name_input");
+    var set_name_button = document.getElementById("set_name_button");
+    common.bind_box_to_button(set_name_input, set_name_button);
+
     var set_queuefile_extension_input = document.getElementById("set_queuefile_extension_input");
     var set_queuefile_extension_button = document.getElementById("set_queuefile_extension_button");
     common.bind_box_to_button(set_queuefile_extension_input, set_queuefile_extension_button);