feat: add a new page to show my upload

front/src/app/pages/layout/favorite/favorite.component.html

@@ -1,36 +1,12 @@
-<nz-table #basicTable [nzData]="favoriteList" [nzLoading]="loading">
-  <thead>
-    <tr>
-      <th></th>
-      <th>Title</th>
-      <th>Release Date</th>
-      <th>Publisher</th>
-      <th>Game Description</th>
-      <th>Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let data of basicTable.data">
-      <td>{{ data.idx + 1 }}</td>
-      <td>
-        <img
-          style="width: 50px; height: 50px; margin-right: 20px"
-          src="https://img2.baidu.com/it/u=2253673318,3372600971&fm=253&fmt=auto&app=138&f=JPEG?w=528&h=500"
-        />
-        {{ data.Title }}
-      </td>
-      <td>{{ data["Release Date"] }}</td>
-      <td>{{ data.Publisher }}</td>
-      <td>{{ data["Game Description"] }}</td>
-      <td>
-        <span
-          nz-icon
-          nzType="heart"
-          nzTheme="outline"
-          (click)="deleteCollect(data)"
-          style="cursor: pointer"
-        ></span>
-      </td>
-    </tr>
-  </tbody>
-</nz-table>
+<nz-list [nzDataSource]="images" nzBordered>
+  <nz-list-item *ngFor="let image of images; let i = index">
+    <nz-list-item-meta
+      [nzAvatar]="image.url"
+      [nzTitle]="'Upload by ' + username"
+      [nzDescription]="image.uploadTime">
+    </nz-list-item-meta>
+    <button nz-button nzType="primary" [ngStyle]="{ marginRight: '10px' }" (click)="previewImage(image.blobUrl)">Preview</button>
+    <button nz-button nzType="primary" [ngStyle]="{ marginRight: '10px' }" (click)="downloadImage(image.url)">Download</button>
+    <button nz-button nzType="primary" nzDanger (click)="deleteImage(i)">Delete</button>
+  </nz-list-item>
+</nz-list>

front/src/app/pages/layout/favorite/favorite.component.scss

@@ -4,3 +4,8 @@
   display: block;
   margin-bottom: 30px;
 }
+
+.nz-avatar {
+  width: 80px;
+  height: 80px;
+}

front/src/app/pages/layout/favorite/favorite.component.ts

@@ -2,7 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NavigateService } from 'src/app/services/navigate.service';
 import { ApiService } from 'src/app/services/api.service';
-
+import { BlobServiceClient, ContainerClient } from '@azure/storage-blob';
+import { HttpClient } from '@angular/common/http';
+import { lastValueFrom } from 'rxjs';
 @Component({
   selector: 'app-favorite',
   templateUrl: './favorite.component.html',
@@ -11,48 +13,82 @@ import { ApiService } from 'src/app/services/api.service';
 export class FavoriteComponent implements OnInit {
   favoriteList: any = [];
   loading: boolean = true;
+  username: any;
+  images: { url: any, type: any, uploadTime:any, blobUrl:any }[] = [];
+  // Azure Storage SAS URL
+  sasUrl = 'https://medias.blob.core.windows.net/assets?si=asset&sv=2022-11-02&sr=c&sig=OA8DpIpkl1ak4ZG%2BA7BzMtIRbI6carOTxLtzAcHa9pg%3D';
+  sasToken = 'si=asset&sv=2022-11-02&sr=c&sig=OA8DpIpkl1ak4ZG%2BA7BzMtIRbI6carOTxLtzAcHa9pg%3D'
   constructor(
     private apiService: ApiService,
     private $message: NzMessageService,
-    private navigateService: NavigateService
+    private navigateService: NavigateService,
+    private http: HttpClient
+
   ) {}
 
   ngOnInit() {
-    this.getFavoriteList();
+    this.username = localStorage.getItem('username') as any;
+    this.loadImagesFromAzure();
+
   }
-  deleteCollect(data: any) {
-    let params = {
-      username: localStorage.getItem('username'),
-      gameId: data._id,
-    };
-    this.apiService.post('/games/cancelCollectGame', params).subscribe(
-      (res: any) => {
-        this.getFavoriteList();
-        this.$message.success('已取消收藏');
-      },
-      () => {}
-    );
+  
+  private extractSasToken(): string {
+    // Extract the SAS token from your sasUrl
+    const sasToken = this.sasUrl.split('?')[1];
+    return sasToken ? `?${sasToken}` : '';
   }
-  getFavoriteList() {
-    this.apiService
-      .post('/game/getCollectList', { username: localStorage.getItem('username') })
-      .subscribe(
-        (res: any) => {
-          console.log(res);
-          const { code, data } = res;
-          if (code == 200) {
-            this.loading = false;
-            this.favoriteList = data;
-            this.favoriteList.forEach((item: any, index: number) => {
-              item.idx = index;
-            });
-          } else {
-            this.favoriteList = [];
-          }
-        },
-        () => {
-          this.loading = false;
+
+  previewImage(url: string) {
+    window.open(url,'_blank');
+  }
+  
+  downloadImage(url: string) {
+    window.location.href = url;
+  }
+
+  async deleteImage(index: number) {
+    const image = this.images[index];
+    // TODO: Delete the image from Azure
+    // After the image is successfully deleted from Azure, remove it from the images array
+    this.images.splice(index, 1);
+  }
+  async loadImagesFromAzure() {
+    const containerUrl = 'https://medias.blob.core.windows.net/assets';
+    const query = '?restype=container&comp=list'; // SAS token
+    const fullUrl = `${containerUrl}${query}`;
+  
+    try {
+      const response = await lastValueFrom(this.http.get(fullUrl, { responseType: 'text' }));
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(response, 'text/xml');
+      const blobs = xmlDoc.getElementsByTagName('Blob');
+  
+      this.images = [];
+      for (let i = 0; i < blobs.length; i++) {
+        const blob = blobs[i];
+        console.log("###########")
+        const name = blob.getElementsByTagName('Name')[0].textContent || '';
+        const title = JSON.parse(localStorage.getItem('gameInfo') as any).Title;
+        const lastModified = blob.getElementsByTagName('Last-Modified')[0].textContent || '';
+
+        console.log(name);
+        console.log(title);
+        if (!name || name.includes(this.username)) {
+          // const blobUrl = `${containerUrl}/${name}${this.extractSasToken()}}`;
+        const url = blob.getElementsByTagName('Url')[0].textContent || '';
+        const blobUrl = `${containerUrl}/${name}${this.extractSasToken()}`;
+          // Assuming you want to display images
+          this.images.push({ 
+            url: url, 
+            type: 'image/jpeg',
+            uploadTime: lastModified ,
+            blobUrl: blobUrl
+          }); // Modify 'type' as needed
         }
-      );
+      }
+    } catch (error) {
+      console.error('Error fetching blobs:', error);
+    }
   }
+  
 }

front/src/app/pages/layout/game-details/game-details.component.ts

@@ -127,14 +127,27 @@ export class GameDetailsComponent implements OnInit {
       this.images = [];
       for (let i = 0; i < blobs.length; i++) {
         const blob = blobs[i];
-        console.log("###########")
         const name = blob.getElementsByTagName('Name')[0].textContent || '';
         const title = JSON.parse(localStorage.getItem('gameInfo') as any).Title;
-        console.log(name);
-        console.log(title);
         if (!name || name.includes(title)) {
           const blobUrl = `${containerUrl}/${name}${this.extractSasToken()}`;
-          // Assuming you want to display images
+          const extension = name.split('.').pop();
+          let type = '';
+          switch (extension) {
+            case 'jpg':
+            case 'jpeg':
+              type = 'image/jpeg';
+              break;
+            case 'png':
+              type = 'image/png';
+              break;
+            case 'gif':
+              type = 'image/gif';
+              break;
+            // Add more cases as needed
+            default:
+              type = 'application/octet-stream'; // Default to binary data
+          }
           this.images.push({ url: blobUrl, type: 'image/jpeg' }); // Modify 'type' as needed
         }
       }

front/src/app/pages/layout/layout.component.html

@@ -7,7 +7,7 @@
           <a routerLink="/layout/list">Game Toplist</a>
         </li>
         <li nz-menu-item nzMatchRouter>
-          <a routerLink="/layout/favorite">Favorite</a>
+          <a routerLink="/layout/favorite">My Upload</a>
         </li>
       </ul>
       <span class="right-top-tool"