From d3f5dfc2c121dde8c6b979e05f6e556cc4b919ed Mon Sep 17 00:00:00 2001
From: lashundra <lashundrasdavis@att.net>
Date: Tue, 14 Mar 2023 01:34:21 -0500
Subject: [PATCH 1/2] Completed studio 2

---
 src/app/crew/crew.component.html     | 31 ++++++++++++++++++++++++++--
 src/app/crew/crew.component.ts       | 20 ++++++++++++++++++
 src/app/header/header.component.html | 11 +++++++++-
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/app/crew/crew.component.html b/src/app/crew/crew.component.html
index ace2dd399e..3cae6df779 100644
--- a/src/app/crew/crew.component.html
+++ b/src/app/crew/crew.component.html
@@ -1,6 +1,33 @@
 <h3>Crew</h3>
 <ul>
-  <li>Jessica Watkins</li>
+  <li *ngFor="let member of crew">
+
+    <span *ngIf="memberBeingEdited !== member; else elseBlock"></span>
+
+    <span (click)="edit(member)" class="editable-text">{{member.name}}</span>
+    <span *ngIf="member.firstMission">- 1st</span>
+    <button (click)="remove(member)">remove</button>
+
+    <ng-template #elseBlock>
+      
+      <input />
+      <button>save</button>
+   </ng-template>
+
+
+  </li>
+  
+  <!-- <li>Jessica Watkins</li>
   <li>Raja Chari</li>
-  <li>Jasmin Moghbeli</li>
+  <li>Jasmin Moghbeli</li> -->
 </ul>
+<!-- 
+<input #name type="text"/>
+<label>First mission<input #firstMission type="checkbox"/></label>
+<button (click)="add(name.value, firstMission.checked)">Add</button> -->
+
+<ng-template #elseBlock>
+  <!-- edit state of member -->
+  <input #updatedName (keyup.enter)="save(updatedName.value, member)" value="{{member.name}}"/>
+  <button (click)="save(updatedName.value, member)">save</button>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/crew/crew.component.ts b/src/app/crew/crew.component.ts
index 05734a7b51..d733018cba 100644
--- a/src/app/crew/crew.component.ts
+++ b/src/app/crew/crew.component.ts
@@ -18,4 +18,24 @@ export class CrewComponent implements OnInit {
   ngOnInit() {
   }
 
+  add(memberName: string, isFirst: boolean) {
+    this.crew.push({name: memberName, firstMission: isFirst});
+  }
+
+  remove(member: object) {
+    let index = this.crew.indexOf(member);
+    this.crew.splice(index, 1);
+  }
+
+  memberBeingEdited: object = null;
+
+  edit(member: object) {
+    this.memberBeingEdited = member;
+ }
+ 
+  save(name: string, member: object) {
+    member['name'] = name;
+    this.memberBeingEdited = null;
+  }
+
 }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 7fe994bb6d..bea2f64c4c 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,4 +11,13 @@ <h3>
     </ng-template>
 </h3>
 
-<h3>Carrier Rocket: {{ rocketName }}</h3>
+<h3>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>
+
+</h3>

From f70cb3c6cb6d58288bbcf674c45b59ccbda03f60 Mon Sep 17 00:00:00 2001
From: lashundra <lashundrasdavis@att.net>
Date: Thu, 16 Mar 2023 03:18:46 -0500
Subject: [PATCH 2/2] Completed Studio 3

---
 src/app/app.component.css                     |  1 +
 src/app/app.component.ts                      |  2 +
 src/app/crew/crew.component.css               | 25 ++++++++++
 src/app/crew/crew.component.html              | 46 ++++++-----------
 src/app/crew/crew.component.ts                | 49 ++++++++++---------
 src/app/equipment/equipment.component.css     | 25 ++++++++++
 src/app/equipment/equipment.component.html    | 30 +++++++++---
 src/app/equipment/equipment.component.ts      | 21 ++++++++
 src/app/experiments/experiments.component.css |  8 +++
 .../experiments/experiments.component.html    | 10 ++--
 src/app/experiments/experiments.component.ts  |  1 +
 src/app/header/header.component.css           | 10 ++++
 src/app/header/header.component.html          | 10 ++--
 src/app/header/header.component.ts            | 10 +++-
 14 files changed, 175 insertions(+), 73 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 545e7d9620..52e7af8520 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,4 +1,5 @@
 .box {
     display: flex;
     padding: 10px;
+    justify-content: space-evenly;
 }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a118c1b9a6..de4313a85c 100644
--- a/src/app/app.component.ts
+++ b/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;
 }
diff --git a/src/app/crew/crew.component.css b/src/app/crew/crew.component.css
index e69de29bb2..b5c22cbdf4 100644
--- a/src/app/crew/crew.component.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/crew/crew.component.html b/src/app/crew/crew.component.html
index 3cae6df779..db098b2e41 100644
--- a/src/app/crew/crew.component.html
+++ b/src/app/crew/crew.component.html
@@ -1,33 +1,15 @@
-<h3>Crew</h3>
-<ul>
-  <li *ngFor="let member of crew">
 
-    <span *ngIf="memberBeingEdited !== member; else elseBlock"></span>
-
-    <span (click)="edit(member)" class="editable-text">{{member.name}}</span>
-    <span *ngIf="member.firstMission">- 1st</span>
-    <button (click)="remove(member)">remove</button>
-
-    <ng-template #elseBlock>
-      
-      <input />
-      <button>save</button>
-   </ng-template>
-
-
-  </li>
-  
-  <!-- <li>Jessica Watkins</li>
-  <li>Raja Chari</li>
-  <li>Jasmin Moghbeli</li> -->
-</ul>
-<!-- 
-<input #name type="text"/>
-<label>First mission<input #firstMission type="checkbox"/></label>
-<button (click)="add(name.value, firstMission.checked)">Add</button> -->
-
-<ng-template #elseBlock>
-  <!-- edit state of member -->
-  <input #updatedName (keyup.enter)="save(updatedName.value, member)" value="{{member.name}}"/>
-  <button (click)="save(updatedName.value, member)">save</button>
-</ng-template>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/app/crew/crew.component.ts b/src/app/crew/crew.component.ts
index d733018cba..35fbac3060 100644
--- a/src/app/crew/crew.component.ts
+++ b/src/app/crew/crew.component.ts
@@ -7,35 +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() {
   }
 
-  add(memberName: string, isFirst: boolean) {
-    this.crew.push({name: memberName, firstMission: isFirst});
-  }
-
-  remove(member: object) {
-    let index = this.crew.indexOf(member);
-    this.crew.splice(index, 1);
-  }
-
-  memberBeingEdited: object = null;
-
-  edit(member: object) {
-    this.memberBeingEdited = member;
- }
- 
-  save(name: string, member: object) {
-    member['name'] = name;
-    this.memberBeingEdited = null;
-  }
+  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);
+    }
+  } 
 
 }
diff --git a/src/app/equipment/equipment.component.css b/src/app/equipment/equipment.component.css
index e69de29bb2..3ced30ee4c 100644
--- a/src/app/equipment/equipment.component.css
+++ b/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;
+}
+
+
diff --git a/src/app/equipment/equipment.component.html b/src/app/equipment/equipment.component.html
index 750e16ba32..b525cd0287 100644
--- a/src/app/equipment/equipment.component.html
+++ b/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>
diff --git a/src/app/equipment/equipment.component.ts b/src/app/equipment/equipment.component.ts
index 3999cba700..cc956387b8 100644
--- a/src/app/equipment/equipment.component.ts
+++ b/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;
+ }
 
 }
diff --git a/src/app/experiments/experiments.component.css b/src/app/experiments/experiments.component.css
index e69de29bb2..d24991d07d 100644
--- a/src/app/experiments/experiments.component.css
+++ b/src/app/experiments/experiments.component.css
@@ -0,0 +1,8 @@
+.displayBox {
+    height: 275px;
+    width: auto;
+}
+
+h3 {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/experiments/experiments.component.html b/src/app/experiments/experiments.component.html
index 1726c855d6..94ac3083a8 100644
--- a/src/app/experiments/experiments.component.html
+++ b/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>
diff --git a/src/app/experiments/experiments.component.ts b/src/app/experiments/experiments.component.ts
index 10d9968687..9152dcb6ac 100644
--- a/src/app/experiments/experiments.component.ts
+++ b/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() { }
 
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
index ce042c9c43..407b3de69a 100644
--- a/src/app/header/header.component.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index bea2f64c4c..9e4a111d6a 100644
--- a/src/app/header/header.component.html
+++ b/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,15 +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:
+<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 }}"/>
+        <input #rocket (keyup.enter)="updateRocket(rocket.value)" [value]=rocketName/>
         <button (click)="updateRocket(rocket.value)">save</button>
     </ng-template>
 
-</h3>
+</h2>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 6e12a6906b..a1aeccae2b 100644
--- a/src/app/header/header.component.ts
+++ b/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;
+  }
+
 }