administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 19:55:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Address review comments and enable light theme for vscode

Browse Source
This commit is contained in:
Nick Mowen 2023-12-11 16:00:19 -07:00
parent 508ed3e64b
commit 9faf4a2692
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web-new/src/pages/ConfigEditor.tsx
View File

@ -1,22 +1,28 @@
import useSWR from "swr"; import useSWR from "swr";
import * as monaco from "monaco-editor"; import * as monaco from "monaco-editor";
import { configureMonacoYaml } from "monaco-yaml"; import { configureMonacoYaml } from "monaco-yaml";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import ActivityIndicator from "@/components/ui/activity-indicator"; import ActivityIndicator from "@/components/ui/activity-indicator";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import axios from "axios"; import axios from "axios";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useTheme } from "@/context/theme-provider";
type SaveOptions = "saveonly" | "restart"; type SaveOptions = "saveonly" | "restart";
function ConfigEditor() { function ConfigEditor() {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: config } = useSWR<string>("config/raw"); const { data: config } = useSWR<string>("config/raw");
const { theme } = useTheme();
const [success, setSuccess] = useState<string | undefined>(); const [success, setSuccess] = useState<string | undefined>();
const [error, setError] = useState<string | undefined>(); const [error, setError] = useState<string | undefined>();
const editorRef = useRef<any | null>();
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
const modelRef = useRef<monaco.editor.IEditorModel | null>();
const onHandleSaveConfig = useCallback( const onHandleSaveConfig = useCallback(
async (save_option: SaveOptions) => { async (save_option: SaveOptions) => {
@ -64,18 +70,17 @@ function ConfigEditor() {
return; return;
} }
if ((document?.getElementById("container")?.children || []).length > 0) { if (modelRef.current != null) {
// we don't need to recreate the editor if it already exists // we don't need to recreate the editor if it already exists
return; return;
} }
const modelUri = monaco.Uri.parse("a://b/api/config/schema.json"); const modelUri = monaco.Uri.parse("a://b/api/config/schema.json");
let yamlModel;
if (monaco.editor.getModels().length > 0) { if (monaco.editor.getModels().length > 0) {
yamlModel = monaco.editor.getModel(modelUri); modelRef.current = monaco.editor.getModel(modelUri);
} else { } else {
yamlModel = monaco.editor.createModel(config, "yaml", modelUri); modelRef.current = monaco.editor.createModel(config, "yaml", modelUri);
} }
configureMonacoYaml(monaco, { configureMonacoYaml(monaco, {
@ -97,9 +102,9 @@ function ConfigEditor() {
if (container != undefined) { if (container != undefined) {
editorRef.current = monaco.editor.create(container, { editorRef.current = monaco.editor.create(container, {
language: "yaml", language: "yaml",
model: yamlModel, model: modelRef.current,
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
theme: "vs-dark", theme: theme == "dark" ? "vs-dark" : "vs-light",
}); });
} }
}); });