Skip to content

D
Daewoo
Commit f9e712bd by Arjun
Options

initial push

parent afa5aea6
Showing with 1256 additions and 13 deletions
config.xml 0 → 100644
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
<icon height="40" src="resources/ios/icon/[email protected]" width="40" />
<icon height="60" src="resources/ios/icon/[email protected]" width="60" />
<icon height="48" src="resources/ios/icon/[email protected]" width="48" />
<icon height="55" src="resources/ios/icon/[email protected]" width="55" />
<icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="88" src="resources/ios/icon/[email protected]" width="88" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="172" src="resources/ios/icon/[email protected]" width="172" />
<icon height="196" src="resources/ios/icon/[email protected]" width="196" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
</widget>
ionic.config.json
{ {
"name": "first-app", "name": "first-app",
"integrations": {}, "integrations": {
"cordova": {}
},
"type": "angular" "type": "angular"
} }
package-lock.json
...@@ -1275,6 +1275,14 @@ ...@@ -1275,6 +1275,14 @@
"@types/cordova": "^0.0.34" "@types/cordova": "^0.0.34"
} }
}, },
"@ionic-native/header-color": {
"version": "5.17.1",
"resolved": "https://registry.npmjs.org/@ionic-native/header-color/-/header-color-5.17.1.tgz",
"integrity": "sha512-0uSCC0pkGZoeimUc/aqMOJb2Vb6LgNQj9HDWAxO62yEwvtlAh9lQiv5worJoamDxDYhXtvfSYMWgKMj5kGGyOw==",
"requires": {
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/splash-screen": { "@ionic-native/splash-screen": {
"version": "5.17.1", "version": "5.17.1",
"resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.17.1.tgz", "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.17.1.tgz",
...@@ -3084,6 +3092,11 @@ ...@@ -3084,6 +3092,11 @@
"webpack-log": "^2.0.0" "webpack-log": "^2.0.0"
} }
}, },
"cordova-plugin-headercolor": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-headercolor/-/cordova-plugin-headercolor-1.0.0.tgz",
"integrity": "sha1-AgrNlDeH7gOdZ/Z56NnqbTiSAxY="
},
"core-js": { "core-js": {
"version": "2.6.10", "version": "2.6.10",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz",
......
package.json
...@@ -20,9 +20,11 @@ ...@@ -20,9 +20,11 @@
"@angular/platform-browser-dynamic": "~8.1.2", "@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2", "@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0", "@ionic-native/core": "^5.0.0",
"@ionic-native/header-color": "^5.17.1",
"@ionic-native/splash-screen": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0", "@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1", "@ionic/angular": "^4.7.1",
"cordova-plugin-headercolor": "^1.0.0",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"rxjs": "~6.5.1", "rxjs": "~6.5.1",
"tslib": "^1.9.0", "tslib": "^1.9.0",
...@@ -54,5 +56,10 @@ ...@@ -54,5 +56,10 @@
"tslint": "~5.15.0", "tslint": "~5.15.0",
"typescript": "~3.4.3" "typescript": "~3.4.3"
}, },
"description": "An Ionic project" "description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-headercolor": {}
}
}
} }
resources/README.md 0 → 100644
These are Cordova resources. You can replace icon.png and splash.png and run
`ionic cordova resources` to generate custom icons and splash screens for your
app. See `ionic cordova resources --help` for details.
Cordova reference documentation:
- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
resources/android/xml/network_security_config.xml 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
</domain-config>
</network-security-config>
src/app/app-routing.module.ts
...@@ -4,6 +4,22 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; ...@@ -4,6 +4,22 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '', redirectTo: 'home', 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',
loadChildren: () => import('./policies/policies.module').then( m => m.PoliciesPageModule)
},
{
path: 'modal',
loadChildren: () => import('./modal/modal.module').then( m => m.ModalPageModule)
},
{
path: 'travellerinfo',
loadChildren: () => import('./travellerinfo/travellerinfo.module').then( m => m.TravellerinfoPageModule)
},
{
path: 'passengerdetails',
loadChildren: () => import('./passengerdetails/passengerdetails.module').then( m => m.PassengerdetailsPageModule)
},
]; ];
@NgModule({ @NgModule({
...@@ -12,4 +28,8 @@ const routes: Routes = [ ...@@ -12,4 +28,8 @@ const routes: Routes = [
], ],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule {
}
src/app/app.component.ts
...@@ -4,6 +4,9 @@ import { Platform } from '@ionic/angular'; ...@@ -4,6 +4,9 @@ import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: 'app.component.html', templateUrl: 'app.component.html',
...@@ -13,7 +16,7 @@ export class AppComponent { ...@@ -13,7 +16,7 @@ export class AppComponent {
constructor( constructor(
private platform: Platform, private platform: Platform,
private splashScreen: SplashScreen, private splashScreen: SplashScreen,
private statusBar: StatusBar private statusBar: StatusBar,
) { ) {
this.initializeApp(); this.initializeApp();
} }
...@@ -24,4 +27,9 @@ export class AppComponent { ...@@ -24,4 +27,9 @@ export class AppComponent {
this.splashScreen.hide(); this.splashScreen.hide();
}); });
} }
} }
src/app/app.module.ts
...@@ -9,10 +9,13 @@ import { StatusBar } from '@ionic-native/status-bar/ngx'; ...@@ -9,10 +9,13 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import {ModalPageModule} from './modal/modal.module';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
entryComponents: [], entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,ModalPageModule],
providers: [ providers: [
StatusBar, StatusBar,
SplashScreen, SplashScreen,
......
src/app/home/home.page.html
<ion-header> <ion-header>
<ion-toolbar> <ion-grid>
<ion-title> <ion-row>
Ionic Blank <ion-col size="1">
</ion-title> <img src="assets/arrow-left.png">
</ion-toolbar> </ion-col>
<ion-col size="9">
<h1>Daewoo Express</h1>
<h2>KHI - LHR Sep 9</h2>
</ion-col>
<ion-col size="2">
<button>Reset</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="ion-padding"> <div class="ion-padding">
The world is your oyster. <img src="assets/steering.png" class="steering-c" alt="Steering">
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</div> </div>
<ion-grid class="seat-grid">
<ion-row>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-1" />
<label class="label-for-check" for="seat-1">01</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-2" />
<label class="label-for-check" for="seat-2">02</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-3" />
<label class="label-for-check" for="seat-3">03</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-4" />
<label class="label-for-check" for="seat-4">04</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--second row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-5" />
<label class="label-for-check" for="seat-5">05</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-6" />
<label class="label-for-check" for="seat-6">06</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-7" />
<label class="label-for-check" for="seat-7">07</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-8" />
<label class="label-for-check" for="seat-8">08</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--third row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-9" />
<label class="label-for-check" for="seat-9">09</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-10" />
<label class="label-for-check" for="seat-10">10</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-11" />
<label class="label-for-check" for="seat-11">11</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-12" />
<label class="label-for-check" for="seat-12">12</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--fourth row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-13" />
<label class="label-for-check" for="seat-13">13</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-14" />
<label class="label-for-check" for="seat-14">14</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-15" />
<label class="label-for-check" for="seat-15">15</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-16" />
<label class="label-for-check" for="seat-16">16</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--fourth row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-17" />
<label class="label-for-check" for="seat-17">17</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label ifbooked" id="seat-18" />
<label class="label-for-check" for="seat-18">18</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-19" />
<label class="label-for-check" for="seat-19">19</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-20" />
<label class="label-for-check" for="seat-20">20</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--fourth row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-21" />
<label class="label-for-check" for="seat-21">21</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-22" />
<label class="label-for-check" for="seat-22">22</label>
</div>
</ion-col>
<ion-col size="4"></ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-23" />
<label class="label-for-check" for="seat-23">23</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-24" />
<label class="label-for-check" for="seat-24">24</label>
</div>
</ion-col>
</ion-row>
<ion-row> <!--last row -->
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-25" />
<label class="label-for-check" for="seat-25">25</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-26" />
<label class="label-for-check" for="seat-26">26</label>
</div>
</ion-col>
<ion-col size="4">
<div>
<input type="checkbox" class="check-with-label" id="seat-27" />
<label class="label-for-check" for="seat-27">27</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-28" />
<label class="label-for-check" for="seat-28">28</label>
</div>
</ion-col>
<ion-col size="2">
<div>
<input type="checkbox" class="check-with-label" id="seat-29" />
<label class="label-for-check" for="seat-29">29</label>
</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid class="seat-info ion-padding">
<ion-row>
<ion-col size="4">
<img src="assets/seat.png" alt="Seat">
<p>Available Seat</p>
</ion-col>
<ion-col size="4">
<img src="assets/seat-checked.png" alt="Seat">
<p>Selected Seat</p>
</ion-col>
<ion-col size="4">
<img src="assets/seat-booked.png" alt="Seat">
<p>Booked Seat</p>
</ion-col>
</ion-row>
<span>Your session will expire within 15 minutes </span>
</ion-grid>
</ion-content> </ion-content>
<ion-footer>
<ion-grid>
<ion-row>
<ion-col size="4">
<h1>Rs.00.00</h1>
</ion-col>
<ion-col size="4">
<span (click)="openModal()">Policies <img src="assets/arrow-up.png" alt="Arrow Up"></span>
</ion-col>
<ion-col size="4">
<button (click)="navLink('policies')">Next</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
src/app/home/home.page.scss
ion-header {
padding: 0 16px;
&:after {
content: none;
}
h1 {
padding-left: 25px;
font-size: 18px;
margin-top: 0;
margin-bottom: 2px;
padding-left: 3px;
font-weight: 700;
}
h2 {
padding-left: 25px;
font-size: 16px;
margin-top: 0;
padding-left: 3px;
color: #666666;
}
button {
background-color: transparent;
margin-top: 10px;
font-size: 14px;
}
}
ion-content {
padding-top: 30px;
.steering-c {
float: right;
}
.seat-grid {
margin-top: 35px;
text-align: center;
.check-with-label {
-webkit-appearance: none;
background-image: url("../../assets/seat.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 28px;
height: 100%;
padding: 17px;
border-radius: 5px;
outline: none;
}
.check-with-label:checked {
background-image: url("../../assets/seat-checked.png");
}
.label-for-check {
position: absolute;
top: 8px;
left: 0;
right: 0;
font-size: 12px;
}
.check-with-label:checked + .label-for-check {
color: #f26a21;
}
// ifbooked
.check-with-label.ifbooked {
background-image: url("../../assets/seat-booked.png") !important;
}
.check-with-label.ifbooked + .label-for-check {
color: #d3d6d9;
}
}
.seat-info {
padding: 20px 0;
text-align: center;
p {
font-size: 12px;
}
span {
font-size: 12px;
}
}
}
ion-footer {
box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.15);
text-align: center;
h1 {
font-size: 18px;
font-weight: 700;
margin: 8px 0;
}
span {
background-color: transparent;
font-size: 16px;
font-weight: 700;
margin: 8px 0;
display: inline-block;
color: #666666;
}
button {
background-color: #f26a21;
color: #fff;
padding: 10px 25px;
}
}
src/app/home/home.page.ts
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: 'home.page.html', templateUrl: 'home.page.html',
...@@ -7,6 +13,34 @@ import { Component } from '@angular/core'; ...@@ -7,6 +13,34 @@ import { Component } from '@angular/core';
}) })
export class HomePage { export class HomePage {
constructor() {} dataReturned:any;
constructor(
private modalController: ModalController,
private router: Router
) {
}
async openModal() {
const modal = await this.modalController.create({
component: ModalPage
});
modal.onDidDismiss().then((dataReturned) => {
if (dataReturned !== null) {
this.dataReturned = dataReturned.data;
//alert('Modal Sent Data :'+ dataReturned);
}
});
return await modal.present();
}
navLink(path:any,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
} }
src/app/modal/modal-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ModalPage } from './modal.page';
const routes: Routes = [
{
path: '',
component: ModalPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ModalPageRoutingModule {}
src/app/modal/modal.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 { ModalPageRoutingModule } from './modal-routing.module';
import { ModalPage } from './modal.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ModalPageRoutingModule
],
declarations: [ModalPage]
})
export class ModalPageModule {}
src/app/modal/modal.page.html 0 → 100644
<div class="pop-box">
<button class="close-btn" (click)="closeModal()"><img src="assets/close.png" alt="Close"></button>
<p>Please select a <br>
seat to proceed
</p>
<button class="m-button" (click)="closeModal()">GOT IT</button>
</div>
src/app/modal/modal.page.scss 0 → 100644
.pop-box {
text-align: center;
background-color: #fff;
.close-btn {
position: absolute;
right: -6px;
background-color: transparent;
outline: none;
}
.m-button {
background-color: #F37836;
color: #fff;
width: 100%;
padding: 15px;
}
}
src/app/modal/modal.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ModalPage } from './modal.page';
describe('ModalPage', () => {
let component: ModalPage;
let fixture: ComponentFixture<ModalPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ModalPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(ModalPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/modal/modal.page.ts 0 → 100644
import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-modal',
templateUrl: './modal.page.html',
styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
constructor(private modalController: ModalController) { }
ngOnInit() {
}
async closeModal() {
await this.modalController.dismiss();
}
}
src/app/passengerdetails/passengerdetails-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PassengerdetailsPage } from './passengerdetails.page';
const routes: Routes = [
{
path: '',
component: PassengerdetailsPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PassengerdetailsPageRoutingModule {}
src/app/passengerdetails/passengerdetails.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 { PassengerdetailsPageRoutingModule } from './passengerdetails-routing.module';
import { PassengerdetailsPage } from './passengerdetails.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PassengerdetailsPageRoutingModule
],
declarations: [PassengerdetailsPage]
})
export class PassengerdetailsPageModule {}
src/app/passengerdetails/passengerdetails.page.html 0 → 100644
<ion-header>
<ion-grid>
<ion-row>
<ion-col size="1">
<img src="assets/arrow-left.png">
</ion-col>
<ion-col size="11">
<h1>Checkout</h1>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content padding>
<h1>Passenger Details</h1>
<ion-grid>
<ion-row>
<ion-col size="5">
<h2>Name</h2>
<p>John Dawson</p>
</ion-col>
<ion-col size="2">
<h2>Age</h2>
<p>24</p>
</ion-col>
<ion-col size="5">
<h2>Phone Number</h2>
<p>03360333421</p>
</ion-col>
</ion-row>
</ion-grid>
<img src="assets/line.png" alt="Line">
<div class="brd-details">
<h1>Boarding Details</h1>
<table>
<tr>
<td>Bus Route</td>
<td>:</td>
<td>Karachi - Lahore</td>
</tr>
<tr>
<td>Service provider</td>
<td>:</td>
<td>Daewoo</td>
</tr>
<tr>
<td>Departure Date</td>
<td>:</td>
<td>Sep 6, Thu</td>
</tr>
<tr>
<td>Departure time</td>
<td>:</td>
<td>8:35</td>
</tr>
<tr>
<td>Arrival Date</td>
<td>:</td>
<td>Sep 12, Wed</td>
</tr>
<tr>
<td>Arrival Time</td>
<td>:</td>
<td>15:35</td>
</tr>
<tr>
<td>Seat No</td>
<td>:</td>
<td>21, 22, 23</td>
</tr>
<tr>
<td>Boarding Point</td>
<td>:</td>
<td>Daewoo Station Karachi</td>
</tr>
<tr>
<td>Bus Type</td>
<td>:</td>
<td>AC Sleeper 421</td>
</tr>
</table>
</div>
<div class="item-box">
<p>1 Item(s), Total: <span>Rs. 2,370</span></p>
</div>
</ion-content>
src/app/passengerdetails/passengerdetails.page.scss 0 → 100644
ion-header {
padding: 0 16px;
&:after {
content: none;
}
h1 {
padding-left: 25px;
font-size: 18px;
margin-top: 0;
padding-left: 3px;
font-weight: 700;
}
}
ion-content {
h1 {
font-size: 18px;
margin-top: 0;
font-weight: 700;
color: #4C4C4C;
}
h2 {
font-size: 14px;
margin-top: 0;
font-weight: 700;
}
p {
font-size: 14px;
margin-top: 0;
color: #4C4C4C;
}
.brd-details {
margin-top: 20px;
tr {
margin-top: 15px;
display: block;
td {
padding-right: 15px;
}
td:nth-child(1){
width: 140px;
}
}
}
.item-box {
margin-top: 25px;
padding: 15px 0;
text-align: right;
border-top: 1px solid #dadada;
p{
span {
font-size: 18px;
font-weight: 700;
color: #E73511;
}
}
}
}
\ No newline at end of file
src/app/passengerdetails/passengerdetails.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { PassengerdetailsPage } from './passengerdetails.page';
describe('PassengerdetailsPage', () => {
let component: PassengerdetailsPage;
let fixture: ComponentFixture<PassengerdetailsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PassengerdetailsPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(PassengerdetailsPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/passengerdetails/passengerdetails.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-passengerdetails',
templateUrl: './passengerdetails.page.html',
styleUrls: ['./passengerdetails.page.scss'],
})
export class PassengerdetailsPage implements OnInit {
constructor() {
}
ngOnInit() {
}
}
src/app/policies/policies-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PoliciesPage } from './policies.page';
const routes: Routes = [
{
path: '',
component: PoliciesPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PoliciesPageRoutingModule {}
src/app/policies/policies.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 { PoliciesPageRoutingModule } from './policies-routing.module';
import { PoliciesPage } from './policies.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PoliciesPageRoutingModule
],
declarations: [PoliciesPage]
})
export class PoliciesPageModule {}
src/app/policies/policies.page.html 0 → 100644
<ion-header>
<button (click)="navLink('home')"><img src="assets/arrow-left.png" alt=""></button>
<h1><ion-icon name="arrow-down"></ion-icon> Bus Policies</h1>
</ion-header>
<ion-content padding>
<h1>Cancellation Policy</h1>
<ion-grid>
<ion-row>
<ion-col size="9">
<h2>Event</h2>
<h3>Cancelled 3 hrs + before travel</h3>
</ion-col>
<ion-col size="3">
<h2>Charges</h2>
<h3>25%</h3>
</ion-col>
<ion-col size="12">
<p>Bus cannot be cancelled 0-3 hrs before travel. Cancelled
charges are applicable on the total ticket value. The bus
operator is not responsible for loss of personal items
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
src/app/policies/policies.page.scss 0 → 100644
ion-header {
padding: 16px 16px;
&:after {
content: none;
}
img {
float: left;
}
h1 {
text-align: center;
color: #333333;
font-weight: 400;
font-size: 18px;
margin-top: 0;
margin-bottom: 0;
}
}
ion-content {
h1 {
font-size: 18px;
font-weight: 700;
margin-left: 5px;
}
h2 {
font-size: 14px;
font-weight: 700;
}
h3 {
font-size: 12px;
color: #666666;
margin-top: 10px;
}
p {
font-size: 12px;
color: #666666;
margin-top: 10px;
line-height: 1.5;
}
}
\ No newline at end of file
src/app/policies/policies.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { PoliciesPage } from './policies.page';
describe('PoliciesPage', () => {
let component: PoliciesPage;
let fixture: ComponentFixture<PoliciesPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PoliciesPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(PoliciesPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/policies/policies.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-policies',
templateUrl: './policies.page.html',
styleUrls: ['./policies.page.scss'],
})
export class PoliciesPage implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
navLink(path:any,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
}
src/app/travellerinfo/travellerinfo-routing.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TravellerinfoPage } from './travellerinfo.page';
const routes: Routes = [
{
path: '',
component: TravellerinfoPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TravellerinfoPageRoutingModule {}
src/app/travellerinfo/travellerinfo.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 { TravellerinfoPageRoutingModule } from './travellerinfo-routing.module';
import { TravellerinfoPage } from './travellerinfo.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TravellerinfoPageRoutingModule
],
declarations: [TravellerinfoPage]
})
export class TravellerinfoPageModule {}
src/app/travellerinfo/travellerinfo.page.html 0 → 100644
<ion-header>
<ion-grid>
<ion-row>
<ion-col size="1">
<img src="assets/arrow-left.png">
</ion-col>
<ion-col size="11">
<h1>Daewoo Express</h1>
<h2>KHI - LHR Sep 9</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content padding>
<h1>Traveller Information</h1>
<form>
<div class="input-box">
<label position="stacked">Name </label>
<input required type="text">
</div>
<div class="input-box">
<label position="stacked">Year of birth </label>
<select>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
</select>
</div>
<div class="input-box">
<label position="stacked">Phone </label>
<input required type="tel">
</div>
<div class="input-box">
<label position="stacked">Email (For email delivery) </label>
<input required type="tel">
</div>
<div class="input-box">
<label position="stacked">CNIC</label>
<input required type="tel">
</div>
</form>
</ion-content>
src/app/travellerinfo/travellerinfo.page.scss 0 → 100644
ion-header {
padding: 0 16px;
&:after {
content: none;
}
h1 {
padding-left: 25px;
font-size: 18px;
margin-top: 0;
padding-left: 3px;
font-weight: 700;
}
h2 {
padding-left: 25px;
font-size: 14px;
margin-top: 0;
margin-bottom: 0;
padding-left: 3px;
}
}
ion-content {
h1 {
font-size: 16px;
font-weight: 700;
color: #333333;
}
form {
margin-top: 20px;
.input-box {
margin-top: 20px;
label {
font-size: 14px;
color: #666666;
}
input, select {
border-bottom: 1px solid #e8e8e8;
background-color: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
display: block;
width: 100%;
outline: 0;
font-size: 16px;
padding-top: 3px;
color: #4c4c4c;
font-weight: 500;
}
}
}
}
\ No newline at end of file
src/app/travellerinfo/travellerinfo.page.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { TravellerinfoPage } from './travellerinfo.page';
describe('TravellerinfoPage', () => {
let component: TravellerinfoPage;
let fixture: ComponentFixture<TravellerinfoPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TravellerinfoPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(TravellerinfoPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
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