Skip to content

A
allorepar
Commit 9c897969 by amalk
Options

31-07-2019

parent db4755ad
Showing with 2049 additions and 13 deletions
angular.json
...@@ -40,6 +40,9 @@ ...@@ -40,6 +40,9 @@
}, },
{ {
"input": "src/app/app.scss" "input": "src/app/app.scss"
},
{
"input": "node_modules/angular-calendar/css/angular-calendar.css"
} }
], ],
"scripts": [], "scripts": [],
......
package-lock.json
...@@ -1163,6 +1163,40 @@ ...@@ -1163,6 +1163,40 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true "dev": true
}, },
"angular-calendar": {
"version": "0.27.14",
"resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.27.14.tgz",
"integrity": "sha512-Nbv9ZMpqeqBmn8vZM1FCNVB51Jz0t3FkKhC2Iod4qULRNt5etofvUTw1rbmv36k170biJCltl2XToz2eC+ZDrQ==",
"requires": {
"angular-draggable-droppable": "^4.3.2",
"angular-resizable-element": "^3.2.4",
"calendar-utils": "^0.3.1",
"positioning": "^1.4.0",
"tslib": "^1.9.0"
}
},
"angular-draggable-droppable": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.3.2.tgz",
"integrity": "sha512-x3Fg+mggoBumO41XNzEztWnl92ymGXoVgrYKX2InnIg8i/PIGv7npi8pBvMzKQSKHWtqww3nBHAVcWmIE/3Z0g==",
"requires": {
"dom-autoscroller": "^2.3.4",
"tslib": "^1.9.0"
}
},
"angular-resizable-element": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.4.tgz",
"integrity": "sha512-Qd/WRTaJgmDJoeWzmK0F52I3X0nLtFPirmsVC2ceic4EQ/3X2yYFCOWgCtH+PvMZct6Whoky3OQLqCpFXQsKHQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"animation-frame-polyfill": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.1.tgz",
"integrity": "sha1-X1rZk6eHlL0Xas3lttzmKGdBDJ0="
},
"ansi-colors": { "ansi-colors": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
...@@ -1283,6 +1317,11 @@ ...@@ -1283,6 +1317,11 @@
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==", "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
"dev": true "dev": true
}, },
"array-from": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
"integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU="
},
"array-union": { "array-union": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
...@@ -2030,6 +2069,11 @@ ...@@ -2030,6 +2069,11 @@
"unset-value": "^1.0.0" "unset-value": "^1.0.0"
} }
}, },
"calendar-utils": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.3.1.tgz",
"integrity": "sha512-0XSJ/dP6QDeO9higbWZmf/ZE9mAUq05HdUONbSNpmwhKfKQ8zf6fMdU6M0ySv0q+TkdwjaGy0DFTRzSUZMsTVw=="
},
"caller-callsite": { "caller-callsite": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
...@@ -2601,6 +2645,14 @@ ...@@ -2601,6 +2645,14 @@
"sha.js": "^2.4.8" "sha.js": "^2.4.8"
} }
}, },
"create-point-cb": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-point-cb/-/create-point-cb-1.2.0.tgz",
"integrity": "sha1-G85H/E/AGFXuEhONZ2sMsqfLznE=",
"requires": {
"type-func": "^1.0.1"
}
},
"cross-spawn": { "cross-spawn": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
...@@ -2694,6 +2746,11 @@ ...@@ -2694,6 +2746,11 @@
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
},
"date-format": { "date-format": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.0.0.tgz", "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.0.0.tgz",
...@@ -2950,6 +3007,32 @@ ...@@ -2950,6 +3007,32 @@
"buffer-indexof": "^1.0.0" "buffer-indexof": "^1.0.0"
} }
}, },
"dom-autoscroller": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/dom-autoscroller/-/dom-autoscroller-2.3.4.tgz",
"integrity": "sha512-HcAdt/2Dq9x4CG6LWXc2x9Iq0MJPAu8fuzHncclq7byufqYEYVtx9sZ/dyzR+gdj4qwEC9p27Lw1G2HRRYX6jQ==",
"requires": {
"animation-frame-polyfill": "^1.0.0",
"create-point-cb": "^1.0.0",
"dom-mousemove-dispatcher": "^1.0.1",
"dom-plane": "^1.0.1",
"dom-set": "^1.0.1",
"type-func": "^1.0.1"
}
},
"dom-mousemove-dispatcher": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dom-mousemove-dispatcher/-/dom-mousemove-dispatcher-1.0.1.tgz",
"integrity": "sha1-okpt35Oye7NpT3IIdUalf8fpFA8="
},
"dom-plane": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/dom-plane/-/dom-plane-1.0.2.tgz",
"integrity": "sha1-+MheaXxYfxR+j8L6wd4HjB/kFyw=",
"requires": {
"create-point-cb": "^1.0.0"
}
},
"dom-serialize": { "dom-serialize": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz", "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
...@@ -2962,6 +3045,16 @@ ...@@ -2962,6 +3045,16 @@
"void-elements": "^2.0.0" "void-elements": "^2.0.0"
} }
}, },
"dom-set": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/dom-set/-/dom-set-1.1.1.tgz",
"integrity": "sha1-XCxhDuSDm1IO1fmN28vjFMD6lUo=",
"requires": {
"array-from": "^2.1.1",
"is-array": "^1.0.1",
"iselement": "^1.1.4"
}
},
"domain-browser": { "domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
...@@ -5079,6 +5172,11 @@ ...@@ -5079,6 +5172,11 @@
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
"dev": true "dev": true
}, },
"ionic2-calendar": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.5.2.tgz",
"integrity": "sha512-tVsQpKvj6y+GUid5bvZCpRhSxkyj2IqMJcXYQDVDkfR2iUiV/8EmBQE+JIyQDqvDdVslHrJKkI+2XlnZi6dDuw=="
},
"ionicons": { "ionicons": {
"version": "4.5.8", "version": "4.5.8",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.8.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.8.tgz",
...@@ -5122,6 +5220,11 @@ ...@@ -5122,6 +5220,11 @@
} }
} }
}, },
"is-array": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz",
"integrity": "sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o="
},
"is-arrayish": { "is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
...@@ -5331,6 +5434,11 @@ ...@@ -5331,6 +5434,11 @@
"buffer-alloc": "^1.2.0" "buffer-alloc": "^1.2.0"
} }
}, },
"iselement": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/iselement/-/iselement-1.1.4.tgz",
"integrity": "sha1-flW1Ko68pQp+LoDluNKEDzI1MUY="
},
"isexe": { "isexe": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
...@@ -7457,6 +7565,11 @@ ...@@ -7457,6 +7565,11 @@
} }
} }
}, },
"positioning": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/positioning/-/positioning-1.4.0.tgz",
"integrity": "sha512-LbN+mgAXtcDdN46xMJ3yZwjndqqYJODaO5qKmU+MVMu5tL3K2dlm1Qha/zh1k2JAFym5HDaZpnPfO4gr91VTRw=="
},
"posix-character-classes": { "posix-character-classes": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
...@@ -9796,6 +9909,11 @@ ...@@ -9796,6 +9909,11 @@
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
"dev": true "dev": true
}, },
"type-func": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/type-func/-/type-func-1.0.3.tgz",
"integrity": "sha1-qxhCNK6A2NUAV87+/zstl9CK6bA="
},
"type-is": { "type-is": {
"version": "1.6.18", "version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
......
package.json
...@@ -25,7 +25,10 @@ ...@@ -25,7 +25,10 @@
"@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.1.0", "@ionic/angular": "^4.1.0",
"angular-calendar": "^0.27.14",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"date-fns": "^1.30.1",
"ionic2-calendar": "^0.5.2",
"rxjs": "~6.5.1", "rxjs": "~6.5.1",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"zone.js": "~0.8.29" "zone.js": "~0.8.29"
......
src/app/addaddress/addaddress.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AddaddressPage } from './addaddress.page';
const routes: Routes = [
{
path: '',
component: AddaddressPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [AddaddressPage]
})
export class AddaddressPageModule {}
src/app/addaddress/addaddress.page.html 0 → 100644
<ion-header>
<ion-toolbar>
<ion-title>addaddress</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/addaddress/addaddress.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddaddressPage } from './addaddress.page';
describe('AddaddressPage', () => {
let component: AddaddressPage;
let fixture: ComponentFixture<AddaddressPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddaddressPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddaddressPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/addaddress/addaddress.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-addaddress',
templateUrl: './addaddress.page.html',
styleUrls: ['./addaddress.page.scss'],
})
export class AddaddressPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/app-routing.module.ts
...@@ -68,7 +68,17 @@ const routes: Routes = [ ...@@ -68,7 +68,17 @@ const routes: Routes = [
{ path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' }, { path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
{ path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' }, { path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
{ path: 'general', loadChildren: './general/general.module#GeneralPageModule' }, { path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' } { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
{ path: 'selectservices', loadChildren: './selectservices/selectservices.module#SelectservicesPageModule' },
{ path: 'date', loadChildren: './date/date.module#DatePageModule' },
{ path: 'summary', loadChildren: './summary/summary.module#SummaryPageModule' },
{ path: 'waiting1', loadChildren: './waiting1/waiting1.module#Waiting1PageModule' },
{ path: 'available', loadChildren: './available/available.module#AvailablePageModule' },
{ path: 'bookservice', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
{ path: 'cancel', loadChildren: './cancel/cancel.module#CancelPageModule' },
{ path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
{ path: 'productbooking', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
{ path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' }
]; ];
@NgModule({ @NgModule({
......
src/app/app.module.ts
...@@ -11,6 +11,11 @@ import { AppRoutingModule } from './app-routing.module'; ...@@ -11,6 +11,11 @@ import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReviewPage} from './review/review.page'; import { ReviewPage} from './review/review.page';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
...@@ -23,6 +28,10 @@ import { ReviewPage} from './review/review.page'; ...@@ -23,6 +28,10 @@ import { ReviewPage} from './review/review.page';
BrowserModule, BrowserModule,
IonicModule.forRoot(), IonicModule.forRoot(),
AppRoutingModule, AppRoutingModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
BrowserAnimationsModule BrowserAnimationsModule
], ],
providers: [ providers: [
......
src/app/app.scss
...@@ -317,7 +317,10 @@ button{ ...@@ -317,7 +317,10 @@ button{
} }
.app_header{ .app_header{
height:70px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
} }
...@@ -348,6 +351,9 @@ button{ ...@@ -348,6 +351,9 @@ button{
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
span{
color: #39267f;
}
} }
} }
...@@ -376,6 +382,10 @@ button{ ...@@ -376,6 +382,10 @@ button{
background-image: url("../assets/img/asset_cart.png"); background-image: url("../assets/img/asset_cart.png");
} }
.nav_filter{
background-image: url("../assets/img/asset_filter.png");
}
.account_pic{ .account_pic{
img{ img{
width: 35px; width: 35px;
...@@ -416,6 +426,50 @@ ion-modal{ ...@@ -416,6 +426,50 @@ ion-modal{
} }
.select_footer{
height: 115px;
background: url("../assets/img/asset_cm_footer.png");
background-repeat: no-repeat;
background-size:cover;
position: fixed;
bottom: 0px;
left:0px;
right:0px;
padding: 15px;
padding-top: 30px;
h6{
color:#fff;
font-weight: 400;
margin:0px;
padding-bottom: 5px;
}
.next_btn{
background-color: #ffffff;
color: #39267f;
border-radius: 20px;
height:35px;
font-size: 18px;
padding-left:30px;
padding-right:30px;
position: relative;
top: 30%;
}
}
.premium_badge{
background-image: linear-gradient(to right, #473294 , #8164ec);
color: #fff !important;
font-size: 12px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
font-weight: 300;
position: relative;
bottom: 2px;
}
......
src/app/available/available.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AvailablePage } from './available.page';
const routes: Routes = [
{
path: '',
component: AvailablePage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [AvailablePage]
})
export class AvailablePageModule {}
src/app/available/available.page.html 0 → 100644
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>AVAILABLE WORKSHOPS <span>6</span></h4></div>
<button class="nav_btn nav_filter floatRight" (click)="filterToggle()">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="home_wrapper">
<ul>
<h3>2 Services</h3>
<li (click)="goToPage('bookservice')">
<div class="circle">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="details">
<div class="list_btn book">Book</div>
<h5>Presto Towing Services</h5>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<p>34 Reviews</p>
<h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
<span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('bookservice')">
<div class="circle">
<img src="../../assets/img/asset_shop2.png">
</div>
<div class="details">
<div class="list_btn book">Book</div>
<h5>Presto Towing Services</h5>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<p>34 Reviews</p>
<h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
<span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="filter_menu" *ngIf="filterShow" [@slideInOut]>
<div class="menu_outter" (click)="filterToggle()">
</div>
<div class="menu_inner">
<h4>Sort by</h4>
<ul>
<li (click)="filterToggle()">Amount</li>
<li (click)="filterToggle()">Location</li>
<li (click)="filterToggle()">Rating</li>
<li (click)="filterToggle()">Only Premium</li>
</ul>
</div>
</div>
</ion-content>
src/app/available/available.page.scss 0 → 100644
.home_wrapper{
padding-top:10px;
.location_box{
position: fixed;
left:0px;
top: 60px;
right:0px;
z-index: 999;
}
.location_bar{
max-width:200px;
background: #fbd339;
padding:5px;
border-radius: 20px;
margin:0 auto;
text-align: center;
-webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
background-image: url("../../assets/img/aaset_loc.png");
background-position: left 15px top 6px;
background-repeat: no-repeat;
padding-left:35px;
padding-right:30px;
background-size: 15px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul{
h3{
color: #39267f;
margin: 0px;
padding-bottom: 15px;
font-size: 20px;
}
padding:10px;
margin:0px;
li{
background: #f6f5fa;
border-radius:10px;
margin-bottom: 10px;
position: relative;
padding:20px;
.circle{
width:60px;
height:60px;
float: left;
img{
width: 100%;
height:100%;
}
}
.details{
float: right;
width:calc(100% - 60px);
padding-left: 20px;
h5{
margin:0px;
padding:0px;
padding-bottom: 5px;
}
.list_btn{
position: absolute;
right: 2px;
top: 17px;
font-size: 14px;
}
.remind{
color: #282438;
background: url("../../assets/img/asset_remind.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
}
.book{
color: #fff;
background: url("../../assets/img/asset_book.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
}
p{
margin:0px;
padding:0px;
color: #282438;
font-size: 12px;
padding-top: 5px;
}
h6{
margin:0px;
padding: 0px;
padding-top:8px;
strong{
color: #39267f;
}
}
.distance_banner{
background-color: #fff;
padding: 3px;
padding-left: 6px;
padding-right: 6px;
background-image: url("../../assets/img/aaset_loc.png");
background-position: left 5px top 4px;
background-repeat: no-repeat;
padding-left: 20px;
background-size: 12px;
border-radius: 10px;
margin-right: 10px;
font-size: 12px;
}
.other_banner{
background: #fbd339;
color: #282438;
padding: 3px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}
.playit{
padding-top: 8px;
img{
width: 15px;
}
}
.rating {
border: none;
width:85px;
margin: 0px;
padding: 0px;
}
.rating > input { display: none; }
.rating > label:before {
margin:2px;
font-size:14px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #dcdae9;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
}
}
.filter_menu{
position: fixed;
top: 0px;
left:0px;
right:0px;
bottom: 0px;
background-color:rgba(0,0,0,0.5);
z-index: 99;
.menu_outter{
width: 100%;
height:calc(100% - 220px);
}
.menu_inner{
height: 220px;
padding: 15px;
transition: all 0.5s ease;
padding-top:40px;
background-image: url("../../assets/img/asset_menu_wrapper.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
h4{
text-align: center;
color: #9c97b7;
margin:0px;
padding: 0px;
font-size: 16px;
padding-bottom: 10px;
}
ul{
margin:0px;
padding:0px;
li{
list-style: none;
text-align: center;
color: #282438;
font-size: 18px;
padding: 7px;
font-weight:500;
&:focus{
background: #fff;
border-radius: 20px;
}
&:hover{
background: #fff;
border-radius: 20px;
}
}
}
}
}
\ No newline at end of file
src/app/available/available.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AvailablePage } from './available.page';
describe('AvailablePage', () => {
let component: AvailablePage;
let fixture: ComponentFixture<AvailablePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AvailablePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AvailablePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/available/available.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
@Component({
selector: 'app-available',
templateUrl: './available.page.html',
styleUrls: ['./available.page.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(100%)'}),
animate('300ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('300ms ease-out', style({transform: 'translateY(100%)'}))
])
])
]
})
export class AvailablePage implements OnInit {
filterShow = false;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
filterToggle(){
this.filterShow = !this.filterShow;
}
}
src/app/booking/booking.page.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.location_box{ .location_box{
position: fixed; position: fixed;
left:0px; left:0px;
top: 45px; top: 60px;
right:0px; right:0px;
z-index: 999; z-index: 999;
} }
......
src/app/bookservice/bookservice.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { BookservicePage } from './bookservice.page';
const routes: Routes = [
{
path: '',
component: BookservicePage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookservicePage]
})
export class BookservicePageModule {}
src/app/bookservice/bookservice.page.html 0 → 100644
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>N Torque Repair <span class="premium_badge">PREMIUM</span></h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="home_wrapper">
<div class="location_box">
<div class="location_bar">
Location revailed after booked
</div>
</div>
<div class="banner">
<img src="../../assets/img/asset_banner.png">
</div>
<div class="service_amount">
<ion-row>
<ion-col><p>Service</p></ion-col>
<ion-col class="textRight"><p>$290</p></ion-col>
</ion-row>
<ion-row>
<ion-col><p>Labour Charge</p></ion-col>
<ion-col class="textRight"><p>$50</p></ion-col>
</ion-row>
<hr>
<ion-row>
<ion-col><p>Total Amount</p></ion-col>
<ion-col class="textRight"><p><strong>$340</strong></p></ion-col>
</ion-row>
<button class="signup_btn">Book Service</button>
<div class="service_details">
<img src="../../assets/img/asset_no_booking.png">
<p>Workshop Details will be revealed <br>
after booking</p>
</div>
</div>
</div>
</ion-content>
src/app/bookservice/bookservice.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BookservicePage } from './bookservice.page';
describe('BookservicePage', () => {
let component: BookservicePage;
let fixture: ComponentFixture<BookservicePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BookservicePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BookservicePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/bookservice/bookservice.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
@Component({
selector: 'app-bookservice',
templateUrl: './bookservice.page.html',
styleUrls: ['./bookservice.page.scss'],
})
export class BookservicePage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/cancel/cancel.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CancelPage } from './cancel.page';
const routes: Routes = [
{
path: '',
component: CancelPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [CancelPage]
})
export class CancelPageModule {}
src/app/cancel/cancel.page.html 0 → 100644
<ion-header>
<ion-toolbar>
<ion-title>cancel</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/cancel/cancel.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CancelPage } from './cancel.page';
describe('CancelPage', () => {
let component: CancelPage;
let fixture: ComponentFixture<CancelPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CancelPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CancelPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/cancel/cancel.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-cancel',
templateUrl: './cancel.page.html',
styleUrls: ['./cancel.page.scss'],
})
export class CancelPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/date/date.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { DatePage } from './date.page';
const routes: Routes = [
{
path: '',
component: DatePage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [DatePage]
})
export class DatePageModule {}
src/app/date/date.page.html 0 → 100644
<ion-header>
<div class="app_header relative">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>DATE & TIME</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="select_services_wrapper">
<ion-item>
<ion-label>Pick Date</ion-label>
<ion-datetime displayFormat="DD MM YY" placeholder="Select Date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Pick time</ion-label>
<ion-datetime displayFormat="HH:mm" placeholder="Select Time"></ion-datetime>
</ion-item>
<h4>Instruction</h4>
<textarea rows="6" placeholder="Type here..." ></textarea>
</div>
<div class="select_footer">
<ion-row>
<ion-col size="9">
<h6>2 Services</h6>
<h6>Rolls Royce Ghost</h6>
<h6>June 26th 2019<strong> 13:20 PM to 14:20 PM</strong> </h6>
</ion-col>
<ion-col size="3">
<button class="next_btn floatRight" (click)="goToPage('summary')">Next</button>
<div class="clear"></div>
</ion-col>
</ion-row>
</div>
</ion-content>
src/app/date/date.page.scss 0 → 100644
.select_services_wrapper{
padding: 10px;
ion-label{
color: #463293;
font-weight: 600 !important;
}
h4{
color: #282438;
padding: 10px;
}
textarea{
width: 100%;
padding:20px;
background-color: #f6f5fa;
border-radius: 15px;
border:none;
}
}
.select_footer{
strong{
font-weight: 300;
font-size: 12px;
}
}
src/app/date/date.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatePage } from './date.page';
describe('DatePage', () => {
let component: DatePage;
let fixture: ComponentFixture<DatePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/date/date.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { trigger, transition, animate, style } from '@angular/animations';
import { Location } from '@angular/common';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-date',
templateUrl: './date.page.html',
styleUrls: ['./date.page.scss'],
})
export class DatePage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/home/home.page.html
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
<img src="../../assets/img/asset_menu1.png"> <img src="../../assets/img/asset_menu1.png">
<p>Road <br>Assistance</p> <p>Road <br>Assistance</p>
</ion-col> </ion-col>
<ion-col class="textCenter"> <ion-col class="textCenter" (click)="goToPage('selectservices')">
<img src="../../assets/img/asset_menu2.png"> <img src="../../assets/img/asset_menu2.png">
<p>Parts<br>Purchase</p> <p>Car<br>Services</p>
</ion-col> </ion-col>
<ion-col class="textCenter"> <ion-col class="textCenter" (click)="goToPage('purchaseparts')">
<img src="../../assets/img/asset_menu3.png"> <img src="../../assets/img/asset_menu3.png">
<p>Parts<br>Purchase</p> <p>Parts<br>Purchase</p>
</ion-col> </ion-col>
......
src/app/home/home.page.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.location_box{ .location_box{
position: fixed; position: fixed;
left:0px; left:0px;
top: 55px; top: 60px;
right:0px; right:0px;
z-index: 999; z-index: 999;
} }
......
src/app/home/home.page.ts
...@@ -31,7 +31,6 @@ export class HomePage { ...@@ -31,7 +31,6 @@ export class HomePage {
goToPage(path,data=null){ goToPage(path,data=null){
this.menuShow = !this.menuShow;
this.router.navigateByUrl(path,{queryParams:data}); this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
this.logout(); this.logout();
...@@ -45,7 +44,6 @@ export class HomePage { ...@@ -45,7 +44,6 @@ export class HomePage {
this.menuShow = !this.menuShow; this.menuShow = !this.menuShow;
this.router.navigateByUrl(path,{queryParams:data}); this.router.navigateByUrl(path,{queryParams:data});
this.logout(); this.logout();
document.body.scrollTop = document.documentElement.scrollTop = 0;
} }
......
src/app/productbooking/productbooking.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ProductbookingPage } from './productbooking.page';
const routes: Routes = [
{
path: '',
component: ProductbookingPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ProductbookingPage]
})
export class ProductbookingPageModule {}
src/app/productbooking/productbooking.page.html 0 → 100644
<ion-header>
<ion-toolbar>
<ion-title>productbooking</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/productbooking/productbooking.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductbookingPage } from './productbooking.page';
describe('ProductbookingPage', () => {
let component: ProductbookingPage;
let fixture: ComponentFixture<ProductbookingPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProductbookingPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProductbookingPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/productbooking/productbooking.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-productbooking',
templateUrl: './productbooking.page.html',
styleUrls: ['./productbooking.page.scss'],
})
export class ProductbookingPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/purchaseparts/purchaseparts.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { PurchasepartsPage } from './purchaseparts.page';
const routes: Routes = [
{
path: '',
component: PurchasepartsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [PurchasepartsPage]
})
export class PurchasepartsPageModule {}
src/app/purchaseparts/purchaseparts.page.html 0 → 100644
<ion-header>
<div class="app_header relative">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>Purchase Parts</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
<div class="seach_bar_outer">
<div class="search_bar">
<input class="" placeholder="Search Parts...">
</div>
</div>
</div>
</ion-header>
<ion-content>
<div class="purchase_wrapper">
<div class="header_submenu">
<h4>People most purchased</h4>
<button class="more_btn">More</button>
<div class="clear"></div>
</div>
<div class="product_section">
<ion-row>
<ion-col col-4>
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item1.png">
</div>
</div>
<h4>PM 237</h4>
<hr>
</ion-col>
<ion-col col-4>
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item2.png">
</div>
</div>
<h4>Mega 3inch Band</h4>
<hr>
</ion-col>
<ion-col col-4>
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item3.png">
</div>
</div>
<h4>PM 237</h4>
<hr>
</ion-col>
</ion-row>
</div>
<div class="header_submenu">
<h4>People most purchased</h4>
<button class="more_btn">More</button>
<div class="clear"></div>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/purchaseparts/purchaseparts.page.scss 0 → 100644
.seach_bar_outer{
position: absolute;
width:100%;
.search_bar{
width: 90%;
margin:0 auto;
background-color: #fff;
border-radius:100px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
input{
width:100%;
border:none;
height:45px;
border-radius: 100px;
background-image: url("../../assets/img/asset_search.png");
background-position: right 15px top 10px;
background-repeat: no-repeat;
background-size: 20px;
padding-left: 20px;
padding-right: 20px;
font-weight: 300;
&::placeholder{
font-weight: 300;
color: #9e97ba;
}
}
}
}
.purchase_wrapper{
padding-top:35px;
background: #f0eef6;
.header_submenu{
padding:10px;
h4{
margin:0px;
padding:0px;
float: left;
padding-top: 5px;
padding-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.more_btn{
background: #39267f;
color: #fff;
height:35px;
float: right;
padding-left: 15px;
padding-right: 15px;
border-radius: 20px;
}
}
.product_section{
padding: 10px;
.product_div{
background: #f6f5fa;
text-align: center;
border-radius:15px;
padding: 10px;
position: relative;
.rating{
background-color: rgba(255, 255, 255, 0.9);
background-image: url("../../assets/img/asset_star.png");
position: absolute;
bottom: 10px;
left: 5px;
padding-left: 25px;
background-size: 12px;
background-repeat: no-repeat;
background-position: center left 6px;
padding-right: 10px;
border-radius: 15px;
}
img{
height:90px;
width: auto;
}
}
h4{
color: #282438;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
hr{
border:2px solid #fbd339;
width:30px;
border-radius: 20px;
height:0px;
margin-left:0px;
}
}
.select_services_wrapper{
background-image: linear-gradient(to bottom, #e7e5f1, #edebf5, #f3f2f8, #f9f8fc, #ffffff);
.home_main_stack_menu{
padding: 15px;
padding-top: 50px;
img{
width: 80px;
border:2px solid transparent;
border-radius: 20px;
&:hover{
border:2px solid #8769f4;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
}
}
p{
text-align: center;
color: #4e4961;
margin:0px;
padding-top: 10px;
}
}
}
}
src/app/purchaseparts/purchaseparts.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PurchasepartsPage } from './purchaseparts.page';
describe('PurchasepartsPage', () => {
let component: PurchasepartsPage;
let fixture: ComponentFixture<PurchasepartsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PurchasepartsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PurchasepartsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/purchaseparts/purchaseparts.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-purchaseparts',
templateUrl: './purchaseparts.page.html',
styleUrls: ['./purchaseparts.page.scss'],
})
export class PurchasepartsPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/roadassistance/roadassistance.page.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.location_box{ .location_box{
position: fixed; position: fixed;
left:0px; left:0px;
top: 50px; top: 60px;
right:0px; right:0px;
z-index: 999; z-index: 999;
} }
...@@ -67,7 +67,9 @@ ...@@ -67,7 +67,9 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
padding: 8px; padding: 10px;
padding-left: 15px;
padding-right: 15px;
} }
.book{ .book{
color: #fff; color: #fff;
...@@ -75,7 +77,9 @@ ...@@ -75,7 +77,9 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
padding: 8px; padding: 10px;
padding-left: 15px;
padding-right: 15px;
} }
p{ p{
margin:0px; margin:0px;
......
src/app/selectservices/selectservices.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SelectservicesPage } from './selectservices.page';
const routes: Routes = [
{
path: '',
component: SelectservicesPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SelectservicesPage]
})
export class SelectservicesPageModule {}
src/app/selectservices/selectservices.page.html 0 → 100644
<ion-header>
<div class="app_header relative">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>Select your services</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
<div class="seach_bar_outer">
<div class="search_bar">
<input class="" placeholder="Services or Problems..." >
</div>
</div>
</div>
</ion-header>
<ion-content>
<div class="select_services_wrapper">
<div class="home_main_stack_menu">
<ion-row>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu4.png">
<p>Heating & <br>Airconditioning</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu5.png">
<p>Electrical &<br>Lighting</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu6.png">
<p>Clutch &<br>Transmission</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu7.png">
<p>Braking<br>System</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu8.png">
<p>Drive train<br>Suspension</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu9.png">
<p>Fuel<br>System</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu10.png">
<p>Interior & <br>Exterior</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu11.png">
<p>Engine<br>Components</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu12.png">
<p>Body Parts &<br>Hardware</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu13.png">
<p>Electronic<br>Devices </p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu14.png">
<p>Parts<br>Purchase</p>
</ion-col>
<ion-col class="textCenter">
<img src="../../assets/img/asset_menu15.png">
<p>Parts<br>Purchase</p>
</ion-col>
</ion-row>
</div>
</div>
<div class="select_footer">
<ion-row>
<ion-col>
<h6>2 Services</h6>
<h6>Rolls Royce Ghost</h6>
<h6>....</h6>
</ion-col>
<ion-col>
<button class="next_btn floatRight" (click)="goToPage('date')">Next</button>
<div class="clear"></div>
</ion-col>
</ion-row>
</div>
</ion-content>
src/app/selectservices/selectservices.page.scss 0 → 100644
.seach_bar_outer{
position: absolute;
width:100%;
.search_bar{
width: 90%;
margin:0 auto;
background-color: #fff;
border-radius:100px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
input{
width:100%;
border:none;
height:45px;
border-radius: 100px;
background-image: url("../../assets/img/asset_search.png");
background-position: right 15px top 10px;
background-repeat: no-repeat;
background-size: 20px;
padding-left: 20px;
padding-right: 20px;
font-weight: 300;
&::placeholder{
font-weight: 300;
color: #9e97ba;
}
}
}
}
.select_services_wrapper{
background-image: linear-gradient(to bottom, #e7e5f1, #edebf5, #f3f2f8, #f9f8fc, #ffffff);
.home_main_stack_menu{
padding: 15px;
padding-top: 50px;
img{
width: 80px;
border:2px solid transparent;
border-radius: 20px;
&:hover{
border:2px solid #8769f4;
border-radius: 20px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
}
}
p{
text-align: center;
color: #4e4961;
margin:0px;
padding-top: 10px;
}
}
}
\ No newline at end of file
src/app/selectservices/selectservices.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SelectservicesPage } from './selectservices.page';
describe('SelectservicesPage', () => {
let component: SelectservicesPage;
let fixture: ComponentFixture<SelectservicesPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SelectservicesPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SelectservicesPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/selectservices/selectservices.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-selectservices',
templateUrl: './selectservices.page.html',
styleUrls: ['./selectservices.page.scss'],
})
export class SelectservicesPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/servicedetails/servicedetails.page.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.location_box{ .location_box{
position: fixed; position: fixed;
left:0px; left:0px;
top: 45px; top: 60px;
right:0px; right:0px;
z-index: 999; z-index: 999;
} }
......
src/app/summary/summary.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SummaryPage } from './summary.page';
const routes: Routes = [
{
path: '',
component: SummaryPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SummaryPage]
})
export class SummaryPageModule {}
src/app/summary/summary.page.html 0 → 100644
<ion-header>
<div class="app_header relative">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>SUMMARY</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="summary_wrapper">
<div class="content_detail">
<h4>Service Details</h4>
<div class="content_inner">
<ul>
<li>
<img src="../../assets/img/asset_menu6.png">
<span>Clutch & Transmissions</span>
<div class="clear"></div>
</li>
<li>
<img src="../../assets/img/asset_menu10.png">
<span>Exterior and Interior</span>
<div class="clear"></div>
</li>
</ul>
</div>
<h4>Car Details</h4>
<div class="content_inner">
<ul>
<li>
<ion-row>
<ion-col><p>Brand :</p></ion-col>
<ion-col>Rolls royce</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col><p>Name :</p></ion-col>
<ion-col>Ghost</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col><p>Model :</p></ion-col>
<ion-col>2019</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col><p>Mileage :</p></ion-col>
<ion-col>20</ion-col>
</ion-row>
</li>
</ul>
</div>
<h4>Date & Time</h4>
<div class="content_inner">
<ul>
<li>
<ion-row>
<ion-col><p>Date :</p></ion-col>
<ion-col>June 25 th 2019</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col><p>Time:</p></ion-col>
<ion-col>10:30 pm to 11:00pm</ion-col>
</ion-row>
</li>
</ul>
</div>
<h4>Your Message</h4>
<div class="content_inner">
<ul>
<li>
<ion-row>
<ion-col>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum</ion-col>
</ion-row>
</li>
</ul>
</div>
</div>
</div>
<div class="select_footer">
<ion-row>
<ion-col class="textCenter">
<button class="request_btn" (click)="goToPage('date')">Send Request<img src="../../assets/img/asset_send_request.png"></button>
<div class="clear"></div>
</ion-col>
</ion-row>
</div>
</ion-content>
src/app/summary/summary.page.scss 0 → 100644
.summary_wrapper{
.content_detail{
padding:15px;
padding-bottom: 100px;
h4{
margin:0px;
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
}
.content_inner{
border-left:1px dashed #4e4961;
margin-left: 40px;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
ul{
margin:0px;
padding:0px;
padding-left: 20px;
li{
list-style: none;
padding-bottom: 10px;
width: 100%;
img{
width: 35px;
float: left;
}
span{
float: left;
width:calc(100% - 35px);
padding: 8px;
font-size: 16px;
}
p{
margin:0px;
color: #9c97b7
}
}
}
}
}
}
.request_btn{
background-color: #ffffff;
color: #39267f;
border-radius: 20px;
height:35px;
font-size: 18px;
padding-left:30px;
padding-right:30px;
position: relative;
width: 80%;
font-weight: 500;
margin: 0 auto;
top: 20px;
img{
width: 12px;
margin-left: 10px;
}
}
\ No newline at end of file
src/app/summary/summary.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SummaryPage } from './summary.page';
describe('SummaryPage', () => {
let component: SummaryPage;
let fixture: ComponentFixture<SummaryPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SummaryPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SummaryPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/summary/summary.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-summary',
templateUrl: './summary.page.html',
styleUrls: ['./summary.page.scss'],
})
export class SummaryPage implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/waiting1/waiting1.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { Waiting1Page } from './waiting1.page';
const routes: Routes = [
{
path: '',
component: Waiting1Page
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [Waiting1Page]
})
export class Waiting1PageModule {}
src/app/waiting1/waiting1.page.html 0 → 100644
<ion-content>
<div class="waiting_wrapper">
<div class="logo">
<img src="../../assets/img/asset_waiting1.png">
</div>
<h4>Relax</h4>
<h3>We got your request</h3>
<p>We will update you within 10 to 20 minutes.</p>
<button class="back_btn1">Home</button><br>
<button class="home">Service History</button>
</div>
</ion-content>
src/app/waiting1/waiting1.page.scss 0 → 100644
.waiting_wrapper{
width:100%;
height:100vh;
background: url("../../assets/img/asset_waiting_background.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top:30%;
.logo{
margin:0 auto;
}
h4{
color: #fbd339;
padding-bottom: 5px;
padding-top: 5px;
}
h3{
color: #fff;
padding-top: 10px;
font-size: 18px;
}
p{
color: #fff;
font-weight: 300;
padding-bottom: 10px;
}
.back_btn1{
background-color: #8769f4;
color: #fff;
padding:5px;
display: inline-block;
padding: 10px;
font-size: 18px;
padding-left: 25px;
padding-right: 25px;
border-radius: 20px;
}
.distance{
border:1px solid #fff;
color: #fff;
display: inline-block;
padding: 5px;
font-size: 18px;
padding-left: 35px;
padding-right: 25px;
border-radius: 20px;
background: url("../../assets/img/aaset_loc1.png");
background-position: left 15px top 6px;
background-repeat: no-repeat;
background-size: 18px;
}
.home{
margin-top: 20%;
color: #8769f4;
background: url("../../assets/img/asset_rplay.png");
background-position: left;
background-repeat: no-repeat;
font-size: 18px;
background-size: 11px;
padding-left: 20px;
padding-right:20px;
}
}
\ No newline at end of file
src/app/waiting1/waiting1.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Waiting1Page } from './waiting1.page';
describe('Waiting1Page', () => {
let component: Waiting1Page;
let fixture: ComponentFixture<Waiting1Page>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ Waiting1Page ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Waiting1Page);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/waiting1/waiting1.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-waiting1',
templateUrl: './waiting1.page.html',
styleUrls: ['./waiting1.page.scss'],
})
export class Waiting1Page implements OnInit {
constructor() { }
ngOnInit() {
}
}
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