frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

📑 Added a AirDCPP Settings form WIP

Browse Source
This commit is contained in:
Rishi Ghan
2021-10-15 15:25:19 -07:00
parent 049c4266f3
commit ed120fb230
6 changed files with 200 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/client/components/Settings.tsx
View File

@@ -1,52 +1,71 @@
import React, { useState, useEffect, useCallback, ReactElement } from "react";
import { AirDCPPSettingsForm } from "./AirDCPPSettingsForm";
import settingsObject from "../constants/settings/settingsMenu.json";
import { isUndefined, map } from "lodash";
interface ISettingsProps {}
export const Settings = (props: ISettingsProps): ReactElement => {
const [active, setActive] = useState("gen-db");
return (
<section className="container">
<div className="columns">
<div className="section column is-one-quarter">
<h1 className="title">Settings</h1>
<aside className="menu">
<p className="menu-label">General</p>
<ul className="menu-list">
<li>
<a>Dashboard</a>
</li>
<li>
<a>Global Search</a>
</li>
</ul>
<p className="menu-label">Acquisition</p>
<ul className="menu-list">
<li>
<a className="is-active">AirDC++</a>
<ul>
<li>
<a>Connection</a>
</li>
<li>
<a>Hubs</a>
</li>
<li>
<a>Additional Configuration</a>
</li>
</ul>
</li>
</ul>
<p className="menu-label">ComicVine</p>
<ul className="menu-list">
<li>
<a>API</a>
</li>
<li>
<a>Configuration</a>
</li>
</ul>
{map(settingsObject, (settingObject, idx) => {
return (
<>
<p className="menu-label" key={idx}>
{settingObject.category}
</p>
{/* First level children */}
{!isUndefined(settingObject.children) ? (
<ul className="menu-list" key={settingObject.id}>
{map(settingObject.children, (item, idx) => {
return (
<li key={item.id}>
<a
className={
item.id.toString() === active ? "is-active" : ""
}
onClick={() => setActive(item.id.toString())}
>
{item.displayName}
</a>
{/* Second level children */}
{!isUndefined(item.children) ? (
<ul>
{map(item.children, (item, idx) => (
<li key={item.id}>
<a
className={
item.id.toString() === active
? "is-active"
: ""
}
onClick={() =>
setActive(item.id.toString())
}
>
{item.displayName}
</a>
</li>
))}
</ul>
) : null}
</li>
);
})}
</ul>
) : null}
</>
);
})}
</aside>
</div>
</div>
<AirDCPPSettingsForm />
</section>
);
};