API interaction for creation form and increased menu usability

4 files changed, 78 insertions, 49 deletions

diff --git a/ufund-api/data/cupboard.json b/ufund-api/data/cupboard.json
index 325371d..e185db8 100644
--- a/ufund-api/data/cupboard.json
+++ b/ufund-api/data/cupboard.json
@@ -1 +1 @@
-[{"name":"Money for coral","id":1,"maxGoal":100.0,"type":"MONETARY","filterAttributes":null,"Current":0.0},{"name":"Test","id":2,"maxGoal":100.0,"type":"PHYSICAL","filterAttributes":null,"Current":0.0},{"name":"e","id":3,"maxGoal":3.0,"type":"MONETARY","filterAttributes":[],"Current":0.0}]
\ No newline at end of file
+[{"name":"Money for coral","id":1,"maxGoal":100.0,"type":"MONETARY","filterAttributes":null,"Current":0.0},{"name":"Test","id":2,"maxGoal":100.0,"type":"PHYSICAL","filterAttributes":null,"Current":0.0},{"name":"e","id":3,"maxGoal":3.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Ben Almstead","id":4,"maxGoal":10.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Benjamin Almstead's Big New Need","id":5,"maxGoal":123.0,"type":"PHYSICAL","filterAttributes":[],"Current":0.0},{"name":"Need Need","id":6,"maxGoal":109.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":" eeee","id":7,"maxGoal":45.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"New Need","id":8,"maxGoal":123.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"New need auto updating??","id":9,"maxGoal":123.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":10,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":11,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":12,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":13,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":14,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Need Need Need Need","id":15,"maxGoal":7.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"aa","id":16,"maxGoal":13.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"aa","id":17,"maxGoal":13.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"aa","id":18,"maxGoal":13.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"bb","id":19,"maxGoal":3.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"osuhdiuoqwq","id":20,"maxGoal":1.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"290","id":21,"maxGoal":2.0,"type":"MONETARY","filterAttributes":[],"Current":0.0},{"name":"Ben Almstead","id":22,"maxGoal":21.0,"type":"MONETARY","filterAttributes":[],"Current":0.0}]
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 315db50..18a4d1b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -5,7 +5,7 @@
     padding: 10px 20px;
 }
 
-#create-form, #create-button {
+#menu, #create-form, #delete-form {
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index b767439..6faea9b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,8 +1,12 @@
 <h1> Cupboard </h1>
-<div id="create-button">
-    <button (click)="open()">Create new Need</button>
+<div id="menu">
+    <button (click)="opencreate()">Create new Need</button>
+    <button (click)="opendestroy()">Delete all Needs</button>
+</div>
+<div id="destroy-form">
+    <button (click)="destroy()">Really Really sure you want to delete all needs?</button>
+    <button (click)="back()">Close</button>
 </div>
-
 <div id="create-form">
     <h1> Create a new need </h1>
     <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -18,8 +22,8 @@
         <input type="radio" name="type" value="PHYSICAL" ngModel>
         <label>Physical</label><br>
         <input type="submit" value="Submit"> 
-        <button (click)="close()">Close</button>
+        <button (click)="back()">Close</button>
     </form>
 </div>
 <hr>
-<app-need-list></app-need-list>
+<app-need-list></app-need-list>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index cc09393..213296d 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
-import { NeedListComponent } from '../need-list/need-list.component';
 import { Need, GoalType } from '../../models/Need';
 
 @Component({
@@ -9,55 +8,81 @@ import { Need, GoalType } from '../../models/Need';
   templateUrl: './cupboard.component.html',
   styleUrl: './cupboard.component.css'
 })
-export class CupboardComponent implements 
-  OnInit {
-  need: Need = {
-    id: 0,
-    name: '',
-    maxGoal: 0,
-    type: GoalType.MONETARY,
-    filterAttributes: [],
-    current: 0
-  };
-
-  
+
+export class CupboardComponent implements OnInit {
     constructor(private cupboardService: CupboardService) { }
+    
     ngOnInit(): void {
       this.close();
+      this.openmenu();
     }
-    
-    open() {
-      const formElement = document.getElementById('create-form');
-      if (formElement) {
-        formElement.style.visibility = 'visible';
-        formElement.style.position = 'relative';
+
+    private hideElement(element: any) {
+      if (element){
+        element.style.visibility = 'hidden';
+        element.style.position = 'absolute';
       }
-      const buttonElement = document.getElementById('create-button');
-      if (buttonElement) {
-        buttonElement.style.visibility = 'hidden';
-        buttonElement.style.position = 'absolute';
+    }
+
+    private showElement(element: any) {
+      if (element){
+        element.style.visibility = 'visible';
+        element.style.position = 'relative';
       }
     }
 
+    openmenu() {
+      const menuElement = document.getElementById('menu');
+      this.showElement(menuElement);
+    }
+    
+    opencreate() {
+      this.close();
+      this.showElement(document.getElementById('create-form'));
+    }
+
+    opendestroy() {
+      this.close();
+      this.showElement(document.getElementById('destroy-form'));
+    }
+
+    destroy() {
+
+    }
+
+    back() {
+      this.close();
+      this.openmenu();
+    }
+    
     close() {
-      const formElement = document.getElementById('create-form');
-      if (formElement) {
-        formElement.style.visibility = 'hidden';
-        formElement.style.position = 'absolute';
-      }
-      const buttonElement = document.getElementById('create-button');
-      if (buttonElement) {
-        buttonElement.style.visibility = 'visible';
-        buttonElement.style.position = 'relative';
-      }
+      this.hideElement(document.getElementById('create-form'));
+      this.hideElement(document.getElementById('destroy-form'));
+      this.hideElement(document.getElementById('menu'));
     }
 
+    
+
     submit(form: any) {
-      console.log(form);
-      this.need.name = form.name;
-      this.need.id = form.id;
-      this.need.maxGoal = form.maxGoal;
-      this.need.type = GoalType[form.type as keyof typeof GoalType];
-      console.log(this.cupboardService.createNeed(this.need));
-    }
-  }
+      const need: Need = {
+        name: form.name,
+        id: form.id,
+        maxGoal: form.maxGoal,
+        type: GoalType[form.type as keyof typeof GoalType],
+        filterAttributes: [],
+        current: 0
+      };
+      console.log("form submitted. creating need: ", need);
+      this.cupboardService.createNeed(need).subscribe(
+        (result) => {
+          if (result) {
+            console.log("need created successfully");
+            location.reload();
+          } else {
+            console.log("need creation failed");
+          }
+        }
+
+      );
+    }
+  }
\ No newline at end of file