Skip to content

D
Daewoo
Commit 1b65d7c8 by Arjun
Options

tab

parent 8211acde
Showing with 492 additions and 3 deletions
package-lock.json
...@@ -5023,6 +5023,35 @@ ...@@ -5023,6 +5023,35 @@
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==", "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true "dev": true
}, },
"ionic-angular": {
"version": "3.9.9",
"resolved": "https://registry.npmjs.org/ionic-angular/-/ionic-angular-3.9.9.tgz",
"integrity": "sha512-XJGWbBrLEPRZDAPDOv0mFUHuAkqld/YqepPEBi9j6z235gbfX1CJL5A4xciCq0UMh5UDPlTt/CvRy8cRt9XCgQ=="
},
"ionic-module-template": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/ionic-module-template/-/ionic-module-template-0.0.12.tgz",
"integrity": "sha1-VgBZ1XJNn/H4OESw37l5QehzECI="
},
"ionic-tab-slider": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ionic-tab-slider/-/ionic-tab-slider-0.0.7.tgz",
"integrity": "sha512-SdQGXaVr2KfQRUIp8ZALUDHgM+4sFO0WNhs3V914xRb6mgGlNTcHgc33JOcFwIdX5BRiZrVF7Z8MweCwhtzfog==",
"requires": {
"@angular/forms": "^5.2.9",
"ionic-angular": "^3.9.2"
},
"dependencies": {
"@angular/forms": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.11.tgz",
"integrity": "sha512-wBllFlIubPclAFRXUc84Kc7TMeKOftzrQraVZ7ooTNeFLLa/FZLN2K8HGyRde8X/XDsMu1XAmjNfkz++spwTzA==",
"requires": {
"tslib": "^1.7.1"
}
}
}
},
"ionicons": { "ionicons": {
"version": "4.6.3", "version": "4.6.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz",
......
package.json
...@@ -26,6 +26,8 @@ ...@@ -26,6 +26,8 @@
"@ionic/angular": "^4.7.1", "@ionic/angular": "^4.7.1",
"cordova-plugin-headercolor": "^1.0.0", "cordova-plugin-headercolor": "^1.0.0",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"ionic-module-template": "0.0.12",
"ionic-tab-slider": "0.0.7",
"rxjs": "~6.5.1", "rxjs": "~6.5.1",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"zone.js": "~0.9.1" "zone.js": "~0.9.1"
......
src/app/app-routing.module.ts
...@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; ...@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: 'passengerdetails', pathMatch: 'full' }, { path: '', redirectTo: 'mytrips', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)}, { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
{ {
path: 'policies', path: 'policies',
...@@ -20,6 +20,14 @@ const routes: Routes = [ ...@@ -20,6 +20,14 @@ const routes: Routes = [
path: 'passengerdetails', path: 'passengerdetails',
loadChildren: () => import('./passengerdetails/passengerdetails.module').then( m => m.PassengerdetailsPageModule) loadChildren: () => import('./passengerdetails/passengerdetails.module').then( m => m.PassengerdetailsPageModule)
}, },
{
path: 'payment',
loadChildren: () => import('./payment/payment.module').then( m => m.PaymentPageModule)
},
{
path: 'mytrips',
loadChildren: () => import('./mytrips/mytrips.module').then( m => m.MytripsPageModule)
},
]; ];
@NgModule({ @NgModule({
......
src/app/app.module.ts
...@@ -12,10 +12,14 @@ import { AppRoutingModule } from './app-routing.module'; ...@@ -12,10 +12,14 @@ import { AppRoutingModule } from './app-routing.module';
import {ModalPageModule} from './modal/modal.module'; import {ModalPageModule} from './modal/modal.module';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
entryComponents: [], entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,ModalPageModule], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ModalPageModule],
providers: [ providers: [
StatusBar, StatusBar,
SplashScreen, SplashScreen,
......
src/app/mytrips/mytrips-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MytripsPage } from './mytrips.page';
const routes: Routes = [
{
path: '',
component: MytripsPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MytripsPageRoutingModule {}
src/app/mytrips/mytrips.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MytripsPageRoutingModule } from './mytrips-routing.module';
import { MytripsPage } from './mytrips.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
MytripsPageRoutingModule
],
declarations: [MytripsPage]
})
export class MytripsPageModule {}
src/app/mytrips/mytrips.page.html 0 → 100644
<ion-header>
<ion-grid class="no-padding">
<ion-row class="no-padding">
<ion-col size="1" class="no-padding">
<img src="assets/arrow-left.png">
</ion-col>
<ion-col size="11" class="no-padding">
<h1>My Trips</h1>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<div color="primary" class="tab-head">
<ion-segment scrollable>
<ion-segment-button value="0" checked>
<h2>To Pay</h2>
</ion-segment-button>
<ion-segment-button value="1">
<h2>Upcoming Bookings</h2>
</ion-segment-button>
<ion-segment-button value="2">
<h2>All Bookings</h2>
</ion-segment-button>
</ion-segment>
</div>
<ion-content>
<!-- <div class="">
hi
</div>
<ion-slides>
<ion-slide class="slide-1">
<img src="assets/bus.png" alt="Bus">
<h1>No trips have been scheduled till now.</h1>
<h2>Please go to Bus Search to make a booking</h2>
<button>Make a Search</button>
</ion-slide>
<ion-slide class="slide-2">
Publish
</ion-slide>
<ion-slide class="slide-3">
Topic
</ion-slide>
</ion-slides> -->
<div class="tab-content">
<div [hidden]="tab == 'tab2'">Tab 1 Content</div>
<div [hidden]="tab == 'tab1'">Tab 2 Content</div>
</div>
</ion-content>
<ion-footer>
<div [class.active]="tab == 'tab1'" (click)="tabClick('tab1')">Tab 1</div>
<div [class.active]="tab == 'tab2'" (click)="tabClick('tab2')">Tab 2</div>
<!-- <ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Bus Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" >
<ion-icon name="contacts"></ion-icon>
<ion-label>My Bookings</ion-label>
</ion-tab-button>
</ion-tab-bar> -->
</ion-footer>
src/app/mytrips/mytrips.page.scss 0 → 100644
ion-header {
padding: 16px 12px;
&:after {
content: none;
}
h1 {
padding-left: 25px;
font-size: 18px;
margin-top: 0;
padding-left: 3px;
font-weight: 700;
}
}
.tab-head {
h2 {
margin-top: 10px;
font-size: 16px;
text-transform: capitalize;
}
ion-segment-button {
background-color: #E7E7E7;
border: 0;
box-shadow: none;
color: #333333;
}
segment-button-checked {
segment-button-indicator {
background-color: #F26B21 !important;
}
}
}
ion-segment-button {
min-width: 70px;
}
ion-slides,
ion-slide {
height: 100%;
display: block;
margin-top: 50px;
h1 {
font-size: 18px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 0;
}
h2 {
font-size: 18px;
font-weight: 400;
color: #6F6F6F;
margin-top: 3px;
}
button {
background-color: #F26B21;
color: #fff;
padding: 12px 25px;
width: 75%;
font-size: 18px;
margin-top: 25px;
border-radius: 5px;
}
}
.tab_content{
}
ion-footer{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
div{
width: 49%;
height:50px;
text-align: center;
padding: 15px;
font-size: 16px;
display: inline-block;
}
}
.active{
background-color: #F26B21;
color: #fff;
}
\ No newline at end of file
src/app/mytrips/mytrips.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { MytripsPage } from './mytrips.page';
describe('MytripsPage', () => {
let component: MytripsPage;
let fixture: ComponentFixture<MytripsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MytripsPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(MytripsPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/mytrips/mytrips.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mytrips',
templateUrl: './mytrips.page.html',
styleUrls: ['./mytrips.page.scss'],
})
export class MytripsPage implements OnInit {
tab:any;
constructor() {
this.tab="tab1";
}
tabClick(type) {
this.tab=type;
}
ngOnInit() {
var segment = document.querySelector('ion-segment');
var slides = document.querySelector('ion-slides');
segment.addEventListener('ionChange', (ev) => onSegmentChange(ev));
slides.addEventListener('ionSlideDidChange', (ev) => onSlideDidChange(ev));
// On Segment change slide to the matching slide
function onSegmentChange(ev) {
slideTo(ev.detail.value);
}
function slideTo(index) {
slides.slideTo(index);
}
// On Slide change update segment to the matching value
async function onSlideDidChange(ev) {
var index = await slides.getActiveIndex();
clickSegment(index);
}
function clickSegment(index) {
segment.value = index;
}
}
}
src/app/payment/payment-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PaymentPage } from './payment.page';
const routes: Routes = [
{
path: '',
component: PaymentPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PaymentPageRoutingModule {}
src/app/payment/payment.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PaymentPageRoutingModule } from './payment-routing.module';
import { PaymentPage } from './payment.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PaymentPageRoutingModule
],
declarations: [PaymentPage]
})
export class PaymentPageModule {}
src/app/payment/payment.page.html 0 → 100644
<ion-header>
<ion-grid class="no-padding">
<ion-row class="no-padding">
<ion-col size="1" class="no-padding">
<img src="assets/arrow-left.png">
</ion-col>
<ion-col size="11" class="no-padding">
<h1>Credit Card/Debit Card</h1>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content>
<ion-grid padding>
<ion-row class="no-padding">
<ion-col size="6" class="no-padding">
<img src="assets/visa.png" alt="Visa">
<img src="assets/mastercard.png" alt="Mastercard">
</ion-col>
<ion-col size="6" class="no-padding text-right">
<img src="assets/guarantee-icon.png" alt="Guarantee">
<img src="assets/guarantee.png" class="pl-5" alt="Guarantee">
</ion-col>
</ion-row>
</ion-grid>
<form>
<input type="text" placeholder="Account Number">
</form>
</ion-content>
src/app/payment/payment.page.scss 0 → 100644
ion-header {
padding: 16px 12px;
&:after {
content: none;
}
h1 {
padding-left: 25px;
font-size: 18px;
margin-top: 0;
padding-left: 3px;
font-weight: 700;
}
}
ion-content {
form {
padding: 16px;
input {
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #999;
outline: none;
width: 100%;
padding: 5px 0;
margin-top: 10px;
}
}
}
.text-right {
text-align: right;
}
.pl-5 {
padding-left: 5px;
}
.no-padding {
padding: 0;
}
\ No newline at end of file
src/app/payment/payment.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { PaymentPage } from './payment.page';
describe('PaymentPage', () => {
let component: PaymentPage;
let fixture: ComponentFixture<PaymentPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PaymentPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(PaymentPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/payment/payment.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-payment',
templateUrl: './payment.page.html',
styleUrls: ['./payment.page.scss'],
})
export class PaymentPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/global.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap'); @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap');
body { body, h1, h2, h3, h4, h5, h6, p, span, button, a {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
} }
...@@ -45,3 +45,4 @@ body { ...@@ -45,3 +45,4 @@ body {
.modal-wrapper.sc-ion-modal-md { .modal-wrapper.sc-ion-modal-md {
overflow: show !important; overflow: show !important;
} }
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