feat(maimai2): festa page show all circle rank

Author: MikiraSora

src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.css

@@ -111,6 +111,11 @@
   overflow: hidden;
 }
 
+.form-check-input {
+  width: 0.9em;
+  height: 0.9em;
+}
+
 .festa-progress-segment {
   display: flex;
   align-items: center;

src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.html

@@ -156,7 +156,7 @@ <h6>队伍排名</h6>
                   {{ userFestaInfo?.userFestaData?.placeId }}
                 </p>
                 <p>
-                  <strong>所属队伍与队内排名:</strong>
+                  <strong>所属队伍与同队排名:</strong>
                   <span
                     [style.color]="
                       getFestaSideColor(userFestaInfo.userFestaData.festaSideId)
@@ -205,7 +205,26 @@ <h6>队伍排名</h6>
         <div class="row mt-4">
           <div class="col-md-6">
             <div class="card" *ngIf="sameSideCircleRankInfoList?.length > 0">
-              <div class="card-header"><span>同队排行</span></div>
+              <div
+                class="card-header d-flex align-items-center justify-content-between"
+              >
+                <span>同队排行榜</span>
+                <div class="form-check align-items-center d-flex">
+                  <input
+                    class="form-check-input me-1"
+                    type="checkbox"
+                    [(ngModel)]="isShowSameSideWithoutPlaceIdFilter"
+                    (change)="refreshSameSideCircleRankInfo()"
+                    id="checkDefault"
+                  />
+                  <label
+                    class="form-check-label small mb-0 mt-0"
+                    for="checkDefault"
+                  >
+                    全服
+                  </label>
+                </div>
+              </div>
               <div class="card-body">
                 <div
                   *ngFor="let item of sameSideCircleRankInfoList"
@@ -226,7 +245,12 @@ <h6>队伍排名</h6>
                       getFestaSideColor(item.circleFestaData.festaSideId)
                     "
                   >
-                    {{ item.circleFestaData.circleName }}
+                    {{
+                      formatCircleIfShowPlaceId(
+                        item.circleFestaData,
+                        isShowSameSideWithoutPlaceIdFilter
+                      )
+                    }}
                   </span>
                   <span
                     class="score"
@@ -244,7 +268,26 @@ <h6>队伍排名</h6>
           </div>
           <div class="col-md-6">
             <div class="card" *ngIf="allSideCircleRankInfoList?.length > 0">
-              <div class="card-header"><span>总排行</span></div>
+              <div
+                class="card-header d-flex align-items-center justify-content-between"
+              >
+                <span>总排行榜</span>
+                <div class="form-check align-items-center d-flex">
+                  <input
+                    class="form-check-input me-1"
+                    type="checkbox"
+                    [(ngModel)]="isShowAllSideWithoutPlaceIdFilter"
+                    (change)="refreshAllSideCircleRankInfo()"
+                    id="checkDefault2"
+                  />
+                  <label
+                    class="form-check-label small mb-0 mt-0"
+                    for="checkDefault2"
+                  >
+                    全服
+                  </label>
+                </div>
+              </div>
               <div class="card-body">
                 <div
                   *ngFor="let item of allSideCircleRankInfoList"
@@ -265,7 +308,12 @@ <h6>队伍排名</h6>
                       getFestaSideColor(item.circleFestaData.festaSideId)
                     "
                   >
-                    {{ item.circleFestaData.circleName }}
+                    {{
+                      formatCircleIfShowPlaceId(
+                        item.circleFestaData,
+                        isShowAllSideWithoutPlaceIdFilter
+                      )
+                    }}
                   </span>
                   <span
                     class="score"

src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.ts

@@ -23,6 +23,7 @@ import { Maimai2UserFestaInfo } from '../model/Maimai2UserFestaInfo';
 import { Maimai2GameFesta } from '../model/Maimai2GameFesta';
 import { Maimai2UserFestaData } from '../model/Maimai2UserFestaData';
 import { Maimai2CircleFestaRankInfo } from '../model/Maimai2CircleFestaRankInfo';
+import { Maimai2CircleFestaData } from '../model/Maimai2CircleFestaData';
 
 @Component({
   selector: 'app-maimai2-festa',
@@ -50,7 +51,10 @@ export class Maimai2FestaComponent implements OnInit {
   userCircleInfo: Maimai2UserCircleInfo = null;
 
   sameSideCircleRankInfoList: Maimai2CircleFestaRankInfo[] = null;
+  isShowSameSideWithoutPlaceIdFilter = false;
+
   allSideCircleRankInfoList: Maimai2CircleFestaRankInfo[] = null;
+  isShowAllSideWithoutPlaceIdFilter = false;
 
   ngOnInit() {
     this.aimeId = String(this.userService.currentUser.defaultCard.extId);
@@ -83,7 +87,7 @@ export class Maimai2FestaComponent implements OnInit {
       .set('aimeId', this.aimeId)
       .set('openEventId', userFestaData.eventId)
       .set('filterFestaSideId', userFestaData.festaSideId)
-      .set('placeId', userFestaData.placeId)
+      .set('placeId', this.isShowSameSideWithoutPlaceIdFilter ? -1 : userFestaData.placeId)
       .set('page', 0)
       .set('size', 10);
 
@@ -106,7 +110,7 @@ export class Maimai2FestaComponent implements OnInit {
       .set('aimeId', this.aimeId)
       .set('openEventId', userFestaData.eventId)
       .set('filterFestaSideId', -1)
-      .set('placeId', userFestaData.placeId)
+      .set('placeId', this.isShowAllSideWithoutPlaceIdFilter ? -1 : userFestaData.placeId)
       .set('page', 0)
       .set('size', 10);
 
@@ -263,13 +267,36 @@ export class Maimai2FestaComponent implements OnInit {
       case 2: { postfix = "nd"; break; };
       case 3: { postfix = "rd"; break; };
     }
-    
+
     return rank.toString() + postfix;
   }
 
   getVotedFestaSideId() {
     return this.userFestaInfo?.userFestaData?.festaSideId ?? 0;
   }
 
+  refreshAllSideCircleRankInfo() {
+    if (this.userFestaInfo.userFestaData) {
+      this.loadAllSideCircleRankInfo(this.userFestaInfo.userFestaData);
+    }
+  }
+
+  refreshSameSideCircleRankInfo() {
+    if (this.userFestaInfo.userFestaData) {
+      this.loadSameSideCircleRankInfo(this.userFestaInfo.userFestaData);
+    }
+  }
+
+  formatCircleIfShowPlaceId(circleFestaData: Maimai2CircleFestaData, isShowPlaceId: boolean) {
+    if (!isShowPlaceId)
+      return circleFestaData.circleName;
+
+    var formatPostfix = ` #${circleFestaData.placeId}`;
+    var result = circleFestaData.circleName;
+    if (!circleFestaData.circleName.endsWith(formatPostfix))
+      result += formatPostfix;
+    return result;
+  }
+
   protected readonly length = length;
 }