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

@@ -99,14 +99,10 @@
                 [ngClass]="{'selected-contest': flag.FlagID === selectedFlag?.FlagID}">
                     {{ flag.Name }} ({{flag.Image}})
                 </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>
-                
+                <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>
             </ul>
           </div>
       </div>
@@ -141,16 +137,7 @@
     <!-- Dialog box for deleting flag or image -->
     <dialog id="DialogBox" [open]="isDialogVisible">
         <h3> Which would you want to Delete: </h3>
-        <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>
+        <p id="FlagImage">{{ selectedFlag?.Image }}</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,6 +36,7 @@ export class ModifyContestComponent {
     this.renderer.addClass(document.documentElement, 'modify');
 
     this.loadContests();
+    this.getImages();
 
     window.addEventListener("message", this.handlePopupMessage.bind(this));
   }
@@ -75,15 +76,6 @@ 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');
     }
@@ -144,7 +136,6 @@ handlePopupMessage(event: MessageEvent): void {
     this.modifyContestService.loadFlagsForContest(contestId)
       .then((flags) => {
         this.flagsForContest = flags;
-        this.getImages();
       }).catch((err) => {
         console.error('Failed to load flags:', err);
       })
@@ -171,7 +162,7 @@ handlePopupMessage(event: MessageEvent): void {
   }
 
   showDialogBox(): void{
-    if((!this.selectedFlag || this.selectedFlag.Name === null) && (!this.selectedFlagImage || this.selectedFlagImage.Name === null)){
+    if(!this.selectedFlag || this.selectedFlag.Name === null){
       alert('You must select a flag first');
       return;
     }
@@ -185,7 +176,7 @@ handlePopupMessage(event: MessageEvent): void {
 
   async DeleteFlag(): Promise<void>{
     if(!this.selectedFlag){
-      console.log("No flag or image selected");
+      console.log("No flag selected");
       alert("Please select a flag to delete.");
       return;
     }
@@ -198,29 +189,10 @@ handlePopupMessage(event: MessageEvent): void {
     console.log("Deleted Flag");
     this.isDialogVisible = false;
     this.selectedFlag = null;
-    this.selectedFlagImage = null;
   }
 
-  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;
+  DeleteImage(): void{
+    this.closeDialogBox();
   }
 
   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 | undefined): Promise<any> {
+  async deleteImage(imageName: string): Promise<any> {
     try {
       const response = await fetch('api/DeleteImageReplaceFlags', {
         method: 'POST',