Add code editor

This commit is contained in:
Nick Mowen 2022-12-05 21:09:38 -07:00
parent f45651fe2f
commit 31753aec96
6 changed files with 975 additions and 173 deletions

1131
web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -22,7 +22,7 @@
"preact-router": "^4.1.0",
"react": "npm:@preact/compat@^17.1.2",
"react-dom": "npm:@preact/compat@^17.1.2",
"react-editor-js": "^2.1.0",
"@uiw/react-textarea-code-editor": "^2.0.6",
"swr": "^1.3.0",
"video.js": "^7.20.3",
"videojs-playlist": "^5.0.0",

View File

@ -44,8 +44,10 @@ export default function Sidebar() {
</Match>
{birdseye?.enabled ? <Destination href="/birdseye" text="Birdseye" /> : null}
<Destination href="/events" text="Events" />
<Separator />
<Destination href="/storage" text="Storage" />
<Destination href="/system" text="System" />
<Destination href="/config" text="Config" />
<Separator />
<div className="flex flex-grow" />
{ENV !== 'production' ? (

View File

@ -37,6 +37,7 @@ export default function App() {
/>
<AsyncRoute path="/storage" getComponent={Routes.getStorage} />
<AsyncRoute path="/system" getComponent={Routes.getSystem} />
<AsyncRoute path="/config" getComponent={Routes.getConfig} />
<AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
<Cameras default path="/" />
</Router>

View File

@ -1,12 +1,13 @@
import { h, Fragment } from 'preact';
import useSWR from 'swr';
import { createReactEditorJS } from 'react-editor-js';
import CodeEditor from '@uiw/react-textarea-code-editor';
import ActivityIndicator from '../components/ActivityIndicator';
import Heading from '../components/Heading';
import { useState } from 'preact/hooks';
export default function Config() {
const { data: config } = useSWR('config/raw');
const ReactEditorJS = createReactEditorJS();
const [newCode, setNewCode] = useState(config);
if (!config) {
return <ActivityIndicator />;
@ -16,7 +17,7 @@ export default function Config() {
<div className="space-y-4 p-2 px-4">
<Heading>Config</Heading>
<ReactEditorJS defaultValue={config} />
<CodeEditor value={config} language="yaml" onChange={(e) => setNewCode(e.target.value)} />
</div>
);
}

View File

@ -38,6 +38,11 @@ export async function getStorage(_url, _cb, _props) {
return module.default;
}
export async function getConfig(_url, _cb, _props) {
const module = await import('./Config.jsx');
return module.default;
}
export async function getStyleGuide(_url, _cb, _props) {
const module = await import('./StyleGuide.jsx');
return module.default;