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

added print time passed and harded coded user for testing

Browse Source
This commit is contained in:
CodeServer 2022-04-10 13:16:18 +01:00
parent 0714b3e561
commit f5cddc4bcd
7 changed files with 77 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Login.tsx
View File

@ -42,8 +42,10 @@ const Login: React.FC = () => {
// 'Authorization': 'Basic dXNlcjp1c2Vy'
// }
auth: {
username: username,
password: password
// username: username,
// password: password
username: "pusher",
password: "pusher"
}
}
);
@ -55,8 +57,10 @@ const Login: React.FC = () => {
} else {
setAuth["loginNeeded"] = true
setAuth["isLoggedIn"] = true;
setAuth["username"] = username;
setAuth["password"] = password;
// setAuth["username"] = username;
// setAuth["password"] = password;
setAuth["username"] = "pusher";
setAuth["password"] = "pusher";
setHasError(false);
navigate(from, { replace: true });
console.log("logged in!");

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

@ -1,6 +1,7 @@
import React from "react";
import { useState, useEffect } from "react";
import { List, ListItemButton, Box, Typography } from "@mui/material";
import { List } from "@mui/material";
import RepositoryItem from "./RepositoryEntry";
import axios from "../../api/axios";
import useAuth from "../../hooks/useAuth";
import Tag from "../../interfaces/Tag";
@ -112,20 +113,15 @@ const Home: React.FC = () => {
}, []);
return(
<List style={{ maxHeight: "100%", overflow: "auto" }}>
{repositories.map((repository: Repository) => {
return(
<ListItemButton
component="a"
>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="black" variant="h5">{repository.name}</Typography>
<Typography color="grey" variant="h6">{repository.tags.map((tag: Tag) => (tag.created ? tag.created.toDateString() : "Time created not available")).join(" ")}</Typography>
</Box>
</ListItemButton>
);
})}
</List>
<div className="sectionHome">
<List className="repositoryList" style={{ maxHeight: "100%", overflow: "auto" }}>
{repositories.map((repository: Repository) => {
return(
<RepositoryItem repository={repository} />
);
})}
</List>
</div>
);
};

25
src/components/home/RepositoryEntry.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import { ListItemButton, Box, Typography, tableFooterClasses } from "@mui/material";
import Tag from "../../interfaces/Tag";
import Repository from "../../interfaces/Repositoriy";
import { printTimePassed } from "../../utils";
interface Props {
repository: Repository;
}
const RepositoryItem: React.FC<Props> = (props: Props) => {
return (
<ListItemButton
component="a"
>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="black" variant="h5">{props.repository.name}</Typography>
<Typography color="grey" variant="h6">{"Last updated: " + props.repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")}</Typography>
</Box>
</ListItemButton>
);
}
export default RepositoryItem;

5
src/style/modules/_sectionHome.sass
View File

@ -1 +1,4 @@
.sectionHome
.sectionHome
.repositoryList
max-width: 70%
margin: auto

5
src/style/style.css
View File

@ -6,6 +6,11 @@ a {
text-decoration: none;
}
.sectionHome .repositoryList {
max-width: 70%;
margin: auto;
}
.login .grid-container {
-webkit-box-align: center;
-ms-flex-align: center;

2
src/style/style.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AMlD5B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
"mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
"sources": [
"style.sass",
"_variables.sass",

24
src/utils.tsx
View File

@ -15,4 +15,26 @@ const checkValidURL = async (url: string) => {
return true;
}
export { checkValidURL };
const printTimePassed = (date: Date): string => {
const currentTime = Date.now();
const secondsPassed = (currentTime - date.getTime()) / 1000;
if (secondsPassed >= 1) {
if (secondsPassed < 60) {
return Math.floor(secondsPassed) + (secondsPassed < 2 ? " second ago" : " seconds ago");
} else if (secondsPassed < 3600) {
return Math.floor(secondsPassed / 60) + (secondsPassed < 120 ? " minute ago" : " minutes ago");
} else if (secondsPassed < 86400) {
return Math.floor(secondsPassed / 3600) + (secondsPassed < 7200 ? " hour age" : " hours ago");
} else if (secondsPassed < 2629756.8) {
return Math.floor(secondsPassed / 86400) + (secondsPassed < 172800 ? " day ago" : " days ago");
} else if (secondsPassed < 31557600) {
return Math.floor(secondsPassed / 2629756.8) + (secondsPassed < 5259513.6 ? " month ago" : " months ago");
} else {
return Math.floor(secondsPassed / 31557600) + (secondsPassed < 63115200 ? " year ago" : " years ago");
}
} else {
return "just now";
}
};
export { checkValidURL , printTimePassed };