37 |
40 | )
41 | default:
42 | return (
43 |
44 |
67 | );
68 | }
69 | }
70 |
71 | export default App;
--------------------------------------------------------------------------------
/src/frontend/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders app without crashing', () => {
5 | render(
45 |
55 |
66 | QRSS Plus
11 |
12 |
13 |
16 |
17 | QRSS Plus
25 |Automatically Updating Active QRSS Grabbers List
26 |
27 | by Scott Harden (AJ4VD) and Andy (G0FTD)
28 |
29 |
61 |
62 |
69 |
70 |
105 | );
106 | }
107 |
108 | export default Config;
--------------------------------------------------------------------------------
/src/frontend/src/components/Dashboard.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 |
4 | const Dashboard = (props) => {
5 |
6 | if (!props.grabberStats || Object.keys(props.grabberStats).length === 0) {
7 | return (
71 |
76 |
77 | Resources
72 |
73 |
74 |
75 |
78 |
99 |
100 | Settings
79 |
80 |
81 |
83 |
84 |
85 | UTC Time:
82 | {timestamp}
86 |
93 |
94 | Thumbnails:
87 |
92 |
95 |
98 | Stitch:
96 | 8hr
97 |
101 |
103 |
104 | {grabberDataAgeMessage()}
102 | Loading dashboard...
);
8 | }
9 |
10 | const grabbers = props.grabberStats.grabbers;
11 |
12 | const grabberRowClass = (grabber) => {
13 | if (grabber.urls.length > 0)
14 | return ""
15 | if (grabber.lastUniqueAgeDays >= 7)
16 | return "table-danger"
17 | else return "table-warning"
18 | }
19 |
20 | const grabberAgeMessage = (grabber) => {
21 | if (grabber.lastUniqueAgeDays < 1){
22 | return "today";
23 | } else if (grabber.lastUniqueAgeDays < 999) {
24 | return grabber.lastUniqueAgeDays + " days ago";
25 | } else {
26 | return "never";
27 | }
28 | }
29 |
30 | const grabCountMessage = (grabber) =>
31 | (grabber.urls.length > 0)
32 | ? grabber.urls.length
33 | : (--);
34 |
35 | return (
36 | | ID | 40 |Name | 41 |Callsign | 42 |Location | 43 |Image | 44 |Website | 45 |Grabs | 46 |Last Upload | 47 |
|---|---|---|---|---|---|---|---|
{grabber.id} |
56 | {grabber.name} | 57 |{grabber.callsign} | 58 |{grabber.location} | 59 |image | 60 |website | 61 |{grabCountMessage(grabber)} | 62 |{grabberAgeMessage(grabber)} | 63 |
24 |
33 | )
34 | }
35 |
36 | const renderPrimaryImage = (latestUrl) => {
37 | return (
38 | {timestampFromUrl(url)} ({timestampAgeFromUrl(url)})
25 |
26 |
32 |
39 |
50 | );
51 | }
52 |
53 | const basename = (url) => {
54 | return url.substr(url.lastIndexOf('/') + 1);
55 | }
56 |
57 | const timestampFromUrl = (url) => {
58 | const parts = basename(url).split(" ")[1].split('.');
59 | const timestamp = parts[3] + ":" + parts[4];
60 | return timestamp;
61 | }
62 |
63 | const timestampAgeFromUrl = (url) => {
64 | const parts = basename(url).split(" ")[1].split('.');
65 | const urlDate = new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
66 | const urlLinuxTime = urlDate.getTime() / 1000 - urlDate.getTimezoneOffset() * 60;
67 | const nowDate = new Date();
68 | const nowLinuxTime = nowDate.getTime() / 1000;
69 | const urlAgeMin = (nowLinuxTime - urlLinuxTime) / 60;
70 | return `${Math.round(urlAgeMin)} min`;
71 | }
72 |
73 | return (
74 | {timestampFromUrl(latestUrl)} ({timestampAgeFromUrl(latestUrl)})
40 |
41 |
49 |
42 |
48 |
75 |
117 | );
118 | }
119 |
120 | export default GrabberDetails;
--------------------------------------------------------------------------------
/src/frontend/src/components/GrabberList.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import GrabberDetails from './GrabberDetails';
4 |
5 | const GrabberList = (props) => {
6 |
7 | if (!props.grabberStats || Object.keys(props.grabberStats).length === 0) {
8 | return ({grabber.id}
76 | 77 |
78 | {grabber.name} ({grabber.callsign})
79 | in {grabber.location} (website)
80 |
81 | {renderActivityIcon(grabber.lastUniqueAgeMinutes)}
82 |
83 |
84 | {
85 | renderPrimaryImage(latestUrl)
86 | }
87 |
88 | {
89 | Object.keys(grabber.urls)
90 | .map(x => grabber.urls[x])
91 | .reverse()
92 | .slice(0, maxThumbnailCount)
93 | .map(x => renderDatedThumbnail(x))
94 | }
95 |
96 | {
97 | showStitch ? (
98 |
99 | {
100 | Object.keys(grabber.urls)
101 | .map(x => grabber.urls[x])
102 | .map(url => (
103 |
113 | ) : ""
114 | }
115 |
116 |
104 |
110 | ))
111 | }
112 | Loading grabbers...
);
9 | }
10 |
11 | const grabbers = props.grabberStats.grabbers;
12 | const maxGrabberCount = props.maxGrabberCount;
13 | const thumbnailCount = props.thumbnailCount;
14 | const isStichVisible = props.isStichVisible;
15 |
16 | return (
17 | Object.keys(grabbers)
18 | .filter(id => grabbers[id].urls.length > 0)
19 | .slice(0, maxGrabberCount)
20 | .map(id =>
21 | Loading grabbers...
);
8 | }
9 |
10 | const grabbers = props.grabberStats.grabbers;
11 |
12 | const getImage = (grabber) => {
13 | const latestUrl = grabber.urls[grabber.urls.length - 1];
14 | const basename = latestUrl.substr(latestUrl.lastIndexOf('/') + 1);
15 | return (
16 |
17 |
28 | )
29 | }
30 |
31 | const activeGrabbers = Object.keys(grabbers).filter(id => grabbers[id].urls.length > 0)
32 | const totalGrabberCount = Object.keys(grabbers).length;
33 |
34 | return (
35 | <>
36 |
18 | {grabber.id}
19 |
20 |
21 |
27 | Active Grabbers ({activeGrabbers.length} of {totalGrabberCount})
37 | {
38 | Object.keys(grabbers)
39 | .filter(id => grabbers[id].urls.length > 0)
40 | .map(id => getImage(grabbers[id]))
41 | }
42 |
43 | )
44 | }
45 |
46 | export default MobileView;
--------------------------------------------------------------------------------
/src/frontend/src/components/News.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import Dashboard from './Dashboard';
3 |
4 | function News(props) {
5 |
6 | const [alertMessage, setAlertMessage] = useState();
7 | const [alertDate, setAlertDate] = useState();
8 |
9 | useEffect(() => {
10 | console.log("fetching NOAA alert message...")
11 | fetch('https://services.swpc.noaa.gov/text/wwv.txt')
12 | .then(response => response.text())
13 | .then(text => {
14 | const lines = text.split("\n");
15 |
16 | const dt = lines[1].replace(":Issued: ", "");
17 | setAlertDate(dt);
18 |
19 | const goodLines = lines.filter(x => !x.startsWith(":")).filter(x => !x.startsWith("#"));
20 | const goodMessage = goodLines.join("\n");
21 | setAlertMessage(goodMessage);
22 | });
23 | }, []);
24 |
25 | return (
26 |
27 |
28 |
29 |
38 |
39 |
48 |
49 |
58 |
59 |
68 |
69 |
73 | Mobile View
74 |
75 |
76 |
77 |
78 |
79 |
136 |
137 |
138 | )
139 | }
140 |
141 | export default News;
--------------------------------------------------------------------------------
/src/frontend/src/components/Thumbnails.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 |
4 | const Thumbnails = (props) => {
5 |
6 | if (!props.grabberStats || Object.keys(props.grabberStats).length === 0) {
7 | return (
80 |
89 |
90 |
81 |
88 |
82 | Geophysical Alert Message ({alertDate})
83 |
84 |
85 |
87 | {alertMessage}
91 |
113 |
114 |
92 |
112 |
93 | NOAA Aurora Forecast
94 |
95 |
96 |
111 |
97 |
99 | 
101 |
102 |
103 |
101 |
102 |
104 |
106 | 
108 |
109 |
110 |
108 |
109 |
115 |
125 |
126 |
116 | 
122 |
123 |
124 |
117 | Sunlit Map with MUF Data
118 |
119 |
120 |
127 |
134 |
135 |
128 |
133 |
129 | Grabber Dashboard
130 |
131 | Loading thumbnails...
);
8 | }
9 |
10 | const grabbers = props.grabberStats.grabbers;
11 |
12 | const getThumbnail = (grabber) => {
13 | return (
14 |
15 |
27 | );
28 | }
29 |
30 | const activeGrabbers = Object.keys(grabbers).filter(id => grabbers[id].urls.length > 0);
31 |
32 | return (
33 | {grabber.id}
16 |
17 |
18 | 
24 |
25 |
26 |
34 |
37 | );
38 | }
39 |
40 | export default Thumbnails;
--------------------------------------------------------------------------------
/src/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
5 |
6 | ReactDOM.render(
7 |