239 lines
7.6 KiB
TypeScript
239 lines
7.6 KiB
TypeScript
import {Adapter} from "./adapter";
|
|
import {Message, Attachment} from "./message"
|
|
import util from "./util"
|
|
|
|
var $ = util.$
|
|
var _ = util._
|
|
|
|
function main():void {
|
|
const settings = _("settings", JSON.parse(localStorage.getItem("settings") ?? "{}"));
|
|
const adapters = _("adapters", []);
|
|
|
|
if (settings != null) {
|
|
for (let s of settings.adapters ?? []) {
|
|
let a: Adapter = Adapter.create()
|
|
switch (s.protocol) {
|
|
case "nostr":
|
|
adapters.push(Adapter.toNostr(a, s));
|
|
break;
|
|
case "mastodon":
|
|
adapters.push(Adapter.toMasto(a, s));
|
|
}
|
|
}
|
|
if (adapters.length > 0) {
|
|
_("currentAdapter", 0);
|
|
// update tabbar and tabcontent with first adapter
|
|
}
|
|
} else {
|
|
console.log("no settings exist for this client");
|
|
_("settings", { adapters: [] });
|
|
showSettings();
|
|
}
|
|
registerServiceWorker();
|
|
};
|
|
|
|
async function registerServiceWorker() {
|
|
if ("serviceWorker" in navigator) {
|
|
try {
|
|
const registration = await navigator.serviceWorker.register("/serviceWorker.js", {
|
|
scope: "/",
|
|
});
|
|
if (registration.installing) {
|
|
console.log("Service worker installing");
|
|
} else if (registration.waiting) {
|
|
console.log("Service worker installed");
|
|
} else if (registration.active) {
|
|
console.log("Service worker active");
|
|
}
|
|
} catch (error) {
|
|
console.error(`Registration failed with ${error}`);
|
|
}
|
|
const registration = await navigator.serviceWorker.ready;
|
|
(registration as any).sync.register("testdata").then((r:any)=>{console.log("but i will see this!")});
|
|
}
|
|
};
|
|
|
|
|
|
function showSettings():void {
|
|
// tab bar hidden
|
|
const tabbar = $("tabbar");
|
|
if (tabbar) {
|
|
tabbar.style.display = "none";
|
|
}
|
|
|
|
// tabcontent to show settings ui
|
|
const tabcontent = $("tabcontent");
|
|
const adapters = _("adapters") as Adapter[] ?? [];
|
|
|
|
if (tabcontent) {
|
|
let html = "<p>this is our settings dialogue</p>";
|
|
html += "<button onclick='addAdapter()'>New</button>";
|
|
html += adapters.reduce((self: string, a: Adapter) => {
|
|
self += `<li><a href='#' onclick='editAdapter(${a.nickname})'>${a.nickname}</a></li>`
|
|
return self;
|
|
}, "<ul id='settings_adapterlist'>");
|
|
html += "</ul>";
|
|
html += "<button onclick='saveSettings()'>save</button>";
|
|
tabcontent.innerHTML = html;
|
|
}
|
|
}
|
|
|
|
function addAdapter(): void {
|
|
const tabcontent = $("tabcontent");
|
|
if (tabcontent) {
|
|
// dropdown for protocol
|
|
let html = "<select id='settings_newadapter_protocolselect' onchange='fillAdapterProtocolOptions()'>";
|
|
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 onclick='saveAdapter()'>Add</button>";
|
|
html += "<button onclick='showSettings()'>Back</button>";
|
|
|
|
tabcontent.innerHTML = html;
|
|
}
|
|
}
|
|
|
|
function fillAdapterProtocolOptions(): void {
|
|
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;
|
|
}
|
|
}
|
|
|
|
function saveSettings(): void {
|
|
const settings = _("settings");
|
|
if (settings) {
|
|
localStorage.setItem("settings", JSON.stringify(settings));
|
|
}
|
|
// tab bar hidden
|
|
const tabbar = $("tabbar");
|
|
if (tabbar) {
|
|
tabbar.style.display = "block";
|
|
}
|
|
|
|
// tabcontent to show settings ui
|
|
const tabcontent = $("tabcontent");
|
|
if (tabcontent) {
|
|
tabcontent.innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function saveAdapter(): void {
|
|
let self: 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 ?? "";
|
|
self = { 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 ?? "";
|
|
self = { 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(self);
|
|
|
|
localStorage.setItem("settings", JSON.stringify(settings));
|
|
showSettings();
|
|
}
|
|
}
|
|
|
|
|
|
let _conn: WebSocket | null = null;
|
|
|
|
async function authorizedFetch(method: string, uri: string, body: any): Promise<Response> {
|
|
const headers = new Headers()
|
|
headers.set('Authorization', 'Bearer ' + _("skey"))
|
|
return await fetch(uri, {
|
|
method: method,
|
|
headers: headers,
|
|
body: body,
|
|
})
|
|
}
|
|
|
|
function connect() {
|
|
|
|
const wsProto = location.protocol == "https:" ? "wss" : "ws";
|
|
_conn = new WebSocket(`${wsProto}://${location.host}/subscribe`, "underbbs");
|
|
_conn.addEventListener("open", (e: any) => {
|
|
console.log("websocket connection opened");
|
|
console.log(JSON.stringify(e));
|
|
});
|
|
_conn.addEventListener("message", (e: any) => {
|
|
|
|
// debugging
|
|
console.log(e)
|
|
|
|
// now we'll figure out what to do with it
|
|
const data = JSON.parse(e.data);
|
|
if (data.key) {
|
|
_("skey", data.key)
|
|
authorizedFetch("POST", "/api/adapters", JSON.stringify(_("settings").adapters))
|
|
} else {
|
|
// typeswitch on the incoming data and adapters
|
|
|
|
// if it's a regular message, add it to the store
|
|
// if the adapter is active, inject the web components
|
|
// FOR HOTFETCHED DATA:
|
|
// before fetching, we can set properties on the DOM,
|
|
// so when those data return to us we know where to inject components!
|
|
}
|
|
});
|
|
_conn.addEventListener("error", (e: any) => {
|
|
console.log("websocket connection error");
|
|
console.log(JSON.stringify(e));
|
|
});
|
|
_("websocket", _conn);
|
|
}
|
|
|
|
_("addAdapter", addAdapter);
|
|
_("saveAdapter", saveAdapter);
|
|
_("fillAdapterProtocolOptions", fillAdapterProtocolOptions);
|
|
_("showSettings", showSettings);
|
|
_("saveSettings", saveSettings);
|
|
_("connect", connect);
|
|
main();
|