Skip to content

A
allorepar
Commit db4755ad by amalk
Options

updates

parent 6199fc9c
Showing with 2090 additions and 10 deletions
src/app/app-routing.module.ts
......@@ -62,7 +62,13 @@ const routes: Routes = [
{ path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
{ path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' }
{ path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
{ path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
{ path: 'carlist', loadChildren: './carlist/carlist.module#CarlistPageModule' },
{ path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
{ path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
{ path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' }
];
@NgModule({
......
src/app/booking/booking.page.ts
......@@ -51,6 +51,8 @@ export class BookingPage{
}
istoggle(){
this.isShow = !this.isShow;
}
......
src/app/carlist/carlist.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 { CarlistPage } from './carlist.page';
const routes: Routes = [
{
path: '',
component: CarlistPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [CarlistPage]
})
export class CarlistPageModule {}
src/app/carlist/carlist.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>MY CARS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
<div class="add_car" (click)="goToPage('addcar')">
+
</div>
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="carlist">
<ul>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="auto_pic"></div>
<div class="auto_detail">
<h4><strong>Rolls Royce</strong> Ghost</h4>
<div class="auto_detail_inner">
<p>Mileage: 08 - 12</p>
<p>Model: 2019</p>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
src/app/carlist/carlist.page.scss 0 → 100644
.add_car{
background-color: #39267f;
color: #fff;
height: 40px;
width: 40px;
border-radius: 50%;
font-size: 30px;
padding: 4px;
}
.carlist{
padding:10px;
ul{
margin:0px;
padding:0px;
li{
list-style: none;
padding: 20px;
border-radius: 15px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
.auto_pic{
width:60px;
height:60px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
-moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
border-radius:15px;
float: left;
img{
width: 100%;
height:100%;
border-radius: 15px;
object-fit: cover;
object-position: center;
}
}
.auto_detail{
float: left;
width: calc(100% - 60px);
padding-left:15px;
h4{
margin:0px;
padding: 0px;
color: #282438;
font-weight: 400;
padding-bottom:5px;
font-size: 16px;
strong{
font-weight: 500;
}
}
.auto_detail_inner{
border-left:1px dashed #4e4961;
margin-left:10px;
padding-left: 15px;
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 14px;
}
}
}
}
}
}
\ No newline at end of file
src/app/carlist/carlist.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CarlistPage } from './carlist.page';
describe('CarlistPage', () => {
let component: CarlistPage;
let fixture: ComponentFixture<CarlistPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CarlistPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CarlistPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/carlist/carlist.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-carlist',
templateUrl: './carlist.page.html',
styleUrls: ['./carlist.page.scss'],
})
export class CarlistPage 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/general/general.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 { GeneralPage } from './general.page';
const routes: Routes = [
{
path: '',
component: GeneralPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [GeneralPage]
})
export class GeneralPageModule {}
src/app/general/general.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>GENERAL DETAILS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="signup_wrapper">
<div class="signup_form">
<div class="row">
<p>Your Full Name</p>
<ion-input value="John Doe" type="text"></ion-input>
</div>
<div class="row">
<p>Email Address</p>
<ion-input value="[email protected]" type="text"></ion-input>
</div>
<div class="row">
<p>Phone Number</p>
<ion-row class="p0">
<ion-col size="4">
<ion-select placeholder="">
<ion-select-option value="">+91</ion-select-option>
</ion-select>
</ion-col>
<ion-col size="8">
<ion-input value="" type="number"></ion-input>
</ion-col>
</ion-row>
</div>
<div class="row">
<p>Country</p>
<ion-select placeholder="">
<ion-select-option value="">Country Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>District</p>
<ion-select placeholder="">
<ion-select-option value="">District Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>City</p>
<ion-select placeholder="">
<ion-select-option value="">City Name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>Area</p>
<ion-select placeholder="">
<ion-select-option value="">Area name</ion-select-option>
</ion-select>
</div>
<div class="row">
<p>House name/Building</p>
<ion-select placeholder="">
<ion-select-option value="">Choose address</ion-select-option>
</ion-select>
</div>
<div class="row">
<button class="signup_btn">Save</button>
</div>
</div>
</div>
</ion-content>
src/app/general/general.page.scss 0 → 100644
.signup_form{
padding: 15px;
.row{
margin-bottom: 15px;
p{
color: #4e4961;
padding: 10px;
margin: 0px;
padding-left: 20px;
font-weight: 500;
a{
color: #39267f;
}
}
h6{
color: #4e4961;
padding-left: 20px;
font-weight: 400;
font-size: 14px;
}
ion-input{
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
}
ion-select {
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
padding-right: 20px;
}
.signup_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
}
\ No newline at end of file
src/app/general/general.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GeneralPage } from './general.page';
describe('GeneralPage', () => {
let component: GeneralPage;
let fixture: ComponentFixture<GeneralPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ GeneralPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GeneralPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/general/general.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-general',
templateUrl: './general.page.html',
styleUrls: ['./general.page.scss'],
})
export class GeneralPage 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
......@@ -313,7 +313,7 @@
</div>
<div class="menu_inner" *ngIf="login">
<ion-row>
<ion-col>
<ion-col (click)="goToPage('settings')">
<img src="../../assets/img/asset_setting.png">
<p>Settings</p>
</ion-col>
......
src/app/myorders/myorders.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 { MyordersPage } from './myorders.page';
const routes: Routes = [
{
path: '',
component: MyordersPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MyordersPage]
})
export class MyordersPageModule {}
src/app/myorders/myorders.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>MY ORDERS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="services_wrapper">
<h4>Pending Orders</h4>
<ul>
<li class="up_comingborder" (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<h4>February</h4>
<li (click)="goToPage('servicedetails')">
<div class="clear"></div>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
src/app/myorders/myorders.page.scss 0 → 100644
.services_wrapper{
background-color: #faf9fc;
padding:15px;
width:100%;
h4{
margin:0px;
padding:0px;
margin-bottom: 15px;
}
ul{
margin:0px;
padding:0px;
li{
list-style: none;
background-color: #f6f5fa;
padding:25px;
padding-right: 20px;
border-radius: 15px;
margin-bottom: 10px;
.road_assitance{
background-color: #fbd339;
color: #403d4d;
display: inline-block;
font-weight: 500;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 14px;
}
h5{
margin:0px;
padding: 0px;
color: #403d4d;
font-size: 16px;
padding-bottom: 5px;
font-weight: 600;
}
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 13px;
padding-bottom: 20px;
}
.pic{
width:45px;
height:45px;
border-radius: 50%;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.pic_detail{
width:calc(100% - 45px);
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
h6{
margin:0px;
color: #a29ebf;
font-weight: 400;
font-size: 16px;
padding-bottom: 5px;
strong{
font-weight: 500;
}
}
.arrow{
background: url("../../assets/img/asset_playit.png");
background-position: right;
background-repeat: no-repeat;
background-size: 12px;
}
}
}
h4{
margin:0px;
color: #a29ebf;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.up_comingborder{
border:2px solid #fbd339;
}
}
}
\ No newline at end of file
src/app/myorders/myorders.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyordersPage } from './myorders.page';
describe('MyordersPage', () => {
let component: MyordersPage;
let fixture: ComponentFixture<MyordersPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyordersPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyordersPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/myorders/myorders.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-myorders',
templateUrl: './myorders.page.html',
styleUrls: ['./myorders.page.scss'],
})
export class MyordersPage 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/myservices/myservices.page.html
......@@ -13,10 +13,73 @@
<div class="services_wrapper">
<h4>Upcoming Services</h4>
<ul>
<li>
<li class="up_comingborder" (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<p></p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<h4>February</h4>
<li (click)="goToPage('servicedetails')">
<div class="road_assitance">
Road Assistance
</div>
<div class="clear"></div>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
<li (click)="goToPage('servicedetails')">
<h5>2 Services</h5>
<p>Heating & Air Conditioning, Break System</p>
<div class="pic floatLeft">
<img src="../../assets/img/asset_shop1.png">
</div>
<div class="pic_detail floatLeft">
<h5>Presto towing service</h5>
<h6><strong>Rolls Royce</strong> Ghost</h6>
<p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
......
src/app/myservices/myservices.page.scss
......@@ -5,6 +5,7 @@
h4{
margin:0px;
padding:0px;
margin-bottom: 15px;
}
ul{
margin:0px;
......@@ -12,16 +13,83 @@
li{
list-style: none;
background-color: #f6f5fa;
padding:25px;
padding-right: 20px;
border-radius: 15px;
margin-bottom: 10px;
.road_assitance{
background-color: #fbd339;
color: #403d4d;
display: inline-block;
font-weight: 500;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 14px;
}
h5{
margin:0px;
padding: 0px;
color: #282438;
color: #403d4d;
font-size: 16px;
padding-bottom: 5px;
font-weight: 600;
}
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 13px;
padding-bottom: 20px;
}
.pic{
width:45px;
height:45px;
border-radius: 50%;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.pic_detail{
width:calc(100% - 45px);
margin: 0px;
padding-bottom: 5px;
padding-left: 15px;
h6{
margin:0px;
color: #a29ebf;
font-weight: 400;
font-size: 16px;
padding-bottom: 5px;
strong{
font-weight: 500;
}
}
.arrow{
background: url("../../assets/img/asset_playit.png");
background-position: right;
background-repeat: no-repeat;
background-size: 12px;
}
}
}
h4{
margin:0px;
color: #a29ebf;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.up_comingborder{
border:2px solid #fbd339;
}
}
}
\ No newline at end of file
src/app/myservices/myservices.page.ts
......@@ -29,4 +29,6 @@ export class MyservicesPage implements OnInit {
this.location.back();
}
}
src/app/profile/profile.page.html
......@@ -13,10 +13,11 @@
<div class="clear"></div>
<div class="clear"></div>
</div>
<div class="profile_pic">
<div class="profile_pic" (click)="goToPage('profilephoto')">
<div class="overlay"></div>
<img src="../../assets/img/asset_profile_pic.png">
</div>
<div class="" style="height: 300px;">
<div class="profile_wrapper">
<ul>
<li (click)="goToPage('myservices')">
......@@ -29,7 +30,7 @@
</div>
<div class="clear"></div>
</li>
<li>
<li (click)="goToPage('myorders')">
<div class="li_image">
<img src="../../assets/img/asset_m2.png">
</div>
......@@ -39,7 +40,7 @@
</div>
<div class="clear"></div>
</li>
<li>
<li (click)="goToPage('carlist')">
<div class="li_image">
<img src="../../assets/img/asset_m3.png">
</div>
......@@ -49,7 +50,7 @@
</div>
<div class="clear"></div>
</li>
<li>
<li (click)="goToPage('general')">
<div class="li_image">
<img src="../../assets/img/asset_m4.png">
</div>
......@@ -59,7 +60,7 @@
</div>
<div class="clear"></div>
</li>
<li>
<li (click)="goToPage('login')">
<div class="li_image">
<img src="../../assets/img/asset_m5.png">
</div>
......@@ -72,4 +73,6 @@
</ul>
</div>
</div>
</div>
</ion-content>
src/app/profilephoto/profilephoto.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 { ProfilephotoPage } from './profilephoto.page';
const routes: Routes = [
{
path: '',
component: ProfilephotoPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ProfilephotoPage]
})
export class ProfilephotoPageModule {}
src/app/profilephoto/profilephoto.page.html 0 → 100644
<ion-content>
<div class="forgot_wrapper">
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>PROFILE PHOTO</h4></div>
<button class="nav_btn floatLeft">
<div class="account_pic">
<img src="../../assets/img/asset_triangle.png">
</div>
</button>
<div class="clear"></div>
<div class="clear"></div>
</div>
<div class="profile_pic">
<div class="overlay"></div>
<img src="../../assets/img/asset_profile_pic.png">
</div>
<div padding>
<button class="update_btn">Update</button>
</div>
</div>
</ion-content>
src/app/profilephoto/profilephoto.page.scss 0 → 100644
.forgot_wrapper{
background-image: url("../../assets/img/asset_forgot_bg.png");
background-position: center top -30px;
background-size: 100%;
.profile_pic{
width:100%;
height:290px;
position: relative;
.overlay{
position: absolute;
top:0px;
left:0px;
right:0px;
bottom: 0px;
-webkit-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
-moz-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
}
img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
}
.forgot_form{
padding: 15px;
padding-top: 40px;
.row{
margin-bottom: 15px;
p{
color: #4e4961;
padding: 10px;
margin: 0px;
padding-left: 20px;
font-weight: 500;
a{
color: #39267f;
}
}
h6{
color: #4e4961;
padding-left: 20px;
font-weight: 400;
font-size: 14px;
}
ion-input{
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
}
ion-select {
background: #dcdae9;
border-radius: 20px;
color:#39267f;
height: 40px;
font-weight: 600;
padding-left: 15px !important;
padding-right: 20px;
}
.signup_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
}
.update_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
}
\ No newline at end of file
src/app/profilephoto/profilephoto.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfilephotoPage } from './profilephoto.page';
describe('ProfilephotoPage', () => {
let component: ProfilephotoPage;
let fixture: ComponentFixture<ProfilephotoPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfilephotoPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfilephotoPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/profilephoto/profilephoto.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-profilephoto',
templateUrl: './profilephoto.page.html',
styleUrls: ['./profilephoto.page.scss'],
})
export class ProfilephotoPage 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.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 { ServicedetailsPage } from './servicedetails.page';
const routes: Routes = [
{
path: '',
component: ServicedetailsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ServicedetailsPage]
})
export class ServicedetailsPageModule {}
src/app/servicedetails/servicedetails.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>Presto towing Service</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">
4KM
</div>
</div>
<div class="banner">
<img src="../../assets/img/asset_banner.png">
</div>
<div class="btn_bay">
<button class="btn book_btn" (click)="goToPage('waiting')">Request a Service</button>
</div>
<div class="pay_description">
<h6>
<span>
<img src="../../assets/img/asset_c1.png">
</span>
<span>
<img src="../../assets/img/asset_c2.png">
</span>
<span>
<img src="../../assets/img/asset_c3.png">
</span>
<span>
<img src="../../assets/img/asset_c4.png">
</span>
</h6>
<h6>
<span>
<img src="../../assets/img/asset_web.png">
<a>www.presto.com</a></span>
</h6>
</div>
<div class="bottom_tab_bay">
<ul>
<li [class.active]="tab == 'detail'" (click)="tab_swap('detail')">Details</li>
<li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
<li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
</ul>
</div>
<div class="tab_content">
<div class="tab_content_inner" [hidden]="tab !='detail'">
<div class="detail_tab">
<ion-row>
<ion-col>
<p class="textLeft">Service</p>
</ion-col>
<ion-col>
<p class="textRight">$230</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p class="textLeft">Labour Charge</p>
</ion-col>
<ion-col>
<p class="textRight">$50</p>
</ion-col>
</ion-row>
</div>
<div class="total_amount">
<div class="total_inner">
<ion-row>
<ion-col>
<p class="textLeft">Total Amount</p>
</ion-col>
<ion-col>
<p class="textRight">$<strong>280</strong></p>
</ion-col>
</ion-row>
</div>
</div>
<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="tab_content_inner" [hidden]="tab !='about'">
<div class="top_div">
<div class="pic_circle"></div>
<div class="pic_details">
<h5>Sam Johns</h5>
<p>Workshop owner</p>
</div>
<div class="clear"></div>
</div>
<div class="shopper_details">
<p>We promise to help you find the best car tyres Dubai has to offer.<br><br>
There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists to high performance and off road enthusiasts.<br><br>
Our mission at Presto Tyres declares our purpose as one of the best tire companies in Dubai.
</p>
</div>
</div>
<div class="tab_content_inner" [hidden]="tab !='review'">
<div class="rating_div">
<ion-row>
<ion-col col-8 class="p0">
<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>
<span>4 Star | 34 Reviews</span>
</ion-col>
<ion-col col-4 class="p0 textRight">
<button class="add_review" (click)="istoggle()">+</button>
</ion-col>
</ion-row>
</div>
<div class="review_list">
<ul>
<li>
<div class="top_div">
<div class="pic_circle"></div>
<div class="pic_details">
<h5>Sam Johns</h5>
<p>June 28th 2019</p>
<h4>Good services</h4>
<h6>
It was a good service and very lovely
behaviour !!
</h6>
</div>
<div class="rating">
<img src="../../assets/img/asset_star.png">4
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="top_div">
<div class="pic_circle"></div>
<div class="pic_details">
<h5>Sam Johns</h5>
<p>June 28th 2019</p>
<h4>Good services</h4>
<h6>
It was a good service and very lovely
behaviour !!
</h6>
</div>
<div class="rating">
<img src="../../assets/img/asset_star.png">4
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="top_div">
<div class="pic_circle"></div>
<div class="pic_details">
<h5>Sam Johns</h5>
<p>June 28th 2019</p>
<h4>Good services</h4>
<h6>
It was a good service and very lovely
behaviour !!
</h6>
</div>
<div class="rating">
<img src="../../assets/img/asset_star.png">4
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="top_div">
<div class="pic_circle"></div>
<div class="pic_details">
<h5>Sam Johns</h5>
<p>June 28th 2019</p>
<h4>Good services</h4>
<h6>
It was a good service and very lovely
behaviour !!
</h6>
</div>
<div class="rating">
<img src="../../assets/img/asset_star.png">4
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</ion-content>
<div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
<div class="rate_card">
<div class="inner_shop_name">
<ion-row>
<ion-col class="p0">
<h5>Smart Mortors</h5>
<p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
</ion-col>
<ion-col class="p0">
<h6>Service - 2 days ago</h6>
</ion-col>
</ion-row>
</div>
<ion-row>
<ion-col class="p0">
<h4>Write a review</h4>
<div class="row">
<ion-input value="Caption" type="text"></ion-input>
</div>
<div class="row">
<ion-input value="Your comments" type="text"></ion-input>
</div>
<div class="row">
<button class="signup_btn" (click)="istoggle()">Next</button>
</div>
</ion-col>
</ion-row>
</div>
</div>
src/app/servicedetails/servicedetails.page.scss 0 → 100644
.home_wrapper{
.location_box{
position: fixed;
left:0px;
top: 45px;
right:0px;
z-index: 999;
}
.location_bar{
max-width:100px;
background: #fff;
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:30px;
padding-right:30px;
background-size: 15px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.banner{
width:100%;
height: 150px;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
.btn_bay{
text-align: center;
padding:15px;
.btn{
height:35px;
border-radius: 20px;
font-size: 16px;
margin: 2px;
width:100%;
}
.call_btn{
display: inline-block;
background-color: #28be57;
color: #fff;
background-image: url("../../assets/img/asset_call.png");
background-position: left 5px top 0px;
background-repeat: no-repeat;
background-size: 35px;
}
.book_btn{
display: inline-block;
background-color: #39267f;
color: #fff;
}
.remind_btn{
display: inline-block;
background-color: #fbd339;
color: #282438;
}
}
.pay_description{
background-color: #f6f5fa;
padding:15px;
h6{
margin:0px;
padding:0px;
padding-bottom: 10px;
span{
img{
height:20px;
margin-right:15px;
}
a{
text-decoration: none;
color: #39267f;
font-size: 13px;
position: relative;
bottom: 5px;
}
}
}
}
.bottom_tab_bay{
border:1px solid #dcdae9;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
ul{
padding:0px;
margin:0px;
li{
width:33.3%;
display: inline-block;
list-style: none;
text-align: center;
padding: 10px;
font-weight: 500;
&:nth-child(1){
border-bottom-left-radius: 25px;
}
&:last-child{
border-bottom-right-radius: 25px;
}
}
.active{
background: #dcdae9;
color: #39267f;
}
}
}
.tab_content{
.tab_content_inner{
.detail_tab{
width: 100%;
padding:15px;
p{
margin:0px;
padding:0px;
color: #282438;
font-weight:500;
}
}
.total_amount{
width: 100%;
background: #f6f5fa;
padding:15px;
padding-top:0px;
padding-bottom: 0px;
.total_inner{
border:2px dashed #4e4961;
padding: 5px;
}
p{
margin:0px;
padding:0px;
color: #282438;
font-weight:500;
}
}
.content_detail{
padding:15px;
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
}
}
}
}
}
.top_div{
padding: 10px;
.pic_circle{
width:40px;
height:40px;
border-radius: 50%;
object-fit: cover;
object-position: center;
border:1px solid #dcdae9;
float: left;
img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.pic_details{
width: calc(100% - 40px);
padding:2px;
padding-left: 10px;
float: left;
h5{
margin:0px;
padding:0px;
font-size: 16px;
padding-bottom: 3px;
}
p{
margin:0px;
padding: 0px;
color: #9c97b7;
font-size: 13px;
}
}
}
.shopper_details{
padding: 15px;
p{
margin:0px;
padding:0px;
color: #4e4961;
text-align: justify;
}
}
.rating_div{
width:100%;
padding: 15px;
span{
color: #4e4961;
font-size: 16px;
font-weight: 500;
}
.add_review{
width: 40px;
height:40px;
background-color: #fbd339;
color: #403838;
border-radius: 50%;
font-size: 30px;
}
.rating {
border: none;
width:135px;
margin: 0px;
padding: 0px;
padding-bottom: 5px;
}
.rating > input { display: none; }
.rating > label:before {
margin:2px;
font-size:24px;
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; }
}
.review_list{
ul{
margin:0px;
padding:10px;
li{
list-style: none;
background-color: #f6f5fa;
border-radius:15px;
margin-bottom: 10px;
.top_div{
.pic_circle{
width:40px;
height:40px;
border-radius: 50%;
object-fit: cover;
object-position: center;
border:1px solid #dcdae9;
float: left;
img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.pic_details{
width: calc(100% - 70px);
padding:2px;
padding-left: 10px;
float: left;
h5{
margin:0px;
padding:0px;
font-size: 16px;
padding-bottom: 3px;
color: #282438;
}
p{
margin:0px;
padding: 0px;
color: #9c97b7;
font-size: 13px;
color: #282438;
}
h6{
margin:0px;
font-size: 13px;
font-weight: 400;
color: #282438;
}
h4{
margin:0px;
font-size: 17px;
padding-top: 8px;
padding-bottom: 5px;
color: #282438;
}
}
.rating{
width: 30px;
float: right;
color: #282438;
img{
width: 15px;
margin-right: 4px;
}
}
}
}
}
}
}
}
}
.review_wrapper{
width: 100%;
background: #fff;
position: fixed;
left:0px;
right:0px;
bottom: 0px;
z-index: 9;
.rate_card{
background-color: #f6f5fa;
border-radius:15px;
padding: 20px;
.inner_shop_name{
border-left:3px solid #fbd339;
padding-left: 10px;
margin-bottom: 25px;
h5{
margin:0px;
padding:0px;
font-size: 16px;
font-weight: 600;
padding-bottom: 2px;
}
p{
margin:0px;
padding:0px;
font-size: 12px;
img{
width: 15px;
height:15px;
border-radius: 50%;
object-fit:cover;
object-position:center;
margin-right:5px;
position: relative;
top: 3px;
}
}
h6{
margin:0px;
padding:0px;
font-size: 12px;
text-align: right;
}
}
h4{
margin:0px;
padding:0px;
font-size: 16px;
text-align:left;
padding-bottom:10px;
}
.rating {
border: none;
width:260px;
margin: 0 auto;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size:40px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #dcdae9;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label { color: #FFD700; }
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
.signup_btn{
height: 40px;
width: 100%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
}
.row{
padding-bottom: 10px;
ion-input{
background: #dcdae9;
border-radius: 20px;
color:#a29ebf;
height: 40px;
font-weight:400;
padding-left: 15px !important;
}
}
}
\ No newline at end of file
src/app/servicedetails/servicedetails.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ServicedetailsPage } from './servicedetails.page';
describe('ServicedetailsPage', () => {
let component: ServicedetailsPage;
let fixture: ComponentFixture<ServicedetailsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ServicedetailsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ServicedetailsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/servicedetails/servicedetails.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-servicedetails',
templateUrl: './servicedetails.page.html',
styleUrls: ['./servicedetails.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 ServicedetailsPage implements OnInit {
tab:any;
isShow = false;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) {
this.tab = "detail";
}
ngOnInit() {
}
tab_swap(type) {
this.tab = type;
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
istoggle(){
this.isShow = !this.isShow;
}
}
src/app/settings/settings.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 { SettingsPage } from './settings.page';
const routes: Routes = [
{
path: '',
component: SettingsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SettingsPage]
})
export class SettingsPageModule {}
src/app/settings/settings.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>Settings</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="settings_wrapper">
<h4>Notifications</h4>
<div class="row">
<p class="floatLeft">Service Reminder</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
<div class="row">
<p class="floatLeft">Order Updates</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
<br>
<hr>
<br>
<h4>App Sounds</h4>
<div class="row">
<p class="floatLeft">Notification Sounds</p>
<ion-toggle class="floatRight"></ion-toggle>
<div class="clear"></div>
</div>
</div>
</ion-content>
src/app/settings/settings.page.scss 0 → 100644
.settings_wrapper{
padding:15px;
h4{
margin: 0px;
padding:0px;
color: #a29ebf;
padding-bottom: 10px;
}
.row{
p{
color: #4e4961;
font-weight: 500;
margin:0px;
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
}
}
hr{
border:1px solid #d8d4e2;
height:0px;
border-top:0px;
}
}
\ No newline at end of file
src/app/settings/settings.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SettingsPage } from './settings.page';
describe('SettingsPage', () => {
let component: SettingsPage;
let fixture: ComponentFixture<SettingsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SettingsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SettingsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/settings/settings.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-settings',
templateUrl: './settings.page.html',
styleUrls: ['./settings.page.scss'],
})
export class SettingsPage 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();
}
}
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