finished settings page

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);
+    }
+})();