Merge branch 'develop' into 10-gerenciador_admin

README.md

@@ -24,6 +24,10 @@ docker compose up
 
 Acessar o localhost em: http://localhost:4200
 
+## Licença
+
+Este projeto está licenciado sob a GNU Affero General Public License v3.0 (AGPL-3.0) com termos adicionais que restringem o uso deste software para fins comerciais. Para mais detalhes, consulte o arquivo [LICENSE](./LICENSE).
+
 ## Equipe EPS
 
 | Foto | Nome | Github | Discord | Email | Matrícula |

src/app/components/background/background.component.ts

@@ -19,6 +19,10 @@ export class BackgroundComponent implements OnInit {
         label: 'Perfil',
         routerLink: '/profile',
       },
+      {
+        label: 'Histórico de Vídeos',
+        routerLink: '/record',
+      }
     ];
     this.identifiesUserDevice();
   }

src/app/pages/record/record.component.css

@@ -1,65 +1,90 @@
-.record-container {
-    justify-content: center;
+.header-title {
+    color: green; /* Azul escuro para o título */
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
-* {
-    font-family: Helvetica, sans-serif;
+
+.videos-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
 }
 
-header {
+
+.videos {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    padding: 1rem;
+    gap: 20px;
+}
+
+
+.flex {
+    display: flex;
     flex-direction: column;
     align-items: center;
+    transition: transform 0.3s ease;
 }
 
-header h1 {
-    font-size: 2.4em;
-    color: #00a550;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+
+.video-img {
+    display: block;
+    margin: 0 auto;
+    border-radius: 7px;
+    width: 220px; /* Mantém a proporção original da imagem */
+    height: 124px; /* Mantém a proporção original da imagem */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
 }
 
-.videos-container {
-    display: flex;
-    justify-content: center;
-    align-content: center;
+
+.video-img:hover {
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-5px); /* Eleva o vídeo ligeiramente ao passar o mouse */
 }
 
-.videos {    
+
+.checkbox-label {
     display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    width: 100%;
-    height: 100%;
-    max-width: 80%;
+    align-items: center;
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+    cursor: pointer;
+    color: #34495e;
+}
+
+
+.checkbox-label input[type="checkbox"] {
+    margin-right: 10px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
 }
 
-@media (max-width: 768px) {
-    header h1 {
-        font-size: 2em;
-    }
 
-    .videos {
-        max-width: 100%;
-        gap: 0.25rem;
-    }
+.record-controls {
+    text-align: center;
+    margin-bottom: 20px;
 }
 
-@media (max-width: 480px) {
-    header h1 {
-        font-size: 1.8em;
-    }
 
-    .videos {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.25rem;
-    }
+.record-controls button {
+    background-color: #2980b9;
+    color: #fff;
+    border: none;
+    padding: 12px 24px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
 
-    .videos-container {
-        padding: 0.5rem;
-    }
+.record-controls button:hover {
+    background-color: #1f6395;
 }

src/app/pages/record/record.component.html

@@ -1,18 +1,30 @@
 <div class="record-container">
     <header>
-        <strong><h1>Histórico de vídeos</h1></strong>
+        <h1 class="header-title">Histórico de Vídeos</h1>
     </header>
-    <main class="videos-container">
+
+
+    <!-- Controle de Rastreamento com Checkbox -->
+    <div class="record-controls my-4">
+        <label class="checkbox-label">
+            <input type="checkbox" [(ngModel)]="trackingEnabled" (change)="toggleTracking(trackingEnabled)" />
+            Rastreamento do Histórico
+        </label>
+        <button (click)="sortRecord(true)" class="btn btn-secondary mr-2">Ordenar Crescente</button>
+        <button (click)="sortRecord(false)" class="btn btn-secondary">Ordenar Decrescente</button>
+    </div>
+
+
+    <main class="videos-container my-4">
         <br>
         <div class="videos">
-            <div *ngFor="let video of filteredVideos" class="flex">
+            <div *ngFor="let video of filteredVideos; trackBy: trackByVideoId" class="flex">
                 <div>
                     <div *ngFor="let image of video.images" [routerLink]="['/video', video.id]" class="cursor-pointer">
-                        <img src="{{ image.href }}" alt="{{ video.title }}" class="w-36 h-[85px] rounded-[7px]" />
+                        <img [src]="image.href" [alt]="video.title" class="w-36 h-[85px] rounded-[7px]" />
                     </div>
                 </div>
             </div>
         </div>
     </main>
 </div>
-

src/app/pages/record/record.component.spec.ts

@@ -1,33 +1,40 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms'; // Importando FormsModule
 import { RecordComponent } from './record.component';
 import { VideoService } from 'src/app/services/video.service';
 import { IVideo } from 'src/shared/model/video.model';
 import { of, throwError } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
+import * as jwt_decode from 'jwt-decode';
+
 
 describe('RecordComponent', () => {
   let component: RecordComponent;
   let fixture: ComponentFixture<RecordComponent>;
   let videoService: VideoService;
 
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, FormsModule], // Adicionando FormsModule aqui
       declarations: [RecordComponent],
       providers: [VideoService],
     }).compileComponents();
 
+
     fixture = TestBed.createComponent(RecordComponent);
     component = fixture.componentInstance;
     videoService = TestBed.inject(VideoService);
     fixture.detectChanges();
   });
 
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
+
   it('should filter videos by record and set filteredVideos correctly', () => {
     const recordVideos = {
       videos: {
@@ -36,53 +43,60 @@ describe('RecordComponent', () => {
       },
     };
 
+
     const unbTvVideos = [
       { id: 190329, title: 'Video Title 1' },
       { id: 190330, title: 'Video Title 2' },
       { id: 190331, title: 'Video Title 3' },
     ];
 
+
     component.recordVideos = recordVideos;
     component.unbTvVideos = unbTvVideos;
 
+
     component.filterVideosByRecord();
     fixture.detectChanges();
 
+
     const expectedFilteredVideos = [
       { id: 190329, title: 'Video Title 1' },
       { id: 190330, title: 'Video Title 2' },
     ];
 
+
     expect(component.filteredVideos).toEqual(expectedFilteredVideos);
   });
 
+
   it('should filter videos by channel and populate unbTvVideos', () => {
     const mockVideos: IVideo[] = [
       { id: 1, title: 'Video 1', channels: [{ id: 12, name: "unbtvchannel" }] },
       { id: 2, title: 'Video 2', channels: [{ id: 13, name: "otherchannel" }] }
     ];
-  
+
     component.unbTvChannelId = 12;
     component.unbTvVideos = [];
-  
+
     component.filterVideosByChannel(mockVideos);
-  
+
     expect(component.unbTvVideos.length).toBe(1);
     expect(component.unbTvVideos[0].id).toBe(1);
   });
-  
+
   it('should call checkRecord service method and set recordVideos', async () => {
-    const expectedResponse = [{ id: 1, title: 'Video 1' }];
+    const expectedResponse = { videos: { 1: 'Video 1' } };
     const checkRecordSpy = spyOn(videoService, 'checkRecord').and.returnValue(of(expectedResponse));
-  
+
     component.userId = '12345';
-    
+
     await component.checkRecord();
-    
+
     expect(checkRecordSpy).toHaveBeenCalledWith('12345');
     expect(component.recordVideos).toEqual(expectedResponse);
   });
 
+
   it('should call findAll service method and set videosEduplay', async () => {
     const expectedData = {
       body: {
@@ -92,12 +106,80 @@ describe('RecordComponent', () => {
     const findAllSpy = spyOn(videoService, 'findAll').and.returnValue(of(new HttpResponse({ body: expectedData.body })));
     const filterSpy = spyOn(component, 'filterVideosByChannel').and.callThrough();
     const videosCatalogSpy = spyOn(videoService, 'videosCatalog').and.callThrough();
-  
+
     await component.findAll();
-  
+
     expect(findAllSpy).toHaveBeenCalled();
     expect(component.videosEduplay).toEqual(expectedData.body.videoList);
     expect(filterSpy).toHaveBeenCalledWith(expectedData.body.videoList);
     expect(videosCatalogSpy).toHaveBeenCalledWith(component.unbTvVideos, component.catalog);
   });  
+
+
+  /*it('should set userId from token correctly', () => {
+    const token = 'dummy.token.payload';
+    const mockDecodedToken = { id: '12345' };
+   
+    spyOn<any>(jwt_decode, 'default').and.returnValue(mockDecodedToken);
+   
+    component.setUserIdFromToken(token);
+   
+    expect(component.userId).toBe('12345');
+  });*/
+
+
+ it('should toggle tracking and update tracking status', () => {
+  component.userId = '12345'; // Defina o userId corretamente
+
+  const toggleSpy = spyOn(videoService, 'toggleTracking').and.returnValue(of({ message: 'Tracking updated' }));
+  const saveSpy = spyOn(component, 'saveTrackingStatus').and.callThrough();
+
+  component.toggleTracking(false);
+
+  expect(component.trackingEnabled).toBe(false);
+  expect(saveSpy).toHaveBeenCalled();
+  expect(toggleSpy).toHaveBeenCalledWith('12345', false);
+});
+
+
+it('should sort records in ascending order and update filteredVideos', () => {
+  component.userId = '12345'; // Defina o userId corretamente
+
+  const mockResponse = {
+    videos: {
+      190329: '2024-08-14 12:00:00',
+      190330: '2024-08-14 13:00:00'
+    }
+  };
+
+  const sortSpy = spyOn(videoService, 'getRecordSorted').and.returnValue(of(mockResponse));
+  component.unbTvVideos = [
+    { id: 190329, title: 'Video Title 1' },
+    { id: 190330, title: 'Video Title 2' }
+  ];
+
+  component.sortRecord(true);
+
+  expect(sortSpy).toHaveBeenCalledWith('12345', true);
+  expect(component.filteredVideos.length).toBe(2);
+  expect(component.filteredVideos[0].id).toBe(190329);
+});
+
+
+
+
+it('should handle errors when sorting records', () => {
+  component.userId = '12345'; // Defina explicitamente o userId antes de chamar o método
+
+  const sortSpy = spyOn(videoService, 'getRecordSorted').and.returnValue(throwError({ status: 500 }));
+  const consoleErrorSpy = spyOn(console, 'error');
+
+  component.sortRecord(true);
+
+  expect(sortSpy).toHaveBeenCalledWith('12345', true);
+  expect(consoleErrorSpy).toHaveBeenCalledWith('Error sorting record:', { status: 500 });
+});
+
+
+
 });