diff --git a/src/App/DevForm.jsx b/src/App/DevForm.jsx deleted file mode 100644 index 0db355d..0000000 --- a/src/App/DevForm.jsx +++ /dev/null @@ -1,27 +0,0 @@ -const devStyles = { - header: { - display: "flex", - justifyContent: "center", - alignItems: "center", - height: "100%", - width: "100%", - fontSize: "2rem", - }, - body: { - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - height: "300px", - width: "100%", - }, - }; - -return ( -
- -

DEV FORM

-
-
-
-); \ No newline at end of file diff --git a/src/App/DevFormComponent.jsx b/src/App/DevFormComponent.jsx new file mode 100644 index 0000000..0999481 --- /dev/null +++ b/src/App/DevFormComponent.jsx @@ -0,0 +1,170 @@ + const formStyles = { + row: { + display: "flex", + flexDirection: "row", + justifyContent: "space-around", + alignItems: "center", + padding: "10px", + width: "100%", + }, + column: { + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + padding: "10px", + }, + columnText: { + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + padding: "10px", + width: "50%", + }, + textField: { + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + alignItems: "center", + padding: "10px", + }, + checkboxField: { + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + alignItems: "left", + padding: "10px", + }, + formLabel: { + display: "flex", + flexDirection: "column", + justifyContent: "space-around", + alignItems: "center", + padding: "10px", + }, + button: { + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + margin: "10px", + }, + listHeading: { + fontWeight: "bold", + fontSize: "1.2rem", + }, + list: { + + }, + paragraph: { + display: "flex", + padding: "5px", + }, + }; + + const [formData, setFormData] = useState({ + textField1: '', + textField2: '', + textField3: '', + textField4: '', + textField5: '', + checkbox1: false, + checkbox2: false, + checkbox3: false, + checkbox4: false, + checkbox5: false, + label1: 'Requires Provider Data Lake', + label2: 'Requires Sharded Database', + label3: 'Requires Provider MPC Service', + label4: 'Requires Provider Indexer', + label5: 'Requires Provider RPC Service', + }); + + const handleChange = (e) => { + const { name, value, type, checked } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: type === 'checkbox' ? checked : value, + })); + }; + + const handleSubmit = (e) => { + props.submitDeveloperProfile(formData); + + // Basic form validation - check if all text fields are filled + const isFormValid = Object.values(formData).every((value) => value !== ''); + + if (isFormValid) { + props.setDeveloperProfile(formData); + } else { + console.warn('The form was not submitted. Please fill in all fields.'); + } + }; + + return ( +
+
+
+

To better help you estimate the cost of your project, please fill out the form below. Each phase represents a milestone in the development process. +

+ Example Phases: +
+
  • Phase 1: Prototype
    • +
  • Phase 2: Beta
    • +
  • Phase 3: Alpha Release
    • +
  • Phase 4: First 6 months
    • +
  • Phase 5: 12 months after Phase 4
    • +
    +
    +
    +

    The number provided = the number of active users per minute. For example, if you expect 100 users to be using your app per minute, enter 100. You can break down your estimate into 5 phases. Leave any unused fields blank. +

    +

    + Please check the boxes that apply to your project. If you are unsure, leave the box unchecked. +

    +
    +
    + +
    + {/* Text Fields */} +
    + {Array.from({ length: 5 }, (_, index) => ( +
    + + +
    + ))} +
    + + {/* Checkboxes */} +
    + {Array.from({ length: 5 }, (_, index) => ( +
    + +
    + ))} +
    + + {/* Submit Button */} +
    + +
    +
    +
    + ); \ No newline at end of file diff --git a/src/App/DevFormView.jsx b/src/App/DevFormView.jsx new file mode 100644 index 0000000..b01da5f --- /dev/null +++ b/src/App/DevFormView.jsx @@ -0,0 +1,56 @@ +const [developerProfile, setDeveloperProfile] = useState(null); +const [headerText, setHeaderText] = useState(null); + +const devStyles = { + header: { + display: "flex", + justifyContent: "center", + alignItems: "center", + height: "100%", + width: "100%", + fontSize: "2rem", + }, + body: { + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + height: "300px", + width: "100%", + }, + }; + +{!developerProfile && ( + setHeaderText("Enter Project Metrics") +)} +{developerProfile && ( + setHeaderText("Project Cost Estimate") +)} + +return ( +
    + +

    {headerText}

    +
    + {!developerProfile && ( + { + setDeveloperProfile(formData); + }, + }} + /> + )} + {developerProfile && ( + + )} +
    +
    +
    +); \ No newline at end of file diff --git a/src/App/DevResultPage.jsx b/src/App/DevResultPage.jsx index b082285..1165e81 100644 --- a/src/App/DevResultPage.jsx +++ b/src/App/DevResultPage.jsx @@ -8,21 +8,149 @@ const devResultStyles = { fontSize: "2rem", }, body: { + width: "100%", + margin: "10px", + padding: "10px", + }, + svgWrapper: { display: "flex", - flexDirection: "column", justifyContent: "center", alignItems: "center", - height: "300px", + height: "100%", width: "100%", }, + svgStyle: { + width: "800", + height: "340", + border: "1px solid #ccc", + padding: "10px", + margin: "10px", + }, + lineStyle1: { + fill: "none", + stroke: "blue", + strokeWidth: "3", + }, + lineStyle2: { + fill: "none", + stroke: "red", + strokeWidth: "3", + }, + lineStyle3: { + fill: "none", + stroke: "green", + strokeWidth: "3", + }, + lineStyle4: { + fill: "none", + stroke: "orange", + strokeWidth: "3", + }, + lineStyle5: { + fill: "none", + stroke: "purple", + strokeWidth: "3", + }, + axisStyleMain: { + fill: "none", + stroke: "black", + shapeRendering: "crispEdges", + strokeWidth: "2", + }, + axisStyleCross: { + fill: "none", + stroke: "black", + shapeRendering: "crispEdges", + strokeWidth: ".5", + }, + textStyle: { + fontSize: "12px", + }, + textStyle1: { + fontSize: "12px", + }, + textStyle2: { + fontSize: "12px", + }, + textStyle3: { + fontSize: "12px", + }, + textStyle4: { + fontSize: "12px", + }, + textStyle5: { + fontSize: "12px", + }, + circleStyle: { + fill: "black", + }, }; return ( -
    - -

    DEV RESULT

    -

    Result line graph from data for dev usage.

    -
    +
    +
    + + {/* Y-axis */} + + + {/* Add labels */} + 1000 + + 900 + + 800 + + 700 + + 600 + + 500 + + 400 + + 300 + + 150 + + 100 + + 50 + + 25 + + 10 + + 5 + + 0 + + + {/* X-axis */} + + + {/* Add labels */} + Phase1 + Phase2 + Phase3 + Phase4 + Phase5 + + + {/* Line Graph */} + + + + + + + {/* Data Points */} + + + + + + + +
    - ) diff --git a/src/App/Footer.jsx b/src/App/Footer.jsx index 153d3f5..8aed9e5 100644 --- a/src/App/Footer.jsx +++ b/src/App/Footer.jsx @@ -22,10 +22,10 @@ return ( HOME
    - PROVIDER FORM + PROVIDER FORM
    - DEVELOPER FORM + DEVELOPER FORM
    diff --git a/src/App/ProviderForm.jsx b/src/App/ProviderFormView.jsx similarity index 100% rename from src/App/ProviderForm.jsx rename to src/App/ProviderFormView.jsx diff --git a/src/scc.jsx b/src/scc.jsx index e05b72c..43498af 100644 --- a/src/scc.jsx +++ b/src/scc.jsx @@ -13,18 +13,16 @@ const sccStyles = { }, }; -// - return (
    - I want to be a Provider of Services + I want to be a Provider of Services
    - I want to develop an app on the BOS + I want to develop an app on the BOS