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