From 237b9197c08c46a11fe45347e2d41428a558f75b Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 10:18:43 -0400
Subject: component style refactor for simpler display

---
 .../components/cupboard/cupboard.component.html    | 101 +++++++++++----------
 1 file changed, 53 insertions(+), 48 deletions(-)

(limited to 'ufund-ui/src/app/components/cupboard/cupboard.component.html')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..4577844 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,55 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
-    <button (click)="opencreate()">Create new Need</button>
-    <button (click)="openupdate()">Update existing Need</button>
+<div>
+    <h1> Cupboard </h1>
+    <app-need-list #needList></app-need-list>
 </div>
-<div id="create-form">
-    <h1> Create a new need </h1>
-    <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" ngModel><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" ngModel><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" ngModel>
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" ngModel>
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">‼️{{statusText | async}}</span>
-
+<div *ngIf="isManager()" >
+    <h2 > Admin View </h2>
+    <div id="menu">
+        <button (click)="opencreate()">Create new Need</button>
+        <button (click)="openupdate()">Update existing Need</button>
+    </div>
+    <div id="create-form">
+        <h1> Create a new need </h1>
+        <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
+            <label>Name:</label><br>
+            <input type="text" name="name" ngModel><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" ngModel><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" ngModel>
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" ngModel>
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">‼️{{statusText | async}}</span>
+    
+    </div>
+    <div id="update-form">
+        <h1> Update a need </h1>
+        <label>Needs:</label><br>
+        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+            <div *ngFor="let need of needs">
+    
+                <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
+                <label name="template">{{need.name}}</label><br>
+            </div>
+            <label>Name:</label><br>
+            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">{{statusText | async}}</span>
+    
+    </div>
+    <hr>
+    
 </div>
-<div id="update-form">
-    <h1> Update a need </h1>
-    <label>Needs:</label><br>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <div *ngFor="let need of needs">
-
-            <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
-            <label name="template">{{need.name}}</label><br>
-        </div>
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-
-</div>
-<hr>
-<app-need-list #needList></app-need-list>
-- 
cgit v1.2.3