From f806724b271290acc22ad1c56db07d21ed2ec2b4 Mon Sep 17 00:00:00 2001 From: FireCode <69737708+firecode16@users.noreply.github.com> Date: Tue, 16 Jul 2024 18:39:17 -0600 Subject: [PATCH 1/9] initializeAppFactory environment --- src/app/app.module.ts | 19 +++++++++-- src/app/services/auth.service.ts | 10 +++--- src/app/services/config.service.ts | 37 +++++++++++++++++++++ src/assets/config.json | 5 +++ src/environments/environment.development.ts | 2 +- src/environments/environment.ts | 2 +- 6 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 src/app/services/config.service.ts create mode 100644 src/assets/config.json diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 263b88b..1677543 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core' +import { NgModule, APP_INITIALIZER } from '@angular/core' import { CommonModule } from '@angular/common' import { BrowserModule } from '@angular/platform-browser' import { FormsModule, ReactiveFormsModule } from '@angular/forms' @@ -14,6 +14,7 @@ import { MatTabsModule } from '@angular/material/tabs' import { MatDialogModule } from "@angular/material/dialog" import { authGuard } from './guards/auth.guard' +import { ConfigService } from './services/config.service' import { AppRoutingModule } from './app-routing.module' import { AppComponent } from './app.component' import { LoginComponent } from './components/login/login.component' @@ -24,6 +25,10 @@ import { FabComponent } from './components/fab/fab.component' import { PublishProyectDialogComponent } from './components/dialogs/publish-proyect-dialog/publish-proyect-dialog.component' import { provideAnimationsAsync } from '@angular/platform-browser/animations/async' +export function initializeAppFactory(appConfig: ConfigService) { + return () => appConfig.loadEnvironment() +} + @NgModule({ declarations: [ AppComponent, @@ -50,7 +55,17 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy MatTabsModule, MatDialogModule ], - providers: [provideHttpClient(), provideAnimationsAsync()], + providers: [ + ConfigService, + provideHttpClient(), + provideAnimationsAsync(), + { + provide: APP_INITIALIZER, + useFactory: initializeAppFactory, + deps: [ConfigService], + multi: true, + } + ], bootstrap: [AppComponent] }) export class AppModule { } \ No newline at end of file diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 8ab12f8..d989f86 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -3,20 +3,20 @@ import { Injectable } from '@angular/core' import { Router } from '@angular/router' import { catchError, map, Observable, tap, throwError } from 'rxjs' +import { ConfigService } from './config.service' + @Injectable({ providedIn: 'root' }) export class AuthService { - private baseUrl = 'http://localhost:8082/api' - - constructor(private http?: HttpClient, private router?: Router) { } + constructor(private http?: HttpClient, private router?: Router, private configService?: ConfigService) { } login(username: string, password: string): Observable { if (!this.http) { throw new Error('HttpClient is not initialized') } - return this.http?.post(`${this.baseUrl}/auth/login`, { username, password }) + return this.http?.post(this.configService?.properties.login, { username, password }) ?.pipe( tap(response => { console.log('response server: ', response) @@ -40,7 +40,7 @@ export class AuthService { if (!this.http) { throw new Error('HttpClient is not initialized') } - return this.http?.post(`${this.baseUrl}/auth/signup`, { username, password }) + return this.http?.post(this.configService?.properties.signup, { username, password }) ?.pipe( catchError(this.handleError) ) diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts new file mode 100644 index 0000000..1a86066 --- /dev/null +++ b/src/app/services/config.service.ts @@ -0,0 +1,37 @@ +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable, catchError, throwError } from 'rxjs'; +import { environment } from '../../environments/environment.development' + +@Injectable({ + providedIn: 'root' +}) +export class ConfigService { + public properties: any + + constructor(private http: HttpClient) { } + + public loadEnvironment() { + return new Promise((resolve, reject) => { + this.http.get(environment.baseUrl) + .pipe( + catchError(this.handleError) + ).subscribe((data) => { + this.properties = data + resolve(true) + }) + }) + } + + private handleError(error: HttpErrorResponse) { + if (error.error instanceof ErrorEvent) { + console.error('An error occurred:', error.error.message) + } else { + console.error( + `Backend returned code ${error.status}, ` + + `body was: ${error.error}` + ); + } + return throwError(() => error) + } +} \ No newline at end of file diff --git a/src/assets/config.json b/src/assets/config.json new file mode 100644 index 0000000..33de0be --- /dev/null +++ b/src/assets/config.json @@ -0,0 +1,5 @@ +{ + "login": "http://localhost:8082/api/auth/login", + "signup": "http://localhost:8082/api/auth/signup", + "test": "http://localhost:8082/api/backProfile" +} \ No newline at end of file diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts index 1faa93d..3526854 100644 --- a/src/environments/environment.development.ts +++ b/src/environments/environment.development.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - baseUrl: 'http://localhost:8082/api' + baseUrl: '../assets/config.json' } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 5de0309..c1ed40a 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,4 +1,4 @@ export const environment = { production: true, - baseUrl: 'http://www.brain.com/api' + baseUrl: 'brain/assets/config.json' } From 92921b6e915c18215612b8c2142877d633a6b59a Mon Sep 17 00:00:00 2001 From: FireCode <69737708+firecode16@users.noreply.github.com> Date: Thu, 1 Aug 2024 11:32:02 -0600 Subject: [PATCH 2/9] firecode16 --- src/app/components/home/home.component.html | 2 +- src/app/components/home/home.component.ts | 50 ++++++++++++++++++- src/app/models/backdrop.spec.ts | 7 --- src/app/models/backdrop.ts | 3 -- src/app/models/media-content.ts | 9 ++++ src/app/models/media-detail.ts | 9 ++++ src/app/models/media-response.ts | 6 +++ src/app/models/result.ts | 11 ++++ src/app/services/backdrop.service.ts | 2 +- .../services/published.multimedia.service.ts | 47 +++++++++++++++++ src/assets/config.json | 3 +- 11 files changed, 134 insertions(+), 15 deletions(-) delete mode 100644 src/app/models/backdrop.spec.ts delete mode 100644 src/app/models/backdrop.ts create mode 100644 src/app/models/media-content.ts create mode 100644 src/app/models/media-detail.ts create mode 100644 src/app/models/media-response.ts create mode 100644 src/app/models/result.ts create mode 100644 src/app/services/published.multimedia.service.ts diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index c140651..d1b96c1 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -78,7 +78,7 @@
Karol_300 - ... + ...

{{longText}} diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index b744da8..1d7145f 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,12 +1,58 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' +import { PublishedMultimediaService } from '../../services/published.multimedia.service' +import { MediaResponse } from '../../models/media-response' +import { MediaDetail } from '../../models/media-detail' +import { MediaContent } from '../../models/media-content' @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrl: './home.component.css' }) -export class HomeComponent { +export class HomeComponent implements OnInit { longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.` + + mediaResponse?: MediaResponse + arrMediaDetail?: Array + mediaDetail?: MediaDetail + arrMediaContent?: Array + + projectOverview?: string + publishDate?: string + + constructor(private publishedMultimediaService: PublishedMultimediaService) { } + + ngOnInit(): void { + this.getAllPost(190881, 0, 10) + } + + getAllPost(userId: number, page: number, size: number): void { + this.publishedMultimediaService.getAllPost(userId, page, size).subscribe(response => { + this.mediaResponse = response + + if (this.mediaResponse?.result == 'OK') { + this.arrMediaDetail = this.mediaResponse?.data?.post + + this.arrMediaDetail?.forEach((item) => { + this.projectOverview = item.overview + this.publishDate = item.postDate + this.arrMediaContent = item.content + + if (item.array == 1) { + let id = this.arrMediaContent?.map(x => x._id)[0] + } else if (item.array > 1) { + console.log(this.arrMediaContent) + } + }) + } + }) + } + + getMultimediaById(id: any): void { + this.publishedMultimediaService.getMultimediaById(id).subscribe(response => { + console.log(response) + }) + } } diff --git a/src/app/models/backdrop.spec.ts b/src/app/models/backdrop.spec.ts deleted file mode 100644 index 2da35f6..0000000 --- a/src/app/models/backdrop.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Backdrop } from './backdrop'; - -describe('Backdrop', () => { - it('should create an instance', () => { - expect(new Backdrop()).toBeTruthy(); - }); -}); diff --git a/src/app/models/backdrop.ts b/src/app/models/backdrop.ts deleted file mode 100644 index 17f34b9..0000000 --- a/src/app/models/backdrop.ts +++ /dev/null @@ -1,3 +0,0 @@ -export class Backdrop { - id?: number -} diff --git a/src/app/models/media-content.ts b/src/app/models/media-content.ts new file mode 100644 index 0000000..c0e7063 --- /dev/null +++ b/src/app/models/media-content.ts @@ -0,0 +1,9 @@ +export class MediaContent { + _id?: string + collectionId?: number + contentType?: string + multimediaName?: string + share?: number + likes?: number + comments?: Array +} \ No newline at end of file diff --git a/src/app/models/media-detail.ts b/src/app/models/media-detail.ts new file mode 100644 index 0000000..190e39c --- /dev/null +++ b/src/app/models/media-detail.ts @@ -0,0 +1,9 @@ +import { MediaContent } from "./media-content" + +export class MediaDetail { + collectionId?: number + postDate?: string + overview?: string + array: number = 0 + content?: Array +} diff --git a/src/app/models/media-response.ts b/src/app/models/media-response.ts new file mode 100644 index 0000000..fba711d --- /dev/null +++ b/src/app/models/media-response.ts @@ -0,0 +1,6 @@ +import { Result } from "./result" + +export class MediaResponse { + result?: string + data?: Result +} \ No newline at end of file diff --git a/src/app/models/result.ts b/src/app/models/result.ts new file mode 100644 index 0000000..b2cf4a5 --- /dev/null +++ b/src/app/models/result.ts @@ -0,0 +1,11 @@ +import { MediaDetail } from "./media-detail" + +export class Result { + userId?: number + userName?: string + fullName?: string + email?: string + backdropName?: string + countContacts?: number + post?: Array +} \ No newline at end of file diff --git a/src/app/services/backdrop.service.ts b/src/app/services/backdrop.service.ts index 30e7215..7d8e1cb 100644 --- a/src/app/services/backdrop.service.ts +++ b/src/app/services/backdrop.service.ts @@ -7,7 +7,7 @@ import { Observable } from 'rxjs'; }) export class BackdropService { - private baseUrl: string = 'http://192.168.1.121:8081/api/backProfile' + private baseUrl: string = 'only test' constructor(private http: HttpClient) { } diff --git a/src/app/services/published.multimedia.service.ts b/src/app/services/published.multimedia.service.ts new file mode 100644 index 0000000..992d00f --- /dev/null +++ b/src/app/services/published.multimedia.service.ts @@ -0,0 +1,47 @@ +import { HttpClient } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { catchError, Observable, of, map, tap } from 'rxjs' + +import { ConfigService } from './config.service' + +@Injectable({ + providedIn: 'root' +}) +export class PublishedMultimediaService { + + constructor(private http: HttpClient, private configService: ConfigService) { } + + getAllPost(userId: number, page: number, size: number): Observable { + const url = `${this.configService.properties.getAllPost}?userId=${userId}&page=${page}&size=${size}` + return this.http.get(url) + .pipe( + tap(_ => this.log(`fetched getAllPost()`)), + catchError(this.handleError(`getAllPost id=${userId}`)) + ) + } + + getMultimediaById(_id: string): Observable { + const url = `${this.configService.properties.getMultimediaById}/${_id}` + return this.http.get(url) + .pipe( + tap(_ => this.log(`fetched getMultimediaById() id=${_id}`)), + catchError(this.handleError(`getMultimediaById id=${_id}`)) + ) + } + + private handleError(operation = 'operation', result?: T) { + return (error: any): Observable => { + // TODO: send the error to remote logging infrastructure + console.error(error) + // TODO: better job of transforming error for user consumption + this.log(`${operation} failed: ${error.message}`) + + // Let the app keep running by returning an empty result + return of(result as T) + } + } + + private log(message: string) { + console.log('PublishedMultimediaService: ' + message) + } +} \ No newline at end of file diff --git a/src/assets/config.json b/src/assets/config.json index 33de0be..335cf12 100644 --- a/src/assets/config.json +++ b/src/assets/config.json @@ -1,5 +1,6 @@ { "login": "http://localhost:8082/api/auth/login", "signup": "http://localhost:8082/api/auth/signup", - "test": "http://localhost:8082/api/backProfile" + "getAllPost": "http://localhost:8081/api/allPost", + "getMultimediaById": "http://localhost:8081/api/multimedia" } \ No newline at end of file From 85533100efc02fd7cf758ff5ef2e7dc7a6e132ac Mon Sep 17 00:00:00 2001 From: FireCode <69737708+firecode16@users.noreply.github.com> Date: Fri, 2 Aug 2024 19:39:26 -0600 Subject: [PATCH 3/9] firecode16 --- .vscode/launch.json | 4 +- src/app/components/home/home.component.css | 6 +- src/app/components/home/home.component.html | 222 ++++++++++-------- src/app/components/home/home.component.ts | 31 +-- src/app/models/media-types.ts | 6 + .../services/published.multimedia.service.ts | 9 - src/assets/config.json | 2 +- 7 files changed, 149 insertions(+), 131 deletions(-) create mode 100644 src/app/models/media-types.ts diff --git a/.vscode/launch.json b/.vscode/launch.json index 925af83..a5fdd85 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,14 +4,14 @@ "configurations": [ { "name": "ng serve", - "type": "chrome", + "type": "firefox", "request": "launch", "preLaunchTask": "npm: start", "url": "http://localhost:4200/" }, { "name": "ng test", - "type": "chrome", + "type": "firefox", "request": "launch", "preLaunchTask": "npm: test", "url": "http://localhost:9876/debug.html" diff --git a/src/app/components/home/home.component.css b/src/app/components/home/home.component.css index c13d135..ef51315 100644 --- a/src/app/components/home/home.component.css +++ b/src/app/components/home/home.component.css @@ -2,7 +2,11 @@ margin-bottom: 48px; } -.example-header-image { +.custom-card { + width: 560px; +} + +.avatar-header-image { background-image: url('https://miro.medium.com/v2/resize:fit:1358/0*NwkeBmXVnnEoVcgj'); background-size: cover; } diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index d1b96c1..0eb0237 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -10,103 +10,135 @@

-
- - -
- Alyx_450 - - -
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 1d7145f..4134a8a 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -3,6 +3,7 @@ import { PublishedMultimediaService } from '../../services/published.multimedia. import { MediaResponse } from '../../models/media-response' import { MediaDetail } from '../../models/media-detail' import { MediaContent } from '../../models/media-content' +import { ConfigService } from '../../services/config.service' @Component({ selector: 'app-home', @@ -10,10 +11,6 @@ import { MediaContent } from '../../models/media-content' styleUrl: './home.component.css' }) export class HomeComponent implements OnInit { - longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog - from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was - originally bred for hunting.` - mediaResponse?: MediaResponse arrMediaDetail?: Array mediaDetail?: MediaDetail @@ -21,11 +18,14 @@ export class HomeComponent implements OnInit { projectOverview?: string publishDate?: string + userNameAvatar?: string + urlMedia: string = '' - constructor(private publishedMultimediaService: PublishedMultimediaService) { } + constructor(private publishedMultimediaService: PublishedMultimediaService, private configService: ConfigService) { } ngOnInit(): void { - this.getAllPost(190881, 0, 10) + this.urlMedia = this.configService.properties.getUrlMultimedia + this.getAllPost(333003, 0, 10) } getAllPost(userId: number, page: number, size: number): void { @@ -34,25 +34,10 @@ export class HomeComponent implements OnInit { if (this.mediaResponse?.result == 'OK') { this.arrMediaDetail = this.mediaResponse?.data?.post + this.userNameAvatar = this.mediaResponse?.data?.userName - this.arrMediaDetail?.forEach((item) => { - this.projectOverview = item.overview - this.publishDate = item.postDate - this.arrMediaContent = item.content - - if (item.array == 1) { - let id = this.arrMediaContent?.map(x => x._id)[0] - } else if (item.array > 1) { - console.log(this.arrMediaContent) - } - }) + console.log(this.arrMediaDetail) } }) } - - getMultimediaById(id: any): void { - this.publishedMultimediaService.getMultimediaById(id).subscribe(response => { - console.log(response) - }) - } } diff --git a/src/app/models/media-types.ts b/src/app/models/media-types.ts new file mode 100644 index 0000000..916e24f --- /dev/null +++ b/src/app/models/media-types.ts @@ -0,0 +1,6 @@ +export class MediaTypes { + jpg: string = 'image/jpg' + png: string = 'image/png' + video: string = 'video/mp4' + audio: string = 'audio/mp3' +} \ No newline at end of file diff --git a/src/app/services/published.multimedia.service.ts b/src/app/services/published.multimedia.service.ts index 992d00f..d8b6f36 100644 --- a/src/app/services/published.multimedia.service.ts +++ b/src/app/services/published.multimedia.service.ts @@ -20,15 +20,6 @@ export class PublishedMultimediaService { ) } - getMultimediaById(_id: string): Observable { - const url = `${this.configService.properties.getMultimediaById}/${_id}` - return this.http.get(url) - .pipe( - tap(_ => this.log(`fetched getMultimediaById() id=${_id}`)), - catchError(this.handleError(`getMultimediaById id=${_id}`)) - ) - } - private handleError(operation = 'operation', result?: T) { return (error: any): Observable => { // TODO: send the error to remote logging infrastructure diff --git a/src/assets/config.json b/src/assets/config.json index 335cf12..b648c47 100644 --- a/src/assets/config.json +++ b/src/assets/config.json @@ -2,5 +2,5 @@ "login": "http://localhost:8082/api/auth/login", "signup": "http://localhost:8082/api/auth/signup", "getAllPost": "http://localhost:8081/api/allPost", - "getMultimediaById": "http://localhost:8081/api/multimedia" + "getUrlMultimedia": "http://localhost:8081/api/multimedia/" } \ No newline at end of file From dbe408a9a4314141f6fb42e8974bdfa4ae9ba789 Mon Sep 17 00:00:00 2001 From: FireCode <69737708+firecode16@users.noreply.github.com> Date: Fri, 9 Aug 2024 12:26:25 -0600 Subject: [PATCH 4/9] firecode16 --- angular.json | 4 +- src/app/app.module.ts | 4 +- src/app/components/fab/fab.component.ts | 4 +- src/app/components/home/home.component.css | 41 ----- src/app/components/home/home.component.html | 142 ++---------------- src/app/components/home/home.component.ts | 35 +---- src/app/components/login/login.component.ts | 7 +- .../multimedia/multimedia.component.css | 90 +++++++++++ .../multimedia/multimedia.component.html | 138 +++++++++++++++++ .../multimedia/multimedia.component.ts | 83 ++++++++++ 10 files changed, 330 insertions(+), 218 deletions(-) create mode 100644 src/app/components/multimedia/multimedia.component.css create mode 100644 src/app/components/multimedia/multimedia.component.html create mode 100644 src/app/components/multimedia/multimedia.component.ts diff --git a/angular.json b/angular.json index ee954a0..474d415 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,7 @@ } ], "styles": [ - "@angular/material/prebuilt-themes/rose-red.css", + "@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/bootstrap-icons/font/bootstrap-icons.css" @@ -95,7 +95,7 @@ } ], "styles": [ - "@angular/material/prebuilt-themes/rose-red.css", + "@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ], "scripts": [] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1677543..47716c9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { HomeComponent } from './components/home/home.component' import { NavbarComponent } from './components/navbar/navbar.component' import { FabComponent } from './components/fab/fab.component' import { PublishProyectDialogComponent } from './components/dialogs/publish-proyect-dialog/publish-proyect-dialog.component' +import { MultimediaComponent } from './components/multimedia/multimedia.component' import { provideAnimationsAsync } from '@angular/platform-browser/animations/async' export function initializeAppFactory(appConfig: ConfigService) { @@ -37,7 +38,8 @@ export function initializeAppFactory(appConfig: ConfigService) { HomeComponent, NavbarComponent, FabComponent, - PublishProyectDialogComponent + PublishProyectDialogComponent, + MultimediaComponent ], imports: [ CommonModule, diff --git a/src/app/components/fab/fab.component.ts b/src/app/components/fab/fab.component.ts index 36bec57..574654d 100644 --- a/src/app/components/fab/fab.component.ts +++ b/src/app/components/fab/fab.component.ts @@ -14,8 +14,8 @@ export class FabComponent implements OnInit { openDialog(): void { const dialogRef = this.dialog.open(PublishProyectDialogComponent, { - height: '70%', - width: '98%' + height: '85%', + width: '60%' }) dialogRef.afterClosed().subscribe(result => { diff --git a/src/app/components/home/home.component.css b/src/app/components/home/home.component.css index ef51315..e69de29 100644 --- a/src/app/components/home/home.component.css +++ b/src/app/components/home/home.component.css @@ -1,41 +0,0 @@ -.mat-tab-group { - margin-bottom: 48px; -} - -.custom-card { - width: 560px; -} - -.avatar-header-image { - background-image: url('https://miro.medium.com/v2/resize:fit:1358/0*NwkeBmXVnnEoVcgj'); - background-size: cover; -} - -:host ::ng-deep .mat-mdc-card-avatar { - height: 40px !important; - width: 40px !important; - border-radius: 50% !important; - flex-shrink: 0 !important; - margin-bottom: 0px !important; - object-fit: cover !important; -} - -:host ::ng-deep .mat-mdc-card-title, -.mat-mdc-card-subtitle { - display: block !important; - margin-top: 5px !important; - margin-left: 0 !important; - margin-bottom: 0 !important; - margin-right: 0 !important; -} - -.scale-fit-image { - height: 360px; - overflow: hidden; - resize: both; - object-fit: cover; - position: relative; - display: block; - left: 70px; - right: 70px; -} \ No newline at end of file diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 0eb0237..63659aa 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -9,151 +9,27 @@
-
- @if (this.arrMediaDetail?.length != 0) { - @for (item of this.arrMediaDetail; track $index) { - @if (item.array == 1) { - @for (content of item.content; track $index) { -
- - -
- {{userNameAvatar}} - - - @if (content.contentType == 'video/mp4') { - - } @else if (content.contentType == 'image/jpg' || content.contentType == 'image/png') { - - } - -

{{item.overview}}

- - - - - - - - - - -
- } - } @else if (item.array > 1) { -
- - -
- {{userNameAvatar}} - - - - - -

{{item.overview}}

- - - - - - - - - - -
- } - } - } @else { -

Not found Items

- } -
+
- Content 2 + +
+ Sala de Chat +
- Content 3 + +
+ GitHub +
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 4134a8a..6d7a2e3 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,9 +1,4 @@ import { Component, OnInit } from '@angular/core' -import { PublishedMultimediaService } from '../../services/published.multimedia.service' -import { MediaResponse } from '../../models/media-response' -import { MediaDetail } from '../../models/media-detail' -import { MediaContent } from '../../models/media-content' -import { ConfigService } from '../../services/config.service' @Component({ selector: 'app-home', @@ -11,33 +6,7 @@ import { ConfigService } from '../../services/config.service' styleUrl: './home.component.css' }) export class HomeComponent implements OnInit { - mediaResponse?: MediaResponse - arrMediaDetail?: Array - mediaDetail?: MediaDetail - arrMediaContent?: Array + constructor() { } - projectOverview?: string - publishDate?: string - userNameAvatar?: string - urlMedia: string = '' - - constructor(private publishedMultimediaService: PublishedMultimediaService, private configService: ConfigService) { } - - ngOnInit(): void { - this.urlMedia = this.configService.properties.getUrlMultimedia - this.getAllPost(333003, 0, 10) - } - - getAllPost(userId: number, page: number, size: number): void { - this.publishedMultimediaService.getAllPost(userId, page, size).subscribe(response => { - this.mediaResponse = response - - if (this.mediaResponse?.result == 'OK') { - this.arrMediaDetail = this.mediaResponse?.data?.post - this.userNameAvatar = this.mediaResponse?.data?.userName - - console.log(this.arrMediaDetail) - } - }) - } + ngOnInit(): void { } } diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index 36be65d..215aca8 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -21,11 +21,6 @@ export class LoginComponent implements OnInit { onSubmit(): void { this.authService.login(this.username, this.password).subscribe({ next: () => { - Swal.fire({ - title: "Usuario autenticado", - text: "Welcome " + this.username, - icon: "success" - }); this.router.navigate(['/home']) console.log("Token de acceso : " + this.authService.getToken()) }, @@ -34,7 +29,7 @@ export class LoginComponent implements OnInit { title: "Credenciales inválidas", text: "Verifique sus credenciales", icon: "error" - }); + }) this.error = 'Credenciales inválidas' } }) diff --git a/src/app/components/multimedia/multimedia.component.css b/src/app/components/multimedia/multimedia.component.css new file mode 100644 index 0000000..04e5a81 --- /dev/null +++ b/src/app/components/multimedia/multimedia.component.css @@ -0,0 +1,90 @@ +.mat-tab-group { + margin-bottom: 48px; +} + +.custom-card { + width: 560px; +} + +.avatar-header-image { + background-image: url('https://miro.medium.com/v2/resize:fit:1358/0*NwkeBmXVnnEoVcgj'); + background-size: cover; +} + +:host ::ng-deep .mat-mdc-card-avatar { + height: 40px !important; + width: 40px !important; + border-radius: 50% !important; + flex-shrink: 0 !important; + margin-bottom: 0px !important; + object-fit: cover !important; +} + +:host ::ng-deep .mat-mdc-card-title, +.mat-mdc-card-subtitle { + display: block !important; + margin-top: 5px !important; + margin-left: 0 !important; + margin-bottom: 0 !important; + margin-right: 0 !important; +} + +.scale-fit-image { + height: 360px; + overflow: hidden; + resize: both; + object-fit: cover; + position: relative; + display: block; + left: 70px; + right: 70px; +} + +.carousel-control-next, +.carousel-control-prev { + position: absolute !important; + top: 135px !important; + bottom: 135px !important; + z-index: 1 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 13% !important; + padding: 0 !important; + color: #fff !important; + text-align: center !important; + background: 0 0 !important; + border: 0 !important; + opacity: .5 !important; + transition: opacity .15s ease !important; +} + +.custom-video__play { + border-radius: 0.2em; + background-color: #080808; +} + +.custom-video__control { + position: absolute; + top: 43%; + left: 46%; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + padding: 1em; + display: flex; + justify-content: center; + align-items: center; + color: #ffffff; + font-size: 1em; + font-weight: 400; + width: 3em; + height: 3em; + white-space: nowrap; + line-height: 0; + cursor: pointer; +} + +video::-webkit-media-controls { + position: relative; + z-index: 1; +} \ No newline at end of file diff --git a/src/app/components/multimedia/multimedia.component.html b/src/app/components/multimedia/multimedia.component.html new file mode 100644 index 0000000..832f0e4 --- /dev/null +++ b/src/app/components/multimedia/multimedia.component.html @@ -0,0 +1,138 @@ +
+ @if (this.arrMediaDetail?.length != 0) { + @for (item of this.arrMediaDetail; track $index) { + @if (item.array == 1) { + @for (content of item.content; track $index) { +
+ + +
+ {{userNameAvatar}} + + + @if (content.contentType == 'video/mp4') { + +
▶
+ } @else if (content.contentType == 'image/jpg' || content.contentType == 'image/png') { + + } + +

{{item.overview}}

+ + + + + + + + + + +
+ } + } @else if (item.array > 1) { +
+ + +
+ {{userNameAvatar}} + + + + + +

{{item.overview}}

+ + + + + + + + + + +
+ } + } + } @else { +

Not found Items

+ } +
\ No newline at end of file diff --git a/src/app/components/multimedia/multimedia.component.ts b/src/app/components/multimedia/multimedia.component.ts new file mode 100644 index 0000000..d97f9a3 --- /dev/null +++ b/src/app/components/multimedia/multimedia.component.ts @@ -0,0 +1,83 @@ +import { Component, OnInit } from '@angular/core' +import { PublishedMultimediaService } from '../../services/published.multimedia.service' +import { MediaResponse } from '../../models/media-response' +import { MediaDetail } from '../../models/media-detail' +import { MediaContent } from '../../models/media-content' +import { ConfigService } from '../../services/config.service' + +@Component({ + selector: 'app-multimedia', + templateUrl: './multimedia.component.html', + styleUrl: './multimedia.component.css' +}) +export class MultimediaComponent implements OnInit { + mediaResponse?: MediaResponse + arrMediaDetail?: Array + mediaDetail?: MediaDetail + arrMediaContent?: Array + + projectOverview?: string + publishDate?: string + userNameAvatar?: string + urlMedia: string = '' + media?: HTMLVideoElement + + constructor(private publishedMultimediaService: PublishedMultimediaService, private configService: ConfigService) { } + + ngOnInit(): void { + this.getAllPost(190881, 0, 10) + this.urlMedia = this.configService.properties.getUrlMultimedia + } + + getAllPost(userId: number, page: number, size: number): void { + this.publishedMultimediaService.getAllPost(userId, page, size).subscribe(response => { + this.mediaResponse = response + + if (this.mediaResponse?.result == 'OK') { + this.arrMediaDetail = this.mediaResponse?.data?.post + this.userNameAvatar = this.mediaResponse?.data?.userName + } + }) + } + + onPlay(mediaId: any): void { + this.media = document.getElementById(mediaId) as HTMLVideoElement + const controls: Element | null = this.media.nextElementSibling + + if (this.media.paused) { + controls!.innerHTML = "| |" + this.media.play() + } else { + controls!.innerHTML = "▶" + this.media.pause() + } + } + + onMouseOut(mediaId: any): void { + this.media = document.getElementById(mediaId) as HTMLVideoElement + + if (!this.media.paused) { + const controls = this.media.nextElementSibling + controls?.setAttribute('style', 'display: none') + } + } + + onMouseOver(mediaId: any): void { + this.media = document.getElementById(mediaId) as HTMLVideoElement + + const controls = this.media.nextElementSibling + controls?.setAttribute('style', 'display: flex;') + } + + onEnded(mediaId: any): void { + this.media = document.getElementById(mediaId) as HTMLVideoElement + + const controls = this.media.nextElementSibling + controls?.setAttribute('style', 'display: flex;') + controls!.innerHTML = "▶" + } + + openMedia(mediaId: any) { + console.log('open modal for media: ' + mediaId) + } +} \ No newline at end of file From e11ea5f4baa3d55469fd506b05bad6cd8cb4ca26 Mon Sep 17 00:00:00 2001 From: FireCode <69737708+firecode16@users.noreply.github.com> Date: Fri, 16 Aug 2024 10:26:28 -0600 Subject: [PATCH 5/9] firecode16 --- .vscode/launch.json | 4 ++-- angular.json | 4 ++-- src/app/components/fab/fab.component.css | 4 ++-- src/app/components/fab/fab.component.ts | 4 ++-- src/app/components/home/home.component.html | 6 +++--- .../components/multimedia/multimedia.component.css | 4 ++-- .../components/multimedia/multimedia.component.html | 12 ++++++------ .../components/multimedia/multimedia.component.ts | 10 +++++----- src/app/components/navbar/navbar.component.css | 3 ++- 9 files changed, 26 insertions(+), 25 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index a5fdd85..925af83 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,14 +4,14 @@ "configurations": [ { "name": "ng serve", - "type": "firefox", + "type": "chrome", "request": "launch", "preLaunchTask": "npm: start", "url": "http://localhost:4200/" }, { "name": "ng test", - "type": "firefox", + "type": "chrome", "request": "launch", "preLaunchTask": "npm: test", "url": "http://localhost:9876/debug.html" diff --git a/angular.json b/angular.json index 474d415..a02d1d9 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,7 @@ } ], "styles": [ - "@angular/material/prebuilt-themes/indigo-pink.css", + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/bootstrap-icons/font/bootstrap-icons.css" @@ -95,7 +95,7 @@ } ], "styles": [ - "@angular/material/prebuilt-themes/indigo-pink.css", + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.css" ], "scripts": [] diff --git a/src/app/components/fab/fab.component.css b/src/app/components/fab/fab.component.css index ddbaaa0..727e5a6 100644 --- a/src/app/components/fab/fab.component.css +++ b/src/app/components/fab/fab.component.css @@ -25,7 +25,7 @@ position: relative; height: 56px; width: 56px; - background-color: #36cf9c; + background-color: #45DFB1; border-radius: 50%; z-index: 2; transition: .4s; @@ -54,7 +54,7 @@ right: 7px; height: 43px; width: 43px; - background-color: rgb(255, 75, 120); + background-color: #0AD1C8; border-radius: 50%; transition: all .3s ease; diff --git a/src/app/components/fab/fab.component.ts b/src/app/components/fab/fab.component.ts index 574654d..3342930 100644 --- a/src/app/components/fab/fab.component.ts +++ b/src/app/components/fab/fab.component.ts @@ -14,8 +14,8 @@ export class FabComponent implements OnInit { openDialog(): void { const dialogRef = this.dialog.open(PublishProyectDialogComponent, { - height: '85%', - width: '60%' + height: '80%', + width: '98%' }) dialogRef.afterClosed().subscribe(result => { diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 63659aa..252f9db 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -5,7 +5,7 @@ - +
@@ -14,7 +14,7 @@ - +
@@ -24,7 +24,7 @@ - +
diff --git a/src/app/components/multimedia/multimedia.component.css b/src/app/components/multimedia/multimedia.component.css index 04e5a81..53dcb8b 100644 --- a/src/app/components/multimedia/multimedia.component.css +++ b/src/app/components/multimedia/multimedia.component.css @@ -59,9 +59,10 @@ transition: opacity .15s ease !important; } -.custom-video__play { +.custom-video { border-radius: 0.2em; background-color: #080808; + cursor: pointer; } .custom-video__control { @@ -81,7 +82,6 @@ height: 3em; white-space: nowrap; line-height: 0; - cursor: pointer; } video::-webkit-media-controls { diff --git a/src/app/components/multimedia/multimedia.component.html b/src/app/components/multimedia/multimedia.component.html index 832f0e4..c84a3c9 100644 --- a/src/app/components/multimedia/multimedia.component.html +++ b/src/app/components/multimedia/multimedia.component.html @@ -11,10 +11,10 @@ @if (content.contentType == 'video/mp4') { -