Branch studio3

src/app/app.component.css

@@ -1,4 +1,5 @@
 .box {
     display: flex;
     padding: 10px;
+    justify-content: space-evenly;
 }

src/app/app.component.ts

@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'mission-planning-dashboard';
+  editingRocket: boolean = false;
+  editingMission: boolean = false;
 }

src/app/crew/crew.component.css

@@ -0,0 +1,25 @@
+
+li:hover {
+    cursor: pointer;
+}
+
+.displayBox {
+    height: 275px;
+    width: auto;
+}
+
+img {
+    width: auto;
+    height: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+h3 {
+    text-align: center;
+}
+
+.selected {
+    color:lightseagreen;
+}

src/app/crew/crew.component.html

@@ -1,6 +1,15 @@
-<h3>Crew</h3>
-<ul>
-  <li>Jessica Watkins</li>
-  <li>Raja Chari</li>
-  <li>Jasmin Moghbeli</li>
-</ul>
+
+<div class="displayBox">
+  <h3>Candidates</h3>
+  <ul>
+      <li [class.selected]="crew.includes(member)" *ngFor="let member of candidates" (click)="addCrewMember(member)">{{member.name}}</li>
+  </ul>
+</div>
+<hr>
+<div class="displayBox">
+  <h3>Crew <span *ngIf="crew.length === 3">Full</span></h3>
+  <ol>
+      <li *ngFor="let astronaut of crew" (mouseover)="selected = astronaut" (mouseout)="selected = false">{{astronaut.name}}</li>
+  </ol>
+  <img *ngIf="selected" [src]="selected.photo"/>
+</div>

src/app/crew/crew.component.ts

@@ -7,15 +7,38 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CrewComponent implements OnInit {
 
-  crew: object[] = [
-    {name: "Eileen Collins", firstMission: false},
-    {name: "Mae Jemison", firstMission: false},
-    {name: "Ellen Ochoa", firstMission: true}
+  inCrew: boolean = false;
+  crew: object[] = [];
+
+  candidates: object[] = [
+    {name: "Sally Ride", photo: 'https://handlers.education.launchcode.org/static/images/sally-ride.jpg'},
+    {name: "Mae Jemison", photo: 'https://handlers.education.launchcode.org/static/images/mae-jemison.jpg'},
+    {name: "Ellen Ochoa", photo: 'https://handlers.education.launchcode.org/static/images/ellen-ochoa.jpg'},
+    {name: "Frederick Gregory", photo: 'https://handlers.education.launchcode.org/static/images/frederick-gregory.jpg'},
+    {name: "Guion Bluford", photo: 'https://handlers.education.launchcode.org/static/images/guion-bluford.jpg'},
+    {name: "Kjell Lindgren", photo: 'https://handlers.education.launchcode.org/static/images/kjell-lindgren.jpg'},
+    {name: "Jeanette Epps", photo: 'https://handlers.education.launchcode.org/static/images/jeanette-epps.jpg'}
   ];
+
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  addCrewMember(member: object) {
+    if (this.crew.includes(member)) {
+      this.inCrew = true;
+    } else {
+      this.inCrew = false;
+    }
+
+    if (this.inCrew) {
+        let index = this.crew.indexOf(member);
+        this.crew.splice(index, 1);
+    } else if (!this.inCrew && this.crew.length < 3) {
+        this.crew.push(member);
+    }
+  } 
+
 }

src/app/equipment/equipment.component.css

@@ -0,0 +1,25 @@
+.displayBox {
+    height: 275px;
+    width: auto;
+}
+
+button {
+    margin: 2px;
+    cursor: pointer;
+}
+
+h3 {
+    text-align: center;
+}
+
+.active {
+    background: gold;
+}
+
+.nearMaxMass {
+    color:red;
+    font-style: italic;
+    font-weight: bold;
+}
+
+

src/app/equipment/equipment.component.html

@@ -1,7 +1,23 @@
-<h3>Equipment</h3>
-<ul>
-  <li>Habitat dome</li>
-  <li>Drones</li>
-  <li>Food containers</li>
-  <li>Oxygen tanks</li>
-</ul>
+<div class="displayBox">
+  <h3>Equipment</h3>
+  <ol>
+      <li *ngFor="let item of equipmentItems">
+          <button [class.active]="item.mass+cargoMass <= maximumAllowedMass && cargoHold.length < maxItems" [disabled]="item.mass+cargoMass > maximumAllowedMass || cargoHold.length >= maxItems" (click)="nearCapacity = addItem(item)">
+              Add to Cargo Hold
+          </button>
+          {{item.name}}, {{item.mass}} kg
+      </li>
+  </ol>
+</div>
+
+<hr>
+
+<div class = "displayBox">
+  <h3>Cargo Hold: {{cargoHold.length}}/{{maxItems}} Spots Filled</h3>
+  <ol>
+      <li *ngFor="let equipment of cargoHold">{{equipment.name}}</li>
+  </ol>
+  <p>Mass in Hold: {{cargoMass}} kg</p>
+  <p [class.nearMaxMass]="nearCapacity">Mass Budget Remaining: {{maximumAllowedMass - cargoMass}} kg</p>
+  <button (click)="cargoHold=[]; cargoMass=0; nearCapacity = false">Empty Hold</button>
+</div>

src/app/equipment/equipment.component.ts

@@ -6,10 +6,31 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./equipment.component.css']
 })
 export class EquipmentComponent implements OnInit {
+  equipmentItems: object[] = [
+    {name: 'Duct Tape', mass: 0.5},
+    {name: 'Space Camera', mass: 20},
+    {name: 'Food', mass: 150},
+    {name: 'Oxygen Tanks', mass: 400},
+    {name: 'AE-35 Unit', mass: 5},
+    {name: 'ISS Supplies', mass: 800},
+    {name: 'Water', mass: 250},
+    {name: 'Satellite', mass: 1200},
+    {name: 'R2 Unit', mass: 32}
+  ];
+
+  cargoHold: object[] = [];
+  cargoMass: number = 0;
+  maximumAllowedMass: number = 2000;
+  maxItems: number = 10;
 
   constructor() { }
 
   ngOnInit() {
   }
+  addItem(item : object) : boolean {
+    this.cargoHold.push(item);
+    this.cargoMass += item['mass'];
+    return this.maximumAllowedMass - this.cargoMass <= 200;
+ }
 
 }

src/app/experiments/experiments.component.css

@@ -0,0 +1,8 @@
+.displayBox {
+    height: 275px;
+    width: auto;
+}
+
+h3 {
+    text-align: center;
+}

src/app/experiments/experiments.component.html

@@ -1,6 +1,8 @@
-<h3>Experiments</h3>
+<div class ="displayBox">
+<h3>Possible Experiments</h3>
 <ul>
-  <li>Mars soil sample</li>
-  <li>Plant growth in habitat</li>
-  <li>Human bone density</li>
+  <li *ngFor = "let experiment of experiments">
+    {{experiment}}</li>
 </ul>
+</div>
+<hr>

src/app/experiments/experiments.component.ts

@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./experiments.component.css']
 })
 export class ExperimentsComponent implements OnInit {
+  experiments: string[] = ['Moon soil sample', 'Plant growth in orbit', 'Human bone density changes', 'Water droplet podcast for grades K-5', 'Satellite launch'];
 
   constructor() { }
 

src/app/header/header.component.css

@@ -1,3 +1,13 @@
 .editable-text {
     cursor: pointer;
 }
+
+h2 {
+    text-align: center;
+    color: brown;
+}
+
+h1 {
+    text-align: center;
+    text-decoration: underline;
+}

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <h1>Mission Planning Dashboard</h1>
 
-<h3>
+<h2>
     Mission Name:
     <span *ngIf="!editingMission; else editMissionBlock">
         <span class="editable-text" (click)="editingMission = true;">{{ missionName }}</span>
@@ -9,6 +9,15 @@ <h3>
         <input #mission (keyup.enter)="updateMission(mission.value)" value="{{ missionName }}"/>
         <button (click)="updateMission(mission.value)">save</button>
     </ng-template>
-</h3>
+</h2>
 
-<h3>Carrier Rocket: {{ rocketName }}</h3>
+<h2>Carrier Rocket:
+    <span *ngIf="!editingRocket; else editRocketBlock">
+        <span class="editable-text" (click)="editingRocket = true;">{{ rocketName }}</span>
+    </span>
+    <ng-template #editRocketBlock>
+        <input #rocket (keyup.enter)="updateRocket(rocket.value)" [value]=rocketName/>
+        <button (click)="updateRocket(rocket.value)">save</button>
+    </ng-template>
+
+</h2>

src/app/header/header.component.ts

@@ -7,9 +7,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
-  missionName: string = "Mars 2030";
-  rocketName: string = "Plasma Max";
+  missionName: string = "LC Angular 3";
+  rocketName: string = "ICAN";
   editingMission: boolean = false;
+  editingRocket: boolean = false;
 
   constructor() { }
 
@@ -21,4 +22,9 @@ export class HeaderComponent implements OnInit {
     this.editingMission = false;
   }
 
+  updateRocket(updatedName: string) {
+    this.rocketName = updatedName;
+    this.editingRocket = false;
+  }
+
 }