Started implementing connection with database server.

skyvue-satellite-tracking · Apr 23, 2024 · f03f4be · f03f4be
1 parent 90642ec
commit f03f4be
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 82 deletions.
diff --git a/app.js b/app.js
@@ -2,6 +2,7 @@ const app = Vue.createApp( {
 
     data() {
         return{
+            timestamp: "",
             selected_satellite: '',
             tracking: false,
             //API configuration
@@ -12,6 +13,7 @@ const app = Vue.createApp( {
             tle_string: '',
             object_path: new Array(),
             predicted_path: new Array(),
+            // [latitude, longitute, altitude, country_code]
             user_location: new Array(),
             // Container for scheduled intervals.
             intervals: new Array(),
@@ -53,28 +55,47 @@ const app = Vue.createApp( {
             // document.getElementById("units").value = ''; 
 
         },
+        updateCommunityMapDatabase(timestamp, country_code) {
+            // this.user_location;
+            // this.timestamp;  
+
+            data = {
+                'country_code': country_code,
+                'timestamp': timestamp,
+            };
+
+            fetch("https://easyfermi.com/CommunityMap/UpdateDataBase/", 
+            {
+             method: "POST",
+             headers: {
+                'Content-Type': 'application/json',
+             },
+             body: JSON.stringify(data),
+            });
+        },
+
 
     },
 
     mounted() {
 
         setTimeout(() => {
 
-            const interval_Wiki = setInterval(updateWikiInfo, this.wiki_update_rate);
+            // const interval_Wiki = setInterval(updateWikiInfo, this.wiki_update_rate);
 
             // Initialize 3D map Sun ilumination.
-            let timestamp = (new Date()).getTime().toString().substring(0, 10);
+            this.timestamp = (new Date()).getTime().toString().substring(0, 10);
 
             gradualOpacity('interface', 1500);    
             map2DGradualAppearance(3000);
 
             setTimeout(() => {
-                updateEarthIlumination(timestamp);    
+                updateEarthIlumination(this.timestamp);    
             }, 4000);
 
+            // updateCommunityMapDatabase(this.timestamp, this.user_location[3]);
+
         }, 100);
 
     }
-
-
 } )
diff --git a/components/Interface/DataPanel/DataPanel.css b/components/Interface/DataPanel/DataPanel.css
@@ -140,7 +140,7 @@
 	border-radius: 5px;
 
 	backdrop-filter: blur(20px);
-	background-color: rgba(77, 85, 152, 0.254);
+	/* background-color: rgba(77, 85, 152, 0.254); */
 
 }
 

diff --git a/components/Interface/ViewPanel/components/SpectsTab/SpecsTab.js b/components/Interface/ViewPanel/components/SpectsTab/SpecsTab.js
@@ -225,7 +225,7 @@ app.component('specs-tab', {
             // console.log(encodeURI(tle_line2));
 
             // Request computed orbit based on the TLE info.
-            API_URL = "https://easyfermi.com/computeOrbit/" + "?tle_line1=" + tle_line1 + "&tle_line2=" + tle_line2;
+            API_URL = "https://easyfermi.com/ComputeOrbitFromTLE/" + "?tle_line1=" + tle_line1 + "&tle_line2=" + tle_line2;
             fetch(API_URL)
             .then((response) => response.json())
             .then((data) => {

diff --git a/components/Satbot/Satbot.css b/components/Satbot/Satbot.css
@@ -1,8 +1,8 @@
 #satbot-container {
-    position: absolute;
+    position: fixed;
     z-index: 1;
     right: 0;
-    bottom: 20vh;
+    bottom: 16vh;
 
     width: fit-content;
     height: 400px;
@@ -45,7 +45,7 @@
     border-right-color: rgba(255, 255, 255, 0.316);;
     border-radius: 5% 0 0 5%;
 
-    background-color: rgba(33, 79, 107, 0.474);
+    /* background-color: rgba(33, 79, 107, 0.474); */
     backdrop-filter: blur(20px);
     box-shadow: 0.3vw 0.3vw 1vw 0.2vw rgba(235, 172, 155, 0.329);   
     /* box-shadow: 0vw 0vw 1vw 0vw rgba(255, 211, 199, 0.458);    */
@@ -71,7 +71,7 @@
     border-color: rgba(255, 255, 255, 0.662);
     border-radius: 0% 0 0 0%;
 
-    background-color: rgba(45, 65, 78, 0.427);
+    /* background-color: rgba(45, 65, 78, 0.427); */
     backdrop-filter: blur(20px);
     box-shadow: 0.3vw 0.3vw 1vw 0.2vw rgba(235, 172, 155, 0.329);   
     /* box-shadow: 0vw 0vw 1vw 0vw rgba(255, 211, 199, 0.458);    */
@@ -99,14 +99,17 @@
 }
 
 .satbot-loader-container {
-    width: 3vw;
-    height: 3vw;
-    margin: 0 1vw 0 1vw;
+    width: 5vw;
+    height: 5vw;
+    margin: 0;
 
 
-    background-image: url(../Satbot/assets/chatGPT.webp);
+    /* background-image: url(../Satbot/assets/chatGPT.webp); */
+    background-image: url(../../assets/satbot.jpeg);
     background-size: cover;
 
+    border-radius: 50%;
+
 }
 
 
@@ -130,7 +133,7 @@
 	-webkit-overflow-scrolling: touch;
 
 	backdrop-filter: blur(20px);
-	background-color: rgba(77, 85, 152, 0.254);
+	/* background-color: rgba(77, 85, 152, 0.254); */
 
 
 
@@ -152,8 +155,8 @@
 
     margin: 0;
     padding: 0;
-    width: 3vw;
-    height: 3vw;
+    width: 5vw;
+    height: 5vw;
 
     border-top-color: #f3f3f3;
     animation: spin 2s linear infinite;

diff --git a/components/Satbot/Satbot.js b/components/Satbot/Satbot.js
@@ -6,7 +6,6 @@ app.component('satbot', {
 
         <div id="satbot-hook-container">
             <div id="satbot-hook">
-                <img  id="satbot-img" text="satbot" src="./assets/satbot.jpeg" />
                 <div class="satbot-loader-container">
                     <div class="loader" id="satbot-loader"></div>
                 </div>
@@ -22,9 +21,9 @@ app.component('satbot', {
                 <div id="chatbot-response">
                     Hi! I am Satbot.
                     <br><br> 
-                    I am a robot assistant with a great passion for all things related to space. 
+                    I am a robot assistant with a great passion for space science. 
                     <br><br>
-                    I am here to help you digging into the satellites you are tracking.
+                    I'm here to help you find out more about the satellites you're interested in.
                 </div>
                 
             </div>

diff --git a/components/dataManager/DataManager.css b/components/dataManager/DataManager.css
@@ -19,7 +19,7 @@
     width: 100%;
     height: 100%;
 
-    background-color: rgba(61, 72, 126, 0.371);
+    /* background-color: rgba(61, 72, 126, 0.371); */
     backdrop-filter: blur(10px);
 
     border-style: solid;

diff --git a/components/header/header.css b/components/header/header.css
@@ -3,7 +3,7 @@ header {
 	position: relative;
 	z-index: 1;
 
-	height: fit-content;
+	height: 13vh;
 	width: 100%;
 	font-family: 'Courier New', Courier, monospace;
 	padding: 1vh 2vw;
@@ -20,7 +20,7 @@ header {
 	gap: 0;
 
 	backdrop-filter: blur(20px);
-	background-color: rgba(77, 85, 152, 0.254);
+	/* background-color: rgba(77, 85, 152, 0.254); */
 
 
 }

diff --git a/components/header/header.js b/components/header/header.js
@@ -57,7 +57,7 @@ app.component('header-vue', {
     watch: {
         user_location(new_value, old_value) {
             if (new_value.length == 3) {
-                this.fetchSatellitesCrossingUserSky();
+                // this.fetchSatellitesCrossingUserSky();
             }
         },
         active_satellites(new_value, old_value){
@@ -108,10 +108,10 @@ app.component('header-vue', {
                 // console.log(satellite);
             });
 
-        },
+        }
     },
     mounted() {
-        this.fetchActiveSatellites();
+        // this.fetchActiveSatellites();
         this.fetchDebris();
     }
 

diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 
 			</div>
 
-			<div id="trivia" class="band-container">
+			<!-- <div id="trivia" class="band-container">
 				<div class="band-display">
 					<div style="width: 100%; display: inline-flex" >
 						<div style="width: fit-content; display: flex; justify-content: center; align-items: center;">
@@ -57,12 +57,12 @@
 						<div class="wikiInfo"> "The International Space Station (ISS) is the largest modular space station currently in low Earth orbit." </div>
 					</div>
 				</div>
-			</div>
+			</div> -->
 
 			<div id="resources" class="band-container">
 				<div class="band-display">
 					<div class="inline-flex-container">
-						<div class="band-title-box-resources">
+						<div class="band-title-box">
 							<h6>recommended</h6>
 							<h1 class="band-title">RESOURCES</h1>
 							<h6>from other creators</h6>
@@ -78,7 +78,7 @@ <h6>from other creators</h6>
 					</div>
 				</div>
 			</div>
-			
+
 			<div id="contribute" class="band-container">
 				<div class="band-display">
 					<div id="contribute">
@@ -93,13 +93,22 @@ <h6>from other creators</h6>
 							<!-- <div class="band-button-container"><a target="_blank" href="https://clodon1109.github.io/caiosoter-webpage/" target="_blank"><button class="circular-button" id="dev-button-2"><img class="dev-image" src="./assets/caio-profile-art.png" width="100%" ></button></a><div class="button-name">Caio Sóter</div></div> -->
 
 						</div>
-						<div class="band-title-box-the-team">
+						<div class="band-title-box">
 							<h1 class="band-title">THE TEAM</h1>
 						</div>
 					</div>
 				</div>
 			</div>
-
+
+			<div style="padding: 50px; position: relative; z-index: 0;" class="band-container-community">
+				<div id="community-display-container">
+					<h1 id="the-community-title">THE COMMUNITY</h1>
+					<div id="the-community-display">
+						<iframe title="" aria-label="Map" id="datawrapper-chart-IzNXS" src="https://datawrapper.dwcdn.net/IzNXS/6/?dark=true" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="600px" data-external="1"></iframe>
+					</div>
+				</div>
+			</div>
+
 			<div id="art" class="band-container">
 				<div class="band-display">
 					<div class="poem">
@@ -117,14 +126,15 @@ <h1 class="band-title">THE TEAM</h1>
 				</div>
 			</div>
 
+
 			<footer id="footer">	
 
 				<div class ="footer-grid">
 
 					<a target="_blank" href="https://clodo.me">
 						<div class="footer-box">
 
-							<div style="font-family:courier; font-size: 10px; color: white;"><div style="transition: all 0s">design by Clodo</div></div>
+							<div style="font-family:courier; font-size: 10px; color: white;"><div style="transition: all 0s; width: max-content; padding: 2px;">design by Clodo</div></div>
 
 							<div class="box-image" ></div>
 
@@ -152,7 +162,7 @@ <h1 class="band-title">THE TEAM</h1>
 			</footer>
 
 		</div>
-				
+
 		<script src="./scripts/tracking.js"></script>
 		<script src="./scripts/misc.js"></script>
 		<script src="./components/Interface/ViewPanel/components/Map3DTab/map3D/js/base.js"></script>

diff --git a/scripts/misc.js b/scripts/misc.js
@@ -115,7 +115,7 @@ function map2DGradualAppearance(timeToAppear){
     document.getElementById('map2D-container').style.height = '400px';  
 
     setTimeout(() => {
-      showUserLocation();
+      fetchUserLocation();
     }, 500);
 
   }, timeToAppear);

diff --git a/scripts/tracking.js b/scripts/tracking.js
@@ -189,7 +189,7 @@ function tleActivityLogging(state){
 
 }
 
-function showUserLocation(){
+function fetchUserLocation(){
 
   // Check if geolocation is supported by the browser
   if ("geolocation" in navigator) {
@@ -219,6 +219,7 @@ function showUserLocation(){
         .then((data) => {
 
           let country_code = data.countryCode;
+          mountedApp.user_location.push(data.countryCode);
           // country_code = 'BR';
 
           document.getElementById("user-location-name").textContent = country_code;