Skip to content
Snippets Groups Projects
Commit a6d239fc authored by Humaid Mustajab's avatar Humaid Mustajab
Browse files

front-end commit?

parent e083ef32
Branches
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 14930 additions and 0 deletions
.DS_Store
+ 0
− 0
View file @ a6d239fc
No preview for this file type
front-end/.gitignore 0 → 100644
+ 23
− 0
View file @ a6d239fc
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
front-end/README.md 0 → 100644
+ 68
− 0
View file @ a6d239fc
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `npm run build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
front-end/package-lock.json 0 → 100644
+ 13678
− 0
View file @ a6d239fc
This diff is collapsed.
front-end/package.json 0 → 100644
+ 35
− 0
View file @ a6d239fc
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"proxy": "http://127.0.0.1:5000",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "PORT=4000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
front-end/public/data.json 0 → 100644
+ 17
− 0
View file @ a6d239fc
{
"groups": ["test1","test2","test5","test10","2020.06.13","2020.06.04","2020.05.24","2020.04.22","2020.03.18","2020.02.17","2020.01.29","2020.01.07","2019.11.11","all"],
"test1" : [45730],
"test2" : [45730,45731],
"test5" : [45730,45731,45732,45733,45734],
"test10" : [45730,45731,45732,45733,45734,45735,45736,45737,45738,45739],
"2020.06.13" : [45730,45731,45732,45733,45734,45735,45736,45737,45738,45739,45740,45741,45742,45743,45744,45745,45746,45747,45748,45749,45750,45751,45752,45753,45754,45755,45756,45757,45758,45759,45760,45761,45762,45763,45764,45765,45766,45767,45768,45769,45770,45771,45772,45773,45774,45775,45776,45777,45778,45779,45780,45781,45782,45783,45784,45785,45786,45787],
"2020.06.04" : [45658,45659,45660,45661,45662,45663,45664,45665,45666,45667,45668,45669,45670,45671,45672,45673,45674,45675,45676,45677,45678,45679,45680,45681,45682,45683,45684,45685,45686,45687,45688,45689,45690,45691,45692,45693,45694,45695,45696,45697,45698,45699,45700,45701,45702,45703,45704,45705,45706,45707,45708,45709,45710,45711,45712,45713,45714,45715,45716],
"2020.05.24" : [44235,44237,44238,44239,44240,44241,44242,44243,44244,44245,44247,44248,44249,44250,44251,44252,44253,44254,44255,44256,44257,44258,44259,44260,44261,44262,44263,44264,44265,44266,44267,44268,44269,44270,44271,44272,44273,44274,44275,44276,44279,44280,44281,44282,44283,44284,44285,44286,44287,44288,44289,44290,44291,44292,44293,44294],
"2020.04.22" : [45540,45541,45542,45543,45544,45545,45546,45547,45548,45549,45550,45551,45552,45553,45554,45555,45556,45557,45558,45559,45560,45561,45562,45563,45564,45565,45566,45567,45568,45569,45570,45571,45572,45573,45574,45575,45576,45577,45578,45579,45580,45581,45582,45583,45584,45585,45586,45587,45588,45589,45590],
"2020.03.18" : [45360,45361,45362,45363,45364,45365,45366,45367,45368,45369,45370,45371,45372,45373,45374,45375,45376,45377,45378,45379,45380,45381,45382,45383,45384,45385,45386,45387,45388,45389,45390,45391,45392,45393,45394,45395,45396,45397,45398,45399,45400,45401,45402,45403,45404,45405,45406,45407,45408,45409,45410,45411,45412,45413,45414,45415,45416,45417,45418,45419],
"2020.02.17" : [45178,45179,45180,45181,45182,45183,45184,45185,45186,45187,45188,45189,45190,45191,45192,45193,45194,45195,45196,45197,45198,45199,45200,45201,45202,45203,45204,45205,45206,45207,45208,45209,45210,45212,45213,45214,45215,45216,45217,45218,45219,45220,45221,45222,45223,45224,45225,45226,45227,45228,45229,45230,45231,45232,45233,45234,45235,45236,45237],
"2020.01.29" : [45044,45045,45046,45047,45048,45049,45050,45051,45052,45053,45054,45055,45056,45057,45058,45059,45060,45061,45062,45063,45064,45065,45066,45067,45068,45069,45070,45071,45072,45073,45074,45075,45076,45077,45078,45079,45080,45081,45082,45083,45084,45085,45086,45087,45088,45089,45090,45091,45092,45093,45094,45095,45096,45097,45098,45099,45100,45101,45102,45103],
"2020.01.07" : [44914,44915,44916,44917,44918,44919,44920,44921,44922,44923,44924,44925,44926,44927,44928,44929,44930,44931,44932,44933,44934,44935,44936,44937,44938,44939,44940,44941,44942,44943,44944,44945,44946,44947,44949,44950,44951,44952,44953,44954,44955,44956,44957,44958,44959,44960,44961,44962,44963,44964,44966,44967,44968,44969,44970,44971,44972,44973],
"2019.11.11" : [44713,44714,44715,44716,44717,44718,44719,44720,44721,44722,44723,44724,44725,44726,44727,44728,44729,44730,44731,44732,44733,44734,44735,44736,44737,44738,44739,44740,44741,44742,44743,44744,44745,44746,44747,44748,44749,44750,44751,44752,44753,44754,44755,44756,44757,44758,44759,44760,44761,44762,44763,44764,44765,44766,44767,44768,44769,44770,44771,44772],
"all" : [45730,45731,45732,45733,45734,45735,45736,45737,45738,45739,45740,45741,45742,45743,45744,45745,45746,45747,45748,45749,45750,45751,45752,45753,45754,45755,45756,45757,45758,45759,45760,45761,45762,45763,45764,45765,45766,45767,45768,45769,45770,45771,45772,45773,45774,45775,45776,45777,45778,45779,45780,45781,45782,45783,45784,45785,45786,45787,45658,45659,45660,45661,45662,45663,45664,45665,45666,45667,45668,45669,45670,45671,45672,45673,45674,45675,45676,45677,45678,45679,45680,45681,45682,45683,45684,45685,45686,45687,45688,45689,45690,45691,45692,45693,45694,45695,45696,45697,45698,45699,45700,45701,45702,45703,45704,45705,45706,45707,45708,45709,45710,45711,45712,45713,45714,45715,45716,44235,44237,44238,44239,44240,44241,44242,44243,44244,44245,44247,44248,44249,44250,44251,44252,44253,44254,44255,44256,44257,44258,44259,44260,44261,44262,44263,44264,44265,44266,44267,44268,44269,44270,44271,44272,44273,44274,44275,44276,44279,44280,44281,44282,44283,44284,44285,44286,44287,44288,44289,44290,44291,44292,44293,44294,45540,45541,45542,45543,45544,45545,45546,45547,45548,45549,45550,45551,45552,45553,45554,45555,45556,45557,45558,45559,45560,45561,45562,45563,45564,45565,45566,45567,45568,45569,45570,45571,45572,45573,45574,45575,45576,45577,45578,45579,45580,45581,45582,45583,45584,45585,45586,45587,45588,45589,45590]
}
\ No newline at end of file
front-end/public/favicon.ico 0 → 100644
+ 0
− 0
View file @ a6d239fc
front-end/public/favicon.ico

3.08 KiB

front-end/public/index.html 0 → 100644
+ 44
− 0
View file @ a6d239fc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Starlink Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="main">
<div id="primaryButtonDiv">
<button id="method1">Track satellties in Space</button>
<button id="method2">Satellite tracking data</button>
</div>
<div id="textBoxDiv"></div>
<div id="mainDiv"></div>
<div id="root"></div>
<div id="mapDiv"></div>
</div>
<script type="text/javascript" src="tablesFunctions.js"></script>
<script type="text/javascript" src="tables.js"></script>
</body>
</html>
front-end/public/logo192.png 0 → 100644
+ 0
− 0
View file @ a6d239fc
front-end/public/logo192.png

5.22 KiB

front-end/public/logo512.png 0 → 100644
+ 0
− 0
View file @ a6d239fc
front-end/public/logo512.png

9.44 KiB

front-end/public/manifest.json 0 → 100644
+ 25
− 0
View file @ a6d239fc
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
front-end/public/maps.html 0 → 100644
+ 23
− 0
View file @ a6d239fc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.16/"></script>
<script src="maps.js"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
front-end/public/maps.js 0 → 100644
+ 154
− 0
View file @ a6d239fc
// documentation: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html
// documentation MapView 2D: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
// documentation SceneView 3D: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html
let satTrackData;
function getTrackData() {
fetch("/mapData/satrec")
.then((response) => response.json())
.then((data) => {
satTrackData = data;
})
}
// getTrackData();
fetch("/mapData")
.then((response) => response.json())
.then((data) => {
let satellites = data.sat;
let satLength = satellites.length;
let satNames = [];
function getSatLoc(i) {
return {
type: "point",
x: satellites[i].x,
y: satellites[i].y,
z: satellites[i].z
};
}
for (let sat = 0; sat < satLength; sat++) {
satNames.push(satellites[sat].satName);
}
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], function (Map, SceneView, GraphicsLayer, Graphic) {
var map = new Map({
basemap: "satellite",
ground: "world-elevation" // show elevation
});
var view = new SceneView({
container: "viewDiv",
map: map,
constraints: {
altitude: {
max: 12000000000
}
},
popup: {
dockEnabled: true,
dockOptions: {
breakpoint: false
}
}
});
// getTrackData();
// Popup event
view.popup.watch("selectedFeature", function() {
satelliteTrackLayer.removeAll();
})
// Popup track event
view.popup.on("trigger-action", function(event) {
getTrackData();
if (event.action.id === "showTrack") {
let features = [];
let loc = satTrackData;
let locSatNames = Object.keys(loc);
let locCounter = 0;
for (sat of satNames) {
// console.log("Sat: " + sat)
// console.log("locSatNames: " + locSatNames[locCounter])
if (sat === locSatNames[locCounter]) {
for (let i = 0; i < 350; i++) { // Max orbit 24 * 55
features.push([loc[sat][i].x, loc[sat][i].y, loc[sat][i].z]);
let track = new Graphic({
geometry: {
type: "polyline",
paths: [features]
},
symbol: {
type: "line-3d",
symbolLayers: [{
type: "line",
material: {
color: [192, 192, 192, 0.5]
},
size: 3
}]
}
})
satelliteTrackLayer.add(track);
}
break;
}
else {
locCounter += 1;
}
}
}
})
// Make and add layers to base map
let satelliteLayer = new GraphicsLayer();
let satelliteTrackLayer = new GraphicsLayer();
map.addMany([satelliteLayer, satelliteTrackLayer]);
for (let i = 0; i < satLength; i++) {
let satLoc = getSatLoc(i);
let satName = satellites[i].satName;
let satId = satellites[i].id;
let template = {
title: satName,
content: "Satellite Id: " + satId,
actions: [{
title: "Track Satellite Path",
id: "showTrack"
}]
}
let satGraphic = new Graphic({
geometry: satLoc,
symbol: {
type: "picture-marker",
url:
"/sat.png",
width: 45,
height: 45
},
popupTemplate: template
});
satelliteLayer.add(satGraphic);
};
});
});
\ No newline at end of file
front-end/public/method2-react.js 0 → 100644
+ 6
− 0
View file @ a6d239fc
method2.addEventListener("click", function () {
toggleSideBar()
document.getElementById("root").style.display = "inline"
});
\ No newline at end of file
front-end/public/robots.txt 0 → 100644
+ 3
− 0
View file @ a6d239fc
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
front-end/public/sat.png 0 → 100644
+ 0
− 0
View file @ a6d239fc
front-end/public/sat.png

2.64 KiB

front-end/public/stylesheet.css 0 → 100644
+ 131
− 0
View file @ a6d239fc
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
border-collapse: collapse;
margin: 5px;
}
th {
border: 1px solid black;
padding: 5px 10px 5px 10px;
text-align: center;
}
td {
border: 1px solid black;
padding: 5px 15px 5px 15px;
text-align: center;
}
div {
margin: 5px;
}
button {
margin: 20px 12px 20px 12px;
}
#root {
display: none;
}
#orbitTrackCell {
padding: 4px;
}
#orbitTrackRange {
margin: 0px 5px 0px 5px;
width: 70px;
}
#orbitTrackRangeDiv {
display: inline;
}
#orbitTrackButton {
margin: 0px;
}
#placeholderCellTH {
border: none;
}
#root {
margin: 0px;
}
#method1 {
float: right;
}
#method1 {
float: right;
}
/*Sidebar CSS Implementation*/
#primaryButtonDiv {
display: flex;
flex-wrap: wrap;
align-items: center;
/* justify-content: center; */
}
#sideBarDiv * {
margin: 0px;
padding: 0px;
}
#sideBarDiv {
top: 0;
height: 100%;
position: fixed;
width: 200px;
left:-205px;
background: #151515;
transition: all 200ms linear;
}
#sideBarDiv.active {
left:-5px;
}
#sideBarToggleDiv {
display: inline-flex;
flex-direction: column;
text-align: center;
padding: 6px;
background: rgba(21, 21, 21, 0.1);
float: left;
}
#sideBarToggleDiv:hover {
color: rgba(255, 255, 255, 1);
box-shadow: 0 5px 5px rgba(21, 21, 21, .5);
}
#sideBarToggleSpan {
display: inline-block;
width: 18px;
height: 3px;
background: #151515;
margin: 1px;
}
#sideBarDiv ul {
height: 100%;
overflow-y: auto;
}
#sideBarDiv ul li {
color: rgba(250, 235, 215, 0.8);
list-style: none;
padding: 8px 5px;
border-left: 1px solid rgba(150, 150, 150, 0.2);
border-bottom: 1px solid rgba(150, 150, 150, 0.2);
}
#sideBarDiv ul li:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(250, 235, 215, 0.2);
}
#sideBarDiv ul li:active {
background-color: rgba(250, 235, 215, 0.6);
}
ul[id*="dropdown"] {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 500ms ease;
}
ul[id*="dropdown"].active {
opacity: 1;
max-height: 600px;
}
#main {
/* margin-left: 50px; */
transition: all 200ms linear;
}
#main.active {
margin-left: 200px;
}
\ No newline at end of file
front-end/public/tables.js 0 → 100644
+ 380
− 0
View file @ a6d239fc
let data = "";
let noradIdList = {}
let launchList = [];
let satJson = {};
// console.log(launchList);
console.log(noradIdList);
fetch('/serverRefresh');
document.body.style.backgroundImage = 'url("https://i.pinimg.com/originals/c2/bd/63/c2bd637e12918331fdca95759fe38cfe.gif")';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundRepeat = 'no-repeat';
let method1 = document.getElementById("method1");
method1.addEventListener("click", function () {
fetch('/serverRefresh');
loadJsonMain()
// console.log(noradIdList);
let main = document.getElementById("main");
if (document.getElementById("sideBarDiv")) {
main.parentNode.removeChild("sideBarDiv");
}
if (document.getElementById("root").style.display !== "none") {
document.getElementById("root").style.display ="none"
}
addSideBar();
toggleSideBar()
let mainDiv = document.getElementById("mainDiv");
while (mainDiv.childElementCount !== 0) {
mainDiv.removeChild(mainDiv.lastChild);
}
let textBoxDiv = document.getElementById("textBoxDiv");
while (textBoxDiv.childElementCount !== 0) {
textBoxDiv.removeChild(textBoxDiv.lastChild);
}
let mapDiv = document.getElementById("mapDiv");
while (mapDiv.childElementCount !== 0) {
mapDiv.removeChild(mapDiv.lastChild);
}
let newFrame = document.createElement("iframe");
newFrame.id = "iframe";
newFrame.width="100%";
newFrame.height="1000";
newFrame.frameBorder="0";
newFrame.scrolling="no";
newFrame.marginheight="0";
newFrame.marginwidth="0";
newFrame.src="maps.html";
mapDiv.appendChild(newFrame);
// drop-down code
let groupSelectDropDownMain = document.createElement("div");
groupSelectDropDownMain.id = "groupSelectDropDown";
let groupSelectDropDownLabel = document.createElement("label");
groupSelectDropDownLabel.textContent = "Launch Group: ";
let groupSelectDropDownSelect = document.createElement("select");
groupSelectDropDownSelect.id = "launchGroupSelect";
groupSelectDropDownSelect.name = "Launch Group";
groupSelectDropDownSelect.options[groupSelectDropDownSelect.options.length] = new Option("Please select a launch date");
for(index in launchList) {
groupSelectDropDownSelect.options[groupSelectDropDownSelect.options.length] = new Option(launchList[index], launchList[index]);
};
// drop-down code end
groupSelectDropDownMain.appendChild(groupSelectDropDownLabel);
groupSelectDropDownMain.appendChild(groupSelectDropDownSelect);
mainDiv.appendChild(groupSelectDropDownMain);
groupSelectDropDownSelect.addEventListener("change", function () {
// let groupSelectDropDownSelect = getElementById("groupSelectDropDownSelect");
// let satTable = getElementById("satTable");
while (textBoxDiv.childElementCount !== 0) {
textBoxDiv.removeChild(textBoxDiv.lastChild);
}
let launchgroup = groupSelectDropDownSelect.value;
// let satCountMsg = document.createElement("div")
// textBoxDiv.appendChild(satCountMsg);
// satCountMsg.id = "satCountMsg"
fetch(
"/satdata/tle?" + new URLSearchParams({
launchgroup: launchgroup
})
)
.then((response) => response.json())
.then((data) => {
// console.log(data); // Outputs satJson to browser console
if (data.sat) {
let numSats = Object.keys(data.sat).length;
for (var i = 0; i < numSats; i++) {
// satCountMsg.textContent = '# of satellites tracked: ' + Object.keys(data.sat).length;
satJson = data;
while (mapDiv.childElementCount !== 0) {
mapDiv.removeChild(mapDiv.lastChild);
}
let newFrame = document.createElement("iframe");
newFrame.id = "iframe";
newFrame.width="100%";
newFrame.height="1000";
newFrame.frameBorder="0";
newFrame.scrolling="no";
newFrame.marginheight="0";
newFrame.marginwidth="0";
newFrame.src="maps.html";
mapDiv.appendChild(newFrame);
}
} else {
textMsg.textContent = "Error!"
};
})
})
});
/*
let method2 = document.getElementById("method2");
method2.addEventListener("click", function () {
toggleSideBar()
document.getElementById("root").style.display = "inline"
// let main = document.getElementById("main");
// if (document.getElementById("sideBarDiv")) {
// main.parentNode.removeChild("sideBarDiv");
// }
let mainDiv = document.getElementById("mainDiv");
while (mainDiv.childElementCount !== 0) {
mainDiv.removeChild(mainDiv.lastChild);
}
let textBoxDiv = document.getElementById("textBoxDiv");
while (textBoxDiv.childElementCount !== 0) {
textBoxDiv.removeChild(textBoxDiv.lastChild);
}
let mapDiv = document.getElementById("mapDiv");
while (mapDiv.childElementCount !== 0) {
mapDiv.removeChild(mapDiv.lastChild);
}
});
*/
method2.addEventListener("click", function () {
toggleSideBar()
let main = document.getElementById("main");
if (document.getElementById("sideBarDiv")) {
main.removeChild(document.getElementById("sideBarDiv"));
}
fetch('/serverRefresh');
let mainDiv = document.getElementById("mainDiv");
while (mainDiv.childElementCount !== 0) {
mainDiv.removeChild(mainDiv.lastChild);
}
let textBoxDiv = document.getElementById("textBoxDiv");
while (textBoxDiv.childElementCount !== 0) {
textBoxDiv.removeChild(textBoxDiv.lastChild);
}
let mapDiv = document.getElementById("mapDiv");
while (mapDiv.childElementCount !== 0) {
mapDiv.removeChild(mapDiv.lastChild);
}
let satCountMsg = document.createElement("div")
satCountMsg.id = "satCountMsg"
textBoxDiv.appendChild(satCountMsg);
let userLong = 0;
let userLat = 0;
let userAlt = 0;
let orbitTime = 0;
loadJsonMain()
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
userLat = position.coords.latitude;
userLong = position.coords.longitude;
// satCountMsg.innerHTML = "Latitude: " + userLat.toFixed(3) + "<br>Longitude: " + userLong.toFixed(3);
});
} else {
textMsg.textContent = "Geolocation is not supported by this browser.";
}
// drop-down code
let groupSelectDropDownMain = document.createElement("div");
groupSelectDropDownMain.id = "groupSelectDropDown";
let groupSelectDropDownLabel = document.createElement("label");
groupSelectDropDownLabel.textContent = "Launch Group: ";
let groupSelectDropDownSelect = document.createElement("select");
groupSelectDropDownSelect.id = "launchGroupSelect";
groupSelectDropDownSelect.name = "Launch Group";
groupSelectDropDownSelect.options[groupSelectDropDownSelect.options.length] = new Option("Please select a launch date");
for(index in launchList) {
groupSelectDropDownSelect.options[groupSelectDropDownSelect.options.length] = new Option(launchList[index], launchList[index]);
};
// drop-down code end
// let tleTrackButton = document.createElement("button");
// tleTrackButton.id = "tleTrackButton";
// tleTrackButton.textContent = "Track by launch group"
let satTable = document.createElement("table");
satTable.id = "satTable";
// satTable.style.display = "none";
groupSelectDropDownMain.appendChild(groupSelectDropDownLabel);
groupSelectDropDownMain.appendChild(groupSelectDropDownSelect);
let toggleTableButton = document.createElement("button");
toggleTableButton.id = "toggleTableButton";
toggleTableButton.textContent = "Hide data table"
toggleTableButton.addEventListener("click", function () {
if (toggleTableButton.textContent == "Hide data table") {
satTable.style.display = "none";
toggleTableButton.textContent = "Show data table";
} else if (toggleTableButton.textContent == "Show data table") {
satTable.style.display = "block";
toggleTableButton.textContent = "Hide data table"
}
})
secondaryButtonDiv = document.createElement("div");
secondaryButtonDiv.id = "secondaryButtonDiv";
// secondaryButtonDiv.appendChild(tleTrackButton)
mainDiv.appendChild(groupSelectDropDownMain);
mainDiv.appendChild(secondaryButtonDiv);
mainDiv.appendChild(satTable);
groupSelectDropDownSelect.addEventListener("change", function () {
while (textBoxDiv.childElementCount !== 0) {
textBoxDiv.removeChild(textBoxDiv.lastChild);
}
let launchgroup = groupSelectDropDownSelect.value;
while((satTable).childElementCount !== 0){
satTable.removeChild(satTable.lastChild);
}
fetch(
"/satdata/tle?" + new URLSearchParams({
launchgroup: launchgroup,
userLat : userLat,
userLong : userLong,
userAlt : userAlt
})
)
.then((response) => response.json())
.then((data) => {
// console.log(data); // Outputs satJson to browser console
if (data.sat) {
secondaryButtonDiv.appendChild(toggleTableButton);
let numSats = Object.keys(data.sat).length;
let headerRow = document.createElement("tr");
let first = document.createElement("th");
let second = document.createElement("th");
let third = document.createElement("th");
let fourth = document.createElement("th");
let fifth = document.createElement("th");
let sixth = document.createElement("th");
let seventh = document.createElement("th");
let eigth = document.createElement("th");
let ninth = document.createElement("th");
first.textContent = "NORAD Id";
second.textContent = "Sat Name";
third.textContent = "Postion (x)";
fourth.textContent = "Postion (y)";
fifth.textContent = "Postion (z)";
sixth.textContent = "Velocity (x)";
seventh.textContent = "Velocity (y)";
eigth.textContent = "Velocity (z)";
ninth.textContent = "Orbit tracking"
headerRow.append(first, second, third, fourth, fifth, sixth, seventh, eigth, ninth);
satTable.append(headerRow);
for (var i = 0; i < numSats; i++) {
let row = document.createElement("tr");
let noradIdCell = document.createElement("td");
let satNameCell = document.createElement("td");
let positionXCell = document.createElement("td");
let positionYCell = document.createElement("td");
let positionZCell = document.createElement("td");
let velocityXCell = document.createElement("td");
let velocityYCell = document.createElement("td");
let velocityZCell = document.createElement("td");
let orbitTrackCell = document.createElement("td");
noradIdCell.textContent = data.sat[i].id;
row.id = data.sat[i].id;
satNameCell.textContent = data.sat[i].satName;
positionXCell.textContent = data.sat[i].tableData.position.x.toFixed(3);
positionYCell.textContent = data.sat[i].tableData.position.y.toFixed(3);
positionZCell.textContent = data.sat[i].tableData.position.z.toFixed(3);
velocityXCell.textContent = data.sat[i].tableData.velocity.x.toFixed(3);
velocityYCell.textContent = data.sat[i].tableData.velocity.y.toFixed(3);
velocityZCell.textContent = data.sat[i].tableData.velocity.z.toFixed(3);
let orbitTrackButton = document.createElement("button");
orbitTrackButton.id = "orbitTrackButton";
orbitTrackButton.textContent = "Track Satellite Orbit"
orbitTrackButton.addEventListener("click", function() {
orbitTrackButtonFunc(noradIdCell.textContent, userLat, userLong, userAlt, parseInt(orbitTrackRangeValueChanger()));
})
let orbitTrackCellDiv = document.createElement("span");
orbitTrackCell.id = "orbitTrackRangeDiv";
let orbitTrackRange = document.createElement("input");
orbitTrackRange.id = "orbitTrackRange";
orbitTrackRange.min = "1";
orbitTrackRange.max = "300";
orbitTrackRange.placeholder = "1-300 (def: 1)"
orbitTrackRange.maxlength = "4"
orbitTrackCellDiv.appendChild(orbitTrackRange);
orbitTrackCell.id = "orbitTrackCell";
orbitTrackCell.appendChild(orbitTrackCellDiv);
orbitTrackCell.appendChild(orbitTrackButton);
row.append(noradIdCell, satNameCell, positionXCell, positionYCell, positionZCell, velocityXCell, velocityYCell, velocityZCell, orbitTrackCell);
satTable.append(row);
// textMsg.textContent = data.sat[i].transactionCount; // uncomment line25 first
satCountMsg.textContent = '# of satellites tracked: ' + Object.keys(data.sat).length;
}
} else {
while((satTable).childElementCount !== 0){
satTable.removeChild(satTable.lastChild);
}
textMsg.textContent = "Error!"
};
})
.catch(error => {
console.error('Error:', error);
});
})
});
front-end/public/tablesFunctions.js 0 → 100644
+ 268
− 0
View file @ a6d239fc
function orbitTrackButtonFunc(noradId, lat, longt, altd, orbtTm) {
let satTable = document.getElementById("satTable");
// while (satTable.childElementCount !== 0) {
// satTable.removeChild(satTable.lastChild);
// }
fetch(
"/satdata/pos?" + new URLSearchParams({
noradId: noradId,
userLat : lat,
userLong : longt,
userAlt : altd,
orbitTime : orbtTm
})
)
.then((response) => response.json())
.then((data) => {
// console.log(data)
let spacerRow = document.createElement("tr");
spacerRow.id = `${noradId}1`;
let spacerRowTh = document.createElement("td");
spacerRowTh.id = "spacerRowTh";
spacerRowTh.style.columnSpan = "all";
spacerRowTh.style.textContent = "";
spacerRowTh.style.border = "none"
spacerRow.append(spacerRowTh);
let nextId = `${parseInt(noradId)+1}`;
satTable.insertBefore(
spacerRow.cloneNode(true),
document.getElementById(nextId)
)
let titleRow = document.createElement("tr");
let titleRowTh = document.createElement("td");
let placeholderCellTh = document.createElement("td");
titleRow.id = `${noradId}2`;
titleRowTh.id = "titleRowTh";
placeholderCellTh.id = "placeholderCellTh";
placeholderCellTh.textContent = "";
placeholderCellTh.style.border = "none"
titleRowTh.textContent = "Orbit Tracking"
titleRowTh.style.columnSpan = "5";
titleRowTh.style.border = "none";
titleRow.append(placeholderCellTh.cloneNode(true), placeholderCellTh.cloneNode(true), placeholderCellTh.cloneNode(true), titleRowTh, placeholderCellTh.cloneNode(true));
satTable.insertBefore(
titleRow,
document.getElementById(nextId)
)
let headerRow = document.createElement("tr");
headerRow.id = `${noradId}3`;
let first = document.createElement("th");
let second = document.createElement("th");
let third = document.createElement("th");
let fourth = document.createElement("th");
let fifth = document.createElement("th");
let sixth = document.createElement("th");
first.style.border = "1px dashed black";
second.style.border = "1px dashed black";
third.style.border = "1px dashed black";
fourth.style.border = "1px dashed black";
fifth.style.border = "1px dashed black";
first.textContent = "Time Stamp";
second.textContent = "Latitude";
third.textContent = "Longitude";
fourth.textContent = "Altitude";
fifth.textContent = "Elevation";
let orbitTrackResetButton = document.createElement("button");
orbitTrackResetButton.id = "orbitTrackResetButton";
orbitTrackResetButton.style.margin = "0px";
orbitTrackResetButton.textContent = "Reset Orbit Tracker"
orbitTrackResetButton.addEventListener("click", function () {
for (let orbitRowResetCounter = 1; orbitRowResetCounter <= (parseInt(orbtTm) + 4); orbitRowResetCounter++) {
satTable.removeChild(document.getElementById(`${noradId}${orbitRowResetCounter}`))
// document.getElementById("orbitTrackRange").value = null;
}
})
sixth.id = "sixth";
sixth.style.border = "none";
sixth.append(orbitTrackResetButton);
headerRow.append(placeholderCellTh.cloneNode(true), placeholderCellTh.cloneNode(true), placeholderCellTh.cloneNode(true), first, second, third, fourth, fifth, sixth);
satTable.insertBefore(
headerRow,
document.getElementById(nextId)
)
for (let orbitRowCounter = 0; orbitRowCounter < orbtTm; orbitRowCounter++) {
let row = document.createElement("tr");
let orbitTrackIdCell = document.createElement("td");
let satNameCell = document.createElement("td");
let timeStampCell = document.createElement("td");
let satlatitude = document.createElement("td");
let satlongitude = document.createElement("td");
let sataltitude = document.createElement("td");
let azimuth = document.createElement("td");
let elevation = document.createElement("td");
let ra = document.createElement("td");
let dec = document.createElement("td");
let placeholderCell = document.createElement("td");
placeholderCell.style.border = "none"
timeStampCell.style.border = "1px dashed black";
satlatitude.style.border = "1px dashed black";
satlongitude.style.border = "1px dashed black";
sataltitude.style.border = "1px dashed black";
elevation.style.border = "1px dashed black";
let date = new Date(data[orbitRowCounter]["timestamp"] * 1000);
let hours = date.getHours();
let minutes = "0" + date.getMinutes();
let seconds = "0" + date.getSeconds();
let formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
timeStampCell.textContent = formattedTime;
satlatitude.textContent = data[orbitRowCounter]["satlatitude"].toFixed(2);
satlongitude.textContent = data[orbitRowCounter]["satlongitude"].toFixed(2);
sataltitude.textContent = data[orbitRowCounter]["sataltitude"].toFixed(2);
elevation.textContent = data[orbitRowCounter]["elevation"].toFixed(2);
row.append(placeholderCell.cloneNode(true), placeholderCell.cloneNode(true), placeholderCell.cloneNode(true), timeStampCell, satlatitude, satlongitude, sataltitude, elevation, placeholderCell.cloneNode(true))
row.id = (`${data[orbitRowCounter]["orbitTrackId"]}${4 + orbitRowCounter}`);
satTable.insertBefore(
row,
document.getElementById(nextId)
)
}
spacerRow.id = `${noradId}${orbtTm + 4}`;
satTable.insertBefore(
spacerRow.cloneNode(true),
document.getElementById(nextId)
)
document.getElementById("orbitTrackRange").value = null;
})
.catch(error => {
console.error('Error:', error);
});
}
function loadJsonHelper(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', false); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
function loadJsonMain() {
loadJsonHelper(function(response) {
data = JSON.parse(response);
launchList = data["groups"]
for (let i = 0; i < launchList.length; i++){
noradIdList[launchList[i]] = data[launchList[i]];
}
});
}
function orbitTrackRangeValueChanger() {
let orbitTrackRange = document.getElementById("orbitTrackRange");
if (!orbitTrackRange.value) {
return 1;
} else {
return orbitTrackRange.value;
}
}
function addDivEventListener(divId) {
console.log(divId)
document.getElementById(`${divId}dropdown`).classList.toggle('active')
};
function toggleSideBar() {
if (document.getElementById("sideBarDiv")) {
document.getElementById("main").classList.toggle('active');
document.getElementById("sideBarDiv").classList.toggle('active');
}
}
function addSideBar() {
let main = document.getElementById("main");
let sideBarDiv = document.createElement("div");
main.insertBefore(sideBarDiv, main.firstChild);
sideBarDiv.id = "sideBarDiv"
let sideBarToggleDiv = document.createElement("div");
sideBarToggleDiv.id = "sideBarToggleDiv";
sideBarToggleDiv.className = "toggle"
sideBarToggleDiv.addEventListener("click", toggleSideBar, false);
let sideBarToggleSpan = document.createElement("span");
sideBarToggleSpan.id = "sideBarToggleSpan";
sideBarToggleSpan.addEventListener("click", toggleSideBar, false);
let sideBarList = document.createElement("ul");
sideBarList.id = "sideBarList";
for (var launchGroupCount = 0; launchGroupCount < launchList.length; launchGroupCount++) {
let newLaunchGroupItem = document.createElement("li");
newLaunchGroupItem.id = launchList[launchGroupCount];
let divTag = launchList[launchGroupCount]
let newLaunchGroupItemDiv = document.createElement("div")
newLaunchGroupItemDiv.id = `${launchList[launchGroupCount]}Div`;
newLaunchGroupItemDiv.innerHTML = `${launchList[launchGroupCount]} &blacktriangledown;`
newLaunchGroupItemDiv.addEventListener('click', function() {
addDivEventListener(divTag);
});
// console.log(noradIdList)
// console.log("a bug says hello");
newLaunchGroupItemDropdown = document.createElement("ul");
newLaunchGroupItemDropdown.id = `${launchList[launchGroupCount]}dropdown`
for (let noradIdGroupCount = 0; noradIdGroupCount < noradIdList[`${launchList[launchGroupCount]}`].length; noradIdGroupCount++) {
let newLaunchGroupItemDropdownItem = document.createElement("li")
let radioButton = document.createElement("radio");
radioButton.id = noradIdList[`${launchList[launchGroupCount]}`][noradIdGroupCount];
radioButton.textContent = `${noradIdList[launchList[launchGroupCount]][noradIdGroupCount]}`
newLaunchGroupItemDropdownItem.append(radioButton)
newLaunchGroupItemDropdown.append(newLaunchGroupItemDropdownItem);
// console.log("a bug2 says hello");
}
newLaunchGroupItem.append(newLaunchGroupItemDiv)
newLaunchGroupItem.append(newLaunchGroupItemDropdown);
sideBarList.append(newLaunchGroupItem);
}
sideBarToggleDiv.append(sideBarToggleSpan.cloneNode(true), sideBarToggleSpan.cloneNode(true), sideBarToggleSpan.cloneNode(true));
let primaryButtonDiv = document.getElementById("primaryButtonDiv");
if (document.getElementById("sideBarToggleDiv") == null) {
primaryButtonDiv.insertBefore(sideBarToggleDiv, primaryButtonDiv.firstChild);
}
sideBarDiv.append(sideBarList);
// sideBarDiv.append(sideBarToggleDiv, sideBarList);
}
\ No newline at end of file
front-end/public/vanilla-js-files/index.html 0 → 100644
+ 75
− 0
View file @ a6d239fc
<!DOCTYPE html>
<html lang="en"></html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Starlink Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script>
function get_sidebar(){
document.getElementById("sidebar").classList.toggle('active');
document.getElementById("main").classList.toggle('active');
}
function clickMe4(){
document.getElementById("dropdown").classList.toggle('active');
}
</script>
<div id="sidebar">
<div class="toggle" onclick="get_sidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li onclick="clickMe1()">Option 1</li>
<li onclick="clickMe2()">Option 2</li>
<li onclick="clickMe3()">Option 3</li>
<li>
<div onclick="clickMe4()" >Option 4 &#9662;</div>
<ul id = "dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Nothing to see here</li>
</ul>
</div>
<div id="main">
<div id="primaryButtonDiv">
<button id="method1">Track satellties on a 2D/3D Map</button>
<button id="method2">Satellite tracking data</button>
</div>
<div id="textBoxDiv"></div>
<div id="mainDiv"></div>
<div id="mapDiv"></div>
</div>
<script type="text/javascript" src="tablesFunctions.js"></script>
<script type="text/javascript" src="orbitTrackButtonFunc.js"></script>
<script type="text/javascript" src="tables.js"></script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment