Added custom duration

codex-storage · Jan 17, 2024 · bd2d2be · bd2d2be
1 parent 2c468fa
commit bd2d2be
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 36 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -8,4 +8,4 @@ services:
     ports:
       - "3000:80"
     environment:
-      - codex_url=${codex_url:-http://kubernetes.docker.internal:30001}
+      - codex_url=${codex_url:-http://kubernetes.docker.internal:30003}
diff --git a/frontend/src/components/AvailableComponent/AvailableComponent.tsx b/frontend/src/components/AvailableComponent/AvailableComponent.tsx
@@ -16,13 +16,13 @@ function AvailableComponent(props: { item: AvailabilityModel }) {
         </p>
         <p>
           <span>Size: </span>
-          {props.item.size}
+          {props.item.size} seconds
         </p>
       </div>
       <div>
         <p>
           <span>Duration: </span>
-          {props.item.duration}
+          {props.item.duration} seconds
         </p>
         <p>
           <span>Min Price: </span>

diff --git a/frontend/src/components/layout/durationInput/DurationInput.tsx b/frontend/src/components/layout/durationInput/DurationInput.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const DurationInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Input = styled.input`
+  width: 50px;
+  margin: 0 5px;
+  text-align: center;
+`;
+
+interface DurationInputProps {
+  onDurationChange: (duration: { days: number; hours: number; minutes: number; seconds: number }) => void;
+}
+
+const DurationInput: React.FC<DurationInputProps> = ({ onDurationChange }) => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+
+  const handleDurationChange = () => {
+    onDurationChange({ days, hours, minutes, seconds });
+  };
+
+  return (
+    <DurationInputWrapper>
+      <Input
+        type="number"
+        value={days}
+        onChange={(e) => setDays(parseInt(e.target.value))}
+        placeholder="Days"
+        onBlur={handleDurationChange}
+      />
+      <span>days</span>
+      <Input
+        type="number"
+        value={hours}
+        onChange={(e) => setHours(parseInt(e.target.value))}
+        placeholder="Hours"
+        onBlur={handleDurationChange}
+      />
+      <span>hours</span>
+      <Input
+        type="number"
+        value={minutes}
+        onChange={(e) => setMinutes(parseInt(e.target.value))}
+        placeholder="Minutes"
+        onBlur={handleDurationChange}
+      />
+      <span>minutes</span>
+      <Input
+        type="number"
+        value={seconds}
+        onChange={(e) => setSeconds(parseInt(e.target.value))}
+        placeholder="Seconds"
+        onBlur={handleDurationChange}
+      />
+      <span>seconds</span>
+    </DurationInputWrapper>
+  );
+};
+
+export default DurationInput;
diff --git a/frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx b/frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx
@@ -0,0 +1,41 @@
+// DurationInputWithFloatingBox.tsx
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import DurationInput from './DurationInput';
+
+const FloatingBoxWrapper = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  background: #555555;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+`;
+
+const CloseButton = styled.button`
+  margin-top: 10px;
+  cursor: pointer;
+  flex: 1;
+`;
+
+interface DurationInputWithFloatingBoxProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onDurationChange: (duration: { days: number; hours: number; minutes: number; seconds: number }) => void;
+}
+
+const DurationInputWithFloatingBox: React.FC<DurationInputWithFloatingBoxProps> = ({ isOpen, onClose, onDurationChange }) => {
+  return (
+    <FloatingBoxWrapper style={{ display: isOpen ? 'flex' : 'none' }}>
+      <DurationInput onDurationChange={onDurationChange} />
+      <CloseButton onClick={onClose}>Close</CloseButton>
+    </FloatingBoxWrapper>
+  );
+};
+
+export default DurationInputWithFloatingBox;
diff --git a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
@@ -2,17 +2,29 @@ import { useState } from "react";
 import constants from "../../../../util/Constants";
 import styled from "styled-components";
 import { useDexyStore } from "../../../../store";
+import DurationInputWithFloatingBox from "../../../../components/layout/durationInput/DurationInputWithFloatingBox"
 
 function OfferStorage() {
   const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
 
-  const [size, setSize,] = useState("file");
-  const [duration, setDuration,] = useState("file");
-  const [minPrice, setMinPrice,] = useState("file");
-  const [maxCollateral, setMaxCollateral,] = useState("file");
-  const [expiry, setExpiry,] = useState("file");
+  const [size, setSize,] = useState("");
+  const [duration, setDuration,] = useState("");
+  const [minPrice, setMinPrice,] = useState("");
+  const [maxCollateral, setMaxCollateral,] = useState("");
   const [error, setError] = useState("");
 
+  const [isBoxOpen, setBoxOpen] = useState(false);
+
+  const toggleBox = () => {
+    setBoxOpen(!isBoxOpen);
+  };
+
+  const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
+    const { days, hours, minutes, seconds } = newDuration;
+    const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
+    setDuration(totalSeconds.toString());
+  };
+
 
   function upload(cid: string) {
     fetch(
@@ -30,7 +42,6 @@ function OfferStorage() {
           duration: duration,
           minPrice: minPrice,
           maxCollateral: maxCollateral,
-          expiry: expiry
         })
       }
     )
@@ -68,15 +79,20 @@ function OfferStorage() {
         <div id="divider"></div>
         <input
           type="text"
-          placeholder="Size"
+          placeholder="Size (seconds)"
           onChange={(e) => setSize(e.target.value)}
         />
         <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Duration"
-          onChange={(e) => setDuration(e.target.value)}
-        />
+        <div>
+          <input
+            type="text"
+            placeholder="Duration"
+            value={duration}
+            onClick={toggleBox}
+            >
+          </input>
+        </div>
+        <DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} />
         <div id="divider"></div>
         <input
           type="text"
@@ -89,12 +105,6 @@ function OfferStorage() {
           placeholder="MaxCollateral"
           onChange={(e) => setMaxCollateral(e.target.value)}
         />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Expiry"
-          onChange={(e) => setExpiry(e.target.value)}
-        />
         <button onClick={() => upload(ftdCid)}>Create</button>
       </OfferStorageWrapper>
       {error && (

diff --git a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
@@ -2,16 +2,29 @@ import { useState } from "react";
 import constants from "../../../../util/Constants";
 import styled from "styled-components";
 import { useDexyStore } from "../../../../store";
+import DurationInputWithFloatingBox from "../../../../components/layout/durationInput/DurationInputWithFloatingBox"
 
 function CreateTab() {
   const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
 
-  const [reward, setReward,] = useState("file");
-  const [duration, setDuration,] = useState("file");
-  const [proofProbability, setProofProbability,] = useState("file");
-  const [collateral, setCollateral,] = useState("file");
+  const [reward, setReward,] = useState("");
+  const [duration, setDuration,] = useState("");
+  const [proofProbability, setProofProbability,] = useState("");
+  const [manualProbability, setManualProbability] = useState("");
+  const [collateral, setCollateral,] = useState("");
   const [error, setError] = useState("");
 
+  const [isBoxOpen, setBoxOpen] = useState(false);
+
+  const toggleBox = () => {
+    setBoxOpen(!isBoxOpen);
+  };
+
+  const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
+    const { days, hours, minutes, seconds } = newDuration;
+    const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
+    setDuration(totalSeconds.toString());
+  };
 
   function upload(cid: string) {
     fetch(
@@ -70,17 +83,16 @@ function CreateTab() {
           onChange={(e) => setReward(e.target.value)}
         />
         <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Duration"
-          onChange={(e) => setDuration(e.target.value)}
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="ProofProbability"
-          onChange={(e) => setProofProbability(e.target.value)}
-        />
+        <div>
+          <input
+            type="text"
+            placeholder="Duration"
+            value={duration}
+            onClick={toggleBox}
+            >
+          </input>
+        </div>
+        <DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} />
         <div id="divider"></div>
         <input
           type="text"
@@ -158,3 +170,29 @@ const CreateTabWrapper = styled.div`
     width: 90%;
   }
 `;
+
+const CustomDropdown = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 150px;
+  `;
+
+const DropdownContent = styled.div`
+  display: block;
+  position: absolute;
+  background-color: #555555;
+  min-width: 120px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 4;
+  right: 0;
+  `;
+
+const DropdownOption = styled.div`
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+  &:hover {
+    background-color: #f1f1f1;
+  }
+  `;