feat: add webui

2025-07-24 01:09:13 +00:00 · 2021-08-11 15:27:48 +02:00 · 2021-08-11 15:27:48 +02:00 · 773e57afe6
commit 773e57afe6
parent a838d994a6
59 changed files with 19794 additions and 0 deletions
--- a/web/src/screens/Settings.tsx
+++ b/web/src/screens/Settings.tsx
@ -0,0 +1,144 @@
+import React from 'react'
+import {CogIcon, DownloadIcon, KeyIcon} from '@heroicons/react/outline'
+import {
+    BrowserRouter as Router,
+    NavLink,
+    Route,
+    Switch as RouteSwitch,
+    useLocation,
+    useRouteMatch
+} from "react-router-dom";
+import IndexerSettings from "./settings/Indexer";
+import IrcSettings from "./settings/Irc";
+import ApplicationSettings from "./settings/Application";
+import DownloadClientSettings from "./settings/DownloadClient";
+import {classNames} from "../styles/utils";
+import ActionSettings from "./settings/Action";
+import {useRecoilValue} from "recoil";
+import {configState} from "../state/state";
+
+const subNavigation = [
+    {name: 'Application', href: '', icon: CogIcon, current: true},
+    {name: 'Indexers', href: 'indexers', icon: KeyIcon, current: false},
+    {name: 'IRC', href: 'irc', icon: KeyIcon, current: false},
+    {name: 'Clients', href: 'clients', icon: DownloadIcon, current: false},
+    // {name: 'Actions', href: 'actions', icon: PlayIcon, current: false},
+    // {name: 'Rules', href: 'rules', icon: ClipboardCheckIcon, current: false},
+    // {name: 'Notifications', href: 'notifications', icon: BellIcon, current: false},
+]
+
+function SubNavLink({item, url}: any) {
+    const location = useLocation();
+
+    const {pathname} = location;
+
+    const splitLocation = pathname.split("/");
+
+    // we need to clean the / if it's a base root path
+    let too = item.href ? `${url}/${item.href}` : url
+
+    return (
+        <NavLink
+            key={item.name}
+            to={too}
+            exact={true}
+            activeClassName="bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700"
+            className={classNames(
+                'border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium'
+            )}
+            aria-current={splitLocation[2] === item.href ? 'page' : undefined}
+        >
+            <item.icon
+                className={classNames(
+                    splitLocation[2] === item.href
+                        ? 'text-teal-500 group-hover:text-teal-500'
+                        : 'text-gray-400 group-hover:text-gray-500',
+                    'flex-shrink-0 -ml-1 mr-3 h-6 w-6'
+                )}
+                aria-hidden="true"
+            />
+            <span className="truncate">{item.name}</span>
+        </NavLink>
+    )
+}
+
+function SidebarNav({subNavigation, url}: any) {
+    return (
+        <aside className="py-6 lg:col-span-3">
+            <nav className="space-y-1">
+                {subNavigation.map((item: any) => (
+                    <SubNavLink item={item} url={url} key={item.href}/>
+                ))}
+            </nav>
+        </aside>
+    )
+}
+
+export function buildPath(...args: string[]): string {
+    const [first] = args;
+    const firstTrimmed = first.trim();
+    const result = args
+        .map((part) => part.trim())
+        .map((part, i) => {
+            if (i === 0) {
+                return part.replace(/[/]*$/g, '');
+            } else {
+                return part.replace(/(^[/]*|[/]*$)/g, '');
+            }
+        })
+        .filter((x) => x.length)
+        .join('/');
+
+    return firstTrimmed === '/' ? `/${result}` : result;
+}
+
+export default function Settings() {
+    const config = useRecoilValue(configState)
+
+    let { url } = useRouteMatch();
+    let p = config.base_url ? buildPath(config.base_url, url) : url
+
+    return (
+        <Router>
+            <main className="relative -mt-48">
+                <header className="py-10">
+                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                        <h1 className="text-3xl font-bold text-white capitalize">Settings</h1>
+                    </div>
+                </header>
+
+                <div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
+                    <div className="bg-white rounded-lg shadow overflow-hidden">
+                        <div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+                            <SidebarNav url={p} subNavigation={subNavigation}/>
+
+                            <RouteSwitch>
+                                <Route exact path={p}>
+                                    <ApplicationSettings />
+                                </Route>
+
+                                <Route path={`${p}/indexers`}>
+                                    <IndexerSettings />
+                                </Route>
+
+                                <Route path={`${p}/irc`}>
+                                    <IrcSettings />
+                                </Route>
+
+                                <Route path={`${p}/clients`}>
+                                    <DownloadClientSettings />
+                                </Route>
+
+                                <Route path={`${p}/actions`}>
+                                    <ActionSettings />
+                                </Route>
+
+                            </RouteSwitch>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </Router>
+    )
+}
+