mirror of
https://github.com/Ravinou/borgwarehouse
synced 2024-06-08 08:52:11 +02:00
200 lines
8.2 KiB
JavaScript
200 lines
8.2 KiB
JavaScript
//Lib
|
|
import { useState } from 'react';
|
|
import classes from './Repo.module.css';
|
|
import {
|
|
IconSettings,
|
|
IconInfoCircle,
|
|
IconChevronDown,
|
|
IconChevronUp,
|
|
} from '@tabler/icons-react';
|
|
import timestampConverter from '../../helpers/functions/timestampConverter';
|
|
import StorageBar from '../UI/StorageBar/StorageBar';
|
|
import QuickCommands from './QuickCommands/QuickCommands';
|
|
|
|
export default function Repo(props) {
|
|
//Load displayDetails from LocalStorage
|
|
const displayDetailsFromLS = () => {
|
|
try {
|
|
if (
|
|
localStorage.getItem('displayDetailsRepo' + props.id) === null
|
|
) {
|
|
localStorage.setItem(
|
|
'displayDetailsRepo' + props.id,
|
|
JSON.stringify(true)
|
|
);
|
|
return true;
|
|
} else {
|
|
return JSON.parse(
|
|
localStorage.getItem('displayDetailsRepo' + props.id)
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.log(
|
|
'LocalStorage error, key',
|
|
'displayDetailsRepo' + props.id,
|
|
'will be removed. Try again.',
|
|
'Error message on this key : ',
|
|
error
|
|
);
|
|
localStorage.removeItem('displayDetailsRepo' + props.id);
|
|
}
|
|
};
|
|
|
|
//States
|
|
const [displayDetails, setDisplayDetails] = useState(displayDetailsFromLS);
|
|
|
|
//BUTTON : Display or not repo details for ONE repo
|
|
const displayDetailsForOneHandler = (boolean) => {
|
|
//Update localStorage
|
|
localStorage.setItem(
|
|
'displayDetailsRepo' + props.id,
|
|
JSON.stringify(boolean)
|
|
);
|
|
setDisplayDetails(boolean);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{displayDetails ? (
|
|
<>
|
|
<div className={classes.RepoOpen}>
|
|
<div className={classes.openFlex}>
|
|
{props.status ? (
|
|
<div
|
|
className={classes.statusIndicatorGreen}
|
|
></div>
|
|
) : (
|
|
<div
|
|
className={classes.statusIndicatorRed}
|
|
></div>
|
|
)}
|
|
<div className={classes.alias}>{props.alias}</div>
|
|
{props.comment && (
|
|
<div className={classes.comment}>
|
|
<IconInfoCircle size={16} color='grey' />
|
|
<div className={classes.toolTip}>
|
|
{props.comment}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<QuickCommands
|
|
repositoryName={props.repositoryName}
|
|
lanCommand={props.lanCommand}
|
|
wizardEnv={props.wizardEnv}
|
|
/>
|
|
</div>
|
|
|
|
<table className={classes.tabInfo}>
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: '15%' }}>Repository</th>
|
|
<th style={{ width: '10%' }}>
|
|
Storage Size
|
|
</th>
|
|
<th style={{ width: '30%' }}>
|
|
Storage Used
|
|
</th>
|
|
<th style={{ width: '15%' }}>
|
|
Last change
|
|
</th>
|
|
<th style={{ width: '5%' }}>ID</th>
|
|
<th style={{ width: '5%' }}>Edit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>{props.repositoryName}</th>
|
|
<th>{props.storageSize}Go</th>
|
|
<th style={{ padding: '0 4% 0 4%' }}>
|
|
<StorageBar
|
|
storageUsed={props.storageUsed}
|
|
storageSize={props.storageSize}
|
|
/>
|
|
</th>
|
|
<th>
|
|
<div className={classes.lastSave}>
|
|
{props.lastSave === 0
|
|
? '-'
|
|
: timestampConverter(
|
|
props.lastSave
|
|
)}
|
|
</div>
|
|
</th>
|
|
<th>#{props.id}</th>
|
|
<th>
|
|
<div className={classes.editButton}>
|
|
<IconSettings
|
|
width={24}
|
|
color='#6d4aff'
|
|
onClick={() =>
|
|
props.repoManageEditHandler()
|
|
}
|
|
/>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className={classes.RepoClose}>
|
|
<div className={classes.closeFlex}>
|
|
{props.status ? (
|
|
<div
|
|
className={classes.statusIndicatorGreen}
|
|
></div>
|
|
) : (
|
|
<div
|
|
className={classes.statusIndicatorRed}
|
|
></div>
|
|
)}
|
|
<div className={classes.alias}>{props.alias}</div>
|
|
{props.comment && (
|
|
<div className={classes.comment}>
|
|
<IconInfoCircle size={16} color='#637381' />
|
|
<div className={classes.toolTip}>
|
|
{props.comment}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={classes.lastSave}>
|
|
{props.lastSave === 0
|
|
? null
|
|
: timestampConverter(props.lastSave)}
|
|
<span
|
|
style={{ marginLeft: '20px', color: '#637381' }}
|
|
>
|
|
#{props.id}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{displayDetails ? (
|
|
<div className={classes.chevron}>
|
|
<IconChevronUp
|
|
color='#494b7a'
|
|
size={28}
|
|
onClick={() => {
|
|
displayDetailsForOneHandler(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className={classes.chevron}>
|
|
<IconChevronDown
|
|
color='#494b7a'
|
|
size={28}
|
|
onClick={() => {
|
|
displayDetailsForOneHandler(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|