cochrane/DockerRegistryWebUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added loading circle

Browse Source
This commit is contained in:
CodeServer 2022-04-12 08:43:10 +01:00
parent cb16584468
commit 455b0b383e
4 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Loading.tsx
View File

@ -1,8 +1,11 @@
import React from "react";
import { CircularProgress } from "@mui/material";
const Loading: React.FC = () => {
return(
<h1>Loading!</h1>
<div style={{display: 'flex', justifyContent: 'center', marginTop: '15%'}}>
<CircularProgress size="5%"/>
</div>
);
};

9
src/components/home/Home.tsx
View File

@ -3,11 +3,12 @@ import { List } from "@mui/material";
import RepositoryItem from "./RepositoryEntry";
import useRepositories from "../../hooks/useRepositories";
import Repository from "../../interfaces/Repositoriy";
import Loading from "../Loading";
const Home: React.FC = () => {
const { repositories } = useRepositories();
const { isFetched, repositories } = useRepositories();
return(
return(isFetched ? (
<div className="sectionHome">
<List className="repositoryList" style={{ maxHeight: "100%", overflow: "auto" }}>
{repositories.map((repository: Repository) => {
@ -17,7 +18,9 @@ const Home: React.FC = () => {
})}
</List>
</div>
);
) : (
<Loading />
));
};
export default Home;

6
src/components/repositoryInfo/RepositoryInfo.tsx
View File

@ -5,7 +5,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
import useRepositories from "../../hooks/useRepositories";
import Tag from "../../interfaces/Tag";
import Repository from "../../interfaces/Repositoriy";
import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst } from "../../utils";
import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst, printMonth } from "../../utils";
import RepoNotFound from "./RepoNotFound"
import Loading from "../Loading";
@ -113,6 +113,7 @@ const RepositoryInfo: React.FC = () => {
</Grid>
<Grid item sm={3}>
<Tooltip
className="tooltip"
title={
<>
<div>{"Operating System: " + toUpperFirst(tag.os)}</div>
@ -131,8 +132,9 @@ const RepositoryInfo: React.FC = () => {
</Grid>
<Grid item sm={2}>
<Tooltip
className="tooltip"
title={
tag.created ? (tag.created.toLocaleString()) : "---"
tag.created ? (printMonth(tag.created.getMonth()) + " " + tag.created.getDate() + ", " + tag.created.getFullYear() + " at " + tag.created.toLocaleTimeString().replace('.','').toUpperCase()) : "---"
}
placement="bottom-end"
arrow

20
src/utils.tsx
View File

@ -18,6 +18,24 @@ const checkValidURL = async (url: string) => {
return true;
}
const printMonth = (month: number): string => {
switch (month) {
case 0:return "Jan";break;
case 1:return "Feb";break;
case 2:return "Mar";break;
case 3:return "Apr";break;
case 4:return "May";break;
case 5:return "Jun";break;
case 6:return "Jul";break;
case 7:return "Aug";break;
case 8:return "Sep";break;
case 9:return "Oct";break;
case 10:return "Nov";break;
case 11:return "Dec";break;
default:return "" + month;break;
}
}
const toUpperFirst= (s: string):string => {
if (s.length > 0) {
return s[0].toUpperCase() + s.substring(1);
@ -75,4 +93,4 @@ const PrintOSIcon: React.FC<{ className: string, os: string }> = ({ className, o
}
}
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst };
export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst, printMonth };