Added reverse order button (responsive).

README.md

@@ -8,7 +8,7 @@
 [![GitHub commit activity](https://img.shields.io/github/commit-activity/y/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![GitHub last commit](https://img.shields.io/github/last-commit/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![CircleCI](https://circleci.com/gh/softwaremagico/KendoTournamentManager.svg?style=shield)](https://circleci.com/gh/softwaremagico/KendoTournamentManager)
-[![Time](https://img.shields.io/badge/development-651h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-651.5h-blueviolet.svg)]()
 
 [![Powered by](https://img.shields.io/badge/powered%20by%20java-orange.svg?logo=OpenJDK&logoColor=white)]()
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=kendo-tournament-backend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=kendo-tournament-backend)

frontend/src/app/app.component.scss

@@ -110,11 +110,19 @@ a {
   padding-left: 5px;
 }
 
+.pop-up-panel {
+
+  @media screen and (max-width: 660px) {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
 @media screen and (min-width: 960px) {
   .side-menu {
     display: none !important;
   }
-  .button-menu{
+  .button-menu {
     display: none !important;
   }
 }

frontend/src/app/components/team-ranking/team-ranking.component.ts

@@ -140,6 +140,7 @@ export class TeamRankingComponent extends RbacBasedComponent implements OnInit {
   undrawTeams(index: number): void {
     const teams: Team[] = this.getDrawWinners(index);
     this.dialog.open(UndrawTeamsComponent, {
+      panelClass: 'pop-up-panel',
       disableClose: false,
       data: {tournament: this.tournament, groupId: this.group.id, teams: teams}
     });

frontend/src/app/views/authenticated-user-list/authenticated-user-list.component.ts

@@ -79,6 +79,7 @@ export class AuthenticatedUserListComponent extends RbacBasedComponent implement
 
   openDialog(title: string, action: Action, authenticatedUser: AuthenticatedUser): void {
     const dialogRef = this.dialog.open(AuthenticatedUserDialogBoxComponent, {
+      panelClass: 'pop-up-panel',
       width: '400px',
       data: {title: title, action: action, entity: authenticatedUser}
     });

frontend/src/app/views/club-list/club-list.component.ts

@@ -78,6 +78,7 @@ export class ClubListComponent extends RbacBasedComponent implements OnInit {
 
   openDialog(title: string, action: Action, club: Club): void {
     const dialogRef = this.dialog.open(ClubDialogBoxComponent, {
+      panelClass: 'pop-up-panel',
       width: '400px',
       data: {title: title, action: action, entity: club}
     });

frontend/src/app/views/fight-list/fight-list.component.ts

@@ -389,6 +389,7 @@ export class FightListComponent extends RbacBasedComponent implements OnInit, On
       || this.tournament.type === TournamentType.SENBATSU) {
       dialogRef = this.dialog.open(LeagueGeneratorComponent, {
         width: '85vw',
+        panelClass: 'pop-up-panel',
         data: {title: 'Create Fights', action: Action.Add, tournament: this.tournament}
       });
     } else if (this.tournament.type === TournamentType.CHAMPIONSHIP) {
@@ -489,6 +490,7 @@ export class FightListComponent extends RbacBasedComponent implements OnInit, On
     let dialogRef;
     if (this.tournament.type == TournamentType.SENBATSU) {
       dialogRef = this.dialog.open(SenbatsuFightDialogBoxComponent, {
+        panelClass: 'pop-up-panel',
         width: '90vw',
         height: height,
         maxWidth: '1000px',
@@ -506,6 +508,7 @@ export class FightListComponent extends RbacBasedComponent implements OnInit, On
       });
     } else {
       dialogRef = this.dialog.open(FightDialogBoxComponent, {
+        panelClass: 'pop-up-panel',
         width: '90vw',
         height: height,
         maxWidth: '1000px',
@@ -599,6 +602,7 @@ export class FightListComponent extends RbacBasedComponent implements OnInit, On
   showTeamsClassification(fightsFinished: boolean): void {
     if (this.groups.length > 0 && this.getFights().length > 0) {
       const dialogRef: MatDialogRef<TeamRankingComponent> = this.dialog.open(TeamRankingComponent, {
+        panelClass: 'pop-up-panel',
         width: '85vw',
         data: {tournament: this.tournament, group: this.selectedGroup, finished: fightsFinished}
       });
@@ -611,6 +615,7 @@ export class FightListComponent extends RbacBasedComponent implements OnInit, On
 
   showCompetitorsClassification(): void {
     this.dialog.open(CompetitorsRankingComponent, {
+      panelClass: 'pop-up-panel',
       width: '85vw',
       data: {tournament: this.tournament}
     });

frontend/src/app/views/fight-list/league-generator/league-generator.component.html

@@ -53,14 +53,24 @@ <h2>{{ 'teamsOrder' | translate }}</h2>
     <mat-icon>auto_fix_high</mat-icon>
     {{ 'wizard' | translate }}
   </button>
+  <button
+    class="reverse-button"
+    (click)="reverseTeams()"
+    *ngIf="(RbacActivity.CREATE_FIGHT | rbac : this.rbacService.getActivities())"
+    matTooltip="{{'reverseOrderHint' | translate}}"
+    mat-flat-button
+    mat-raised-button>
+    <mat-icon>loop</mat-icon>
+    {{ 'reverseOrder' | translate }}
+  </button>
   <button (click)="sortedTeams()" *ngIf="(RbacActivity.CREATE_FIGHT | rbac : this.rbacService.getActivities())"
-          class="fight-button" mat-flat-button
+          class="sorted-button" mat-flat-button
           mat-raised-button>
     <mat-icon class="kendo-icon" svgIcon="sorted"></mat-icon>
     {{ 'sorted' | translate }}
   </button>
   <button (click)="randomTeams()" *ngIf="(RbacActivity.CREATE_FIGHT | rbac : this.rbacService.getActivities())"
-          class="fight-button" mat-flat-button
+          class="random-button" mat-flat-button
           mat-raised-button>
     <mat-icon>casino</mat-icon>
     {{ 'random' | translate }}

frontend/src/app/views/fight-list/league-generator/league-generator.component.scss

@@ -26,6 +26,11 @@
  // padding-bottom: 20px;
 }
 
+.header {
+  display: inline-flex;
+  height: 40px;
+}
+
 .final-team-list{
   border-color: #c3d1e1;
   border-radius: 15px;
@@ -53,3 +58,21 @@
   margin: 20px;
   padding-bottom: 0;
 }
+
+@media screen and (max-width: 1250px) {
+  .reverse-button {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1050px) {
+  .sorted-button {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .random-button {
+    display: none !important;
+  }
+}

frontend/src/app/views/fight-list/league-generator/league-generator.component.ts

@@ -221,12 +221,16 @@ export class LeagueGeneratorComponent extends RbacBasedComponent implements OnIn
       this.teamsOrder.push(...sortedTeams.values());
       this.teamListData.teams = [];
       this.teamListData.filteredTeams = [];
-      if (this.tournament.type == TournamentType.LOOP || this.tournament.type == TournamentType.BUBBLE_SORT || this.tournament.type == TournamentType.SENBATSU) {
+      if (this.tournament.type == TournamentType.SENBATSU) {
         this.teamsOrder = this.teamsOrder.reverse();
       }
     });
   }
 
+  reverseTeams(): void {
+    this.teamsOrder = this.teamsOrder.reverse();
+  }
+
 
   getDrawResolutionTranslationTag(drawResolution: DrawResolution): string {
     if (!drawResolution) {

frontend/src/app/views/participant-list/participant-dialog-box/participant-dialog-box.component.ts

@@ -114,6 +114,7 @@ export class ParticipantDialogBoxComponent extends RbacBasedComponent implements
 
   openDialog(title: string, action: Action, participant: Participant): void {
     const dialogRef = this.dialog.open(ParticipantPictureDialogBoxComponent, {
+      panelClass: 'pop-up-panel',
       width: '700px',
       data: {
         title: title, action: action, participant: participant

frontend/src/app/views/participant-list/participant-list.component.ts

@@ -90,6 +90,7 @@ export class ParticipantListComponent extends RbacBasedComponent implements OnIn
 
   openDialog(title: string, action: Action, participant: Participant): void {
     const dialogRef = this.dialog.open(ParticipantDialogBoxComponent, {
+      panelClass: 'pop-up-panel',
       width: '700px',
       data: {
         title: title, action: action, entity: participant,
@@ -159,6 +160,7 @@ export class ParticipantListComponent extends RbacBasedComponent implements OnIn
 
   showCompetitorsClassification(): void {
     this.dialog.open(CompetitorsRankingComponent, {
+      panelClass: 'pop-up-panel',
       width: '85vw',
       data: {competitor: this.basicTableData.selectedElement, showIndex: true}
     });
@@ -167,6 +169,7 @@ export class ParticipantListComponent extends RbacBasedComponent implements OnIn
   showQrCode(): void {
     if (this.basicTableData.selectedElement) {
       const dialogRef: MatDialogRef<ParticipantQrCodeComponent> = this.dialog.open(ParticipantQrCodeComponent, {
+        panelClass: 'pop-up-panel',
         data: {
           participantId: this.basicTableData.selectedElement?.id,
           port: window.location.port

frontend/src/app/views/tournament-list/tournament-dialog-box/tournament-dialog-box.component.ts

@@ -119,6 +119,7 @@ export class TournamentDialogBoxComponent extends RbacBasedComponent {
 
   addPicture(): void {
     const dialogRef = this.dialog.open(TournamentImageSelectorComponent, {
+      panelClass: 'pop-up-panel',
       data: {
         title: "", action: Action.Add, tournament: this.tournament
       }

frontend/src/app/views/tournament-list/tournament-list.component.ts

@@ -160,6 +160,7 @@ export class TournamentListComponent extends RbacBasedComponent implements OnIni
   addRoles(): void {
     if (this.basicTableData.selectedElement) {
       this.dialog.open(TournamentRolesComponent, {
+        panelClass: 'pop-up-panel',
         data: {
           tournament: this.basicTableData.selectedElement
         }
@@ -170,6 +171,7 @@ export class TournamentListComponent extends RbacBasedComponent implements OnIni
   addTeams(): void {
     if (this.basicTableData.selectedElement) {
       this.dialog.open(TournamentTeamsComponent, {
+        panelClass: 'pop-up-panel',
         data: {
           tournament: this.basicTableData.selectedElement
         }
@@ -328,6 +330,7 @@ export class TournamentListComponent extends RbacBasedComponent implements OnIni
   showQrCode(): void {
     if (this.basicTableData.selectedElement) {
       const dialogRef: MatDialogRef<TournamentQrCodeComponent> = this.dialog.open(TournamentQrCodeComponent, {
+        panelClass: 'pop-up-panel',
         data: {
           tournament: this.basicTableData.selectedElement,
           port: window.location.port

frontend/src/assets/i18n/ca.json

@@ -730,5 +730,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "Els competidors es classifiquen segons la capacitat. La idea és 'pujar l'escala' derrotant la persona que està damunt teu i ocupant el seu lloc a l'escala. Començant des de baix, un competidor pot desafiar una altra persona, generalment dos o tres esglaons per sobre d'ell. Si guanya, agafa el seu lloc i l'adversari queda eliminat. Si perd queda eliminat.",
   "senbatsuRungLength": "Distància entre desafiaments",
-  "senbatsuRungLengthHint": "La disparitat màxima permesa a la capacitat entre dos competidors per tal d'establir un desafiament."
+  "senbatsuRungLengthHint": "La disparitat màxima permesa a la capacitat entre dos competidors per tal d'establir un desafiament.",
+  "reverseOrder": "Invertir",
+  "reverseOrderHint": "Invertir l'ordre dels equips."
 }

frontend/src/assets/i18n/de.json

@@ -708,5 +708,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "Die Teilnehmer werden nach ihrem Können eingestuft. Die Idee besteht darin, „die Leiter zu erklimmen“, indem man die Person über einem besiegt und ihren Platz auf der Leiter einnimmt. Von unten beginnend kann ein Teilnehmer eine andere Person herausfordern, normalerweise zwei oder drei „Sprossen“ über ihm. Wenn er gewinnt, nimmt er seinen Platz ein und der Gegner scheidet aus. Wenn Sie verlieren, werden Sie eliminiert.",
   "senbatsuRungLength": "Distanz zwischen Desafíos",
-  "senbatsuRungLengthHint": "Der maximal zulässige Leistungsunterschied zwischen zwei Teilnehmern zum Zwecke der Festlegung einer Herausforderung."
+  "senbatsuRungLengthHint": "Der maximal zulässige Leistungsunterschied zwischen zwei Teilnehmern zum Zwecke der Festlegung einer Herausforderung.",
+  "reverseOrder": "Reverse",
+  "reverseOrderHint": "Kehren Sie die Reihenfolge der Teams um."
 }

frontend/src/assets/i18n/en.json

@@ -725,5 +725,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "Competitors are sorted on ability. The idea is to 'climb the ladder' by defeating the person above you and taking their place on the ladder. Starting from the bottom, a competitor can challenge someone else, usually two or three 'rungs' above him. If wins takes its position and the adversary is eliminated. If loses he is eliminated.",
   "senbatsuRungLength": "Challenge distance",
-  "senbatsuRungLengthHint": "The maximum allowable disparity in ability between two competitors for the purpose of establishing a challenge."
+  "senbatsuRungLengthHint": "The maximum allowable disparity in ability between two competitors for the purpose of establishing a challenge.",
+  "reverseOrder": "Reverse",
+  "reverseOrderHint": "Reverse teams' order"
 }

frontend/src/assets/i18n/es.json

@@ -726,5 +726,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "Los competidores se clasifican según su capacidad. La idea es 'subir la escalera' derrotando a la persona que está encima de ti y ocupando su lugar en la escalera. Comenzando desde abajo, un competidor puede desafiar a otra persona, generalmente dos o tres 'peldaños' por encima de él. Si gana toma su puesto y el adversario queda eliminado. Si pierde queda eliminado.",
   "senbatsuRungLength": "Distancia entre desafíos",
-  "senbatsuRungLengthHint": "La disparidad máxima permitida en la capacidad entre dos competidores con el fin de establecer un desafío."
+  "senbatsuRungLengthHint": "La disparidad máxima permitida en la capacidad entre dos competidores con el fin de establecer un desafío.",
+  "reverseOrder": "Invertir",
+  "reverseOrderHint": "Invertir el orden de los equipos."
 }

frontend/src/assets/i18n/it.json

@@ -714,5 +714,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "I concorrenti vengono classificati in base alla loro abilità. L'idea è quella di \"salire la scala\" sconfiggendo la persona sopra di te e prendendo il suo posto sulla scala. Partendo dal basso, un concorrente può sfidare un'altra persona, solitamente due o tre \"pioli\" sopra di lui. Se vince, prende il suo posto e l'avversario viene eliminato. Se perdi sei eliminato.",
   "senbatsuRungLength": "Distanza tra i desafíos",
-  "senbatsuRungLengthHint": "La massima disparità consentita nell'abilità tra due concorrenti allo scopo di stabilire una sfida."
+  "senbatsuRungLengthHint": "La massima disparità consentita nell'abilità tra due concorrenti allo scopo di stabilire una sfida.",
+  "reverseOrder": "Invertire",
+  "reverseOrderHint": "Invertire l'ordine delle squadre."
 }

frontend/src/assets/i18n/nl.json

@@ -708,5 +708,7 @@
   "senbatsu": "Senbatsu",
   "senbatsuHint": "De deelnemers worden gerangschikt op basis van hun vaardigheden. Het idee is om 'de ladder te beklimmen' door de persoon boven je te verslaan en diens plaats op de ladder in te nemen. Beginnend vanaf de onderkant mag een deelnemer een andere persoon uitdagen, meestal twee of drie 'sporten' boven hem. Als hij wint, neemt hij zijn plaats in en wordt de tegenstander uitgeschakeld. Als je verliest, word je geëlimineerd.",
   "senbatsuRungLength": "Afstand tussen de veilige afstanden",
-  "senbatsuRungLengthHint": "Het maximaal toegestane verschil in bekwaamheid tussen twee concurrenten met als doel een uitdaging aan te gaan."
+  "senbatsuRungLengthHint": "Het maximaal toegestane verschil in bekwaamheid tussen twee concurrenten met als doel een uitdaging aan te gaan.",
+  "reverseOrder": "Reverse",
+  "reverseOrderHint": "Draai de volgorde van de teams om."
 }