\n\t);\n}\n","import { ActionFunctionArgs, redirect } from 'react-router-dom';\nimport { attemptAutoLogin, isLoggedIn, login, LoginError } from '../../../auth';\nimport { TelestionOptions } from '../../model.ts';\nimport { wait } from '../../../utils';\n\nlet resumeAfterLogin: string | undefined = undefined;\n\n/**\n * Sets a URL that the login action redirects after the user has logged in.\n * @param url - the url the login action redirects after the user login\n */\nexport function setResumeAfterLogin(url: string) {\n\tresumeAfterLogin = url;\n}\n\n/**\n * Resets the url the login action redirects after the user has logged in.\n */\nexport function resetResumeAfterLogin() {\n\tresumeAfterLogin = undefined;\n}\n\nexport function loginLoader({ defaultBackendUrl }: TelestionOptions) {\n\treturn async () => {\n\t\tif (isLoggedIn()) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\t// try to log in with the credentials from the session storage\n\t\tif (await attemptAutoLogin()) return redirect(resumeAfterLogin ?? '/');\n\n\t\t// show the login form\n\t\treturn {\n\t\t\tdefaultBackendUrl\n\t\t};\n\t};\n}\n\nexport function loginAction() {\n\treturn async ({ request }: ActionFunctionArgs) => {\n\t\tconst formData = await request.formData();\n\t\tconst errors: Record = {};\n\n\t\tlet natsUrl = formData.get('natsUrl');\n\t\tif (typeof natsUrl !== 'string' || !natsUrl.length) {\n\t\t\terrors.natsUrl = 'Please enter a valid nats server url';\n\t\t\tnatsUrl = '';\n\t\t}\n\n\t\tlet username = formData.get('username');\n\t\tif (typeof username !== 'string' || !username.length) {\n\t\t\terrors.username = 'Please enter a valid username';\n\t\t\tusername = '';\n\t\t}\n\n\t\tconst password = formData.get('password');\n\t\tif (typeof password !== 'string' || !password.length) {\n\t\t\terrors.password = 'Please enter a valid password';\n\t\t}\n\n\t\tif (Object.keys(errors).length) {\n\t\t\treturn {\n\t\t\t\terrors,\n\t\t\t\tvalues: {\n\t\t\t\t\tnatsUrl,\n\t\t\t\t\tusername\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\ttry {\n\t\t\tawait Promise.all([\n\t\t\t\tlogin(natsUrl, username, password as string),\n\t\t\t\twait(500)\n\t\t\t]);\n\t\t\tconsole.log('Resume after login url:', resumeAfterLogin);\n\t\t\treturn redirect(resumeAfterLogin ?? '/');\n\t\t} catch (err) {\n\t\t\tconsole.error(err);\n\t\t\tif (err instanceof LoginError) {\n\t\t\t\terrors.natsUrl = err.messages.natsUrlMessage;\n\t\t\t\terrors.username = err.messages.usernameMessage;\n\t\t\t\terrors.password = err.messages.passwordMessage;\n\t\t\t} else if (err instanceof Error) {\n\t\t\t\terrors.general = err.message;\n\t\t\t} else {\n\t\t\t\terrors.general = JSON.stringify(err);\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\terrors,\n\t\t\t\tvalues: {\n\t\t\t\t\tnatsUrl,\n\t\t\t\t\tusername\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t};\n}\n","import { redirect } from 'react-router-dom';\nimport { isLoggedIn, logout } from '../../auth';\nimport { wait } from '../../utils';\nimport { resetResumeAfterLogin } from './login';\n\nexport function logoutLoader() {\n\treturn async () => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tawait Promise.all([logout(), wait(500)]);\n\t\tresetResumeAfterLogin();\n\t\treturn redirect('/login');\n\t};\n}\n","import { z } from 'zod';\nimport { generatePath, Link, useParams, useSubmit } from 'react-router-dom';\nimport { NavDropdown } from 'react-bootstrap';\n\nimport { UserData } from '../../../user-data';\n\nconst paramsSchema = z.object({\n\tdashboardId: z.string().optional()\n});\n\nexport interface DashboardDropdownProps {\n\tdashboards: UserData['dashboards'];\n}\n\nexport function DashboardDropdown({ dashboards }: DashboardDropdownProps) {\n\tconst submit = useSubmit();\n\tconst { dashboardId } = paramsSchema.parse(useParams());\n\n\treturn (\n\t\t\n\t\t\t{Object.entries(dashboards).map(dashboard => (\n\t\t\t\t\n\t\t\t\t\t{dashboard[1].title}\n\t\t\t\t\n\t\t\t))}\n\t\t\t\n\t\t\t submit(null, { method: 'post' })}>\n\t\t\t\tNew Dashboard...\n\t\t\t\n\t\t\n\t);\n}\n","import { z } from 'zod';\nimport {\n\tgeneratePath,\n\tLink,\n\tOutlet,\n\tuseLoaderData,\n\tuseMatch,\n\tuseNavigation,\n\tuseParams\n} from 'react-router-dom';\nimport {\n\tButton,\n\tContainer,\n\tNav as BSNav,\n\tNavbar,\n\tSpinner\n} from 'react-bootstrap';\nimport { clsx } from 'clsx';\n\nimport { userDataSchema } from '../../../user-data';\nimport { DashboardDropdown } from './dashboard-dropdown.tsx';\n\nimport styles from './page-wrapper.module.css';\n\nconst loaderDataSchema = z.object({\n\tdashboards: userDataSchema.shape.dashboards.optional()\n});\n\nconst paramsSchema = z.object({\n\tdashboardId: z.string().optional()\n});\n\nexport interface PageWrapperProps {\n\t/**\n\t * Controls the visibility of the dashboard selector in the navigation bar.\n\t */\n\tshowSelector: boolean;\n}\n\nexport function PageWrapper({ showSelector }: PageWrapperProps) {\n\tconst { dashboards } = loaderDataSchema.parse(useLoaderData());\n\tconst { dashboardId } = paramsSchema.parse(useParams());\n\tconst match = useMatch('/dashboards/:dashboardId/edit');\n\tconst navigation = useNavigation();\n\tconst isLoggingOut =\n\t\tnavigation.state === 'loading' &&\n\t\tnavigation.location.pathname === '/logout';\n\n\tif (isLoggingOut) {\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
Logging out...
\n\t\t\t
\n\t\t);\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{/* only render on dashboard pages and when dashboards are defined */}\n\t\t\t\t\t{showSelector && !!dashboards && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{dashboardId &&\n\t\t\t\t\t\t\t\t(match ? (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import { getUserData } from '../../../user-data';\n\nexport function pageWrapperLoader() {\n\treturn () => {\n\t\tconst userData = getUserData();\n\n\t\treturn {\n\t\t\tdashboards: userData?.dashboards\n\t\t};\n\t};\n}\n","import { Button, Stack } from 'react-bootstrap';\nimport { PromptAction } from '../model.ts';\n\nexport interface NewUserBannerProps {\n\tisDefaultAvailable: boolean;\n\tonClick: (action: PromptAction) => void;\n}\n\nexport function NewUserPrompt({\n\tisDefaultAvailable,\n\tonClick\n}: NewUserBannerProps) {\n\tconst actionText = `You can either ${\n\t\tisDefaultAvailable && 'load the default dashboards, '\n\t}start from scratch creating a custom dashboard, or import your own existing dashboard configuration from a file.`;\n\n\treturn (\n\t\t<>\n\t\t\t
Welcome!
\n\t\t\t
\n\t\t\t\tWelcome to the Telestion Ground Station! It looks like this is your\n\t\t\t\tfirst time using the ground station and there aren't any dashboards.\n\t\t\t
\n\t\t\t
{actionText}
\n\n\t\t\t\n\t\t\t\t{isDefaultAvailable && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t onClick('blank')}\n\t\t\t\t>\n\t\t\t\t\tCreate blank dashboard\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import { PromptAction } from '../model.ts';\nimport { Button, Stack } from 'react-bootstrap';\n\nimport { UserData } from '../../../../user-data';\n\nexport interface ExistingUserPrompt {\n\tisDefaultAvailable: boolean;\n\tonClick: (action: PromptAction) => void;\n\tmigrationState: {\n\t\toldUserData: UserData;\n\t\tpreviousVersion: string;\n\t\tcurrentVersion: string;\n\t};\n}\n\nexport function ExistingUserPrompt({\n\tisDefaultAvailable,\n\tonClick,\n\tmigrationState\n}: ExistingUserPrompt) {\n\tconst actionText = `You can try to migrate your existing configuration, ${\n\t\tisDefaultAvailable && 'replace it with the default configuration, '\n\t}or import a configuration from a file.`;\n\n\treturn (\n\t\t<>\n\t\t\t
Great to see you again!
\n\t\t\t
\n\t\t\t\tIt looks like the developers have been active! They have released a\n\t\t\t\tbrand-new version of Telestion Ground Station.\n\t\t\t
\n\t\t\t
\n\t\t\t\t
Previous version:
\n\t\t\t\t
{migrationState.previousVersion}
\n\t\t\t\t
New version:
\n\t\t\t\t
{migrationState.currentVersion}
\n\t\t\t
\n\t\t\t
{actionText}
\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t{isDefaultAvailable && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import { z } from 'zod';\nimport { Form as RRForm, useActionData } from 'react-router-dom';\nimport { Alert, Button, Form, Modal } from 'react-bootstrap';\n\nconst actionSchema = z\n\t.object({\n\t\terrors: z.object({\n\t\t\timport: z.string().optional()\n\t\t})\n\t})\n\t.optional();\n\nexport interface ImportDialogProps {\n\tisOpen: boolean;\n\tonClose: () => void;\n}\n\nexport function ImportDialog({ isOpen, onClose }: ImportDialogProps) {\n\tconst action = actionSchema.parse(useActionData());\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tImport from file\n\t\t\t\n\t\t\t\n\t\t\t\t{action?.errors.import && (\n\t\t\t\t\t{action.errors.import}\n\t\t\t\t)}\n\t\t\t\t
Please select a file that contains your exported user data:
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tImport\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import { useState } from 'react';\nimport { Button, Modal, Form } from 'react-bootstrap';\nimport { Form as RRForm } from 'react-router-dom';\n\nimport { UserData } from '../../../../user-data';\nimport { getUser } from '../../../../auth';\n\nexport interface MigrationDialogProps {\n\tisOpen: boolean;\n\tonClose: () => void;\n\tmigrationState: {\n\t\toldUserData: UserData;\n\t\tpreviousVersion: string;\n\t\tcurrentVersion: string;\n\t};\n}\n\nexport function MigrationDialog({\n\tisOpen,\n\tonClose,\n\tmigrationState\n}: MigrationDialogProps) {\n\tconst [hasDownloaded, setHasDownloaded] = useState(false);\n\tconst [isChecked, setIsChecked] = useState(false);\n\tconst file = new Blob([JSON.stringify(migrationState.oldUserData)], {\n\t\ttype: 'application/json'\n\t});\n\tconst user = getUser();\n\n\tif (!user) {\n\t\tthrow new Error('User is undefined. Library error: dd86ab60');\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tMigrate data\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\tAre you sure you want to migrate your configuration data? This process\n\t\t\t\t\tcannot be undone!\n\t\t\t\t
\n\t\t\t\t {\n\t\t\t\t\t\tsetHasDownloaded(true);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t Download current data as\n\t\t\t\t\tbackup\n\t\t\t\t\n\t\t\t\t {\n\t\t\t\t\t\tsetIsChecked(event.target.checked);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tMigrate\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","import { useState } from 'react';\nimport { z } from 'zod';\nimport { useLoaderData, useSubmit } from 'react-router-dom';\nimport { Card } from 'react-bootstrap';\n\nimport { userDataSchema } from '../../../user-data';\nimport { PromptAction } from './model.ts';\nimport {\n\tNewUserPrompt,\n\tExistingUserPrompt,\n\tImportDialog,\n\tMigrationDialog\n} from './components';\n\nimport styles from './migration-page.module.css';\n\nconst loaderDataSchema = z.object({\n\tmigrationState: z\n\t\t.object({\n\t\t\tpreviousVersion: z.string(),\n\t\t\tcurrentVersion: z.string(),\n\t\t\toldUserData: userDataSchema\n\t\t})\n\t\t.optional(),\n\tisDefaultAvailable: z.boolean()\n});\n\nexport function MigrationPage() {\n\tconst [migrationDialogState, setMigrationDialogState] = useState(false);\n\tconst [importDialogState, setImportDialogState] = useState(false);\n\n\t// Note: versions is not defined if no user data is available\n\tconst { migrationState, isDefaultAvailable } =\n\t\tloaderDataSchema.parse(useLoaderData());\n\tconst submit = useSubmit();\n\n\tconst handle = (action: PromptAction) => {\n\t\tswitch (action) {\n\t\t\tcase 'blank':\n\t\t\t\tsubmit({ action: 'blank' }, { method: 'post' });\n\t\t\t\treturn;\n\t\t\tcase 'default':\n\t\t\t\tsubmit({ action: 'default' }, { method: 'post' });\n\t\t\t\treturn;\n\t\t\tcase 'import':\n\t\t\t\tsetImportDialogState(true);\n\t\t\t\treturn;\n\t\t\tcase 'existing':\n\t\t\t\tsetMigrationDialogState(true);\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t
\n\t);\n}\n","import { z } from 'zod';\n\nexport const promptActionSchema = z.union([\n\tz.literal('default'),\n\tz.literal('import'),\n\tz.literal('blank'),\n\tz.literal('existing')\n]);\n\n/**\n * Describes all possible actions a button group\n * in a migration prompt can trigger.\n */\nexport type PromptAction = z.infer;\n","import { ActionFunctionArgs, generatePath, redirect } from 'react-router-dom';\n\nimport { isLoggedIn } from '../../../auth';\nimport { isUserDataUpToDate, loadFileContents } from '../../../utils';\nimport {\n\tgetBlankUserData,\n\tgetUserData,\n\tsetUserData,\n\tUserData,\n\tuserDataSchema,\n\tWidgetInstance\n} from '../../../user-data';\nimport { TelestionOptions } from '../../model.ts';\nimport { getWidgetById } from '../../../widget';\nimport { promptActionSchema } from './model.ts';\n\nexport function migrationLoader({\n\tversion,\n\tdefaultUserData\n}: TelestionOptions) {\n\treturn () => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst userData = getUserData();\n\t\tif (isUserDataUpToDate(userData, version)) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\treturn {\n\t\t\tmigrationState: userData\n\t\t\t\t? {\n\t\t\t\t\t\tpreviousVersion: userData.version,\n\t\t\t\t\t\tcurrentVersion: version,\n\t\t\t\t\t\toldUserData: userData\n\t\t\t\t }\n\t\t\t\t: undefined,\n\t\t\tisDefaultAvailable: !!defaultUserData\n\t\t};\n\t};\n}\n\nexport function migrationAction({\n\tdefaultUserData,\n\tversion\n}: TelestionOptions) {\n\treturn async ({ request }: ActionFunctionArgs) => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst formData = await request.formData();\n\t\tconst rawAction = formData.get('action');\n\t\tconst action = promptActionSchema.parse(rawAction);\n\t\tconst errors: Record = {};\n\n\t\tswitch (action) {\n\t\t\tcase 'default':\n\t\t\t\tif (!defaultUserData) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t'Undefined default user data. Library error: 0b321d33'\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tsetUserData(defaultUserData);\n\t\t\t\treturn redirect('/');\n\t\t\tcase 'import':\n\t\t\t\ttry {\n\t\t\t\t\tconst userData = await parseUserData(formData.get('userdata'));\n\t\t\t\t\tsetUserData(userData);\n\t\t\t\t\treturn redirect('/');\n\t\t\t\t} catch (err) {\n\t\t\t\t\tif (err instanceof Error) {\n\t\t\t\t\t\terrors.import = err.message;\n\t\t\t\t\t} else {\n\t\t\t\t\t\terrors.import = JSON.stringify(err);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn { errors };\n\t\t\t\t}\n\n\t\t\tcase 'blank': {\n\t\t\t\tconst blankUserData = getBlankUserData(version);\n\t\t\t\tconst dashboardId = Object.keys(blankUserData.dashboards)[0];\n\t\t\t\tsetUserData(blankUserData);\n\t\t\t\treturn redirect(\n\t\t\t\t\tgeneratePath('/dashboards/:dashboardId/edit', {\n\t\t\t\t\t\tdashboardId\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t\tcase 'existing': {\n\t\t\t\tconst oldUserData = getUserData();\n\t\t\t\tif (!oldUserData) {\n\t\t\t\t\tthrow new Error('Undefined user data. Library error: 03b03e04');\n\t\t\t\t}\n\n\t\t\t\tconst newInstances = Object.entries(oldUserData.widgetInstances)\n\t\t\t\t\t.map(migrateWidgetConfig)\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(entry): entry is [id: string, instance: WidgetInstance] => !!entry\n\t\t\t\t\t);\n\n\t\t\t\tconst availableWidgetInstances = new Set(\n\t\t\t\t\tnewInstances.map(([widgetInstanceId]) => widgetInstanceId)\n\t\t\t\t);\n\n\t\t\t\t// filter dashboard layouts for no longer existing widgets\n\t\t\t\tconst newDashboards = Object.entries(oldUserData.dashboards).map(\n\t\t\t\t\tdashboardTuple =>\n\t\t\t\t\t\tmigrateDashboardConfig(dashboardTuple, availableWidgetInstances)\n\t\t\t\t);\n\n\t\t\t\tsetUserData({\n\t\t\t\t\t...oldUserData,\n\t\t\t\t\tversion: version,\n\t\t\t\t\tdashboards: {\n\t\t\t\t\t\t...Object.fromEntries(newDashboards)\n\t\t\t\t\t},\n\t\t\t\t\twidgetInstances: {\n\t\t\t\t\t\t...Object.fromEntries(newInstances)\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\treturn redirect('/');\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Parses the form data entry into a user data object.\n * @param entry - The form data entry value.\n * @returns The parsed user data object.\n */\nasync function parseUserData(\n\tentry: FormDataEntryValue | null\n): Promise {\n\tlet rawUserData: string | null;\n\tif (entry instanceof File) {\n\t\trawUserData = await loadFileContents(entry);\n\t} else {\n\t\trawUserData = entry;\n\t}\n\n\tif (!rawUserData) {\n\t\tthrow new Error('Missing user data.');\n\t}\n\n\treturn userDataSchema.parse(JSON.parse(rawUserData));\n}\n\n/**\n * Accepts a tuple of a dashboard id and the associated dashboard and performs a\n * dashboard configuration migration by replacing all widget ids that are no\n * longer registered with a dot (i.e., empty space).\n * @param id - the id of the dashboard\n * @param dashboard - the dashboard with the outdated widget ids\n * @param availableWidgetInstances - a set of all available widget instance ids\n * @returns a tuple of a dashboard with an up-to-date widget configuration\n */\nfunction migrateDashboardConfig(\n\t[id, dashboard]: [string, UserData['dashboards'][string]],\n\tavailableWidgetInstances: Set\n): [string, UserData['dashboards'][string]] {\n\treturn [\n\t\tid,\n\t\t{\n\t\t\t...dashboard,\n\t\t\tlayout: dashboard.layout.map(row =>\n\t\t\t\trow.map(widgetInstanceId => {\n\t\t\t\t\tif (widgetInstanceId === '.') {\n\t\t\t\t\t\treturn '.';\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!availableWidgetInstances.has(widgetInstanceId)) {\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Widget with id \"${widgetInstanceId}\" not found. Replacing with \".\"`\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn '.';\n\t\t\t\t\t}\n\n\t\t\t\t\treturn widgetInstanceId;\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t];\n}\n\n/**\n * Accepts a tuple of a widget instance and the associated id and performs a\n * widget configuration migration via the widget's {@link createConfig} function.\n * If the widget instance references a widget that is no longer registered\n * `undefined` is returned instead.\n *\n * @param id - the id of the widget instance\n * @param instance - the widget instance with the outdated widget configuration\n * @returns a tuple of a widget instance with an up-to-date widget configuration\n * or `undefined` if the referenced widget is no longer registered\n */\nfunction migrateWidgetConfig([id, instance]: [\n\tid: string,\n\tinstance: WidgetInstance\n]) {\n\tconst widget = getWidgetById(instance.type);\n\tif (!widget) {\n\t\treturn undefined;\n\t}\n\n\treturn [\n\t\tid,\n\t\t{\n\t\t\t...instance,\n\t\t\tconfiguration: widget.createConfig(instance.configuration)\n\t\t}\n\t];\n}\n","import styles from './dashboard-index-page.module.css';\nimport { Button, Card } from 'react-bootstrap';\nimport { Form } from 'react-router-dom';\n\nexport function DashboardIndexPage() {\n\treturn (\n\t\t
\n\t\t\t\n\t\t\t\t
It's empty here!
\n\t\t\t\t
You currently don't have any dashboards to display.
\n\t\t\t\t
To start using the Ground Station, create your first dashboard.
\n\n\t\t\t\t\n\t\t\t\n\t\t
\n\t);\n}\n","import { isLoggedIn } from '../../../auth';\nimport { generatePath, redirect } from 'react-router-dom';\nimport { getUserData } from '../../../user-data';\nimport { isUserDataUpToDate } from '../../../utils';\nimport { TelestionOptions } from '../../model.ts';\n\nexport function dashboardIndexLoader({ version }: TelestionOptions) {\n\treturn () => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst userData = getUserData();\n\t\tif (!isUserDataUpToDate(userData, version) || !userData) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\tconst dashboardIds = Object.keys(userData.dashboards);\n\t\tif (dashboardIds.length) {\n\t\t\treturn redirect(\n\t\t\t\tgeneratePath('/dashboards/:dashboardId', {\n\t\t\t\t\tdashboardId: dashboardIds[0]\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\n\t\treturn {};\n\t};\n}\n","import { z } from 'zod';\nimport { useLoaderData } from 'react-router-dom';\nimport { dashboardSchema } from '../../../user-data';\nimport { WidgetRenderer } from '../../../widget';\n\nimport styles from './dashboard-page.module.css';\n\nconst loaderSchema = z.object({\n\tdashboard: dashboardSchema\n});\n\nexport function DashboardPage() {\n\tconst { dashboard } = loaderSchema.parse(useLoaderData());\n\n\t// create CSS grid layout\n\tconst cssLayout = `'${dashboard.layout\n\t\t.map(row => row.map(CSS.escape).join(' '))\n\t\t.join(`' '`)}'`;\n\n\t// extract all widgets referenced in layout\n\tconst widgets = new Set(dashboard.layout.flat(2));\n\twidgets.delete('.');\n\n\treturn (\n\t\t\n\t\t\t{Array.from(widgets.values()).map(id => (\n\t\t\t\t\n\t\t\t))}\n\t\t\n\t);\n}\n","import { TelestionOptions } from '../model.ts';\nimport { isLoggedIn } from '../../auth';\nimport { generatePath, redirect } from 'react-router-dom';\nimport { getEmptyDashboard, getUserData, setUserData } from '../../user-data';\nimport { isUserDataUpToDate } from '../../utils';\n\nexport function dashboardCreateAction({ version }: TelestionOptions) {\n\treturn () => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst oldUserData = getUserData();\n\t\tif (!isUserDataUpToDate(oldUserData, version) || !oldUserData) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\tconst [id, dashboard] = getEmptyDashboard();\n\t\tconst newUserData = {\n\t\t\t...oldUserData,\n\t\t\tdashboards: {\n\t\t\t\t...oldUserData.dashboards,\n\t\t\t\t[id]: dashboard\n\t\t\t}\n\t\t};\n\t\tsetUserData(newUserData);\n\t\treturn redirect(\n\t\t\tgeneratePath('/dashboards/:dashboardId/edit', { dashboardId: id })\n\t\t);\n\t};\n}\n","import {\n\tActionFunctionArgs,\n\tgeneratePath,\n\tLoaderFunctionArgs,\n\tredirect\n} from 'react-router-dom';\n\nimport { TelestionOptions } from '../../model.ts';\nimport { isLoggedIn } from '../../../auth';\nimport { getUserData, setUserData, UserData } from '../../../user-data';\nimport { isUserDataUpToDate } from '../../../utils';\n\nimport { dashboardCreateAction } from '../dashboard.ts';\nimport { setResumeAfterLogin } from '../login';\n\nexport function dashboardPageLoader({ version }: TelestionOptions) {\n\treturn ({ params }: LoaderFunctionArgs) => {\n\t\tif (!isLoggedIn()) {\n\t\t\tif (params.dashboardId) {\n\t\t\t\tsetResumeAfterLogin(\n\t\t\t\t\tgeneratePath('/dashboards/:dashboardId', {\n\t\t\t\t\t\tdashboardId: params.dashboardId\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst userData = getUserData();\n\t\tif (!isUserDataUpToDate(userData, version) || !userData) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\tconst dashboardId = params.dashboardId;\n\t\tif (!dashboardId) {\n\t\t\tthrow new Error(\n\t\t\t\t`No parameter \":dashboardId\" in current path found. Library error: 1e995d14`\n\t\t\t);\n\t\t}\n\n\t\tif (!(dashboardId in userData.dashboards)) {\n\t\t\tthrow new Response(`Dashboard \"${dashboardId}\" does not exist`, {\n\t\t\t\tstatus: 404\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tdashboard: userData.dashboards[dashboardId]\n\t\t};\n\t};\n}\n\nexport function dashboardPageAction(options: TelestionOptions) {\n\tconst { version } = options;\n\n\tconst createAction = dashboardCreateAction(options);\n\tconst deleteAction = ({ params }: ActionFunctionArgs) => {\n\t\tif (!isLoggedIn()) {\n\t\t\treturn redirect('/login');\n\t\t}\n\n\t\tconst oldUserData = getUserData();\n\t\tif (!isUserDataUpToDate(oldUserData, version) || !oldUserData) {\n\t\t\treturn redirect('/');\n\t\t}\n\n\t\tconst dashboardId = params.dashboardId;\n\t\tif (!dashboardId) {\n\t\t\tthrow new Error(\n\t\t\t\t`No parameter \":dashboardId\" in current path found. Library error: 1e995d14`\n\t\t\t);\n\t\t}\n\n\t\tif (!(dashboardId in oldUserData.dashboards)) {\n\t\t\tthrow new Response(`Dashboard \"${dashboardId}\" does not exist`, {\n\t\t\t\tstatus: 404\n\t\t\t});\n\t\t}\n\n\t\tconst oldDashboard = oldUserData.dashboards[dashboardId];\n\t\tconst newDashboards = Object.entries(oldUserData.dashboards).filter(\n\t\t\t([, dashboard]) => dashboard === oldDashboard\n\t\t);\n\n\t\tconst newUserData = {\n\t\t\t...oldUserData,\n\t\t\tdashboards: Object.fromEntries(newDashboards)\n\t\t};\n\t\tsetUserData(purgeOrphanedWidgetInstances(newUserData));\n\t\treturn redirect('/dashboards');\n\t};\n\n\treturn (args: ActionFunctionArgs) => {\n\t\tconsole.log(args);\n\t\tif (args.request.method.toLowerCase() === 'delete') {\n\t\t\treturn deleteAction(args);\n\t\t} else {\n\t\t\treturn createAction();\n\t\t}\n\t};\n}\n\n/**\n * Checks if the widget instances are all referenced in any dashboard and removes any orphaned widget instances.\n * @param userData - the user data to check against orphaned widget instances\n */\nfunction purgeOrphanedWidgetInstances(userData: UserData) {\n\tconst referencedInstanceIds = new Set(\n\t\tObject.values(userData.dashboards)\n\t\t\t.map(dashboard => dashboard.layout.flat(2))\n\t\t\t.flat(1)\n\t);\n\n\tconst newInstances = Object.entries(userData.widgetInstances).filter(([id]) =>\n\t\treferencedInstanceIds.has(id)\n\t);\n\n\treturn {\n\t\t...userData,\n\t\twidgetInstances: Object.fromEntries(newInstances)\n\t};\n}\n","/**\n * The gap between the grid lines in pixels.\n *\n * Used for calculating diffs when moving elements.\n */\nexport const gap = 4;\n","import { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport { Bounds } from '../model/layout-editor-model.ts';\n\nimport styles from './layout-editor.module.css';\n\nexport const EmptyCell = forwardRef<\n\tHTMLDivElement,\n\t{\n\t\ty: number;\n\t\tx: number;\n\t\tonCreate?(bounds: Bounds): void;\n\t}\n>(function EmptyCell(props, ref) {\n\tconst onClick = useCallback(() => {\n\t\tprops.onCreate?.({\n\t\t\tx: props.x,\n\t\t\ty: props.y,\n\t\t\twidth: 1,\n\t\t\theight: 1\n\t\t});\n\t}, [props]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n});\n","import { useDraggable } from '@dnd-kit/core';\n\nimport styles from './layout-editor.module.css';\n\nexport function ResizeHandle() {\n\tconst { attributes, listeners, setNodeRef } = useDraggable({\n\t\tid: 'resize-handle'\n\t});\n\n\treturn (\n\t\t\n\t);\n}\n","import { useCallback, useState } from 'react';\nimport { DndContext, DragEndEvent, useDraggable } from '@dnd-kit/core';\nimport { CSS as CSSUtil } from '@dnd-kit/utilities';\nimport { clsx } from 'clsx';\n\nimport { Bounds, Coordinate } from '../model/layout-editor-model.ts';\nimport { ResizeHandle } from './resize-handle.tsx';\n\nimport styles from './layout-editor.module.css';\n\nexport function LayoutEditorWidgetInstance(props: {\n\tbounds: Bounds;\n\tid: string;\n\tselected?: boolean;\n\tonSelect?(bounds: Bounds): void;\n\tonResize?(bounds: Bounds, resizeDelta: Coordinate): void;\n}) {\n\tconst {\n\t\tattributes,\n\t\tlisteners,\n\t\tsetNodeRef,\n\t\ttransform,\n\t\tnode: widgetInstanceNode\n\t} = useDraggable({\n\t\tid: props.id,\n\t\tdata: {\n\t\t\twidgetId: props.id,\n\t\t\tbounds: props.bounds\n\t\t}\n\t});\n\tconst [resizeDelta, setResizeDelta] = useState({\n\t\tx: 0,\n\t\ty: 0\n\t});\n\tconst onResizeEnd = useCallback(\n\t\t(event: DragEndEvent) => {\n\t\t\tconst resizeDelta = event.delta; // delta in px\n\t\t\tconst oldBounds = props.bounds; // previous bounds to select\n\n\t\t\tif (!widgetInstanceNode.current)\n\t\t\t\tthrow new Error('widgetInstanceNode.current is null');\n\n\t\t\tconst originalNodeWidth =\n\t\t\t\twidgetInstanceNode.current.offsetWidth - resizeDelta.x;\n\t\t\tconst originalNodeHeight =\n\t\t\t\twidgetInstanceNode.current.offsetHeight - resizeDelta.y;\n\n\t\t\tconst singleCellWidth = originalNodeWidth / oldBounds.width;\n\t\t\tconst singleCellHeight = originalNodeHeight / oldBounds.height;\n\n\t\t\tconst onResizeDelta = {\n\t\t\t\tx: Math.round(resizeDelta.x / singleCellWidth),\n\t\t\t\ty: Math.round(resizeDelta.y / singleCellHeight)\n\t\t\t};\n\n\t\t\tprops.onResize?.(oldBounds, onResizeDelta);\n\t\t\tsetResizeDelta({ x: 0, y: 0 });\n\t\t},\n\t\t[props, widgetInstanceNode]\n\t);\n\n\treturn (\n\t\t props.onSelect?.(props.bounds)}\n\t\t\taria-hidden={true}\n\t\t\t// disable dnd-kit keyboard shortcuts since we have our own\n\t\t\ttabIndex={undefined}\n\t\t\trole={undefined}\n\t\t\taria-describedby={undefined}\n\t\t\taria-disabled={undefined}\n\t\t\taria-roledescription={undefined}\n\t\t\t// title on hover\n\t\t\ttitle={\n\t\t\t\tprops.selected\n\t\t\t\t\t? `Drag to move or use Alt/Option + Arrow keys.`\n\t\t\t\t\t: 'Click to select.'\n\t\t\t}\n\t\t>\n\t\t\t{/*Label*/}\n\t\t\t