Merge pull request #1 from Van-Nice/staging

Staging
Van-Nice · Jun 27, 2024 · ca6fa04 · ca6fa04
2 parents d5f8994 + 4cf3b6f
commit ca6fa04
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 89 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode
diff --git a/index.html b/index.html
@@ -55,6 +55,6 @@ <h1 class="title-text">Wilson's Weather</h1>
       </div>
     </div>
   </div> 
-  <script src="/client/scripts/mobile.js"></script>
+
 </body>
 </html>
diff --git a/scripts/getIp.js b/scripts/getIp.js
diff --git a/scripts/script.js b/scripts/script.js
@@ -1,27 +1,37 @@
 import { updateWeather } from './weather.js';
-import { getIp } from './getIp.js';
 import { updateTime } from './timeDate.js';
-import { updateCurrent } from './updateCurrent.js';
-
+// https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/
 // This is unsecure fix at some point!!!
-const API_BASE_URL = 'https://weather-app-server-d5459d7e5648.herokuapp.com'
-
+const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com';
 async function startWeather(latitude, longitude) {
-    const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`);
-    const weatherData = await response.json()
-    console.log(weatherData);
-    return weatherData;
-}
-
-// Create get ip function
-async function getIP() {
-    return await fetch(`${API_BASE_URL}/get-ip`);
+    try {
+        const response = await fetch(`${API_BASE_URL}/start-weather-data?coords=${latitude},${longitude}`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const weatherData = await response.json();
+        console.log(weatherData);
+        return weatherData;
+    } catch (error) {
+        console.error('An error occurred:', error); // This is getting called!!!
+        throw error; // re-throw the error if you want it to propagate
+    }
 }
 
-async function ipWeather(ip) {
-    const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`);
-    const weatherData = await response.json();
-    return weatherData;
+async function ipWeather() {
+    try {
+        const response = await fetch(`${API_BASE_URL}/ip-weather-data`, {
+            credentials: 'include'
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const weatherData = await response.json();
+        return weatherData;
+    } catch (error) {
+        console.error('An error occurred:', error); // This error is getting thrown!!!
+        throw error; // re-throw the error if you want it to propagate
+    }
 }
 
 // Ask for location, if not get ip
@@ -30,29 +40,30 @@ if (navigator.geolocation) {
         async function(position) {
             const latitude = position.coords.latitude;
             const longitude = position.coords.longitude;
-            const weatherData = await startWeather(latitude, longitude);
+            const weatherData = await startWeather(latitude, longitude); // Fixed this error
+            console.log(weatherData);
             updateWeather(weatherData, 'Your Location');
             updateTime(weatherData);
         },
         async function(error) {
             // This function is called when an error occurs, such as when the user denies the location permission
             console.log("Geolocation permission denied.");
             try {
-                const ip = await getIp();
-                const weatherData = await ipWeather(ip);
+                const weatherData = await ipWeather();
+                console.log(weatherData);
                 updateWeather(weatherData, 'Your Location');
                 updateTime(weatherData);
             } catch (error) {
-                console.error('Error:', error);
+                console.error('Error:', error); // This error is getting thrown
             }
         }
     );
 } else {
     console.log("Geolocation is not supported by this browser.");
     (async () => {
         try {
-            const ip = await getIp();
-            const weatherData = await ipWeather(ip);
+            const weatherData = await ipWeather();
+            console.log(weatherData);
             updateWeather(weatherData, 'Your Location');
             updateTime(weatherData);
         } catch (error) {
@@ -85,7 +96,9 @@ searchBar.addEventListener('input', async function(event) {
 
     if (userInput.length > 2) { // Trigger autocomplete after 2 char
         try {
-            const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`);
+            const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`, {
+                credentials: 'include'
+            });
             const data = await response.json();
             dropdown.innerHTML = ''; // Clear previous suggestions
 
@@ -118,7 +131,9 @@ searchForm.addEventListener('submit', async function(event) {
         searchBar.value = '';
 
         // Send a request to the server with the user input
-        const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`);
+        const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`, {
+            credentials: 'include'
+        });
         const weatherData = await response.json();
 
         // Handle the response data here

diff --git a/scripts/updateHourly.js b/scripts/updateHourly.js
@@ -58,7 +58,6 @@ export function updateHourly(weatherData, weatherCodeToImageMap) {
         <img src="${image}" alt="Weather icon">
         <p>${kelvinToFahrenheit(forecast.temp)}°F</p>
       </div>`;
-
 
       const currentSetRiseUnix = riseSet[riseSet.length - 1];
       const currentSetRiseHour = new Date(currentSetRiseUnix * 1000)

diff --git a/scripts/updateWeekly.js b/scripts/updateWeekly.js
@@ -40,13 +40,15 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {
 
         weeklyHTML += `
             <div class="day glass-effect">
-              <div class="day-date">
-                <p>${(i===0) ? 'Today' : day}</p>
-                <p>${dayMonth}</p>
-              </div>
-              <div class="day-high-low">
-                <p>H: ${high}</p>
-                <p>L: ${low}</p>
+              <div class="day-date-col">
+                <div class="day-date">
+                  <p>${(i===0) ? 'Today' : day}</p>
+                  <p>${dayMonth}</p>
+                </div>
+                <div class="day-high-low">
+                  <p>H: ${high}</p>
+                  <p>L: ${low}</p>
+                </div>
               </div>
               <div class="day-description">
                 <img src=${image} alt="Weather icon">
@@ -57,13 +59,13 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {
                 <p>Night Avg: ${nightTemp}</p>
               </div>
               <div class="day-sun-set-rise">
-                <div class="row">
+                <div class="sunrise">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-sunrise sunrise-color shadow" viewBox="0 0 16 16">
                     <path d="M7.646 1.146a.5.5 0 0 1 .708 0l1.5 1.5a.5.5 0 0 1-.708.708L8.5 2.707V4.5a.5.5 0 0 1-1 0V2.707l-.646.647a.5.5 0 1 1-.708-.708zM2.343 4.343a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707L2.343 5.05a.5.5 0 0 1 0-.707m11.314 0a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0M8 7a3 3 0 0 1 2.599 4.5H5.4A3 3 0 0 1 8 7m3.71 4.5a4 4 0 1 0-7.418 0H.499a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-3.79zM0 10a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 0 10m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
                   </svg>
                   ${sunrise}
                 </div>
-                <div class="row">
+                <div class="sunset">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-sunset sunset-color shadow" viewBox="0 0 16 16">
                     <path d="M7.646 4.854a.5.5 0 0 0 .708 0l1.5-1.5a.5.5 0 0 0-.708-.708l-.646.647V1.5a.5.5 0 0 0-1 0v1.793l-.646-.647a.5.5 0 1 0-.708.708zm-5.303-.51a.5.5 0 0 1 .707 0l1.414 1.413a.5.5 0 0 1-.707.707L2.343 5.05a.5.5 0 0 1 0-.707zm11.314 0a.5.5 0 0 1 0 .706l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zM8 7a3 3 0 0 1 2.599 4.5H5.4A3 3 0 0 1 8 7m3.71 4.5a4 4 0 1 0-7.418 0H.499a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-3.79zM0 10a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 0 10m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
                   </svg>
@@ -73,7 +75,6 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {
 
             </div>
         `;
-
     }
     const weeklyForecastDiv = document.querySelector('.weekly-body');
     weeklyForecastDiv.innerHTML = weeklyHTML;

diff --git a/styles.css b/styles.css
@@ -10,7 +10,7 @@ body {
 /* Main section */
 .grid-main {
     display: grid;
-    grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four];
+    grid-template-columns: [one] 3vw [two] 94vw [three] 3vw [four];
     grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six];
     grid-template-areas: '. nav .'
                          '. current .'
@@ -35,7 +35,7 @@ body {
     color: #ffffff; 
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.488), 0px 2px 4px rgba(0, 0, 0, 0.427); 
     white-space: nowrap; /* Prevents the text from wrapping */
-    overflow: hidden; /* Hides the text that overflows the container */
+    overflow: hidden; 
     text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
     min-width: 100px;
 }
@@ -92,6 +92,7 @@ body {
 }
 
 #search-form {
+    grid-area: nav;
     width: 400px;
     padding-left: 25px;
 }
@@ -187,7 +188,6 @@ body {
 .hourly-body {
     display: flex;
     overflow-x: auto;
-
 }
 
 .scroll-hour {
@@ -256,12 +256,21 @@ body {
 }
 
 .day-high-low {
+    white-space: nowrap;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
     flex-shrink: 0;
     width: 50px;
 }
 
+.day-high-low p {
+    padding-top: 5px;
+    padding-right: 5px;
+    font-size: 12px;
+}
+
 .day-description {
     display: flex;
     flex-direction: column;
@@ -272,10 +281,16 @@ body {
     margin-left: -20px;
 }
 
+.day-date-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .day-sun-set-rise {
     display: flex;
     flex-direction: column;
-    flex-shrink: 0;
 }
 
 .day-night {
@@ -285,6 +300,13 @@ body {
     width: 100px;
 }
 
+.sunrise, .sunset {
+    display: flex;
+    float: row;
+    justify-content: space-around;
+    align-items: center;
+}
+
 .shadow {
     filter: drop-shadow(2px 2px 2px gray);
 }
@@ -310,73 +332,68 @@ body {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
 }
 
-
-/* Phones */
 @media (max-width: 600px) {
     .grid-main {
         grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six];
-        grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four];
+
+    }
+    .navbar-content {
+        flex-direction: column;
     }
 
-    .day-description {
-        flex-shrink: 1;
+    #search-form {
+        grid-area: nav;
+        width: 300px;
+        padding-bottom: 20px;
     }
 
-    .current, .hourly, .weekly {
-        margin-left: 10px;
-        margin-right: 10px;
+    #dropdown {
+        width: 300px;
     }
 
-    .navbar-content {
-        flex-direction: column;
-        justify-content: center;
-        padding: 20px;
+    .weekly-body {
+        flex-shrink: 1;
+        font-size: 16px;
     }
 
     .day-night {
         display: none;
     }
-    #search-form, #dropdown {
-        width: 100%;
-    }
-}
 
-/* Tablets */
-@media (max-width: 768px) {
-    .grid-main {
-        grid-template-columns: [one] 1fr [two] minmax(6fr, 80vw) [three] 1fr [four];
+    .day-date {
+        width: 50px;
+        padding-left: 10px;
     }
-    #search-form, #dropdown {
-        width: 300px;
-    }
-}
 
-/* desktops */
-@media (max-width: 992px) {
-    .grid-main {
-        grid-template-columns: [one] 1fr [two] minmax(500px, 80vw) [three] 1fr [four];
+    .day-high-low {
+        padding-left: 20px;
+        font-size: 10px;
     }
 
-    #search-form, #dropdown {
-        width: 250px;
+    .day-description {
+        width: 135px;
+        align-content: center;
+        font-size: 14px;
+        padding-left: 10px;
     }
 
-    .day-night {
-        display: none;
+    .day-sun-set-rise {
+        font-size: 12px;
+        flex-direction: column;
+        row-gap: 10px;
     }
 
-}
+    .sunrise {
+        flex-direction: column;
+    }
 
-/* desktops */
-@media (min-width: 992px) {
-    .grid-main {
-        grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four];
+    .sunset {
+        flex-direction: column;
     }
 }
 
-/* Extra large devices */
-@media (min-width: 1201px) {
+@media (min-width: 992px) {
     .grid-main {
-        grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four];
+        grid-template-columns: [one] 1fr [two] 800px [three] 1fr [four];
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,6 @@ <h1 class="title-text">Wilson's Weather</h1> @@
           </div>
         </div>
       </div>
-      <script src="/client/scripts/mobile.js"></script>
     </body>
     </html>