Commit 49895fa3 authored by 伊藤雄大's avatar 伊藤雄大

Initial commit

parent 80685b3f
......@@ -31,8 +31,15 @@
"output": "./svg"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
"styles": [
"src/global.scss",
"src/theme/variables.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
......@@ -111,8 +118,15 @@
"output": "./svg"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
"styles": [
"src/global.scss",
"src/theme/variables.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"ci": {
......@@ -146,4 +160,4 @@
"styleext": "scss"
}
}
}
}
\ No newline at end of file
......@@ -22,6 +22,8 @@
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@ionic/angular": "^8.0.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
......@@ -5094,6 +5096,17 @@
"node": ">=14"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.18.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
......@@ -7117,6 +7130,41 @@
"dev": true,
"license": "ISC"
},
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT",
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/bootstrap-icons": {
"version": "1.11.3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
"integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT"
},
"node_modules/bplist-parser": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.2.tgz",
......
......@@ -27,6 +27,8 @@
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@ionic/angular": "^8.0.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
......
......@@ -11,6 +11,54 @@ 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)
},
{
path: 'card-regist',
loadChildren: () => import('./card-regist/card-regist.module').then( m => m.CardRegistPageModule)
},
{
path: 'pass-select',
loadChildren: () => import('./pass-select/pass-select.module').then( m => m.PassSelectPageModule)
},
{
path: 'pass-regist',
loadChildren: () => import('./pass-regist/pass-regist.module').then( m => m.PassRegistPageModule)
},
{
path: 'pass-change',
loadChildren: () => import('./pass-change/pass-change.module').then( m => m.PassChangePageModule)
},
{
path: 'pass-continue',
loadChildren: () => import('./pass-continue/pass-continue.module').then( m => m.PassContinuePageModule)
},
{
path: 'pass-refund',
loadChildren: () => import('./pass-refund/pass-refund.module').then( m => m.PassRefundPageModule)
},
{
path: 'history',
loadChildren: () => import('./history/history.module').then( m => m.HistoryPageModule)
},
{
path: 'deny-list',
loadChildren: () => import('./deny-list/deny-list.module').then( m => m.DenyListPageModule)
},
];
@NgModule({
......
......@@ -11,6 +11,6 @@ import { AppRoutingModule } from './app-routing.module';
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CardRegistPage } from './card-regist.page';
const routes: Routes = [
{
path: '',
component: CardRegistPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CardRegistPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CardRegistPageRoutingModule } from './card-regist-routing.module';
import { CardRegistPage } from './card-regist.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CardRegistPageRoutingModule,
HeaderComponent
],
declarations: [CardRegistPage]
})
export class CardRegistPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="カード番号" [value]="cardNumber"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="カード名義人(ローマ字)" [value]="cardOwner"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="有効期限" [value]="cardMonth"></ion-input>
/
<ion-input [value]="cardYear"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="CVC" [value]="cvc"></ion-input>
</ion-item>
</ion-col>
</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-alert trigger="addcard" header="この内容で追加してよろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickAddCard($event)"></ion-alert>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardRegistPage } from './card-regist.page';
describe('CardRegistPage', () => {
let component: CardRegistPage;
let fixture: ComponentFixture<CardRegistPage>;
beforeEach(() => {
fixture = TestBed.createComponent(CardRegistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { RouteService } from '../services/route.service';
/**
* クレジットカード登録画面
*/
@Component({
selector: 'app-card-regist',
templateUrl: './card-regist.page.html',
styleUrls: ['./card-regist.page.scss'],
})
export class CardRegistPage {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//カード番号
cardNumber?: string;
//カード名義人
cardOwner?: string;
//有効期限-月
cardMonth?: string;
//有効期限-年
cardYear?: string;
//CVC
cvc?: string;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigateCardSelect();
}
/**
* 追加
* @param event イベント
*/
onClickAddCard(event: any): void {
this.routeService.navigateCardSelect();
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CardSelectPage } from './card-select.page';
const routes: Routes = [
{
path: '',
component: CardSelectPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CardSelectPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CardSelectPageRoutingModule } from './card-select-routing.module';
import { CardSelectPage } from './card-select.page';
import { HeaderComponent } from '../common/header/header.component';
import { CardInfoComponent } from './component/card-info/card-info.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CardSelectPageRoutingModule,
HeaderComponent,
CardInfoComponent
],
declarations: [CardSelectPage]
})
export class CardSelectPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="2" (clickBack)="onClickBack()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<div style="margin-top:10px;margin-left:10px;margin-right:10px;">
@for (model of cardList;track model.cardNumber) {
<div style="margin-top:10px;">
<app-card-info [creditCardModel]="model" (clickPass)="onClickPass(model)"
(clickTrash)="onClickTrash(model)"></app-card-info>
</div>
}
</div>
<div style="margin-top:10px;text-align:center;" (click)="onClickAddCard()">
<span class="add-link">+&nbsp;クレジットカードを追加する</span>
</div>
</ion-content>
\ No newline at end of file
.add-link {
color: #0CACCD;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardSelectPage } from './card-select.page';
describe('CardSelectPage', () => {
let component: CardSelectPage;
let fixture: ComponentFixture<CardSelectPage>;
beforeEach(() => {
fixture = TestBed.createComponent(CardSelectPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
import { CreditCardModel } from '../model/credit-card.model';
/**
* クレジットカード選択
*/
@Component({
selector: 'app-card-select',
templateUrl: './card-select.page.html',
styleUrls: ['./card-select.page.scss'],
})
export class CardSelectPage implements OnInit {
cardList?: CreditCardModel[];
/**
* コンストラクタ
*/
constructor(private routeService: RouteService) { }
/**
* 初期化
*/
ngOnInit(): void {
this.cardList = new Array();
for (let i = 0; i < 2; i++) {
let model: CreditCardModel = new CreditCardModel();
let value = 1234 + i;
model.cardNumber = String(value);
model.cardOwner = "TARO YAMADA";
model.cardYear = "2023";
model.cardMonth = "02";
this.cardList.push(model);
}
}
/**
* 戻る
*/
onClickBack(): void {
this.routeService.navigateMenu();
}
/**
* クレジットカード追加
*/
onClickAddCard(): void {
this.routeService.navigateCardRegist();
}
/**
* 定期券
* @param model クレジットカード情報
*/
onClickPass(model: CreditCardModel): void {
this.routeService.navigatePassSelect(model.cardNumber);
}
/**
* 削除
* @param model クレジットカード情報
*/
onClickTrash(model: CreditCardModel): void {
}
}
<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;">
<div class="common-link" (click)="onClickPass()">定期券</div>
</td>
<td style="padding-top: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;">
<span>****&nbsp;****&nbsp;****&nbsp;{{creditCardModel?.cardNumber}}</span>
</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>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { CardInfoComponent } from './card-info.component';
describe('CardInfoComponent', () => {
let component: CardInfoComponent;
let fixture: ComponentFixture<CardInfoComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ CardInfoComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(CardInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CreditCardModel } from 'src/app/model/credit-card.model';
/**
* カード情報
*/
@Component({
standalone: true,
selector: 'app-card-info',
templateUrl: './card-info.component.html',
styleUrls: ['./card-info.component.scss'],
})
export class CardInfoComponent {
//クレジットカード情報
@Input() creditCardModel?: CreditCardModel;
@Output() clickPass: EventEmitter<void> = new EventEmitter();
@Output() clickTrash: EventEmitter<void> = new EventEmitter();
/**
* コンストラクタ
*/
constructor() { }
/**
* 定期券
*/
onClickPass(): void {
this.clickPass.emit();
}
/**
* 削除
*/
onClickTrash(): void {
this.clickTrash.emit();
}
}
<div class="title-label" [class.right-align]="mode === 1 || mode === 3">
@if (mode === 0) {
<div style="margin-left:10px;padding-top:5px;">タッチ決済サービス</div>
}
@if (mode === 2) {
<div style="margin-left:10px;padding-top:5px;" (click)="onClickBack()"></div>
}
@if (mode === 1) {
<div style="margin-right:10px;padding-top:5px;" (click)="onClickClose()"></div>
}
@if (mode === 3) {
<table width="100%">
<tr>
<td style="padding-top:5px;">
<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>
}
</div>
\ No newline at end of file
.title-label {
background-color: #0CACCD;
color: white;
height: 40px;
}
.right-align {
text-align: right;
}
\ No newline at end of file
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ HeaderComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RouteService } from 'src/app/services/route.service';
/**
* ヘッダ
*/
@Component({
standalone: true,
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
//モード(0:通常,1:閉じる,2:戻る,3:ログアウト)
@Input() mode: number = 0;
@Output() clickBack: EventEmitter<void> = new EventEmitter();
@Output() clickClose: EventEmitter<void> = new EventEmitter();
/**
* コンストラクタ
*/
constructor(private routeService: RouteService) { }
/**
* 戻る
*/
onClickBack(): void {
this.clickBack.emit();
}
/**
* 閉じる
*/
onClickClose(): void {
this.clickClose.emit();
}
/**
* ログアウト
*/
onClickLogout(): void {
this.routeService.navigateHome();
}
/**
* 利用者情報更新
*/
onClickSetting(): void {
this.routeService.navigateUserRegist();
}
}
<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>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { DenyInfoComponent } from './deny-info.component';
describe('DenyInfoComponent', () => {
let component: DenyInfoComponent;
let fixture: ComponentFixture<DenyInfoComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DenyInfoComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(DenyInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit } from '@angular/core';
import { DenyListModel } from 'src/app/model/deny-list.model';
import { RouteService } from 'src/app/services/route.service';
/**
* 拒否リスト情報
*/
@Component({
standalone: true,
selector: 'app-deny-info',
templateUrl: './deny-info.component.html',
styleUrls: ['./deny-info.component.scss'],
})
export class DenyInfoComponent implements OnInit {
@Input() model: DenyListModel = new DenyListModel();
amountStr?: string;
/**
* コンストラクタ
*/
constructor() { }
/**
* 初期化
*/
ngOnInit(): void {
this.amountStr = this.model.amount.toLocaleString();
}
/**
* 選択イベント
* @param event イベント情報
*/
onChangeSelect(event: any) {
this.model.select = event.target.checked;
}
/**
* 拒否リスト情報取得
* @returns 拒否リスト情報
*/
getModel(): DenyListModel {
return this.model;
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DenyListPage } from './deny-list.page';
const routes: Routes = [
{
path: '',
component: DenyListPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class DenyListPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { DenyListPageRoutingModule } from './deny-list-routing.module';
import { DenyListPage } from './deny-list.page';
import { HeaderComponent } from '../common/header/header.component';
import { DenyInfoComponent } from './component/deny-info/deny-info.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
DenyListPageRoutingModule,
HeaderComponent,
DenyInfoComponent
],
declarations: [DenyListPage]
})
export class DenyListPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="2" (clickBack)="onClickBack()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
@for(model of denyList;track model.getonStopId) {
<div style="margin-top:10px;margin-left:10px;margin-right:10px;">
<app-deny-info [model]="model"></app-deny-info>
</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-alert trigger="delreq" header="拒否リストからの削除を依頼しますか?" [buttons]="confirmButtons"
(didDismiss)="onClickDelreq($event)"></ion-alert>
</div>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DenyListPage } from './deny-list.page';
describe('DenyListPage', () => {
let component: DenyListPage;
let fixture: ComponentFixture<DenyListPage>;
beforeEach(() => {
fixture = TestBed.createComponent(DenyListPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { DenyListModel } from '../model/deny-list.model';
import { RouteService } from '../services/route.service';
import { DenyInfoComponent } from './component/deny-info/deny-info.component';
@Component({
selector: 'app-deny-list',
templateUrl: './deny-list.page.html',
styleUrls: ['./deny-list.page.scss'],
})
export class DenyListPage implements OnInit {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//拒否リスト
denyList?: DenyListModel[];
@ViewChildren(DenyInfoComponent) denyInfoList?: QueryList<DenyInfoComponent>;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* 初期化
*/
ngOnInit() {
this.denyList = new Array();
for (let i = 0; i < 4; i++) {
let denyListModel = new DenyListModel();
let str = String(i);
denyListModel.getonStopId = str;
denyListModel.getonStopName = "XXXX停留所";
denyListModel.getoffStopName = "YYYYY停留所";
denyListModel.getonDt = "2024/06/20 10:00:01";
denyListModel.getoffDt = "2024/06/20 10:30:02";
denyListModel.amount = 1000;
this.denyList.push(denyListModel);
}
}
/**
* 戻る
*/
onClickBack(): void {
this.routeService.navigateMenu();
}
/**
* 削除依頼
*/
onClickDelreq(event: any): void {
if (event.detail.role === 'confirm') {
this.denyInfoList?.forEach(child => {
let model = child.getModel();
if (model.select) {
//拒否リスト削除依頼
}
});
}
this.routeService.navigateMenu();
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HistoryPage } from './history.page';
const routes: Routes = [
{
path: '',
component: HistoryPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HistoryPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HistoryPageRoutingModule } from './history-routing.module';
import { HistoryPage } from './history.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HistoryPageRoutingModule,
HeaderComponent
],
declarations: [HistoryPage]
})
export class HistoryPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="2" (clickBack)="onClickBack()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<div class="common-link" (click)="onClickPrev()"><前の10件</div>
</ion-col>
<ion-col class="ion-text-right">
<div class="common-link" (click)="onClickNext()">次の10件></div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="margin-top:20px;">
@for (history of historyList;track history.getonoffDt) {
<ion-row>
<ion-col size="auto">
<ion-label>{{history.getonoffDt}}</ion-label>
</ion-col>
<ion-col size="auto">
@if (history.kind === "1") {
<ion-label>乗車</ion-label>
} @else {
<ion-label>降車</ion-label>
}
</ion-col>
<ion-col size="auto">
<ion-label>{{history.stopName}}</ion-label>
</ion-col>
<ion-col>
@if (history.kind === "1") {
@if (history.status === 0) {
<ion-label>乗車中</ion-label>
}
} @else {
<ion-label>{{history.fare|number}}円</ion-label>
}
</ion-col>
</ion-row>
}
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HistoryPage } from './history.page';
describe('HistoryPage', () => {
let component: HistoryPage;
let fixture: ComponentFixture<HistoryPage>;
beforeEach(() => {
fixture = TestBed.createComponent(HistoryPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
import { HistoryModel } from '../model/history.model';
/**
* 乗車履歴閲覧画面
*/
@Component({
selector: 'app-history',
templateUrl: './history.page.html',
styleUrls: ['./history.page.scss'],
})
export class HistoryPage implements OnInit {
//乗車履歴
historyList?: HistoryModel[];
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* 初期化
*/
ngOnInit() {
this.historyList = new Array();
for (let i = 0; i < 10; i++) {
let historyModel: HistoryModel = new HistoryModel();
let str = String(i);
historyModel.getonoffDt = "2024/06/19 17:08:1" + str;
historyModel.stopId = str;
if (i % 2 == 0) {
historyModel.kind = "1";
historyModel.stopName = "XXXX停留所";
historyModel.status = 1;
} else {
historyModel.kind = "2";
historyModel.stopName = "YYYY停留所";
historyModel.fare = 200;
historyModel.status = 1;
}
this.historyList.push(historyModel);
}
let historyModel: HistoryModel = new HistoryModel();
historyModel.getonoffDt = "2024/06/19 17:10:10";
historyModel.kind = "1";
historyModel.stopName = "XXXX停留所";
historyModel.status = 0;
this.historyList.push(historyModel);
}
/**
* 戻る
*/
onClickBack(): void {
this.routeService.navigateMenu();
}
/**
* 前の10件
*/
onClickPrev(): void {
}
/**
* 次の10件
*/
onClickNext(): void {
}
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';
import { HeaderComponent } from '../common/header/header.component';
const routes: Routes = [
{
......@@ -10,7 +11,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forChild(routes)],
imports: [RouterModule.forChild(routes), HeaderComponent],
exports: [RouterModule]
})
export class HomePageRoutingModule {}
export class HomePageRoutingModule { }
......@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
......@@ -12,8 +13,9 @@ import { HomePageRoutingModule } from './home-routing.module';
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule
HomePageRoutingModule,
HeaderComponent
],
declarations: [HomePage]
})
export class HomePageModule {}
export class HomePageModule { }
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
<app-header [mode]="0"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="メールアドレス" [value]="email"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input type="password" label="パスワード" [value]="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</ion-item>
</ion-col>
</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-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>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<div class="common-link" style="font-size:12px;" (click)="onClickPassword()">パスワードを忘れた方はこちら</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { Component } from '@angular/core';
import { RouteService } from '../services/route.service';
/**
* ログイン画面
*/
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
//メールアドレス
email?: string;
//パスワード
password?: string;
constructor() {}
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* ログイン
*/
onClickLogin(): void {
this.routeService.navigateMenu();
}
/**
* 利用者登録
*/
onClickRegist(): void {
this.routeService.navigateUserRegist();
}
/**
* パスワード更新
*/
onClickPassword(): void {
this.routeService.navigatePasswordUpdate();
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MenuPage } from './menu.page';
const routes: Routes = [
{
path: '',
component: MenuPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MenuPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MenuPageRoutingModule } from './menu-routing.module';
import { MenuPage } from './menu.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
MenuPageRoutingModule,
HeaderComponent
],
declarations: [MenuPage]
})
export class MenuPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="3" (clickLogout)="onClickLogout()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:20px;" value="クレジットカード選択"
(click)="onClickCardSelect()" />
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:10px;" value="乗降履歴"
(click)="onClickHistory()" />
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="button" class="rounded menu-button" style="margin-top:10px;" value="拒否リスト"
(click)="onClickDenyList()" />
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
.menu-button {
width: 100%;
height: 60px;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MenuPage } from './menu.page';
describe('MenuPage', () => {
let component: MenuPage;
let fixture: ComponentFixture<MenuPage>;
beforeEach(() => {
fixture = TestBed.createComponent(MenuPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { RouteService } from '../services/route.service';
/**
* メニュー画面
*/
@Component({
selector: 'app-menu',
templateUrl: './menu.page.html',
styleUrls: ['./menu.page.scss'],
})
export class MenuPage {
/**
* コンストラクタ
* @param routeServive 画面遷移サービス
*/
constructor(private routeServive: RouteService) { }
/**
* ログアウト
*/
onClickLogout(): void {
this.routeServive.navigateHome();
}
/**
* クレジットカード選択
*/
onClickCardSelect(): void {
this.routeServive.navigateCardSelect();
}
/**
* 乗降履歴
*/
onClickHistory(): void {
this.routeServive.navigateHistory();
}
/**
* 拒否リスト
*/
onClickDenyList(): void {
this.routeServive.navigateDenyList();
}
}
export class CommuterPassModel {
//経路ID
routeId: string = "";
//経路名
routeName: string = "";
//使用開始日
startDate: string = "";
//使用期間
useTermId: string = "";
//使用期間名
useTermName: string = "";
//料金区分ID
priceRangeId: string = "";
//料金区分名
privateRangeName: string = "";
//乗車停留所ID
getonStopId: string = "";
//乗車停留所名
getonStopName: string = "";
//降車停留所ID
getoffStopId: string = "";
//降車停留所名
getoffStopName: string = "";
}
\ No newline at end of file
/**
* クレジットカード情報
*/
export class CreditCardModel {
//カード番号(下4桁)
cardNumber: string = "";
//カード名義人
cardOwner: string = "";
//有効期限-年
cardYear: string = "";
//有効期限-月
cardMonth: string = "";
}
\ No newline at end of file
export class DenyListModel {
//選択状態
select: boolean = false;
//乗車停留所ID
getonStopId?: string;
//乗車停留所名
getonStopName?: string;
//降車停留所ID
getoffStopId?: string;
//降車停留所名
getoffStopName?: string;
//乗車日時
getonDt?: string;
//降車日時
getoffDt?: string;
//請求金額
amount: number = 0;
}
\ No newline at end of file
export class HistoryModel {
//乗降日時
getonoffDt?: string;
//乗車/降車
kind?: string;
//停留所ID
stopId?: string;
//停留所名
stopName?: string;
//運賃
fare?: number;
//ステータス
status?: number;
}
\ No newline at end of file
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassChangePage } from './pass-change.page';
const routes: Routes = [
{
path: '',
component: PassChangePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassChangePageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PassChangePageRoutingModule } from './pass-change-routing.module';
import { PassChangePage } from './pass-change.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassChangePageRoutingModule,
HeaderComponent
],
declarations: [PassChangePage]
})
export class PassChangePageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>路線</ion-label>&nbsp;
<ion-label>{{commuterPassModel?.routeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>使用期間</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.useTermName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>料金区分</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.privateRangeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>使用開始日</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.startDate}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>乗車区間(変更前)</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.getonStopName}}~{{commuterPassModel?.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="乗車停留所" [value]="getonStopId">
@for (kv of stopList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="区間" [value]="getoffStopId">
@for (kv of stopList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>購入金額</ion-label>
</ion-col>
<ion-col class="ion-text-center">
<ion-label>{{purchasePrice|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>払戻金額</ion-label>
</ion-col>
<ion-col class="ion-text-center">
<ion-label>{{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-alert trigger="change" header="選択されているクレジットカードで支払い、または、払い戻ししますが、よろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickChange($event)"></ion-alert>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PassChangePage } from './pass-change.page';
describe('PassChangePage', () => {
let component: PassChangePage;
let fixture: ComponentFixture<PassChangePage>;
beforeEach(() => {
fixture = TestBed.createComponent(PassChangePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit } from '@angular/core';
import { CommuterPassModel } from '../model/commuter-pass.model';
import { RouteService } from '../services/route.service';
/**
* 定期券区間変更画面
*/
@Component({
selector: 'app-pass-change',
templateUrl: './pass-change.page.html',
styleUrls: ['./pass-change.page.scss'],
})
export class PassChangePage implements OnInit {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//カード番号
cardNumber?: string;
//定期券情報
commuterPassModel?: CommuterPassModel;
//停留所一覧
stopList?: Map<string, string>;
//変更後乗車停留所ID
getonStopId?: string;
//変更後降車停留所ID
getoffStopId?: string;
//購入金額
purchasePrice: number = 0;
//払戻金額
refundPrice: number = 0;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) {
this.cardNumber = routeService.cardNumber;
this.commuterPassModel = routeService.commuterPassModel;
}
/**
* 初期化
*/
ngOnInit(): void {
//停留所一覧
this.stopList = new Map();
for (let i = 0; i < 5; i++) {
let str = String(i + 1);
this.stopList.set(str, "停留所" + str);
}
}
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigatePassSelect(this.cardNumber);
}
/**
* 定期券区間変更
*/
onClickChange(event: any): void {
if (event.detail.role === 'confirm') {
//定期券区間変更
}
this.routeService.navigatePassSelect(this.cardNumber);
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassContinuePage } from './pass-continue.page';
const routes: Routes = [
{
path: '',
component: PassContinuePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassContinuePageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PassContinuePageRoutingModule } from './pass-continue-routing.module';
import { PassContinuePage } from './pass-continue.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassContinuePageRoutingModule,
HeaderComponent
],
declarations: [PassContinuePage]
})
export class PassContinuePageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>路線</ion-label>&nbsp;
<ion-label>{{commuterPassModel?.routeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="使用期間" [value]="useTermId">
@for (kv of useTermList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>料金区分</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.privateRangeName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>使用開始日</ion-label>
</ion-col>
<ion-col>
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime" presentation="date" [value]="startDate"></ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>乗車区間</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.getonStopName}}~{{commuterPassModel?.getoffStopName}}</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>支払金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<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-alert trigger="continue" header="選択されているクレジットカードで支払いをしてよろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickContinue($event)"></ion-alert>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PassContinuePage } from './pass-continue.page';
describe('PassContinuePage', () => {
let component: PassContinuePage;
let fixture: ComponentFixture<PassContinuePage>;
beforeEach(() => {
fixture = TestBed.createComponent(PassContinuePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
import { CommuterPassModel } from '../model/commuter-pass.model';
/**
* 定期券継続画面
*/
@Component({
selector: 'app-pass-continue',
templateUrl: './pass-continue.page.html',
styleUrls: ['./pass-continue.page.scss'],
})
export class PassContinuePage implements OnInit {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//カード番号
cardNumber?: string;
//定期券情報
commuterPassModel?: CommuterPassModel;
//使用期間一覧
useTermList?: Map<string, string>;
//使用期間ID
useTermId?: string;
//使用開始日
startDate?: string;
//金額
price: number = 0;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) {
this.cardNumber = routeService.cardNumber;
this.commuterPassModel = routeService.commuterPassModel;
}
/**
* 初期化
*/
ngOnInit(): void {
//使用期間一覧
this.useTermList = new Map();
this.useTermList.set("1", "1ヶ月");
this.useTermList.set("2", "3ヶ月");
this.useTermList.set("6", "6ヶ月");
}
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigatePassSelect(this.cardNumber);
}
/**
* 定期券継続
*/
onClickContinue(event: any): void {
if (event.detail.role === 'confirm') {
//定期券継続
}
this.routeService.navigatePassSelect(this.cardNumber);
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassRefundPage } from './pass-refund.page';
const routes: Routes = [
{
path: '',
component: PassRefundPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassRefundPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PassRefundPageRoutingModule } from './pass-refund-routing.module';
import { PassRefundPage } from './pass-refund.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassRefundPageRoutingModule,
HeaderComponent
],
declarations: [PassRefundPage]
})
export class PassRefundPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>乗車区間</ion-label>
</ion-col>
<ion-col>
<ion-label>{{commuterPassModel?.getonStopName}}~{{commuterPassModel?.getoffStopName}} </ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>購入金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-label>{{purchasePrice|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>普通運賃</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-label>{{normalFare|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>使用日数</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-label>{{useDays}}日</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>払戻手数料</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-label>{{refundFee|number}}円</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:20px;">
<ion-label>払戻金額</ion-label>
</ion-col>
<ion-col class="ion-text-right" style="margin-right:20px;">
<ion-label>{{refundPrice|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-alert trigger="refund" header="選択されているクレジットカードで払い戻ししてよろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickRefund($event)"></ion-alert>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PassRefundPage } from './pass-refund.page';
describe('PassRefundPage', () => {
let component: PassRefundPage;
let fixture: ComponentFixture<PassRefundPage>;
beforeEach(() => {
fixture = TestBed.createComponent(PassRefundPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { CommuterPassModel } from '../model/commuter-pass.model';
import { RouteService } from '../services/route.service';
/**
* 定期券払戻画面
*/
@Component({
selector: 'app-pass-refund',
templateUrl: './pass-refund.page.html',
styleUrls: ['./pass-refund.page.scss'],
})
export class PassRefundPage implements OnInit {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//カード番号
cardNumber?: string;
//定期券情報
commuterPassModel?: CommuterPassModel;
//購入金額
purchasePrice: number = 0;
//普通運賃
normalFare: number = 0;
//使用日数
useDays: number = 0;
//払戻手数料
refundFee: number = 0;
//払戻金額
refundPrice: number = 0;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) {
this.cardNumber = routeService.cardNumber;
this.commuterPassModel = routeService.commuterPassModel;
}
/**
* 初期化
*/
ngOnInit(): void {
this.purchasePrice = 40000;
this.normalFare = 200;
this.useDays = 30;
this.refundFee = 500;
this.refundPrice = 10500;
}
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigatePassSelect(this.cardNumber);
}
/**
* 払い戻し
*/
onClickRefund(event: any): void {
if (event.detail.role === 'confirm') {
//定期券継続
}
this.routeService.navigatePassSelect(this.cardNumber);
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassRegistPage } from './pass-regist.page';
const routes: Routes = [
{
path: '',
component: PassRegistPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassRegistPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PassRegistPageRoutingModule } from './pass-regist-routing.module';
import { PassRegistPage } from './pass-regist.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassRegistPageRoutingModule,
HeaderComponent
],
declarations: [PassRegistPage]
})
export class PassRegistPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="路線" [value]="routeId">
@for (kv of routeList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="使用期間" [value]="useTermId">
@for (kv of useTermList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="料金区分" [value]="priceRangeId">
@for (kv of priceRangeList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="margin-left:16px;">
<ion-label>使用開始日</ion-label>
</ion-col>
<ion-col>
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime" presentation="date" [value]="startDate"></ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="乗車停留所" [value]="getonStopId">
@for (kv of stopList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-select label="区間" [value]="getoffStopId">
@for (kv of stopList|keyvalue;track kv.key) {
<ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
}
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-center">
<ion-label>支払金額</ion-label>
</ion-col>
<ion-col class="ion-text-center">
<ion-label>{{price|number}}円</ion-label>
</ion-col>
</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-alert trigger="addpass" header="選択されているクレジットカードで支払いをしてよろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickAdd($event)"></ion-alert>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PassRegistPage } from './pass-regist.page';
describe('PassRegistPage', () => {
let component: PassRegistPage;
let fixture: ComponentFixture<PassRegistPage>;
beforeEach(() => {
fixture = TestBed.createComponent(PassRegistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { KeyValue } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
/**
* 定期券登録画面
*/
@Component({
selector: 'app-pass-regist',
templateUrl: './pass-regist.page.html',
styleUrls: ['./pass-regist.page.scss'],
})
export class PassRegistPage implements OnInit {
public confirmButtons = [
{
text: 'いいえ',
role: 'cancel'
},
{
text: 'はい',
role: 'confirm'
},
];
//路線一覧
routeList?: Map<string, string>;
//使用期間一覧
useTermList?: Map<string, string>;
//料金区分一覧
priceRangeList?: Map<string, string>;
//停留所一覧
stopList?: Map<string, string>;
//路線
routeId?: string;
//使用期間
useTermId?: string;
//料金区分
priceRangeId?: string;
//使用開始日
startDate?: string;
//乗車停留所
getonStopId?: string;
//区間
getoffStopId?: string;
//支払金額
price: number = 0;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* 初期化
*/
ngOnInit(): void {
//路線一覧
this.routeList = new Map();
for (let i = 0; i < 5; i++) {
let str = String(i + 1);
this.routeList.set(str, "路線" + str);
}
//使用期間一覧
this.useTermList = new Map();
this.useTermList.set("1", "1ヶ月");
this.useTermList.set("2", "3ヶ月");
this.useTermList.set("6", "6ヶ月");
//料金区分一覧
this.priceRangeList = new Map();
this.priceRangeList.set("1", "大人");
this.priceRangeList.set("2", "小児");
this.priceRangeList.set("3", "学生");
//停留所一覧
this.stopList = new Map();
for (let i = 0; i < 5; i++) {
let str = String(i + 1);
this.stopList.set(str, "停留所" + str);
}
}
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigatePassSelect(this.routeService.cardNumber);
}
/**
* 追加
*/
onClickAdd(event: any): void {
if (event.detail.role === 'confirm') {
//定期券登録
}
this.routeService.navigatePassSelect(this.routeService.cardNumber);
}
}
<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>
<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>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { PassInfoComponent } from './pass-info.component';
describe('PassInfoComponent', () => {
let component: PassInfoComponent;
let fixture: ComponentFixture<PassInfoComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ PassInfoComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(PassInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommuterPassModel } from 'src/app/model/commuter-pass.model';
/**
* 定期券情報
*/
@Component({
standalone: true,
selector: 'app-pass-info',
templateUrl: './pass-info.component.html',
styleUrls: ['./pass-info.component.scss'],
})
export class PassInfoComponent {
@Input() model?: CommuterPassModel;
@Output() clickChange: EventEmitter<void> = new EventEmitter();
@Output() clickContinue: EventEmitter<void> = new EventEmitter();
@Output() clickRefund: EventEmitter<void> = new EventEmitter();
/**
* コンストラクタ
*/
constructor() { }
/**
* 変更
*/
onClickChange(): void {
this.clickChange.emit();
}
/**
* 継続
*/
onClickContinue(): void {
this.clickContinue.emit();
}
/**
* 払戻
*/
onClickRefund(): void {
this.clickRefund.emit();
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassSelectPage } from './pass-select.page';
const routes: Routes = [
{
path: '',
component: PassSelectPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassSelectPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PassSelectPageRoutingModule } from './pass-select-routing.module';
import { PassSelectPage } from './pass-select.page';
import { HeaderComponent } from '../common/header/header.component';
import { PassInfoComponent } from './component/pass-info/pass-info.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassSelectPageRoutingModule,
HeaderComponent,
PassInfoComponent
],
declarations: [PassSelectPage]
})
export class PassSelectPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="2" (clickBack)="onClickBack()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid style="margin-top:10px;">
<ion-row>
<ion-col>
<ion-label>カード番号</ion-label>
</ion-col>
<ion-col>
<ion-label>****&nbsp;****&nbsp;****{{cardNumber}}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
<hr />
<div style="margin-left:10px;margin-right:10px;">
@for(model of commuterPassList;track model.routeId) {
<div style="margin-top:10px;">
<app-pass-info [model]="model" (clickChange)="onClickChange(model)" (clickContinue)="onClickContinue(model)"
(clickRefund)="onClickRefund(model)"></app-pass-info>
</div>
}
</div>
<div style="margin-top:10px;text-align:center;" (click)="onClickAddPass()">
<span class="add-link">+&nbsp;定期券を追加する</span>
</div>
</ion-content>
\ No newline at end of file
.add-link {
color: #0CACCD;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PassSelectPage } from './pass-select.page';
describe('PassSelectPage', () => {
let component: PassSelectPage;
let fixture: ComponentFixture<PassSelectPage>;
beforeEach(() => {
fixture = TestBed.createComponent(PassSelectPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { CommuterPassModel } from '../model/commuter-pass.model';
import { RouteService } from '../services/route.service';
/**
* 定期券選択画面
*/
@Component({
selector: 'app-pass-select',
templateUrl: './pass-select.page.html',
styleUrls: ['./pass-select.page.scss'],
})
export class PassSelectPage implements OnInit {
//カード番号
cardNumber?: string;
//定期券情報
commuterPassList?: CommuterPassModel[];
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) {
this.cardNumber = routeService.cardNumber;
}
/**
* 初期化
*/
ngOnInit() {
this.commuterPassList = new Array();
for (let i = 0; i < 2; i++) {
let model: CommuterPassModel = new CommuterPassModel();
model.routeId = "00000" + String(i);
model.routeName = "【◯◯◯系統】XXXXX→XXXXX行き";
model.startDate = "2024/07/01";
model.useTermId = "2";
model.useTermName = "3ヶ月";
model.priceRangeId = "0";
model.privateRangeName = "大人";
model.getonStopName = "XXXXX";
model.getoffStopName = "XXXXX";
this.commuterPassList.push(model);
}
}
/**
* 戻る
*/
onClickBack(): void {
this.routeService.navigateCardSelect();
}
/**
* 定期券区間変更
* @param model 定期券情報
*/
onClickChange(model: CommuterPassModel) {
this.routeService.navigatePassChange(model);
}
/**
* 定期券継続
* @param model 定期券情報
*/
onClickContinue(model: CommuterPassModel) {
this.routeService.navigatePassContinue(model);
}
/**
* 定期券払戻
* @param model 定期券情報
*/
onClickRefund(model: CommuterPassModel) {
this.routeService.navigatePassRefund(model);
}
/**
* 定期券登録
*/
onClickAddPass() {
this.routeService.navigatePassRegist();
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PasswordUpdatePage } from './password-update.page';
const routes: Routes = [
{
path: '',
component: PasswordUpdatePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PasswordUpdatePageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PasswordUpdatePageRoutingModule } from './password-update-routing.module';
import { PasswordUpdatePage } from './password-update.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PasswordUpdatePageRoutingModule,
HeaderComponent
],
declarations: [PasswordUpdatePage]
})
export class PasswordUpdatePageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-input type="email" label="メールアドレス" [value]="email"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input type="password" label="パスワード" [value]="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-right">
<ion-label style="margin-right:20px;">
<span style="font-size:12px;">※パスワードは、8文字以上としてください</span>
</ion-label>
</ion-col>
</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-col>
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PasswordUpdatePage } from './password-update.page';
describe('PasswordUpdatePage', () => {
let component: PasswordUpdatePage;
let fixture: ComponentFixture<PasswordUpdatePage>;
beforeEach(() => {
fixture = TestBed.createComponent(PasswordUpdatePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { RouteService } from '../services/route.service';
/**
* パスワード更新画面
*/
@Component({
selector: 'app-password-update',
templateUrl: './password-update.page.html',
styleUrls: ['./password-update.page.scss'],
})
export class PasswordUpdatePage {
//メールアドレス
email?: string;
//パスワード
password?: string;
/**
* コンストラクタ
* @param routeService 画面遷移サービス
*/
constructor(private routeService: RouteService) { }
/**
* 閉じる
*/
onClickClose(): void {
this.routeService.navigateHome();
}
/**
* 更新
*/
onClickUpdate(): void {
//パスワード更新
this.routeService.navigateHome();
}
}
import { TestBed } from '@angular/core/testing';
import { RouteService } from './route.service';
describe('RouteService', () => {
let service: RouteService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(RouteService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CommuterPassModel } from '../model/commuter-pass.model';
/**
* 画面遷移サービス
*/
@Injectable({
providedIn: 'root'
})
export class RouteService {
//カード番号
cardNumber?: string;
//定期券情報
commuterPassModel?: CommuterPassModel;
/**
* コンストラクタ
* @param router Router
*/
constructor(private router: Router) { }
/**
* ホーム画面へ遷移
*/
navigateHome() {
this.router.navigate(['home']);
}
/**
* 利用者登録画面へ遷移
*/
navigateUserRegist() {
this.router.navigate(['user-regist']);
}
/**
* パスワード更新画面へ遷移
*/
navigatePasswordUpdate() {
this.router.navigate(['password-update'])
}
/**
* メニュー画面へ遷移
*/
navigateMenu() {
this.router.navigate(['menu']);
}
/**
* クレジットカード選択画面へ遷移
*/
navigateCardSelect() {
this.router.navigate(['card-select'])
}
/**
* クレジットカード登録画面へ遷移
*/
navigateCardRegist() {
this.router.navigate(['card-regist']);
}
/**
* 定期券選択画面へ遷移
* @param cardNumber カード番号
*/
navigatePassSelect(cardNumber?: string) {
this.cardNumber = cardNumber;
this.router.navigate(['pass-select']);
}
/**
* 定期券登録画面へ遷移
*/
navigatePassRegist() {
this.router.navigate(['pass-regist']);
}
/**
* 定期券区間変更画面へ遷移
* @param commuterPassModel 定期券情報
*/
navigatePassChange(commuterPassModel: CommuterPassModel) {
this.commuterPassModel = commuterPassModel;
this.router.navigate(['pass-change']);
}
/**
* 定期券継続画面へ遷移
* @param commuterPassModel 定期券情報
*/
navigatePassContinue(commuterPassModel: CommuterPassModel) {
this.commuterPassModel = commuterPassModel;
this.router.navigate(['pass-continue']);
}
/**
* 定期券払戻画面へ遷移
* @param commuterPassModel 定期券情報
*/
navigatePassRefund(commuterPassModel: CommuterPassModel) {
this.commuterPassModel = commuterPassModel;
this.router.navigate(['pass-refund']);
}
/**
* 乗車履歴画面へ遷移
*/
navigateHistory() {
this.router.navigate(['history']);
}
/**
* 拒否リスト管理画面へ遷移
*/
navigateDenyList() {
this.router.navigate(['deny-list']);
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserRegistPage } from './user-regist.page';
const routes: Routes = [
{
path: '',
component: UserRegistPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserRegistPageRoutingModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { UserRegistPageRoutingModule } from './user-regist-routing.module';
import { UserRegistPage } from './user-regist.page';
import { HeaderComponent } from '../common/header/header.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
UserRegistPageRoutingModule,
HeaderComponent
],
declarations: [UserRegistPage]
})
export class UserRegistPageModule { }
<ion-header [translucent]="true">
<app-header [mode]="1" (clickClose)="onClickClose()"></app-header>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="氏名" [value]="name"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input label="フリガナ" [value]="nameKana"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input type="tel" label="電話番号" [value]="phoneNumber"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
@if (mode === 0) {
<ion-item>
<ion-input type="email" label="メールアドレス" [value]="email"></ion-input>
</ion-item>
} @else {
<ion-label>メールアドレス</ion-label><ion-label>{{email}}</ion-label>
}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-input type="password" label="パスワード" [value]="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="ion-text-right">
<ion-label style="margin-right:20px;">
<span style="font-size:12px;">※パスワードは、8文字以上としてください</span>
</ion-label>
</ion-col>
</ion-row>
<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-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-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-alert trigger="withdraw" header="退会してよろしいですか?" [buttons]="confirmButtons"
(didDismiss)="onClickWithdraw($event)"></ion-alert>
</ion-col>
}
</ion-row>
</ion-grid>
</ion-content>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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