idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): irc settings add toggle switches (#606)

Browse source 
* feat(web): switch buttons on irc settings page

* changed resolution limit for responsive design from 640px to 768px
values in Network, Server and Nick will now truncate instead of showing a scrollbar
changes in element alignments

* feat(irc): toggle from settings

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
This commit is contained in:
martylukyy 2023-01-06 21:41:47 +00:00 • committed by GitHub
parent ca4ad498a4
commit 6a839bedec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

83
web/src/screens/settings/Irc.tsx
View file

@ -6,7 +6,7 @@ import { useToggle } from "../../hooks/hooks";
import { APIClient } from "../../api/APIClient"; import { APIClient } from "../../api/APIClient";
import { EmptySimple } from "../../components/emptystates"; import { EmptySimple } from "../../components/emptystates";
import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid"; import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Switch, Transition } from "@headlessui/react";
import { Fragment, useRef } from "react"; import { Fragment, useRef } from "react";
import { DeleteModal } from "../../components/modals"; import { DeleteModal } from "../../components/modals";
@ -35,8 +35,8 @@ export const IrcSettings = () => {
<div className="lg:col-span-9"> <div className="lg:col-span-9">
<IrcNetworkAddForm isOpen={addNetworkIsOpen} toggle={toggleAddNetwork} /> <IrcNetworkAddForm isOpen={addNetworkIsOpen} toggle={toggleAddNetwork} />
<div className="py-6 px-4 sm:p-6 lg:pb-8"> <div className="py-6 px-4 md: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 md: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"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
IRC IRC
@ -57,8 +57,8 @@ export const IrcSettings = () => {
</div> </div>
</div> </div>
<div className="flex justify-between flex-col sm:flex-row mt-10 px-1"> <div className="flex justify-between flex-col md:flex-row mt-10 px-1">
<ol className="flex flex-col sm:flex-row sm:gap-2 pb-4 sm:pb-0 sm:divide-x sm:divide-gray-200 sm:dark:divide-gray-700"> <ol className="flex flex-col md:flex-row md:gap-2 pb-4 md:pb-0 md:divide-x md:divide-gray-200 md:dark:divide-gray-700">
<li className="flex items-center"> <li className="flex items-center">
<span <span
className="mr-2 flex h-4 w-4 relative" className="mr-2 flex h-4 w-4 relative"
@ -70,7 +70,7 @@ export const IrcSettings = () => {
<span className="text-sm text-gray-800 dark:text-gray-500">Network healthy</span> <span className="text-sm text-gray-800 dark:text-gray-500">Network healthy</span>
</li> </li>
<li className="flex items-center sm:pl-2"> <li className="flex items-center md:pl-2">
<span <span
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600" className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600"
title="Network unhealthy" title="Network unhealthy"
@ -78,7 +78,7 @@ export const IrcSettings = () => {
<span className="text-sm text-gray-800 dark:text-gray-500">Network unhealthy</span> <span className="text-sm text-gray-800 dark:text-gray-500">Network unhealthy</span>
</li> </li>
<li className="flex items-center sm:pl-2"> <li className="flex items-center md:pl-2">
<span <span
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-gray-500" className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-gray-500"
title="Network disabled" title="Network disabled"
@ -97,16 +97,19 @@ export const IrcSettings = () => {
</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 md: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 gap-4 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 md:col-span-1 px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Enabled
</div>
<div className="col-span-10 md:col-span-3 px-8 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Network Network
</div> </div>
<div className="hidden sm:flex col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> <div className="hidden md:flex col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Server Server
</div> </div>
<div className="hidden sm: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 md:flex col-span-3 px-5 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Nick Nick
</div> </div>
</li> </li>
@ -139,6 +142,24 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
const [updateIsOpen, toggleUpdate] = useToggle(false); const [updateIsOpen, toggleUpdate] = useToggle(false);
const [edit, toggleEdit] = useToggle(false); const [edit, toggleEdit] = useToggle(false);
const queryClient = useQueryClient();
const mutation = useMutation(
(network: IrcNetwork) => APIClient.irc.updateNetwork(network),
{
onSuccess: () => {
queryClient.invalidateQueries(["networks"]);
toast.custom((t) => <Toast type="success" body={`${network.name} was updated successfully`} t={t}/>);
}
}
);
const onToggleMutation = (newState: boolean) => {
mutation.mutate({
...network,
enabled: newState
});
};
return ( return (
<li key={idx}> <li key={idx}>
<div className={classNames("grid grid-cols-12 gap-2 lg:gap-4 items-center py-2", network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700 ")}> <div className={classNames("grid grid-cols-12 gap-2 lg:gap-4 items-center py-2", network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700 ")}>
@ -147,9 +168,27 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
toggle={toggleUpdate} toggle={toggleUpdate}
network={network} network={network}
/> />
<div className="col-span-2 md:col-span-1 flex pl-5 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
<Switch
checked={network.enabled}
onChange={onToggleMutation}
className={classNames(
network.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
"items-center 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"
)}
>
<span className="sr-only">Enable</span>
<span
aria-hidden="true"
className={classNames(
network.enabled ? "translate-x-5" : "translate-x-0",
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
)}
/>
</Switch>
</div>
<div <div
className="col-span-10 xs:col-span-3 sm:col-span-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-white cursor-pointer" className="col-span-8 xs:col-span-3 md:col-span-3 items-center pl-8 text-sm font-medium text-gray-900 dark:text-white cursor-pointer"
onClick={toggleEdit} onClick={toggleEdit}
> >
<div className="flex"> <div className="flex">
@ -175,13 +214,13 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-gray-500" /> <span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-gray-500" />
)} )}
</span> </span>
<div className="overflow-x-auto flex"> <div className="block truncate">
{network.name} {network.name}
</div> </div>
</div> </div>
</div> </div>
<div <div
className="hidden sm:flex col-span-5 sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer" className="hidden md:flex col-span-4 md:pl-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
onClick={toggleEdit} onClick={toggleEdit}
> >
<div <div
@ -203,16 +242,16 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
)} /> )} />
)} )}
</div> </div>
<p className="break-all"> <p className="block truncate">
{network.server}:{network.port} {network.server}:{network.port}
</p> </p>
</div> </div>
</div> </div>
<div <div
className="hidden sm:flex col-span-3 items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer" className="hidden md:flex col-span-3 items-center md:pl-6 text-sm text-gray-500 dark:text-gray-400 cursor-pointer"
onClick={toggleEdit} onClick={toggleEdit}
> >
<div className="overflow-x-auto flex"> <div className="block truncate">
{network.nick} {network.nick}
</div> </div>
</div> </div>
@ -239,7 +278,7 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
{network.channels.map((c) => ( {network.channels.map((c) => (
<li key={c.id} className="text-gray-500 dark:text-gray-400"> <li key={c.id} className="text-gray-500 dark:text-gray-400">
<div className="grid grid-cols-12 gap-4 items-center py-4"> <div className="grid grid-cols-12 gap-4 items-center py-4">
<div className="col-span-4 flex items-center sm:px-6 "> <div className="col-span-4 flex items-center md:px-6 ">
<span className="relative inline-flex items-center"> <span className="relative inline-flex items-center">
{network.enabled ? ( {network.enabled ? (
c.monitoring ? ( c.monitoring ? (
@ -259,12 +298,12 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
{c.name} {c.name}
</span> </span>
</div> </div>
<div className="col-span-4 flex items-center sm:px-6 "> <div className="col-span-4 flex items-center md:px-6 ">
<span title={simplifyDate(c.monitoring_since)}> <span title={simplifyDate(c.monitoring_since)}>
{IsEmptyDate(c.monitoring_since)} {IsEmptyDate(c.monitoring_since)}
</span> </span>
</div> </div>
<div className="col-span-4 flex items-center sm:px-6 "> <div className="col-span-4 flex items-center md:px-6 ">
<span title={simplifyDate(c.last_announce)}> <span title={simplifyDate(c.last_announce)}>
{IsEmptyDate(c.last_announce)} {IsEmptyDate(c.last_announce)}
</span> </span>
@ -360,7 +399,7 @@ const ListItemDropdown = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <Menu.Items
className="absolute right-0 w-32 sm:w-56 mt-2 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none" className="absolute right-0 w-32 md:w-56 mt-2 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
> >
<div className="px-1 py-1"> <div className="px-1 py-1">
<Menu.Item> <Menu.Item>