fixed deleting images

CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.html

@@ -99,10 +99,14 @@
                 [ngClass]="{'selected-contest': flag.FlagID === selectedFlag?.FlagID}">
                     {{ flag.Name }} ({{flag.Image}})
                 </li>
-                <li *ngFor="let image of allImages" (click)="selectFlagImage(image)"
-                [ngClass]="{'selected-contest': image.Name === selectedFlagImage?.Name}">
-                  <span style="color:red">NONE: </span> ({{image.Name}})
-                </li>
+                <li *ngIf="!selectedContestId; else loopI"></li>
+                <ng-template #loopI>
+                  <li *ngFor="let image of allImages" (click)="selectFlagImage(image)"
+                  [ngClass]="{'selected-contest': image.Name === selectedFlagImage?.Name}">
+                    <span style="color:red">NONE: </span> ({{image.Name}})
+                  </li>
+                </ng-template>
+                
             </ul>
           </div>
       </div>
@@ -137,7 +141,16 @@
     <!-- Dialog box for deleting flag or image -->
     <dialog id="DialogBox" [open]="isDialogVisible">
         <h3> Which would you want to Delete: </h3>
-        <p id="FlagImage">{{ selectedFlag?.Image }}</p>
+        <p id="FlagImage">
+          <span style="font-weight: bold">Flag: </span>
+
+          <!-- whether its a flag or an image, insert NONE -->
+          <span *ngIf="selectedFlag?.Name; else noName">{{ selectedFlag?.Name }}</span>
+          <ng-template #noName><span style="color:red; font-weight:bold">NONE</span></ng-template>
+          <br>
+          <span style="font-weight: bold">Image: </span> {{ selectedFlag?.Image || selectedFlagImage?.Name }}
+          
+        </p>
         <input type="button" value="Delete Flag" (click)="DeleteFlag()">
         <input type="button" value="Delete Image" (click)="DeleteImage()">
         <input type="button" value="Cancel" (click)="closeDialogBox()">

CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.ts

@@ -36,7 +36,6 @@ export class ModifyContestComponent {
     this.renderer.addClass(document.documentElement, 'modify');
 
     this.loadContests();
-    this.getImages();
 
     window.addEventListener("message", this.handlePopupMessage.bind(this));
   }
@@ -76,6 +75,15 @@ handlePopupMessage(event: MessageEvent): void {
     try{
       const imageData = await this.modifyContestService.getImages(email);
       this.allImages = imageData || [];
+
+      // get all of the images that are not linked to a flag
+      let images : Image[] = [];
+      for (let i=0; i < this.flagsForContest.length; i++) {
+        if (this.flagsForContest[i].Image === this.allImages[i].Name) {
+          images.push(this.allImages[i]); // images that are connected to a flag
+        }
+      }
+      this.allImages = this.allImages.filter(item => !images.includes(item)); // change allImages to just have the ones that are not in images
     }catch(error){
       console.error('Error loading images');
     }
@@ -136,6 +144,7 @@ handlePopupMessage(event: MessageEvent): void {
     this.modifyContestService.loadFlagsForContest(contestId)
       .then((flags) => {
         this.flagsForContest = flags;
+        this.getImages();
       }).catch((err) => {
         console.error('Failed to load flags:', err);
       })
@@ -162,7 +171,7 @@ handlePopupMessage(event: MessageEvent): void {
   }
 
   showDialogBox(): void{
-    if(!this.selectedFlag || this.selectedFlag.Name === null){
+    if((!this.selectedFlag || this.selectedFlag.Name === null) && (!this.selectedFlagImage || this.selectedFlagImage.Name === null)){
       alert('You must select a flag first');
       return;
     }
@@ -176,7 +185,7 @@ handlePopupMessage(event: MessageEvent): void {
 
   async DeleteFlag(): Promise<void>{
     if(!this.selectedFlag){
-      console.log("No flag selected");
+      console.log("No flag or image selected");
       alert("Please select a flag to delete.");
       return;
     }
@@ -189,10 +198,29 @@ handlePopupMessage(event: MessageEvent): void {
     console.log("Deleted Flag");
     this.isDialogVisible = false;
     this.selectedFlag = null;
+    this.selectedFlagImage = null;
   }
 
-  DeleteImage(): void{
-    this.closeDialogBox();
+  async DeleteImage(): Promise<void> {
+    let imagename : string | undefined = "";
+
+    // whether flag image or just image in general
+    if (this.selectedFlag?.Image) imagename = this.selectedFlag?.Image;
+    else imagename = this.selectedFlagImage?.Name;
+
+    try {
+      await this.modifyContestService.deleteImage(imagename); // delete the image
+      this.allImages = await this.modifyContestService.getImages(this.getEmail());
+    }
+    catch(err) {
+      console.error("Filed deleting image");
+    }
+    console.log("Deleted Image");
+
+    // reset everything 
+    this.isDialogVisible = false;
+    this.selectedFlag = null;
+    this.selectedFlagImage = null;
   }
 
   async TestImage(): Promise<void>{

CTF/CTF-Frontend/src/app/modify-contest/modify-contest.service.ts

@@ -193,7 +193,7 @@ export class ModifyContestService {
     }
   }
 
-  async deleteImage(imageName: string): Promise<any> {
+  async deleteImage(imageName: string | undefined): Promise<any> {
     try {
       const response = await fetch('api/DeleteImageReplaceFlags', {
         method: 'POST',