web: Initial version

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -0,0 +1,11 @@
+import Header from "./Header/Header";
+import Parameters from "./Parameters/Parameters";
+
+function CaseBuilder() {
+    return <div>
+        <Header/>
+        <Parameters/>
+    </div>;
+}
+
+export default CaseBuilder;

web/src/components/CaseBuilder/Header/Header.module.css

@@ -0,0 +1,36 @@
+.HeaderBox {
+    background-color: var(--contrast-0);
+    border-bottom: var(--box-border);
+    box-shadow: var(--box-shadow);
+    padding: 0;
+    margin: 0;
+}
+
+.HeaderContent {
+    margin: 0 auto;
+    max-width: var(--site-max-width);
+    min-width: var(--site-min-width);
+}
+
+.HeaderContent h1, h2 {
+    color: var(--contrast-100);
+    display: inline-block;
+    line-height: 48px;
+    font-size: 28px;
+    margin: 0;
+    padding: 12px;
+}
+
+.HeaderContent h2 {
+    display: inline-block;
+    font-size: 22px;
+    color: var(--contrast-80);
+    font-weight: normal;
+}
+
+.buttonContainer {
+    float: right;
+    padding: 16px 12px;
+}
+
+

web/src/components/CaseBuilder/Header/Header.tsx

@@ -0,0 +1,21 @@
+import styles from "./Header.module.css"
+import Button from "../../Common/Buttons/Button";
+
+function Header() {
+    return (
+        <div className={styles.HeaderBox}>
+            <div className={styles.HeaderContent}>
+                <h1>UnitCommitment.jl</h1>
+                <h2>Case Builder</h2>
+                <div className={styles.buttonContainer}>
+                    <Button title="Clear"/>
+                    <Button title="Load"/>
+                    <Button title="Save"/>
+                    <Button title="Submit"/>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Header;

web/src/components/CaseBuilder/Parameters/Parameters.tsx

@@ -0,0 +1,36 @@
+import SectionHeader from "../../Common/SectionHeader/SectionHeader";
+import Form from "../../Common/Forms/Form";
+import TextInputRow from "../../Common/Forms/TextInputRow";
+
+function Parameters() {
+    return (
+        <div>
+            <SectionHeader title="Parameters" />
+            <Form>
+                <TextInputRow
+                    label="Time horizon"
+                    unit="h"
+                    tooltip="Length of the planning horizon (in hours)."
+                    currentValue="48"
+                    defaultValue="24"
+                />
+                <TextInputRow
+                    label="Time step"
+                    unit="min"
+                    tooltip="Length of each time step (in minutes). Must be a divisor of 60 (e.g. 60, 30, 20, 15, etc)."
+                    currentValue=""
+                    defaultValue="60"
+                />
+                <TextInputRow
+                    label="Power balance penalty"
+                    unit="$/MW"
+                    tooltip="Penalty for system-wide shortage or surplus in production (in /MW). This is charged per time step. For example, if there is a shortage of 1 MW for three time steps, three times this amount will be charged."
+                    currentValue=""
+                    defaultValue="1000.0"
+                />
+            </Form>
+        </div>
+    )
+}
+
+export default Parameters;