Implement Log Modal
This commit is contained in:
Serkan Reis
parent
5041d34964
commit
972b92bf6a
155
components/LogModal.tsx
Normal file
155
components/LogModal.tsx
Normal file
@ -0,0 +1,155 @@
|
||||
import { useLogStore } from 'contexts/log'
|
||||
import { useRef, useState } from 'react'
|
||||
import { FaCopy, FaEraser } from 'react-icons/fa'
|
||||
import { copy } from 'utils/clipboard'
|
||||
|
||||
import type { LogItem } from '../contexts/log'
|
||||
import { removeLogItem, setLogItemList } from '../contexts/log'
|
||||
import { Button } from './Button'
|
||||
import { Tooltip } from './Tooltip'
|
||||
|
||||
export interface LogModalProps {
|
||||
tempLogItem?: LogItem
|
||||
}
|
||||
export const LogModal = (props: LogModalProps) => {
|
||||
const logs = useLogStore()
|
||||
const [isChecked, setIsChecked] = useState(false)
|
||||
|
||||
const checkBoxRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleCheckBox = () => {
|
||||
checkBoxRef.current?.click()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input className="modal-toggle" defaultChecked={false} id="my-modal-8" ref={checkBoxRef} type="checkbox" />
|
||||
<label className="cursor-pointer modal" htmlFor="my-modal-8">
|
||||
<label
|
||||
className={`absolute top-[15%] bottom-5 left-[21.5%] lg:max-w-[70%] ${
|
||||
logs.itemList.length > 4 ? 'max-h-[750px]' : 'max-h-[500px]'
|
||||
} border-2 no-scrollbar modal-box`}
|
||||
htmlFor="temp"
|
||||
>
|
||||
<div className="text-xl font-bold">
|
||||
<table className="table w-full h-1/2">
|
||||
<thead className="sticky inset-x-0 top-0 bg-blue-400/20 backdrop-blur-sm">
|
||||
<tr>
|
||||
<th className="text-lg font-bold bg-transparent">#</th>
|
||||
<th className="text-lg font-bold bg-transparent">Type</th>
|
||||
<th className="text-lg font-bold bg-transparent">Message</th>
|
||||
<th className="text-lg font-bold bg-transparent">
|
||||
Time (UTC +{-new Date().getTimezoneOffset() / 60}){' '}
|
||||
</th>
|
||||
<th className="bg-transparent" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.itemList.length > 0 &&
|
||||
logs.itemList.map((logItem, index) => (
|
||||
<tr key={logItem.id} className="p-0 border-b-2 border-teal-200/10 border-collapse">
|
||||
<td className="ml-8 w-[5%] font-mono text-base font-bold bg-transparent">{index + 1}</td>
|
||||
<td
|
||||
className={`w-[5%] font-mono text-base font-bold bg-transparent ${
|
||||
logItem.type === 'Error' ? 'text-red-400' : ''
|
||||
}`}
|
||||
>
|
||||
{logItem.type || 'Info'}
|
||||
</td>
|
||||
<td className="w-[70%] text-sm font-bold bg-transparent">
|
||||
<Tooltip backgroundColor="bg-transparent" label="" placement="bottom">
|
||||
<button
|
||||
className="group flex overflow-auto space-x-2 max-w-xl font-mono text-base text-white/80 hover:underline no-scrollbar"
|
||||
onClick={() => void copy(logItem.message)}
|
||||
type="button"
|
||||
>
|
||||
<span>{logItem.message}</span>
|
||||
<FaCopy className="opacity-0 group-hover:opacity-100" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</td>
|
||||
<td className="w-[20%] font-mono text-base bg-transparent">
|
||||
{logItem.timestamp ? new Date(logItem.timestamp).toLocaleString() : ''}
|
||||
</td>
|
||||
<th className="bg-transparent">
|
||||
<div className="flex items-center space-x-8">
|
||||
<Button
|
||||
className="bg-clip-text border-blue-200"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
removeLogItem(logItem.id)
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
<FaEraser />
|
||||
</Button>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
//line break
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<div className="flex justify-start ml-4 w-full">
|
||||
<Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700">
|
||||
<label
|
||||
className="w-full h-full text-white bg-gray-600 hover:bg-gray-700 rounded border-0 btn modal-button"
|
||||
htmlFor="my-modal-8"
|
||||
>
|
||||
Go Back
|
||||
</label>
|
||||
</Button>
|
||||
<Button
|
||||
className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
|
||||
onClick={() => {
|
||||
window.localStorage.setItem('error_list', '')
|
||||
setLogItemList([])
|
||||
}}
|
||||
>
|
||||
<label
|
||||
className="w-full h-full text-white bg-blue-400 hover:bg-blue-500 rounded border-0 btn modal-button"
|
||||
htmlFor="my-modal-8"
|
||||
>
|
||||
Clear
|
||||
</label>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-end w-full">
|
||||
<Button
|
||||
className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
|
||||
onClick={() => {
|
||||
const csv = logs.itemList
|
||||
.map((logItem) => {
|
||||
return `${logItem.type as string},${logItem.message},${(logItem.timestamp as Date)
|
||||
.toUTCString()
|
||||
.replace(',', '')}`
|
||||
})
|
||||
.join('\n')
|
||||
const blob = new Blob([csv], { type: 'text/csv' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.setAttribute('hidden', '')
|
||||
a.setAttribute('href', url)
|
||||
a.setAttribute('download', 'studio_logs.csv')
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}}
|
||||
>
|
||||
<label
|
||||
className="w-full h-full text-white bg-stargaze hover:bg-stargaze/80 rounded border-0 btn modal-button"
|
||||
htmlFor="my-modal-8"
|
||||
>
|
||||
Download
|
||||
</label>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user