Gave page a conditional layout to be used later for navigation.

mbta · Nov 9, 2023 · 462bc38 · 462bc38
1 parent c4141cf
commit 462bc38
Showing 1 changed file with 68 additions and 9 deletions.
diff --git a/assets/js/components/Dashboard/PermanentConfiguration/ConfigureScreensPage.tsx b/assets/js/components/Dashboard/PermanentConfiguration/ConfigureScreensPage.tsx
@@ -1,13 +1,45 @@
-import React, { ComponentType } from "react";
+import React, { ComponentType, useState } from "react";
 import { Col, Container, Row } from "react-bootstrap";
 import Appbar from "./AppBar";
 import ButtonImage from "./ButtonImage";
 import "../../../../css/screenplay.scss";
 
 const ConfigureScreensPage: ComponentType = () => {
+  const [selectedScreenType, setSelectedScreenType] = useState<string>();
+
+  const selectScreenType = (screenType: string) =>
+    setSelectedScreenType(screenType);
+
+  console.log(selectedScreenType);
+
+  let layout;
+  switch (selectedScreenType) {
+    case "gl-eink":
+      layout = <GlEinkConfigPage />;
+      break;
+    default:
+      layout = (
+        <SelectScreenTypeComponent selectScreenType={selectScreenType} />
+      );
+  }
+
   return (
     <div className="configure-screens-page">
       <Appbar title="Configure Screens" />
+      {layout}
+    </div>
+  );
+};
+
+interface SelectScreenTypeComponentProps {
+  selectScreenType: (screenType: string) => void;
+}
+
+const SelectScreenTypeComponent: ComponentType<SelectScreenTypeComponentProps> =
+  (props: SelectScreenTypeComponentProps) => {
+    const { selectScreenType } = props;
+
+    return (
       <Container className="select-screen-type p-5">
         <Row>
           <Col>
@@ -18,29 +50,56 @@ const ConfigureScreensPage: ComponentType = () => {
         </Row>
         <Row>
           <Col>
-            <ButtonImage fileName="bus-eink.png" label="Bus E-Ink" />
+            <ButtonImage
+              fileName="bus-eink.png"
+              label="Bus E-Ink"
+              onClick={() => selectScreenType("bus-eink")}
+            />
           </Col>
           <Col>
-            <ButtonImage fileName="bus-shelter.png" label="Bus Shelter" />
+            <ButtonImage
+              fileName="bus-shelter.png"
+              label="Bus Shelter"
+              onClick={() => selectScreenType("bus-shelter")}
+            />
           </Col>
           <Col>
-            <ButtonImage fileName="gl-eink.png" label="Green Line E-Ink" />
+            <ButtonImage
+              fileName="gl-eink.png"
+              label="Green Line E-Ink"
+              onClick={() => selectScreenType("gl-eink")}
+            />
           </Col>
         </Row>
         <Row>
           <Col>
-            <ButtonImage fileName="dup.png" label="DUP" />
+            <ButtonImage
+              fileName="dup.png"
+              label="DUP"
+              onClick={() => selectScreenType("dup")}
+            />
           </Col>
           <Col>
-            <ButtonImage fileName="pre-fare.png" label="Pre Fare" />
+            <ButtonImage
+              fileName="pre-fare.png"
+              label="Pre Fare"
+              onClick={() => selectScreenType("pre-fare")}
+            />
           </Col>
           <Col>
-            <ButtonImage fileName="solari.png" label="Solari" />
+            <ButtonImage
+              fileName="solari.png"
+              label="Solari"
+              onClick={() => selectScreenType("solari")}
+            />
           </Col>
         </Row>
       </Container>
-    </div>
-  );
+    );
+  };
+
+const GlEinkConfigPage: ComponentType = () => {
+  return <div>GL-Eink</div>;
 };
 
 export default ConfigureScreensPage;