From 79a3343fcff39accc000fe37125206d45f87b427 Mon Sep 17 00:00:00 2001
From: Hope Ciuffa <hopeciuffa@gmail.com>
Date: Thu, 12 Aug 2021 20:32:58 -0500
Subject: [PATCH 1/4] Moved files

---
 src/app/crew/crew.component.css            |  4 +++-
 src/app/crew/crew.component.html           | 15 ++++++++----
 src/app/crew/crew.component.ts             |  7 +++++-
 src/app/equipment/equipment.component.css  | 13 ++++++++---
 src/app/equipment/equipment.component.html | 12 ++++++----
 src/app/equipment/equipment.component.ts   | 27 +++++++++++++++++++++-
 6 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/app/crew/crew.component.css b/src/app/crew/crew.component.css
index acfd7eb7f0..c376c5d270 100644
--- a/src/app/crew/crew.component.css
+++ b/src/app/crew/crew.component.css
@@ -18,5 +18,7 @@ img {
 h3 {
     text-align: center;
 }
-
+.selected {
+    color: teal;
+}
 /* Add a 'selected' class here to style selected astronaut names a different color. */
\ No newline at end of file
diff --git a/src/app/crew/crew.component.html b/src/app/crew/crew.component.html
index 6eaaeaf78a..ecdf8c82c5 100644
--- a/src/app/crew/crew.component.html
+++ b/src/app/crew/crew.component.html
@@ -1,14 +1,19 @@
 <div class="displayBox">
     <h3>Candidates</h3>
     <ul>
-        <li *ngFor="let member of candidates">{{member.name}}</li>
+        <li *ngFor="let member of candidates" 
+        (click)="addCrewMember(member)" 
+        [class.selected]="crew.includes(member)">{{member.name}}</li>
     </ul>
 </div>
 <hr>
 <div class="displayBox">
-    <h3>Crew <!-- Add a span tag here to display 'Full' when the crew reaches 3. --></h3>
+    <h3>Crew <span *ngIf="crew.length===3">Full</span> <!-- Add a span tag here to display 'Full' when the crew reaches 3. --></h3>
     <ol>
-        <li *ngFor="let astronaut of crew">{{astronaut.name}}</li>
+        <li *ngFor="let astronaut of crew"  
+        (mouseover)="selected=astronaut"
+        (mouseout)="selected=false">
+        {{astronaut.name}}</li>
     </ol>
-    <!-- Add an img tag here to display astronaut photos. -->
-</div>
+    <img *ngIf="selected" [src]="selected.photo"/><!-- Add an img tag here to display astronaut photos. -->
+</div>
\ No newline at end of file
diff --git a/src/app/crew/crew.component.ts b/src/app/crew/crew.component.ts
index 7d7fbbb02c..acff2d5823 100644
--- a/src/app/crew/crew.component.ts
+++ b/src/app/crew/crew.component.ts
@@ -24,6 +24,11 @@ export class CrewComponent implements OnInit {
 
   ngOnInit() { }
 
-  // Code the 'addCrewMember' function here:
+  addCrewMember(member){
+    if(!this.crew.includes(member)&&this.crew.length<3){
+      this.crew.push(member);
+    }
+
+  }
 
 }
diff --git a/src/app/equipment/equipment.component.css b/src/app/equipment/equipment.component.css
index 9ac48af6ab..5ec2548100 100644
--- a/src/app/equipment/equipment.component.css
+++ b/src/app/equipment/equipment.component.css
@@ -6,13 +6,20 @@
 button {
     margin: 2px;
     cursor: pointer;
+    
 }
 
 h3 {
     text-align: center;
 }
-
+.active {
+    background-color: gold;
+}
 /* Add an 'active' class to style the background of the 'Add to Cargo Hold' buttons. */
+.nearMaxMass {
+    color:red;
+    font-style: italic;
+    font-weight: bold;
+}
 
-
-/* Add the 'nearMaxMass' class style here: */
+/* Add the 'nearMaxMass' class style here: */
\ No newline at end of file
diff --git a/src/app/equipment/equipment.component.html b/src/app/equipment/equipment.component.html
index e6d5240db8..7f7d5006e7 100644
--- a/src/app/equipment/equipment.component.html
+++ b/src/app/equipment/equipment.component.html
@@ -2,8 +2,9 @@
     <h3>Equipment</h3>
     <ol>
         <li *ngFor="let item of equipmentItems">
-            <!-- "Add to Cargo Hold" button goes here. -->
+            <button (click)="addItem(item)" [class.active]="cargoHold.length<maxItems && cargoMass+item.mass<2000" [disabled]="cargoMass+item.mass>maximumAllowedMass||buttonDisabled">Add to Cargo Hold</button>
             {{item.name}}, {{item.mass}} kg
+           
         </li>
     </ol>
 </div>
@@ -13,10 +14,13 @@ <h3>Equipment</h3>
 <div class = "displayBox">
     <h3>Cargo Hold: {{cargoHold.length}}/{{maxItems}} Spots Filled</h3>
     <ol>
-        <li *ngFor="let equipment of cargoHold">{{equipment.name}}</li>
+        <li *ngFor="let equipment of cargoHold">{{equipment.name}}
+        <button (click)="removeItem(equipment)">Remove item</button>
+        </li>
     </ol>
     <p>Mass in Hold: {{cargoMass}} kg</p>
-    <p>Mass Budget Remaining: {{<!-- Calculate mass remaining here. -->}} kg</p>
-    <!-- Add the "Empty Hold" button here. -->
+    <p [class.nearMaxMass]="nearCapacity">Mass Budget Remaining: {{maximumAllowedMass - cargoMass}} kg</p>
+    <button (click)="emptyHold()" [class.active]="cargoHold.length>0" >Empty Cargo Hold</button>
 </div>
 
+
diff --git a/src/app/equipment/equipment.component.ts b/src/app/equipment/equipment.component.ts
index 1aa172d773..86d4a08b87 100644
--- a/src/app/equipment/equipment.component.ts
+++ b/src/app/equipment/equipment.component.ts
@@ -21,11 +21,36 @@ export class EquipmentComponent implements OnInit {
    cargoMass: number = 0;
    maximumAllowedMass: number = 2000;
    maxItems: number = 10;
+   buttonDisabled: boolean = false;
+   active: boolean = true;
+   nearCapacity: boolean = false;
+   
 
    constructor() { }
 
    ngOnInit() { }
 
    // Code your addItem function here:
-   
+   addItem(item){
+     if(this.cargoHold.length<this.maxItems && this.cargoMass+item.mass<2000) {
+      this.cargoHold.push(item);
+      this.cargoMass += item.mass;
+      if(this.cargoMass>=1800){
+        this.nearCapacity = true;
+      }
+     }
+    else if(this.cargoHold.length>this.maxItems-1){
+      this.buttonDisabled = true;
+      alert(`Cargo Hold full`);
+    }
+   }
+   emptyHold(){
+     this.cargoHold = [];
+     this.cargoMass = 0;
+   }
+   removeItem(equipment){
+      let index = this.cargoHold.indexOf(equipment);
+      this.cargoHold.splice(index, 1);
+    }
+
 }

From ddd61333708b1eae1dbc77ddf2969e17536333d2 Mon Sep 17 00:00:00 2001
From: Hope Ciuffa <hopeciuffa@gmail.com>
Date: Fri, 13 Aug 2021 10:11:37 -0500
Subject: [PATCH 2/4] experiments added

---
 src/app/experiments/experiments.component.html | 11 ++++++++++-
 src/app/experiments/experiments.component.ts   |  8 ++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/experiments/experiments.component.html b/src/app/experiments/experiments.component.html
index cd894b1902..92b4a66383 100644
--- a/src/app/experiments/experiments.component.html
+++ b/src/app/experiments/experiments.component.html
@@ -1,7 +1,16 @@
 <div class="displayBox">
     <h3>Possible Experiments</h3>
     <ul>
-      <li *ngFor="let experiment of experiments">{{experiment}}</li>
+      <li *ngFor="let experiment of experiments">{{experiment}}
+        <button (click)="addExperiment(experiment)" [disabled]="added.includes(experiment)">Add to Mission</button>
+      </li>
     </ul>
 </div>
 <hr>
+<div class = "displayBox">
+  <h3>Mission Experiments: </h3>
+  <ol>
+      <li *ngFor="let new of added">{{new}}</li>
+      
+  </ol>
+  
\ No newline at end of file
diff --git a/src/app/experiments/experiments.component.ts b/src/app/experiments/experiments.component.ts
index b4df9023cf..92d09a6da0 100644
--- a/src/app/experiments/experiments.component.ts
+++ b/src/app/experiments/experiments.component.ts
@@ -7,9 +7,13 @@ import { Component, OnInit } from '@angular/core';
 })
 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'];
-
+  added: string[] =[];
    constructor() { }
 
    ngOnInit() { }
-
+addExperiment(experiment){
+  if(this.added.length<3){
+    this.added.push(experiment);
+    }
+  }
 }

From 3c6d422959d6a68a06cf9fa6c51a67f3f0e495ae Mon Sep 17 00:00:00 2001
From: Hope Ciuffa <hopeciuffa@gmail.com>
Date: Fri, 13 Aug 2021 10:30:21 -0500
Subject: [PATCH 3/4] add universal styling

---
 src/app/app.component.css                      | 17 +++++++++++++++++
 src/app/crew/crew.component.ts                 |  2 +-
 src/app/equipment/equipment.component.ts       |  3 ++-
 src/app/experiments/experiments.component.html |  2 +-
 src/app/experiments/experiments.component.ts   |  2 +-
 src/app/header/header.component.ts             |  2 +-
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 52e7af8520..3eeee0a30e 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -2,4 +2,21 @@
     display: flex;
     padding: 10px;
     justify-content: space-evenly;
+}
+h1 {
+    color: rgb(185, 135, 6);
+    font-family: 'Courier New', Courier, monospace;
+}
+h3 {
+    color: rgb(88, 67, 12);
+    font-size: 22px;
+    font-family: 'Courier New', Courier, monospace;
+}
+li,p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 15px;
+}
+button {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 12px;  
 }
\ No newline at end of file
diff --git a/src/app/crew/crew.component.ts b/src/app/crew/crew.component.ts
index acff2d5823..2686c896c6 100644
--- a/src/app/crew/crew.component.ts
+++ b/src/app/crew/crew.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-crew',
   templateUrl: './crew.component.html',
-  styleUrls: ['./crew.component.css']
+  styleUrls: ['./crew.component.css', '../app.component.css']
 })
 export class CrewComponent implements OnInit {
 
diff --git a/src/app/equipment/equipment.component.ts b/src/app/equipment/equipment.component.ts
index 86d4a08b87..7ade110968 100644
--- a/src/app/equipment/equipment.component.ts
+++ b/src/app/equipment/equipment.component.ts
@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-equipment',
   templateUrl: './equipment.component.html',
-  styleUrls: ['./equipment.component.css']
+  styleUrls: ['./equipment.component.css','../app.component.css']
+
 })
 export class EquipmentComponent implements OnInit {
    equipmentItems: object[] = [
diff --git a/src/app/experiments/experiments.component.html b/src/app/experiments/experiments.component.html
index 92b4a66383..ce4ce84c5c 100644
--- a/src/app/experiments/experiments.component.html
+++ b/src/app/experiments/experiments.component.html
@@ -2,7 +2,7 @@
     <h3>Possible Experiments</h3>
     <ul>
       <li *ngFor="let experiment of experiments">{{experiment}}
-        <button (click)="addExperiment(experiment)" [disabled]="added.includes(experiment)">Add to Mission</button>
+        <button (click)="addExperiment(experiment)" [disabled]="added.includes(experiment)||added.length===3">Add to Mission</button>
       </li>
     </ul>
 </div>
diff --git a/src/app/experiments/experiments.component.ts b/src/app/experiments/experiments.component.ts
index 92d09a6da0..411d2b1d90 100644
--- a/src/app/experiments/experiments.component.ts
+++ b/src/app/experiments/experiments.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-experiments',
   templateUrl: './experiments.component.html',
-  styleUrls: ['./experiments.component.css']
+  styleUrls: ['./experiments.component.css', '../app.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'];
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 57ba169ddc..248e287f9e 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  styleUrls: ['./header.component.css', '../app.component.css']
 })
 export class HeaderComponent implements OnInit {
 

From b64f3c5885e2356b7c17a38dd865e4837fbc39ab Mon Sep 17 00:00:00 2001
From: Hope Ciuffa <hopeciuffa@gmail.com>
Date: Fri, 13 Aug 2021 13:38:20 -0500
Subject: [PATCH 4/4] experiment remove funct

---
 src/app/experiments/experiments.component.html | 4 +++-
 src/app/experiments/experiments.component.ts   | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/experiments/experiments.component.html b/src/app/experiments/experiments.component.html
index ce4ce84c5c..2b509cd8c5 100644
--- a/src/app/experiments/experiments.component.html
+++ b/src/app/experiments/experiments.component.html
@@ -10,7 +10,9 @@ <h3>Possible Experiments</h3>
 <div class = "displayBox">
   <h3>Mission Experiments: </h3>
   <ol>
-      <li *ngFor="let new of added">{{new}}</li>
+    <li *ngFor="let expAdded of added">{{expAdded}}
+      <button (click)="removeExperiment(expAdded)">Finished</button>
+    </li>
       
   </ol>
   
\ No newline at end of file
diff --git a/src/app/experiments/experiments.component.ts b/src/app/experiments/experiments.component.ts
index 411d2b1d90..87e5195283 100644
--- a/src/app/experiments/experiments.component.ts
+++ b/src/app/experiments/experiments.component.ts
@@ -16,4 +16,8 @@ addExperiment(experiment){
     this.added.push(experiment);
     }
   }
+  removeExperiment(expAdded){
+    let index = this.added.indexOf(expAdded);
+    this.added.splice(index, 1);
+  }
 }