Skip to content

Commit

Permalink
feat: significantly improve the rovers section
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickIliev
NickIliev committed Jan 8, 2020
1 parent 43f85c4 commit 8b1267b
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 81 deletions.
9 changes: 6 additions & 3 deletions app/pages/rovers/pickers/pickers.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,21 @@ GridLayout {

DatePicker, Label, Segmentedbar {
opacity: 0.9;
width: 90%;
width: 95%;
}

DatePicker {
color: #282a2a;
}

.desc Label {
padding: 0 8 0 8;
}

Label {
background-color: #282a2a;
border-radius: 10 10 0 0;
color: #BCBCBC;
padding: 8;
}

SegmentedBar {
Expand All @@ -42,5 +45,5 @@ Button {
background-color: #282a2a;
border-radius: 20;
color: #E8EAEB;
width: 90%;
width: 95%;
}
21 changes: 14 additions & 7 deletions app/pages/rovers/pickers/pickers.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<ScrollView class="background">
<ScrollView>
<GridLayout rows="auto, auto, *, auto" verticalAlignment="middle">
<StackLayout row="0" class="m-t-10" (loaded)="onStackListLoaded($event)">
<StackLayout row="0" (loaded)="onStackListLoaded($event)">
<Label class="text-center" text="Choose Rover" textWrap="true"></Label>
<SegmentedBar [items]="mySegmentedBarItems"
(loaded)="onSegmentedbarLoaded($event)"
Expand All @@ -9,19 +9,26 @@
</SegmentedBar>
</StackLayout>

<GridLayout row="1" class="m-t-10" >
<Label [text]="desc" textWrap="true"></Label>
<GridLayout row="1" rows="auto, *, auto, auto, auto, auto, auto" class="m-t-8 desc">
<Label row="0" [text]="manifest_obj.photo_manifest.name" textWrap="true" class="h2"></Label>
<Label row="1" [text]="desc" textWrap="true"></Label>
<Label row="2" text="{{ 'Landing date: ' + manifest_obj.photo_manifest.landing_date }}" textWrap="true"></Label>
<Label row="3" text="{{ 'Launch date (from Earth): ' + manifest_obj.photo_manifest.launch_date }}" textWrap="true"></Label>
<Label row="4" text="{{ 'Mission status: ' + manifest_obj.photo_manifest.status }}" color="{{ manifest_obj.photo_manifest.status ? 'green' : 'orangered' }}" textWrap="true"></Label>
<Label row="5" text="{{ 'Total photos taken: ' + manifest_obj.photo_manifest.total_photos }}" textWrap="true"></Label>
<Label row="6" text="{{ 'Most recent active day (where photos exists): ' + manifest_obj.photo_manifest.max_date }}" textWrap="true"></Label>
</GridLayout>

<StackLayout row="2" class="m-t-10" (loaded)="onStackDateLoaded($event, 1, 1.4, 300)">
<Label class="text-center font-weight-bold" [text]="'See Photos on Selected Date for ' + selectedRover + ' rover (' + allowedRange + ')'" textWrap="true"></Label>
<StackLayout row="2" class="m-t-8" (loaded)="onStackDateLoaded($event, 1, 1.4, 300)">
<Label class="text-center" opacity="0.8" [text]="'Select date and see Photos for ' + selectedRover + ' rover'" textWrap="true"></Label>
<Label class="text-center" text="{{ 'Most recent active day: ' + manifest_obj.photo_manifest.max_date }}" textWrap="true"></Label>
<DatePicker (loaded)="onDatePickerLoaded($event)"
(dayChange)="onDayChanged($event)"
(monthChange)="onMonthChanged($event)"
(yearChange)="onYearChanged($event)">
</DatePicker>
</StackLayout>

<Button row="3" class="text-center m-t-10 m-b-10" text="Show photos for selected date" (tap)="goToPhotos()"></Button>
<Button row="3" class="m-t-8 m-b-8 text-center" text="Show photos for a selected date" (tap)="goToPhotos()"></Button>
</GridLayout>
</ScrollView>
112 changes: 62 additions & 50 deletions app/pages/rovers/pickers/pickers.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
/* Angular */
import { Component } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";

/* NativeScript MOdules */
import { isAndroid } from "tns-core-modules/platform";
import { Page } from "tns-core-modules/ui/page";
import { DatePicker } from "tns-core-modules/ui/date-picker";
Expand All @@ -7,7 +11,9 @@ import {
SegmentedBar,
SegmentedBarItem
} from "tns-core-modules/ui/segmented-bar";
import { Component } from "@angular/core";

/* Shared */
import { RoverPhotosService } from "../../../services/rover.service";

@Component({
selector: "cosmos-pickers",
Expand All @@ -20,6 +26,11 @@ export class PickersComponent {
selectedRover: string;
desc: string = "";
allowedRange: string = "";
manifest_obj: any;

curiosity_obj = {};
opportunity_obj = {};
spirit_obj = {};

private _today: Date;
private _day: number;
Expand All @@ -30,17 +41,39 @@ export class PickersComponent {
private _datePicker: DatePicker;
private _stackList: StackLayout;
private _stackDate: StackLayout;
private _segbar: SegmentedBar;

public mySegmentedBarItems: Array<SegmentedBarItem>;

constructor(private _page: Page, private _router: RouterExtensions) {
constructor(private _page: Page, private _router: RouterExtensions, private _roverService: RoverPhotosService) {
this._today = new Date(); // temp

this._roverService.getCuriosityManifest().subscribe(manifest => {
this.curiosity_obj = manifest;
this.manifest_obj = this.curiosity_obj;

const date = new Date(this.manifest_obj.photo_manifest.max_date); // last known date with photos (Curiosity)
this._today = date;

this.adjustDatePickerForSelectedRover(this._today); // initial date set to max_date (last known date with photos)
})

this._roverService.getOpportunityManifest().subscribe(manifest => {
this.opportunity_obj = manifest;
})

this._roverService.getSpiritManifest().subscribe(manifest => {
this.spirit_obj = manifest;
})


this.mySegmentedBarItems = [];
for (let i = 0; i < 3; i++) {
const item = new SegmentedBarItem();
if (i === 0) {
item.title = "Opportunity";
} else if (i === 1) {
item.title = "Curiosity";
} else if (i === 1) {
item.title = "Opportunity";
} else if (i === 2) {
item.title = "Spirit";
}
Expand All @@ -54,19 +87,14 @@ export class PickersComponent {
// as only Spirit rover is requiring to change the min-max date
// out of range the temp solution is to remove Spirit
if (android.os.Build.VERSION.SDK_INT > 21) {
this.rovers = ["Opportunity", "Curiosity", "Spirit"];
this.rovers = ["Curiosity", "Opportunity", "Spirit"];
} else {
this.rovers = ["Opportunity", "Curiosity"];
this.rovers = ["Curiosity", "Opportunity"];
}
} else {
// iOS
this.rovers = ["Opportunity", "Curiosity", "Spirit"];
this.rovers = ["Curiosity", "Opportunity", "Spirit"];
}

const date = new Date();
date.setDate(date.getDate() - 2);

this._today = date;
}

goToPhotos() {
Expand All @@ -83,6 +111,7 @@ export class PickersComponent {
// remember the chosen date & rover on navigation backwards
this.selectedRover = this.rovers[this._selectedIndex].toLowerCase();
this._today = new Date(this._year, this._month - 1, this._day + 1); // e.g. new Date(2018, 4 + 1, 9);
console.log(`goToPhotos this.selectedRover ${this.selectedRover}`); // TODO use this to change the default loaded rover
console.log(`goToPhotos this_today: ${this._today}`);
}

Expand Down Expand Up @@ -122,8 +151,8 @@ export class PickersComponent {

/* SegmentedBar logic START */
onSegmentedbarLoaded(args) {
let segbar = <SegmentedBar>args.object;
segbar.selectedIndex = 1;
this._segbar = args.object as SegmentedBar;
// this._segbar.selectedIndex = 1;
}

onSelectedIndexChange(args) {
Expand All @@ -137,8 +166,7 @@ export class PickersComponent {

/* DatePicker logic START */
onDatePickerLoaded(args) {
this._datePicker = <DatePicker>args.object;
this.adjustDatePickerForSelectedRover(this._today);
this._datePicker = args.object as DatePicker;
}

onDayChanged(args) {
Expand All @@ -158,47 +186,31 @@ export class PickersComponent {
if (this.selectedRover && this._datePicker) {
switch (this.selectedRover.toLowerCase()) {
case "opportunity":
this._datePicker.minDate = new Date(2004, 0, 26);
this._datePicker.maxDate = new Date(2018, 4 + 1, 9);

// intial values for picker date and for the queryParams
this._datePicker.year = today.getUTCFullYear();
this._year = this._datePicker.year;
this._datePicker.month = today.getUTCMonth() + 1;
this._month = this._datePicker.month;
this._datePicker.day = today.getUTCDate();
this._day = this._datePicker.day;

this.allowedRange = "Active: January 26th 2004 - June 9th 2018";
this.desc = " Opportunity (MER-B), Mars Exploration Rover, launched on July 7, 2003 and landed on January 25, 2004. Opportunity surpassed the previous records for longevity at 5,352 sols (5498 Earth days from landing to mission end; 15 Earth years or 8 Martian years) and covered a total distance of 40.25 km (25.01 mi). The rover sent its last status on 10 June 2018 when a global 2018 Mars dust storm blocked the sunlight needed to recharge its batteries. After hundreds of attempts to reactivate the rover, NASA declared the mission complete on February 13, 2019.";

this.manifest_obj = this.opportunity_obj;

this._datePicker.minDate = new Date(2004, 0, 26);
this._datePicker.maxDate = new Date(this.manifest_obj.photo_manifest.max_date);
this._datePicker.date = new Date(this.manifest_obj.photo_manifest.max_date); // initial and max allowed date (where photos actually exists)
break;
case "curiosity":
this._datePicker.minDate = new Date(2012, 6 + 1, 6);
this._datePicker.maxDate = new Date();

this._datePicker.year = today.getUTCFullYear();
this._year = this._datePicker.year;
this._datePicker.month = today.getUTCMonth() + 1;
this._month = this._datePicker.month;
this._datePicker.day = today.getUTCDate();
this._day = this._datePicker.day;

this.allowedRange = "Active: August 7th 2007 - Present";
this.desc = "Curiosity of the Mars Science Laboratory (MSL) mission by NASA, was launched November 26, 2011 and landed at the Aeolis Palus plain near Aeolis Mons (informally 'Mount Sharp') in Gale Crater on August 6, 2012. The Curiosity rover is still operational as of July 23, 2019.";

this.manifest_obj = this.curiosity_obj;

this._datePicker.minDate = new Date(2004, 0, 26);
this._datePicker.maxDate = new Date(this.manifest_obj.photo_manifest.max_date);
this._datePicker.date = new Date(this.manifest_obj.photo_manifest.max_date); // initial and max allowed date (where photos actually exists)
break;
case "spirit":
this._datePicker.minDate = new Date(2004, 0, 5);
this._datePicker.maxDate = new Date(2010, 1 + 1, 21);

this._datePicker.year = 2008;
this._year = this._datePicker.year;
this._datePicker.month = 6;
this._month = this._datePicker.month;
this._datePicker.day = 2;
this._day = this._datePicker.day;

this.allowedRange = "Active: January 5th 2004 - March 21th 2010";
this.desc = "Spirit (MER-A), Mars Exploration Rover, launched on June 10, 2003, and landed on January 4, 2004. Nearly 6 years after the original mission limit, Spirit had covered a total distance of 7.73 km (4.80 mi) but its wheels became trapped in sand. The last communication received from the rover was on March 22, 2010, and NASA ceased attempts to re-establish communication on May 25, 2011.";

this.manifest_obj = this.spirit_obj;

this._datePicker.minDate = new Date(2004, 0, 26);
this._datePicker.maxDate = new Date(this.manifest_obj.photo_manifest.max_date);
this._datePicker.date = new Date(this.manifest_obj.photo_manifest.max_date); // initial and max allowed date (where photos actually exists)
break;
default:
break;
Expand Down
46 changes: 46 additions & 0 deletions app/services/rover.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,56 @@ export class RoverPhotosService {
API_URL_START: string;
API_URL_DATE: string;

API_MANIFEST_CURIOSITY: any;
API_MANIFEST_SPIRIT: any;
API_MANIFEST_OPPORTUNITY: any;
/*
Mission Manifest
A mission manifest is available for each Rover at /manifests/rover_name.
This manifest will list details of the Rover's mission to help narrow down photo queries to the API.
The information in the manifest includes:
Key Description
name Name of the Rover
landing_date The Rover's landing date on Mars
launch_date The Rover's launch date from Earth
status The Rover's mission status
max_sol The most recent Martian sol from which photos exist
max_date The most recent Earth date from which photos exist
total_photos Number of photos taken by that Rover
*/

constructor(private _http: HttpClient) {
this.API_URL_START = "https://api.nasa.gov/mars-photos/api/v1/rovers/";
this.API_URL_DATE = "/photos?earth_date=";
this.NASA_API_KEY = getApiKey();

this.API_MANIFEST_CURIOSITY = "https://api.nasa.gov/mars-photos/api/v1/manifests/Curiosity?api_key=" + getApiKey();
this.API_MANIFEST_SPIRIT = "https://api.nasa.gov/mars-photos/api/v1/manifests/Spirit?api_key=" + getApiKey();
this.API_MANIFEST_OPPORTUNITY = "https://api.nasa.gov/mars-photos/api/v1/manifests/Opportunity?api_key=" + getApiKey();
}

getCuriosityManifest() {
return this._http.get(this.API_MANIFEST_CURIOSITY)
.pipe(map(data => {
return data;
}));
}

getOpportunityManifest() {
return this._http.get(this.API_MANIFEST_OPPORTUNITY)
.pipe(map(data => {
return data;
}));
}

getSpiritManifest() {
return this._http.get(this.API_MANIFEST_SPIRIT)
.pipe(map(data => {
return data;
}));
}

getPhotosWithDateAndPageIndex(rover: string, year: number, month: number, day: number, pageIndex: number) {
Expand Down
19 changes: 11 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.curiosity"
"id": "org.nativescript.curiosity",
"tns-android": {
"version": "6.3.1"
}
},
"dependencies": {
"@angular/animations": "~8.2.0",
Expand All @@ -16,17 +19,17 @@
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"nativescript-angular": "~8.2.1",
"nativescript-angular": "~8.20.4",
"nativescript-app-center": "~1.0.3",
"nativescript-cardview": "~3.2.0",
"nativescript-permissions": "~1.3.6",
"nativescript-plugin-firebase": "~10.0.0",
"nativescript-permissions": "~1.3.8",
"nativescript-plugin-firebase": "~10.3.3",
"nativescript-social-share": "~1.5.2",
"nativescript-theme-core": "~1.0.6",
"nativescript-ui-sidedrawer": "~7.0.2",
"nativescript-ui-sidedrawer": "~8.0.0",
"reflect-metadata": "~0.1.13",
"rxjs": "^6.3.3",
"tns-core-modules": "~6.1.1",
"tns-core-modules": "~6.3.2",
"zone.js": "^0.9.1"
},
"devDependencies": {
Expand All @@ -39,8 +42,8 @@
"mocha": "~5.2.0",
"mochawesome": "~3.1.2",
"nativescript-dev-appium": "next",
"nativescript-dev-webpack": "~1.2.0",
"tns-platform-declarations": "~6.1.1",
"nativescript-dev-webpack": "~1.4.1",
"tns-platform-declarations": "~6.3.2",
"tslint": "~5.19.0",
"typescript": "~3.5.3"
},
Expand Down
Loading

0 comments on commit 8b1267b

Please sign in to comment.