mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2025-06-29 00:45:46 +08:00
Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons
This commit is contained in:
parent
c9b18608a1
commit
01c7c288c4
33 changed files with 478 additions and 165 deletions
143
src/Components/Api/Api.tsx
Normal file
143
src/Components/Api/Api.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import axios from "axios";
|
||||
import {
|
||||
ActivationParams,
|
||||
UpdateProductParams,
|
||||
AddProductParams,
|
||||
LoginParams,
|
||||
RegistrationParams,
|
||||
} from "../../Interfaces/Interfaces";
|
||||
|
||||
// Note APIs
|
||||
|
||||
export function GetProducts() {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/products/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function GetNote(id: number) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/products/" + id + "/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateProduct(note: UpdateProductParams) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.patch("http://localhost:8000/api/v1/products/" + note.id + "/", note, {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
export function AddProduct(note: AddProductParams) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/products/", note, {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error adding product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
export function DeleteProduct(id: number) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.delete("http://localhost:8000/api/v1/products/" + id + "/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error deleting product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
// User APIs
|
||||
|
||||
export function UserRegister(register: RegistrationParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/users/", register)
|
||||
.then(async (response) => {
|
||||
console.log(response.data);
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Registration failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserLogin(user: LoginParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/token/login/", user)
|
||||
.then(async (response) => {
|
||||
localStorage.setItem("token", JSON.stringify(response.data.auth_token));
|
||||
console.log(
|
||||
"Login Success! Stored Token: ",
|
||||
JSON.parse(localStorage.getItem("token") || "{}")
|
||||
);
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Login Failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserInfo() {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/accounts/users/me/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserActivate(activation: ActivationParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
|
||||
.then(async (response) => {
|
||||
console.log("Activation Success");
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Activation failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
|
@ -14,7 +14,10 @@ export default function Container(props: props) {
|
|||
<div style={{ width: "15%", position: "fixed" }}>
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div style={styles.route_wrapper}>{props.children}</div>
|
||||
<div style={styles.route_wrapper}>
|
||||
{props.children}
|
||||
<div style={{ padding: 64 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function Header() {
|
|||
<div style={styles.header_wrapper}>
|
||||
<div style={styles.header_left}>
|
||||
<AppLogo size={64} color="#80b38b" />
|
||||
<p style={styles.logo_title}>Ivy</p>
|
||||
<p style={styles.logo_text}>Ivy</p>
|
||||
</div>
|
||||
<div style={styles.header_right}>
|
||||
<Login />
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function AppLogo(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-plant-2"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M2 9a10 10 0 1 0 20 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function HomeIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-home-2"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function InventoryIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-box-seam"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LogoutIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-logout"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LogsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-clipboard-data"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LowStockIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-zoom-exclamation"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function NotFoundIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-error-404"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ export interface props {
|
|||
export default function ProductIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7.05 11.293l4.243 -4.243a2 2 0 0 1 2.828 0l2.829 2.83a2 2 0 0 1 0 2.828l-4.243 4.243a2 2 0 0 1 -2.828 0l-2.829 -2.831a2 2 0 0 1 0 -2.828z"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function ProductsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-list-numbers"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M11 6h9"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function RecentlyAddedIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-book-upload"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function StatsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-align-box-bottom-center"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function TotalProductsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-packages"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ export default function Login() {
|
|||
}
|
||||
|
||||
if (logged_in) {
|
||||
return <p style={styles.text}>Welcome Jophiel</p>;
|
||||
return (
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>Welcome Jophiel</p>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -27,7 +29,7 @@ export default function Login() {
|
|||
variant="contained"
|
||||
style={styles.login_button}
|
||||
>
|
||||
<p style={styles.text}>Login</p>
|
||||
<p style={{ ...styles.text, ...styles.text_M }}>Login</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function Logout(props: props) {
|
|||
style={styles.logout_button}
|
||||
>
|
||||
{props.children}
|
||||
<p style={styles.text}>Log Out</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Log Out</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,11 +22,13 @@ export default function BlobView({ Products }: ProductList) {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<ProductIcon size={4} color="white" />{" "}
|
||||
<p style={styles.text}>{row.name}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
|
||||
</div>
|
||||
|
||||
<p style={styles.text}>ID: {row.id}</p>
|
||||
<p style={styles.text_small}>Last Modified: {row.last_modified}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Last Modified: {row.last_modified}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import * as React from "react";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
|
|
@ -22,9 +21,15 @@ export default function TableView({ Products }: ProductList) {
|
|||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={styles.text}>Product ID</TableCell>
|
||||
<TableCell style={styles.text}>Product</TableCell>
|
||||
<TableCell style={styles.text}>Last Modified</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product ID
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -33,9 +38,15 @@ export default function TableView({ Products }: ProductList) {
|
|||
key={row.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell style={styles.text}>{row.id}</TableCell>
|
||||
<TableCell style={styles.text}>{row.name}</TableCell>
|
||||
<TableCell style={styles.text}>{row.last_modified}</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.id}
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.last_modified}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
@ -20,7 +20,7 @@ export default function SidebarButton(props: props) {
|
|||
style={styles.sidebar_button}
|
||||
>
|
||||
{props.children}
|
||||
<p style={styles.text}>{props.name}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>{props.name}</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue