From 605ac71e2ffbf83652ce47bbf8ffc477df629e77 Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Tue, 3 Sep 2024 16:03:57 -0600
Subject: [PATCH] better show/hide & move ntfy/lastfm to own templates

---
 astro/public/scripts/ntfy.js                  | 24 +++++++
 .../components/main-page/silly-widgets.astro  | 62 +++----------------
 .../components/main-page/widgets/lastfm.astro | 18 ++++++
 .../components/main-page/widgets/ntfy.astro   | 48 ++++++++++++++
 4 files changed, 99 insertions(+), 53 deletions(-)
 create mode 100644 astro/src/components/main-page/widgets/lastfm.astro
 create mode 100644 astro/src/components/main-page/widgets/ntfy.astro

diff --git a/astro/public/scripts/ntfy.js b/astro/public/scripts/ntfy.js
index 3c6282c..34d33bd 100644
--- a/astro/public/scripts/ntfy.js
+++ b/astro/public/scripts/ntfy.js
@@ -4,10 +4,15 @@ const ntfyAttach = document.getElementById("ntfy-attach");
 const ntfyClickAction = document.getElementById("ntfy-click");
 const ntfyButton = document.getElementById("ntfy-button");
 
+const optionsCheck = document.getElementById("optionsCheckbox");
 const titleCheck = document.getElementById("titleCheckbox");
 const attachmentCheck = document.getElementById("attachmentCheckbox");
 const clickCheck = document.getElementById("clickCheckbox");
 
+const titleBoxLabel = document.getElementById("titleBoxLabel");
+const attachmentBoxLabel = document.getElementById("attachBoxLabel");
+const clickBoxLabel = document.getElementById("clickBoxLabel");
+
 
 const msgPFX = "message: "
 
@@ -86,6 +91,25 @@ async function ntfyClick() {
   }
 }
 
+function toggleOptions() {
+  if (optionsCheck.checked) {
+    titleBoxLabel.style.display = "initial";
+    attachmentBoxLabel.style.display = "initial";
+    clickBoxLabel.style.display = "initial";
+    titleCheck.style.display = "initial";
+    attachmentCheck.style.display = "initial";
+    clickCheck.style.display = "initial";
+  }
+  if (!optionsCheck.checked) {
+    titleBoxLabel.style.display = "none";
+    attachmentBoxLabel.style.display = "none";
+    clickBoxLabel.style.display = "none";
+    titleCheck.style.display = "none";
+    attachmentCheck.style.display = "none";
+    clickCheck.style.display = "none";
+  }
+}
+
 function toggleTitle() {
   if (titleCheck.checked) {
     ntfyTitle.style.display = "initial"
diff --git a/astro/src/components/main-page/silly-widgets.astro b/astro/src/components/main-page/silly-widgets.astro
index 6390cd0..27396e1 100644
--- a/astro/src/components/main-page/silly-widgets.astro
+++ b/astro/src/components/main-page/silly-widgets.astro
@@ -1,54 +1,10 @@
+---
+import LastFM from "./widgets/lastfm.astro";
+import NTFY from "./widgets/ntfy.astro";
+---
+
 <section class="content center">
-    <div id="lastfm-widget">
-    <div id="widget">
-      <a href="https://www.last.fm/user/LimePotato"><span style="color: var(--alt-accent-600);"><i class="nf nf-md-music"></i></span> - <span id="song">&#8987</span></a>
-    </div>
-    <div>
-      <span style="font-size: small;"
-        >latest played song on <a href="http://last.fm" target="_blank"
-          >last.fm</a
-        ></span
-      >
-    </div>
-    <hr> <!-- NTFY BOX -->
-    <div class="ntfy-box">
-      <h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
-      <small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</small>
-      <br>
-      <small style="font-size: 12px; color: rgb(252, 76, 76);">
-        DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
-      </small>
-      <br>
-      <br>
-      <fieldset style="margin-left: 35%; margin-right: 35%; margin-bottom: 2%;">
-      <div>
-        <input type="checkbox" id="titleCheckbox" name="titleCheckbox" onchange="toggleTitle()"/>
-        <label for="titleCheckbox">Add Title?</label>
-      </div>
-        <div>
-          <input type="checkbox" id="attachmentCheckbox" name="attachmentCheckbox" onchange="toggleAttach()" />
-          <label for="attachmentCheckbox">Add Attachment?</label>
-        </div>
-        <div>
-          <input type="checkbox" id="clickCheckbox" name="clickCheckbox" onchange="toggleClick()" />
-          <label for="clickCheckbox">Add Click Action?</label>
-        </div>
-      </fieldset>
-      <textarea id="ntfy-title" placeholder="title" rows=1 style="resize: none; display: none;"></textarea>
-      <textarea id="ntfy-message" placeholder="message" rows=2></textarea>
-      <textarea id="ntfy-attach" placeholder="attachment link" rows=1 style="resize: none;display: none;"></textarea>
-      <textarea id="ntfy-click" placeholder="click link" rows=1 style="resize: none; display: none;"></textarea>
-      <br>
-      <br>
-    <button
-    class="custom-btn btn-1"
-    style="width: 42%;"
-    onclick="ntfyClick()"
-    id="ntfy-button">
-    <span>Send</span>
-    </button>
-    <br>
-    <br>s
-    <small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
-    </div>
-  </section>
\ No newline at end of file
+  <LastFM />
+  <hr />
+  <NTFY />
+</section>
diff --git a/astro/src/components/main-page/widgets/lastfm.astro b/astro/src/components/main-page/widgets/lastfm.astro
new file mode 100644
index 0000000..32bdee8
--- /dev/null
+++ b/astro/src/components/main-page/widgets/lastfm.astro
@@ -0,0 +1,18 @@
+<div id="lastfm-widget">
+  <div id="widget">
+    <a href="https://www.last.fm/user/LimePotato"
+      ><span style="color: var(--alt-accent-600);"
+        ><i class="nf nf-md-music"></i></span
+      > - <span id="song">&#8987</span></a
+    >
+  </div>
+  <div>
+    <span style="font-size: small;"
+      >latest played song on <a
+        href="http://last.fm"
+        target="_blank"
+        >last.fm</a
+      ></span
+    >
+  </div>
+</div>
diff --git a/astro/src/components/main-page/widgets/ntfy.astro b/astro/src/components/main-page/widgets/ntfy.astro
new file mode 100644
index 0000000..ddda693
--- /dev/null
+++ b/astro/src/components/main-page/widgets/ntfy.astro
@@ -0,0 +1,48 @@
+<div class="ntfy-box">
+  <!-- DISCLAIMER/INFO -->
+    <h4 style="margin-bottom: 0px;">send me a notification! type words and press send</h4>
+    <small style="font-size: 15px;">music recs, questions, jokes, confessions of your sins, etc, welcome, I respond to all or most as vagueposts on the fediverse.</small>
+    <br>
+    <small style="font-size: 12px; color: rgb(252, 76, 76);">
+      DESTROYED ON SIGHT: slurs, flirting, lewd or sexual comments/jokes without previous explicit permission.
+    </small>
+    <br>
+    <br>
+  <!-- TEXT AREAS -->
+    <div>
+    <textarea id="ntfy-title" placeholder="title" rows=1 style="resize: none; display: none;"></textarea>
+    <textarea id="ntfy-message" placeholder="message" rows=2></textarea>
+    <textarea id="ntfy-attach" placeholder="attachment link" rows=1 style="resize: none;display: none;"></textarea>
+    <textarea id="ntfy-click" placeholder="click link" rows=1 style="resize: none; display: none;"></textarea>
+  </div>
+  <button
+  class="custom-btn btn-1"
+  style="width: 42%; margin-top: 2%"
+  onclick="ntfyClick()"
+  id="ntfy-button">
+  <span>Send</span>
+  </button>
+    <!-- OPTIONS BOXES -->
+    <fieldset style="margin-left: 35%; margin-right: 35%; margin-bottom: -4%; margin-top: 2%;">
+        <div>
+          <input type="checkbox" id="optionsCheckbox" name="optionsCheckbox" onchange="toggleOptions()"/>
+          <label for="optionsCheckbox">More Options</label>
+        </div>
+      <div>
+        <input type="checkbox" id="titleCheckbox" name="titleCheckbox" onchange="toggleTitle()" style="display: none;"/>
+        <label  id="titleBoxLabel" style="display: none;" for="titleCheckbox">Add Title?</label>
+      </div>
+        <div>
+          <input type="checkbox" id="attachmentCheckbox" name="attachmentCheckbox" onchange="toggleAttach()" style="display: none;"/>
+          <label id="attachBoxLabel" style="display: none;" for="attachmentCheckbox">Add Attachment?</label>
+        </div>
+        <div>
+          <input type="checkbox" id="clickCheckbox" name="clickCheckbox" onchange="toggleClick()" style="display: none;"/>
+          <label id="clickBoxLabel" style="display: none;" for="clickCheckbox">Add Click Action?</label>
+        </div>
+      </fieldset>
+  <br>
+  <br>
+  <!-- DISCLAIMER/INFO -->
+  <small>if it doesnt seem to be working, or you have javascript disabled, <br>you can POST to <span class="glitch">https://ntfy.ouroboros.group/beep</span>.</small>
+  </div>
\ No newline at end of file