API interaction for creation form and increased menu usability

1 files changed, 67 insertions, 42 deletions

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