2024-08-21 04:00:49 +00:00
|
|
|
{"version":3,"file":"userSelection-GRU1gtOt.js","sources":["../../src/scripts/ui/userSelection.ts"],"sourcesContent":["import { api } from '../api'\r\nimport { $el } from '../ui'\r\nimport { createSpinner } from './spinner'\r\nimport './userSelection.css'\r\n\r\ninterface SelectedUser {\r\n username: string\r\n userId: string\r\n created: boolean\r\n}\r\n\r\nexport class UserSelectionScreen {\r\n async show(users, user): Promise<SelectedUser> {\r\n const userSelection = document.getElementById('comfy-user-selection')\r\n userSelection.style.display = ''\r\n return new Promise((resolve) => {\r\n const input = userSelection.getElementsByTagName('input')[0]\r\n const select = userSelection.getElementsByTagName('select')[0]\r\n const inputSection = input.closest('section')\r\n const selectSection = select.closest('section')\r\n const form = userSelection.getElementsByTagName('form')[0]\r\n const error = userSelection.getElementsByClassName('comfy-user-error')[0]\r\n const button = userSelection.getElementsByClassName(\r\n 'comfy-user-button-next'\r\n )[0]\r\n\r\n let inputActive = null\r\n input.addEventListener('focus', () => {\r\n inputSection.classList.add('selected')\r\n selectSection.classList.remove('selected')\r\n inputActive = true\r\n })\r\n select.addEventListener('focus', () => {\r\n inputSection.classList.remove('selected')\r\n selectSection.classList.add('selected')\r\n inputActive = false\r\n select.style.color = ''\r\n })\r\n select.addEventListener('blur', () => {\r\n if (!select.value) {\r\n select.style.color = 'var(--descrip-text)'\r\n }\r\n })\r\n\r\n form.addEventListener('submit', async (e) => {\r\n e.preventDefault()\r\n if (inputActive == null) {\r\n error.textContent =\r\n 'Please enter a username or select an existing user.'\r\n } else if (inputActive) {\r\n const username = input.value.trim()\r\n if (!username) {\r\n error.textContent = 'Please enter a username.'\r\n return\r\n }\r\n\r\n // Create new user\r\n // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)\r\n // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)\r\n input.disabled =\r\n select.disabled =\r\n // @ts-expect-error\r\n input.readonly =\r\n // @ts-expect-error\r\n select.readonly =\r\n true\r\n const spinner = createSpinner()\r\n button.prepend(spinner)\r\n try {\r\n const resp = await api.createUser(username)\r\n if (resp.status >= 300) {\r\n let message =\r\n 'Error creating user: ' + resp.status + ' ' + resp.statusText\r\n try {\r\n const res = await resp.json()\r\n if (res.error) {\r\n message = res.error\r\n }\r\n } catch (error) {}\r\n throw new Error(message)\r\n }\r\n\r\n resolve({ username, userId: await resp.json(), created: true })\r\n } catch (err) {\r\n spinner.remove()\r\n error.textContent =\r\n err.message ??\r\n err.statusText ??\r\n err ??\r\n 'An unknown error occurred.'\r\n // Property 'readonly' does not exist on type 'HTMLSelectElement'.ts(2339)\r\n // Property 'readonly' does not exist on type 'HTMLInputElement'. Did you mean 'readOnly'?ts(2551)\r\n input.disabled =\r\n select.disabled =\r\n // @ts-expect-error\r\n input.readonly =\r\n // @ts-expect-error\r\n select.readonly =\r\n false\r\n return\r\n }\r\n } else if (!select.value) {\r\n error.textContent =
|
