From c3cb2ee605ccb8751198fddeec57ba5c977bf04b Mon Sep 17 00:00:00 2001
From: Haku <doubleimpact@protonmail.com>
Date: Wed, 24 Nov 2021 20:01:00 -0500
Subject: [PATCH] finished settings page

---
 src/settings.ts | 51 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/settings.ts b/src/settings.ts
index e69de29..d10042b 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -0,0 +1,51 @@
+document.querySelector('#content').innerHTML = `<h1>Raspberry Settings</h1>
+<fieldset>
+<legend>Keys</legend>
+<table>
+<tbody id="keys">
+
+</tbody>
+</table>
+</fieldset>`;
+
+async function addKeySetter(functionName: string, displayName?: string)
+{
+    if (displayName === undefined)
+        displayName = pretty(functionName);
+    const setKeyInput: HTMLInputElement = document.createElement('input');
+    setKeyInput.type = 'button';
+    setKeyInput.value = 'Set';
+    setKeyInput.classList.add('button');
+    setKeyInput.addEventListener('click', async (e: MouseEvent): Promise<void> =>
+    {
+        console.log(`Setting ${functionName}`);
+        const key: string = (document.querySelector(`#${functionName}-key`) as HTMLInputElement).value.toUpperCase();
+        await setStorageValue(functionName, key);
+    });
+
+    const tr: HTMLTableRowElement = document.createElement('tr');
+    const td1: HTMLTableDataCellElement = document.createElement('td');
+    td1.innerHTML += `<label>${displayName}</label>`;
+    const td2: HTMLTableDataCellElement = document.createElement('td');
+    td2.innerHTML += `<input type="text" id="${functionName}-key" value="${await getStorageValue(functionName) || '?'}">`;
+    const td3: HTMLTableDataCellElement = document.createElement('td');
+    td3.appendChild(setKeyInput);
+    tr.appendChild(td1);
+    tr.appendChild(td2);
+    tr.appendChild(td3);
+    document.querySelector('#keys').appendChild(tr);
+    // This doesn't work apparently
+    /*document.querySelector('#keys').innerHTML +=
+        `<tr><td><label>${displayName}</label></td><td><input type="text" id="${functionName}-key" value="${await getStorageValue(functionName) || '?'}"></td><td><input type="button" class="button" id="set-${functionName}-key" value="Set"></td></tr>`;*/
+}
+
+(async () =>
+{
+    // Set up the keybind setting form
+    for (let i = 0; i < keybinds.length; i++) {
+        if (keybinds[i].displayName)
+            await addKeySetter(keybinds[i].functionName, keybinds[i].displayName);
+        else
+            await addKeySetter(keybinds[i].functionName);
+    }
+})();
\ No newline at end of file