Skip to content

C
contactless-ionic
Commit 3ee07dcc authored by 伊藤雄大's avatar 伊藤雄大
Browse files
Options

2024/07/23

　改善
parent c98afb40
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 248 deletions
src/app/card-regist/card-regist.page.html
View file @ 3ee07dcc
......@@ -36,7 +36,7 @@
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<input type="button" id="addcard" class="common-button rounded" style="margin-top:20px;" value="追加" />
<ion-button id="addcard" class="common-button" style="margin-top:20px;">追加</ion-button>
<ion-alert trigger="addcard" header="この内容で追加してよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickAddCard($event)"></ion-alert>
</ion-col>
......
src/app/card-select/card-info/card-info.component.html
View file @ 3ee07dcc
<div class="rounded border">
<table width="100%">
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td style="width:75%;padding-top:10px;padding-left:10px;">
<span>クレジットカード</span>
</td>
<td style="padding-top:10px;">
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col colspan="2">
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col style="width:75%;padding-top:8px;padding-left:10px;">
<ion-label>クレジットカード</ion-label>
</ion-col>
<ion-col size="auto" style="padding-top:8px;">
<div class="common-link" (click)="onClickPass()">定期券</div>
</td>
<td align="right" style="padding-top:10px;padding-right:10px;">
<i class="bi bi-trash3" (click)="onClickTrash()"></i>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left:10px;padding-top:10px;">
<span>カード番号</span>
</td>
<td style="padding-top:10px;">
<table>
<tr>
<td>
</ion-col>
<ion-col size="auto" align="right" style="padding-top:10px;padding-right:10px;">
<ion-icon name="trash-outline"></ion-icon>
</ion-col>
</ion-row>
</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-grid class="ion-no-padding">
<ion-row>
<ion-col size="auto">
@switch (creditCardModel?.cardKind) {
@case (0) {
<div class="jcb"></div>
......@@ -42,29 +42,29 @@
<div class="diners"></div>
}
}
</td>
<td style="padding-left:10px;">
<span>****&nbsp;****&nbsp;****&nbsp;{{creditCardModel?.cardNumber}}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left:10px;padding-top:10px;">
<span>カード名義人</span>
</td>
<td style="padding-top:10px;">
<span>{{creditCardModel?.cardOwner}}</span>
</td>
</tr>
<tr>
<td style="padding-left:10px;padding-top:10px;padding-bottom:10px;">
<span>有効期限</span>
</td>
<td style="padding-top:10px;padding-bottom:10px;">
<span>{{creditCardModel?.cardYear}}年{{creditCardModel?.cardMonth}}月</span>
</td>
</tr>
</table>
</ion-col>
<ion-col style="padding-left:10px;padding-top:8px;padding-right:8px;">
<ion-label>****&nbsp;****&nbsp;****&nbsp;{{creditCardModel?.cardNumber}}</ion-label>
</ion-col>
</ion-row>
</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>
</ion-col>
<ion-col style="padding-top:10px;padding-bottom:10px;">
<ion-label>{{creditCardModel?.cardYear}}年{{creditCardModel?.cardMonth}}月</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</div>
\ No newline at end of file
src/app/card-select/card-info/card-info.component.ts
View file @ 3ee07dcc
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CreditCardModel } from 'src/app/model/credit-card.model';
/**
......@@ -9,6 +10,9 @@ import { CreditCardModel } from 'src/app/model/credit-card.model';
selector: 'app-card-info',
templateUrl: './card-info.component.html',
styleUrls: ['./card-info.component.scss'],
imports: [
IonicModule
]
})
export class CardInfoComponent {
//クレジットカード情報
......
src/app/card-select/card-select.module.ts
View file @ 3ee07dcc
......@@ -17,8 +17,8 @@ import { CardInfoComponent } from './card-info/card-info.component';
FormsModule,
IonicModule,
CardSelectPageRoutingModule,
HeaderComponent,
CardInfoComponent
CardInfoComponent,
HeaderComponent
],
declarations: [CardSelectPage]
})
......
src/app/card-select/card-select.page.html
View file @ 3ee07dcc
......@@ -11,7 +11,7 @@
</div>
}
</div>
<div style="margin-top:10px;text-align:center;" (click)="onClickAddCard()">
<span class="add-link">+&nbsp;クレジットカードを追加する</span>
<div role="button" style="margin-top:10px;text-align:center;" class="add-link" (click)="onClickAddCard()">
<span>+&nbsp;クレジットカードを追加する</span>
</div>
</ion-content>
\ No newline at end of file
src/app/card-select/card-select.page.scss
View file @ 3ee07dcc
.add-link {
color: #0CACCD;
}
\ No newline at end of file
src/app/common/header/header.component.html
View file @ 3ee07dcc
......@@ -3,21 +3,25 @@
<div style="margin-left:10px;padding-top:5px;">タッチ決済サービス</div>
}
@if (mode === 2) {
<div style="margin-left:10px;padding-top:5px;" (click)="onClickBack()">＜</div>
<div style="margin-left:5px;padding-top:5px;" (click)="onClickBack()">
<ion-icon name="chevron-back-outline" size="large"></ion-icon>
</div>
}
@if (mode === 1) {
<div style="margin-right:10px;padding-top:5px;" (click)="onClickClose()">✕</div>
<div style="margin-right:10px;padding-top:5px;" (click)="onClickClose()">
<ion-icon name="close-outline" size="large"></ion-icon>
</div>
}
@if (mode === 3) {
<table width="100%">
<tr>
<td style="padding-top:5px;">
<ion-grid width="100%">
<ion-row>
<ion-col style="padding-top:3px;text-align:right;">
<div (click)="onClickLogout()">ログアウト</div>
</td>
<td style="padding-top:5px;padding-left:5px;padding-right:10px;width:20px;">
<i class="bi bi-gear" (click)="onClickSetting()"></i>
</td>
</tr>
</table>
</ion-col>
<ion-col style="padding-top:5px;padding-left:5px;padding-right:10px;" size="auto">
<ion-icon name="settings-outline"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
}
</div>
\ No newline at end of file
src/app/common/header/header.component.scss
View file @ 3ee07dcc
......@@ -6,4 +6,17 @@
.right-align {
text-align: right;
}
.back {
content: "";
display: block;
width: 12px;
height: 12px;
position: absolute;
top: calc(50% - 2px); //ボーダーの太さ分を引く
border-top: solid 2px;
border-right: solid 2px;
transform: rotate(225deg);
color: inherit;
}
\ No newline at end of file
src/app/common/header/header.component.ts
View file @ 3ee07dcc
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { RouteService } from 'src/app/services/route.service';
/**
......@@ -8,7 +9,10 @@ import { RouteService } from 'src/app/services/route.service';
standalone: true,
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
styleUrls: ['./header.component.scss'],
imports: [
IonicModule
]
})
export class HeaderComponent {
//モード(0:通常,1:閉じる,2:戻る,3:ログアウト)
......
src/app/deny-list/deny-info/deny-info.component.html
View file @ 3ee07dcc
<div class="border rounded">
<table width="100%">
<tr>
<td style="padding-left:10px;">
<input class="form-check-input" type="checkbox" (change)="onChangeSelect($event)">
</td>
<td>
<table width="100%">
<tr>
<td colspan="2" style="padding-top:10px;">
{{model.getonStopName}}→{{model.getoffStopName}}
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<span>乗車</span>
</td>
<td style="padding-top:10px;">
{{model.getonDt}}
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<span>降車</span>
</td>
<td style="padding-top:10px;">
{{model.getoffDt}}
</td>
</tr>
<tr>
<td style="padding-top:10px;padding-bottom:10px;">
<span>請求金額</span>
</td>
<td style="padding-top:10px;padding-bottom:10px;">
{{amountStr}}円
</td>
</tr>
</table>
</td>
</tr>
</table>
<ion-grid class="</ion-label>">
<ion-row>
<ion-col style="padding-left:10px;" size="auto">
<ion-checkbox class="form-check-input" style="margin-top:80px;"
(change)="onChangeSelect($event)"></ion-checkbox>
</ion-col>
<ion-col>
<ion-grid class="</ion-label>">
<ion-row>
<ion-col style="padding-top:10px;">
<ion-label>{{model.getonStopName}}→{{model.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;" size="auto">
<div style="width:80px;">乗車</div>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label>{{model.getonDt}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;" size="auto">
<div style="width:80px;">降車</div>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label>{{model.getoffDt}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;padding-bottom:10px;" size="auto">
<div style="width:80px;">請求金額</div>
</ion-col>
<ion-col style="padding-top:10px;padding-bottom:10px;">
<ion-label>{{amountStr}}円</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</div>
\ No newline at end of file
src/app/deny-list/deny-info/deny-info.component.ts
View file @ 3ee07dcc
import { Component, Input, OnInit } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { DenyListModel } from 'src/app/model/deny-list.model';
import { RouteService } from 'src/app/services/route.service';
/**
* 拒否リスト情報
......@@ -10,6 +10,9 @@ import { RouteService } from 'src/app/services/route.service';
selector: 'app-deny-info',
templateUrl: './deny-info.component.html',
styleUrls: ['./deny-info.component.scss'],
imports: [
IonicModule
]
})
export class DenyInfoComponent implements OnInit {
@Input() model: DenyListModel = new DenyListModel();
......
src/app/deny-list/deny-list.module.ts
View file @ 3ee07dcc
......@@ -17,8 +17,8 @@ import { DenyInfoComponent } from './deny-info/deny-info.component';
FormsModule,
IonicModule,
DenyListPageRoutingModule,
HeaderComponent,
DenyInfoComponent
DenyInfoComponent,
HeaderComponent
],
declarations: [DenyListPage]
})
......
src/app/deny-list/deny-list.page.html
View file @ 3ee07dcc
......@@ -9,7 +9,7 @@
</div>
}
<div style="margin-top:20px;text-align:center;">
<ion-input type="button" id="delreq" class="common-button rounded" style="margin-top:20px;" value="削除依頼" />
<ion-button id="delreq" class="common-button rounded" style="margin-top:20px;">削除依頼</ion-button>
<ion-alert trigger="delreq" header="拒否リストからの削除を依頼しますか？" [buttons]="confirmButtons"
(didDismiss)="onClickDelreq($event)"></ion-alert>
</div>
......
src/app/history/history.page.html
View file @ 3ee07dcc
......@@ -5,8 +5,8 @@
<ion-content [fullscreen]="true">
<ion-grid style="margin-top:20px;">
<ion-row>
<ion-col class="ion-text-right" style="padding-top:10px;">
<ion-label (click)="onClickBefore()">＜</ion-label>
<ion-col class="ion-text-right" style="padding-top:8px;">
<ion-icon role="button" name="chevron-back-outline" size="large" (click)="onClickBefore()"></ion-icon>
</ion-col>
<ion-col>
<ion-datetime-button style="width:160px;" datetime="datetime"></ion-datetime-button>
......@@ -17,8 +17,8 @@
</ng-template>
</ion-modal>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label (click)="onClickAfter()">＞</ion-label>
<ion-col style="padding-top:8px;">
<ion-icon role="button" name="chevron-forward-outline" size="large" (click)="onClickAfter()"></ion-icon>
</ion-col>
</ion-row>
@for (history of historyList;track history.getonoffDt) {
......
src/app/home/home-routing.module.ts
View file @ 3ee07dcc
......@@ -11,7 +11,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forChild(routes), HeaderComponent],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }
src/app/home/home.page.html
View file @ 3ee07dcc
......@@ -21,18 +21,18 @@
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<input type="button" class="common-button rounded" style="margin-top:20px;" value="ログイン"
(click)="onClickLogin()" />
<ion-button class="common-button rounded" style="margin-top:20px;" (click)="onClickLogin()">ログイン</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<div class="common-link" style="font-size:12px;margin-top:20px;" (click)="onClickRegist()">初めての方はこちら</div>
<div role="button" class="common-link" style="font-size:12px;margin-top:20px;" (click)="onClickRegist()">
初めての方はこちら</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<div class="common-link" style="font-size:12px;" (click)="onClickPassword()">パスワードを忘れた方はこちら</div>
<div role="button" class="common-link" style="font-size:12px;" (click)="onClickPassword()">パスワードを忘れた方はこちら</div>
</ion-col>
</ion-row>
</ion-grid>
......
src/app/home/home.page.ts
View file @ 3ee07dcc
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
import { LoginService } from '../services/login.service';
......@@ -10,7 +10,7 @@ import { LoginService } from '../services/login.service';
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
export class HomePage implements OnInit {
//メールアドレス
email?: string;
//パスワード
......@@ -23,6 +23,14 @@ export class HomePage {
*/
constructor(private routeService: RouteService, private loginService: LoginService) { }
/**
* 初期化
*/
ngOnInit(): void {
this.email = "";
this.password = "";
}
/**
* ログイン
*/
......
src/app/menu/menu.page.html
View file @ 3ee07dcc
......@@ -6,20 +6,19 @@
<ion-grid>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:20px;" value="クレジットカード一覧"
(click)="onClickCardSelect()" />
<ion-button class="rounded menu-button" style="margin-top:20px;"
(click)="onClickCardSelect()">クレジットカード一覧</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:10px;" value="乗降履歴"
(click)="onClickHistory()" />
<ion-button class="rounded menu-button" style="margin-top:10px;" (click)="onClickHistory()">乗降履歴</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:10px;" value="拒否リスト"
(click)="onClickDenyList()" />
<ion-button class="rounded menu-button" style="margin-top:10px;" value=""
(click)="onClickDenyList()">拒否リスト</ion-button>
</ion-col>
</ion-row>
</ion-grid>
......
src/app/menu/menu.page.scss
View file @ 3ee07dcc
.menu-button {
width: 100%;
height: 60px;
--width: 100%;
--height: 60px;
--background: #f0f0f0;
--color: black;
}
\ No newline at end of file
src/app/pass-change/pass-change.page.html
View file @ 3ee07dcc
......@@ -3,7 +3,7 @@
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-grid class="ion-no-padding" style="margin-top:20px;">
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>路線</ion-label>&nbsp;
......@@ -11,39 +11,39 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>使用期間</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.useTermName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>料金区分</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.privateRangeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>使用開始日</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.startDate}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>乗車区間(変更前)</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.getonStopName}}～{{commuterPassModel?.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-item>
<ion-select label="乗車停留所" [(ngModel)]="getonStopId" (ionChange)="onChangeGetOn($event)">
@for (kv of stopList|keyvalue;track kv.key) {
......@@ -54,7 +54,7 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-item>
<ion-select label="区間" [(ngModel)]="getoffStopId" (ionChange)="onChangeGetOff($event)">
@for (kv of stopList|keyvalue;track kv.key) {
......@@ -65,24 +65,24 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>購入金額</ion-label>
</ion-col>
<ion-col class="ion-text-right">
<ion-col class="ion-text-right" style="margin-top:10px;">
<ion-label style="margin-right:20px;">{{purchasePrice|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>払戻金額</ion-label>
</ion-col>
<ion-col class="ion-text-right">
<ion-col class="ion-text-right" style="margin-top:10px;">
<ion-label style="margin-right:20px;">{{refundPrice|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-input type="button" id="change" class="common-button rounded" style="margin-top:20px;" value="変更" />
<ion-col class="ion-text-center" style="margin-top:20px;">
<ion-button id="change" class="common-button rounded">変更</ion-button>
<ion-alert trigger="change" header="選択されているクレジットカードで支払い、または、払い戻ししますが、よろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickChange($event)"></ion-alert>
</ion-col>
......
src/app/pass-continue/pass-continue.page.html
View file @ 3ee07dcc
......@@ -3,7 +3,7 @@
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-grid class="ion-no-padding" style="margin-top:20px;">
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>路線</ion-label>&nbsp;
......@@ -11,7 +11,7 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-item>
<ion-select label="使用期間" [(ngModel)]="useTermId" (ionChange)="onChangeTerm($event)">
@for (kv of useTermList|keyvalue;track kv.key) {
......@@ -22,18 +22,18 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>料金区分</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.privateRangeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:15px;">
<ion-label>使用開始日</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
......@@ -43,24 +43,24 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>乗車区間</ion-label>
</ion-col>
<ion-col>
<ion-col style="margin-top:10px;">
<ion-label>{{commuterPassModel?.getonStopName}}～{{commuterPassModel?.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>支払金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{price|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-input type="button" id="continue" class="common-button rounded" style="margin-top:20px;" value="継続" />
<ion-col class="ion-text-center" style="margin-top:20px;">
<ion-button id="continue" class="common-button rounded">継続</ion-button>
<ion-alert trigger="continue" header="選択されているクレジットカードで支払いをしてよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickContinue($event)"></ion-alert>
</ion-col>
......
src/app/pass-refund/pass-refund.page.html
View file @ 3ee07dcc
......@@ -3,7 +3,7 @@
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-grid class="ion-no-padding" style="margin-top:20px;">
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>乗車区間</ion-label>
......@@ -13,48 +13,48 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>購入金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{purchaseAmount|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>普通運賃</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{standardFare|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>使用日数</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{usedDays}}日</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>払戻手数料</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{refundFee|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-col style="margin-left:20px;margin-top:10px;">
<ion-label>払戻金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-col class="ion-text-right" style="margin-right:20px;margin-top:10px;">
<ion-label>{{refundAmount|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-input type="button" id="refund" class="common-button rounded" style="margin-top:20px;" value="払戻" />
<ion-col class="ion-text-center" style="margin-top:20px;">
<ion-button id="refund" class="common-button rounded">払戻</ion-button>
<ion-alert trigger="refund" header="選択されているクレジットカードで払い戻ししてよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickRefund($event)"></ion-alert>
</ion-col>
......
src/app/pass-regist/pass-regist.page.html
View file @ 3ee07dcc
......@@ -45,7 +45,8 @@
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime" presentation="date" [(ngModel)]="startDate"></ion-datetime>
<ion-datetime id="datetime" presentation="date" [(ngModel)]="startDate"
[showDefaultButtons]="true"></ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
......@@ -82,7 +83,7 @@
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-input type="button" id="addpass" class="common-button rounded" style="margin-top:20px;" value="追加" />
<ion-button id="addpass" class="common-button rounded" style="margin-top:20px;">追加</ion-button>
<ion-alert trigger="addpass" header="選択されているクレジットカードで支払いをしてよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickAdd($event)"></ion-alert>
</ion-col>
......
src/app/pass-select/pass-info/pass-info.component.html
View file @ 3ee07dcc
<div class="rounded border">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td colspan="2" style="padding-top:10px;padding-left:10px;">
{{model?.routeName}}
</td>
</tr>
<tr>
<td style="padding-top:10px;padding-left:10px;">
<span>使用開始日</span>
</td>
<td style="padding-top:10px;">
{{model?.startDate}}
</td>
</tr>
<tr>
<td style="padding-top:10px;padding-left:10px;">
<span>使用期間</span>
</td>
<td style="padding-top:10px;">
{{model?.useTermName}}
</td>
</tr>
<tr>
<td style="padding-top:10px;padding-left:10px;">
<span>料金区分</span>
</td>
<td style="padding-top:10px;">
{{model?.privateRangeName}}
</td>
</tr>
<tr>
<td style="padding-top:10px;padding-left:10px;padding-bottom:10px;">
<span>乗車区間</span>
</td>
<td style="padding-top:10px;padding-bottom:10px;">
{{model?.getonStopName}}～{{model?.getoffStopName}}
</td>
</tr>
</table>
</td>
<td style="vertical-align: top;padding-top:20px;padding-right:10px;">
<table>
<tr>
<td>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col style="padding-top:10px;padding-left:10px;">
<ion-label>{{model?.routeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;padding-left:10px;" size="auto">
<div style="width:120px;">使用開始日</div>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label>{{model?.startDate}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;padding-left:10px;" size="auto">
<div style="width:120px;">使用期間</div>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label>{{model?.useTermName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;padding-left:10px;" size="auto">
<div style="width:120px;">料金区分</div>
</ion-col>
<ion-col style="padding-top:10px;">
<ion-label>{{model?.privateRangeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding-top:10px;padding-left:10px;padding-bottom:10px;" size="auto">
<div style="width:120px;">乗車区間</div>
</ion-col>
<ion-col style="padding-top:10px;padding-bottom:10px;">
<ion-label>{{model?.getonStopName}}～{{model?.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col style="vertical-align: top;padding-top:20px;padding-right:10px;" size="auto">
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="auto">
<div class="common-link" (click)="onClickChange()">変更</div>
<div class="common-link" (click)="onClickContinue()">継続</div>
<div class="common-link" (click)="onClickRefund()">払戻</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</div>
\ No newline at end of file
src/app/pass-select/pass-info/pass-info.component.ts
View file @ 3ee07dcc
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommuterPassModel } from 'src/app/model/commuter-pass.model';
/**
......@@ -9,6 +10,9 @@ import { CommuterPassModel } from 'src/app/model/commuter-pass.model';
selector: 'app-pass-info',
templateUrl: './pass-info.component.html',
styleUrls: ['./pass-info.component.scss'],
imports: [
IonicModule
]
})
export class PassInfoComponent {
@Input() model?: CommuterPassModel;
......
src/app/pass-select/pass-select.module.ts
View file @ 3ee07dcc
......@@ -17,8 +17,8 @@ import { PassInfoComponent } from './pass-info/pass-info.component';
FormsModule,
IonicModule,
PassSelectPageRoutingModule,
HeaderComponent,
PassInfoComponent
PassInfoComponent,
HeaderComponent
],
declarations: [PassSelectPage]
})
......
src/app/pass-select/pass-select.page.html
View file @ 3ee07dcc
......@@ -22,7 +22,7 @@
</div>
}
</div>
<div style="margin-top:10px;text-align:center;" (click)="onClickAddPass()">
<span class="add-link">+&nbsp;定期券を追加する</span>
<div role="button" style="margin-top:10px;text-align:center;" class="add-link" (click)="onClickAddPass()">
<span>+&nbsp;定期券を追加する</span>
</div>
</ion-content>
\ No newline at end of file
src/app/pass-select/pass-select.page.scss
View file @ 3ee07dcc
.add-link {
color: #0CACCD;
}
\ No newline at end of file
src/app/password-update/password-update.page.html
View file @ 3ee07dcc
......@@ -29,8 +29,7 @@
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<input type="button" class="common-button rounded" style="margin-top:20px;" value="更新"
(click)="onClickUpdate()" />
<ion-button class="common-button rounded" style="margin-top:20px;" (click)="onClickUpdate()">更新</ion-button>
</ion-col>
</ion-row>
</ion-grid>
......
src/app/user-regist/user-regist.page.html
View file @ 3ee07dcc
......@@ -55,18 +55,18 @@
<ion-row>
@if (mode === 0) {
<ion-col class="ion-text-center">
<input type="button" id="regist" class="common-button rounded" style="margin-top:20px;" value="登録" />
<ion-button id="regist" class="common-button rounded" style="margin-top:20px;">登録</ion-button>
<ion-alert trigger="regist" header="この内容で登録してよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickRegist($event)"></ion-alert>
</ion-col>
} @else {
<ion-col class="ion-text-center">
<input type="button" id="update" class="common-button rounded" style="margin-top:20px;" value="更新" />
<ion-button id="update" class="common-button rounded" style="margin-top:20px;">更新</ion-button>
<ion-alert trigger="update" header="この内容で更新してよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickUpdate($event)"></ion-alert>
</ion-col>
<ion-col class="ion-text-center">
<input type="button" id="withdraw" class="common-button rounded" style="margin-top:20px;" value="退会" />
<ion-button id="withdraw" class="common-button rounded" style="margin-top:20px;">退会</ion-button>
<ion-alert trigger="withdraw" header="退会してよろしいですか？" [buttons]="confirmButtons"
(didDismiss)="onClickWithdraw($event)"></ion-alert>
</ion-col>
......
src/global.scss
View file @ 3ee07dcc
......@@ -37,14 +37,18 @@
@import "@ionic/angular/css/palettes/dark.system.css";
.common-button {
background-color: #F19024;
color: white;
height: 40px;
padding-left: 20px;
padding-right: 20px;
--background: #F19024;
--color: white;
--height: 40px;
--padding-left: 20px;
--padding-right: 20px;
}
.common-link {
text-decoration: underline;
color: #0CACCD;
}
.add-link {
color: #0CACCD;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment