logos-storage/logos-storage-frontend
1
0
Fork 0
mirror of https://github.com/logos-storage/logos-storage-frontend.git synced 2026-01-02 05:13:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

MDF create availability

Browse Source
This commit is contained in:
Shaun Orssaud 2024-02-02 14:34:18 +09:00
parent bf6cc85d55
commit 3eb1f59845
3 changed files with 144 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@ -8,4 +8,4 @@ services:
ports: ports:
- "3000:80" - "3000:80"
environment: environment:
- codex_url=${codex_url:-http://kubernetes.docker.internal:30003} - codex_url=${codex_url:-http://kubernetes.docker.internal:30002}

220
frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
View File

@ -22,7 +22,9 @@ function OfferStorage() {
const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => { const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
const { days, hours, minutes, seconds } = newDuration; const { days, hours, minutes, seconds } = newDuration;
const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds; const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
setDuration(totalSeconds.toString()); if (totalSeconds > 0) {
setDuration(totalSeconds.toString());
}
}; };
@ -67,43 +69,62 @@ function OfferStorage() {
return ( return (
<> <>
<DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} />
<OfferStorageWrapper> <OfferStorageWrapper>
<input <div className="row">
type="text" <div className="field">
placeholder="CID" <label>CID</label>
onChange={(e) => { <input
setFtdCid(e.target.value); type="text"
}} placeholder="CID"
value={ftdCid} onChange={(e) => {
/> setFtdCid(e.target.value);
<div id="divider"></div> }}
<input value={ftdCid}
type="text" />
placeholder="Size (seconds)" </div>
onChange={(e) => setSize(e.target.value)} </div>
/> <div className="row">
<div id="divider"></div> <div className="field">
<input <label>Size</label>
type="text" <input
placeholder="Duration" type="text"
value={duration} placeholder="Size (seconds)"
onClick={toggleBox} onChange={(e) => setSize(e.target.value)}
> />
</input> </div>
<DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} /> <div className="field">
<div id="divider"></div> <label>Duration</label>
<input <input
type="text" type="text"
placeholder="MinPrice" placeholder="Duration"
onChange={(e) => setMinPrice(e.target.value)} value={duration}
/> onClick={toggleBox}
<div id="divider"></div> >
<input </input>
type="text" </div>
placeholder="MaxCollateral" </div>
onChange={(e) => setMaxCollateral(e.target.value)} <div className="row">
/> <div className="field">
<button onClick={() => upload(ftdCid)}>Create</button> <label>Minimum Price</label>
<input
type="text"
placeholder="MinPrice"
onChange={(e) => setMinPrice(e.target.value)}
/>
</div>
</div>
<div className="row">
<div className="field">
<label>Maximum Collateral</label>
<input
type="text"
placeholder="MaxCollateral"
onChange={(e) => setMaxCollateral(e.target.value)}
/>
</div>
<button onClick={() => upload(ftdCid)}>Create</button>
</div>
</OfferStorageWrapper> </OfferStorageWrapper>
{error && ( {error && (
<p style={{ color: "red", marginTop: "10px", textAlign: "center" }}> <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
@ -117,60 +138,105 @@ function OfferStorage() {
export default OfferStorage; export default OfferStorage;
const OfferStorageWrapper = styled.div` const OfferStorageWrapper = styled.div`
flex: 1;
display: flex;
flex-direction: column;
main {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 75%; height: 100%;
width: 100%;
padding: 16px 0px;
}
input { h1 {
flex: 3; color: ${constants.onSurfaceColor};
height: 60px; font-size: 24px;
padding: 10px 20px; margin: 16px;
border: none; }
background-color: ${constants.surfaceColor};
color: ${constants.onSurfaceColor};
width: 100%;
}
input:focus { .inputs {
outline: none; padding: 16px;
border: 2px solid ${constants.primaryColor}; display: flex;
} align-items: center;
justify-content: center;
background-color: #141414;
border-radius: 8px;
width: 50%;
}
.row {
display: flex;
align-items: center;
justify-content: center;
}
input:nth-child(1) { .field {
border-top-left-radius: 8px; display: flex;
border-bottom-left-radius: 8px; align-items: left;
} flex-direction: column;
height: 100%;
width: 100%;
padding: 0px 4px;
}
#divider { h4 {
width: 2.5px; color: ${constants.onSurfaceColor};
height: 60px; font-size: 20px;
background-color: #555555; margin: 16px;
} }
button { input {
flex: 2; height: 60px;
height: 60px; padding: 10px 20px;
border: none; border: none;
background-color: ${constants.primaryColor}; background-color: ${constants.surfaceColor};
color: ${constants.onPrimaryColor}; color: ${constants.onSurfaceColor};
font-size: 1rem; width: 100%;
cursor: pointer; border-radius: 8px;
border-top-right-radius: 8px; margin: 16px 0px;
border-bottom-right-radius: 8px; border: 2px dashed #9e9e9e;
width: 100%; border-radius: 8px;
} text-align: center;
}
@media (max-width: 1180px) { input:focus {
outline: none;
border: 2px solid ${constants.primaryColor};
}
button {
height: 50%;
width: 50%;
margin-top: 20px;
border: none;
background-color: ${constants.primaryColor};
color: ${constants.onPrimaryColor};
font-size: 1rem;
cursor: pointer;
border-radius: 8px;
}
button span {
font-weight: bold;
}
@media (max-width: 1180px) {
.inputs {
width: 80%; width: 80%;
} }
}
@media (max-width: 768px) { @media (max-width: 768px) {
.inputs {
width: 85%; width: 85%;
} }
}
@media (max-width: 450px) { @media (max-width: 450px) {
.inputs {
width: 90%; width: 90%;
} }
`; }
`;

2
frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
View File

@ -36,7 +36,6 @@ function CreateTab() {
const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds; const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
const timestamp = moment().unix() + totalSeconds; const timestamp = moment().unix() + totalSeconds;
setExpiry(timestamp.toString()); setExpiry(timestamp.toString());
}; };
const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => { const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
@ -46,7 +45,6 @@ function CreateTab() {
if (totalSeconds >= 60 && totalSeconds <= 86400) { if (totalSeconds >= 60 && totalSeconds <= 86400) {
setDuration(totalSeconds.toString()); setDuration(totalSeconds.toString());
} }
}; };
function upload(cid: string) { function upload(cid: string) {