Skip to content

Commit

Permalink
feat(backup): icons, mobile support
Browse files Browse the repository at this point in the history
  • Loading branch information
@he3als
he3als committed Aug 20, 2024
1 parent 9c97de4 commit a0bc14d
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 50 deletions.
8 changes: 4 additions & 4 deletions resources/scripts/components/server/backups/BackupContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@ const BackupContainer = () => {
}}
className='p-1 border-[1px] border-[#ffffff12] rounded-xl'
>
<div className='w-full h-full overflow-hidden rounded-lg flex flex-col gap-1'>
<For each={items} memo>
{(backup) => <BackupRow key={backup.uuid} backup={backup} />}
</For>
<div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>
{items.map((backup) => (
<BackupRow key={backup.uuid} backup={backup} />
))}
</div>
</div>
)
Expand Down
93 changes: 47 additions & 46 deletions resources/scripts/components/server/backups/BackupRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import getServerBackups from '@/api/swr/getServerBackups';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';

import BackupContextMenu from './BackupContextMenu';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFile, faLock } from '@fortawesome/free-solid-svg-icons';

interface Props {
backup: ServerBackup;
Expand All @@ -34,12 +36,12 @@ export default ({ backup }: Props) => {
b.uuid !== backup.uuid
? b
: {
...b,
isSuccessful: parsed.is_successful || true,
checksum: (parsed.checksum_type || '') + ':' + (parsed.checksum || ''),
bytes: parsed.file_size || 0,
completedAt: new Date(),
},
...b,
isSuccessful: parsed.is_successful || true,
checksum: (parsed.checksum_type || '') + ':' + (parsed.checksum || ''),
bytes: parsed.file_size || 0,
completedAt: new Date(),
},
),
}),
false,
Expand All @@ -51,52 +53,51 @@ export default ({ backup }: Props) => {

return (
<ContextMenu>
<ContextMenuTrigger>
<div
className={`flex bg-[#ffffff11] hover:bg-[#ffffff19] transition duration-100 hover:duration-0 px-6 py-4 rounded-md items-center`}
>
<div className={`flex items-center truncate w-full md:flex-1`}>
<div className={`flex flex-col truncate`}>
<div className={`flex items-center text-sm mb-1`}>
{backup.completedAt !== null && !backup.isSuccessful && (
<span
className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
>
Failed
</span>
)}
<div className={`flex gap-2 items-center justify-center`}>
<p className='break-words truncate text-lg'>{backup.name}</p>
{backup.completedAt !== null ? (
backup.isLocked ? (
<span className='font-bold z-10 rounded-full bg-brand px-2 py-1 text-xs text-white'>
Locked
</span>
) : null
) : (
<Spinner size={'small'} />
<ContextMenuTrigger className='flex flex-1 items-center rounded-md bg-[#ffffff11] px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row'>
<div className={`flex-auto max-w-full box-border`}>
<div className='flex flex-row align-middle items-center gap-6 truncate'>
<div className='flex-none'>
{backup.completedAt === null ? (
<Spinner size={'small'} />
) : backup.isLocked ? (
<FontAwesomeIcon icon={faLock} className='text-red-500' />
) : (
<FontAwesomeIcon icon={faFile} />
)}
</div>
<div className={`flex items-center w-full md:flex-1`}>
<div className={`flex flex-col`}>
<div className={`flex items-center text-sm mb-1`}>
{backup.completedAt !== null && !backup.isSuccessful && (
<span
className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
>
Failed
</span>
)}
<div className={`flex gap-2 items-center justify-center`}>
<p className='break-words truncate text-lg'>{backup.name}</p>
</div>
</div>
<p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>{backup.checksum}</p>
</div>
<p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>{backup.checksum}</p>
</div>
</div>
<div
className={`w-1/6 justify-end flex flex-1 md:flex-none md:w-48 mt-4 md:mt-0 md:ml-8 md:text-center`}
>
{backup.completedAt !== null && backup.isSuccessful && (
<span className={`text-xs hidden sm:inline`}>{bytesToString(backup.bytes)}</span>
)}
</div>
<div className={`w-1/5 justify-end flex flex-1 md:flex-none mt-4 md:mt-0 md:ml-8 md:text-center`}>
<p title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')} className={`text-xs`}>
{formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
</p>
</div>
<Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
{!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
</Can>
</div>

<div className='flex flex-row justify-center font-medium sm:justify-between min-w-full sm:w-96 sm:min-w-40'>
{backup.completedAt !== null && backup.isSuccessful && (
<span className={`text-xs sm:flex-initial sm:ml-0`}>{bytesToString(backup.bytes)}</span>
)}
<p className={`text-xs inline sm:hidden`}>,&nbsp;</p>
<p title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')} className={`text-xs sm:flex-initial`}>
{formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
</p>
</div>

<Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
{!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
</Can>
</ContextMenuTrigger>
</ContextMenu>
);
Expand Down

0 comments on commit a0bc14d

Please sign in to comment.