diff --git a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.html b/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.html index 6e77e7f..d9b923b 100644 --- a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.html +++ b/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}}) -
  • - NONE: ({{image.Name}}) -
  • +
  • + +
  • + NONE: ({{image.Name}}) +
  • +
    + @@ -137,7 +141,16 @@

    Which would you want to Delete:

    -

    {{ selectedFlag?.Image }}

    +

    + Flag: + + + {{ selectedFlag?.Name }} + NONE +
    + Image: {{ selectedFlag?.Image || selectedFlagImage?.Name }} + +

    diff --git a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.ts b/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.ts index b5755cb..a7310a2 100644 --- a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.component.ts +++ b/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{ 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 { + 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{ diff --git a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.service.ts b/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.service.ts index f8c955b..1e27248 100644 --- a/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.service.ts +++ b/CTF/CTF-Frontend/src/app/modify-contest/modify-contest.service.ts @@ -193,7 +193,7 @@ export class ModifyContestService { } } - async deleteImage(imageName: string): Promise { + async deleteImage(imageName: string | undefined): Promise { try { const response = await fetch('api/DeleteImageReplaceFlags', { method: 'POST',