aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--ufund-ui/public/delete.pngbin6396 -> 0 bytes
-rw-r--r--ufund-ui/public/edit.pngbin6649 -> 0 bytes
-rw-r--r--ufund-ui/public/search.pngbin12743 -> 0 bytes
-rw-r--r--ufund-ui/src/app/app.component.css28
-rw-r--r--ufund-ui/src/app/app.component.html8
-rw-r--r--ufund-ui/src/app/app.component.ts13
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.css13
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.html6
-rw-r--r--ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css1
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.css126
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.html73
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.ts4
-rw-r--r--ufund-ui/src/app/services/toasts.service.ts19
13 files changed, 179 insertions, 112 deletions
diff --git a/ufund-ui/public/delete.png b/ufund-ui/public/delete.png
deleted file mode 100644
index 6403705..0000000
--- a/ufund-ui/public/delete.png
+++ /dev/null
Binary files differ
diff --git a/ufund-ui/public/edit.png b/ufund-ui/public/edit.png
deleted file mode 100644
index 3b6e2d8..0000000
--- a/ufund-ui/public/edit.png
+++ /dev/null
Binary files differ
diff --git a/ufund-ui/public/search.png b/ufund-ui/public/search.png
deleted file mode 100644
index 1940ef5..0000000
--- a/ufund-ui/public/search.png
+++ /dev/null
Binary files differ
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}) {
+
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 21:26:08 +0000