Add Event Listener on index page.

carlwo · Feb 16, 2022 · 149eeee · 149eeee
1 parent f4f5f21
commit 149eeee
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/chatstats.py b/chatstats.py
@@ -51,8 +51,8 @@ def is_similar(s, t, case_sensitivity = "insensitive", max_distance = 1):
 
 def clean_msg(message):
     """ Remove emojis and leading/trailing white spaces from message."""
-    message = sub(':[a-z_]+:', '', message)  # remove emojis
-    message = message.strip()                # remove spaces at the beginning and at the end
+    message = sub(':[a-zA-Z0-9_]+:', '', message)  # remove emojis
+    message = message.strip()                      # remove spaces at the beginning and at the end
     return message
 
 def download_chat(pipe,url,broadcast_type,start_time,end_time,chat_type):

diff --git a/static/chatstats.js b/static/chatstats.js
@@ -62,10 +62,9 @@ function check_broadcast_type() {
     }
 }
 
-function submit_form() {
-    if (document.getElementById('url').value) {
+function submit_form(event) {
+    if (document.getElementById('index-form').checkValidity()) {
         document.getElementById('continue-btn').innerHTML = '<div class="loader"></div>';
-        document.getElementById('index-form').submit();
     }
 }
 

diff --git a/templates/chatstats.html b/templates/chatstats.html
@@ -30,7 +30,7 @@ <h2 class="subtitle" id="subtitle">{{ message }}</h2>
         <form action="javascript:void(0);">
         <header class="modal-card-head">
           <p class="modal-card-title">Grouping Options</p>
-          <button class="delete" onclick="document.getElementById('settings').classList.remove('is-active')"></button>
+          <button type="button" class="delete" onclick="document.getElementById('settings').classList.remove('is-active')"></button>
         </header>
         <section class="modal-card-body">
           <div class="field">
@@ -76,7 +76,7 @@ <h2 class="subtitle" id="subtitle">{{ message }}</h2>
           </div>
         </section>
         <footer class="modal-card-foot">
-          <button class="button is-success" onclick="document.getElementById('settings').classList.remove('is-active')">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
+          <button type="button" class="button is-success" onclick="document.getElementById('settings').classList.remove('is-active')">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
           <input class="button is-info" type="reset" onclick="show_group_members('no')" value="Reset">
         </footer>
         </form>
@@ -88,14 +88,14 @@ <h2 class="subtitle" id="subtitle">{{ message }}</h2>
         <form action="javascript:void(0);">
         <header class="modal-card-head">
           <p class="modal-card-title">Help</p>
-          <button class="delete" onclick="document.getElementById('help').classList.remove('is-active')"></button>
+          <button type="button" class="delete" onclick="document.getElementById('help').classList.remove('is-active')"></button>
         </header>
         <section class="modal-card-body">
           Press <em>Start</em> and <em>Stop</em> to get a <strong>ranking of the most frequent chat messages</strong> of the given stream in that period of time.<br>
           Only the last message per user is counted.
         </section>
         <footer class="modal-card-foot">
-          <button class="button is-success" onclick="document.getElementById('help').classList.remove('is-active')">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
+          <button type="button" class="button is-success" onclick="document.getElementById('help').classList.remove('is-active')">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
         </footer>
         </form>
       </div>

diff --git a/templates/index.html b/templates/index.html
@@ -10,7 +10,7 @@ <h2 class="subtitle">Please enter a URL of a livestream or past broadcast from Y
       <div class="field">
         <label class="label">URL</label>
         <div class="control">
-          <input type="text" name="url" id="url" class="input" placeholder="https://www.youtube.com/watch?v=XXXXXXXXXX" required>
+          <input type="text" name="url" class="input" placeholder="https://www.youtube.com/watch?v=XXXXXXXXXX" required>
         </div>
       </div>
       <div class="field">
@@ -75,9 +75,22 @@ <h2 class="subtitle">Please enter a URL of a livestream or past broadcast from Y
       <br>
       <div class="field">
         <p class="control" id="continue-btn">
-          <button class="button is-link" onclick="submit_form()">Continue</button>
+          <button type="submit" class="button is-link">Continue</button>
         </p>
       </div>
     </form>
   </div>
 {%- endblock %}
+
+{%- block script %}
+<script>
+function init() {
+  document.getElementById('index-form').addEventListener('submit', submit_form);
+}
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', init);
+} else {  // `DOMContentLoaded` has already fired
+  init();
+}
+</script>
+{%- endblock %}
diff --git a/test_chatstats.py b/test_chatstats.py
@@ -9,6 +9,7 @@
 def test_clean_msg():
     assert cs.clean_msg(" Test ") == "Test"
     assert cs.clean_msg("Test :cat:") == "Test"
+    assert cs.clean_msg("Test :cat_2: :Dog:") == "Test"
 
 def test_time2seconds():
     assert cs.time2seconds("","","") == None
@@ -54,7 +55,7 @@ def test_index(client):
     assert b'<input type="text" name="end_ss" id="end_ss"' in html
     assert b'<input type="radio" name="chat_type" value="live"' in html
     assert b'<input type="radio" name="chat_type" value="top"' in html
-    assert b'<button class="button is-link" onclick="submit_form()">Continue</button>' in html
+    assert b'<button type="submit" class="button is-link">Continue</button>' in html
 
 def test_past_broadcast_youtube(client):
     config =  cs.get_config()