Skip to content

Better UI #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StarRayX wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Better UI #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b1cee7
WFM Theme
StarRayX Jul 24, 2023
fec3d12
Merge branch 'main' of https://github.com/StarRayX/Warframe-Algo-Trad…
StarRayX Jul 24, 2023
a4f2a7b
WFM UI
StarRayX Jul 24, 2023
22da4fe
WFM UI
StarRayX Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 98 additions & 108 deletions my-app/app/BuyBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,97 @@
import { environment } from "@/environment";
import { ChangeEvent, useState } from "react";
import { useState } from "react";
import { useEffect } from "react";

export default function BuyBlock() {
const [itemName, setItemName] = useState("");
const [price, setPrice] = useState("");
const [allItemNames, setAllItemNames] = useState<string[]>([]);
const [itemName, setItemName] = useState("");
const [price, setPrice] = useState("");
const [allItemNames, setAllItemNames] = useState([]);

useEffect(() => {
fetch(`${environment.API_BASE_URL}/all_items`)
.then((response) => response.json())
.then((data) => {
setAllItemNames(data.item_names);
})
.catch((error) => console.log(error));
}, []);

const handleItemNameChange = (event: ChangeEvent<HTMLInputElement>) => {
const inputValue = event.target.value;
const formattedInputValue = inputValue.replace(/\s+/g, "_");
setItemName(formattedInputValue);
};

const handleButtonClick = () => {
if (itemName === "" || price === "" || isNaN(Number(price))) {
// Check if either textbox is empty or price is not a number
return;
}

const formattedItemName = itemName.replace(/\s+/g, "_").toLowerCase();

if (!allItemNames.includes(formattedItemName)) {
// Check if the formatted item name is not in the predetermined list
return;
}

const itemData = {
name: formattedItemName,
purchasePrice: price,
number: 1,
};
(document.getElementById("buyButton") as HTMLButtonElement)!.disabled =
true;

fetch(`${environment.API_BASE_URL}/item`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(itemData),
})
.then((response) => response.json())
.then((data) => {
// Handle response data if needed
console.log(data);

// Send transaction data
const transactionData = {
name: formattedItemName,
transaction_type: "buy",
price: price,
};

fetch(`${environment.API_BASE_URL}/transaction`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(transactionData),
useEffect(() => {
fetch("http://127.0.0.1:8000/all_items")
.then((response) => response.json())
.then((data) => {
setAllItemNames(data.item_names);
})
.then((response) => response.json())
.then((transactionResponse) => {
// Handle transaction response if needed
console.log(transactionResponse);
.catch((error) => console.log(error));
}, []);

// Reset input values
setItemName("");
setPrice("");
const handleItemNameChange = (event) => {
const inputValue = event.target.value;
const formattedInputValue = inputValue.replace(/\s+/g, "_");
setItemName(formattedInputValue);
};

const handleButtonClick = () => {
if (itemName === "" || price === "" || isNaN(price)) {
// Check if either textbox is empty or price is not a number
return;
}

const formattedItemName = itemName.replace(/\s+/g, "_").toLowerCase();

//window.location.reload();
})
.catch((error) => console.log(error));
if (!allItemNames.includes(formattedItemName)) {
// Check if the formatted item name is not in the predetermined list
return;
}

const itemData = {
name: formattedItemName,
purchasePrice: price,
number: 1,
};
document.getElementById("buyButton").disabled = true;

fetch("http://127.0.0.1:8000/item/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(itemData),
})
.catch((error) => console.log(error));

setItemName("");
setPrice("");

(document.getElementById("buyButton") as HTMLButtonElement)!.disabled =
false;
};

return (
<div className="items-center justify-center p-8 pb-12 rounded-full bg-black-custom shadow-lg shadow-slate-400">
<h1 className="pb-4 text-lg">Purchase New Item:</h1>
<input
className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
.then((response) => response.json())
.then((data) => {
// Handle response data if needed
console.log(data);

// Send transaction data
const transactionData = {
name: formattedItemName,
transaction_type: "buy",
price: price,
};

fetch("http://127.0.0.1:8000/transaction/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(transactionData),
})
.then((response) => response.json())
.then((transactionResponse) => {
// Handle transaction response if needed
console.log(transactionResponse);

// Reset input values
setItemName("");
setPrice("");

//window.location.reload();
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));

setItemName("");
setPrice("");
document.getElementById("buyButton").disabled = false;
};

return (
<div className="w-[36vw] m-auto items-center justify-center p-[1.5vw] rounded-[1vw] bg-grey-custom-light mb-[1.5vw]">
<h1 className="pb-[1vw] text-[1vw]">Purchase New Item:</h1>
<input
className="text-center w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
type="text"
list="itemNames"
placeholder="Item Name"
Expand All @@ -107,22 +103,16 @@ export default function BuyBlock() {
<option key={name} value={name} />
))}
</datalist>
<input
className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
type="text"
placeholder="Price"
value={price}
onChange={(event) => setPrice(event.target.value)}
/>
<div className="pt-2">
<button
className="py-2 px-6 rounded-md bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
onClick={handleButtonClick}
id="buyButton"
>
Buy
</button>
<input
className="text-center w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
type="text"
placeholder="Price"
value={price}
onChange={(event) => setPrice(event.target.value)}
/>

<button className="py-[0.3vw] px-[0.5vw] w-[4vw] h-[2vw] bg-blue-custom-light text-black-custom-text text-[0.9vw] hover:bg-blue-custom-highlight transition duration-500" onClick={handleButtonClick} id="buyButton">Buy</button>

</div>
</div>
);
}
);
}
87 changes: 44 additions & 43 deletions my-app/app/Clock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,48 @@ import { useEffect } from "react";
import { useState } from "react";

export default function Clock() {
const [currentTime, setCurrentTime] = useState("");
const [timeUntilMidnight, setTimeUntilMidnight] = useState("");
const [currentTime, setCurrentTime] = useState("");
const [timeUntilMidnight, setTimeUntilMidnight] = useState("");

useEffect(() => {
const interval = setInterval(() => {
const date = new Date();
const hours = date.getUTCHours().toString().padStart(2, "0");
const minutes = date.getUTCMinutes().toString().padStart(2, "0");
const seconds = date.getUTCSeconds().toString().padStart(2, "0");
const time = `${hours}:${minutes}:${seconds}`;
setCurrentTime(time);

// Calculate time until midnight
const midnight = new Date(date);
midnight.setUTCHours(24, 0, 0, 0);
const timeUntilMidnightMillis = midnight - date;
const hoursUntilMidnight = Math.floor(timeUntilMidnightMillis / 3600000);
const minutesUntilMidnight = Math.floor(
(timeUntilMidnightMillis % 3600000) / 60000
);
const secondsUntilMidnight = Math.floor(
(timeUntilMidnightMillis % 60000) / 1000
);
// Pad the time values with leading zeros
const paddedHours = hoursUntilMidnight.toString().padStart(2, '0');
const paddedMinutes = minutesUntilMidnight.toString().padStart(2, '0');
const paddedSeconds = secondsUntilMidnight.toString().padStart(2, '0');

useEffect(() => {
const interval = setInterval(() => {
const date = new Date();
const hours = date.getUTCHours().toString().padStart(2, "0");
const minutes = date.getUTCMinutes().toString().padStart(2, "0");
const seconds = date.getUTCSeconds().toString().padStart(2, "0");
const time = `${hours}:${minutes}:${seconds}`;
setCurrentTime(time);

// Calculate time until midnight
const midnight = new Date(date);
midnight.setUTCHours(24, 0, 0, 0);
const timeUntilMidnightMillis = midnight.valueOf() - date.valueOf();
const hoursUntilMidnight = Math.floor(timeUntilMidnightMillis / 3600000);
const minutesUntilMidnight = Math.floor(
(timeUntilMidnightMillis % 3600000) / 60000
);
const secondsUntilMidnight = Math.floor(
(timeUntilMidnightMillis % 60000) / 1000
);
// Pad the time values with leading zeros
const paddedHours = hoursUntilMidnight.toString().padStart(2, "0");
const paddedMinutes = minutesUntilMidnight.toString().padStart(2, "0");
const paddedSeconds = secondsUntilMidnight.toString().padStart(2, "0");

const timeUntilMidnight = `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
setTimeUntilMidnight(timeUntilMidnight);
}, 1000); // Update every second

return () => {
clearInterval(interval);
};
}, []);

return (
<div className="absolute top-4 left-4 text-left">
<div>GMT: {currentTime}</div>
<div>Time until midnight GMT: {timeUntilMidnight}</div>
</div>
);
}
const timeUntilMidnight = `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
setTimeUntilMidnight(timeUntilMidnight);
}, 1000); // Update every second

return () => {
clearInterval(interval);
};
}, []);

return (
<div className="absolute top-[2vh] left-[2vh] text-left z-100 text-[1vw]">
<div>GMT: {currentTime}</div>
<div>Time until midnight GMT: {timeUntilMidnight}</div>
</div>
);
}

Loading