Skip to content

Commit

Permalink
added toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sir-Thom
Sir-Thom committed Nov 10, 2023
1 parent e68c3be commit 7b71b6b
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 31 deletions.
6 changes: 3 additions & 3 deletions src/components/sideMenu/sideMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
};

return (
<div className="bg-gray-800 h-full min-h-screen w-72 overflow-y-auto flex flex-col">
<div className="bg-gray-800 h-full min-h-screen shadow-sm shadow-gray-700 w-72 overflow-y-auto flex flex-col">
<div className="flex h-24 dark:bg-window-dark-800 bg-window-light-50 justify-start items-center">
<Link
className="flex justify-center items-center w-8 mt-12 dark:text-text-dark text-text-light rounded-full hover:dark:bg-window-dark-600 hover:bg-window-light-600"
className="flex justify-center items-center mx-1 w-8 mt-12 dark:text-text-dark text-text-light rounded-full hover:dark:bg-window-dark-600 hover:bg-window-light-600"
to="/"
>
<IconArrowLeft
Expand All @@ -38,7 +38,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ menuItems, onMenuItemClick }) => {
<button
onClick={() => handleMenuItemClick(menuItem)}
title={menuItem.label}
className={`w-full rounded-lg text-justify mx-auto py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600 ${
className={`w-full rounded-lg text-justify mx-auto py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600 ${
clickedButton === menuItem.label
? "bg-accent-color1-600"
: ""
Expand Down
41 changes: 41 additions & 0 deletions src/components/toggle/toggle.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Switch } from '@headlessui/react'

function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ')
}

interface ToggleProps {
className?: string;
enabled: boolean;
value?: string;
onChange: (checked: boolean) => void;
}

export default function Toggle({ enabled, onChange,className,value }: ToggleProps) {
return (
<Switch
checked={enabled}
onChange={onChange}
value={value}
className={`${className} ${" relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center outline-none outline-2 border-none focus:outline-accent-color1-700 text-text-dark rounded-full "}`}
>
<span className="sr-only">Use setting</span>
<span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-window-dark-400" />
<span
aria-hidden="true"
className={classNames(
enabled ? 'bg-accent-color1-600' : ' bg-window-dark-300',
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
)}
/>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border bg-window-dark-300 transition-transform duration-200 ease-in-out'
)}
/>
</Switch>
)
}

31 changes: 15 additions & 16 deletions src/views/serverSetting/ApiSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";

import Toggle from "../../components/toggle/toggle";

export default function ApiSetting({ settings, onSave, patchSetting }) {
const [apiEnabled, setApiEnabled] = useState(Boolean(settings.api));
const [metricsEnabled, setMetricsEnabled] = useState(
Expand Down Expand Up @@ -94,29 +96,26 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
<div className="flex flex-col text-right items-end">
<label className="my-2">API:</label>
{/* <!-- <label className="my-2">API Address:</label> --> */}
<label className="my-2">Metrics:</label>
<label className="mt-3.5 mb-2">Metrics Address:</label>
<label className="my-3">Metrics:</label>
<label className="mt-3 mb-4">Metrics Address:</label>
<label className="my-2">Pprof:</label>
<label className="my-4">Pprof Address:</label>
<label className="mt-5 mb-2">Run On Connect:</label>
<label className="mt-5 mb-2.5">Run On Connect:</label>
<label className="mt-5 mb-2">
Run On Connect Restart:
</label>
</div>
</div>
<div className="col-span-1">
<div className="flex flex-col">
<Checkbox
className="mt-3 my-2"
value={apiEnabled.toString()}
checked={apiEnabled}
onChange={handleApiEnabledChange}
/>
<Toggle className="my-2 mt-3" enabled={apiEnabled} onChange={handleApiEnabledChange} />



<Checkbox
<Toggle
className=" mt-4 mb-2"
value={metricsEnabled.toString()}
checked={metricsEnabled}
enabled={metricsEnabled}
onChange={handleMetricsChange}
/>
<input
Expand All @@ -125,10 +124,10 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
value={metricsAddress}
onChange={handleMetricsAddressChange}
/>
<Checkbox
className="mt-3 mb-2 my-2"
<Toggle
className="mt-4 mb-2"
value={pprofEnabled.toString()}
checked={pprofEnabled}
enabled={pprofEnabled}
onChange={handlePprofChange}
/>
<input
Expand All @@ -143,10 +142,10 @@ export default function ApiSetting({ settings, onSave, patchSetting }) {
value={runOnConnect}
onChange={handleRunOnConnectChange}
/>
<Checkbox
<Toggle
className="mt-3.5 mb-2"
value={runOnConnectRestart.toString()}
checked={runOnConnectRestart}
enabled={runOnConnectRestart}
onChange={handleRunOnConnectRestartChange}
/>
</div>
Expand Down
22 changes: 11 additions & 11 deletions src/views/serverSetting/RecordSetting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { fadeIn } from "../../utils/animation/screenAnimation";
import Checkbox from "../../components/checkBox/checkBox";
import Toast from "../../components/toast/Toast";
import Toggle from "../../components/toggle/toggle";

export default function RecordSetting({ settings, onSave, patchSetting }) {
const [error, setError] = useState<string | null>(null);
Expand Down Expand Up @@ -102,45 +102,45 @@ export default function RecordSetting({ settings, onSave, patchSetting }) {
<div className="col-span-1">
<div className="flex flex-col text-right items-end">
<label className="my-2">Record:</label>
<label className="mt-5 mb-6">Record Path:</label>
<label className="mt-5 mb-3">Record Format:</label>
<label className="mt-7 mb-3">
<label className="mt-5 mb-3">Record Path:</label>
<label className="mt-5 mb-4">Record Format:</label>
<label className="mt-4 mb-3">
Record Segment Duration:
</label>
<label className="my-8">
<label className="mt-5 mb-3">
Record Delete After:
</label>
</div>
</div>
<div className="col-span-1">
<div className="flex flex-col">
<Checkbox
<Toggle
className="my-3"
value={record.toString()}
checked={record}
enabled={record}
onChange={handleRecordChange}
/>
<input
type="text"
className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
className="my-3 pr-1 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
value={recordPath}
onChange={handleRecordPathChange}
/>
<input
type="text"
className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
className="my-3 pr-1 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
value={recordFormat}
onChange={handleRecordFormatChange}
/>
<input
type="text"
className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
className="my-3 pr-1 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
value={recordSegmentDuration}
onChange={handleRecordSegmentDurationChange}
/>
<input
type="text"
className="my-3 pr-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
className="my-3 pr-1 h-8 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
value={recordDeleteAfter}
onChange={handleRecordDeleteAfterChange}
/>
Expand Down
69 changes: 68 additions & 1 deletion src/views/serverSetting/webrtcSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,75 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
className="w-full max-w-2xl p-8 ml-20 rounded-md"
>
{settings && (

<div className="space-y-6">
<h2 className="text-center font-bold text-3xl">Webrtc Setting</h2>
<div className="grid grid-cols-2 gap-6">
{/* <div className="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
<div>
<h2 className="text-base font-semibold leading-7 text-white">Change password</h2>
<p className="mt-1 text-sm leading-6 text-gray-400">
Update your password associated with your account.
</p>
</div>
<form className="md:col-span-2">
<div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
<div className="col-span-full">
<label htmlFor="current-password" className="block text-sm font-medium leading-6 text-white">
Current password
</label>
<div className="mt-2">
<input
id="current-password"
name="current_password"
type="password"
autoComplete="current-password"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="col-span-full">
<label htmlFor="new-password" className="block text-sm font-medium leading-6 text-white">
New password
</label>
<div className="mt-2">
<input
id="new-password"
name="new_password"
type="password"
autoComplete="new-password"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div className="col-span-full">
<label htmlFor="confirm-password" className="block text-sm font-medium leading-6 text-white">
Confirm password
</label>
<div className="mt-2">
<input
id="confirm-password"
name="confirm_password"
type="password"
autoComplete="new-password"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
</div>
<div className="mt-8 flex">
<button
className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
>
Save
</button>
</div>
</form>*/}

<div className="grid place-content-start grid-cols-2 gap-6">
<div className="col-span-1">
<div className="flex flex-col align-baseline text-justify items-end">
<label className="my-2">Webrtc:</label>
Expand Down Expand Up @@ -329,6 +395,7 @@ export default function WebrtcSetting({ settings, onSave, patchSetting }) {
</button>
</div>
</div>

)}
</motion.div>
</div>
Expand Down

0 comments on commit 7b71b6b

Please sign in to comment.