Skip to content

Commit

Permalink
Add config description
Browse files Browse the repository at this point in the history
  • Loading branch information
@breiler
breiler committed Dec 19, 2024
1 parent b8ba22f commit e167177
Show file tree
Hide file tree
Showing 3 changed files with 188 additions and 61 deletions.
189 changes: 131 additions & 58 deletions src/components/createfilemodal/CreateFileModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -38,9 +44,13 @@ const CreateFileModal = ({
ConfigFile | undefined
>();
const [content, setContent] = useState<string>("");
const [config, setConfig] = useState<Config | undefined>();
const [configError, setConfigError] = useState<boolean>(false);

useEffect(() => {
ConfigService.getBoards().then((boards) => setBoards(boards));
ConfigService.getBoards().then((boards) => {
setBoards(boards);
});
}, []);

useEffect(() => {
Expand All @@ -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 (
<Modal show={show} size="sm" scrollable={true} centered={true}>
<Modal show={show} size="xl" scrollable={true} centered={false}>
<ModalHeader>Create new config file</ModalHeader>
<ModalBody>
<Form.Label>Filename</Form.Label>
<InputGroup hasValidation>
<Form.Control
type={"text"}
Expand All @@ -84,60 +116,101 @@ const CreateFileModal = ({

{createFromTemplate && (
<>
<Form.Label style={{ marginTop: "20px" }}>
Board
</Form.Label>
<Form.Select
onChange={(event) => {
const newBoard = boards.find(
(board) =>
board.name ===
event.target.value
);
setSelectedBoard(newBoard);

setSelectedConfig(
newBoard?.files?.length
? newBoard.files?.[0]
: undefined
);
}}
>
<option></option>
{boards.map((board, index) => (
<option
key={board.name + index}
value={board.name}
<Row>
<Col>
<Form.Label
style={{ marginTop: "20px" }}
>
{board.name}
</option>
))}
</Form.Select>

<Form.Label style={{ marginTop: "20px" }}>
Config template
</Form.Label>
<Form.Select
onChange={(event) =>
setSelectedConfig(
selectedBoard.files.find(
(file) =>
file.name ===
event.target.value
)
)
}
value={selectedConfig?.name}
>
{selectedBoard?.files.map((file, index) => (
<option
key={file.name + index}
value={file.name}
Board
</Form.Label>
<Form.Select
onChange={(event) => {
const newBoard = boards.find(
(board) =>
board.name ===
event.target.value
);
setSelectedBoard(newBoard);
setSelectedConfig(
newBoard?.files?.length
? newBoard.files?.[0]
: undefined
);
}}
>
<option></option>
{boards.map((board, index) => (
<option
key={board.name + index}
value={board.name}
>
{board.name}
</option>
))}
</Form.Select>
</Col>
<Col>
<Form.Label
style={{ marginTop: "20px" }}
>
Config template
</Form.Label>
<Form.Select
onChange={(event) =>
setSelectedConfig(
selectedBoard.files.find(
(file) =>
file.name ===
event.target.value
)
)
}
value={selectedConfig?.name}
>
{file.name}
</option>
))}
</Form.Select>
{selectedBoard?.files.map(
(file, index) => (
<option
key={file.name + index}
value={file.name}
>
{file.name}
</option>
)
)}
</Form.Select>
</Col>
</Row>
<Row style={{ marginTop: "20px" }}>
<Col>
{selectedBoard?.logoUrl && (
<Image
width={180}
src={selectedBoard?.logoUrl}
alt="Board logo"
style={{ marginBottom: "20px" }}
/>
)}
<h2>{config?.name?.toString()}</h2>
<p>{config?.meta?.toString()}</p>
{configError && (
<AlertMessage>
The config seems invalid...
</AlertMessage>
)}
</Col>
<Col>
{selectedBoard?.boardImageUrl && (
<Image
src={
selectedBoard?.boardImageUrl
}
rounded
fluid
alt="Board picture"
/>
)}
</Col>
</Row>
</>
)}
</>
Expand Down
55 changes: 53 additions & 2 deletions src/services/ConfigService.ts
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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")
Expand Down
5 changes: 4 additions & 1 deletion src/services/GitHubService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit e167177

Please sign in to comment.