61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useLog } from 'services/s3si';
|
|
import { Checkbox } from './Checkbox';
|
|
import { Loading } from './Loading';
|
|
import { useService } from 'services/useService';
|
|
import { useAppContext } from 'context/app'
|
|
|
|
type RunPanelProps = Record<string, never>
|
|
|
|
export const RunPanel: React.FC<RunPanelProps> = () => {
|
|
const { t } = useTranslation();
|
|
const { data: result } = useService('profile', 0)
|
|
const [exportBattle, setExportBattle] = useState(true);
|
|
const [exportCoop, setExportCoop] = useState(true);
|
|
const { exports } = useAppContext()
|
|
const disabled = !exports
|
|
const isExporting = exports?.isExporting ?? false
|
|
|
|
if (!result) {
|
|
return <Loading />
|
|
}
|
|
|
|
return <>
|
|
<div className="tooltip" data-tip={disabled ? t('请先在设置中完成Nintendo Account登录和stat.ink的API密钥') : undefined}>
|
|
<Checkbox disabled={disabled || isExporting} value={exportBattle} onChange={setExportBattle}>{t('导出对战数据')}</Checkbox>
|
|
<Checkbox disabled={disabled || isExporting} value={exportCoop} onChange={setExportCoop}>{t('导出打工数据')}</Checkbox>
|
|
<button
|
|
type='button'
|
|
onClick={() => exports?.trigger({ exportBattle, exportCoop })}
|
|
className={clsx('btn btn-primary w-full', {
|
|
'btn-disabled': disabled || (!exportBattle && !exportCoop),
|
|
})}
|
|
disabled={isExporting}
|
|
>{isExporting ? <span className='loading' /> : t('导出')}</button>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
export type LogPanelProps = {
|
|
className?: string
|
|
}
|
|
|
|
export const LogPanel: React.FC<LogPanelProps> = ({ className }) => {
|
|
const { renderedLogs } = useLog();
|
|
const div = useRef<HTMLDivElement>(null);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
if (div.current) {
|
|
div.current.scrollTop = div.current.scrollHeight;
|
|
}
|
|
}, [renderedLogs])
|
|
|
|
return <div ref={div} className={`bg-neutral text-neutral-content overflow-auto rounded p-4 ${className}`}>
|
|
{renderedLogs.length === 0 && <pre><code>{t('欢迎! 请点击"导出"按钮开始使用.')}</code></pre>}
|
|
{renderedLogs.map((line, i) => <pre key={i}><code>{line}</code></pre>)}
|
|
</div>
|
|
}
|