Refactor viewport (#26)

* Adding refactored go to location function and relating alerts
UrbanOS-Examples · Jan 6, 2022 · e8a47af · e8a47af
1 parent beccb0b
commit e8a47af
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/src/AlertPane.css b/src/AlertPane.css
@@ -1,6 +1,7 @@
 .AlertPane {
     float: right;
-    background-color: lightgray;
+    background-color: white;
+    width: 360px;
 }
 
 .AlertPaneTitle {
@@ -10,8 +11,23 @@
     font-family: 'Roboto', sans-serif;
     font-size: 24px;
     font-weight: 500;
-    height: 50px;
+    height: 70px;
     width: 360px;
     line-height: 50px;
     margin-top: -25px;
+    border: 2px solid lightgray;
+}
+
+.AlertsInAlertPane {
+    width: 360px;
+    height: 144px;
+    background-color: white;
+    border: none;
+}
+
+.AlertButton {
+    background-color: white;
+    border: none;
+    border: 2px solid lightgray;
+    overflow-y: scroll;
 }
diff --git a/src/AlertPane.tsx b/src/AlertPane.tsx
@@ -3,11 +3,19 @@ import { Alert } from './App';
 
 interface AlertPaneProps {
     alerts: Alert[];
+    goToFunc: any;
 }
 
 export function AlertPane(props: AlertPaneProps) {
     const listAlerts = props.alerts.map((alert) => (
-        <AlertCard alert={alert} key={alert.id} />
+        <button
+        key={alert.id}
+        className="AlertButton"
+        onClick={ () => props.goToFunc(alert.coordinates.latitude, alert.coordinates.longitude)}
+        >
+            <AlertCard alert={alert} key={alert.id} />
+        </button>
+
     ));
 
     const numberOfAlerts = props.alerts.length;
@@ -16,6 +24,8 @@ export function AlertPane(props: AlertPaneProps) {
                 <div className="AlertPaneTitle">
                      <pre> Alerts ({numberOfAlerts}) </pre>
                 </div>
-                {listAlerts}
+                <div className ="AlertsInAlertPane">
+                    {listAlerts}
+                </div>
             </div>;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -55,6 +55,17 @@ export default function App() {
         height: '100vh',
         zoom: 10
     })
+
+    const goToCoordinates = (latitude: number, longitude: number) => {
+        setViewport({
+          ...viewport,
+          longitude: longitude,
+          latitude: latitude,
+          width: '100vw',
+          height: '100vh',
+          zoom: 15,
+        });
+      };
     const websocketRef = useRef<ReconnectingWebSocket>();
 
     useEffect(() => {
@@ -112,17 +123,7 @@ export default function App() {
                     >
                         <button
                         className="marker-btn"
-                        onClick={e => {
-                            e.preventDefault();
-                            setViewport({
-                                ...viewport,
-                                longitude: congestionAlert.coordinates.longitude,
-                                latitude: congestionAlert.coordinates.latitude,
-                                width: '100vw',
-                                height: '100vh',
-                                zoom: 20
-                              });
-                          }}
+                        onClick={ () => goToCoordinates(congestionAlert.coordinates.latitude, congestionAlert.coordinates.longitude)}
                         >
                             <img
                                 className="AlertCard-congestionIcon"
@@ -134,7 +135,7 @@ export default function App() {
                     </Marker>
                 ))}
                 <div className="alertList">
-                    <AlertPane alerts={alerts} />
+                    <AlertPane alerts={alerts} goToFunc={goToCoordinates}/>
                 </div>
             </ReactMapGL>
         </div>