From e16717737f9db6b0b341fc16dd75448f8af4a19c Mon Sep 17 00:00:00 2001 From: Joacim Breiler Date: Thu, 19 Dec 2024 13:00:30 +0100 Subject: [PATCH] Add config description --- .../createfilemodal/CreateFileModal.tsx | 189 ++++++++++++------ src/services/ConfigService.ts | 55 ++++- src/services/GitHubService.ts | 5 +- 3 files changed, 188 insertions(+), 61 deletions(-) diff --git a/src/components/createfilemodal/CreateFileModal.tsx b/src/components/createfilemodal/CreateFileModal.tsx index 728b873..e05c163 100644 --- a/src/components/createfilemodal/CreateFileModal.tsx +++ b/src/components/createfilemodal/CreateFileModal.tsx @@ -1,17 +1,23 @@ import React, { useEffect, useState } from "react"; import { + Col, Form, InputGroup, Modal, ModalBody, ModalFooter, - ModalHeader + ModalHeader, + Row, + Image } from "react-bootstrap"; import Button from "../button"; import ConfigService, { ConfigBoard, ConfigFile } from "../../services/ConfigService"; +import { Config } from "../../model/Config"; +import { fileDataToConfig } from "../../utils/utils"; +import AlertMessage from "../alertmessage/AlertMessage"; type Props = { show: boolean; @@ -38,9 +44,13 @@ const CreateFileModal = ({ ConfigFile | undefined >(); const [content, setContent] = useState(""); + const [config, setConfig] = useState(); + const [configError, setConfigError] = useState(false); useEffect(() => { - ConfigService.getBoards().then((boards) => setBoards(boards)); + ConfigService.getBoards().then((boards) => { + setBoards(boards); + }); }, []); useEffect(() => { @@ -49,18 +59,40 @@ const CreateFileModal = ({ return; } fetch(selectedConfig.url).then((response) => { + setConfigError(false); response .json() - .then((data) => - setContent(Buffer.from(data.content, "base64").toString()) - ); + .then((data) => { + const content = Buffer.from( + data.content, + "base64" + ).toString(); + setContent(content); + }) + .catch((error) => { + setConfigError(true); + console.error("Could not load config", error); + }); }); }, [selectedConfig]); + useEffect(() => { + setConfig(undefined); + + if (content) { + try { + setConfig(fileDataToConfig(content)); + } catch (error) { + console.error("Error loading config", error); + } + } + }, [content]); + return ( - + Create new config file + Filename - - Board - - { - const newBoard = boards.find( - (board) => - board.name === - event.target.value - ); - setSelectedBoard(newBoard); - - setSelectedConfig( - newBoard?.files?.length - ? newBoard.files?.[0] - : undefined - ); - }} - > - - {boards.map((board, index) => ( - - ))} - - - - Config template - - - setSelectedConfig( - selectedBoard.files.find( - (file) => - file.name === - event.target.value - ) - ) - } - value={selectedConfig?.name} - > - {selectedBoard?.files.map((file, index) => ( - - ))} - + {selectedBoard?.files.map( + (file, index) => ( + + ) + )} + + + + + + {selectedBoard?.logoUrl && ( + Board logo + )} +

{config?.name?.toString()}

+

{config?.meta?.toString()}

+ {configError && ( + + The config seems invalid... + + )} + + + {selectedBoard?.boardImageUrl && ( + Board picture + )} + + )} diff --git a/src/services/ConfigService.ts b/src/services/ConfigService.ts index f75ffea..889e727 100644 --- a/src/services/ConfigService.ts +++ b/src/services/ConfigService.ts @@ -1,9 +1,15 @@ -import { GithubService, GithubTreeFile } from "./GitHubService"; +import { + CONFIG_BASE_URL, + GithubService, + GithubTreeFile +} from "./GitHubService"; export type ConfigBoard = { name: string; path: string; files: ConfigFile[]; + logoUrl?: string; + boardImageUrl?: string; }; export type ConfigFile = { @@ -27,12 +33,57 @@ const ConfigService = { .replace("contributed/", "") .replaceAll("_", " "), path: node.path, - files: ConfigService.getConfigs(configTree.tree, node.path) + files: ConfigService.getConfigs(configTree.tree, node.path), + logoUrl: ConfigService.getLogoUrl( + configTree.tree, + node.path + ), + boardImageUrl: ConfigService.getBoardImageUrl( + configTree.tree, + node.path + ) })) .filter((board) => board.files.length) ); }, + getLogoUrl: (files: GithubTreeFile[], path: string) => { + return files + .filter((node) => node.type === "blob") + .filter((node) => { + const fileName = node.path.substring( + node.path.lastIndexOf("/") + 1 + ); + return node.path === path + "/" + fileName; + }) + .filter( + (node) => + node.path.endsWith("/logo.svg") || + node.path.endsWith("/logo.png") + ) + .map((node) => CONFIG_BASE_URL + "/" + node.path) + .find((node) => node); + }, + + getBoardImageUrl: (files: GithubTreeFile[], path: string) => { + return files + .filter((node) => node.type === "blob") + .filter((node) => { + const fileName = node.path.substring( + node.path.lastIndexOf("/") + 1 + ); + return node.path === path + "/" + fileName; + }) + .filter( + (node) => + node.path.endsWith("/board.svg") || + node.path.endsWith("/board.png") || + node.path.endsWith("/board.jpg") + ) + .map((node) => CONFIG_BASE_URL + "/" + node.path) + .find((node) => node); + }, + getConfigs: (files: GithubTreeFile[], path: string) => { return files .filter((node) => node.type === "blob") diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts index 11978b2..03486c0 100644 --- a/src/services/GitHubService.ts +++ b/src/services/GitHubService.ts @@ -6,6 +6,9 @@ export type GithubReleaseAsset = { const RESOURCES_BASE_URL = "https://raw.githubusercontent.com/bdring/fluidnc-releases/main/releases"; +export const CONFIG_BASE_URL = + "https://raw.githubusercontent.com/breiler/fluidnc-config-files/refs/heads/fluid-installer"; + /** * Contract for a github release * (https://api.github.com/repos/bdring/FluidNC/releases) @@ -113,7 +116,7 @@ export const GithubService = { } return fetch( - "https://api.github.com/repos/bdring/fluidnc-config-files/git/trees/main?recursive=true", + "https://api.github.com/repos/breiler/fluidnc-config-files/git/trees/fluid-installer?recursive=true", { headers: { Accept: "application/json"