Merge pull request #60 from cis3296f23/ParkPlanning

Park planning

ParkPlanSequence.txt

@@ -0,0 +1,50 @@
+title Park Plan Sequence
+
+actor User
+participant HTML
+
+participant ReactComponent/JS
+participant NPSAPI ("backend")
+
+activate User
+activate HTML
+
+
+User ->HTML:HTTP Request
+User <-- HTML: HTTP Response
+HTML ->ReactComponent/JS:Loads
+activate ReactComponent/JS
+ReactComponent/JS ->ReactComponent/JS :useEffect()
+ReactComponent/JS ->NPSAPI ("backend"): asynchronous fetch() 
+activate NPSAPI ("backend")
+ReactComponent/JS <--NPSAPI ("backend"):json of parks
+deactivate NPSAPI ("backend")
+ReactComponent/JS ->ReactComponent/JS :useEffect()
+ReactComponent/JS ->NPSAPI ("backend"): asynchronous fetch() 
+activate NPSAPI ("backend")
+ReactComponent/JS <--NPSAPI ("backend"):json of activities
+deactivate NPSAPI ("backend")
+ReactComponent/JS --> HTML: Update State
+deactivate ReactComponent/JS
+
+
+
+User -> HTML : uses select tag\n to choose park
+User <-- HTML : Display Result
+
+User -> HTML : uses select tag\nto choose activities
+User <-- HTML : Display Result
+User -> HTML : uses calendar input\n to choose dates
+User <-- HTML : Display Result
+
+User -> HTML: Clicks "plan trip"\nbutton
+HTML ->ReactComponent/JS: Loads
+activate ReactComponent/JS
+ReactComponent/JS ->ReactComponent/JS :useEffect()
+ReactComponent/JS ->NPSAPI ("backend"): asynchronous fetch() 
+activate NPSAPI ("backend")
+ReactComponent/JS <--NPSAPI ("backend"):json of alerts
+deactivate NPSAPI ("backend")
+HTML <--ReactComponent/JS : Update State
+deactivate ReactComponent/JS
+User <--HTML: Display Result

exploring-national-parks/src/ParkPlan/Components/Alerts.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useEffect,useState } from 'react';   
 import FetchAlerts from '../Functions/FetchAlerts';
-
+import '../../Style/alerts.css';
 const Alerts = ({parkCode}) => {
     const [alerts, setAlerts] = useState([]);
 
@@ -29,12 +29,18 @@ const Alerts = ({parkCode}) => {
 
     // if there is no parkcode yet, this will not show up
     return (
-        <div>
+        <div className='alerts-container'>
             <h1>Alerts</h1>
             {/* if alerts is empty, div that says 0 alerts */}
-            <div>{alerts.map((alert, index) => (
-                <p key={index}>{alert.title}</p>
-            ))}</div>
+            {alerts.length === 0 ? (
+                <div className='alert'>No alerts</div>
+            ) : (
+                <div className='alert'>
+                    {alerts.map((alert, index) => (
+                        <p key={index} className='alert-title'>{alert.title}</p>
+                    ))}
+                </div>
+            )}
         </div>
     )
 }

exploring-national-parks/src/Style/alerts.css

@@ -0,0 +1,25 @@
+.alerts-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    padding: 0 1rem;
+    background: rgba(217, 160, 160, 0.90);
+    color: #333;
+    font-family: 'Roboto', sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    /* line-height: 1.5; */
+    text-align: center;
+}
+.alerts-container .alert{
+    /* put a box around it */
+    border: 1px solid #333;
+    border-radius: 5px;
+    padding: 1rem;
+    margin: 1rem;
+
+}