Add satellite image

pbaer · Dec 3, 2023 · 1e4b9e7 · 1e4b9e7
1 parent 63b2a9d
commit 1e4b9e7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/api/src/wx.mjs b/api/src/wx.mjs
@@ -18,3 +18,20 @@ export const wxDiscussion = async () => {
     let text = wxdisc.text.replace(/(?<!\n)\n(?!\n)/g, ' '); // Remove all newlines, except for those that start a new paragraph (two consecutive newlines)
     return text;
 };
+
+export const wxVis = async () => {
+    let wxvis = getCachedData('wxvis');
+    if (!wxvis) {
+        const response = await fetch('https://a.atmos.washington.edu/~ovens/wxloop.cgi?vis1km_fog+1');
+        const text = await response.text();
+        const start = 'listArray[1]="/images/vis1km_fog/';
+        const startIndex = text.indexOf(start) + start.length;
+        const end = '";';
+        const endIndex = text.indexOf(end, startIndex);
+        wxvis = {
+            url: 'https://a.atmos.washington.edu/images/vis1km_fog/' + text.substring(startIndex, endIndex)
+        }
+        putCachedData('wxvis', wxvis);
+    }
+    return wxvis.url;
+};
diff --git a/api/today/index.mjs b/api/today/index.mjs
@@ -1,5 +1,5 @@
 import { printToday } from '../src/index.mjs';
-import { wxDiscussion } from '../src/wx.mjs';
+import { wxDiscussion, wxVis } from '../src/wx.mjs';
 
 export default async function (context, req) {
     context.log('Starting execution');
@@ -10,6 +10,11 @@ export default async function (context, req) {
                 status: 200,
                 body: await wxDiscussion()
             };
+        } else if (source === 'wxvis') {
+            context.res = {
+                status: 200,
+                body: await wxVis()
+            };
         } else {
             const utcOffset = req.query && req.query.utcOffset;
             context.res = {

diff --git a/web/src/App.css b/web/src/App.css
@@ -17,11 +17,15 @@
 }
 
 .Tafs {
-  padding-left: 2vh;
-  padding-right: 2vh;
+  padding-left: 1vh;
+  padding-right: 1vh;
+}
+
+.Wx-Vis {
+  width: 100%;
 }
 
 .Wx-Disc {
-  padding-left: 2vh;
-  padding-right: 2vh;
+  padding-left: 1vh;
+  padding-right: 1vh;
 }
diff --git a/web/src/App.js b/web/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 function App() {
   const [apiResponse, setApiResponse] = useState('');
   const [wxDiscussionResponse, setWxDiscussionResponse] = useState('');
+  const [wxVisResponse, setWxVisResponse] = useState('');
 
   useEffect(() => {
     fetch('/api/today')
@@ -21,11 +22,20 @@ function App() {
       })));
   }, []);
 
+  useEffect(() => {
+    fetch('/api/today?source=wxvis')
+      .then(response => response.text())
+      .then(data => setWxVisResponse(data));
+  }, []);
+
+  const currentTimeString = new Date().toLocaleString('en-US', { hour12: false, timeZone: 'UTC', hour: '2-digit', minute: '2-digit' }).replace(':', '') + 'Z';
+
   return (
     <div className="App">
       <header className="App-header">
-        MyMinimums
+        MyMinimums {currentTimeString}
       </header>
+      <img className="Wx-Vis" src={wxVisResponse}/>
       <div className="Wx-Disc">{wxDiscussionResponse}</div>
       <pre className="Tafs">{apiResponse}</pre>
     </div>