refine UI

jhuleatt · jhuleatt · commit ea954595a9b1 · 2025-02-03T14:11:41.000-05:00
diff --git a/Node/quickstarts/callable-functions-streaming/website/index.html b/Node/quickstarts/callable-functions-streaming/website/index.html
@@ -5,8 +5,10 @@
     <title>title</title>
   </head>
   <body>
-    <button id="btn-call-func">Call function</button>
-    <p id="p-result"></p>
+    <h1>Many forecasts</h1>
+    <p>Click the button to get the forecast for all your favorite locations.</p>
+    <button id="btn-call-func">Get forecasts</button>
+    <div id="forecasts"></div>
     <script type="module">
       import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
       import {
@@ -16,38 +18,48 @@
       } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-functions.js";
 
       const callableButton = document.getElementById("btn-call-func");
-      const resultElement = document.getElementById("p-result");
+      const resultElement = document.getElementById("forecasts");
 
       callableButton.onclick = handleClick;
 
       // https://firebase.google.com/docs/hosting/reserved-urls#sdk_auto-configuration
-      const firebaseConfig = await fetch('/__/firebase/init.json').then(response => {
-        return response.json()
-      });
+      const firebaseConfig = await fetch("/__/firebase/init.json").then(
+        (response) => {
+          return response.json();
+        }
+      );
       const app = initializeApp(firebaseConfig);
       const functions = getFunctions(app);
       connectFunctionsEmulator(functions, "127.0.0.1", 5001);
-      
 
       const favoriteLocations = [
-            // Google HQ
-            { latitude: 37.4220199895279, longitude: -122.08531347325561 },
-            // Yosemite Valley
-            { latitude: 37.745192257741984, longitude: -119.5945133017153 },
-            // Old Faithful
-            { latitude: 44.46037818049411, longitude: -110.82802255265777 },
-          ];
+        {
+          name: "The Googleplex",
+          latitude: 37.4220199895279,
+          longitude: -122.08531347325561,
+        },
+        {
+          name: "Yosemite Valley",
+          latitude: 37.745192257741984,
+          longitude: -119.5945133017153,
+        },
+        {
+          name: "Old Faithful",
+          latitude: 44.46037818049411,
+          longitude: -110.82802255265777,
+        },
+      ];
 
       async function handleClick() {
         // reset result
-        clearUi();
+        initializeUi();
 
         // [START stream_data_client]
         // Get the callable by passing an initialized functions SDK.
         const getForecast = httpsCallable(functions, "getForecast");
 
         // Call the function with the `.stream()` method to start streaming.
-        const {stream, data} = await getForecast.stream({
+        const { stream, data } = await getForecast.stream({
           locations: favoriteLocations,
         });
 
@@ -67,20 +79,32 @@
         // [END stream_data_client]
       }
 
-      function clearUi() {
+      function initializeUi() {
         resultElement.innerHTML = "";
+        callableButton.disabled = true;
+        callableButton.innerText = "Streaming forecasts...";
+      }
+
+      function finalizeUi() {
+        callableButton.disabled = false;
+        callableButton.innerText = "Get forecasts";
       }
 
       function updateUi(forecastData) {
-        resultElement.innerHTML += '<pre>' + JSON.stringify(
-          {
-            latitude: forecastData.latitude,
-            longitude: forecastData.longitude,
-            forecast: forecastData.forecast.properties.periods[0],
-          },
-          null,
-          2
-        ); + '</pre>'
+        const newWeatherCard = document.createElement("div");
+
+        const locationName = document.createElement("h2");
+        locationName.innerHTML = favoriteLocations.find(
+          (v) => v.latitude === forecastData.latitude
+        ).name;
+
+        const forecast = document.createElement("p");
+        console.log(forecastData);
+        forecast.innerHTML =
+          forecastData.forecast.properties.periods[0].detailedForecast;
+
+        newWeatherCard.append(locationName, forecast);
+        resultElement.appendChild(newWeatherCard);
       }
     </script>
   </body>
