Merge pull request #7 from fga-eps-mds/06-Ordenação_no_historico

Pull request da Issue #6

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

@@ -1,5 +1,5 @@
 .header-title {
-    color: green; /* Azul escuro para o título */
+    color: green; /* Verde escuro para o título */
     text-align: center;
     margin-bottom: 20px;
     font-size: 2rem;
@@ -79,7 +79,7 @@
     border: none;
     padding: 12px 24px;
     margin: 5px;
-    border-radius: 5px;
+    border-radius:25px;
     cursor: pointer;
     font-size: 1.1rem;
     transition: background-color 0.3s ease, transform 0.2s ease;
@@ -113,3 +113,9 @@
 .delete-btn:hover {
     background-color: rgba(255, 0, 0, 1);
 }
+
+.record-controls button.active {
+    background-color: #51A452; /* Cor verde quando o botão está ativo */
+    color: white;
+    border-radius: 25px;
+}

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

@@ -3,18 +3,28 @@
         <h1 class="header-title">Histórico de Vídeos</h1>
     </header>
 
-
     <!-- 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>
+        <button
+        (click)="sortRecord(true)"
+        class="btn btn-secondary mr-2"
+        [ngClass]="{ 'active': isAscendingActive }"
+    >
+    Ordenar Crescente
+        </button>
+        <button
+    (click)="sortRecord(false)"
+    class="btn btn-secondary"
+    [ngClass]="{ 'active': isDescendingActive }"
+    >
+    Ordenar Decrescente
+        </button>
     </div>
 
-
     <main class="videos-container my-4">
         <br>
         <div class="videos">

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

@@ -6,7 +6,6 @@ import { Catalog } from 'src/shared/model/catalog.model';
 import { IVideo } from 'src/shared/model/video.model';
 import jwt_decode from 'jwt-decode';
 
-
 @Component({
   selector: 'app-record',
   templateUrl: './record.component.html',
@@ -22,11 +21,11 @@ export class RecordComponent {
   userId: string = '';
   recordVideos: any = {}; // Inicializado como um objeto vazio
   trackingEnabled: boolean = true; // Estado da checkbox de rastreamento
-
+  isAscendingActive: boolean = false;
+  isDescendingActive: boolean = false;
 
   constructor(private videoService: VideoService, private router: Router) {}
 
-
   async ngOnInit(): Promise<void> {
     this.setUserIdFromToken(localStorage.getItem('token') as string);
     this.checkTrackingStatus(); // Verifica o estado inicial do rastreamento
@@ -45,7 +44,6 @@ export class RecordComponent {
     this.userId = decodedToken.id;
   }
 
-
   addToRecord(videoId: string): void {
     if (this.trackingEnabled) {
         this.videoService.addToRecord(this.userId, videoId).subscribe({
@@ -67,7 +65,6 @@ export class RecordComponent {
     }
   }
 
-
   checkTrackingStatus(): void {
     const storedTrackingStatus = localStorage.getItem('trackingEnabled');
 
@@ -87,12 +84,10 @@ export class RecordComponent {
     this.trackingEnabled = enabled;
     this.saveTrackingStatus(); // Salva o estado atualizado
 
-
     this.videoService.toggleTracking(this.userId, enabled).subscribe({
         next: (response) => {
             console.log(response.message);
 
-
             if (!enabled) {
                 // Se o rastreamento foi desabilitado, limpar os vídeos filtrados e o estado do histórico
                 this.filteredVideos = [];
@@ -108,7 +103,6 @@ export class RecordComponent {
     });
   }
 
-
   checkRecord(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.videoService.checkRecord(this.userId.toString()).subscribe({
@@ -124,7 +118,6 @@ export class RecordComponent {
     });
   }
 
-
   findAll(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.videoService.findAll().subscribe({
@@ -148,76 +141,70 @@ export class RecordComponent {
     videos.forEach((video) => {
       const channel = video?.channels;
 
-
       if (channel)
         if (channel[0].id === this.unbTvChannelId) this.unbTvVideos.push(video);
     });
   }
 
-
   filterVideosByRecord(): void {
     if (this.recordVideos && this.recordVideos.videos && Object.keys(this.recordVideos.videos).length > 0) {
         console.log('Filtering videos with recordVideos:', this.recordVideos);
         const keys = Object.keys(this.recordVideos.videos).map(id => id.toString());
         console.log('Keys from recordVideos:', keys);
         console.log('All Videos:', this.unbTvVideos);
 
-
         this.filteredVideos = this.unbTvVideos.filter(video =>
             video.id !== undefined && keys.includes(video.id.toString()));
 
-
         console.log('Filtered Videos:', this.filteredVideos);
     } else {
         console.log('No recordVideos available or tracking is disabled');
         this.filteredVideos = []; // Se não houver vídeos no histórico ou se o rastreamento estiver desabilitado
     }
   }
 
-
   trackByVideoId(index: number, video: IVideo): string {
     return video.id ? video.id.toString() : index.toString();
   }
 
-
   sortRecord(ascending: boolean): void {
-      console.log('Sorting records, ascending:', ascending);
-      this.videoService.getRecordSorted(this.userId, ascending).subscribe({
-          next: (response) => {
-              console.log('Response from backend:', response.videos);
-
-
-              this.recordVideos = { videos: response.videos };
-
+    console.log('Sorting records, ascending:', ascending);
 
-              // Criação de uma nova lista de vídeos filtrados
-              this.filteredVideos = [];
-              const videoIds = Object.keys(this.recordVideos.videos);
-              console.log('Video IDs from backend:', videoIds);
+    // Atualiza o estado dos botões
+    this.isAscendingActive = ascending;
+    this.isDescendingActive = !ascending;
 
+    this.videoService.getRecordSorted(this.userId, ascending).subscribe({
+        next: (response) => {
+            console.log('Response from backend:', response.videos);
 
-              // Mapeamento de IDs para os vídeos correspondentes
-              videoIds.forEach(id => {
-                  const video = this.unbTvVideos.find(v => v.id?.toString() === id);
-                  if (video) {
-                      this.filteredVideos.push(video);
-                  }
-              });
+            this.recordVideos = { videos: response.videos };
 
+            // Criação de uma nova lista de vídeos filtrados
+            this.filteredVideos = [];
+            const videoIds = Object.keys(this.recordVideos.videos);
+            console.log('Video IDs from backend:', videoIds);
 
-              // Se não estiver em ordem ascendente, reverter a ordem dos vídeos
-              if (!ascending) {
-                  this.filteredVideos.reverse();
-              }
+            // Mapeamento de IDs para os vídeos correspondentes
+            videoIds.forEach((id) => {
+                const video = this.unbTvVideos.find((v) => v.id?.toString() === id);
+                if (video) {
+                    this.filteredVideos.push(video);
+                }
+            });
 
+            // Se não estiver em ordem ascendente, reverter a ordem dos vídeos
+            if (!ascending) {
+                this.filteredVideos.reverse();
+            }
 
-              console.log('Filtered videos after processing:', this.filteredVideos);
-          },
-          error: (err) => {
-              console.error('Error sorting record:', err);
-          }
-      });
-  }
+            console.log('Filtered videos after processing:', this.filteredVideos);
+        },
+        error: (err) => {
+            console.error('Error sorting record:', err);
+        },
+    });
+}
 
   deleteVideo(videoId: string): void {
     this.videoService.removeVideoFromRecord(videoId, this.userId).subscribe({
@@ -230,5 +217,4 @@ export class RecordComponent {
       }
     });
   }
-
-}
+}