uploading for assignment 6

n-strong · Feb 13, 2024 · 73bfba1 · 73bfba1
1 parent 3a94ad0
commit 73bfba1
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 18 deletions.
diff --git a/.idea/project.iml b/.idea/project.iml
diff --git a/surf_data.py b/surf_data.py
@@ -9,15 +9,22 @@ def get_beach_data():
 
     test1 = request.json.get('beach_to_search')
     print(test1)
-    port_forecasts = pysurfline.  get_spot_forecasts(
+    port_forecasts = pysurfline.get_spot_forecasts(
         spotId=test1,
         days=2,
         intervalHours=3
     )
 
-    print(port_forecasts.name) 
+    port_forecasts = {str(port_forecasts.name): 
+                        [
+                        str(port_forecasts.sunlightTimes), str(port_forecasts.tides), 
+                        str(port_forecasts.weather),
+                        str(port_forecasts.wind)
+                        ]}
+
+    # print(port_forecasts.name) 
 
-    return jsonify(test1)
+    return jsonify(port_forecasts)
 
 if __name__ == "__main__":
     app.run(port=332, debug=True)
diff --git a/web_micro/routes.py b/web_micro/routes.py
@@ -11,20 +11,28 @@ def home():
 
 @app.route('/search_beaches', methods=['POST'])
 def search_beaches():
+    spotID_dict = {'Pacifica, California': '5842041f4e65fad6a7708976'}
+
+    beach = request.json
+
+    if beach in spotID_dict.keys():
+        spotID = spotID_dict[beach]
+
+    global response 
+
+    response = requests.post(SURF_DATA_URL, json={'beach_to_search': spotID})
+
 
-    # beach = request.json()
-    beach = '5cbf8d85e7b15800014909e8' 
-    # print('Response received: ', beach)
-    response = requests.post(SURF_DATA_URL, json={'beach_to_search': beach}, verify=False)
-    test = response.json() 
-    print(jsonify(test))
-
     return redirect('search_results')
 
 @app.route('/search_results')
 def search_results():
     return render_template('search_results.html') 
 
+@app.route('/forecast')
+def show_forecast():
+
+    return render_template('forecast.html')
 
 if __name__ == '__main__':
     app.run(port=333)  

diff --git a/web_micro/static/search_beaches.js b/web_micro/static/search_beaches.js
@@ -6,7 +6,7 @@ function sendData() {
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({'beaches to search': beach})
+        body: JSON.stringify(beach)
     })
     .then(response =>{
         if(!response.ok) {
@@ -21,4 +21,25 @@ function sendData() {
     .catch(error => {
         console.error('Error with fetch operation:', error)
     })
+}
+
+function goHome() {
+    window.location.href = '/'
+}
+
+function getForecast(){
+    fetch('/forecast')
+    .then(response => {
+        if (!response.ok){
+            throw new Error('Network response was not ok');
+        }
+        window.location.href = response.url;
+        return response.text();
+    })
+    .then(data => {
+        console.log('Forecast: ', data);
+    })
+    .catch(error =>{
+        console.error('There was a problem with the fetch operation:', error);
+    });
 }
diff --git a/web_micro/templates/forecast.html b/web_micro/templates/forecast.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Beach Search</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+    .container {
+        padding: 20px;
+    }
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .search-bar {
+        display: flex;
+        align-items: center;
+    }
+    .search-input {
+        width: 300px;
+        height: 30px;
+        padding: 5px;
+        font-size: 16px;
+    }
+    .search-button {
+        padding: 10px 20px;
+        font-size: 18px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+    }
+    .search-button:hover {
+        background-color: #0056b3;
+    }
+    .beach-list {
+        display: flex;
+        flex-direction: column;
+    }
+    .beach-item {
+        margin-bottom: 10px;
+    }
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <button onclick="goHome()" class="home_button">Surf Web</button>
+
+        <div class="search-bar">
+            <input type="text" class="search-input" placeholder="type city & state OR beach for forecast" id="search">
+            <button onclick="sendData()" class="search-button">Search</button>
+        </div>
+
+    <script type='text/javascript' language='javascript'
+    src='../static/search_beaches.js'> 
+    </script>
+
+    </div>
+    <div class="body">
+        <p>
+            {
+  "Pacifica / Linda Mar": [
+    "[SunlightTimes(midnight=Time(2024-02-12 08:00:00), ...), SunlightTimes(midnight=Time(2024-02-13 08:00:00), ...)]",
+    "[Tides(timestamp=Time(2024-02-12 08:00:00), ...), Tides(timestamp=Time(2024-02-12 08:21:15), ...)]",
+    "[Weather(timestamp=Time(2024-02-12 08:00:00), ...), Weather(timestamp=Time(2024-02-12 11:00:00), ...)]",
+    "[Wind(timestamp=Time(2024-02-12 08:00:00), ...), Wind(timestamp=Time(2024-02-12 11:00:00), ...)]"
+  ]
+}
+
+        </p>
+    </div>
+</div>
+</body>
+</html>
+
diff --git a/web_micro/templates/search_results.html b/web_micro/templates/search_results.html
@@ -52,20 +52,24 @@
 <body>
 <div class="container">
     <div class="header">
-        <a href="index.html">Surf Web</a>
+        <button onclick="goHome()" class="home_button">Surf Web</button>
+
         <div class="search-bar">
-            <input type="text" class="search-input" placeholder="type city & state OR beach for forecast">
-            <button class="search-button">Search</button>
+            <input type="text" class="search-input" placeholder="type city & state OR beach for forecast" id="search">
+            <button onclick="sendData()" class="search-button">Search</button>
         </div>
+
+    <script type='text/javascript' language='javascript'
+    src='../static/search_beaches.js'> 
+    </script>
+
     </div>
     <div class="body">
         <div class="left">
             <p>Select your beach:</p>
         </div>
         <div class="right">
-            <ul class="beach-list">
-                <!-- Beaches will be dynamically added here from backend -->
-            </ul>
+            <a href='#' onclick='getForecast(); return false;'>Pacifca</a>
         </div>
     </div>
 </div>