mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
enhancement(web): make settings pages uniform for desktop and mobile (#634)
* enhancement(web): make settings pages uniform for desktop and mobile removed var 'idx' from line 17:51 since it is defined but never used converted the indexer table in to a responsive grid * fix missing col-span adjustment for mobile Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
This commit is contained in:
martylukyy
GitHub
parent
14b7bc2fe2
commit
05edb7c7a7
5 changed files with 169 additions and 153 deletions
|
|
@ -15,24 +15,22 @@ import { EmptySimple } from "../../components/emptystates";
|
||||||
function APISettings() {
|
function APISettings() {
|
||||||
const [addFormIsOpen, toggleAddForm] = useToggle(false);
|
const [addFormIsOpen, toggleAddForm] = useToggle(false);
|
||||||
|
|
||||||
const { data } = useQuery(
|
const { data } = useQuery(["apikeys"], () => APIClient.apikeys.getAll(), {
|
||||||
["apikeys"],
|
retry: false,
|
||||||
() => APIClient.apikeys.getAll(),
|
refetchOnWindowFocus: false,
|
||||||
{
|
onError: (err) => console.log(err)
|
||||||
retry: false,
|
});
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
onError: err => console.log(err)
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||||
<div className="pb-6 py-6 px-4 sm:p-6 lg:pb-8">
|
<div className="pb-6 py-6 px-4 sm:p-6 lg:pb-8">
|
||||||
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm}/>
|
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm} />
|
||||||
|
|
||||||
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
|
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
|
||||||
<div className="ml-4 mt-4">
|
<div className="ml-4 mt-4">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">API keys</h3>
|
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||||
|
API keys
|
||||||
|
</h3>
|
||||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Manage API keys.
|
Manage API keys.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -48,32 +46,36 @@ function APISettings() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ? (
|
||||||
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||||
<ol className="min-w-full relative">
|
<ol className="min-w-full relative">
|
||||||
<li className="grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
|
<li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
|
||||||
<div
|
<div className="col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
className="col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
|
Name
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key
|
Key
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{data && data.map((k) => (
|
{data && data.map((k) => <APIListItem key={k.key} apikey={k} />)}
|
||||||
<APIListItem key={k.key} apikey={k}/>
|
|
||||||
))}
|
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
: <EmptySimple title="No API keys" subtitle="" buttonAction={toggleAddForm}
|
) : (
|
||||||
buttonText="Create API key"/>}
|
<EmptySimple
|
||||||
|
title="No API keys"
|
||||||
|
subtitle=""
|
||||||
|
buttonAction={toggleAddForm}
|
||||||
|
buttonText="Create API key"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ApiKeyItemProps {
|
interface ApiKeyItemProps {
|
||||||
apikey: APIKey
|
apikey: APIKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
function APIListItem({ apikey }: ApiKeyItemProps) {
|
function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||||
|
|
@ -87,7 +89,13 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||||
queryClient.invalidateQueries(["apikeys"]);
|
queryClient.invalidateQueries(["apikeys"]);
|
||||||
queryClient.invalidateQueries(["apikeys", apikey.key]);
|
queryClient.invalidateQueries(["apikeys", apikey.key]);
|
||||||
|
|
||||||
toast.custom((t) => <Toast type="success" body={`API key ${apikey?.name} was deleted`} t={t}/>);
|
toast.custom((t) => (
|
||||||
|
<Toast
|
||||||
|
type="success"
|
||||||
|
body={`API key ${apikey?.name} was deleted`}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -106,15 +114,32 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||||
text="Are you sure you want to remove this API key? This action cannot be undone."
|
text="Are you sure you want to remove this API key? This action cannot be undone."
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="grid grid-cols-12 gap-4 items-center py-2">
|
<div className="sm:grid grid-cols-12 gap-4 items-center py-2">
|
||||||
<div className="col-span-4 overflow-auto flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
<div className="col-span-5 px-2 sm:px-6 py-2 sm:py-0 truncate block sm:text-sm text-md font-medium text-gray-900 dark:text-white">
|
||||||
{apikey.name}
|
<div className="flex justify-between">
|
||||||
|
<div className="pl-1 py-2">{apikey.name}</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
className={classNames(
|
||||||
|
"text-gray-900 dark:text-gray-300",
|
||||||
|
"sm:hidden font-medium group rounded-md items-center px-2 py-2 text-sm"
|
||||||
|
)}
|
||||||
|
onClick={toggleDeleteModal}
|
||||||
|
title="Delete key"
|
||||||
|
>
|
||||||
|
<TrashIcon
|
||||||
|
className="text-red-500 w-5 h-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
<div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
||||||
<KeyField value={apikey.key}/>
|
<KeyField value={apikey.key} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-2 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
|
<div className="col-span-1 hidden sm:flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
||||||
<button
|
<button
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-gray-900 dark:text-gray-300",
|
"text-gray-900 dark:text-gray-300",
|
||||||
|
|
@ -123,10 +148,7 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||||
onClick={toggleDeleteModal}
|
onClick={toggleDeleteModal}
|
||||||
title="Delete key"
|
title="Delete key"
|
||||||
>
|
>
|
||||||
<TrashIcon
|
<TrashIcon className="text-red-500 w-5 h-5" aria-hidden="true" />
|
||||||
className="text-red-500 w-5 h-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -134,4 +156,4 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default APISettings;
|
export default APISettings;
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ interface DLSettingsItemProps {
|
||||||
idx: number;
|
idx: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
|
||||||
const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
|
const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li key={client.name}>
|
<li key={client.name}>
|
||||||
<div className="grid grid-cols-12 gap-4 items-center py-3">
|
<div className="grid grid-cols-12 items-center py-2">
|
||||||
<DownloadClientUpdateForm
|
<DownloadClientUpdateForm
|
||||||
client={client}
|
client={client}
|
||||||
isOpen={updateClientIsOpen}
|
isOpen={updateClientIsOpen}
|
||||||
toggle={toggleUpdateClient}
|
toggle={toggleUpdateClient}
|
||||||
/>
|
/>
|
||||||
<div className="col-span-3 px-6 flex items-center sm:px-6">
|
<div className="col-span-2 sm:col-span-1 px-6 flex items-center sm:px-6">
|
||||||
<Switch
|
<Switch
|
||||||
checked={client.enabled}
|
checked={client.enabled}
|
||||||
onChange={onToggleMutation}
|
onChange={onToggleMutation}
|
||||||
|
|
@ -62,10 +62,10 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
||||||
/>
|
/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
|
<div className="col-span-8 sm:col-span-4 lg:col-span-4 pl-12 pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
|
||||||
<div className="hidden md:flex col-span-3 py-3 flex items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
|
<div className="hidden sm:block col-span-4 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
|
||||||
<div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
|
<div className="hidden sm:block col-span-2 py-3 text-left items-center text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
|
||||||
<div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
|
<div className="col-span-1 pl-0.5 whitespace-nowrap text-center text-sm font-medium">
|
||||||
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
|
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
|
||||||
Edit
|
Edit
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -104,7 +104,7 @@ function DownloadClientSettings() {
|
||||||
<div className="ml-4 mt-4 flex-shrink-0">
|
<div className="ml-4 mt-4 flex-shrink-0">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-sm text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
onClick={toggleAddClient}
|
onClick={toggleAddClient}
|
||||||
>
|
>
|
||||||
Add new
|
Add new
|
||||||
|
|
@ -114,19 +114,19 @@ function DownloadClientSettings() {
|
||||||
|
|
||||||
<div className="flex flex-col mt-6 px-4">
|
<div className="flex flex-col mt-6 px-4">
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ?
|
||||||
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-sm">
|
||||||
<ol className="min-w-full relative">
|
<ol className="min-w-full relative">
|
||||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||||
<div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
Enabled
|
Enabled
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div className="col-span-6 sm:col-span-4 lg:col-span-4 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
Name
|
Name
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div className="hidden sm:flex col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
Host
|
Host
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div className="hidden sm:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
Type
|
Type
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -42,22 +42,20 @@ function FeedSettings() {
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ?
|
||||||
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||||
<ol className="min-w-full relative">
|
<ol className="min-w-full relative">
|
||||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||||
<div
|
<div
|
||||||
className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
|
className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
|
className="col-span-6 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
|
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
|
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
|
||||||
</div>
|
</div>
|
||||||
{/*<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>*/}
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{data && data.map((f) => (
|
{data && data.map((f) => (
|
||||||
<ListItem key={f.id} feed={f}/>
|
<ListItem key={f.id} feed={f}/>
|
||||||
))}
|
))}
|
||||||
|
|
@ -101,8 +99,8 @@ function ListItem({ feed }: ListItemProps) {
|
||||||
<li key={feed.id} className="text-gray-500 dark:text-gray-400">
|
<li key={feed.id} className="text-gray-500 dark:text-gray-400">
|
||||||
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed}/>
|
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed}/>
|
||||||
|
|
||||||
<div className="grid grid-cols-12 gap-4 items-center">
|
<div className="grid grid-cols-12 items-center">
|
||||||
<div className="col-span-3 px-6 flex items-center sm:px-6 ">
|
<div className="col-span-2 sm:col-span-1 px-6 flex items-center">
|
||||||
<Switch
|
<Switch
|
||||||
checked={feed.enabled}
|
checked={feed.enabled}
|
||||||
onChange={toggleActive}
|
onChange={toggleActive}
|
||||||
|
|
@ -121,16 +119,16 @@ function ListItem({ feed }: ListItemProps) {
|
||||||
/>
|
/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white">
|
<div className="col-span-8 sm:col-span-6 pl-12 py-3 flex flex-col text-sm font-medium text-gray-900 dark:text-white">
|
||||||
<span>{feed.name}</span>
|
<span>{feed.name}</span>
|
||||||
<span className="text-gray-900 dark:text-gray-500 text-xs">
|
<span className="text-gray-900 dark:text-gray-500 text-xs">
|
||||||
{feed.indexer}
|
{feed.indexer}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex col-span-3 py-3 flex items-center">
|
<div className="hidden md:flex col-span-1 py-3 items-center">
|
||||||
{ImplementationBadges[feed.type.toLowerCase()]}
|
{ImplementationBadges[feed.type.toLowerCase()]}
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
|
<div className="hidden md:flex col-span-3 py-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
|
||||||
<span title={simplifyDate(feed.last_run)}>
|
<span title={simplifyDate(feed.last_run)}>
|
||||||
{IsEmptyDate(feed.last_run)}
|
{IsEmptyDate(feed.last_run)}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -8,33 +8,27 @@ import { APIClient } from "../../api/APIClient";
|
||||||
import { componentMapType } from "../../forms/settings/DownloadClientForms";
|
import { componentMapType } from "../../forms/settings/DownloadClientForms";
|
||||||
|
|
||||||
const ImplementationBadgeIRC = () => (
|
const ImplementationBadgeIRC = () => (
|
||||||
<span
|
<span className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800">
|
||||||
className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800"
|
|
||||||
>
|
|
||||||
IRC
|
IRC
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
const ImplementationBadgeTorznab = () => (
|
const ImplementationBadgeTorznab = () => (
|
||||||
<span
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800">
|
||||||
className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800"
|
|
||||||
>
|
|
||||||
Torznab
|
Torznab
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
const ImplementationBadgeRSS = () => (
|
const ImplementationBadgeRSS = () => (
|
||||||
<span
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800">
|
||||||
className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800"
|
|
||||||
>
|
|
||||||
RSS
|
RSS
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const ImplementationBadges: componentMapType = {
|
export const ImplementationBadges: componentMapType = {
|
||||||
"irc": <ImplementationBadgeIRC/>,
|
irc: <ImplementationBadgeIRC />,
|
||||||
"torznab": <ImplementationBadgeTorznab />,
|
torznab: <ImplementationBadgeTorznab />,
|
||||||
"rss": <ImplementationBadgeRSS />
|
rss: <ImplementationBadgeRSS />
|
||||||
};
|
};
|
||||||
|
|
||||||
interface ListItemProps {
|
interface ListItemProps {
|
||||||
|
|
@ -45,36 +39,48 @@ const ListItem = ({ indexer }: ListItemProps) => {
|
||||||
const [updateIsOpen, toggleUpdate] = useToggle(false);
|
const [updateIsOpen, toggleUpdate] = useToggle(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={indexer.name}>
|
<li key={indexer.name}>
|
||||||
<IndexerUpdateForm isOpen={updateIsOpen} toggle={toggleUpdate} indexer={indexer} />
|
<div className="grid grid-cols-12 items-center py-1.5">
|
||||||
|
<IndexerUpdateForm
|
||||||
<td className="px-6 py-4 whitespace-nowrap">
|
isOpen={updateIsOpen}
|
||||||
<Switch
|
toggle={toggleUpdate}
|
||||||
checked={indexer.enabled ?? false}
|
indexer={indexer}
|
||||||
onChange={toggleUpdate}
|
/>
|
||||||
className={classNames(
|
<div className="col-span-2 sm:col-span-1 flex px-6 items-center sm:px-6">
|
||||||
indexer.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
|
<Switch
|
||||||
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
checked={indexer.enabled ?? false}
|
||||||
)}
|
onChange={toggleUpdate}
|
||||||
>
|
|
||||||
<span className="sr-only">Enable</span>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className={classNames(
|
className={classNames(
|
||||||
indexer.enabled ? "translate-x-5" : "translate-x-0",
|
indexer.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
|
||||||
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
</Switch>
|
<span className="sr-only">Enable</span>
|
||||||
</td>
|
<span
|
||||||
<td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{indexer.name}</td>
|
aria-hidden="true"
|
||||||
<td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{ImplementationBadges[indexer.implementation]}</td>
|
className={classNames(
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
indexer.enabled ? "translate-x-5" : "translate-x-0",
|
||||||
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer" onClick={toggleUpdate}>
|
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
||||||
Edit
|
)}
|
||||||
</span>
|
/>
|
||||||
</td>
|
</Switch>
|
||||||
</tr>
|
</div>
|
||||||
|
<div className="col-span-7 sm:col-span-8 pl-12 sm:pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||||
|
{indexer.name}
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block col-span-2 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate">
|
||||||
|
{ImplementationBadges[indexer.implementation]}
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex first-letter:px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<span
|
||||||
|
className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
|
||||||
|
onClick={toggleUpdate}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -92,15 +98,16 @@ function IndexerSettings() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="lg:col-span-9">
|
<div className="lg:col-span-9">
|
||||||
|
|
||||||
<IndexerAddForm isOpen={addIndexerIsOpen} toggle={toggleAddIndexer} />
|
<IndexerAddForm isOpen={addIndexerIsOpen} toggle={toggleAddIndexer} />
|
||||||
|
|
||||||
<div className="py-6 px-4 sm:p-6 lg:pb-8">
|
<div className="py-6 px-4 sm:p-6 lg:pb-8">
|
||||||
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
|
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
|
||||||
<div className="ml-4 mt-4">
|
<div className="ml-4 mt-4">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Indexers</h3>
|
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||||
|
Indexers
|
||||||
|
</h3>
|
||||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Indexer settings.
|
Indexer settings.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-4 mt-4 flex-shrink-0">
|
<div className="ml-4 mt-4 flex-shrink-0">
|
||||||
|
|
@ -115,52 +122,37 @@ function IndexerSettings() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col mt-6">
|
<div className="flex flex-col mt-6">
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ? (
|
||||||
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
<ol className="min-w-full relative">
|
||||||
<div className="light:shadow overflow-hidden light:border-b light:border-gray-200 dark:border-gray-700 sm:rounded-lg">
|
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
<div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
<thead className="light:bg-gray-50">
|
Enabled
|
||||||
<tr>
|
</div>
|
||||||
<th
|
<div className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
scope="col"
|
Name
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
</div>
|
||||||
>
|
<div className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
Enabled
|
Implementation
|
||||||
</th>
|
</div>
|
||||||
<th
|
</li>
|
||||||
scope="col"
|
{data.map((indexer, idx) => (
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
<ListItem indexer={indexer} key={idx} />
|
||||||
>
|
))}
|
||||||
Name
|
</ol>
|
||||||
</th>
|
</section>
|
||||||
<th
|
) : (
|
||||||
scope="col"
|
<EmptySimple
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
|
title="No indexers"
|
||||||
>
|
subtitle=""
|
||||||
Implementation
|
buttonText="Add new indexer"
|
||||||
</th>
|
buttonAction={toggleAddIndexer}
|
||||||
<th scope="col" className="relative px-6 py-3">
|
/>
|
||||||
<span className="sr-only">Edit</span>
|
)}
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
|
|
||||||
{data.map((indexer, idx) => (
|
|
||||||
<ListItem indexer={indexer} key={idx} />
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: <EmptySimple title="No indexers" subtitle="" buttonText="Add new indexer" buttonAction={toggleAddIndexer} />
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default IndexerSettings;
|
export default IndexerSettings;
|
||||||
|
|
|
||||||
|
|
@ -42,9 +42,9 @@ function NotificationSettings() {
|
||||||
{data && data.length > 0 ?
|
{data && data.length > 0 ?
|
||||||
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||||
<ol className="min-w-full">
|
<ol className="min-w-full">
|
||||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||||
<div className="col-span-2 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
|
<div className="col-span-2 sm:col-span-1 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
|
||||||
<div className="col-span-6 md:col-span-5 pl-10 md:pl-0 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
|
<div className="col-span-6 pl-10 md:pl-12 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
|
||||||
<div className="hidden md:flex col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
|
<div className="hidden md:flex col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
|
||||||
<div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>
|
<div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -95,8 +95,8 @@ function ListItem({ notification }: ListItemProps) {
|
||||||
<li key={notification.id} className="text-gray-500 dark:text-gray-400">
|
<li key={notification.id} className="text-gray-500 dark:text-gray-400">
|
||||||
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
|
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
|
||||||
|
|
||||||
<div className="grid grid-cols-12 gap-4 items-center py-3">
|
<div className="grid grid-cols-12 items-center py-4">
|
||||||
<div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
|
<div className="col-span-2 sm:col-span-1 px-6 flex items-center ">
|
||||||
<Switch
|
<Switch
|
||||||
checked={notification.enabled}
|
checked={notification.enabled}
|
||||||
onChange={toggleUpdateForm}
|
onChange={toggleUpdateForm}
|
||||||
|
|
@ -115,7 +115,7 @@ function ListItem({ notification }: ListItemProps) {
|
||||||
/>
|
/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-8 md:col-span-5 pl-10 md:pl-0 pr-2 sm:pr-6 truncate block items-center" title={notification.name}>
|
<div className="col-span-8 md:col-span-6 pl-10 md:pl-12 pr-2 sm:pr-6 truncate block items-center text-sm font-medium text-gray-900 dark:text-white" title={notification.name}>
|
||||||
{notification.name}
|
{notification.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex col-span-2 items-center">
|
<div className="hidden md:flex col-span-2 items-center">
|
||||||
|
|
@ -129,11 +129,15 @@ function ListItem({ notification }: ListItemProps) {
|
||||||
{notification.events.length}
|
{notification.events.length}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2 md:col-span-1 flex items-center">
|
<div className="col-span-1 flex first-letter:px-6 whitespace-nowrap text-right text-sm font-medium">
|
||||||
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateForm}>
|
<span
|
||||||
|
className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
|
||||||
|
onClick={toggleUpdateForm}
|
||||||
|
>
|
||||||
Edit
|
Edit
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue