2024/10/24

angular.json

@@ -29,6 +29,11 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
+              },
+              {
+                "glob": "**/*.json",
+                "input": "src/data",
+                "output": "data"
               }
             ],
             "styles": [
@@ -116,6 +121,11 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
+              },
+              {
+                "glob": "**/*.json",
+                "input": "src/data",
+                "output": "data"
               }
             ],
             "styles": [
@@ -150,7 +160,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

package.json

@@ -13,56 +13,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.2",
-    "@angular/common": "^18.2.2",
-    "@angular/compiler": "^18.2.2",
-    "@angular/core": "^18.2.2",
-    "@angular/forms": "^18.2.2",
-    "@angular/platform-browser": "^18.2.2",
-    "@angular/platform-browser-dynamic": "^18.2.2",
-    "@angular/router": "^18.2.2",
-    "@aws-amplify/ui-angular": "^5.0.19",
+    "@angular/animations": "^18.2.8",
+    "@angular/common": "^18.2.8",
+    "@angular/compiler": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "@angular/forms": "^18.2.8",
+    "@angular/platform-browser": "^18.2.8",
+    "@angular/platform-browser-dynamic": "^18.2.8",
+    "@angular/router": "^18.2.8",
+    "@aws-amplify/ui-angular": "^5.0.29",
     "@capacitor/app": "6.0.1",
     "@capacitor/core": "6.1.2",
     "@capacitor/haptics": "6.0.1",
     "@capacitor/keyboard": "6.0.2",
     "@capacitor/status-bar": "6.0.1",
-    "@ionic/angular": "^8.2.7",
-    "aws-amplify": "^6.5.3",
+    "@ionic/angular": "^8.3.3",
+    "aws-amplify": "^6.6.6",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
-    "ionicons": "^7.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.7.0",
-    "zone.js": "~0.15.0"
+    "ionicons": "^7.4.0",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.8.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.1",
-    "@angular-eslint/builder": "^18.3.0",
-    "@angular-eslint/eslint-plugin": "^18.3.0",
-    "@angular-eslint/eslint-plugin-template": "^18.3.0",
-    "@angular-eslint/schematics": "^18.3.0",
-    "@angular-eslint/template-parser": "^18.3.0",
-    "@angular/cli": "^18.2.1",
-    "@angular/compiler-cli": "^18.2.2",
-    "@angular/language-service": "^18.2.2",
+    "@angular-devkit/build-angular": "^18.2.9",
+    "@angular-eslint/builder": "^18.4.0",
+    "@angular-eslint/eslint-plugin": "^18.4.0",
+    "@angular-eslint/eslint-plugin-template": "^18.4.0",
+    "@angular-eslint/schematics": "^18.4.0",
+    "@angular-eslint/template-parser": "^18.4.0",
+    "@angular/cli": "^18.2.9",
+    "@angular/compiler-cli": "^18.2.8",
+    "@angular/language-service": "^18.2.8",
     "@capacitor/cli": "6.1.2",
-    "@ionic/angular-toolkit": "^11.0.1",
-    "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
-    "eslint": "^9.9.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^50.2.2",
+    "@ionic/angular-toolkit": "^12.1.1",
+    "@types/jasmine": "~5.1.4",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.4.3",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "jasmine-core": "~5.2.0",
+    "jasmine-core": "~5.4.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
+    "typescript": "^5.5.4"
   },
   "description": "An Ionic project"
-}
+}
\ No newline at end of file

src/app/app-routing.module.ts

@@ -11,18 +11,6 @@ const routes: Routes = [
     redirectTo: 'home',
     pathMatch: 'full'
   },
-  {
-    path: 'user-regist',
-    loadChildren: () => import('./user-regist/user-regist.module').then(m => m.UserRegistPageModule)
-  },
-  {
-    path: 'password-update',
-    loadChildren: () => import('./password-update/password-update.module').then(m => m.PasswordUpdatePageModule)
-  },
-  {
-    path: 'menu',
-    loadChildren: () => import('./menu/menu.module').then(m => m.MenuPageModule)
-  },
   {
     path: 'card-select',
     loadChildren: () => import('./card-select/card-select.module').then(m => m.CardSelectPageModule)
@@ -39,10 +27,6 @@ const routes: Routes = [
     path: 'pass-regist',
     loadChildren: () => import('./pass-regist/pass-regist.module').then(m => m.PassRegistPageModule)
   },
-  {
-    path: 'history',
-    loadChildren: () => import('./history/history.module').then(m => m.HistoryPageModule)
-  },
   {
     path: 'claim-list',
     loadChildren: () => import('./claim-list/claim-list.module').then(m => m.ClaimListPageModule)

src/app/app.module.ts

@@ -7,6 +7,8 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -14,7 +16,7 @@ import { AppRoutingModule } from './app-routing.module';
     IonicModule.forRoot(),
     AppRoutingModule
   ],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, provideHttpClient(withInterceptorsFromDi())],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/card-regist/card-regist.page.html

-<ion-header [translucent]="true">
+<ion-header>
   <app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
 </ion-header>
 

src/app/card-select/card-info/card-info.component.html

@@ -5,23 +5,46 @@
         <ion-grid class="ion-no-padding">
           <ion-row>
             <ion-col style="width:75%;padding-top:8px;padding-left:10px;">
-              <ion-label>クレジットカード</ion-label>
+              @switch (creditCardModel?.cardKind) {
+              @case (0) {
+              <ion-label>JCB</ion-label>
+              }
+              @case (1) {
+              <ion-label>Visa</ion-label>
+              }
+              @case (2) {
+              <ion-label>MasterCard</ion-label>
+              }
+              @case (3) {
+              <ion-label>AmericanExpress</ion-label>
+              }
+              @case (4) {
+              <ion-label>Diners</ion-label>
+              }
+              }
             </ion-col>
-            <ion-col style="padding-top:8px;">
+            <ion-col style="padding-top:8px;padding-right:10px;">
               @if (creditCardModel?.denyStatus == 1 && creditCardModel?.deleteDeny == 0) {
-              <div id="denyStatus" role="button" class="text-decoration-underline" style="color:red;">
-                拒否リスト登録</div>
-              <ion-alert trigger="denyStatus" header="拒否リスト削除しますか？" [buttons]="confirmButtons"
+              <div [id]="denyStatusId" role="button" class="text-decoration-underline label-orange"
+                style="text-align:right;">
+                拒否リスト削除</div>
+              <ion-alert [trigger]="denyStatusId" header="拒否リスト削除しますか？" [buttons]="confirmButtons"
                 (didDismiss)="onClickDenyStatus($event)"></ion-alert>
               } @else if (creditCardModel?.denyStatus == 1 && creditCardModel?.deleteDeny == 1) {
-              <div id="deleteDeny" role="button" class="text-decoration-underline" style="color:red;">
-                拒否リスト削除依頼</div>
-              <ion-alert trigger="deleteDeny" header="拒否リスト削除依頼を取消しますか？" [buttons]="confirmButtons"
+              <div [id]="deleteDenyId" role="button" class="text-decoration-underline label-orange"
+                style="text-align:right;">
+                依賴取消</div>
+              <div class="label-gray" style="font-size:12px;text-align:right;">
+                拒否リスト削除依賴済
+              </div>
+              <ion-alert [trigger]="deleteDenyId" header="拒否リスト削除依頼を取消しますか？" [buttons]="confirmButtons"
                 (didDismiss)="onClickDenyStatus($event)"></ion-alert>
               }
             </ion-col>
             <ion-col size="auto" align="right" style="padding-top:10px;padding-right:10px;">
-              <ion-icon name="trash-outline"></ion-icon>
+              <input type="button" [id]="deleteCardId" class="btn btn-outline-dark" value="削除">
+              <ion-alert [trigger]="deleteCardId" header="クレジットカードを削除しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickTrash($event)"></ion-alert>
             </ion-col>
           </ion-row>
         </ion-grid>
@@ -29,7 +52,7 @@
     </ion-row>
     <ion-row>
       <ion-col style="padding-left:10px;padding-top:10px;" size="auto">
-        <div style="width:120px;">カード番号</div>
+        <div class="label-blue" style="width:120px;">カード番号</div>
       </ion-col>
       <ion-col style="padding-top:10px;">
         <ion-grid class="ion-no-padding">
@@ -60,20 +83,12 @@
         </ion-grid>
       </ion-col>
     </ion-row>
-    <ion-row>
-      <ion-col style="padding-left:10px;padding-top:10px;" size="auto">
-        <div style="width:120px;">カード名義人</div>
-      </ion-col>
-      <ion-col style="padding-top:10px;">
-        <ion-label>{{creditCardModel?.cardOwner}}</ion-label>
-      </ion-col>
-    </ion-row>
     <ion-row>
       <ion-col style="padding-left:10px;padding-top:10px;padding-bottom:10px;" size="auto">
-        <div style="width:120px;">有効期限</div>
+        <div class="label-blue" style="width:120px;">カード名義人</div>
       </ion-col>
       <ion-col style="padding-top:10px;padding-bottom:10px;">
-        <ion-label>{{creditCardModel?.cardYear}}年{{creditCardModel?.cardMonth}}月</ion-label>
+        <ion-label>{{creditCardModel?.cardOwner}}</ion-label>
       </ion-col>
     </ion-row>
   </ion-grid>