From 8ec987f46b4ef3ff1ce23d9942662a74e162689d Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 09:58:32 -0400
Subject: need-list search embedded in normal display with better feedback
---
.../components/need-list/need-list.component.css | 2 +-
.../components/need-list/need-list.component.html | 23 ++++-----
.../components/need-list/need-list.component.ts | 60 +++++++++++-----------
3 files changed, 41 insertions(+), 44 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..88bdfbe 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -15,7 +15,7 @@ li, div {
}
-#search-form {
+#search-container {
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..504deb9 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,25 +1,20 @@
<h1>Needs List</h1>
<input id="search-button" type="button" value="Search" (click)="open()">
-<div id="search-form">
- <form #searchForm="ngForm">
+<div id="search-container">
+ <form id="search-form" #searchForm="ngForm">
<label>Search:</label><br>
<input type="text" name="search" (input)="search(searchForm.value)" ngModel>
- <input type="button" value="Clear" (click)="searchForm.reset()"> <br>
+ <input type="reset" value="Clear" (click)="search(null)"> <br>
</form>
<button (click)="close()">Close</button>
- <div>
- <h2 id="search-status">Search Results:</h2>
- <div *ngFor="let need of searchResults">
- <a routerLink="/need/{{need.id}}">
- {{need.name}}
- </a>
- <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
- <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
- </div>
- </div>
</div>
-<li *ngFor="let need of needs">
+<!-- display for when results are present and filtered-->
+<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
+<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
+<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
+
+<li *ngFor="let need of searchResults">
<a routerLink="/need/{{need.id}}">
{{need.name}}
</a>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..f5d7855 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
@@ -19,12 +20,16 @@ export class NeedListComponent {
) {}
refresh() {
- this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+ this.cupboardService.getNeeds().subscribe(n => {
+ this.needs = n;
+ this.searchResults = this.needs;
+ });
+
+ console.log(this.searchResults);
}
ngOnInit(): void {
this.refresh()
-
this.close();
}
@@ -42,20 +47,13 @@ export class NeedListComponent {
}
}
- private updateSearchStatus(text: string) {
- let element = document.getElementById('search-status');
- if (element) {
- element.innerHTML = text;
- }
- }
-
open() {
this.hideElement(document.getElementById('search-button'));
- this.showElement(document.getElementById('search-form'));
+ this.showElement(document.getElementById('search-container'));
}
close() {
- this.hideElement(document.getElementById('search-form'));
+ this.hideElement(document.getElementById('search-container'));
this.showElement(document.getElementById('search-button'));
this.hideElement(document.getElementById('search-status'));
}
@@ -69,24 +67,28 @@ export class NeedListComponent {
if (this.searchDelay) {
clearTimeout(this.searchDelay);
}
+ if (form) {
+ this.searchDelay = setTimeout(() => {
+
+ if (form) {
+ const currentSearchValue = form.search; //latest value of the search
+ this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+ this.searchResults = n;
+ console.log(currentSearchValue, this.searchResults);
+ this.showElement(document.getElementById('search-results'));
+ this.showElement(document.getElementById('search-status'));
+ });
+ }
+ }, 250);
+ } else {
+ //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
+ //clear timeout to stop pending search
+ clearTimeout(this.searchDelay);
+ this.searchResults = this.needs;
+ }
+
- this.searchDelay = setTimeout(() => {
- const currentSearchValue = form.search; //latest value of the search
- this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
- this.searchResults = n;
- console.log(currentSearchValue, this.searchResults);
- this.showElement(document.getElementById('search-results'));
- this.showElement(document.getElementById('search-status'));
- if (this.searchResults.length === this.needs.length) {
- this.updateSearchStatus("Please refine your search");
- this.searchResults = [];
- } else if (this.searchResults.length === 0) {
- this.updateSearchStatus("No results found");
- } else {
- this.updateSearchStatus("Search results:");
- }
- });
- }, 250);
+
}
delete(id : number) {
@@ -127,6 +129,6 @@ export class NeedListComponent {
}
back() {
- this.searchResults = [];
+ this.searchResults = this.needs;
}
}
--
cgit v1.2.3
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
---
.../app/components/cupboard/cupboard.component.css | 20 +++-
.../components/cupboard/cupboard.component.html | 101 +++++++++++----------
.../app/components/cupboard/cupboard.component.ts | 2 -
3 files changed, 69 insertions(+), 54 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..4c6ac4b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,18 +1,30 @@
:host {
- display: block;
+ display: flex;
+ justify-content: left;
border: 2px solid #000;
border-radius: 5px;
padding: 10px 20px;
}
+#menu {
+ display: flex;
+ justify-content: space-between;
+ margin: 10px;
+ * {
+ border: 3px solid #000;
+
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ margin-right: 5px;
+ border-bottom: 0px;
+ }
+}
-#menu, #create-form, #delete-form, #update-form {
+#create-form, #delete-form, #update-form {
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
- width: 20%;
visibility: visible;
-
}
#create-button {
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>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 24b3e2d..f8023c3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -55,7 +55,6 @@ export class CupboardComponent implements OnInit {
element.style.position = 'relative';
}
}
-
openmenu() {
const menuElement = document.getElementById('menu');
this.showElement(menuElement);
@@ -79,7 +78,6 @@ export class CupboardComponent implements OnInit {
close() {
this.hideElement(document.getElementById('create-form'));
this.hideElement(document.getElementById('destroy-form'));
- this.hideElement(document.getElementById('menu'));
this.hideElement(document.getElementById('update-form'));
}
--
cgit v1.2.3
From bab829a60dc243b5987873ea0f0114b032643995 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 10:18:55 -0400
Subject: need list size fix
---
ufund-ui/src/app/components/need-list/need-list.component.css | 1 -
1 file changed, 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 88bdfbe..64988d1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -2,7 +2,6 @@
list-style-type:circle;
border: 2px solid #000;
display: block;
- width: 30%;
border-radius: 5px;
}
--
cgit v1.2.3
From d386b35bf24444240b0d670674c3e75ea5d8b3ce Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Fri, 21 Mar 2025 10:07:45 -0400
Subject: delete icon in need list
---
ufund-ui/src/app/components/need-list/need-list.component.css | 11 ++++++++++-
.../src/app/components/need-list/need-list.component.html | 7 ++++---
2 files changed, 14 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 64988d1..f8948ee 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -3,7 +3,6 @@
border: 2px solid #000;
display: block;
border-radius: 5px;
-
}
li, div {
@@ -11,7 +10,17 @@ li, div {
border-radius: 5px;
padding: 5px;
margin: 5px;
+}
+
+li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.icon {
+ width: 15px;
+ margin: 3px -3px -1px -3px;
}
#search-container {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 504deb9..9f22633 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,12 +1,11 @@
<h1>Needs List</h1>
-<input id="search-button" type="button" value="Search" (click)="open()">
<div id="search-container">
<form id="search-form" #searchForm="ngForm">
<label>Search:</label><br>
<input type="text" name="search" (input)="search(searchForm.value)" ngModel>
<input type="reset" value="Clear" (click)="search(null)"> <br>
</form>
- <button (click)="close()">Close</button>
+ <!--<button (click)="close()">Close</button>-->
</div>
<!-- display for when results are present and filtered-->
@@ -18,6 +17,8 @@
<a routerLink="/need/{{need.id}}">
{{need.name}}
</a>
- <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
+ <button (click)="delete(need.id)" *ngIf="isManager()">
+ <img class="icon" src="/delete.png" alt="Delete">
+ </button>
<button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
</li>
--
cgit v1.2.3
From 0ba69e502b89ed2d8fe51b3b8b40eb8fba5830e1 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 21 Mar 2025 23:11:37 -0400
Subject: start making some css
---
ufund-ui/src/app/app.component.css | 19 +++++++++++++++++++
ufund-ui/src/app/app.component.html | 19 +++++++++++++++----
ufund-ui/src/styles.css | 12 ++++++++++++
3 files changed, 46 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..b2dfb87 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,19 @@
+#header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ border-bottom: black solid 1px;
+ padding: 0 10px;
+ background-color: #d9d9d9;
+
+ h1 {
+ padding: 0;
+ margin: 0;
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..3058117 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+ <span>
+ <a routerLink="/">
+ <h1>Jelly Solutions</h1>
+ </a>
+ </span>
+ <div>
+ <a routerLink="/dashboard">Dashboard</a>
+ <a routerLink="/cupboard">Cupboard</a>
+ <a routerLink="/basket">Basket</a>
+ <span>{{currentUser$ | async}}</span>
+ <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
+ <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+ </div>
+</div>
<router-outlet />
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..471f272 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,13 @@
/* You can add global styles to this file, and also import other style files */
+
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+}
+
+body {
+ font-family: sans-serif;
+}
--
cgit v1.2.3
From 0be2b5868bdda04146a22ec81596dbbb81922360 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 00:04:40 -0400
Subject: improve login page
---
ufund-ui/src/app/app.component.css | 7 ++++++-
.../src/app/components/login/login.component.css | 22 +++++++++++++++++-----
.../src/app/components/login/login.component.html | 16 +++++++++-------
ufund-ui/src/styles.css | 9 +++++++++
4 files changed, 41 insertions(+), 13 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index b2dfb87..63608c0 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -1,10 +1,15 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
#header {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: black solid 1px;
padding: 0 10px;
- background-color: #d9d9d9;
h1 {
padding: 0;
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..cae0992 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,20 @@
-:host, .border {
- display: flex;
- flex-direction: column;
- max-width: 300px;
- gap: 5px
+:host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+}
+
+#box {
+ display: flex;
+ flex-direction: column;
+ max-width: 330px;
+ gap: 5px;
+ backdrop-filter: blur(10px);
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 30px;
+ color: white;
}
.border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 2cdb6d0..aff108f 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,7 +1,9 @@
-<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-<p>Login:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" #password>
-<button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
-<span *ngIf="statusText">{{statusText | async}}</span>
+<div id="box">
+ <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
+ <p>Login:</p>
+ <input placeholder="Username" type="text" #username>
+ <input placeholder="Password" type="password" #password>
+ <button type="button" (click)="login(username.value, password.value)">Login</button>
+ <button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+ <span *ngIf="statusText">{{statusText | async}}</span>
+</div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 471f272..fdf67c7 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -6,8 +6,17 @@
html, body {
margin: 0;
+ height: 100%;
}
body {
font-family: sans-serif;
}
+
+input {
+ font-size: 14pt;
+}
+
+button, .button {
+ font-size: 14pt;
+}
--
cgit v1.2.3
From 69e79cc423110ea7df3d960f95e612934d256dd8 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 00:24:09 -0400
Subject: Create basic home page
---
ufund-ui/src/app/app-routing.module.ts | 12 ++++++------
.../src/app/components/home-page/home-page.component.css | 7 +++++++
.../src/app/components/home-page/home-page.component.html | 5 ++---
.../src/app/components/need-page/need-page.component.html | 4 ++--
4 files changed, 17 insertions(+), 11 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index 4b76654..c83db8a 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -8,12 +8,12 @@ import {FundingBasketComponent} from './components/funding-basket/funding-basket
import {NeedPageComponent} from './components/need-page/need-page.component';
const routes: Routes = [
- {path: '', component: HomePageComponent},
- {path: 'login', component: LoginComponent},
- {path: 'cupboard', component: CupboardComponent},
- {path: 'dashboard', component: DashboardComponent},
- {path: 'basket', component: FundingBasketComponent},
- {path: 'need/:id', component: NeedPageComponent}
+ { path: '', component: HomePageComponent, title: "Home | JS" },
+ { path: 'login', component: LoginComponent, title: "Login | JS" },
+ { path: 'cupboard', component: CupboardComponent, title: "Cupboard | JS" },
+ { path: 'dashboard', component: DashboardComponent, title: "Dashboard | JS" },
+ { path: 'basket', component: FundingBasketComponent, title: "Basket | JS" },
+ { path: 'need/:id', component: NeedPageComponent, title: "Need | JS" }
];
@NgModule({
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index e69de29..5f65225 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -0,0 +1,7 @@
+:host {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index d41e670..b2eed0b 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,3 +1,2 @@
-<a routerLink="/login">
- Login/Sign Up
-</a>
\ No newline at end of file
+<h1>Helping fund coral reef and marine life conservation</h1>
+<button routerLink="/cupboard">View needs</button>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 90fd459..b2579c9 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,4 +1,4 @@
-<button routerLink="/dashboard">Back to dashboard</button>
+<button routerLink="/cupboard">Back to cupboard</button>
<h1>Viewing Need: {{need?.name}}</h1>
<a>internal id: {{need?.id}}</a>
<div style="display: flex; column-gap: 6px;">
@@ -19,4 +19,4 @@
<p>Goal: {{need?.maxGoal}}</p>
<p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file
+<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
--
cgit v1.2.3
From 2b67bd14828c8c0bffe461a66542a2dba6c19f93 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 11:21:30 -0400
Subject: API creation bug fix- the max goal would not be casted properly
---
ufund-ui/src/app/components/cupboard/cupboard.component.css | 9 ++++++---
ufund-ui/src/app/components/need-list/need-list.component.css | 1 -
2 files changed, 6 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 4c6ac4b..434b136 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,17 +1,21 @@
:host {
display: flex;
- justify-content: left;
+ justify-content: space-evenly;
border: 2px solid #000;
border-radius: 5px;
padding: 10px 20px;
+ > div {
+ width: 40%;
+ }
}
+
+
#menu {
display: flex;
justify-content: space-between;
margin: 10px;
* {
border: 3px solid #000;
-
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 5px;
@@ -29,5 +33,4 @@
#create-button {
padding: 10px 20px;
-
}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index f8948ee..bf7b982 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -4,7 +4,6 @@
display: block;
border-radius: 5px;
}
-
li, div {
border: 2px solid #000;
border-radius: 5px;
--
cgit v1.2.3
From 2abd4b4ba9171821ac545f8dcb67be1e7d722e01 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 11:58:39 -0400
Subject: replaced unneccicary methods for form selection with ngIf
---
ufund-ui/src/app/components/cupboard/cupboard.component.css | 2 +-
ufund-ui/src/app/components/cupboard/cupboard.component.html | 12 +++++-------
2 files changed, 6 insertions(+), 8 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 434b136..6c2e5c6 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -12,7 +12,7 @@
#menu {
display: flex;
- justify-content: space-between;
+
margin: 10px;
* {
border: 3px 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 4577844..41bb4a7 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -5,10 +5,10 @@
<div *ngIf="isManager()" >
<h2 > Admin View </h2>
<div id="menu">
- <button (click)="opencreate()">Create new Need</button>
- <button (click)="openupdate()">Update existing Need</button>
+ <button (click)="selectForm('create')">Create new Need</button>
+ <button (click)="selectForm('update')">Update existing Need</button>
</div>
- <div id="create-form">
+ <div id="create-form" *ngIf="selectedForm === 'create'">
<h1> Create a new need </h1>
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
<label>Name:</label><br>
@@ -22,11 +22,10 @@
<label>Physical</label><br>
<input type="submit" value="Submit">
</form>
- <button (click)="back()">Close</button>
- <span *ngIf="statusText">‼️{{statusText | async}}</span>
+ <span *ngIf="statusText">{{statusText | async}}</span>
</div>
- <div id="update-form">
+ <div id="update-form" *ngIf="selectedForm === 'update'">
<h1> Update a need </h1>
<label>Needs:</label><br>
<form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
@@ -46,7 +45,6 @@
<label>Physical</label><br>
<input type="submit" value="Submit">
</form>
- <button (click)="back()">Close</button>
<span *ngIf="statusText">{{statusText | async}}</span>
</div>
--
cgit v1.2.3
From e9564ba2514f32c63d2ce4ecfc9eeb9f3269f3dd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:14:00 -0400
Subject: [ngClass] tab styling
---
.../app/components/cupboard/cupboard.component.css | 21 ++++++----
.../components/cupboard/cupboard.component.html | 4 +-
.../app/components/cupboard/cupboard.component.ts | 46 ++--------------------
3 files changed, 20 insertions(+), 51 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 6c2e5c6..6e70951 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -14,13 +14,20 @@
display: flex;
margin: 10px;
- * {
- border: 3px solid #000;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- margin-right: 5px;
- border-bottom: 0px;
- }
+
+}
+
+.tab, .selected-tab {
+ background-color: lightgray;
+ border: 3px solid #000;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ margin-right: 5px;
+ border-bottom: 0px;
+}
+
+.selected-tab {
+ background-color: white;
}
#create-form, #delete-form, #update-form {
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 41bb4a7..9b74b2a 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -5,8 +5,8 @@
<div *ngIf="isManager()" >
<h2 > Admin View </h2>
<div id="menu">
- <button (click)="selectForm('create')">Create new Need</button>
- <button (click)="selectForm('update')">Update existing Need</button>
+ <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
+ <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
</div>
<div id="create-form" *ngIf="selectedForm === 'create'">
<h1> Create a new need </h1>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index f8023c3..646c4ff 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import { NeedListComponent } from '../need-list/need-list.component';
export class CupboardComponent implements OnInit {
protected statusText = new BehaviorSubject("")
-
+ selectedForm = "create"
needs: any;
@ViewChild("needList") needList?: NeedListComponent
@@ -24,9 +24,6 @@ export class CupboardComponent implements OnInit {
ngOnInit(): void {
this.cupboardService.getNeeds().subscribe(n => this.needs = n);
- this.close();
- this.openmenu();
-
if (this.isManager()) {
console.log("Admin view of Cupboard");
} else {
@@ -41,44 +38,9 @@ export class CupboardComponent implements OnInit {
type: ''
};
selectedNeedId: number | null = null;
-
- private hideElement(element: any) {
- if (element) {
- element.style.visibility = 'hidden';
- element.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'));
- }
-
- openupdate() {
- this.close();
- this.showElement(document.getElementById('update-form'));
- }
-
- back() {
- this.close();
- this.openmenu();
- }
-
- close() {
- this.hideElement(document.getElementById('create-form'));
- this.hideElement(document.getElementById('destroy-form'));
- this.hideElement(document.getElementById('update-form'));
+
+ selectForm(name: string) {
+ this.selectedForm = name;
}
populateForm(need: any): void {
--
cgit v1.2.3
From d8b9c0da32383630f0831fdf6a7f13c96174ee4c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:17:50 -0400
Subject: removing unneccicary functions for element visiblity in need list
---
.../components/need-list/need-list.component.css | 3 +--
.../components/need-list/need-list.component.ts | 29 ----------------------
2 files changed, 1 insertion(+), 31 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bf7b982..29a9626 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -26,6 +26,5 @@ li {
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
- border-radius: 5px;
- visibility: visible;
+ border-radius: 5px;
}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index f5d7855..3f77df4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -24,38 +24,11 @@ export class NeedListComponent {
this.needs = n;
this.searchResults = this.needs;
});
-
console.log(this.searchResults);
}
ngOnInit(): void {
this.refresh()
- this.close();
- }
-
- private showElement(element: any) {
- if (element){
- element.style.visibility = 'visible';
- element.style.position = 'relative';
- }
- }
-
- private hideElement(element: any) {
- if (element){
- element.style.visibility = 'hidden';
- element.style.position = 'absolute';
- }
- }
-
- open() {
- this.hideElement(document.getElementById('search-button'));
- this.showElement(document.getElementById('search-container'));
- }
-
- close() {
- this.hideElement(document.getElementById('search-container'));
- this.showElement(document.getElementById('search-button'));
- this.hideElement(document.getElementById('search-status'));
}
private searchDelay: any;
@@ -75,8 +48,6 @@ export class NeedListComponent {
this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
this.searchResults = n;
console.log(currentSearchValue, this.searchResults);
- this.showElement(document.getElementById('search-results'));
- this.showElement(document.getElementById('search-status'));
});
}
}, 250);
--
cgit v1.2.3
From 2ae7c1036b7ce398e2b18928215f74d57bb3cec6 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:28:36 -0400
Subject: search reformatting
---
ufund-ui/src/app/components/need-list/need-list.component.css | 1 -
ufund-ui/src/app/components/need-list/need-list.component.html | 3 +--
2 files changed, 1 insertion(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 29a9626..2e4a31b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -24,7 +24,6 @@ li {
#search-container {
background-color: #d9d9d9;
- padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 9f22633..0345519 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,8 +1,7 @@
<h1>Needs List</h1>
<div id="search-container">
<form id="search-form" #searchForm="ngForm">
- <label>Search:</label><br>
- <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
+ <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
<input type="reset" value="Clear" (click)="search(null)"> <br>
</form>
<!--<button (click)="close()">Close</button>-->
--
cgit v1.2.3
From b725948521e81965a18991e7dd59a2bc84dbd460 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:56:28 -0400
Subject: need list uses button instead of link
---
.../app/components/need-list/need-list.component.css | 15 ++++++++++++---
.../components/need-list/need-list.component.html | 20 +++++++++++---------
2 files changed, 23 insertions(+), 12 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 2e4a31b..8f017cd 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,17 +1,26 @@
:host {
- list-style-type:circle;
+ list-style-type: none;
border: 2px solid #000;
display: block;
border-radius: 5px;
}
-li, div {
+
+div, li > button {
border: 2px solid #000;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
-li {
+ul {
+ list-style-type: none;
+ padding-inline-start: 0px;
+}
+
+li > button {
+ width: 98%;
+ padding: 1%;
+ margin: 1%;
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 0345519..fef22d7 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -12,12 +12,14 @@
<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-<li *ngFor="let need of searchResults">
- <a routerLink="/need/{{need.id}}">
- {{need.name}}
- </a>
- <button (click)="delete(need.id)" *ngIf="isManager()">
- <img class="icon" src="/delete.png" alt="Delete">
- </button>
- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-</li>
+<ul>
+ <li *ngFor="let need of searchResults">
+ <button [routerLink]="'/need/' + need.id">
+ {{need.name}}
+ <button (click)="delete(need.id)" *ngIf="isManager()">
+ <img class="icon" src="/delete.png" alt="Delete">
+ </button>
+ <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
+ </button>
+ </li>
+</ul>
\ No newline at end of file
--
cgit v1.2.3
From 381e57d62f01056d823af74d186f6de87df9fcee Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 16:35:10 -0400
Subject: Dark mode!
---
ufund-ui/src/app/app.component.css | 8 +++++++-
.../app/components/cupboard/cupboard.component.css | 8 ++++----
.../src/app/components/login/login.component.css | 3 ++-
.../src/app/components/login/login.component.html | 2 +-
.../components/need-list/need-list.component.css | 8 ++++----
ufund-ui/src/styles.css | 21 +++++++++++++++++++++
6 files changed, 39 insertions(+), 11 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 63608c0..17bbed7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,12 +8,14 @@
display: flex;
flex-direction: row;
justify-content: space-between;
- border-bottom: black solid 1px;
+ border-bottom: light-dark(#d3d3d3, black) solid 1px;
padding: 0 10px;
+ background-color: light-dark(#f5f5f5, #2e2e2e);
h1 {
padding: 0;
margin: 0;
+
}
div {
@@ -21,4 +23,8 @@
align-items: center;
gap: 10px;
}
+
+ a {
+ color: light-dark(black, white);
+ }
}
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..c8add60 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,6 +1,6 @@
:host {
display: block;
- border: 2px solid #000;
+ /*border: 2px solid #000;*/
border-radius: 5px;
padding: 10px 20px;
}
@@ -9,7 +9,7 @@
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
- border-radius: 5px;
+ border-radius: 5px;
width: 20%;
visibility: visible;
@@ -17,5 +17,5 @@
#create-button {
padding: 10px 20px;
-
-}
\ No newline at end of file
+
+}
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index cae0992..c752de3 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -10,11 +10,12 @@
display: flex;
flex-direction: column;
max-width: 330px;
- gap: 5px;
+ gap: 7px;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.1);
padding: 30px;
color: white;
+ border-radius: 5px;
}
.border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index aff108f..516b07b 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,6 +1,6 @@
<div id="box">
<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
- <p>Login:</p>
+ <h1>Login</h1>
<input placeholder="Username" type="text" #username>
<input placeholder="Password" type="password" #password>
<button type="button" (click)="login(username.value, password.value)">Login</button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..fa3ed4f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -4,7 +4,7 @@
display: block;
width: 30%;
border-radius: 5px;
-
+
}
li, div {
@@ -16,9 +16,9 @@ li, div {
}
#search-form {
- background-color: #d9d9d9;
+ background-color: light-dark(#d9d9d9, #1b1b1b);
padding: 10px 20px 20px 20px;
border: 2px solid #000;
- border-radius: 5px;
+ border-radius: 5px;
visibility: visible;
- }
\ No newline at end of file
+ }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index fdf67c7..dc7dcea 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,5 +1,9 @@
/* You can add global styles to this file, and also import other style files */
+:root {
+ color-scheme: light dark;
+}
+
* {
box-sizing: border-box;
}
@@ -7,6 +11,7 @@
html, body {
margin: 0;
height: 100%;
+ background-color: light-dark(white, #242424);
}
body {
@@ -15,8 +20,24 @@ body {
input {
font-size: 14pt;
+ padding: 5px;
+ border-radius: 5px;
+ border-style: none;
+ background-color: light-dark(#ebebeb, #3a3a3a);
+
+ &:hover {
+ background-color: light-dark(#e1e1e1, #444444);
+ }
}
button, .button {
font-size: 14pt;
+ padding: 5px 10px;
+ border-radius: 5px;
+ border-style: none;
+ background-color: light-dark(#ebebeb, #3a3a3a);
+
+ &:hover {
+ background-color: light-dark(#e1e1e1, #444444);
+ }
}
--
cgit v1.2.3
From a05f6f0ab8dead76f937a2d7196fa005af0367fe Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 10:27:31 -0400
Subject: hover feedback for need list's button
---
ufund-ui/src/app/components/need-list/need-list.component.css | 6 ++++++
ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++--
ufund-ui/src/app/components/need-list/need-list.component.ts | 7 +++++++
3 files changed, 15 insertions(+), 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 8f017cd..c2b8b90 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -24,8 +24,14 @@ li > button {
display: flex;
justify-content: space-between;
align-items: center;
+ transition: all 0.3s ease;
}
+li > button:hover p {
+ font-weight: bold;
+}
+
+
.icon {
width: 15px;
margin: 3px -3px -1px -3px;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index fef22d7..fc2daa5 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,9 +13,9 @@
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
<ul>
- <li *ngFor="let need of searchResults">
+ <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" >
<button [routerLink]="'/need/' + need.id">
- {{need.name}}
+ <p id="need-label-{{need.id}}">{{need.name}}</p>
<button (click)="delete(need.id)" *ngIf="isManager()">
<img class="icon" src="/delete.png" alt="Delete">
</button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 3f77df4..8ae7370 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -78,6 +78,13 @@ export class NeedListComponent {
return type === ("HELPER" as unknown as userType);
}
+ changeText(id : number, text : string) {
+ const label = document.getElementById('need-label-' + id);
+ if (label) {
+ label.innerHTML = text;
+ }
+ }
+
add(need: Need) {
const currentUser = this.usersService.getCurrentUser();
//console.log("get current user in angular:", currentUser)
--
cgit v1.2.3
From 1c1d3922e7eea35764ebab39b18172ed2c8c82d9 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 10:38:40 -0400
Subject: better feedback using a <span>
---
ufund-ui/src/app/components/need-list/need-list.component.css | 8 +++++++-
ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++--
ufund-ui/src/app/components/need-list/need-list.component.ts | 8 ++++----
3 files changed, 13 insertions(+), 7 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c2b8b90..c42dfda 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -25,10 +25,16 @@ li > button {
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
+ font-weight: bold;
+}
+
+li > button span {
+ font-style: italic;
+ font-weight: normal;
}
li > button:hover p {
- font-weight: bold;
+ text-decoration: underline;
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index fc2daa5..741b899 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,9 +13,9 @@
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
<ul>
- <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" >
+ <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" >
<button [routerLink]="'/need/' + need.id">
- <p id="need-label-{{need.id}}">{{need.name}}</p>
+ <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
<button (click)="delete(need.id)" *ngIf="isManager()">
<img class="icon" src="/delete.png" alt="Delete">
</button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 8ae7370..0f86921 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -79,10 +79,10 @@ export class NeedListComponent {
}
changeText(id : number, text : string) {
- const label = document.getElementById('need-label-' + id);
- if (label) {
- label.innerHTML = text;
- }
+ const span = document.getElementById('hover-status-label-' + id);
+ if (span) {
+ span.innerHTML = ' ' + text;
+ }
}
add(need: Need) {
--
cgit v1.2.3
From 96f833352eff7b9428daf2add988ecd0a2b41d92 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 24 Mar 2025 21:21:32 -0400
Subject: Tweak style
---
ufund-ui/src/app/components/login/login.component.css | 7 +++++--
ufund-ui/src/app/components/login/login.component.html | 5 ++++-
ufund-ui/src/styles.css | 5 +++--
3 files changed, 12 insertions(+), 5 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index c752de3..4bfcbb8 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -9,13 +9,16 @@
#box {
display: flex;
flex-direction: column;
- max-width: 330px;
- gap: 7px;
+ max-width: 350px;
+ gap: 10px;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.1);
padding: 30px;
color: white;
border-radius: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: white;
}
.border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 516b07b..e04ec23 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -4,6 +4,9 @@
<input placeholder="Username" type="text" #username>
<input placeholder="Password" type="password" #password>
<button type="button" (click)="login(username.value, password.value)">Login</button>
- <button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+ <div>
+ New? <a href="/">Create an account</a>
+ </div>
+<!-- <button type="button" (click)="signup(username.value, password.value)">Create Account</button>-->
<span *ngIf="statusText">{{statusText | async}}</span>
</div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index dc7dcea..bad2232 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -22,7 +22,8 @@ input {
font-size: 14pt;
padding: 5px;
border-radius: 5px;
- border-style: none;
+ border-style: solid;
+ border-width: 1px;
background-color: light-dark(#ebebeb, #3a3a3a);
&:hover {
@@ -32,7 +33,7 @@ input {
button, .button {
font-size: 14pt;
- padding: 5px 10px;
+ padding: 6px 10px;
border-radius: 5px;
border-style: none;
background-color: light-dark(#ebebeb, #3a3a3a);
--
cgit v1.2.3
From f0ac1eda74367afc375112a7269c085a511ce490 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 22:23:36 -0400
Subject: viewing search results inside cupboard component
---
.../components/cupboard/cupboard.component.html | 11 +++------
.../app/components/cupboard/cupboard.component.ts | 28 +++++++++++++++++++---
2 files changed, 28 insertions(+), 11 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 9b74b2a..3ed06fb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -9,7 +9,7 @@
<button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
</div>
<div id="create-form" *ngIf="selectedForm === 'create'">
- <h1> Create a new need </h1>
+ <h1> Create Need </h1>
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
<label>Name:</label><br>
<input type="text" name="name" ngModel><br>
@@ -26,15 +26,10 @@
</div>
<div id="update-form" *ngIf="selectedForm === 'update'">
- <h1> Update a need </h1>
+ <h1> Update 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>
+ <label>Currently Editing : need.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>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 646c4ff..e38f8c0 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,10 +16,9 @@ import { NeedListComponent } from '../need-list/need-list.component';
export class CupboardComponent implements OnInit {
protected statusText = new BehaviorSubject("")
- selectedForm = "create"
+ selectedForm = "create";
needs: any;
- @ViewChild("needList") needList?: NeedListComponent
-
+ @ViewChild("needList") needList?: NeedListComponent;
constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
ngOnInit(): void {
@@ -38,9 +37,32 @@ export class CupboardComponent implements OnInit {
type: ''
};
selectedNeedId: number | null = null;
+ searchResults: any[] = [];
selectForm(name: string) {
+ //get search results from the need list
+ if (this.needList) {
+ this.searchResults = this.needList.searchResults;
+ }
+ console.log(this.searchResults)
this.selectedForm = name;
+ if (name == 'update') {
+ if (this.searchResults) {
+ this.searchResults.forEach((element: any) => {
+ console.log(element)
+ });
+ }
+
+ }
+ }
+
+ async updateSearchResults() {
+ if (this.needList) {
+ while (this.selectedForm == 'update') {
+ this.searchResults = this.needList.searchResults
+ await new Promise(resolve => setTimeout(resolve, 100));
+ }
+ }
}
populateForm(need: any): void {
--
cgit v1.2.3
From 20458b2ae22466d0b75a2ae60f318e514c0d905f Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 08:46:45 -0400
Subject: need list reformatting- button does not span whole list element
---
.../app/components/need-list/need-list.component.css | 19 ++++++++++++++-----
.../app/components/need-list/need-list.component.html | 14 ++++++++++----
.../app/components/need-list/need-list.component.ts | 7 ++++++-
3 files changed, 30 insertions(+), 10 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c42dfda..74dbc34 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -5,7 +5,7 @@
border-radius: 5px;
}
-div, li > button {
+div {
border: 2px solid #000;
border-radius: 5px;
padding: 5px;
@@ -17,17 +17,26 @@ ul {
padding-inline-start: 0px;
}
-li > button {
- width: 98%;
- padding: 1%;
- margin: 1%;
+li {
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
font-weight: bold;
+ border: 2px solid #000;
+ border-radius: 5px;
+ margin: 5px;
+
+ > button {
+ width: 90%;
+ float: left;
+ transition: all 0.3s ease;
+ font-weight: bold;
+ display: flex;
+ }
}
+
li > button span {
font-style: italic;
font-weight: normal;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 741b899..b31ccf0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,13 +13,19 @@
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
<ul>
- <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" >
- <button [routerLink]="'/need/' + need.id">
+ <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" >
+ <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
<p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
+ </button>
+
+ <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
+ <section *ngIf="isManager()">
+ <button (click)="select(need)">
+ <img class="icon" src="/edit.png" alt="Select">
+ </button>
<button (click)="delete(need.id)" *ngIf="isManager()">
<img class="icon" src="/delete.png" alt="Delete">
</button>
- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
- </button>
+ </section>
</li>
</ul>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 0f86921..e47929b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -11,6 +11,7 @@ import { userType } from '../../models/User';
styleUrl: './need-list.component.css'
})
export class NeedListComponent {
+ selectedNeed: Need | undefined;
needs: Need[] = [];
searchResults: Need[] = [];
@@ -109,4 +110,8 @@ export class NeedListComponent {
back() {
this.searchResults = this.needs;
}
-}
+
+ select(need : Need) {
+ this.selectedNeed = need;
+ }
+}
\ No newline at end of file
--
cgit v1.2.3
From f7cd2d90191c1d81526ed549514d82864c1aebb2 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 09:08:26 -0400
Subject: restyling of need list results
---
.../app/components/need-list/need-list.component.css | 19 +++++++++++++++----
1 file changed, 15 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 74dbc34..c763105 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,4 +1,5 @@
:host {
+ --list-background-color: lightgray;
list-style-type: none;
border: 2px solid #000;
display: block;
@@ -18,6 +19,7 @@ ul {
}
li {
+ background-color: var(--list-background-color);
display: flex;
justify-content: space-between;
align-items: center;
@@ -25,17 +27,26 @@ li {
font-weight: bold;
border: 2px solid #000;
border-radius: 5px;
- margin: 5px;
-
+ margin: 5px;
> button {
- width: 90%;
+ background-color: var(--list-background-color);
+ width: 88%;
float: left;
transition: all 0.3s ease;
font-weight: bold;
display: flex;
+ border: none;
+ border-radius: 5px;
+ }
+
+ > section {
+ width: 12%;
}
}
+section button{
+ margin: 4%;
+}
li > button span {
font-style: italic;
@@ -48,7 +59,7 @@ li > button:hover p {
.icon {
- width: 15px;
+ width: 18px;
margin: 3px -3px -1px -3px;
}
--
cgit v1.2.3
From 304b867c6fa5c1192e8cdec7fd22affb50e244b3 Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:37:49 -0400
Subject: implement sorting algorithms with selection buttons. -ak
---
.../components/need-list/need-list.component.html | 7 ++++
.../components/need-list/need-list.component.ts | 46 ++++++++++++++++++++--
2 files changed, 50 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..c5faf74 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,4 +1,11 @@
<h1>Needs List</h1>
+<div style="display: flex;">
+ <h3>Sort by:</h3>
+ <table style="margin-left: 10px; display: flex; column-gap: 24px;">
+ <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
+ <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
+ </table>
+</div>
<input id="search-button" type="button" value="Search" (click)="open()">
<div id="search-form">
<form #searchForm="ngForm">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..be444fb 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,8 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
import { userType } from '../../models/User';
+
+interface sortAlgo {
+ (a: Need,b: Need): number;
+}
+
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+ if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+ return -1;
+ }
+ return 1;
+}
+
+const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
+ if(a.maxGoal >= b.maxGoal) {
+ return -1;
+ }
+ return 1;
+}
+
@Component({
selector: 'app-need-list',
standalone: false,
@@ -12,6 +32,12 @@ import { userType } from '../../models/User';
export class NeedListComponent {
needs: Need[] = [];
searchResults: Need[] = [];
+ currentSortAlgo: sortAlgo = sortByMaxGoal;
+
+ SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
+ {func:sortByMaxGoal,name:"sortByMaxGoal"},
+ {func:sortByName,name:"sortByName"},
+ ];
constructor(
private cupboardService: CupboardService,
@@ -19,7 +45,7 @@ export class NeedListComponent {
) {}
refresh() {
- this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+ this.cupboardService.getNeeds().subscribe(n => this.needs = n.sort(this.currentSortAlgo))
}
ngOnInit(): void {
@@ -60,6 +86,19 @@ export class NeedListComponent {
this.hideElement(document.getElementById('search-status'));
}
+ changeSortAlgo(algoName: string, form: any) {
+ console.log(algoName);
+ this.SortingAlgoArrays.forEach(algo => {
+ if(algo.name === algoName) {
+ this.currentSortAlgo = algo.func;
+ console.log("changed sorting algorithm to: ", algo.name)
+ return
+ }
+ });
+ this.refresh()
+ this.search(form);
+ }
+
private searchDelay: any;
async search(form: any) {
@@ -72,8 +111,9 @@ export class NeedListComponent {
this.searchDelay = setTimeout(() => {
const currentSearchValue = form.search; //latest value of the search
+ console.log("current search value: ", currentSearchValue)
this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
- this.searchResults = n;
+ this.searchResults = n.sort(this.currentSortAlgo);
console.log(currentSearchValue, this.searchResults);
this.showElement(document.getElementById('search-results'));
this.showElement(document.getElementById('search-status'));
--
cgit v1.2.3
From 07d191cb1fc8890f66e9af7d19e8276089d18d8b Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:45:38 -0400
Subject: added more sort options; fix HTML error
---
.../src/app/components/need-list/need-list.component.html | 2 ++
.../src/app/components/need-list/need-list.component.ts | 15 ++++++++++++++-
2 files changed, 16 insertions(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index c5faf74..283cc99 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,7 +3,9 @@
<h3>Sort by:</h3>
<table style="margin-left: 10px; display: flex; column-gap: 24px;">
<tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
+ <tr><h3><button (click)="changeSortAlgo('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr>
<tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
+ <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr>
</table>
</div>
<input id="search-button" type="button" value="Search" (click)="open()">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index be444fb..06bb17e 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -16,13 +16,24 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
+const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => {
+ return sortByName(a,b)*-1;
+}
+
const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
- if(a.maxGoal >= b.maxGoal) {
+ if(a.maxGoal == b.maxGoal) {
+ return sortByName(a,b);
+ }
+ else if(a.maxGoal > b.maxGoal) {
return -1;
}
return 1;
}
+const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => {
+ return sortByMaxGoal(a,b)*-1;
+}
+
@Component({
selector: 'app-need-list',
standalone: false,
@@ -37,6 +48,8 @@ export class NeedListComponent {
SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
{func:sortByMaxGoal,name:"sortByMaxGoal"},
{func:sortByName,name:"sortByName"},
+ {func:sortByNameReverse,name:"sortByNameReverse"},
+ {func:sortByMinGoal,name:"sortByMinGoal"},
];
constructor(
--
cgit v1.2.3
From d9eb78521f29ead3a9f70b09e18a6d9560cc849c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 10:43:52 -0400
Subject: fancy selection animation for need list
---
.../components/need-list/need-list.component.css | 2 +-
.../components/need-list/need-list.component.html | 4 ++--
.../components/need-list/need-list.component.ts | 28 +++++++++++++++++++++-
3 files changed, 30 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c763105..2eb6a8d 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -29,7 +29,7 @@ li {
border-radius: 5px;
margin: 5px;
> button {
- background-color: var(--list-background-color);
+ background-color: transparent;
width: 88%;
float: left;
transition: all 0.3s ease;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index b31ccf0..eaa8a6f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,14 +13,14 @@
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
<ul>
- <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" >
+ <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
<button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
<p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
</button>
<button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
<section *ngIf="isManager()">
- <button (click)="select(need)">
+ <button (click)="select(need)" id="need-edit-button-{{need.id}}">
<img class="icon" src="/edit.png" alt="Select">
</button>
<button (click)="delete(need.id)" *ngIf="isManager()">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index e47929b..9ef191a 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -112,6 +112,32 @@ export class NeedListComponent {
}
select(need : Need) {
- this.selectedNeed = need;
+ if (this.selectedNeed) {
+ //revert already selected need to previous style
+ console.log(need.id);
+ let button = document.getElementById('need-button-' + this.selectedNeed.id);
+ if (button) {
+ console.log(button)
+ button.style.background = 'lightgray';
+ button.style.marginLeft = '0%';
+ button.style.width = '98%';
+ }
+ button = document.getElementById('need-edit-button-' + this.selectedNeed.id);
+ if (button) {
+ button.style.visibility = 'visible';
+ }
+ }
+ //change selected need to selected style
+ this.selectedNeed = need;
+ let button = document.getElementById('need-button-' + need.id);
+ if (button) {
+ button.style.background = 'white';
+ button.style.marginLeft = '4%';
+ button.style.width = '100%';
+ }
+ button = document.getElementById('need-edit-button-' + need.id);
+ if (button) {
+ button.style.visibility = 'hidden';
+ }
}
}
\ No newline at end of file
--
cgit v1.2.3
From 0829feb20e60bc6d323dcc0d9376f4feb45115eb Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Wed, 26 Mar 2025 18:23:17 -0400
Subject: Push starter code for Input()
---
.../app/components/cupboard/cupboard.component.html | 8 ++++----
.../src/app/components/cupboard/cupboard.component.ts | 6 +++---
.../app/components/need-list/need-list.component.ts | 18 ++++++++++--------
3 files changed, 17 insertions(+), 15 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 3ed06fb..c2d146b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,6 +1,6 @@
<div>
<h1> Cupboard </h1>
- <app-need-list #needList></app-need-list>
+ <app-need-list [editF]="" #needList></app-need-list>
</div>
<div *ngIf="isManager()" >
<h2 > Admin View </h2>
@@ -23,7 +23,7 @@
<input type="submit" value="Submit">
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
-
+
</div>
<div id="update-form" *ngIf="selectedForm === 'update'">
<h1> Update Need </h1>
@@ -41,8 +41,8 @@
<input type="submit" value="Submit">
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
-
+
</div>
<hr>
-
+
</div>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index e38f8c0..cf9b95e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
import { CupboardService } from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
import { Need, GoalType } from '../../models/Need';
@@ -38,9 +38,9 @@ export class CupboardComponent implements OnInit {
};
selectedNeedId: number | null = null;
searchResults: any[] = [];
-
+
selectForm(name: string) {
- //get search results from the need list
+ //get search results from the need list
if (this.needList) {
this.searchResults = this.needList.searchResults;
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 9ef191a..bf78d99 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
import { NgForm } from '@angular/forms';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
@@ -15,6 +15,8 @@ export class NeedListComponent {
needs: Need[] = [];
searchResults: Need[] = [];
+ @Input() editF?: Function
+
constructor(
private cupboardService: CupboardService,
private usersService: UsersService
@@ -43,7 +45,7 @@ export class NeedListComponent {
}
if (form) {
this.searchDelay = setTimeout(() => {
-
+
if (form) {
const currentSearchValue = form.search; //latest value of the search
this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
@@ -58,9 +60,9 @@ export class NeedListComponent {
clearTimeout(this.searchDelay);
this.searchResults = this.needs;
}
-
-
+
+
}
delete(id : number) {
@@ -80,10 +82,10 @@ export class NeedListComponent {
}
changeText(id : number, text : string) {
- const span = document.getElementById('hover-status-label-' + id);
+ const span = document.getElementById('hover-status-label-' + id);
if (span) {
span.innerHTML = ' ' + text;
- }
+ }
}
add(need: Need) {
@@ -101,7 +103,7 @@ export class NeedListComponent {
} else {
window.alert("This need is already in your basket!")
}
-
+
}
@@ -140,4 +142,4 @@ export class NeedListComponent {
button.style.visibility = 'hidden';
}
}
-}
\ No newline at end of file
+}
--
cgit v1.2.3
From 0549991d0b32de4de544d16478ce5b2782c1809d Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 18:59:55 -0400
Subject: use (output) for need edit selection
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 2 +-
ufund-ui/src/app/components/need-list/need-list.component.ts | 8 +++++---
2 files changed, 6 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index c2d146b..4b76f25 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,6 +1,6 @@
<div>
<h1> Cupboard </h1>
- <app-need-list [editF]="" #needList></app-need-list>
+ <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
</div>
<div *ngIf="isManager()" >
<h2 > Admin View </h2>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index bf78d99..2eed87d 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Output, EventEmitter} from '@angular/core';
import { NgForm } from '@angular/forms';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
@@ -11,11 +11,11 @@ import { userType } from '../../models/User';
styleUrl: './need-list.component.css'
})
export class NeedListComponent {
- selectedNeed: Need | undefined;
+ selectedNeed: Need | null = null;
needs: Need[] = [];
searchResults: Need[] = [];
- @Input() editF?: Function
+ @Output() currentNeed = new EventEmitter<Need>();
constructor(
private cupboardService: CupboardService,
@@ -114,6 +114,8 @@ export class NeedListComponent {
}
select(need : Need) {
+ //emit value
+ this.currentNeed.emit(need);
if (this.selectedNeed) {
//revert already selected need to previous style
console.log(need.id);
--
cgit v1.2.3
From 959aa5101fbba55f20eda46d02addd27a74cf950 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 19:03:16 -0400
Subject: snap form open on edit event
---
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 1 +
1 file changed, 1 insertion(+)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index cf9b95e..0d2c1f5 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -66,6 +66,7 @@ export class CupboardComponent implements OnInit {
}
populateForm(need: any): void {
+ this.selectForm('update');
this.selectedNeed = { ...need };
}
--
cgit v1.2.3
From d5ae670dbce9e5cabbd594759df490176fd8cecd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 19:12:52 -0400
Subject: use selected id for the update form
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 1 -
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 5 ++---
2 files changed, 2 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 4b76f25..d54eed9 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -29,7 +29,6 @@
<h1> Update Need </h1>
<label>Needs:</label><br>
<form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
- <label>Currently Editing : need.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>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 0d2c1f5..a8b9c14 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -79,14 +79,13 @@ export class CupboardComponent implements OnInit {
console.log(form);
const need: Need = {
name: form.name,
- id: form.id, //system will control this
+ id: this.selectedNeed.id, //system will control this
maxGoal: form.maxGoal,
type: GoalType[form.type as keyof typeof GoalType],
filterAttributes: [],
current: 0
};
- console.log("need:", need);
- console.log(need.id, need, "need updated");
+
this.cupboardService.updateNeed(need.id, need)
.pipe(catchError((ex, r) => {
if (ex.status == 500) {
--
cgit v1.2.3
From 057efa1b557d5d874300c6cda8c7d74519c946d6 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 08:50:12 -0400
Subject: use <selection> instead of table with *ngFor for sort algorithms
---
.../src/app/components/need-list/need-list.component.html | 15 ++++++---------
.../src/app/components/need-list/need-list.component.ts | 1 +
2 files changed, 7 insertions(+), 9 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index de4be58..9799493 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,14 +1,11 @@
<h1>Needs List</h1>
<div id="search-container">
- <div style="display: flex;">
- <h3>Sort by:</h3>
- <table style="margin-left: 10px; display: flex; column-gap: 24px;">
- <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
- <tr><h3><button (click)="changeSortAlgo('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr>
- <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
- <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr>
- </table>
- </div>
+ <label for="sort">Sort by:</label>
+ <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
+ <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+ {{algorithm.name}}
+ </option>
+ </select>
<form id="search-form" #searchForm="ngForm">
<input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
<input type="reset" value="Clear" (click)="search(null)"> <br>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 208045f..c1063ce 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -45,6 +45,7 @@ export class NeedListComponent {
selectedNeed: Need | null = null;
needs: Need[] = [];
searchResults: Need[] = [];
+ sortSelection: string = '';
currentSortAlgo: sortAlgo = sortByMaxGoal;
SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
--
cgit v1.2.3
From 84083e7229678c30d827270bfa25de66a02d7b8c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 08:54:06 -0400
Subject: display name for algorithms
---
ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
ufund-ui/src/app/components/need-list/need-list.component.ts | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 9799493..a653527 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,7 +3,7 @@
<label for="sort">Sort by:</label>
<select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
<option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
- {{algorithm.name}}
+ {{algorithm.display}}
</option>
</select>
<form id="search-form" #searchForm="ngForm">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index c1063ce..2fdd993 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -48,11 +48,11 @@ export class NeedListComponent {
sortSelection: string = '';
currentSortAlgo: sortAlgo = sortByMaxGoal;
- SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
- {func:sortByMaxGoal,name:"sortByMaxGoal"},
- {func:sortByName,name:"sortByName"},
- {func:sortByNameReverse,name:"sortByNameReverse"},
- {func:sortByMinGoal,name:"sortByMinGoal"},
+ SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [
+ {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"},
+ {func:sortByName,name:"sortByName", display:"Name"},
+ {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"},
+ {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"},
];
@Output() currentNeed = new EventEmitter<Need>();
--
cgit v1.2.3
From 65590e6dfbed90e4acd342a72feb8d7b5120d70c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 09:49:41 -0400
Subject: refactor sorting to use acending descending toggle
---
.../components/need-list/need-list.component.html | 5 ++-
.../components/need-list/need-list.component.ts | 46 +++++++++++++---------
2 files changed, 31 insertions(+), 20 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index a653527..5be915c 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,9 +3,12 @@
<label for="sort">Sort by:</label>
<select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
<option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
- {{algorithm.display}}
+ {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
</option>
</select>
+ <button (click)="changeSortMode(searchForm.value)">
+ {{sortMode}}
+ </button>
<form id="search-form" #searchForm="ngForm">
<input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
<input type="reset" value="Clear" (click)="search(null)"> <br>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 2fdd993..97be0cb 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -17,11 +17,7 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
-const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => {
- return sortByName(a,b)*-1;
-}
-
-const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
+const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
if(a.maxGoal == b.maxGoal) {
return sortByName(a,b);
}
@@ -31,10 +27,6 @@ const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
-const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => {
- return sortByMaxGoal(a,b)*-1;
-}
-
@Component({
selector: 'app-need-list',
standalone: false,
@@ -45,14 +37,13 @@ export class NeedListComponent {
selectedNeed: Need | null = null;
needs: Need[] = [];
searchResults: Need[] = [];
+ sortMode = 'Ascending'
sortSelection: string = '';
- currentSortAlgo: sortAlgo = sortByMaxGoal;
+ currentSortAlgo: sortAlgo = sortByGoal;
- SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [
- {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"},
- {func:sortByName,name:"sortByName", display:"Name"},
- {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"},
- {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"},
+ SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+ {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
+ {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
];
@Output() currentNeed = new EventEmitter<Need>();
@@ -64,22 +55,34 @@ export class NeedListComponent {
refresh() {
this.cupboardService.getNeeds().subscribe(n => {
- this.needs = n.sort(this.currentSortAlgo);
+ if (this.sortMode == 'Ascending') {
+ this.needs = n.sort(this.currentSortAlgo);
+ } else {
+ this.needs = n.sort(this.currentSortAlgo).reverse();
+ }
this.searchResults = this.needs;
});
- console.log(this.searchResults);
}
ngOnInit(): void {
this.refresh()
}
+ changeSortMode(form : any) {
+ if (this.sortMode == 'Ascending'){
+ this.sortMode = 'Descending'
+ } else {
+ this.sortMode = 'Ascending'
+ }
+ this.search(form)
+ }
+
changeSortAlgo(algoName: string, form: any) {
console.log(algoName);
this.SortingAlgoArrays.forEach(algo => {
if(algo.name === algoName) {
this.currentSortAlgo = algo.func;
- console.log("changed sorting algorithm to: ", algo.name)
+ console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
return
}
});
@@ -102,7 +105,12 @@ export class NeedListComponent {
if (form) {
const currentSearchValue = form.search; //latest value of the search
this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
- this.searchResults = n.sort(this.currentSortAlgo);
+ if (this.sortMode == 'Ascending') {
+ this.searchResults = n.sort(this.currentSortAlgo);
+ } else {
+ this.searchResults = n.sort(this.currentSortAlgo).reverse();
+ }
+
console.log(currentSearchValue, this.searchResults);
});
}
--
cgit v1.2.3
From ee4154df85a971f3a0f8e43fd6afdfa6a620ea99 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 10:09:19 -0400
Subject: refactor change sort algo func with [(ngModel)] binding
---
.../components/need-list/need-list.component.html | 2 +-
.../components/need-list/need-list.component.ts | 25 ++++++++++------------
2 files changed, 12 insertions(+), 15 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 5be915c..4f259a0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,7 +1,7 @@
<h1>Needs List</h1>
<div id="search-container">
<label for="sort">Sort by:</label>
- <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
+ <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)">
<option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
{{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
</option>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 97be0cb..177d9f7 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -38,8 +38,9 @@ export class NeedListComponent {
needs: Need[] = [];
searchResults: Need[] = [];
sortMode = 'Ascending'
- sortSelection: string = '';
+
currentSortAlgo: sortAlgo = sortByGoal;
+ sortSelection: string = this.currentSortAlgo.name;
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
{func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
@@ -77,19 +78,6 @@ export class NeedListComponent {
this.search(form)
}
- changeSortAlgo(algoName: string, form: any) {
- console.log(algoName);
- this.SortingAlgoArrays.forEach(algo => {
- if(algo.name === algoName) {
- this.currentSortAlgo = algo.func;
- console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
- return
- }
- });
- this.refresh()
- this.search(form);
- }
-
private searchDelay: any;
async search(form: any) {
@@ -103,6 +91,15 @@ export class NeedListComponent {
this.searchDelay = setTimeout(() => {
if (form) {
+ //sorting based on algo selected
+ this.SortingAlgoArrays.forEach(algo => {
+ if(algo.name === this.sortSelection) {
+ this.currentSortAlgo = algo.func;
+ console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
+ return
+ }
+ });
+
const currentSearchValue = form.search; //latest value of the search
this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
if (this.sortMode == 'Ascending') {
--
cgit v1.2.3
From 0b4c76c5dc7313ae42c62be3c682c1f88cec13fd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 10:36:32 -0400
Subject: defaut value for sorting
---
ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
ufund-ui/src/app/components/need-list/need-list.component.ts | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 4f259a0..693307f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,7 +1,7 @@
<h1>Needs List</h1>
<div id="search-container">
<label for="sort">Sort by:</label>
- <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)">
+ <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)" [value]="sortSelection">
<option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
{{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
</option>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 177d9f7..f935e03 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -40,10 +40,10 @@ export class NeedListComponent {
sortMode = 'Ascending'
currentSortAlgo: sortAlgo = sortByGoal;
- sortSelection: string = this.currentSortAlgo.name;
+ sortSelection: string = 'sortByGoal';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
- {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
+ {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]},
{func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
];
--
cgit v1.2.3
From fb4e2bc3eb66ca861eb8393ade21811e4510669a Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 28 Mar 2025 19:09:53 -0400
Subject: Start implementation new design
---
ufund-ui/src/app/app.component.css | 25 ++++++++++++++----
ufund-ui/src/app/app.component.html | 6 ++---
.../components/home-page/home-page.component.css | 30 ++++++++++++++++++++++
.../components/home-page/home-page.component.html | 12 +++++++--
.../src/app/components/login/login.component.css | 8 ++++--
ufund-ui/src/index.html | 4 +++
ufund-ui/src/styles.css | 19 +++++++++++---
7 files changed, 88 insertions(+), 16 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 17bbed7..5596cf8 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,23 +8,38 @@
display: flex;
flex-direction: row;
justify-content: space-between;
- border-bottom: light-dark(#d3d3d3, black) solid 1px;
- padding: 0 10px;
- background-color: light-dark(#f5f5f5, #2e2e2e);
+ /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/
+ padding: 15px 20px;
+ /*background-color: light-dark(#f5f5f5, #2e2e2e);*/
+ z-index: 2;
h1 {
padding: 0;
margin: 0;
-
+ font-weight: 500;
+ /*text-decoration: none;*/
+ text-transform: uppercase;
+ font-size: 16pt;
+ letter-spacing: .5px;
}
div {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 20px;
}
+ /*div:has(a:hover) a {*/
+ /* color: light-dark(black, rgba(255, 255, 255, 0.5));*/
+ /*}*/
+
a {
color: light-dark(black, white);
+ text-decoration: none;
+ }
+
+ a:hover {
+ /*color: light-dark(black, white)*/
+ text-decoration: underline;
}
}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 3058117..b0ee329 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,14 +1,14 @@
<div id="header">
- <span>
+ <div>
<a routerLink="/">
<h1>Jelly Solutions</h1>
</a>
- </span>
+ </div>
<div>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/cupboard">Cupboard</a>
<a routerLink="/basket">Basket</a>
- <span>{{currentUser$ | async}}</span>
+<!-- <span>{{currentUser$ | async}}</span>-->
<button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
<button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
</div>
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 5f65225..16f3140 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -5,3 +5,33 @@
align-items: center;
justify-content: center;
}
+
+#hero {
+ display: flex;
+ /*flex-direction: column;*/
+ /*align-items: start;*/
+ /*justify-content: center;*/
+}
+
+h1 {
+ font-size: 50px;
+ max-width: 1200px;
+}
+
+#jf {
+ /*position: absolute;*/
+}
+
+#right {
+ max-width: 500px;
+ max-height: 500px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /*z-index: -0.5;*/
+}
+
+#left {
+ max-width: 500px;
+ z-index: 1;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index b2eed0b..7a7ff96 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,2 +1,10 @@
-<h1>Helping fund coral reef and marine life conservation</h1>
-<button routerLink="/cupboard">View needs</button>
+<div id="hero">
+ <div id="left">
+ <h1>Helping fund coral reef and marine life conservation</h1>
+ <p>View our online cupboard holding all needs related to sea life preservation</p>
+ <button class="button2" routerLink="/cupboard">View needs</button>
+ </div>
+ <div id="right">
+ <img id="jf" src="jf.png" height="1024" width="1024"/>
+ </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 4bfcbb8..b56b4eb 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -3,7 +3,11 @@
align-items: center;
justify-content: center;
height: 100%;
- background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+ /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
+ background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+ background-blend-mode: darken;
+ margin-top: -66px
+
}
#box {
@@ -18,7 +22,7 @@
border-radius: 5px;
border-style: solid;
border-width: 1px;
- border-color: white;
+ border-color: rgb(140, 140, 255);
}
.border {
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 0517d5e..34fe4b0 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -6,6 +6,10 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
</head>
<body>
<app-root></app-root>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index bad2232..49b478e 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -11,11 +11,12 @@
html, body {
margin: 0;
height: 100%;
- background-color: light-dark(white, #242424);
+ background-color: light-dark(white, #000715);
}
body {
- font-family: sans-serif;
+ font-family: Inter, sans-serif;
+ font-optical-sizing: auto;
}
input {
@@ -33,8 +34,8 @@ input {
button, .button {
font-size: 14pt;
- padding: 6px 10px;
- border-radius: 5px;
+ padding: 6px 16px;
+ border-radius: 9999px;
border-style: none;
background-color: light-dark(#ebebeb, #3a3a3a);
@@ -42,3 +43,13 @@ button, .button {
background-color: light-dark(#e1e1e1, #444444);
}
}
+
+.button2 {
+ text-transform: uppercase;
+ border: 1px solid #5cdbff;
+ padding: 10px 25px;
+ font-size: 12pt;
+ font-weight: 600;
+ background-color: transparent;
+ text-shadow: #5cdbff 0 0 50px;
+}
--
cgit v1.2.3
From e1eb3f16e10042c2539b56d6c2d2e33f07abf7d9 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 28 Mar 2025 21:37:28 -0400
Subject: Implement new dashboard and mini-need-list
---
ufund-ui/src/app/app.module.ts | 2 +
.../components/dashboard/dashboard.component.css | 7 +++
.../components/dashboard/dashboard.component.html | 7 +--
.../components/dashboard/dashboard.component.ts | 31 ++++++++++--
.../mini-need-list/mini-need-list.component.css | 55 ++++++++++++++++++++++
.../mini-need-list/mini-need-list.component.html | 17 +++++++
.../mini-need-list/mini-need-list.component.ts | 19 ++++++++
ufund-ui/src/index.html | 14 +++---
ufund-ui/src/styles.css | 4 ++
9 files changed, 141 insertions(+), 15 deletions(-)
create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index 9f525fe..f1d6184 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
import {DashboardComponent} from './components/dashboard/dashboard.component';
import {CommonModule} from '@angular/common';
import {LoginComponent} from './components/login/login.component';
+import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
@NgModule({
declarations: [
@@ -25,6 +26,7 @@ import {LoginComponent} from './components/login/login.component';
NeedListComponent,
DashboardComponent,
LoginComponent,
+ MiniNeedListComponent,
],
imports: [
BrowserModule,
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index e69de29..9db015e 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -0,0 +1,7 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+ align-self: center;
+ gap: 20px
+}
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index a1151b7..330d1f3 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -1,4 +1,5 @@
-<h1>Dashboard</h1>
-<app-cupboard></app-cupboard>
-<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file
+<h1>Your Dashboard</h1>
+<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
+<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/cupboard"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index a0ad566..165c7ba 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {userType} from '../../models/User';
import {AuthService} from '../../services/auth.service';
+import {Router} from '@angular/router';
+import {Need} from '../../models/Need';
+import {CupboardService} from '../../services/cupboard.service';
+import {UsersService} from '../../services/users.service';
+import {firstValueFrom} from 'rxjs';
@Component({
selector: 'app-dashboard',
@@ -8,14 +13,30 @@ import {AuthService} from '../../services/auth.service';
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.css'
})
-export class DashboardComponent {
+export class DashboardComponent implements OnInit{
+
+ topNeeds?: Need[]
+ almostThere?: Need[]
+ inBasket?: Need[]
+
constructor(
protected authService: AuthService,
+ protected router: Router,
+ protected cupboardService: CupboardService
) {}
- isManager() {
- const type = this.authService.getCurrentUser()?.type;
- return type === ("MANAGER" as unknown as userType);
+ ngOnInit() {
+ let user = this.authService.getCurrentUser()
+ if(!user) {
+ this.router.navigate(['/login'])
+ return
+ }
+
+ firstValueFrom(this.cupboardService.getNeeds()).then(r => {
+ this.topNeeds = r.sort((a, b) => b.current - a.current)
+ this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
+ this.inBasket = r.filter(n => n.id in user?.basket)
+ })
}
}
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
new file mode 100644
index 0000000..8a3b6a7
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -0,0 +1,55 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ border: solid rgba(255, 255, 255, 0.5) 1px;
+ border-radius: 5px;
+}
+
+#header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ border-bottom: solid rgba(255, 255, 255, 0.5) 1px;
+ padding: 10px;
+
+ a {
+ display: flex;
+ }
+}
+
+#needList {
+ display: flex;
+ flex-direction: row;
+ padding: 10px;
+ gap: 10px;
+ justify-content: start;
+}
+
+.needEntry {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ background-color: #3a3a3a;
+ border-radius: 5px;
+ height: 175px;
+ width: 200px;
+ justify-content: space-between;
+
+ div {
+ display: flex;
+ flex-direction: column;
+ }
+
+ user-select: none;
+ cursor: pointer;
+}
+
+.needName {
+ font-weight: bold;
+}
+
+.needType {
+ text-transform: uppercase;
+ /*font-weight: 300;*/
+ font-size: 10pt;
+}
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
new file mode 100644
index 0000000..a2de9e5
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
@@ -0,0 +1,17 @@
+<div id="header">
+ <span>{{jtitle}}</span>
+ <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a>
+</div>
+
+<div id="needList">
+ <div class="needEntry" *ngFor="let need of needList" [routerLink]="'/need/'+need.id">
+ <div>
+ <span class="needName">{{need.name}}</span>
+ <span class="needType">{{need.type}}</span>
+ </div>
+ <div>
+ <span>{{need.current}}/{{need.maxGoal}}</span>
+ <progress [max]="need.maxGoal" [value]="need.current"></progress>
+ </div>
+ </div>
+</div>
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
new file mode 100644
index 0000000..c909ae6
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {Need} from '../../models/Need';
+
+@Component({
+ selector: 'app-mini-need-list',
+ standalone: false,
+ templateUrl: './mini-need-list.component.html',
+ styleUrl: './mini-need-list.component.css'
+})
+export class MiniNeedListComponent {
+
+ @Input() needList?: Need[]
+ @Input() jtitle?: string
+ @Input() url?: string
+
+ constructor(
+
+ ) {}
+}
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 34fe4b0..b6ae1a2 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -1,17 +1,17 @@
<!doctype html>
<html lang="en">
<head>
- <meta charset="utf-8">
- <title>UfundUi</title>
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <meta charset="utf-8">
+ <title>UfundUi</title>
+ <base href="/">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head>
<body>
- <app-root></app-root>
+<app-root></app-root>
</body>
</html>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 49b478e..e4b4e8c 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -53,3 +53,7 @@ button, .button {
background-color: transparent;
text-shadow: #5cdbff 0 0 50px;
}
+
+.icon {
+ font-family: 'Material Symbols Outlined'
+}
--
cgit v1.2.3
From 9e011d85fd307768f7cec7214ca873208574ecfb Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Fri, 28 Mar 2025 21:56:47 -0400
Subject: changed styling of search display to be wider and expand filter
descriptions
---
.../components/need-list/need-list.component.css | 3 +++
.../components/need-list/need-list.component.html | 30 ++++++++++++----------
.../components/need-list/need-list.component.ts | 2 +-
3 files changed, 21 insertions(+), 14 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 2eb6a8d..19c126f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -67,4 +67,7 @@ li > button:hover p {
background-color: #d9d9d9;
border: 2px solid #000;
border-radius: 5px;
+ .wide-input {
+ width: 60%;
+ }
}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 693307f..5e9a540 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,18 +1,22 @@
<h1>Needs List</h1>
<div id="search-container">
- <label for="sort">Sort by:</label>
- <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)" [value]="sortSelection">
- <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
- {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
- </option>
- </select>
- <button (click)="changeSortMode(searchForm.value)">
- {{sortMode}}
- </button>
- <form id="search-form" #searchForm="ngForm">
- <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
- <input type="reset" value="Clear" (click)="search(null)"> <br>
- </form>
+ <section>
+ <label for="sort">Sort by: </label>
+ <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+ <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+ {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
+ </option>
+ </select>
+ <button (click)="changeSortMode(searchForm.value)">
+ {{sortMode}}
+ </button>
+ </section>
+ <section>
+ <form id="search-form" #searchForm="ngForm">
+ <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+ <input type="reset" value="Clear" (click)="search(null)"> <br>
+ </form>
+ </section>
<!--<button (click)="close()">Close</button>-->
</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index f935e03..4359cfa 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -43,7 +43,7 @@ export class NeedListComponent {
sortSelection: string = 'sortByGoal';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
- {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]},
+ {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]},
{func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
];
--
cgit v1.2.3
From 61b5b762b150c82e7d48190bcfe3416bfea96059 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 29 Mar 2025 14:37:57 -0400
Subject: frontend implementation of a needs' urgency and location
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 9 +++++++++
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 8 +++++++-
ufund-ui/src/app/components/need-list/need-list.component.ts | 12 ++++++------
ufund-ui/src/app/models/Need.ts | 2 ++
4 files changed, 24 insertions(+), 7 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index d54eed9..bc5ac1c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -13,6 +13,8 @@
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
<label>Name:</label><br>
<input type="text" name="name" ngModel><br>
+ <label>Location:</label><br>
+ <input type="text" name="location" ngModel><br>
<label>Max Goal:</label><br>
<input type="number" name="maxGoal" ngModel><br>
<label>Type</label><br>
@@ -20,7 +22,10 @@
<label>Monetary</label><br>
<input type="radio" name="type" value="PHYSICAL" ngModel>
<label>Physical</label><br>
+ <input type="checkbox" name="urgent" value="false" ngModel>
+ <label>Urgent</label><br>
<input type="submit" value="Submit">
+
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
@@ -30,6 +35,7 @@
<label>Needs:</label><br>
<form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
<input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+ <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
<label>Max Goal:</label><br>
<input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
<label>Type</label><br>
@@ -37,7 +43,10 @@
<label>Monetary</label><br>
<input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
<label>Physical</label><br>
+ <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+ <label>Urgent</label> <br>
<input type="submit" value="Submit">
+
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index a8b9c14..540a058 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -32,9 +32,11 @@ export class CupboardComponent implements OnInit {
selectedNeed: any = {
name: '',
+ location:'',
id: null,
maxGoal: null,
- type: ''
+ type: '',
+ urgent: false
};
selectedNeedId: number | null = null;
searchResults: any[] = [];
@@ -79,9 +81,11 @@ export class CupboardComponent implements OnInit {
console.log(form);
const need: Need = {
name: form.name,
+ location: form.location,
id: this.selectedNeed.id, //system will control this
maxGoal: form.maxGoal,
type: GoalType[form.type as keyof typeof GoalType],
+ urgent: form.urgent,
filterAttributes: [],
current: 0
};
@@ -113,9 +117,11 @@ export class CupboardComponent implements OnInit {
submit(form: any) {
const need: Need = {
name: form.name,
+ location: form.location,
id: 0,
maxGoal: form.maxGoal,
type: form.type,
+ urgent: form.urgent,
filterAttributes: [],
current: 0
};
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 4359cfa..37a3775 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,5 +1,4 @@
-import {Component, input, Output, EventEmitter} from '@angular/core';
-import { NgForm } from '@angular/forms';
+import {Component , Output, EventEmitter} from '@angular/core';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
@@ -39,12 +38,13 @@ export class NeedListComponent {
searchResults: Need[] = [];
sortMode = 'Ascending'
- currentSortAlgo: sortAlgo = sortByGoal;
- sortSelection: string = 'sortByGoal';
+ currentSortAlgo: sortAlgo = sortByName;
+ sortSelection: string = 'sortByName';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
- {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]},
- {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
+ {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
+ {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+ {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
];
@Output() currentNeed = new EventEmitter<Need>();
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 9e97fd4..de6504a 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -2,9 +2,11 @@ export interface Need {
name: string,
id: number,
filterAttributes: string[],
+ location: string;
type: GoalType;
maxGoal: number;
current: number;
+ urgent: boolean;
}
export enum GoalType {
--
cgit v1.2.3
From e0a3f2c2c0fec40aa50c8889e343a1dbc7f9d7fb Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 29 Mar 2025 15:01:12 -0400
Subject: API functionality for urgency and location
---
ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
ufund-ui/src/app/components/need-page/need-page.component.html | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 5e9a540..ed151a3 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,7 @@
<ul>
<li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
<button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
- <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
+ <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p>
</button>
<button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 90fd459..004f9eb 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -16,7 +16,8 @@
</div>
<hr>
-
+<p>Location: {{need?.location}}</p>
<p>Goal: {{need?.maxGoal}}</p>
<p>Current: {{need?.current}}</p>
+<p>Urgent: {{need?.urgent}}</p>
<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file
--
cgit v1.2.3
From 88650361adfc9be8344b0d383100b0c6ab513973 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:33:41 -0400
Subject: basic css and info display for needs
---
.../src/app/components/need-list/need-list.component.css | 13 +++++++++++--
.../src/app/components/need-list/need-list.component.html | 9 ++++++++-
2 files changed, 19 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 19c126f..345326f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -31,12 +31,21 @@ li {
> button {
background-color: transparent;
width: 88%;
- float: left;
transition: all 0.3s ease;
font-weight: bold;
- display: flex;
border: none;
border-radius: 5px;
+ padding-left: 1.5%;
+ > section {
+ width: 100%;
+ flex: none;
+ display: inline-block;
+ background-color: magenta;
+ > progress {
+ width: 25%;
+ float: none;
+ }
+ }
}
> section {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index ed151a3..88b9752 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,14 @@
<ul>
<li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
<button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
- <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p>
+ <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section>
+ <section>
+ <progress value="need.current" max="need.maxGoal"></progress>
+ <progress value="need.current" max="need.maxGoal"></progress>
+ <progress value="need.current" max="need.maxGoal"></progress>
+ <progress value="need.current" max="need.maxGoal"></progress>
+ </section>
+ <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
</button>
<button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
--
cgit v1.2.3
From daae556a1be7a30bc6f4606bd1b1567b713d054a Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:39:23 -0400
Subject: better display for urgency
---
ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 88b9752..866e5e4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,7 @@
<ul>
<li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
<button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
- <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section>
+ <section> <p> {{need.name}} | {{need.location}} <span> {{need.urgent ? "URGENT" : ""}} </span> <span id="hover-status-label-{{need.id}}"> </span> </section>
<section>
<progress value="need.current" max="need.maxGoal"></progress>
<progress value="need.current" max="need.maxGoal"></progress>
--
cgit v1.2.3
From 760b8efef4d683d26404ebca75b7a9c44a1db3a9 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:46:50 -0400
Subject: urgency sorting
---
.../src/app/components/cupboard/cupboard.component.ts | 2 +-
.../src/app/components/need-list/need-list.component.ts | 16 +++++++++++++---
2 files changed, 14 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 540a058..ad68c38 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -121,7 +121,7 @@ export class CupboardComponent implements OnInit {
id: 0,
maxGoal: form.maxGoal,
type: form.type,
- urgent: form.urgent,
+ urgent: form.urgent ? true : false,
filterAttributes: [],
current: 0
};
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 37a3775..4ae8f4a 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
+const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
+ if(a.urgent == b.urgent) {
+ return sortByGoal(a,b);
+ }
+ else if(a.urgent && !b.urgent) {
+ return -1;
+ }
+ return 1;
+}
+
@Component({
selector: 'app-need-list',
standalone: false,
@@ -38,13 +48,13 @@ export class NeedListComponent {
searchResults: Need[] = [];
sortMode = 'Ascending'
- currentSortAlgo: sortAlgo = sortByName;
- sortSelection: string = 'sortByName';
+ currentSortAlgo: sortAlgo = sortByPriority;
+ sortSelection: string = 'sortByPriority';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
{func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
{func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
- {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+ {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
];
@Output() currentNeed = new EventEmitter<Need>();
--
cgit v1.2.3
From f23afc7f3b0b62384b3b54a0864b02abc3b48b01 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:50:43 -0400
Subject: sortByCompletion
---
.../src/app/components/need-list/need-list.component.ts | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 4ae8f4a..17bb3e6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
+const sortByCompletion: sortAlgo = (a: Need, b: Need): number => {
+ if(a.current == b.current) {
+ return sortByGoal(a,b);
+ }
+ else if(a.current > b.current) {
+ return -1;
+ }
+ return 1;
+}
+
const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
if(a.urgent == b.urgent) {
return sortByGoal(a,b);
@@ -52,8 +62,9 @@ export class NeedListComponent {
sortSelection: string = 'sortByPriority';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
- {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
+ {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
{func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+ {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
{func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
];
--
cgit v1.2.3
From 42725635e70426c4d2923c680609da8277c693ea Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 14:44:04 -0400
Subject: fix imports in need-list.component.ts
---
.../components/need-list/need-list.component.ts | 25 +++++++++++++---------
1 file changed, 15 insertions(+), 10 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 2bbacb0..66e53e8 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -3,6 +3,8 @@ import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
import { userType } from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
interface sortAlgo {
(a: Need,b: Need): number;
@@ -72,7 +74,8 @@ export class NeedListComponent {
constructor(
private cupboardService: CupboardService,
- private usersService: UsersService
+ private usersService: UsersService,
+ private authService: AuthService
) {}
refresh() {
@@ -148,12 +151,12 @@ export class NeedListComponent {
}
isManager() {
- const type = this.usersService.getCurrentUser()?.type;
+ const type = this.authService.getCurrentUser()?.type;
return type === ("MANAGER" as unknown as userType);
}
isHelper() {
- const type = this.usersService.getCurrentUser()?.type;
+ const type = this.authService.getCurrentUser()?.type;
return type === ("HELPER" as unknown as userType);
}
@@ -165,17 +168,19 @@ export class NeedListComponent {
}
add(need: Need) {
- const currentUser = this.usersService.getCurrentUser();
+ const currentUser = this.authService.getCurrentUser();
//console.log("get current user in angular:", currentUser)
if (currentUser) {
if (!currentUser.basket.includes(need.id)) {
currentUser.basket.push(need.id);
- this.usersService.updateUser(currentUser).subscribe(() => {
- this.usersService.refreshBasket();
- error: (err: any) => {
- console.error(err);
- }
- });
+ this.usersService.updateUser(currentUser)
+ .pipe(catchError((err, _) => {
+ console.error(err);
+ return of();
+ }))
+ .subscribe(() => {
+ this.usersService.refreshBasket();
+ });
} else {
window.alert("This need is already in your basket!")
}
--
cgit v1.2.3
From 5eba2e924c57a7771c002fa3833beb5ed4275fd2 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 16:44:38 -0400
Subject: location filter, filter order change, and refresh() resets search
field for increased usability
---
.../components/need-list/need-list.component.ts | 22 ++++++++++++++++++++--
1 file changed, 20 insertions(+), 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 66e53e8..af8cab4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,5 @@
import {Component , Output, EventEmitter} from '@angular/core';
+import { NgForm } from '@angular/forms';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
@@ -48,6 +49,13 @@ const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
return 1;
}
+const sortByLocation: sortAlgo = (a: Need, b: Need): number => {
+ if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) {
+ return -1;
+ }
+ return 1;
+}
+
@Component({
selector: 'app-need-list',
standalone: false,
@@ -64,10 +72,11 @@ export class NeedListComponent {
sortSelection: string = 'sortByPriority';
SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+ {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
{func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
- {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+ {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]},
{func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
- {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+ {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
];
@Output() currentNeed = new EventEmitter<Need>();
@@ -87,6 +96,10 @@ export class NeedListComponent {
}
this.searchResults = this.needs;
});
+
+ const form = document.getElementById('search-form') as HTMLFormElement;
+ form.reset();
+ this.search(null);
}
ngOnInit(): void {
@@ -148,6 +161,7 @@ export class NeedListComponent {
this.cupboardService.deleteNeed(id).subscribe(() => {
this.needs = this.needs.filter(n => n.id !== id)
})
+ this.refresh();
}
isManager() {
@@ -226,3 +240,7 @@ export class NeedListComponent {
}
}
}
+function not(location: string) {
+ throw new Error('Function not implemented.');
+}
+
--
cgit v1.2.3
From 6bfbf7fa3b5b14b04f99f2dd6c33d336f6f081f6 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 20:31:32 -0400
Subject: Experimental sign up page design
---
.../src/app/components/signup/signup.component.css | 28 ++++++++++++-
.../app/components/signup/signup.component.html | 47 ++++++++++++----------
.../src/app/components/signup/signup.component.ts | 10 ++---
3 files changed, 58 insertions(+), 27 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index f286cf9..429bc42 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -1,7 +1,16 @@
:host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ margin-top: -66px
+
+}
+
+#box {
display: flex;
flex-direction: column;
- max-width: 300px;
+ /*max-width: 300px;*/
gap: 10px;
& > div {
@@ -45,3 +54,20 @@
color: red;
}
+#passReq {
+ display: flex;
+ flex-direction: column;
+}
+
+#box > div {
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ gap: 20px;
+
+ div {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ebedc2a..bc3aaf0 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,26 +1,31 @@
-<p>Signup:</p>
-<div>
- <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
- <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
-</div>
+<div id="box">
+ <h1>Create an account</h1>
+ <div>
+ <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
+ <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+ </div>
-<div>
- <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
- <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6"> </progress>
- <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+ <div>
+ <div>
+ <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
+ <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6"> </progress>
+ <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+ </div>
- <span *ngFor="let requirement of Object.values(passwordRequirements)">
- <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
- </span>
-</div>
+ <div id="passReq">
+ <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
+ </div>
+ </div>
-<div>
- <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
- <span *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span>
-</div>
+ <div>
+ <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+ <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span>
+ </div>
-<div>
- <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
- <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
- <span *ngIf="statusText | async">{{statusText | async}}</span>
+ <div>
+ <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+ <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+ <span *ngIf="statusText | async">{{statusText | async}}</span>
+ </div>
+ <span>Already have an account? <a routerLink="/login">Log in</a></span>
</div>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 3b43287..1ab863d 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -22,7 +22,7 @@ class PasswordRequirements {
export class SignupComponent {
protected passwordStatusText = new BehaviorSubject("")
- protected confirmPassStatusText = new BehaviorSubject("")
+ protected passwordsMatch = new BehaviorSubject(false)
protected usernameStatusText = new BehaviorSubject("")
protected showSuccessMessage = new BehaviorSubject(false)
protected passwordStrongEnough = new BehaviorSubject(false)
@@ -51,7 +51,7 @@ export class SignupComponent {
}
validate(username: string, passConfirm:string, password: string) {
- this.confirmPassStatusText.next("")
+ this.passwordsMatch.next(false)
this.usernameStatusText.next("")
this.checkPasswordStrength(password);
@@ -59,8 +59,8 @@ export class SignupComponent {
this.usernameStatusText.next("Username field can't be blank")
}
- if (!(password === passConfirm) && !!passConfirm) {
- this.confirmPassStatusText.next("Passwords don't match")
+ if (passConfirm && password === passConfirm) {
+ this.passwordsMatch.next(true)
}
this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
}
@@ -106,7 +106,7 @@ export class SignupComponent {
} else if (strength == 0) {
this.passwordStatusText.next("")
} else {
- this.passwordStatusText.next("Password does not meet requirements")
+ this.passwordStatusText.next("5/6 checks required")
}
this.strength.next(strength)
--
cgit v1.2.3
From aa5610d0f56c2a048212b3bd3a9ca5671ec855fa Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 21:46:54 -0400
Subject: Continue working on css
---
.../components/dashboard/dashboard.component.css | 2 +-
.../components/need-list/need-list.component.css | 7 +++-
.../components/need-list/need-list.component.html | 5 +--
.../components/need-page/need-page.component.css | 10 +++++
.../components/need-page/need-page.component.html | 47 ++++++++++++----------
ufund-ui/src/styles.css | 4 ++
6 files changed, 47 insertions(+), 28 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index 9db015e..78a69ba 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -1,7 +1,7 @@
:host {
display: flex;
flex-direction: column;
- width: 1200px;
+ width: 1000px;
align-self: center;
gap: 20px
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 5e07856..05354fc 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -75,14 +75,17 @@ li > button:hover p {
#search-container {
background-color: #d9d9d9;
+}
+
#search-form {
background-color: light-dark(#d9d9d9, #1b1b1b);
padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
+ border-radius: 5px;
+ visibility: visible;
+
.wide-input {
width: 60%;
}
- border-radius: 5px;
- visibility: visible;
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 866e5e4..72bc9c5 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,4 +1,3 @@
-<h1>Needs List</h1>
<div id="search-container">
<section>
<label for="sort">Sort by: </label>
@@ -43,9 +42,9 @@
<button (click)="select(need)" id="need-edit-button-{{need.id}}">
<img class="icon" src="/edit.png" alt="Select">
</button>
- <button (click)="delete(need.id)" *ngIf="isManager()">
+ <button (click)="delete(need.id)" *ngIf="isManager()">
<img class="icon" src="/delete.png" alt="Delete">
</button>
</section>
</li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index e69de29..a3a4014 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -0,0 +1,10 @@
+:host {
+ display: flex;
+ justify-content: center;
+}
+
+#box {
+ display: flex;
+ flex-direction: column;
+ width: 1000px;
+}
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 7ce7633..a72167c 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,23 +1,26 @@
-<button routerLink="/cupboard">Back to cupboard</button>
-<h1>Viewing Need: {{need?.name}}</h1>
-<a>internal id: {{need?.id}}</a>
-<div style="display: flex; column-gap: 6px;">
- <h3>Looking for</h3>
- <h3><u>{{need?.type}}</u></h3>
- <h3>Donations.</h3>
-</div>
-<div *ngIf="need?.filterAttributes != null">
- <p>Tags:</p>
- <ul style="display: flex; column-gap: 24px;">
- <li *ngFor="let tag of need?.filterAttributes">
- <p>{{tag}}</p>
- </li>
- </ul>
-</div>
+<div id="box">
+ <h1>{{need?.name}}</h1>
+ <div>
+ <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+ </div>
+ <div *ngIf="need?.filterAttributes">
+ <p>Tags:</p>
+ <ul style="display: flex; column-gap: 24px;">
+ <li *ngFor="let tag of need?.filterAttributes">
+ <p>{{tag}}</p>
+ </li>
+ </ul>
+ </div>
-<hr>
-<p>Location: {{need?.location}}</p>
-<p>Goal: {{need?.maxGoal}}</p>
-<p>Current: {{need?.current}}</p>
-<p>Urgent: {{need?.urgent}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
+ <hr>
+ <p>Location: {{need?.location}}</p>
+ <p>Urgent: {{need?.urgent}}</p>
+ <span>{{need?.current}} / {{need?.maxGoal}}</span>
+ <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+ <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
+ <div>
+ <button>Add to basket</button>
+ <button>Edit</button>
+ <button>Delete</button>
+ </div>
+</div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index e4b4e8c..b3ecbd0 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -57,3 +57,7 @@ button, .button {
.icon {
font-family: 'Material Symbols Outlined'
}
+
+h1 {
+ font-size: 40px;
+}
--
cgit v1.2.3
From cfe40fa1e416fbf4586ef36b63a145453a4d6224 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 00:38:37 -0400
Subject: Continue working on css (1)
---
ufund-ui/src/app/app.component.css | 28 +++++
ufund-ui/src/app/app.component.html | 8 ++
ufund-ui/src/app/app.component.ts | 13 ++-
.../app/components/cupboard/cupboard.component.css | 13 +--
.../components/cupboard/cupboard.component.html | 6 +-
.../mini-need-list/mini-need-list.component.css | 1 +
.../components/need-list/need-list.component.css | 126 ++++++++++-----------
.../components/need-list/need-list.component.html | 73 ++++++------
.../components/need-list/need-list.component.ts | 4 +-
ufund-ui/src/app/services/toasts.service.ts | 19 ++++
10 files changed, 179 insertions(+), 112 deletions(-)
create mode 100644 ufund-ui/src/app/services/toasts.service.ts
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5596cf8..5af3958 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -43,3 +43,31 @@
text-decoration: underline;
}
}
+
+.toast {
+ transform: translateY(-90px);
+ transition: transform .5s;
+ align-self: center;
+ z-index: 3;
+ position: absolute;
+ top: 15px;
+ display: flex;
+ flex-direction: row;
+ padding: 3px 15px;
+ background-color: #3a3a3a;
+ border-radius: 100000px;
+ gap: 10px;
+ align-items: center;
+
+ button {
+ aspect-ratio: 1/1;
+ margin-right: -11px;
+ padding: 8px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+.toast.active {
+ transform: translateY(0);
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index b0ee329..b41a225 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,3 +1,11 @@
+<div class="toast" #toastdiv>
+<!-- <span{{(toast | async).message}}</span>-->
+<!-- <a *ngIf="toast.action" (click)="toast.action.onAction()">{{toast.action.label}}</a>-->
+<!-- <button (click)="toastdiv.classList.remove('active')">-->
+<!-- <span class="icon">close</span>-->
+<!-- </button>-->
+</div>
+
<div id="header">
<div>
<a routerLink="/">
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 86717c4..7d9afcd 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,7 +1,12 @@
-import {Component, OnInit, Inject} from '@angular/core';
-import {BehaviorSubject} from 'rxjs';
+import {Component, OnInit, Inject, ViewChild} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
import { DOCUMENT } from '@angular/common';
import {AuthService} from './services/auth.service';
+import {ToastType} from './services/toasts.service';
+
+interface ToastProps {
+ type: ToastType, message: string, action?: {label: string, onAction: () => void}
+}
@Component({
selector: 'app-root',
@@ -12,6 +17,8 @@ import {AuthService} from './services/auth.service';
export class AppComponent implements OnInit {
// title = 'ufund-ui';
currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
+ toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
+
constructor(
private authService: AuthService,
@@ -31,4 +38,6 @@ export class AppComponent implements OnInit {
})
}
+
+
}
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index f4b6828..faff4d4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,14 +1,13 @@
:host {
display: flex;
- justify-content: space-evenly;
- border: 2px solid #000;
- border-radius: 5px;
- padding: 10px 20px;
- > div {
- width: 40%;
- }
+ justify-content: center;
}
+#box {
+ width: 1000px;
+ display: flex;
+ flex-direction: column;
+}
#menu {
display: flex;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index bc5ac1c..25b88ba 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,4 +1,4 @@
-<div>
+<div id="box">
<h1> Cupboard </h1>
<app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
</div>
@@ -25,7 +25,7 @@
<input type="checkbox" name="urgent" value="false" ngModel>
<label>Urgent</label><br>
<input type="submit" value="Submit">
-
+
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
@@ -46,7 +46,7 @@
<input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
<label>Urgent</label> <br>
<input type="submit" value="Submit">
-
+
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
index 8a3b6a7..ac456ab 100644
--- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -23,6 +23,7 @@
padding: 10px;
gap: 10px;
justify-content: start;
+ overflow: clip;
}
.needEntry {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 05354fc..1936b38 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,91 +1,85 @@
-:host {
- --list-background-color: lightgray;
- list-style-type: none;
- border: 2px solid #000;
- display: block;
- border-radius: 5px;
-
+#header {
+ display: flex;
+ flex-direction: column;
+ gap: 10px
}
-div {
- border: 2px solid #000;
+.needEntry {
+ background-color: #3a3a3a;
+ display: flex;
+ flex-direction: column;
border-radius: 5px;
- padding: 5px;
- margin: 5px;
+ padding: 10px;
+}
+
+#needList {
+ display: flex;
+ flex-direction: column;
+ gap: 10px
}
-ul {
- list-style-type: none;
- padding-inline-start: 0px;
+select {
+ font-size: 14pt;
+ padding: 5px;
}
-li {
- background-color: var(--list-background-color);
+#searchArea {
display: flex;
- justify-content: space-between;
- align-items: center;
- transition: all 0.3s ease;
- font-weight: bold;
- border: 2px solid #000;
- border-radius: 5px;
- margin: 5px;
- > button {
- background-color: transparent;
- width: 88%;
- transition: all 0.3s ease;
- font-weight: bold;
- border: none;
- border-radius: 5px;
- padding-left: 1.5%;
- > section {
- width: 100%;
- flex: none;
- display: inline-block;
- background-color: magenta;
- > progress {
- width: 25%;
- float: none;
- }
- }
+
+ form {
+ display: flex;
+ width: 100%;
+ gap: 10px;
}
- > section {
- width: 12%;
+ input[type=text] {
+ display: flex;
+ width: 100%;
}
}
-section button{
- margin: 4%;
+#sortArea {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ align-items: center;
}
-li > button span {
- font-style: italic;
- font-weight: normal;
+.needName {
+ font-weight: bold;
}
-li > button:hover p {
- text-decoration: underline;
+.needType {
+ text-transform: uppercase;
+ font-size: 10pt;
}
+.split {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
-.icon {
- width: 18px;
- margin: 3px -3px -1px -3px;
-}
+ .left {
+ display: flex;
+ flex-direction: column;
+ }
-#search-container {
- background-color: #d9d9d9;
+ .right {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ }
}
-#search-form {
- background-color: light-dark(#d9d9d9, #1b1b1b);
- padding: 10px 20px 20px 20px;
- border: 2px solid #000;
- border-radius: 5px;
+.urgent {
+ font-size: 11pt;
+ background-color: rgba(255, 165, 0, 0.27);
+ color: rgba(255, 165, 0, 1);
+ padding: 2px;
border-radius: 5px;
- visibility: visible;
+}
- .wide-input {
- width: 60%;
- }
- }
+.prog {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 72bc9c5..3a4ca9c 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,21 +1,21 @@
-<div id="search-container">
- <section>
+<div id="header">
+ <div id="searchArea">
+ <form id="search-form" #searchForm="ngForm">
+ <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+ <input type="reset" value="Clear" (click)="search(null)"> <br>
+ </form>
+ </div>
+ <div id="sortArea">
<label for="sort">Sort by: </label>
- <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+ <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
<option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
{{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
</option>
</select>
<button (click)="changeSortMode(searchForm.value)">
- {{sortMode}}
+ <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
</button>
- </section>
- <section>
- <form id="search-form" #searchForm="ngForm">
- <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
- <input type="reset" value="Clear" (click)="search(null)"> <br>
- </form>
- </section>
+ </div>
<!--<button (click)="close()">Close</button>-->
</div>
@@ -24,27 +24,36 @@
<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-<ul>
- <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
- <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
- <section> <p> {{need.name}} | {{need.location}} <span> {{need.urgent ? "URGENT" : ""}} </span> <span id="hover-status-label-{{need.id}}"> </span> </section>
- <section>
- <progress value="need.current" max="need.maxGoal"></progress>
- <progress value="need.current" max="need.maxGoal"></progress>
- <progress value="need.current" max="need.maxGoal"></progress>
- <progress value="need.current" max="need.maxGoal"></progress>
- </section>
- <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
- </button>
+<div id="needList">
+ <div *ngFor="let need of searchResults" class="needEntry">
+ <div [routerLink]="'/need/' + need.id">
+ <div class="split">
+ <div class="left">
+ <span class="needName">{{need.name}}</span>
+ <span class="needType">{{need.type}}</span>
+ </div>
- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
- <section *ngIf="isManager()">
- <button (click)="select(need)" id="need-edit-button-{{need.id}}">
- <img class="icon" src="/edit.png" alt="Select">
+ <div class="right">
+ <span *ngIf="need.urgent" class="urgent">URGENT</span>
+ <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+ </div>
+ </div>
+
+ <div class="prog">
+ <span id="hover-status-label-{{need.id}}"> </span>
+ <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
+ <progress [value]="need.current" [max]="need.maxGoal"></progress>
+ </div>
+ </div>
+
+ <div>
+ <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
+ <button *ngIf="isManager()" (click)="select(need)">
+ <span class="icon">edit</span>
</button>
- <button (click)="delete(need.id)" *ngIf="isManager()">
- <img class="icon" src="/delete.png" alt="Delete">
+ <button *ngIf="isManager()" (click)="delete(need.id)" >
+ <span class="icon">delete</span>
</button>
- </section>
- </li>
-</ul>
+ </div>
+ </div>
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index af8cab4..47114c3 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,7 @@ export class NeedListComponent {
selectedNeed: Need | null = null;
needs: Need[] = [];
searchResults: Need[] = [];
- sortMode = 'Ascending'
+ sortMode: 'Ascending' | 'Descending' = 'Ascending'
currentSortAlgo: sortAlgo = sortByPriority;
sortSelection: string = 'sortByPriority';
@@ -98,7 +98,7 @@ export class NeedListComponent {
});
const form = document.getElementById('search-form') as HTMLFormElement;
- form.reset();
+ form.reset();
this.search(null);
}
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
new file mode 100644
index 0000000..0c35e45
--- /dev/null
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+
+export enum ToastType {
+ INFO,
+ WARNING,
+ ERROR
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ToastsService {
+
+ constructor() {}
+
+ sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+
+ }
+}
--
cgit v1.2.3
From bcdf234066ee277b7436428989d5e0dbf58c2f60 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 10:15:40 -0400
Subject: description textarea for forms
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 25b88ba..89d8fbe 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -24,6 +24,8 @@
<label>Physical</label><br>
<input type="checkbox" name="urgent" value="false" ngModel>
<label>Urgent</label><br>
+ <label>Description</label>
+ <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
<input type="submit" value="Submit">
</form>
@@ -46,7 +48,8 @@
<input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
<label>Urgent</label> <br>
<input type="submit" value="Submit">
-
+ <label>Description</label>
+ <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
--
cgit v1.2.3
From d4dd348e81d3aef4cc62335f1dad5a02452dfadd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 10:16:03 -0400
Subject: frontend model support for description
---
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 6 ++++--
ufund-ui/src/app/models/Need.ts | 1 +
2 files changed, 5 insertions(+), 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 85ffd17..feb39e0 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -91,7 +91,8 @@ export class CupboardComponent implements OnInit {
type: GoalType[form.type as keyof typeof GoalType],
urgent: form.urgent,
filterAttributes: [],
- current: 0
+ current: 0,
+ description: form.description
};
this.cupboardService.updateNeed(need.id, need)
@@ -127,7 +128,8 @@ export class CupboardComponent implements OnInit {
type: form.type,
urgent: form.urgent ? true : false,
filterAttributes: [],
- current: 0
+ current: 0,
+ description: form.description
};
console.log("need:", need);
console.log("form submitted. creating need: ", need);
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 1451cad..2a2800c 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -7,6 +7,7 @@ export interface Need {
maxGoal: number;
current: number;
urgent: boolean;
+ description: string;
}
export enum GoalType {
--
cgit v1.2.3
From 5f083f775917c15597b3b70a0eb6a0ce2fda7667 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 11:28:42 -0400
Subject: More css tweaks
---
ufund-ui/src/app/app.component.html | 4 ++--
ufund-ui/src/app/app.component.ts | 19 ++++++++++++-------
.../src/app/components/login/login.component.html | 1 -
ufund-ui/src/styles.css | 2 +-
4 files changed, 15 insertions(+), 11 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index b41a225..89075e1 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -17,8 +17,8 @@
<a routerLink="/cupboard">Cupboard</a>
<a routerLink="/basket">Basket</a>
<!-- <span>{{currentUser$ | async}}</span>-->
- <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
- <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+ <button *ngIf="currentUser | async" (click)="logout()"> Log Out</button>
+ <button *ngIf="!(currentUser | async)" (click)="login()"> Log In</button>
</div>
</div>
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 7d9afcd..8068659 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -3,6 +3,8 @@ import {BehaviorSubject, Observable} from 'rxjs';
import { DOCUMENT } from '@angular/common';
import {AuthService} from './services/auth.service';
import {ToastType} from './services/toasts.service';
+import {User} from './models/User';
+import {ActivatedRoute, Router} from '@angular/router';
interface ToastProps {
type: ToastType, message: string, action?: {label: string, onAction: () => void}
@@ -16,12 +18,14 @@ interface ToastProps {
})
export class AppComponent implements OnInit {
// title = 'ufund-ui';
- currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
+ currentUser?: BehaviorSubject<User | null>;
toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
constructor(
private authService: AuthService,
+ private router: Router,
+ private route: ActivatedRoute,
@Inject(DOCUMENT) private document: Document
) {}
@@ -30,14 +34,15 @@ export class AppComponent implements OnInit {
}
ngOnInit() {
- this.authService.getCurrentUserSubject().subscribe(r => {
- this.currentUser$?.next(r
- ? "Logged in as " + r.username
- : "Logged out."
- )
- })
+ this.currentUser = this.authService.getCurrentUserSubject()
}
+ login() {
+ this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+ }
+ logout() {
+ location.reload()
+ }
}
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 743b1b3..e1c3e2a 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,5 +1,4 @@
<div id="box">
- <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
<h1>Login</h1>
<input placeholder="Username" type="text" #username>
<input placeholder="Password" type="password" #password>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index b3ecbd0..b152e61 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -32,7 +32,7 @@ input {
}
}
-button, .button {
+button, input[type=button], input[type=reset], input[type=submit], .button {
font-size: 14pt;
padding: 6px 16px;
border-radius: 9999px;
--
cgit v1.2.3
From cb5be32bf0d050cc1fd37d7cc9b4c51e1c51fffe Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 12:08:22 -0400
Subject: Added dynamic error messaging to the cupboard
---
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 85ffd17..88ab46c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import { CupboardService } from '../../services/cupboard.service';
import { Need, GoalType } from '../../models/Need';
import { userType } from '../../models/User';
@@ -99,7 +99,7 @@ export class CupboardComponent implements OnInit {
if (ex.status == 500) {
this.statusText.next("Fields cannot be blank");
} else if (ex.status == 400) {
- this.statusText.next("Goal must be greater than 0");
+ this.statusText.next(ex.error);
} else {
this.statusText.next("Error on creating need");
}
@@ -136,7 +136,7 @@ export class CupboardComponent implements OnInit {
if (ex.status == 500) {
this.statusText.next("Fields cannot be blank");
} else if (ex.status == 400) {
- this.statusText.next("Goal must be greater than 0");
+ this.statusText.next(ex.error);
} else {
this.statusText.next("Error on creating need");
}
--
cgit v1.2.3
From 655f83af9ba59d6153c9916b9a31bfe12680655e Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 13:12:42 -0400
Subject: Implemented localStorage cookies to maintain user persistence
---
ufund-ui/src/app/app.component.ts | 14 ++++++++++++--
ufund-ui/src/app/components/login/login.component.ts | 2 ++
ufund-ui/src/app/services/auth.service.ts | 14 ++++++++++++--
3 files changed, 26 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 8068659..34256f3 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, Inject, ViewChild} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Component, OnInit, Inject} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
import { DOCUMENT } from '@angular/common';
import {AuthService} from './services/auth.service';
import {ToastType} from './services/toasts.service';
@@ -34,7 +34,17 @@ export class AppComponent implements OnInit {
}
ngOnInit() {
+ console.log("AAAAAAAAAAAAAAAA")
this.currentUser = this.authService.getCurrentUserSubject()
+ let data = localStorage.getItem("credential");
+ if (data) {
+ let dataParsed = JSON.parse(data)
+ this.authService.restoreLogin(dataParsed.username, dataParsed.key)
+ console.log("Key found", dataParsed.key)
+ } else {
+ console.log("key missing")
+ console.log(data)
+ }
}
login() {
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index f6a2996..4dcaedd 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -35,6 +35,8 @@ export class LoginComponent implements OnInit {
this.authService.login(username, password).then(() => {
this.router.navigate([next]);
+ let key = this.authService.getApiKey()
+ localStorage.setItem("credential", JSON.stringify({username: username, key: key}))
}).catch(ex => {
this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
console.log(ex)
diff --git a/ufund-ui/src/app/services/auth.service.ts b/ufund-ui/src/app/services/auth.service.ts
index 6bc7145..b75c931 100644
--- a/ufund-ui/src/app/services/auth.service.ts
+++ b/ufund-ui/src/app/services/auth.service.ts
@@ -1,7 +1,8 @@
-import {Injectable} from '@angular/core';
+import {Injectable, Injector} from '@angular/core';
import {BehaviorSubject, firstValueFrom} from 'rxjs';
import {User} from '../models/User';
import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {UsersService} from './users.service';
@Injectable({
providedIn: 'root'
@@ -24,7 +25,9 @@ export class AuthService {
});
constructor(
- private http: HttpClient
+ private http: HttpClient,
+ // private userService: UsersService
+ private injector: Injector
) {}
async login(username: string, password: string) {
@@ -42,6 +45,13 @@ export class AuthService {
// this.currentUser.subscribe(r => console.log("currentUser: "+r.username))
}
+ async restoreLogin(username: string, key: string) {
+
+ const userService = this.injector.get(UsersService);
+ this.apiKey = key;
+ this.currentUser.next(await firstValueFrom(userService.getUser(username)))
+ }
+
getCurrentUserSubject() {
return this.currentUser;
}
--
cgit v1.2.3
From 07a9e3c6faf735b374c6b63235defeb8a38a6661 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 13:27:02 -0400
Subject: Implemented logout functionality with localStorage
---
ufund-ui/src/app/app.component.ts | 1 +
1 file changed, 1 insertion(+)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 34256f3..94a6439 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -52,6 +52,7 @@ export class AppComponent implements OnInit {
}
logout() {
+ localStorage.removeItem("credential")
location.reload()
}
--
cgit v1.2.3
From ec88317c75ec907c319412502a1b189c97db9173 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 14:36:39 -0400
Subject: Modified need list to display percent as a whole number
---
ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 3a4ca9c..e24ee09 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -41,7 +41,7 @@
<div class="prog">
<span id="hover-status-label-{{need.id}}"> </span>
- <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
+ <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
<progress [value]="need.current" [max]="need.maxGoal"></progress>
</div>
</div>
--
cgit v1.2.3
From 2031579ce6033fbe67a78b66d3da2ee6872748de Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:08:59 -0400
Subject: Removed old logging
---
ufund-ui/src/app/app.component.ts | 4 ----
1 file changed, 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 94a6439..df9114e 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -34,16 +34,12 @@ export class AppComponent implements OnInit {
}
ngOnInit() {
- console.log("AAAAAAAAAAAAAAAA")
this.currentUser = this.authService.getCurrentUserSubject()
let data = localStorage.getItem("credential");
if (data) {
let dataParsed = JSON.parse(data)
this.authService.restoreLogin(dataParsed.username, dataParsed.key)
console.log("Key found", dataParsed.key)
- } else {
- console.log("key missing")
- console.log(data)
}
}
--
cgit v1.2.3
From 9f31fea81818dae21f67b23a6004a3ca369f8e0d Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:09:23 -0400
Subject: Added check to prevent redirect to login page
---
ufund-ui/src/app/components/dashboard/dashboard.component.ts | 4 ++--
.../src/app/components/funding-basket/funding-basket.component.ts | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 165c7ba..49d93bf 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -27,7 +27,7 @@ export class DashboardComponent implements OnInit{
ngOnInit() {
let user = this.authService.getCurrentUser()
- if(!user) {
+ if(!localStorage.getItem("credential") && !user) {
this.router.navigate(['/login'])
return
}
@@ -35,7 +35,7 @@ export class DashboardComponent implements OnInit{
firstValueFrom(this.cupboardService.getNeeds()).then(r => {
this.topNeeds = r.sort((a, b) => b.current - a.current)
this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
- this.inBasket = r.filter(n => n.id in user?.basket)
+ this.inBasket = r.filter(n => n.id in user!.basket)
})
}
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index faa7e0b..5c5776f 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit {
// this is for login rerouting
ngOnInit(): void {
- if (!this.authService.getCurrentUser()) {
+ if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) {
this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
return;
}
--
cgit v1.2.3
From d07e7630c836711b92cffd41fe99d15c84cb025f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:09:41 -0400
Subject: Added animation to header tabs when hovering over them
---
ufund-ui/src/app/app.component.css | 27 ++++++++++++++++++++++++---
1 file changed, 24 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5af3958..5204919 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,10 +38,31 @@
text-decoration: none;
}
- a:hover {
- /*color: light-dark(black, white)*/
- text-decoration: underline;
+ a {
+ display: block;
+ position: relative;
+ padding: 0.1em 0;
+ }
+
+ a::after {
+ content: '';
+ position: absolute;
+ bottom: 4px;
+ left: 0;
+ width: 100%;
+ height: 0.03em;
+ background-color: white;
+ opacity: 0;
+ transition: opacity 300ms, transform 300ms;
}
+
+ a:hover::after,
+ a:focus::after {
+ opacity: 1;
+ transform: translate3d(0, 0.2em, 0);
+ }
+
+
}
.toast {
--
cgit v1.2.3
From b07405c2a1817271c84e25bfe62b6b3ff36136f9 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:10:52 -0400
Subject: Unused imports
---
ufund-ui/src/app/components/dashboard/dashboard.component.ts | 2 --
1 file changed, 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 49d93bf..645893f 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,8 @@
import {Component, OnInit} from '@angular/core';
-import {userType} from '../../models/User';
import {AuthService} from '../../services/auth.service';
import {Router} from '@angular/router';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
-import {UsersService} from '../../services/users.service';
import {firstValueFrom} from 'rxjs';
@Component({
--
cgit v1.2.3
From f7a0ce90b0ead17ad4002108d7e868899954c69d Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 17:28:20 -0400
Subject: Removed login check for now
---
.../app/components/funding-basket/funding-basket.component.ts | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 5c5776f..08515c2 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit {
// this is for login rerouting
ngOnInit(): void {
- if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) {
+ if (!this.authService.getCurrentUser()) {
this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
return;
}
@@ -45,6 +45,15 @@ export class FundingBasketComponent implements OnInit {
contribution.setAttribute("style", "color: #ff0000");
}
}
+ // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
+ // for (let c of this.usersService.getBasket().value) {
+ // if (c == null) {
+ // this.isValid = false;
+ // this.statusText.next("One or more needs have been deleted")
+ // } else {
+ // this.statusText.next("test")
+ // }
+ // }
if (this.isValid) {
for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
let contribution = c as HTMLInputElement;
--
cgit v1.2.3
From 97c9e1e0bb73c7b08c830c47548ac1c4b5bebd0b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 17:33:04 -0400
Subject: TOASTS
---
ufund-ui/src/app/app.component.css | 28 -----------
ufund-ui/src/app/app.component.html | 8 ---
ufund-ui/src/app/app.component.ts | 14 ++----
ufund-ui/src/app/app.module.ts | 2 +
.../src/app/components/toast/toast.component.css | 57 ++++++++++++++++++++++
.../src/app/components/toast/toast.component.html | 7 +++
.../src/app/components/toast/toast.component.ts | 37 ++++++++++++++
ufund-ui/src/app/services/toasts.service.ts | 12 ++++-
8 files changed, 118 insertions(+), 47 deletions(-)
create mode 100644 ufund-ui/src/app/components/toast/toast.component.css
create mode 100644 ufund-ui/src/app/components/toast/toast.component.html
create mode 100644 ufund-ui/src/app/components/toast/toast.component.ts
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5204919..0bcd658 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -64,31 +64,3 @@
}
-
-.toast {
- transform: translateY(-90px);
- transition: transform .5s;
- align-self: center;
- z-index: 3;
- position: absolute;
- top: 15px;
- display: flex;
- flex-direction: row;
- padding: 3px 15px;
- background-color: #3a3a3a;
- border-radius: 100000px;
- gap: 10px;
- align-items: center;
-
- button {
- aspect-ratio: 1/1;
- margin-right: -11px;
- padding: 8px;
- display: flex;
- align-items: center;
- }
-}
-
-.toast.active {
- transform: translateY(0);
-}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 89075e1..959eada 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,11 +1,3 @@
-<div class="toast" #toastdiv>
-<!-- <span{{(toast | async).message}}</span>-->
-<!-- <a *ngIf="toast.action" (click)="toast.action.onAction()">{{toast.action.label}}</a>-->
-<!-- <button (click)="toastdiv.classList.remove('active')">-->
-<!-- <span class="icon">close</span>-->
-<!-- </button>-->
-</div>
-
<div id="header">
<div>
<a routerLink="/">
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index df9114e..2f98334 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,15 +1,11 @@
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import { DOCUMENT } from '@angular/common';
import {AuthService} from './services/auth.service';
-import {ToastType} from './services/toasts.service';
+import {ToastsService} from './services/toasts.service';
import {User} from './models/User';
import {ActivatedRoute, Router} from '@angular/router';
-interface ToastProps {
- type: ToastType, message: string, action?: {label: string, onAction: () => void}
-}
-
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
@@ -19,13 +15,13 @@ interface ToastProps {
export class AppComponent implements OnInit {
// title = 'ufund-ui';
currentUser?: BehaviorSubject<User | null>;
- toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
-
constructor(
private authService: AuthService,
private router: Router,
private route: ActivatedRoute,
+ protected toastService: ToastsService,
+ private viewContainerRef: ViewContainerRef,
@Inject(DOCUMENT) private document: Document
) {}
@@ -34,6 +30,7 @@ export class AppComponent implements OnInit {
}
ngOnInit() {
+ this.toastService.setRootViewContainerRef(this.viewContainerRef)
this.currentUser = this.authService.getCurrentUserSubject()
let data = localStorage.getItem("credential");
if (data) {
@@ -51,5 +48,4 @@ export class AppComponent implements OnInit {
localStorage.removeItem("credential")
location.reload()
}
-
}
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index ea7e6ad..c91256e 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -16,6 +16,7 @@ import {CommonModule} from '@angular/common';
import {LoginComponent} from './components/login/login.component';
import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
import { SignupComponent } from './components/signup/signup.component';
+import { ToastComponent } from './components/toast/toast.component';
@NgModule({
declarations: [
@@ -29,6 +30,7 @@ import { SignupComponent } from './components/signup/signup.component';
LoginComponent,
SignupComponent,
MiniNeedListComponent,
+ ToastComponent,
],
imports: [
BrowserModule,
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
new file mode 100644
index 0000000..4cd81fe
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -0,0 +1,57 @@
+:host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+@keyframes slideDown {
+ from {transform: translateY(-90px);}
+ to {transform: translateY(0);}
+}
+
+.toast {
+ /*transform: translateY(-90px);*/
+ animation: slideDown .5s ease-in-out;
+ transition: transform .5s;
+ align-self: center;
+ z-index: 3;
+ position: absolute;
+ top: 15px;
+ display: flex;
+ flex-direction: row;
+ padding: 3px 15px;
+ background-color: #3a3a3a;
+ border-radius: 100000px;
+ gap: 10px;
+ align-items: center;
+
+ button {
+ aspect-ratio: 1/1;
+ margin-right: -11px;
+ padding: 8px;
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ }
+
+ button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+}
+
+.toast.hide {
+ transform: translateY(-90px);
+}
+
+.toast.warning {
+ background-color: #ffc500;
+ color: black;
+
+ button {
+ color: black;
+ }
+}
+
+.toast.error {
+ background-color: #d81a1a;
+}
diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html
new file mode 100644
index 0000000..dccf869
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.html
@@ -0,0 +1,7 @@
+<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv>
+ <span>{{this.message}}</span>
+ <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a>
+ <button (click)="hide()">
+ <span class="icon">close</span>
+ </button>
+</div>
diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts
new file mode 100644
index 0000000..47fd7ff
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.ts
@@ -0,0 +1,37 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ToastType} from '../../services/toasts.service';
+
+@Component({
+ selector: 'app-toast',
+ standalone: false,
+ templateUrl: './toast.component.html',
+ styleUrl: './toast.component.css'
+})
+export class ToastComponent implements OnInit{
+ @Input() type!: ToastType
+ @Input() message!: string
+ @Input() action?: {label: string, onAction: () => void}
+
+ @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement>
+
+ ngOnInit() {
+ setTimeout(() => {
+ this.hide();
+ }, 3000)
+ }
+
+ hide() {
+ console.log(this.toastDiv, typeof this.toastDiv)
+ this.toastDiv.nativeElement.classList.add('hide')
+ }
+
+ getColor() {
+ switch (this.type) {
+ case ToastType.ERROR: return "red";
+ case ToastType.INFO: return "";
+ case ToastType.WARNING: return "yellow";
+ }
+ }
+
+ protected readonly ToastType = ToastType;
+}
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
index 0c35e45..4fd024e 100644
--- a/ufund-ui/src/app/services/toasts.service.ts
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -1,4 +1,5 @@
-import {Injectable} from '@angular/core';
+import {Injectable, ViewContainerRef} from '@angular/core';
+import {ToastComponent} from '../components/toast/toast.component';
export enum ToastType {
INFO,
@@ -11,9 +12,16 @@ export enum ToastType {
})
export class ToastsService {
- constructor() {}
+ private vcr?: ViewContainerRef
sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+ let compRef = this.vcr?.createComponent(ToastComponent)!
+ compRef.setInput("message", message)
+ compRef.setInput("type", type)
+ compRef.setInput("action", action)
+ }
+ setRootViewContainerRef(vcr: ViewContainerRef) {
+ this.vcr = vcr
}
}
--
cgit v1.2.3
From 643afd1d6ffcca3597556d287944eaf487da709c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 17:42:40 -0400
Subject: frontend description editing and display
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 5 +++--
ufund-ui/src/app/components/need-list/need-list.component.html | 10 +++++++---
2 files changed, 10 insertions(+), 5 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 89d8fbe..f6a2041 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -47,9 +47,10 @@
<label>Physical</label><br>
<input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
<label>Urgent</label> <br>
- <input type="submit" value="Submit">
- <label>Description</label>
+ <label>Description</label> <br>
<textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+ <input type="submit" value="Submit">
+
</form>
<span *ngIf="statusText">{{statusText | async}}</span>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 3a4ca9c..d35f2ed 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -32,20 +32,24 @@
<span class="needName">{{need.name}}</span>
<span class="needType">{{need.type}}</span>
</div>
-
+
<div class="right">
<span *ngIf="need.urgent" class="urgent">URGENT</span>
<span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
</div>
</div>
-
+
<div class="prog">
<span id="hover-status-label-{{need.id}}"> </span>
<span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
<progress [value]="need.current" [max]="need.maxGoal"></progress>
</div>
- </div>
+ <div class="description">
+ {{need.description}}
+ </div>
+ </div>
+
<div>
<button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
<button *ngIf="isManager()" (click)="select(need)">
--
cgit v1.2.3
From a2e1329a510375fdada021c3d6a2f631a9c162ee Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 17:51:17 -0400
Subject: image property frontend support
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 3 +++
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 2 ++
ufund-ui/src/app/models/Need.ts | 1 +
3 files changed, 6 insertions(+)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index f6a2041..855bd7e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -13,6 +13,8 @@
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
<label>Name:</label><br>
<input type="text" name="name" ngModel><br>
+ <label>Image:</label><br>
+ <input type="text" name="image" ngModel><br>
<label>Location:</label><br>
<input type="text" name="location" ngModel><br>
<label>Max Goal:</label><br>
@@ -37,6 +39,7 @@
<label>Needs:</label><br>
<form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
<input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+ <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
<input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
<label>Max Goal:</label><br>
<input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index feb39e0..9c8a173 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -85,6 +85,7 @@ export class CupboardComponent implements OnInit {
console.log(form);
const need: Need = {
name: form.name,
+ image: form.image,
location: form.location,
id: this.selectedNeed.id, //system will control this
maxGoal: form.maxGoal,
@@ -122,6 +123,7 @@ export class CupboardComponent implements OnInit {
submit(form: any) {
const need: Need = {
name: form.name,
+ image: form.image,
location: form.location,
id: 0,
maxGoal: form.maxGoal,
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 2a2800c..6cf7e76 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -1,5 +1,6 @@
export interface Need {
name: string,
+ image: string,
id: number,
filterAttributes: string[],
location: string;
--
cgit v1.2.3
From 459c716d5429c040ac25435aab93f896f2fd79c3 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 17:51:47 -0400
Subject: use toasts in funding basket
---
.../components/funding-basket/funding-basket.component.ts | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 08515c2..24e2c0b 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
import {CupboardService} from '../../services/cupboard.service';
import {catchError, firstValueFrom, Observable} from 'rxjs';
import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
@Component({
selector: 'app-funding-basket',
@@ -18,7 +19,8 @@ export class FundingBasketComponent implements OnInit {
private router: Router,
protected cupboardService: CupboardService,
protected usersService: UsersService,
- private authService: AuthService
+ private authService: AuthService,
+ private toastService: ToastsService
) {}
@ViewChild("contribution") contribution?: Input;
@@ -42,7 +44,9 @@ export class FundingBasketComponent implements OnInit {
contribution.setAttribute("style", "");
if (contribution.value == '' || contribution.valueAsNumber <= 0) {
this.isValid = false;
+
contribution.setAttribute("style", "color: #ff0000");
+ this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!")
}
}
// if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
@@ -63,11 +67,11 @@ export class FundingBasketComponent implements OnInit {
this.cupboardService.checkoutNeed(need.id, +contribution.value)
.pipe(catchError((ex, _) => {
if (ex.status == 500) {
- this.statusText.next('Fields cannot be blank');
+ this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
} else if (ex.status == 400) {
- this.statusText.next('Goal must be greater than 0');
+ this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0');
} else {
- this.statusText.next('Error on creating need');
+ this.toastService.sendToast(ToastType.INFO, 'Error on creating need');
}
return new Observable<string>();
}))
--
cgit v1.2.3
From e1ef22279baccb4b2a5a1ecbb5222e4008d4d523 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 20:28:35 -0400
Subject: Added toasts for error handling
---
.../app/components/cupboard/cupboard.component.ts | 21 +++++++++++----------
.../src/app/components/login/login.component.ts | 12 ++++++------
.../src/app/components/signup/signup.component.ts | 4 +++-
3 files changed, 20 insertions(+), 17 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 9c8a173..653edd4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,10 +1,11 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import { CupboardService } from '../../services/cupboard.service';
import { Need, GoalType } from '../../models/Need';
import { userType } from '../../models/User';
-import { BehaviorSubject, catchError, of } from 'rxjs';
+import { catchError, of } from 'rxjs';
import { NeedListComponent } from '../need-list/need-list.component';
import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
@Component({
selector: 'app-cupboard',
@@ -15,14 +16,14 @@ import {AuthService} from '../../services/auth.service';
export class CupboardComponent implements OnInit {
- protected statusText = new BehaviorSubject("")
selectedForm = "create";
needs: any;
@ViewChild("needList") needList?: NeedListComponent
constructor(
private cupboardService: CupboardService,
- private authService: AuthService
+ private authService: AuthService,
+ private toastService: ToastsService
) {}
ngOnInit(): void {
@@ -99,11 +100,11 @@ export class CupboardComponent implements OnInit {
this.cupboardService.updateNeed(need.id, need)
.pipe(catchError((ex, _) => {
if (ex.status == 500) {
- this.statusText.next("Fields cannot be blank");
+ this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
} else if (ex.status == 400) {
- this.statusText.next("Goal must be greater than 0");
+ this.toastService.sendToast(ToastType.INFO, "Goal must be greater than 0");
} else {
- this.statusText.next("Error on creating need");
+ this.toastService.sendToast(ToastType.INFO, "Error on creating need");
}
return of()
}))
@@ -138,11 +139,11 @@ export class CupboardComponent implements OnInit {
this.cupboardService.createNeed(need)
.pipe(catchError((ex, _) => {
if (ex.status == 500) {
- this.statusText.next("Fields cannot be blank");
+ this.toastService.sendToast(ToastType.INFO, "Fields cannot be blank");
} else if (ex.status == 400) {
- this.statusText.next("Goal must be greater than 0");
+ this.toastService.sendToast(ToastType.INFO, "Goal must be greater than 0");
} else {
- this.statusText.next("Error on creating need");
+ this.toastService.sendToast(ToastType.INFO, "Error on creating need");
}
return of()
}))
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index 4dcaedd..0177f67 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -1,8 +1,8 @@
import {Component, OnInit} from '@angular/core'
import {UsersService} from '../../services/users.service';
import {ActivatedRoute, Router} from '@angular/router';
-import {BehaviorSubject} from 'rxjs';
import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
@Component({
selector: 'app-login',
@@ -13,13 +13,13 @@ import {AuthService} from '../../services/auth.service';
export class LoginComponent implements OnInit {
protected next?: string | null;
- protected statusText = new BehaviorSubject("")
constructor(
protected usersService: UsersService,
protected router: Router,
private route: ActivatedRoute,
- private authService: AuthService
+ private authService: AuthService,
+ private toastService: ToastsService
) {}
ngOnInit() {
@@ -38,7 +38,7 @@ export class LoginComponent implements OnInit {
let key = this.authService.getApiKey()
localStorage.setItem("credential", JSON.stringify({username: username, key: key}))
}).catch(ex => {
- this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
+ this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status])
console.log(ex)
})
}
@@ -50,9 +50,9 @@ export class LoginComponent implements OnInit {
}
this.usersService.createUser(username, password).then(() => {
- this.statusText.next("Account created, click login.")
+ this.toastService.sendToast(ToastType.INFO, "Account created, click login.")
}).catch(ex => {
- this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+ this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
console.log(ex)
})
}
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 1ab863d..5ec84ae 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
import {UsersService} from '../../services/users.service';
import {Router} from '@angular/router';
import {BehaviorSubject} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
class PasswordRequirements {
sixLong: {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false}
@@ -34,6 +35,7 @@ export class SignupComponent {
constructor(
protected usersService: UsersService,
protected router: Router,
+ protected toastService: ToastsService
) {}
signup(username: string | null, password: string | null) {
@@ -45,7 +47,7 @@ export class SignupComponent {
this.usersService.createUser(username, password).then(() => {
this.showSuccessMessage.next(true);
}).catch(ex => {
- this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+ this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
console.log(ex)
})
}
--
cgit v1.2.3
From 6af14c6089f0fa0924740fb6089affc545f93a81 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 20:51:59 -0400
Subject: Removed broken status texts which have been replaced with toasts
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 5 +----
ufund-ui/src/app/components/login/login.component.html | 1 -
2 files changed, 1 insertion(+), 5 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 855bd7e..6f7799e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -31,8 +31,6 @@
<input type="submit" value="Submit">
</form>
- <span *ngIf="statusText">{{statusText | async}}</span>
-
</div>
<div id="update-form" *ngIf="selectedForm === 'update'">
<h1> Update Need </h1>
@@ -53,9 +51,8 @@
<label>Description</label> <br>
<textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
<input type="submit" value="Submit">
-
+
</form>
- <span *ngIf="statusText">{{statusText | async}}</span>
</div>
<hr>
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index e1c3e2a..c67b903 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -6,5 +6,4 @@
<div>
New? <a routerLink="/signup">Create an account</a>
</div>
- <span *ngIf="statusText">{{statusText | async}}</span>
</div>
--
cgit v1.2.3
From 9c9708cc846dafe33234c38c37425468b9877514 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 21:32:55 -0400
Subject: Updated toast's types
---
ufund-ui/src/app/components/cupboard/cupboard.component.ts | 12 ++++++------
.../components/funding-basket/funding-basket.component.ts | 6 +++++-
ufund-ui/src/app/components/signup/signup.component.ts | 2 +-
3 files changed, 12 insertions(+), 8 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index fff8760..662def4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -100,11 +100,11 @@ export class CupboardComponent implements OnInit {
this.cupboardService.updateNeed(need.id, need)
.pipe(catchError((ex, _) => {
if (ex.status == 500) {
- this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
+ this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
} else if (ex.status == 400) {
- this.toastService.sendToast(ToastType.INFO, ex.error);
+ this.toastService.sendToast(ToastType.ERROR, ex.error);
} else {
- this.toastService.sendToast(ToastType.INFO, "Error on creating need");
+ this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
}
return of()
}))
@@ -139,11 +139,11 @@ export class CupboardComponent implements OnInit {
this.cupboardService.createNeed(need)
.pipe(catchError((ex, _) => {
if (ex.status == 500) {
- this.toastService.sendToast(ToastType.INFO, "Fields cannot be blank");
+ this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
} else if (ex.status == 400) {
- this.toastService.sendToast(ToastType.INFO, ex.error);
+ this.toastService.sendToast(ToastType.ERROR, ex.error);
} else {
- this.toastService.sendToast(ToastType.INFO, "Error on creating need");
+ this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
}
return of()
}))
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 24e2c0b..54ae720 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -46,7 +46,11 @@ export class FundingBasketComponent implements OnInit {
this.isValid = false;
contribution.setAttribute("style", "color: #ff0000");
- this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!")
+ this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
+
+ setTimeout(() => {
+ contribution.setAttribute("style", "color: #ffffff");
+ }, 3000);
}
}
// if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 5ec84ae..a20d828 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -47,7 +47,7 @@ export class SignupComponent {
this.usersService.createUser(username, password).then(() => {
this.showSuccessMessage.next(true);
}).catch(ex => {
- this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
+ this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
console.log(ex)
})
}
--
cgit v1.2.3
From aef3df6f9eacfe37479046826a9ca14310b72456 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 21:54:38 -0400
Subject: Apply css to funding basket
---
.../funding-basket/funding-basket.component.css | 85 +++++++++++++++-
.../funding-basket/funding-basket.component.html | 112 ++++++++++++++-------
.../funding-basket/funding-basket.component.ts | 6 +-
.../components/need-list/need-list.component.css | 21 +++-
.../components/need-list/need-list.component.html | 23 +++--
.../components/need-list/need-list.component.ts | 13 +--
ufund-ui/src/styles.css | 4 +
7 files changed, 202 insertions(+), 62 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index 3dec496..a17f710 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -1,7 +1,82 @@
-td, p {
- border: 2px solid #000;
+:host {
+ display: flex;
+ justify-content: center;
+}
+
+#box {
+ display: flex;
+ width: 1000px;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.needEntry {
+ background-color: #2e2e2e;
+ display: flex;
+ flex-direction: column;
border-radius: 5px;
- padding: 5px;
- margin: 5px;
+}
+
+#needList {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-width: 1000px;
+}
+
+.needName {
+ font-weight: bold;
+}
+
+.needType {
+ text-transform: uppercase;
+ font-size: 10pt;
+}
+
+.split {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+
+ .left {
+ display: flex;
+ flex-direction: column;
+ }
-}
\ No newline at end of file
+ .right {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ }
+}
+
+.urgent {
+ font-size: 11pt;
+ background-color: rgba(255, 165, 0, 0.27);
+ color: rgba(255, 165, 0, 1);
+ padding: 2px;
+ border-radius: 5px;
+}
+
+.prog {
+ display: flex;
+ flex-direction: column;
+}
+
+.clickable {
+ padding: 10px;
+ background-color: #3a3a3a;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.clickable:hover {
+ background-color: #444444;
+}
+
+.actionArea {
+ display: flex;
+ padding: 5px;
+ gap: 5px;
+}
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 504e694..52b35c1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -1,39 +1,81 @@
-<h1>Funding Basket</h1>
-<div id="needCount">
- <label for="needCount">Needs in Basket:</label>
- <span>{{ this.usersService.getBasket().getValue().length }}</span>
-</div>
+<!--<div id="needCount">-->
+<!-- <label for="needCount">Needs in Basket:</label>-->
+<!-- <span>{{ this.usersService.getBasket().getValue().length }}</span>-->
+<!--</div>-->
-<div *ngIf="this.usersService.getBasket().getValue().length == 0">
- <h2>There are no needs in the basket</h2>
-</div>
+<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">-->
+<!-- <h2>There are no needs in the basket</h2>-->
+<!--</div>-->
+
+<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">-->
+<!-- <thead>-->
+<!-- <tr>-->
+<!-- <th class="need"></th>-->
+<!-- </tr>-->
+<!-- </thead>-->
+<!-- <tbody>-->
+<!-- <tr *ngFor="let need of usersService.getBasket().getValue()">-->
+<!-- <td>-->
+<!-- <a routerLink="/need/{{need.id}}">{{need.name}}</a>-->
+<!-- <p>Goal: {{need.maxGoal}}</p>-->
+<!-- <p>Current: {{(need.current).toFixed(2)}}</p>-->
+<!-- <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>-->
+<!-- <br>-->
+<!-- <div>-->
+<!-- <button type="button" class="removeNeed" title="delete need"-->
+<!-- (click)="this.usersService.removeNeed(need.id)">Remove Need</button>-->
+<!-- </div>-->
+<!-- </td>-->
+<!-- </tr>-->
+<!-- </tbody>-->
+<!--</table>-->
+<!--<br>-->
+<div id="box">
+ <h1>Funding Basket</h1>
+ <ng-template [ngIf]="usersService.getBasket().getValue().length">
+ <div id="needList">
+ <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry">
+ <div [routerLink]="'/need/' + need.id" class="clickable">
+ <div class="split">
+ <div class="left">
+ <span class="needName">{{need.name}}</span>
+ <span class="needType">{{need.type}}</span>
+ </div>
+
+ <div class="right">
+ <span *ngIf="need.urgent" class="urgent">URGENT</span>
+ <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+ </div>
+ </div>
+
+ <br>
-<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">
- <thead>
- <tr>
- <th class="need"></th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let need of usersService.getBasket().getValue()">
- <td>
- <a routerLink="/need/{{need.id}}">{{need.name}}</a>
- <p>Goal: {{need.maxGoal}}</p>
- <p>Current: {{(need.current).toFixed(2)}}</p>
- <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>
- <br>
- <div>
- <button type="button" class="removeNeed" title="delete need"
- (click)="this.usersService.removeNeed(need.id)">Remove Need</button>
+ <div class="prog">
+ <span id="hover-status-label-{{need.id}}"> </span>
+ <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+ <progress [value]="need.current" [max]="need.maxGoal"></progress>
+ </div>
+
+ <!-- <div class="description">-->
+ <!-- {{need.description}}-->
+ <!-- </div>-->
+ </div>
+
+ <div class="actionArea">
+ <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">
+ <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
+ <span class="icon">delete</span> Remove from Basket
+ </button>
</div>
- </td>
- </tr>
- </tbody>
-</table>
-<br>
-<div>
- <p *ngIf="!isValid">Invalid input in funding basket!</p>
- <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button>
- <span *ngIf="statusText">{{statusText | async}}</span>
-</div>
\ No newline at end of file
+ </div>
+ </div>
+ <br>
+ <div id="footer">
+ <button class="button2" title="checkout" (click)="checkout()">Checkout</button>
+ </div>
+ </ng-template>
+ <div *ngIf="!usersService.getBasket().getValue().length">
+ <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a>
+ </div>
+</div>
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 24e2c0b..646ef35 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -39,7 +39,7 @@ export class FundingBasketComponent implements OnInit {
async checkout() {
this.isValid = true;
- for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+ for (let c of document.querySelectorAll('.contribution')!) {
let contribution = c as HTMLInputElement;
contribution.setAttribute("style", "");
if (contribution.value == '' || contribution.valueAsNumber <= 0) {
@@ -59,7 +59,7 @@ export class FundingBasketComponent implements OnInit {
// }
// }
if (this.isValid) {
- for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+ for (let c of document.querySelectorAll('.contribution')!) {
let contribution = c as HTMLInputElement;
let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
need.current += +contribution.value;
@@ -77,11 +77,11 @@ export class FundingBasketComponent implements OnInit {
}))
.subscribe((result) => {
if (result) {
- console.log('need updated successfully');
//this.needList?.refresh()
} else {
console.log('need update failed');
}
+ this.toastService.sendToast(ToastType.INFO, "Checkout successful");
});
}
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 1936b38..d4be5fa 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -5,11 +5,10 @@
}
.needEntry {
- background-color: #3a3a3a;
+ background-color: #2e2e2e;
display: flex;
flex-direction: column;
border-radius: 5px;
- padding: 10px;
}
#needList {
@@ -59,6 +58,7 @@ select {
flex-direction: row;
justify-content: space-between;
+
.left {
display: flex;
flex-direction: column;
@@ -83,3 +83,20 @@ select {
display: flex;
flex-direction: column;
}
+
+.clickable {
+ padding: 10px;
+ background-color: #3a3a3a;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.clickable:hover {
+ background-color: #444444;
+}
+
+.actionArea {
+ display: flex;
+ padding: 5px;
+ gap: 5px;
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index c325320..84f83d6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -26,37 +26,38 @@
<div id="needList">
<div *ngFor="let need of searchResults" class="needEntry">
- <div [routerLink]="'/need/' + need.id">
+ <div [routerLink]="'/need/' + need.id" class="clickable">
<div class="split">
<div class="left">
<span class="needName">{{need.name}}</span>
<span class="needType">{{need.type}}</span>
</div>
-
+
<div class="right">
<span *ngIf="need.urgent" class="urgent">URGENT</span>
<span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
</div>
</div>
-
+
+ <br>
+
<div class="prog">
<span id="hover-status-label-{{need.id}}"> </span>
<span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
<progress [value]="need.current" [max]="need.maxGoal"></progress>
</div>
- <div class="description">
- {{need.description}}
- </div>
</div>
-
- <div>
- <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
+
+ <div class="actionArea">
+ <button *ngIf="isHelper()" (click)="add(need)">
+ <span class="icon">add</span>Add To Basket
+ </button>
<button *ngIf="isManager()" (click)="select(need)">
- <span class="icon">edit</span>
+ <span class="icon">edit</span>Delete Need
</button>
<button *ngIf="isManager()" (click)="delete(need.id)" >
- <span class="icon">delete</span>
+ <span class="icon">delete</span>Edit Need
</button>
</div>
</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 47114c3..7a9d647 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,11 +1,11 @@
-import {Component , Output, EventEmitter} from '@angular/core';
-import { NgForm } from '@angular/forms';
+import {Component, EventEmitter, Output} from '@angular/core';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {UsersService} from '../../services/users.service';
+import {userType} from '../../models/User';
import {AuthService} from '../../services/auth.service';
import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
interface sortAlgo {
(a: Need,b: Need): number;
@@ -84,7 +84,8 @@ export class NeedListComponent {
constructor(
private cupboardService: CupboardService,
private usersService: UsersService,
- private authService: AuthService
+ private authService: AuthService,
+ private toastService: ToastsService
) {}
refresh() {
@@ -196,7 +197,7 @@ export class NeedListComponent {
this.usersService.refreshBasket();
});
} else {
- window.alert("This need is already in your basket!")
+ this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
}
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index b152e61..f515154 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -38,6 +38,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
border-radius: 9999px;
border-style: none;
background-color: light-dark(#ebebeb, #3a3a3a);
+ display: flex;
+ gap: 5px;
+ text-align: center;
+ justify-content: center;
&:hover {
background-color: light-dark(#e1e1e1, #444444);
--
cgit v1.2.3
From 4f8ddd385924b3c7c2b36acd28daf658ecc2cb09 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 21:57:32 -0400
Subject: Tweak validation in funding basket
---
.../src/app/components/funding-basket/funding-basket.component.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index b3826be..ecf452a 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -45,11 +45,11 @@ export class FundingBasketComponent implements OnInit {
if (contribution.value == '' || contribution.valueAsNumber <= 0) {
this.isValid = false;
- contribution.setAttribute("style", "color: #ff0000");
+ contribution.setAttribute("style", "border-color: #ff0000");
this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
setTimeout(() => {
- contribution.setAttribute("style", "color: #ffffff");
+ contribution.setAttribute("style", "border-color: #ffffff");
}, 3000);
}
}
--
cgit v1.2.3
From 786a6db3f5a22f7bb2cc249731ef654b675c3c86 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 22:15:37 -0400
Subject: moving functionality to new component
---
ufund-ui/src/app/app.module.ts | 2 +
.../components/cupboard/cupboard.component.html | 23 --------
.../app/components/cupboard/cupboard.component.ts | 39 --------------
.../components/need-edit/need-edit.component.css | 0
.../components/need-edit/need-edit.component.html | 22 ++++++++
.../components/need-edit/need-edit.component.ts | 61 ++++++++++++++++++++++
6 files changed, 85 insertions(+), 62 deletions(-)
create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.css
create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.html
create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.ts
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index c91256e..16455be 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {LoginComponent} from './components/login/login.component';
import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
import { SignupComponent } from './components/signup/signup.component';
import { ToastComponent } from './components/toast/toast.component';
+import { NeedEditComponent } from './components/need-edit/need-edit.component';
@NgModule({
declarations: [
@@ -31,6 +32,7 @@ import { ToastComponent } from './components/toast/toast.component';
SignupComponent,
MiniNeedListComponent,
ToastComponent,
+ NeedEditComponent,
],
imports: [
BrowserModule,
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 6f7799e..e9387a2 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -32,29 +32,6 @@
</form>
</div>
- <div id="update-form" *ngIf="selectedForm === 'update'">
- <h1> Update Need </h1>
- <label>Needs:</label><br>
- <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
- <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
- <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
- <input type="text" name="location" [(ngModel)]="selectedNeed.location"><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="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
- <label>Urgent</label> <br>
- <label>Description</label> <br>
- <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
- <input type="submit" value="Submit">
-
- </form>
-
- </div>
<hr>
</div>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 662def4..e70d98f 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -82,45 +82,6 @@ export class CupboardComponent implements OnInit {
return type === ("MANAGER" as unknown as userType);
}
- update(form: any) {
- console.log(form);
- const need: Need = {
- name: form.name,
- image: form.image,
- location: form.location,
- id: this.selectedNeed.id, //system will control this
- maxGoal: form.maxGoal,
- type: GoalType[form.type as keyof typeof GoalType],
- urgent: form.urgent,
- filterAttributes: [],
- current: 0,
- description: form.description
- };
-
- this.cupboardService.updateNeed(need.id, need)
- .pipe(catchError((ex, _) => {
- if (ex.status == 500) {
- this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
- } else if (ex.status == 400) {
- this.toastService.sendToast(ToastType.ERROR, ex.error);
- } else {
- this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
- }
- return of()
- }))
- .subscribe(
- (result) => {
- if (result) {
- console.log("need updated successfully");
- this.needList?.refresh()
- } else {
- console.log("need update failed");
- }
- }
-
- );
- }
-
submit(form: any) {
const need: Need = {
name: form.name,
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
new file mode 100644
index 0000000..bcb166b
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,22 @@
+<div id="update-form">
+ <h1> Update Need </h1>
+ <label>Needs:</label><br>
+ <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+ <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+ <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+ <input type="text" name="location" [(ngModel)]="selectedNeed.location"><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="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+ <label>Urgent</label> <br>
+ <label>Description</label> <br>
+ <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+ <input type="submit" value="Submit">
+
+ </form>
+</div>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
new file mode 100644
index 0000000..02ffb71
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output } from '@angular/core';
+import { Need, GoalType } from '../../models/Need';
+import { CupboardService } from '../../services/cupboard.service';
+import { catchError, of } from 'rxjs';
+import { ToastsService, ToastType } from '../../services/toasts.service';
+
+@Component({
+ selector: 'app-need-edit',
+ standalone: false,
+ templateUrl: './need-edit.component.html',
+ styleUrl: './need-edit.component.css'
+})
+export class NeedEditComponent {
+ constructor(
+ private cupboardService: CupboardService,
+ private toastService: ToastsService
+
+ ) {}
+
+ @Input() selectedNeed!: Need;
+ @Output() selectedNeedID: number | null = null;
+
+ update(form: any) {
+ console.log(form);
+ const need: Need = {
+ name: form.name,
+ image: form.image,
+ location: form.location,
+ id: this.selectedNeed.id, //system will control this
+ maxGoal: form.maxGoal,
+ type: GoalType[form.type as keyof typeof GoalType],
+ urgent: form.urgent,
+ filterAttributes: [],
+ current: 0,
+ description: form.description
+ };
+
+ this.cupboardService.updateNeed(need.id, need)
+ .pipe(catchError((ex, _) => {
+ if (ex.status == 500) {
+ this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
+ } else if (ex.status == 400) {
+ this.toastService.sendToast(ToastType.ERROR, ex.error);
+ } else {
+ this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+ }
+ return of()
+ }))
+ .subscribe(
+ (result) => {
+ if (result) {
+ console.log("need updated successfully");
+ // this.needList?.refresh()
+ } else {
+ console.log("need update failed");
+ }
+ }
+
+ );
+ }
+}
\ No newline at end of file
--
cgit v1.2.3
From 4186983da13740ec0a4731770ac238922631be11 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 22:52:49 -0400
Subject: auto refresh with emitter
---
ufund-ui/src/app/components/cupboard/cupboard.component.html | 1 +
ufund-ui/src/app/components/need-edit/need-edit.component.ts | 6 +++---
2 files changed, 4 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index e9387a2..2cfbe2d 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -8,6 +8,7 @@
<button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
<button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
</div>
+ <app-need-edit [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
<div id="create-form" *ngIf="selectedForm === 'create'">
<h1> Create Need </h1>
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
index 02ffb71..2462534 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.ts
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Need, GoalType } from '../../models/Need';
import { CupboardService } from '../../services/cupboard.service';
import { catchError, of } from 'rxjs';
@@ -18,7 +18,7 @@ export class NeedEditComponent {
) {}
@Input() selectedNeed!: Need;
- @Output() selectedNeedID: number | null = null;
+ @Output() refreshNeedList = new EventEmitter<void>();
update(form: any) {
console.log(form);
@@ -50,7 +50,7 @@ export class NeedEditComponent {
(result) => {
if (result) {
console.log("need updated successfully");
- // this.needList?.refresh()
+ this.refreshNeedList.emit();
} else {
console.log("need update failed");
}
--
cgit v1.2.3
From 896e1219526a19400c7143b274193f8b818d6156 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 23:37:00 -0400
Subject: Commit half working changes to move to my laptop
---
.../funding-basket/funding-basket.component.ts | 1 -
.../components/need-list/need-list.component.html | 4 +-
.../components/need-list/need-list.component.ts | 4 +-
.../components/need-page/need-page.component.css | 57 ++++++++++++++++++++
.../components/need-page/need-page.component.html | 41 ++++++++++++--
.../components/need-page/need-page.component.ts | 62 ++++++++++++++++++++--
ufund-ui/src/styles.css | 6 ++-
7 files changed, 161 insertions(+), 14 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index ecf452a..dcacca1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -13,7 +13,6 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
styleUrl: './funding-basket.component.css'
})
export class FundingBasketComponent implements OnInit {
- statusText: any;
constructor(
private router: Router,
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f83d6..e00ba47 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -54,10 +54,10 @@
<span class="icon">add</span>Add To Basket
</button>
<button *ngIf="isManager()" (click)="select(need)">
- <span class="icon">edit</span>Delete Need
+ <span class="icon">edit</span>Edit Need
</button>
<button *ngIf="isManager()" (click)="delete(need.id)" >
- <span class="icon">delete</span>Edit Need
+ <span class="icon">delete</span>Delete Need
</button>
</div>
</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7a9d647..d641acf 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -160,6 +160,7 @@ export class NeedListComponent {
delete(id : number) {
this.cupboardService.deleteNeed(id).subscribe(() => {
+ this.toastService.sendToast(ToastType.INFO, "Need deleted.")
this.needs = this.needs.filter(n => n.id !== id)
})
this.refresh();
@@ -199,10 +200,7 @@ export class NeedListComponent {
} else {
this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
}
-
-
}
-
}
back() {
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index a3a4014..f950171 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -8,3 +8,60 @@
flex-direction: column;
width: 1000px;
}
+
+.needName {
+ font-weight: bold;
+}
+
+.needType {
+ text-transform: uppercase;
+ font-size: 10pt;
+}
+
+.split {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+
+ .left {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .right {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ }
+}
+
+.urgent {
+ font-size: 11pt;
+ background-color: rgba(255, 165, 0, 0.27);
+ color: rgba(255, 165, 0, 1);
+ padding: 2px;
+ border-radius: 5px;
+}
+
+.prog {
+ display: flex;
+ flex-direction: column;
+}
+
+.actionArea {
+ display: flex;
+ padding: 5px;
+ gap: 5px;
+}
+
+#editor {
+ position: absolute;
+ background-color: #4a4a4a;
+ display: flex;
+ flex-direction: column;
+ justify-self: center;
+ align-self: center;
+ padding: 20px;
+ box-shadow: 0 0 100px black;
+}
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index a72167c..a8479fd 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -13,14 +13,47 @@
</div>
<hr>
+ <span>{{need?.description}}</span>
+ <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
<p>Location: {{need?.location}}</p>
<p>Urgent: {{need?.urgent}}</p>
<span>{{need?.current}} / {{need?.maxGoal}}</span>
<progress [value]="need?.current" [max]="need?.maxGoal"></progress>
<span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
- <div>
- <button>Add to basket</button>
- <button>Edit</button>
- <button>Delete</button>
+ <div class="actionArea">
+ <button *ngIf="isHelper()" (click)="add(need!)">
+ <span class="icon">add</span>Add To Basket
+ </button>
+ <button *ngIf="isManager()" (click)="edit(need!)">
+ <span class="icon">edit</span>Edit Need
+ </button>
+ <button *ngIf="isManager()" (click)="delete(need!.id)" >
+ <span class="icon">delete</span>Delete Need
+ </button>
+ </div>
+
+ <div [routerLink]="'/need/' + need.id" class="clickable">
+ <div class="split">
+ <div class="left">
+ <span class="needName">{{need.name}}</span>
+ <span class="needType">{{need.type}}</span>
+ </div>
+
+ <div class="right">
+ <span *ngIf="need.urgent" class="urgent">URGENT</span>
+ <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+ </div>
+ </div>
+
+ <br>
+
+ <div class="prog">
+ <span id="hover-status-label-{{need.id}}"> </span>
+ <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+ <progress [value]="need.current" [max]="need.maxGoal"></progress>
+ </div>
+
</div>
+
+<!-- <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
</div>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index e38554c..ad4cacf 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -1,8 +1,12 @@
import {Component, Input} from '@angular/core';
import {GoalType, Need} from '../../models/Need';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
import {CupboardService} from "../../services/cupboard.service";
-import {NgFor} from '@angular/common';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {UsersService} from '../../services/users.service';
@Component({
selector: 'app-need-page',
@@ -14,11 +18,15 @@ export class NeedPageComponent {
constructor(
private route: ActivatedRoute,
private cupboardService: CupboardService,
+ private authService: AuthService,
+ private usersService: UsersService,
+ private toastService: ToastsService,
+ private router: Router
) {}
public GoalType = GoalType;
- @Input() need?: Need;
+ @Input() need!: Need;
ngOnInit(): void {
const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -28,4 +36,52 @@ export class NeedPageComponent {
back() {
window.history.back();
}
+
+ isManager() {
+ const type = this.authService.getCurrentUser()?.type;
+ return type === ("MANAGER" as unknown as userType);
+ }
+
+ isHelper() {
+ const type = this.authService.getCurrentUser()?.type;
+ return type === ("HELPER" as unknown as userType);
+ }
+
+ add(need: Need) {
+ const currentUser = this.authService.getCurrentUser();
+ //console.log("get current user in angular:", currentUser)
+ if (currentUser) {
+ if (!currentUser.basket.includes(need.id)) {
+ currentUser.basket.push(need.id);
+ this.usersService.updateUser(currentUser)
+ .pipe(catchError((err, _) => {
+ console.error(err);
+ return of();
+ }))
+ .subscribe(() => {
+ this.usersService.refreshBasket();
+ });
+ } else {
+ this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+ }
+ }
+ }
+
+ delete(id : number) {
+ this.cupboardService.deleteNeed(id)
+ .pipe(catchError((ex, r) => {
+ this.toastService.sendToast(ToastType.ERROR, ex.error)
+ return of()
+ }))
+ .subscribe(() => {
+ // this.needs = this.needs.filter(n => n.id !== id)
+ this.toastService.sendToast(ToastType.INFO, "Need deleted")
+ this.router.navigate(['/'])
+ })
+ // this.refresh();
+ }
+
+ edit(need: Need) {
+
+ }
}
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index f515154..75d6b36 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,7 +1,7 @@
/* You can add global styles to this file, and also import other style files */
:root {
- color-scheme: light dark;
+ color-scheme: /*light*/ dark;
}
* {
@@ -65,3 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
h1 {
font-size: 40px;
}
+
+progress {
+ min-width: 100%;
+}
--
cgit v1.2.3
From bb2e7b50e1ca96120fc42eed1f090cf0e1c98258 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 23:47:36 -0400
Subject: needs per page
---
.../components/need-list/need-list.component.html | 9 +++++-
.../components/need-list/need-list.component.ts | 34 ++++++++++++++++++++--
2 files changed, 40 insertions(+), 3 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f83d6..d43e07b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -24,8 +24,15 @@
<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
+<div id="page-selector">
+ <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br>
+ <label>Needs per page: </label>
+ <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
+ <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button>
+ <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button>
+</div>
<div id="needList">
- <div *ngFor="let need of searchResults" class="needEntry">
+ <div *ngFor="let need of visibleNeeds" class="needEntry">
<div [routerLink]="'/need/' + need.id" class="clickable">
<div class="split">
<div class="left">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7a9d647..bc3de42 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,36 @@ export class NeedListComponent {
selectedNeed: Need | null = null;
needs: Need[] = [];
searchResults: Need[] = [];
+ visibleNeeds: Need[] = [];
sortMode: 'Ascending' | 'Descending' = 'Ascending'
+ currentPage: number = 0;
+ itemsPerPage: number = 5;
+ totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage);
+
+ decrementPage() {
+ this.currentPage--;
+ this.updateVisibleNeeds();
+ }
+
+ incrementPage() {
+ this.currentPage++;
+ this.updateVisibleNeeds();
+ }
+
+ editNeedsPerPage(amount: number) {
+ this.itemsPerPage = amount;
+ this.updateVisibleNeeds();
+ }
+
+ updateVisibleNeeds() {
+ this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage);
+ this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
+ }
+
+ resetVisibleNeeds() {
+ this.currentPage = 0;
+ this.updateVisibleNeeds();
+ }
currentSortAlgo: sortAlgo = sortByPriority;
sortSelection: string = 'sortByPriority';
@@ -96,6 +125,7 @@ export class NeedListComponent {
this.needs = n.sort(this.currentSortAlgo).reverse();
}
this.searchResults = this.needs;
+ this.updateVisibleNeeds();
});
const form = document.getElementById('search-form') as HTMLFormElement;
@@ -105,6 +135,7 @@ export class NeedListComponent {
ngOnInit(): void {
this.refresh()
+
}
changeSortMode(form : any) {
@@ -145,8 +176,7 @@ export class NeedListComponent {
} else {
this.searchResults = n.sort(this.currentSortAlgo).reverse();
}
-
- console.log(currentSearchValue, this.searchResults);
+ this.updateVisibleNeeds();
});
}
}, 250);
--
cgit v1.2.3
From 61daadccf89b2b84820386558ac454c0123d4299 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 1 Apr 2025 01:16:49 -0400
Subject: More css cleanup
---
ufund-ui/src/app/app.component.css | 44 ++++++++--------
.../app/components/cupboard/cupboard.component.css | 4 +-
.../funding-basket/funding-basket.component.css | 2 +-
.../components/home-page/home-page.component.css | 1 +
.../components/need-list/need-list.component.css | 8 +++
.../components/need-list/need-list.component.html | 15 +++---
.../components/need-page/need-page.component.css | 30 ++++++-----
.../components/need-page/need-page.component.html | 60 +++++++++-------------
8 files changed, 85 insertions(+), 79 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 0bcd658..f4ed668 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,29 +38,33 @@
text-decoration: none;
}
- a {
- display: block;
- position: relative;
- padding: 0.1em 0;
+ a:hover {
+ text-decoration: underline;
}
- a::after {
- content: '';
- position: absolute;
- bottom: 4px;
- left: 0;
- width: 100%;
- height: 0.03em;
- background-color: white;
- opacity: 0;
- transition: opacity 300ms, transform 300ms;
- }
+ /*a {*/
+ /* display: block;*/
+ /* position: relative;*/
+ /* padding: 0.1em 0;*/
+ /*}*/
- a:hover::after,
- a:focus::after {
- opacity: 1;
- transform: translate3d(0, 0.2em, 0);
- }
+ /*a::after {*/
+ /* content: '';*/
+ /* position: absolute;*/
+ /* bottom: 4px;*/
+ /* left: 0;*/
+ /* width: 100%;*/
+ /* height: 0.03em;*/
+ /* background-color: white;*/
+ /* opacity: 0;*/
+ /* transition: opacity 300ms, transform 300ms;*/
+ /*}*/
+
+ /*a:hover::after,*/
+ /*a:focus::after {*/
+ /* opacity: 1;*/
+ /* transform: translate3d(0, 0.2em, 0);*/
+ /*}*/
}
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index faff4d4..4116a77 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -4,7 +4,7 @@
}
#box {
- width: 1000px;
+ width: 800px;
display: flex;
flex-direction: column;
}
@@ -22,7 +22,7 @@
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 5px;
- border-bottom: 0px;
+ border-bottom: 0;
}
.selected-tab {
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index a17f710..dff6e06 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -5,7 +5,7 @@
#box {
display: flex;
- width: 1000px;
+ width: 800px;
flex-direction: column;
gap: 10px;
}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 16f3140..a10377f 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -4,6 +4,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ overflow: clip;
}
#hero {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index d4be5fa..041b4ce 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -100,3 +100,11 @@ select {
padding: 5px;
gap: 5px;
}
+
+#page-selector {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+ gap: 10px
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 8ea7b88..8ea88b1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -15,6 +15,8 @@
<button (click)="changeSortMode(searchForm.value)">
<span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
</button>
+ <label>Needs per page: </label>
+ <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
</div>
<!--<button (click)="close()">Close</button>-->
</div>
@@ -24,13 +26,6 @@
<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-<div id="page-selector">
- <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br>
- <label>Needs per page: </label>
- <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
- <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button>
- <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button>
-</div>
<div id="needList">
<div *ngFor="let need of visibleNeeds" class="needEntry">
<div [routerLink]="'/need/' + need.id" class="clickable">
@@ -69,3 +64,9 @@
</div>
</div>
</div>
+
+<div id="page-selector">
+ <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+ <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+ <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index f950171..844410f 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -6,7 +6,9 @@
#box {
display: flex;
flex-direction: column;
- width: 1000px;
+ width: 800px;
+ justify-content: start;
+ gap: 10px;
}
.needName {
@@ -15,7 +17,9 @@
.needType {
text-transform: uppercase;
- font-size: 10pt;
+ /*font-size: 10pt;*/
+ margin-top: -20px;
+ /*margin-bottom: 20px;*/
}
.split {
@@ -47,21 +51,23 @@
.prog {
display: flex;
flex-direction: column;
+ margin-bottom: 15px;
}
.actionArea {
display: flex;
padding: 5px;
gap: 5px;
+ margin-top: 10px;
}
-#editor {
- position: absolute;
- background-color: #4a4a4a;
- display: flex;
- flex-direction: column;
- justify-self: center;
- align-self: center;
- padding: 20px;
- box-shadow: 0 0 100px black;
-}
+/*#editor {*/
+/* position: absolute;*/
+/* background-color: #4a4a4a;*/
+/* display: flex;*/
+/* flex-direction: column;*/
+/* justify-self: center;*/
+/* align-self: center;*/
+/* padding: 20px;*/
+/* box-shadow: 0 0 100px black;*/
+/*}*/
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index a8479fd..e8d292e 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,10 +1,29 @@
<div id="box">
<h1>{{need?.name}}</h1>
- <div>
- <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+ <span class="needType">{{need?.type}} GOAL</span>
+
+ <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+ <p>{{need?.description}}</p>
+ <div class="prog">
+<!-- <span>{{need?.current}} / {{need?.maxGoal}}</span>-->
+ <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+ <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
</div>
- <div *ngIf="need?.filterAttributes">
- <p>Tags:</p>
+
+ <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
+
+ <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
+
+ <span><strong>Location:</strong> {{need.location}}</span>
+
+ <span><strong>Urgency: </strong>
+ <span *ngIf="!need.urgent">Not urgent</span>
+ <span *ngIf="need.urgent" class="urgent">URGENT</span>
+ </span>
+
+ <div *ngIf="need.filterAttributes.length > 0">
+ <strong>Tags:</strong>
<ul style="display: flex; column-gap: 24px;">
<li *ngFor="let tag of need?.filterAttributes">
<p>{{tag}}</p>
@@ -12,14 +31,6 @@
</ul>
</div>
- <hr>
- <span>{{need?.description}}</span>
- <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
- <p>Location: {{need?.location}}</p>
- <p>Urgent: {{need?.urgent}}</p>
- <span>{{need?.current}} / {{need?.maxGoal}}</span>
- <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
- <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
<div class="actionArea">
<button *ngIf="isHelper()" (click)="add(need!)">
<span class="icon">add</span>Add To Basket
@@ -31,29 +42,4 @@
<span class="icon">delete</span>Delete Need
</button>
</div>
-
- <div [routerLink]="'/need/' + need.id" class="clickable">
- <div class="split">
- <div class="left">
- <span class="needName">{{need.name}}</span>
- <span class="needType">{{need.type}}</span>
- </div>
-
- <div class="right">
- <span *ngIf="need.urgent" class="urgent">URGENT</span>
- <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
- </div>
- </div>
-
- <br>
-
- <div class="prog">
- <span id="hover-status-label-{{need.id}}"> </span>
- <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
- <progress [value]="need.current" [max]="need.maxGoal"></progress>
- </div>
-
- </div>
-
-<!-- <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
</div>
--
cgit v1.2.3
From 0e9c0803e35a23ef2e873dc7ebf224a49a92f207 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 1 Apr 2025 02:16:04 -0400
Subject: Get everything working enough to go in main
---
.../app/components/cupboard/cupboard.component.css | 18 +++++++++++++---
.../components/cupboard/cupboard.component.html | 24 +++++++++++-----------
.../app/components/cupboard/cupboard.component.ts | 2 +-
.../components/dashboard/dashboard.component.html | 2 +-
.../components/dashboard/dashboard.component.ts | 9 ++++++--
.../funding-basket/funding-basket.component.css | 2 +-
.../components/need-edit/need-edit.component.css | 21 +++++++++++++++++++
.../components/need-edit/need-edit.component.html | 6 ++++--
.../components/need-list/need-list.component.css | 2 +-
.../components/need-list/need-list.component.html | 1 -
.../components/need-page/need-page.component.html | 6 +++---
11 files changed, 66 insertions(+), 27 deletions(-)
(limited to 'ufund-ui/src')
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 4116a77..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -30,13 +30,25 @@
}
#create-form, #delete-form, #update-form {
- background-color: #d9d9d9;
+ background-color: #3a3a3a;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
visibility: visible;
+ /*position: absolute;*/
}
-#create-button {
- padding: 10px 20px;
+#header {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+
+ h1 {
+ display: inline;
+ width: min-content;
+ }
+
+ button {
+ margin-top: 3px;
+ }
}
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 2cfbe2d..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,14 +1,14 @@
<div id="box">
- <h1> Cupboard </h1>
+ <div id="header">
+ <h1> Cupboard </h1>
+ <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+ </div>
<app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
</div>
-<div *ngIf="isManager()" >
- <h2 > Admin View </h2>
- <div id="menu">
- <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
- <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
- </div>
- <app-need-edit [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+<ng-template [ngIf]="isManager()" >
+<div>
+ <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+ <div>
<div id="create-form" *ngIf="selectedForm === 'create'">
<h1> Create Need </h1>
<form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -27,12 +27,12 @@
<label>Physical</label><br>
<input type="checkbox" name="urgent" value="false" ngModel>
<label>Urgent</label><br>
- <label>Description</label>
- <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+ <label>Description</label><br>
+ <textarea name="description"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
- <hr>
-
+ </div>
</div>
+</ng-template>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index e70d98f..2230cd3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
export class CupboardComponent implements OnInit {
- selectedForm = "create";
+ selectedForm?: string = undefined;
needs: any;
@ViewChild("needList") needList?: NeedListComponent
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index 330d1f3..6a95ecd 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -2,4 +2,4 @@
<h1>Your Dashboard</h1>
<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
-<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 645893f..c94b5c6 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import {firstValueFrom} from 'rxjs';
+import {UsersService} from '../../services/users.service';
@Component({
selector: 'app-dashboard',
@@ -20,7 +21,8 @@ export class DashboardComponent implements OnInit{
constructor(
protected authService: AuthService,
protected router: Router,
- protected cupboardService: CupboardService
+ protected cupboardService: CupboardService,
+ protected userService: UsersService
) {}
ngOnInit() {
@@ -33,7 +35,10 @@ export class DashboardComponent implements OnInit{
firstValueFrom(this.cupboardService.getNeeds()).then(r => {
this.topNeeds = r.sort((a, b) => b.current - a.current)
this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
- this.inBasket = r.filter(n => n.id in user!.basket)
+ })
+
+ this.userService.getBasket().subscribe(r => {
+ this.inBasket = r;
})
}
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index dff6e06..c46ef57 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -20,7 +20,7 @@
#needList {
display: flex;
flex-direction: column;
- gap: 10px;
+ gap: 15px;
max-width: 1000px;
}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
index e69de29..17605c2 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.css
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -0,0 +1,21 @@
+:host {
+ /*position: absolute;*/
+ /*background-color: rgba(0, 0, 0, 0.5);*/
+ /*display: flex;*/
+ /*height: 100%;*/
+ /*top: 0;*/
+ /*left: 0;*/
+ /*right: 0;*/
+ /*z-index: 5;*/
+ /*justify-content: center;*/
+}
+
+#create-form, #delete-form, #update-form {
+ margin-top: 50px;
+ background-color: #3a3a3a;
+ padding: 10px 20px 20px 20px;
+ border: 2px solid #000;
+ border-radius: 5px;
+ /*visibility: visible;*/
+ /*position: absolute;*/
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
index bcb166b..e776415 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.html
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -1,9 +1,11 @@
<div id="update-form">
<h1> Update Need </h1>
- <label>Needs:</label><br>
<form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+ <label>Name:</label><br>
<input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+ <label>Image:</label><br>
<input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+ <label>Location:</label><br>
<input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
<label>Max Goal:</label><br>
<input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
@@ -19,4 +21,4 @@
<input type="submit" value="Submit">
</form>
-</div>
\ No newline at end of file
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 041b4ce..5f2e5e1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -14,7 +14,7 @@
#needList {
display: flex;
flex-direction: column;
- gap: 10px
+ gap: 15px
}
select {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 8ea88b1..c0501ba 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -25,7 +25,6 @@
<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-
<div id="needList">
<div *ngFor="let need of visibleNeeds" class="needEntry">
<div [routerLink]="'/need/' + need.id" class="clickable">
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index e8d292e..958dfa6 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -35,9 +35,9 @@
<button *ngIf="isHelper()" (click)="add(need!)">
<span class="icon">add</span>Add To Basket
</button>
- <button *ngIf="isManager()" (click)="edit(need!)">
- <span class="icon">edit</span>Edit Need
- </button>
+<!-- <button *ngIf="isManager()" (click)="edit(need!)">-->
+<!-- <span class="icon">edit</span>Edit Need-->
+<!-- </button>-->
<button *ngIf="isManager()" (click)="delete(need!.id)" >
<span class="icon">delete</span>Delete Need
</button>
--
cgit v1.2.3