image works!
+{{image.name}}
+
+
+ 
+ 
+ {{image.likes}}
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/image/image.component.scss b/frontend/src/app/image/image.component.scss
index e69de29..9d8dada 100644
--- a/frontend/src/app/image/image.component.scss
+++ b/frontend/src/app/image/image.component.scss
@@ -0,0 +1,40 @@
+:host {
+ user-select: none;
+
+ .image {
+ pointer-events: none;
+ height: 15rem;
+ display: block;
+ }
+
+ width: min-content;
+ border-radius: 1rem;
+ box-shadow: .25rem .25rem 1rem -.5rem #000;
+ padding: 1rem;
+ box-sizing: border-box;
+ display: inline-flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin: 1rem;
+
+ .name, .author {
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
+
+ .stats {
+ display: flex;
+ justify-content: space-between;
+
+ .likes {
+ // flex: 1 0 auto;
+ .like {
+ height: 1.5rem;
+ }
+ display: inline-flex;
+ align-items: center;
+ gap: .5rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/image/image.component.ts b/frontend/src/app/image/image.component.ts
index 65a6812..c5de98c 100644
--- a/frontend/src/app/image/image.component.ts
+++ b/frontend/src/app/image/image.component.ts
@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { Image, ImagesService } from '../services/images.service';
@Component({
selector: 'app-image',
@@ -6,5 +8,16 @@ import { Component } from '@angular/core';
styleUrls: ['./image.component.scss']
})
export class ImageComponent {
+ @Input()
+ public image?: Image | null;
+ public environment = environment;
+ public async like() {
+ this.image = await this.images.like(this.image!.id);
+ }
+ public async unlike() {
+ this.image = await this.images.unlike(this.image!.id);
+ }
+
+ public constructor(public images: ImagesService) {}
}
diff --git a/frontend/src/app/images/images.component.html b/frontend/src/app/images/images.component.html
index 01f9fff..997e505 100644
--- a/frontend/src/app/images/images.component.html
+++ b/frontend/src/app/images/images.component.html
@@ -1,9 +1,10 @@
+
+ {{image.likes}}
+
+
+
- ();
+
+ public constructor(
+ private ref: ElementRef
+ ) { }
+}
diff --git a/frontend/src/app/page-login/page-login.component.ts b/frontend/src/app/page-login/page-login.component.ts
index f5cd9f2..8c68462 100644
--- a/frontend/src/app/page-login/page-login.component.ts
+++ b/frontend/src/app/page-login/page-login.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UsersService } from '../services/users.service';
import { Router } from '@angular/router';
+import { MessagesService } from '../services/messages.service';
@Component({
selector: 'app-page-login',
@@ -15,11 +16,15 @@ export class PageLoginComponent {
});
public async login() {
- await this.users.login(this.form.value.username ?? '', this.form.value.password ?? '');
- this.router.navigateByUrl('/');
+ try {
+ await this.users.login(this.form.value.username ?? '', this.form.value.password ?? '');
+ this.router.navigateByUrl('/');
+ }
+ catch (e: any) { this.msgs.error(e); }
}
public constructor(
+ private msgs: MessagesService,
private users: UsersService,
private router: Router
) { }
diff --git a/frontend/src/app/page-signup/page-signup.component.ts b/frontend/src/app/page-signup/page-signup.component.ts
index a76719a..d13ed9f 100644
--- a/frontend/src/app/page-signup/page-signup.component.ts
+++ b/frontend/src/app/page-signup/page-signup.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UsersService } from '../services/users.service';
import { Router } from '@angular/router';
+import { MessagesService } from '../services/messages.service';
@Component({
selector: 'app-page-signup',
@@ -15,14 +16,18 @@ export class PageSignupComponent {
});
public async signup() {
- await this.users.signup(
- this.form.value.username ?? '',
- this.form.value.password ?? ''
- );
- this.router.navigateByUrl('/');
+ try {
+ await this.users.signup(
+ this.form.value.username ?? '',
+ this.form.value.password ?? ''
+ );
+ this.router.navigateByUrl('/');
+ }
+ catch (e: any) { this.msgs.error(e); }
}
public constructor(
+ private msgs: MessagesService,
private users: UsersService,
private router: Router
) { }
diff --git a/frontend/src/app/page-upload/page-upload.component.ts b/frontend/src/app/page-upload/page-upload.component.ts
index 813ca75..8f16fdd 100644
--- a/frontend/src/app/page-upload/page-upload.component.ts
+++ b/frontend/src/app/page-upload/page-upload.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { ImagesService, Visibility } from '../services/images.service';
+import { MessagesService } from '../services/messages.service';
@Component({
selector: 'app-page-upload',
@@ -20,15 +21,19 @@ export class PageUploadComponent {
}
public async submit() {
- await this.images.upload({
- name: this.form.value.name ?? undefined,
- visibility: this.form.value.visibility ?? undefined,
- }, this.form.value.file!);
- this.router.navigateByUrl('/');
+ try {
+ await this.images.upload({
+ name: this.form.value.name ?? undefined,
+ visibility: this.form.value.visibility ?? undefined,
+ }, this.form.value.file!);
+ this.router.navigateByUrl('/');
+ }
+ catch (e: any) { this.msgs.error(e); }
}
public constructor(
private images: ImagesService,
- private router: Router
+ private router: Router,
+ private msgs: MessagesService,
) {}
}
diff --git a/frontend/src/app/page-user/page-user.component.ts b/frontend/src/app/page-user/page-user.component.ts
index feb4156..1107981 100644
--- a/frontend/src/app/page-user/page-user.component.ts
+++ b/frontend/src/app/page-user/page-user.component.ts
@@ -5,6 +5,8 @@ import { Image, ImagesService } from '../services/images.service';
import { ImagesComponent } from '../images/images.component';
import { ScrollService } from '../services/scroll.service';
import { Observable } from 'rxjs';
+import { MessagesService } from '../services/messages.service';
+import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-page-user',
@@ -26,10 +28,14 @@ export class PageUserComponent {
users: UsersService,
private _images: ImagesService,
private _scroll: ScrollService,
+ private msgs: MessagesService,
) {
route.paramMap.subscribe(async v => {
- this.user = await users.get(v.get('name')!);
- this.images = ImagesComponent.fromFeed(this._scroll.scrollHost!, 10, this.feed.bind(this));
+ try {
+ this.user = await users.get(v.get('name')!);
+ this.images = ImagesComponent.fromFeed(this._scroll.scrollHost!, 10, this.feed.bind(this));
+ }
+ catch (e: any) { msgs.error(e); }
// this.imagesEl.next();
});
}
diff --git a/frontend/src/app/services/images.service.ts b/frontend/src/app/services/images.service.ts
index 077a9ef..82b4576 100644
--- a/frontend/src/app/services/images.service.ts
+++ b/frontend/src/app/services/images.service.ts
@@ -16,6 +16,8 @@ export interface Image {
visibility: Visibility;
created: number;
file: string;
+ likes: number;
+ liked?: boolean;
}
export interface CreateImageBody {
name?: string;
@@ -56,6 +58,13 @@ export class ImagesService {
return await firstValueFrom(this.http.post(`${this.url}/change?id=${id}`, proto, this.users.httpOptions({})));
}
+ public async like(id: string) {
+ return await firstValueFrom(this.http.post(`${this.url}/like?id=${id}`, {}, this.users.httpOptions({})));
+ }
+ public async unlike(id: string) {
+ return await firstValueFrom(this.http.post(`${this.url}/unlike?id=${id}`, {}, this.users.httpOptions({})));
+ }
+
public constructor(private http: HttpClient, private users: UsersService) {
}
}
diff --git a/frontend/src/app/services/messages.service.ts b/frontend/src/app/services/messages.service.ts
new file mode 100644
index 0000000..7b64160
--- /dev/null
+++ b/frontend/src/app/services/messages.service.ts
@@ -0,0 +1,57 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { EventEmitter, Injectable } from '@angular/core';
+
+export type Role = 'info' | 'success' | 'warning' | 'error';
+
+export interface Message {
+ content: string;
+ role: string;
+ timestamp: number;
+ id: number;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MessagesService {
+ private _messages: Message[] = [];
+
+ constructor() { }
+
+ public get messages() {
+ return this._messages;
+ }
+
+ public added = new EventEmitter();
+ public removed = new EventEmitter();
+
+ public add(message: string, role: Role) {
+ const id = Math.random();
+ const msg = {
+ content: message,
+ role: role,
+ timestamp: Date.now(),
+ id,
+ } as Message;
+ this._messages.push(msg);
+
+ if (msg.role === 'error') console.error('ERROR:', msg.content);
+ else console.log(msg.role, msg.content);
+
+ const timeout = setTimeout(() => {
+ this.removed.next(this._messages.find(v => v.id === id)!);
+ this._messages = this._messages.filter(v => v.id !== id);
+ clearTimeout(timeout);
+ }, 2500);
+
+ this.added.next(msg);
+ }
+ public error = (message: string | Error) => {
+ if (message instanceof HttpErrorResponse) this.add(message.error.error, 'error');
+ else if (message instanceof Error) this.add(message.message, 'error');
+ else this.add(message, 'error');
+ }
+ public warn = (message: string) => this.add(message, 'warning');
+ public success = (message: string) => this.add(message, 'success');
+ public info = (message: string) => this.add(message, 'info');
+}
diff --git a/frontend/src/assets/like-active.svg b/frontend/src/assets/like-active.svg
new file mode 100644
index 0000000..4a7e952
--- /dev/null
+++ b/frontend/src/assets/like-active.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/assets/like-inactive.svg b/frontend/src/assets/like-inactive.svg
new file mode 100644
index 0000000..df01cb8
--- /dev/null
+++ b/frontend/src/assets/like-inactive.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
+
+
No more photos :(
\ No newline at end of file diff --git a/frontend/src/app/images/images.component.scss b/frontend/src/app/images/images.component.scss index ca5bbb3..b4d277b 100644 --- a/frontend/src/app/images/images.component.scss +++ b/frontend/src/app/images/images.component.scss @@ -8,38 +8,6 @@ box-sizing: border-box; padding: 0 1rem; text-align: center; - - .image { - user-select: none; - - img { - pointer-events: none; - height: 15rem; - display: block; - } - - width: min-content; - border-radius: 1rem; - box-shadow: .25rem .25rem 1rem -.5rem #000; - padding: 1rem; - box-sizing: border-box; - display: inline-flex; - flex-direction: column; - align-items: center; - gap: 1rem; - margin: 1rem; - - p, h3, h5 { - padding: 0; - margin: 0; - } - h3, h5 { - text-align: center; - } - p { - text-align: justify; - } - } } @media screen and (width < 50rem) { .images { diff --git a/frontend/src/app/images/images.component.ts b/frontend/src/app/images/images.component.ts index 8c44906..196666e 100644 --- a/frontend/src/app/images/images.component.ts +++ b/frontend/src/app/images/images.component.ts @@ -41,7 +41,6 @@ export class ImagesComponent { @Input() public images: Image[] | null = null; public ended = false; - public environment = environment; public i = 0; public constructor() { diff --git a/frontend/src/app/message/message.component.html b/frontend/src/app/message/message.component.html new file mode 100644 index 0000000..c8c62a6 --- /dev/null +++ b/frontend/src/app/message/message.component.html @@ -0,0 +1,5 @@ +
+
diff --git a/frontend/src/app/message/message.component.scss b/frontend/src/app/message/message.component.scss
new file mode 100644
index 0000000..9cb0e32
--- /dev/null
+++ b/frontend/src/app/message/message.component.scss
@@ -0,0 +1,30 @@
+
+.container {
+ padding: .5rem 1rem;
+ margin: .5rem;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ border-right-width: 3px;
+ border-right-style: solid;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ width: 20rem;
+}
+
+.error {
+ border-right-color: red;
+}
+
+.warn {
+ border-right-color: orange;
+}
+
+.success {
+ border-right-color: green;
+}
+
+.info {
+ border-right-color: lightskyblue;
+}
diff --git a/frontend/src/app/message/message.component.ts b/frontend/src/app/message/message.component.ts
new file mode 100644
index 0000000..db84b5f
--- /dev/null
+++ b/frontend/src/app/message/message.component.ts
@@ -0,0 +1,57 @@
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Message } from '../services/messages.service';
+
+@Component({
+ selector: 'app-message',
+ templateUrl: './message.component.html',
+ styleUrls: ['./message.component.scss']
+})
+export class MessageComponent {
+ private _despawning: boolean = false;
+ private _currAnimation?: Animation;
+ private _died: boolean = false;
+
+ public get isDespawning() {
+ return this._despawning;
+ }
+
+ public get hasDied() {
+ return this._died;
+ }
+
+ @Input('message')
+ public message!: Message;
+ @Input('isDespawning')
+ public set isDespawning(val) {
+ this._despawning = val;
+ if (val) {
+ this._currAnimation = this.ref.nativeElement.animate([
+ {
+ opacity: 1
+ },
+ {
+ opacity: 0
+ }
+ ], {
+ easing: 'ease-out',
+ duration: 500,
+ });
+ this._currAnimation!.onfinish = () => {
+ this._died = true;
+ this.ref.nativeElement.style.display = 'none';
+ this.despawned.next();
+ };
+ }
+ else {
+ this._currAnimation?.cancel();
+ }
+ }
+
+
+ @Output('despawned')
+ public despawned = new EventEmitter
+ {{message.content}}
+
+