underbbs/ts/settings-element.ts

import util from "./util"
import websocket from "./websocket"

var $ = util.$
var _ = util._

export class SettingsElement extends HTMLElement {
  static observedAttributes = [ "data-adapters" ]
  
  private _adapters: string[] = [];
  
  constructor() {
    super();
  }
  
  connectedCallback() {
    this.attributeChangedCallback();
  }
  
  attributeChangedCallback() {
    this._adapters = this.getAttribute("data-adapters")?.split(",") ?? [];
    this.showSettings(this)();
  }

  showSettings(self: SettingsElement): ()=>void {
    return ()=>{
    let html = "";
    html += "<button id='settings_adapter_create_btn'>New</button>";
    html += self._adapters.reduce((self: string, a: string) => {
      self += `<li><a id='settings_adapter_edit_${a}' href='#editadapter'>${a}</a></li>`
      return self;
    }, "<ul id='settings_adapterlist'>");
    html += "</ul>";
    html += "<button id='settings_connect_btn'>connect</button>";
    self.innerHTML = html;
    
    let create = $("settings_adapter_create_btn");
    if (create) {
      create.addEventListener("click", self.showCreateAdapter(self), false);
    }
    for (let a of this._adapters) {
      let edit = $(`settings_adapter_edit_${a}`);
      if (edit) {
        edit.addEventListener("click", self.showEditAdapterFunc(a, self), false);
      }
    }
    let connect = $("settings_connect_btn");
    if (connect) {
      connect.addEventListener("click", websocket.connect, false);
    }
    }
  }
  
  showCreateAdapter(self: SettingsElement): ()=>void {
  return ()=>{
    // dropdown for protocol
    let html = "<select id='settings_newadapter_protocolselect'>";
    html += [ "nostr", "mastodon", "misskey" ].reduce((self, p)=>{
      self += `<option value='${p}'>${p}</option>`;
      return self;
    }, "");
    html += "</select>";
    
    // nostr is the first protocol, so show its options by default
    html += "<div id='settings_newadapter_protocoloptions'>";
    html += "  <label>nickname<input id='settings_newadapter_nickname'/></label>";
    html += "  <label>privkey<input id='settings_newadapter_nostr_privkey'/></label>";
    html += "  <label>default relays<input id='settings_newadapter_nostr_default_relays'/></label>";
    html += "</div>";
    
    html += "<button id='settings_adapter_create_save_btn'>add</button>";
    html += "<button id='settings_adapter_create_back_btn'>back</button>";
  
    self.innerHTML = html;
    
    let protocolSelect = $("settings_newadapter_protocolselect");
    if (protocolSelect) {
      protocolSelect.addEventListener("change", self.fillAdapterProtocolOptions, false);
    }
    
    let save = $("settings_adapter_create_save_btn");
    if (save) {
      save.addEventListener("click", self.saveAdapter(self), false);
    }
    
    let back = $("settings_adapter_create_back_btn");
    if (back) {
      back.addEventListener("click", self.showSettings(self), false);
    }
    }
  }
  
  saveAdapter(self: SettingsElement): ()=>void {
    return ()=>{
    let adapterdata: any = {};
    // get selected adapter protocol
    const proto = $("settings_newadapter_protocolselect") as HTMLSelectElement;
    console.log(proto.options[proto.selectedIndex]);
   
    const nickname = ($("settings_newadapter_nickname") as HTMLInputElement)?.value ?? "" ;
  
    // switch protocol
    switch (proto.options[proto.selectedIndex].value) {
      case "nostr":
        const privkey = ($("settings_newadapter_nostr_privkey") as HTMLInputElement)?.value ?? "";
        const relays = ($("settings_newadapter_nostr_default_relays") as HTMLInputElement)?.value ?? "";
        adapterdata = { nickname: nickname, protocol: "nostr", privkey: privkey, relays: relays.split(",").map(r=>r.trim()) };
        break;
      case "mastodon":
      case "misskey":
        const server = ($("settings_newadapter_masto_server") as HTMLInputElement)?.value ?? "";
        const apiKey = ($("settings_newadapter_masto_apikey") as HTMLInputElement)?.value ?? "";
        adapterdata = { nickname: nickname, protocol: proto.options[proto.selectedIndex].value, server: server, apiKey: apiKey };
        break;
    }
    const settings = _("settings");
    if (settings) {
      if (!settings.adapters) {
        settings.adapters = [];
      }
      settings.adapters.push(adapterdata);
      self._adapters.push(adapterdata.nickname);
      localStorage.setItem("settings", JSON.stringify(settings));
      
      self.setAttribute("adapters", self._adapters.join(","));
    }
    }
  }
  
  fillAdapterProtocolOptions() { 
    const proto = $("settings_newadapter_protocolselect") as HTMLSelectElement;
  
    let html = "";
  
    switch(proto?.options[proto.selectedIndex].value) {
      case "nostr":
        html += "  <label>nickname<input id='settings_newadapter_nickname'/></label>";
        html += "  <label>privkey<input id='settings_newadapter_nostr_privkey'/></label>";
        html += "  <label>default relays<input id='settings_newadapter_nostr_default_relays'/></label>";
        break;
      case "mastodon":
      case "misskey":
        html += "  <label>nickname<input id='settings_newadapter_nickname'/></label>";
        html += "  <label>server<input id='settings_newadapter_masto_server'/></label>";
        html += "  <label>API key<input id='settings_newadapter_masto_apikey'/></label>";
        break;
    }
  
    const div = $("settings_newadapter_protocoloptions");
    if (div) {
      div.innerHTML = html;
    }
  }

  
  showEditAdapterFunc(adapter: string, self: SettingsElement): ()=>void {
    // this UI has to be able to edit an exiting adapter or delete it
    return ()=>{};
  }
}