From ebc77e8bf4ac9d8ec99f8a7aac71a01b25d22ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20H=C3=A1la?= <halapetr@selfnet.cz>
Date: Fri, 15 Sep 2023 20:42:40 +0200
Subject: [PATCH 1/2] Create Options js class to simplify setting cookies-based
 options

---
 backend/static/js/Options.js       | 63 ++++++++++++++++++++++++++++++
 backend/templates/songs/index.html | 44 ++++++++++++++-------
 2 files changed, 93 insertions(+), 14 deletions(-)
 create mode 100644 backend/static/js/Options.js

diff --git a/backend/static/js/Options.js b/backend/static/js/Options.js
new file mode 100644
index 0000000..2f8baae
--- /dev/null
+++ b/backend/static/js/Options.js
@@ -0,0 +1,63 @@
+import Cookies from "./js.cookie.js";
+
+export class BooleanOption {
+  constructor(checkbox, callable, defaultValue) {
+    this.checkbox = checkbox;
+    this.callable = callable;
+    this.defaultValue = defaultValue || false;
+  }
+
+  get() {
+      return this.checkbox.is(':checked')
+  }
+
+  set(value) {
+      this.checkbox.prop('checked', value);
+  }
+
+  call(value) {
+      this.callable(value)
+  }
+
+  selector() {
+      return this.checkbox
+  }
+
+  default() {
+      return this.defaultValue
+  }
+}
+
+export class Options {
+  constructor(options) {
+    this.options = options
+    for (let [name, option] of options) {
+        option.selector().change(function () {
+            const value = option.get();
+            Cookies.set(name, value, {SameSite: "Strict"})
+            option.call(value)
+        })
+        let value = Cookies.get(name)
+        if (value === undefined) {
+            value = option.default()
+            Cookies.set(name, value, {SameSite: "Strict"})
+        }
+        option.set(value)
+        option.call(value)
+    }
+  }
+
+  get(name) {
+      options[name].get()
+  }
+  set(name, value) {
+      options[name].set(value)
+  }
+
+  call(name, value) {
+      options[name].call(value)
+  }
+}
+//
+// export class Options;
+// export class  BooleanOption;
diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
index 75be260..a5821f8 100644
--- a/backend/templates/songs/index.html
+++ b/backend/templates/songs/index.html
@@ -14,7 +14,7 @@
             defer>
     </script>
     <script type="module" src="{% static 'js/js.cookie.js' %}"></script>
-
+    <script type="module" src="{% static 'js/Options.js' %}"></script>
     <link rel="stylesheet" type="text/css" href="{% sass_src 'datatables.sass' %}">
 {%  endblock %}
 {% block extra_options %}
@@ -81,6 +81,27 @@ <h6 class="d-inline" ><%:author%></h6>
     </button>
     <script type="module">
     import Cookies from "{% static 'js/js.cookie.js' %}"
+    import {Options, BooleanOption} from "{% static 'js/Options.js' %}"
+    const canWakeLock = () => 'wakeLock' in navigator;
+    let wakelock;
+    async function lockWakeState() {
+      if(!canWakeLock()) return;
+      try {
+        wakelock = await navigator.wakeLock.request();
+        wakelock.addEventListener('release', () => {
+          console.log('Screen Wake State Locked:', !wakelock.released);
+        });
+        console.log('Screen Wake State Locked:', !wakelock.released);
+      } catch(e) {
+        console.error('Failed to lock wake state with reason:', e.message);
+      }
+    }
+
+    function releaseWakeState() {
+      if(wakelock) wakelock.release();
+      wakelock = null;
+    }
+
     $.views.settings.delimiters("<%", "%>");
     $.fn.DataTable.ext.pager.numbers_length = 5;
     $.templates("song", "#songTemplate")
@@ -161,26 +182,21 @@ <h6 class="d-inline" ><%:author%></h6>
         });
 
         let hidden = false
-        const checkbox = $("#hideChords")
-        checkbox.change(function() {
-            if ($(this).is(':checked') && !hidden) {
+        function hideChords(value) {
+             if (value && !hidden) {
                 $(".chord").hide()
                 hidden = true
-                Cookies.set("hide_chords", true, {SameSite: "Strict"})
             } else {
                 hidden = false
                 $(".chord").show()
-                Cookies.set("hide_chords", false, {SameSite: "Strict"})
             }
-        })
-
-        let hide_chords = Cookies.get("hide_chords");
-        if (hide_chords === undefined) {
-            Cookies.set("hide_chords", false, {SameSite: "Strict"})
-            hide_chords = false
         }
-        checkbox.prop('checked', hide_chords === 'true');
-        checkbox.change()
+
+        const config = new Map([
+            ["hide_chords", new BooleanOption($("#hideChords"), hideChords, false)]
+        ])
+        const options = new Options(config)
+
 
         table.on( 'draw', function () {
             if (hidden) {

From efea1cd11c90da154de3be890a687c65d74e86d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20H=C3=A1la?= <halapetr@selfnet.cz>
Date: Fri, 15 Sep 2023 21:33:11 +0200
Subject: [PATCH 2/2] Add option to prevent sleep on Chrome

---
 backend/static/js/Options.js       | 14 ++++---
 backend/templates/songs/index.html | 60 ++++++++++++++++++------------
 frontend/templates/base/index.html |  7 +++-
 3 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/backend/static/js/Options.js b/backend/static/js/Options.js
index 2f8baae..3fef8de 100644
--- a/backend/static/js/Options.js
+++ b/backend/static/js/Options.js
@@ -12,6 +12,7 @@ export class BooleanOption {
   }
 
   set(value) {
+      this.checkbox.attr('checked', value);
       this.checkbox.prop('checked', value);
   }
 
@@ -48,16 +49,17 @@ export class Options {
   }
 
   get(name) {
-      options[name].get()
+      return this.options.get(name).get()
   }
   set(name, value) {
-      options[name].set(value)
+      this.options.get(name).set(value)
   }
 
   call(name, value) {
-      options[name].call(value)
+      this.options.get(name).call(value)
+  }
+
+  selector(name) {
+      return this.options.get(name).selector()
   }
 }
-//
-// export class Options;
-// export class  BooleanOption;
diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
index a5821f8..d21a959 100644
--- a/backend/templates/songs/index.html
+++ b/backend/templates/songs/index.html
@@ -18,11 +18,17 @@
     <link rel="stylesheet" type="text/css" href="{% sass_src 'datatables.sass' %}">
 {%  endblock %}
 {% block extra_options %}
-<div class="form-check form-check-inline ml-2">
-  <label class="form-check-label" for="hideChords" id="defaultCheckLabel">
+<div class="form-check form-check-inline mt-2 ml-2 text-left">
+  <input class="form-check-input ml-2" type="checkbox" value="" id="hideChords">
+  <label class="form-check-label" for="hideChords">
     {% trans "Hide chords" %}
   </label>
-  <input class="form-check-input ml-2" type="checkbox" value="" id="hideChords">
+</div>
+<div class="form-check form-check-inline mt-2 ml-2 text-left">
+  <input class="form-check-input ml-2" type="checkbox" value="" id="preventSleep">
+  <label class="form-check-label" for="preventSleep">
+    {% trans "Prevent sleep" %}
+  </label>
 </div>
 {% endblock %}
 {% block body %}
@@ -80,27 +86,8 @@ <h6 class="d-inline" ><%:author%></h6>
         <span class="icon-down-open"></span>
     </button>
     <script type="module">
-    import Cookies from "{% static 'js/js.cookie.js' %}"
     import {Options, BooleanOption} from "{% static 'js/Options.js' %}"
     const canWakeLock = () => 'wakeLock' in navigator;
-    let wakelock;
-    async function lockWakeState() {
-      if(!canWakeLock()) return;
-      try {
-        wakelock = await navigator.wakeLock.request();
-        wakelock.addEventListener('release', () => {
-          console.log('Screen Wake State Locked:', !wakelock.released);
-        });
-        console.log('Screen Wake State Locked:', !wakelock.released);
-      } catch(e) {
-        console.error('Failed to lock wake state with reason:', e.message);
-      }
-    }
-
-    function releaseWakeState() {
-      if(wakelock) wakelock.release();
-      wakelock = null;
-    }
 
     $.views.settings.delimiters("<%", "%>");
     $.fn.DataTable.ext.pager.numbers_length = 5;
@@ -192,11 +179,38 @@ <h6 class="d-inline" ><%:author%></h6>
             }
         }
 
+        let wakelock;
+        async function preventSleep(value) {
+            if(!canWakeLock()) return;
+            if (value) {
+              try {
+                wakelock = await navigator.wakeLock.request();
+                wakelock.addEventListener('release', () => {
+                  console.log('Screen Wake State Locked:', !wakelock.released);
+                });
+                console.log('Screen Wake State Locked:', !wakelock.released);
+              } catch(e) {
+                console.error('Failed to lock wake state with reason:', e.message);
+              }
+            } else {
+                if(wakelock) wakelock.release();
+                wakelock = null;
+            }
+        }
+
         const config = new Map([
-            ["hide_chords", new BooleanOption($("#hideChords"), hideChords, false)]
+            ["hide_chords", new BooleanOption($("#hideChords"), hideChords, false)],
+            ["prevent_sleep", new BooleanOption($("#preventSleep"), function(value) {
+                preventSleep(value).then()
+            }, false)]
         ])
         const options = new Options(config)
 
+        if (!canWakeLock()) {
+            options.set("prevent_sleep", false)
+            options.selector("prevent_sleep").attr('disabled', 'disabled');
+        }
+
 
         table.on( 'draw', function () {
             if (hidden) {
diff --git a/frontend/templates/base/index.html b/frontend/templates/base/index.html
index 8d6365d..3f52d6f 100644
--- a/frontend/templates/base/index.html
+++ b/frontend/templates/base/index.html
@@ -63,7 +63,7 @@
                         {% trans "Options" %}
                     </a>
                     <div class="dropdown-menu" aria-labelledby="languageDropdown" id="options">
-                        <div class="form-group d-flex ml-2 mr-2 ">
+                        <div class="form-group d-flex ml-2 mr-2 mb-0">
                             <label for="language" class="mr-2">
                                 {% trans "Language" %}
                             </label>
@@ -80,7 +80,10 @@
                                 <input name="language" type=hidden value={{ locale.code }}>
                             </form>
                         {% endfor %}
-                        {% block extra_options %}{% endblock %}
+                        <hr class="mt-2 mb-1">
+                        <div class="d-flex flex-column">
+                            {% block extra_options %}{% endblock %}
+                        </div>
                     </div>
                 </li>
             </ul>