diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f30e734b..0b10ff1e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -15,6 +15,9 @@ import { UpdateRoleComponent } from './pages/update-role/update-role.component'; import { AdminGuard } from './services/admin.guard'; import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component'; import { ParticipateComponent } from './pages/participate/participate.component'; +import { GridDaysComponent } from './pages/grid-days/grid-days.component'; +import { GridComponent } from './pages/grid/grid.component'; + import { WithTokenGuard } from './guard/with-token.guard'; const routes: Routes = [ @@ -31,7 +34,9 @@ const routes: Routes = [ { path: 'participate', component: ParticipateComponent, canActivate: [AuthGuard], }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], }, { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], }, - { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], }, + { path: 'grid-days', component: GridDaysComponent }, + { path: 'grid-days/:day', component: GridComponent }, + { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cff38be0..27909b94 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -36,7 +36,10 @@ import { MenuModule } from 'primeng/menu'; import { VideoCommentComponent } from './components/video-comment/video-comment.component'; import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component'; import { ParticipateComponent } from './pages/participate/participate.component'; +import { GridComponent } from './pages/grid/grid.component'; +import { GridDaysComponent } from './pages/grid-days/grid-days.component'; import { MessageService } from 'primeng/api'; +import { ProgressSpinnerModule } from 'primeng/progressspinner'; @NgModule({ imports: [ @@ -50,6 +53,7 @@ import { MessageService } from 'primeng/api'; InputTextModule, DropdownModule, ButtonModule, + ProgressSpinnerModule, MenuModule, FormsModule, BrowserAnimationsModule, @@ -72,7 +76,9 @@ import { MessageService } from 'primeng/api'; UpdateRoleComponent, SuggestAgendaComponent, ParticipateComponent, - VideoCommentComponent, + GridComponent, + GridDaysComponent, + VideoCommentComponent ], providers: [ { provide: 'authGuard', useClass: AuthGuard }, diff --git a/src/app/pages/grid-days/grid-days.component.css b/src/app/pages/grid-days/grid-days.component.css new file mode 100644 index 00000000..c39224ca --- /dev/null +++ b/src/app/pages/grid-days/grid-days.component.css @@ -0,0 +1,6 @@ +.button-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } \ No newline at end of file diff --git a/src/app/pages/grid-days/grid-days.component.html b/src/app/pages/grid-days/grid-days.component.html new file mode 100644 index 00000000..30730d08 --- /dev/null +++ b/src/app/pages/grid-days/grid-days.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/pages/grid-days/grid-days.component.spec.ts b/src/app/pages/grid-days/grid-days.component.spec.ts new file mode 100644 index 00000000..1defb35a --- /dev/null +++ b/src/app/pages/grid-days/grid-days.component.spec.ts @@ -0,0 +1,43 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { GridDaysComponent } from './grid-days.component'; +import { Router } from '@angular/router'; + +describe('GridDaysComponent', () => { + let component: GridDaysComponent; + let fixture: ComponentFixture; + let router: Router; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RouterTestingModule.withRoutes( + [ + { path: 'grid-days', component: GridDaysComponent } + ] + )], + declarations: [ GridDaysComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GridDaysComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should call redirect when redirect is clicked', () => { + spyOn(component, 'redirect').and.callThrough(); + const navigateSpy = spyOn(router, 'navigate'); + fixture.detectChanges(); + const submitButton = fixture.nativeElement.querySelector( + '#redirect' + ); + submitButton.click(); + + expect(navigateSpy).toHaveBeenCalledWith(['/grid-days/Domingo']); + }); +}); diff --git a/src/app/pages/grid-days/grid-days.component.ts b/src/app/pages/grid-days/grid-days.component.ts new file mode 100644 index 00000000..83e16f0a --- /dev/null +++ b/src/app/pages/grid-days/grid-days.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-grid-days', + templateUrl: './grid-days.component.html', + styleUrls: ['./grid-days.component.css'] +}) + +export class GridDaysComponent { + days: string[] = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']; + + constructor( + private route: Router) { + + } + redirect(day: string) { + this.route.navigate(['/grid-days/'+ day]); + + } +} + + diff --git a/src/app/pages/grid/grid.component.css b/src/app/pages/grid/grid.component.css new file mode 100644 index 00000000..8c74ef3f --- /dev/null +++ b/src/app/pages/grid/grid.component.css @@ -0,0 +1,17 @@ +.padded-cell { + padding-left: 40px; + } +.padded-cell-day { + padding-left: 20px; + } +.center-table { + font-size: 14px; +} +.center-button { + margin-left: auto; + margin-right: auto; + width: 5%; +} +tr:not(:last-child) { + border-bottom-width: 0.01em; +} \ No newline at end of file diff --git a/src/app/pages/grid/grid.component.html b/src/app/pages/grid/grid.component.html new file mode 100644 index 00000000..fcfd03da --- /dev/null +++ b/src/app/pages/grid/grid.component.html @@ -0,0 +1,33 @@ +
+
+

+ {{ day }} +

+ + + + + + + + + + + + + + + + +
Programação diária
HorárioAtividade
{{ item.time }}{{ item.activity }}
+ + +
+
+ +
+
+
+
diff --git a/src/app/pages/grid/grid.component.spec.ts b/src/app/pages/grid/grid.component.spec.ts new file mode 100644 index 00000000..9ff6ac58 --- /dev/null +++ b/src/app/pages/grid/grid.component.spec.ts @@ -0,0 +1,76 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { GridComponent } from './grid.component'; +import { GridService } from 'src/app/services/grid.service'; +import { Router } from '@angular/router'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { of, throwError } from 'rxjs'; +import { ProgressSpinnerModule } from 'primeng/progressspinner'; +class GridServiceMock { + getSchedule() { + return of({ success: true }); + } +} + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + let gridService: GridService; + let router: Router; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ProgressSpinnerModule, HttpClientTestingModule, RouterTestingModule.withRoutes( + [ + { path: 'grid-days/:day', component: GridComponent } + ] + )], + declarations: [GridComponent], + providers: [{ provide: GridService, useValue: new GridServiceMock() }] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + gridService = TestBed.inject(GridService); + router = TestBed.inject(Router); + }); + + it('should create', () => { + fixture.detectChanges(); + expect(component).toBeTruthy(); + }); + + it('shoud call getGridByDay', () => { + const mySpy = spyOn(component, 'getGridByDay'); + fixture.detectChanges(); + expect(mySpy).toHaveBeenCalled(); + }) + + it('should call getSchedule', () => { + const mySpy = spyOn(gridService, 'getSchedule').and.callThrough(); + component.day = 'Domingo'; + component.getGridByDay(); + fixture.detectChanges(); + expect(mySpy).toHaveBeenCalled(); + }); + + it('should call getSchedule and return an error', () => { + const mySpy = spyOn(gridService, 'getSchedule').and.returnValue(throwError(() => new Error('Erro'))); + component.getGridByDay(); + expect(mySpy).toHaveBeenCalled(); + }); + + it('should call redirect when redirect is clicked', () => { + spyOn(component, 'redirectBack').and.callThrough(); + const navigateSpy = spyOn(router, 'navigate'); + fixture.detectChanges(); + const submitButton = fixture.nativeElement.querySelector( + '#redirectBack' + ); + submitButton.click(); + + expect(navigateSpy).toHaveBeenCalledWith(['/grid-days/']); + }); + +}); diff --git a/src/app/pages/grid/grid.component.ts b/src/app/pages/grid/grid.component.ts new file mode 100644 index 00000000..eb9e8a6e --- /dev/null +++ b/src/app/pages/grid/grid.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { GridService } from 'src/app/services/grid.service'; + +export interface Schedule { + time: string; + activity: string; +} +@Component({ + selector: 'app-grid', + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.css'] +}) + +export class GridComponent { + day: string = ""; + schedule: Schedule[] = []; + loadingSchedule: boolean = true; + + constructor( + private route: ActivatedRoute, + private gridService: GridService, + private router: Router + ) {} + + ngOnInit() { + this.day = this.route.snapshot.params['day']; + this.getGridByDay(); + } + + getGridByDay(): void { + this.gridService.getSchedule(this.day).subscribe({ + next: (data) => { + this.schedule = data[this.day.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")]; + this.loadingSchedule = false; + }, + error: (error) => { + console.error(error); + this.loadingSchedule = false; + } + }) + } + redirectBack() { + this.router.navigate(['/grid-days/']); + + } +} \ No newline at end of file diff --git a/src/app/services/grid.service.spec.ts b/src/app/services/grid.service.spec.ts new file mode 100644 index 00000000..815db86f --- /dev/null +++ b/src/app/services/grid.service.spec.ts @@ -0,0 +1,18 @@ +import { TestBed } from '@angular/core/testing'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { GridService } from './grid.service'; + +describe('GridService', () => { + let service: GridService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + }); + service = TestBed.inject(GridService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/grid.service.ts b/src/app/services/grid.service.ts new file mode 100644 index 00000000..44d4da98 --- /dev/null +++ b/src/app/services/grid.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from '../environment/environment'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) + +export class GridService { + public videoServiceApiURL = environment.videoAPIURL; + + constructor(private http: HttpClient) { } + + getSchedule(day?: string): Observable { + return this.http.get(`${this.videoServiceApiURL}/schedule${day ? '?day=' + day : ''}`) + } +}