From c742616e98f48e4acb91863bbc860a5dd78febf3 Mon Sep 17 00:00:00 2001
From: "Morgan 'ARR\\!' Allen" <morganrallen@gmail.com>
Date: Thu, 19 Oct 2023 11:52:25 -0700
Subject: [PATCH] add very basic sender element and input example using echo

---
 static/index.js      | 34 ++++++++++++++++++++++++++++++++++
 templates/index.html |  5 +++++
 2 files changed, 39 insertions(+)

diff --git a/static/index.js b/static/index.js
index 88c2f13..36d7e55 100644
--- a/static/index.js
+++ b/static/index.js
@@ -98,6 +98,11 @@ class WSElement extends HTMLElement {
     this.innerText = data;
   }
 
+  // kind of wonky work around because privates are not inheritted
+  get sock() {
+    return this.#socket;
+  }
+
   // static method for creating new sockets, which are tracked
   // on the static propert WSElement.#sockets
   static #newSocket(src) {
@@ -110,6 +115,34 @@ class WSElement extends HTMLElement {
   }
 }
 
+class WSSenderElement extends WSElement {
+  send(data) {
+    this.sock.send(data);
+  }
+
+  // by default WSSenderElement should not write to it's own .innerText
+  // instead the subclass should override `.message` for desired behavior
+  message(data) {
+    // no nothing
+  }
+}
+
+class WSInput extends WSSenderElement {
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.insertAdjacentHTML('beforeend', '<label class="time-label" for="ws-input-send">Send: </label> <input placeholder="Press enter" id="ws-input-send" />');
+    this.input = this.querySelector('input');
+    var self = this;
+    this.input.addEventListener('keyup', function(evt) {
+      if(evt.keyCode === 13) {
+        self.send(self.input.value);
+        self.input.value = '';
+      }
+    })
+  }
+}
+
 // Example subclass to display a basic 'Time: 00:00:00'
 class WSTime extends WSElement {
   connectedCallback() {
@@ -214,5 +247,6 @@ class WSTable extends WSElement {
 
 // define custom elements
 customElements.define('ws-element', WSElement);
+customElements.define('ws-input', WSInput);
 customElements.define('ws-time', WSTime);
 customElements.define('ws-table', WSTable);
diff --git a/templates/index.html b/templates/index.html
index ac5f2be..e7d0011 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,6 +34,11 @@
         <div>
           <ws-element autoreconnect="false" src="/ticker"></ws-element>
         </div>
+        <div>
+          <ws-input src="/echo"></ws-input>
+          <br />
+          Receive: <ws-element src="/echo"></ws-element>
+        </div>
         <ws-table limit="10" autoheader src="/logs"></ws-table>
       </main>
     </div>