Move settings to dedicated page

diff --git a/src/littlesongplace/__init__.py b/src/littlesongplace/__init__.py
index d9dbf1bcd8a4709cf5c2c1d12bdfd90ea96c585e..acb461fc89541750d0d298cd9b953ad77e51d641 100644 (file)
--- a/src/littlesongplace/__init__.py
+++ b/src/littlesongplace/__init__.py
@@ -101,6 +101,10 @@ def site_news():
 def about():
     return render_template("about.html")
 
+@app.get("/settings")
+def settings():
+    return render_template("settings.html")
+
 @app.get("/service.js")
 def service_worker():
     return send_from_directory("static", "service.js")

diff --git a/src/littlesongplace/templates/activity.html b/src/littlesongplace/templates/activity.html
index 5d98d667e6a09d8adb17cdd918ce521173736e0f..ab79726f7ad4aaa054a0e488e6018154a9f76fcf 100644 (file)
--- a/src/littlesongplace/templates/activity.html
+++ b/src/littlesongplace/templates/activity.html
@@ -4,111 +4,6 @@
 
 {% block body %}
 <h1>activity</h1>
-
-<button class="button" onclick="showSettings()" id="btn-show-settings">Settings</button>
-
-<div id="activity-settings" class="boxy" style="line-height: 1.5;" hidden>
-    <!--<span>Push notifications are currently disabled on this device.</span>-->
-    <!--<button onclick="enablePushNotifications()" class="button" style="float: right;">Enable</button>-->
-    Send me a push notification on this device when:
-    <br/>
-    <label><input type="checkbox" onclick="updateSettings()" id="comment-push">I get a new comment</label>
-    <br/>
-    <label><input type="checkbox" onclick="updateSettings()" id="song-push">Anyone uploads a new song (at most once per day)</label>
-</div>
-
-<br/>
-<br/>
-
-<script>
-
-function updateSelections() {
-    // Prevent this from getting called again on the next page load
-    document.removeEventListener("DOMContentLoaded", updateSelections);
-
-    if (localStorage.getItem("subid") && Notification.permission == "granted")
-    {
-        const params = new URLSearchParams({subid: window.localStorage.getItem("subid")});
-        fetch(`/push-notifications/settings?${params}`).then((r) => {
-            r.json().then((j) => {
-                console.log(j);
-                document.getElementById("comment-push").checked = j.comments;
-                document.getElementById("song-push").checked = j.songs;
-            });
-        })
-    }
-    else {
-        document.getElementById("comment-push").checked = false;
-        document.getElementById("song-push").checked = false;
-    }
-}
-document.addEventListener("DOMContentLoaded", updateSelections());
-
-function showSettings() {
-    document.getElementById("activity-settings").hidden = false;
-    document.getElementById("btn-show-settings").hidden = true;
-}
-
-async function updateSettings() {
-    const comment_push_enabled = document.getElementById("comment-push").checked;
-    const song_push_enabled = document.getElementById("song-push").checked;
-
-    // Enable/subscribe to notifications
-    if (comment_push_enabled || song_push_enabled)
-    {
-        await enablePushNotifications();
-    }
-
-    // Update notification settings
-    const response = await fetch(
-        "/push-notifications/settings", {
-            method: "post",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                comments: comment_push_enabled,
-                songs: song_push_enabled,
-                subid: window.localStorage.getItem("subid"),
-            })
-        }
-    );
-}
-
-async function enablePushNotifications() {
-    if (!("serviceWorker" in navigator))
-    {
-        return;  // Browser does not support notifications
-    }
-
-    // Show notification permission request dialog
-    const permission = await window.Notification.requestPermission();
-    if (permission === "granted") {
-        // Subscribe to push notifications (if we don't already have an active subscription)
-        try {
-            await syncPushSubscription();
-        }
-        catch (err) {
-            console.log("Error subscribing to push notifications:", err);
-        }
-    }
-    else {
-        console.log("Did not get permission to send notifications:", permission);
-    }
-}
-
-async function notificationsEnabled() {
-    const registration = await navigator.serviceWorker.getRegistration();
-    const permission = await registration.pushManager.permissionState();
-    if (permission == "granted") {
-        const existingSubscription = await registration.pushManager.getSubscription();
-        if (existingSubscription)
-        {
-            return true;
-        }
-    }
-    return false;
-}
-</script>
-
 <div id="activity-contents">
     {% for comment in comments -%}
     <div class="boxy">

diff --git a/src/littlesongplace/templates/settings.html b/src/littlesongplace/templates/settings.html
new file mode 100644 (file)
index 0000000..42c3c7b
--- /dev/null
+++ b/src/littlesongplace/templates/settings.html
@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+
+{% block title %}Activity{% endblock %}
+
+{% block body %}
+<h1>settings</h1>
+
+<h2>push notifications</h2>
+<div id="activity-settings" style="line-height: 1.5;">
+    <!--<span>Push notifications are currently disabled on this device.</span>-->
+    <!--<button onclick="enablePushNotifications()" class="button" style="float: right;">Enable</button>-->
+    Send me a push notification on this device when:
+    <br/>
+    <label><input type="checkbox" onclick="updateSettings()" id="comment-push">I get a new comment</label>
+    <br/>
+    <label><input type="checkbox" onclick="updateSettings()" id="song-push">Anyone uploads a new song (at most once per day)</label>
+</div>
+
+<script>
+
+function updateSelections() {
+    // Prevent this from getting called again on the next page load
+    document.removeEventListener("DOMContentLoaded", updateSelections);
+
+    if (localStorage.getItem("subid") && Notification.permission == "granted")
+    {
+        const params = new URLSearchParams({subid: window.localStorage.getItem("subid")});
+        fetch(`/push-notifications/settings?${params}`).then((r) => {
+            r.json().then((j) => {
+                console.log(j);
+                document.getElementById("comment-push").checked = j.comments;
+                document.getElementById("song-push").checked = j.songs;
+            });
+        })
+    }
+    else {
+        document.getElementById("comment-push").checked = false;
+        document.getElementById("song-push").checked = false;
+    }
+}
+document.addEventListener("DOMContentLoaded", updateSelections());
+
+async function updateSettings() {
+    const comment_push_enabled = document.getElementById("comment-push").checked;
+    const song_push_enabled = document.getElementById("song-push").checked;
+
+    // Enable/subscribe to notifications
+    if (comment_push_enabled || song_push_enabled)
+    {
+        await enablePushNotifications();
+    }
+
+    // Update notification settings
+    const response = await fetch(
+        "/push-notifications/settings", {
+            method: "post",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({
+                comments: comment_push_enabled,
+                songs: song_push_enabled,
+                subid: window.localStorage.getItem("subid"),
+            })
+        }
+    );
+}
+
+async function enablePushNotifications() {
+    if (!("serviceWorker" in navigator))
+    {
+        return;  // Browser does not support notifications
+    }
+
+    // Show notification permission request dialog
+    const permission = await window.Notification.requestPermission();
+    if (permission === "granted") {
+        // Subscribe to push notifications (if we don't already have an active subscription)
+        try {
+            await syncPushSubscription();
+        }
+        catch (err) {
+            console.log("Error subscribing to push notifications:", err);
+        }
+    }
+    else {
+        console.log("Did not get permission to send notifications:", permission);
+    }
+}
+
+async function notificationsEnabled() {
+    const registration = await navigator.serviceWorker.getRegistration();
+    const permission = await registration.pushManager.permissionState();
+    if (permission == "granted") {
+        const existingSubscription = await registration.pushManager.getSubscription();
+        if (existingSubscription)
+        {
+            return true;
+        }
+    }
+    return false;
+}
+</script>
+
+{% endblock %}
+