Jeremy Gallant
10 months ago
committed by
GitHub
GitHub
11 changed files with 201 additions and 189 deletions
@ -1,117 +0,0 @@ |
|||||
import { Button } from "@components/UI/Button.tsx"; |
|
||||
import { |
|
||||
Dialog, |
|
||||
DialogClose, |
|
||||
DialogContent, |
|
||||
DialogDescription, |
|
||||
DialogHeader, |
|
||||
DialogTitle, |
|
||||
} from "@components/UI/Dialog.tsx"; |
|
||||
import { Input } from "@components/UI/Input.tsx"; |
|
||||
import { useDevice } from "@core/stores/deviceStore.ts"; |
|
||||
import { ClockIcon, RefreshCwIcon } from "lucide-react"; |
|
||||
import { useState } from "react"; |
|
||||
import { useTranslation } from "react-i18next"; |
|
||||
|
|
||||
export interface RebootOTADialogProps { |
|
||||
open: boolean; |
|
||||
onOpenChange: (open: boolean) => void; |
|
||||
} |
|
||||
|
|
||||
const DEFAULT_REBOOT_DELAY = 5; // seconds
|
|
||||
|
|
||||
export const RebootOTADialog = ({ |
|
||||
open, |
|
||||
onOpenChange, |
|
||||
}: RebootOTADialogProps) => { |
|
||||
const { t } = useTranslation("dialog"); |
|
||||
const { connection } = useDevice(); |
|
||||
const [time, setTime] = useState<number>(DEFAULT_REBOOT_DELAY); |
|
||||
const [isScheduled, setIsScheduled] = useState(false); |
|
||||
const [inputValue, setInputValue] = useState(DEFAULT_REBOOT_DELAY.toString()); |
|
||||
|
|
||||
const handleSetTime = (e: React.ChangeEvent<HTMLInputElement>) => { |
|
||||
if (!e.target.validity.valid) { |
|
||||
e.preventDefault(); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
const val = e.target.value; |
|
||||
setInputValue(val); |
|
||||
|
|
||||
const parsed = Number(val); |
|
||||
if (!Number.isNaN(parsed) && parsed > 0) { |
|
||||
setTime(parsed); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const handleRebootWithTimeout = async () => { |
|
||||
if (!connection) { |
|
||||
return; |
|
||||
} |
|
||||
setIsScheduled(true); |
|
||||
|
|
||||
const delay = time > 0 ? time : DEFAULT_REBOOT_DELAY; |
|
||||
|
|
||||
await new Promise<void>((resolve) => { |
|
||||
setTimeout(() => { |
|
||||
resolve(); |
|
||||
}, delay * 1000); |
|
||||
}).finally(() => { |
|
||||
setIsScheduled(false); |
|
||||
onOpenChange(false); |
|
||||
setInputValue(DEFAULT_REBOOT_DELAY.toString()); |
|
||||
}); |
|
||||
connection.rebootOta(0); |
|
||||
}; |
|
||||
|
|
||||
const handleInstantReboot = async () => { |
|
||||
if (!connection) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
await connection.rebootOta(DEFAULT_REBOOT_DELAY); |
|
||||
onOpenChange(false); |
|
||||
}; |
|
||||
|
|
||||
return ( |
|
||||
<Dialog open={open} onOpenChange={onOpenChange}> |
|
||||
<DialogContent> |
|
||||
<DialogClose /> |
|
||||
<DialogHeader> |
|
||||
<DialogTitle>{t("rebootOta.title")}</DialogTitle> |
|
||||
<DialogDescription>{t("rebootOta.description")}</DialogDescription> |
|
||||
</DialogHeader> |
|
||||
|
|
||||
<div className="flex gap-2 p-2 items-center relative"> |
|
||||
<Input |
|
||||
type="number" |
|
||||
min={1} |
|
||||
max={86400} |
|
||||
className="dark:text-slate-900 appearance-none" |
|
||||
value={inputValue} |
|
||||
onChange={handleSetTime} |
|
||||
placeholder={t("rebootOta.enterDelay")} |
|
||||
/> |
|
||||
<Button |
|
||||
onClick={() => handleRebootWithTimeout()} |
|
||||
data-testid="scheduleRebootBtn" |
|
||||
className="w-9/12" |
|
||||
> |
|
||||
<ClockIcon className="mr-2" size={18} /> |
|
||||
{isScheduled ? t("rebootOta.scheduled") : t("rebootOta.title")} |
|
||||
</Button> |
|
||||
</div> |
|
||||
|
|
||||
<Button |
|
||||
variant="destructive" |
|
||||
name="rebootNow" |
|
||||
onClick={() => handleInstantReboot()} |
|
||||
> |
|
||||
<RefreshCwIcon className="mr-2" size={16} /> |
|
||||
{t("button.rebootOtaNow")} |
|
||||
</Button> |
|
||||
</DialogContent> |
|
||||
</Dialog> |
|
||||
); |
|
||||
}; |
|
||||
Loading…
Reference in new issue