Skip to content

A
allorepar
Commit 8ae9ff74 by amalk
Options

08-08-2019

parent 3d53913c
Showing with 1798 additions and 17 deletions
config.xml 0 → 100644
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
<icon height="40" src="resources/ios/icon/[email protected]" width="40" />
<icon height="60" src="resources/ios/icon/[email protected]" width="60" />
<icon height="48" src="resources/ios/icon/[email protected]" width="48" />
<icon height="55" src="resources/ios/icon/[email protected]" width="55" />
<icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="88" src="resources/ios/icon/[email protected]" width="88" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="172" src="resources/ios/icon/[email protected]" width="172" />
<icon height="196" src="resources/ios/icon/[email protected]" width="196" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<engine name="android" spec="7.1.4" />
</widget>
ionic.config.json
{
"name": "allorepar",
"integrations": {},
"integrations": {
"cordova": {}
},
"type": "angular"
}
package.json
......@@ -25,12 +25,22 @@
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"@types/jquery": "^3.3.31",
"angular-calendar": "^0.27.14",
"cordova-android": "7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"ionic2-calendar": "^0.5.2",
"jquery": "^3.4.1",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"webrtc-adapter": "^7.2.9",
"zone.js": "~0.8.29"
},
"devDependencies": {
......@@ -59,5 +69,20 @@
"tslint": "~5.17.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project"
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
resources/README.md 0 → 100644
These are Cordova resources. You can replace icon.png and splash.png and run
`ionic cordova resources` to generate custom icons and splash screens for your
app. See `ionic cordova resources --help` for details.
Cordova reference documentation:
- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
resources/android/xml/network_security_config.xml 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
</domain-config>
</network-security-config>
src/app/addaddress/addaddress.page.html
<ion-header>
<ion-toolbar>
<ion-title>addaddress</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>ADD ADDRESS</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>Name</p>
<ion-input value="John Doe" 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>
</ion-content>
</div>
</div>
</ion-content>
src/app/addaddress/addaddress.page.scss
.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/addaddress/addaddress.page.ts
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-addaddress',
......@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
})
export class AddaddressPage implements OnInit {
constructor() { }
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/app-routing.module.ts
......@@ -78,7 +78,10 @@ const routes: Routes = [
{ 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' }
{ path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' }, { path: 'deliveryaddress', loadChildren: './deliveryaddress/deliveryaddress.module#DeliveryaddressPageModule' },
{ path: 'partproduct', loadChildren: './partproduct/partproduct.module#PartproductPageModule' },
{ path: 'orderdetails', loadChildren: './orderdetails/orderdetails.module#OrderdetailsPageModule' }
];
@NgModule({
......
src/app/app.module.ts
......@@ -26,13 +26,14 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
],
imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(),
AppRoutingModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
BrowserAnimationsModule
})
],
providers: [
StatusBar,
......
src/app/app.scss
......@@ -325,6 +325,7 @@ box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
.nav_btn{
width:50px;
height:50px;
......
src/app/carlist/carlist.page.scss
......@@ -8,6 +8,8 @@
padding: 4px;
}
.carlist{
padding:10px;
ul{
......
src/app/deliveryaddress/deliveryaddress.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 { DeliveryaddressPage } from './deliveryaddress.page';
const routes: Routes = [
{
path: '',
component: DeliveryaddressPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [DeliveryaddressPage]
})
export class DeliveryaddressPageModule {}
src/app/deliveryaddress/deliveryaddress.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>DELIVERY ADDRESS</h4></div>
<button class="nav_btn nav_btn_text floatRight">
<div class="add_car">
+
</div>
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="delivery_wrapper">
<ul>
<li>adadd</li>
<li>adadd</li>
<li>adadd</li>
</ul>
</div>
</ion-content>
src/app/deliveryaddress/deliveryaddress.page.scss 0 → 100644
.add_car{
background-color: #39267f;
color: #fff;
height: 40px;
width: 40px;
border-radius: 50%;
font-size: 30px;
padding: 4px;
}
.delivery_wrapper{
padding:15px;
ul{
margin:0px;
padding:0px;
li{
list-style: none;
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);
}
}
}
\ No newline at end of file
src/app/deliveryaddress/deliveryaddress.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeliveryaddressPage } from './deliveryaddress.page';
describe('DeliveryaddressPage', () => {
let component: DeliveryaddressPage;
let fixture: ComponentFixture<DeliveryaddressPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DeliveryaddressPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DeliveryaddressPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/deliveryaddress/deliveryaddress.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-deliveryaddress',
templateUrl: './deliveryaddress.page.html',
styleUrls: ['./deliveryaddress.page.scss'],
})
export class DeliveryaddressPage 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.ts
import { Component } from '@angular/core';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
......@@ -21,6 +21,8 @@ import { trigger, transition, animate, style } from '@angular/animations';
})
export class HomePage {
menuShow = false;
login= true;
constructor(
......
src/app/myorders/myorders.page.html
......@@ -2,7 +2,9 @@
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft"><h4>MY ORDERS</h4></div>
<div class="nav_title floatLeft">
<h4>MY ORDERS</h4>
</div>
<button class="nav_btn nav_btn_text floatRight">
</button>
......
src/app/orderdetails/orderdetails.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 { OrderdetailsPage } from './orderdetails.page';
const routes: Routes = [
{
path: '',
component: OrderdetailsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [OrderdetailsPage]
})
export class OrderdetailsPageModule {}
src/app/orderdetails/orderdetails.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>MEGA 3 Inch Band P200</h4>
</div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="order_detail_wrapper">
<div class="order_detail_banner">
<img src="../../assets/img/aaset_verified.png">
<h6>Order Delivered</h6>
</div>
<div class="order_detail_content">
<div class="progress_line">
<div class="status_progress"></div>
</div>
<ul>
<li>
<div class="status_head" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
<h4>Order Confirmed</h4>
<p>June 8th 2019</p>
</div>
<div class="status_details" *ngIf="isGroupShown(0)">
<ul>
<li>
<h5>Approved by allo repar</h5>
<h6>June 8th 2019</h6>
</li>
</ul>
</div>
</li>
<li>
<div class="status_head" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
<h4>Product Packed</h4>
<p>June 10th 2019</p>
</div>
<div class="status_details" *ngIf="isGroupShown(1)">
<ul>
<li>
<h5>Collected by courier partner</h5>
<h6>June 11th 2019</h6>
</li>
</ul>
</div>
</li>
<li>
<div class="status_head" (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">
<h4>Shipped</h4>
<p>June 14th 2019</p>
</div>
<div class="status_details" *ngIf="isGroupShown(2)">
<ul>
<li>
<h5>Product has been shipped</h5>
<h6>June 14th 2019</h6>
</li>
</ul>
</div>
</li>
<li>
<div class="status_head" (click)="toggleGroup(3)" [ngClass]="{active:isGroupShown(3)}">
<h4>Out for Delivery</h4>
<p>June 15th 2019</p>
</div>
<div class="status_details" *ngIf="isGroupShown(3)">
<ul>
<li>
<h5>Product is out for delivery</h5>
<h6>June 15th 2019</h6>
</li>
</ul>
</div>
</li>
<li>
<div class="status_head" (click)="toggleGroup(4)" [ngClass]="{active:isGroupShown(4)}">
<h4>Delivered</h4>
<p>June 15th 2019</p>
</div>
<div class="status_details" *ngIf="isGroupShown(4)">
<ul>
<li>
<h5>Product has been delivered</h5>
<h6>June 15th 2019</h6>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="product_inner">
<h5>Mega 3 Inch Band P200</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>
<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>
</ul>
</div>
<h5>Details</h5>
<h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
<h6>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.</h6>
</div>
</div>
<div class="total_footer">
<div class="detail_tab">
<ion-row>
<ion-col>
<p class="textLeft">Product Amount</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="widthFull textCenter">
<button class="signup_btn">Purchase</button>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/orderdetails/orderdetails.page.scss 0 → 100644
.order_detail_wrapper {
.order_detail_banner {
width: 100%;
height: 130px;
padding-top: 15px;
background-image: url("../../assets/img/assets_orderdetails.png");
background-size: contain;
background-repeat: no-repeat;
text-align: center;
img {
width: 45px;
}
h6 {
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 400;
padding-top: 8px;
margin: 0px;
}
}
.order_detail_content {
padding: 20px;
position: relative;
margin-left: 25px;
.progress_line {
position: absolute;
top: 50px;
left: 0px;
bottom: 15%;
width: 3px;
background: #9c97b7;
border-radius: 20px;
.status_progress {
position: absolute;
top: 0px;
left: 0px;
height: 25%;
right: 0px;
width: 100%;
border-radius: 20px;
background-color: #28be57;
}
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
.status_head {
padding-top: 20px;
padding-bottom: 20px;
h4 {
margin: 0px;
color: #282438;
width: 80%;
background-image: url("../../assets/img/asset_down_arrow.png");
background-position: right;
background-repeat: no-repeat;
background-size: 15px;
padding-bottom: 2px;
font-size: 16px;
}
p {
margin: 0px;
color: #282438;
font-size: 12px;
}
}
.status_details {
margin-left: 30px;
ul {
border-left: 2px dashed #4e4961;
padding-top: 5px;
padding-bottom: 5px;
li {
padding: 5px;
padding-left: 20px;
h5 {
margin: 0px;
color: #282438;
font-size: 16px;
padding-bottom: 4px;
}
h6 {
margin: 0px;
color: #9c97b7;
font-size: 13px;
font-weight: 400;
}
}
}
}
}
}
}
.product_inner {
padding: 15px;
h5 {
margin: 0px;
padding-bottom: 5px;
}
.rating {
border: none;
width: 100px;
margin: 0px;
padding: 0px;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 2px;
font-size: 17px;
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;
}
p {
margin: 0px;
padding-top: 5px;
font-size: 12px;
}
h6 {
text-align: justify;
color: #4e4961;
}
.carlist {
padding: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
padding-bottom: 20px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
border-radius: 15px;
margin-bottom: 10px;
.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: 17px;
strong {
font-weight: 600;
}
}
.auto_detail_inner {
border-left: 1px dashed #4e4961;
margin-left: 10px;
padding-left: 15px;
p {
margin: 0px;
padding: 0px;
color: #a29ebf;
font-size: 14px;
}
}
}
}
}
}
}
}
.total_footer {
padding: 15px;
.detail_tab {
width: 100%;
margin-bottom: 15px;
p {
margin: 0px;
padding: 0px;
color: #282438;
font-weight: 500;
font-size: 16px;
}
}
.total_amount {
width: 100%;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
.total_inner {
border: 2px dashed #4e4961;
padding: 5px;
padding-left: 0px;
padding-right: 0px;
}
p {
margin: 0px;
padding: 0px;
color: #282438;
font-weight: 500;
font-size: 16px;
}
}
.signup_btn {
height: 40px;
width: 85%;
color: #fff;
background-color: #39267f;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
margin-top: 20px;
}
}
\ No newline at end of file
src/app/orderdetails/orderdetails.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OrderdetailsPage } from './orderdetails.page';
describe('OrderdetailsPage', () => {
let component: OrderdetailsPage;
let fixture: ComponentFixture<OrderdetailsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ OrderdetailsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrderdetailsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/orderdetails/orderdetails.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-orderdetails',
templateUrl: './orderdetails.page.html',
styleUrls: ['./orderdetails.page.scss'],
})
export class OrderdetailsPage implements OnInit {
shownGroup = null;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) {
this.shownGroup = 0;
console.log(this.shownGroup);
}
ngOnInit() {
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
isGroupShown(group) {
return this.shownGroup === group;
}
toggleGroup(group) {
if (this.isGroupShown(group)) {
this.shownGroup = null;
} else {
this.shownGroup = group;
}
}
}
src/app/partproduct/partproduct.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 { PartproductPage } from './partproduct.page';
const routes: Routes = [
{
path: '',
component: PartproductPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [PartproductPage]
})
export class PartproductPageModule {}
src/app/partproduct/partproduct.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><span class="">Alreem Parts</span>
<div class="clear"></div>
</h4>
<div class="clear"></div>
</div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content>
<div class="product_booking_wrapper">
<div class="product_slider">
<ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
</ion-slides>
<div class="product_slider_nav">
<div class="product_nav_btn prev_btn" (click)="prev()"></div>
<div class="product_nav_btn next_btn" (click)="next()"></div>
</div>
</div>
<div class="product_inner">
<h5>Mega 3 Inch Band P200</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>
<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>
</ul>
</div>
<h5>Details</h5>
<h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
<h6>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.</h6>
</div>
</div>
<div class="total_footer">
<div class="detail_tab">
<ion-row>
<ion-col>
<p class="textLeft">Product Amount</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>
<button class="signup_btn">Purchase</button>
</div>
</ion-content>
\ No newline at end of file
src/app/partproduct/partproduct.page.scss 0 → 100644
.product_booking_wrapper{
.product_slider{
width: 100%;
height:350px;
padding-top: 40px;
position: relative;
.product_slider_nav{
position: absolute;
top:40%;
left:0px;
right:0px;
bottom: 0px;
.product_nav_btn{
width: 50px;
height: 50px;
position: absolute;
background-position: center;
background-size:38px;
background-repeat: no-repeat;
z-index: 99;
}
.prev_btn{
left: 0px;
background-image: url("../../assets/img/asset_prev.png");
}
.next_btn{
right:0px;
background-image: url("../../assets/img/asset_next.png");
}
}
ion-slides{
height: 100%;
ion-slide{
}
}
}
.product_inner{
padding:15px;
h5{
margin: 0px;
padding-bottom: 5px;
}
.rating {
border: none;
width:100px;
margin: 0px;
padding: 0px;
}
.rating > input { display: none; }
.rating > label:before {
margin:2px;
font-size:17px;
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; }
p{
margin: 0px;
padding-top:5px;
font-size: 12px;
}
h6{
text-align: justify;
color: #4e4961;
}
.carlist{
padding:10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
padding-bottom: 20px;
ul{
margin:0px;
padding:0px;
li{
list-style: none;
border-radius: 15px;
margin-bottom: 10px;
.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: 17px;
strong{
font-weight: 600;
}
}
.auto_detail_inner{
border-left:1px dashed #4e4961;
margin-left:10px;
padding-left: 15px;
p{
margin:0px;
padding: 0px;
color: #a29ebf;
font-size: 14px;
}
}
}
}
}
}
}
}
.total_footer{
background-color: #e4e1ee;
padding:15px;
.detail_tab{
width: 100%;
margin-bottom: 15px;
p{
margin:0px;
padding:0px;
color: #282438;
font-weight:500;
font-size: 16px;
}
}
.total_amount{
width: 100%;
padding:0px;
padding-top:0px;
padding-bottom: 0px;
.total_inner{
border-top:2px dashed #4e4961;
padding: 5px;
padding-left: 0px;
padding-right: 0px;
}
p{
margin:0px;
padding:0px;
color: #282438;
font-weight:500;
font-size: 16px;
}
}
.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/partproduct/partproduct.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PartproductPage } from './partproduct.page';
describe('PartproductPage', () => {
let component: PartproductPage;
let fixture: ComponentFixture<PartproductPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PartproductPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PartproductPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/partproduct/partproduct.page.ts 0 → 100644
import { Component, OnInit, ViewChild, } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-partproduct',
templateUrl: './partproduct.page.html',
styleUrls: ['./partproduct.page.scss'],
})
export class PartproductPage implements OnInit {
@ViewChild(IonSlides) slides: IonSlides;
currentIndex: any;
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();
}
slidesOpts = {
slidesPerView: 1
}
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
}
src/app/productbooking/productbooking.page.html
......@@ -10,5 +10,42 @@
</div>
</ion-header>
<ion-content>
<div class="product_booking_wrapper">
<div class="product_slider">
<ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
<ion-slide>
<img src="../../assets/img/asset_slider1.png">
</ion-slide>
</ion-slides>
<div class="product_slider_nav">
<div class="product_nav_btn prev_btn" (click)="prev()"></div>
<div class="product_nav_btn next_btn" (click)="next()"></div>
</div>
</div>
<div class="product_detail">
<div class="product_top"></div>
<div class="product_inner">
<div class="product_header">
<div class="product_name">
<h4>Mega 3 Inch Band P200</h4>
<hr>
</div>
<div class="product_btn">
Purchase
</div>
<div class="clear"></div>
</div>
<h5>Details</h5>
<p>We promise to help you find the best car tyres Dubai has to offer.
</p>
<p>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.</p>
</div>
</div>
</div>
</ion-content>
src/app/productbooking/productbooking.page.scss
.product_booking_wrapper{
.product_slider{
width: 100%;
height:350px;
padding-top: 40px;
position: relative;
.product_slider_nav{
position: absolute;
top:40%;
left:0px;
right:0px;
bottom: 0px;
.product_nav_btn{
width: 50px;
height: 50px;
position: absolute;
background-position: center;
background-size:38px;
background-repeat: no-repeat;
z-index: 99;
}
.prev_btn{
left: 0px;
background-image: url("../../assets/img/asset_prev.png");
}
.next_btn{
right:0px;
background-image: url("../../assets/img/asset_next.png");
}
}
ion-slides{
height: 100%;
ion-slide{
}
}
}
.product_detail{
position: fixed;
bottom: 0px;
left:0px;
right:0px;
z-index: 9;
.product_top{
width: 100%;
height:50px;
background: url("../../assets/img/asset_top_bg.png");
}
.product_inner{
padding:20px;
background-color: rgba(230, 228, 239,.9);
.product_header{
.product_name{
width:calc(100% - 120px);
float: left;
h4{
margin:0px;
padding:0px;
padding-bottom: 5px;
}
hr{
border:2px solid #fbd339;
height:0px;
border-radius: 20px;
width: 40px;
margin-left: 0px;
}
}
.product_btn{
width:120px;
float: left;
text-align: center;
background-color: #39267f;
color: #fff;
height:35px;
padding: 7px;
border-radius: 20px;
}
}
h5{
color: #282438;
}
p{
color: #4e4961;
text-align: justify;
}
}
}
}
\ No newline at end of file
src/app/productbooking/productbooking.page.ts
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
......@@ -9,6 +11,8 @@ import { Router,ActivatedRoute } from '@angular/router';
styleUrls: ['./productbooking.page.scss'],
})
export class ProductbookingPage implements OnInit {
@ViewChild(IonSlides) slides: IonSlides;
currentIndex: any;
constructor(
private router: Router,
......@@ -28,4 +32,16 @@ export class ProductbookingPage implements OnInit {
this.location.back();
}
slidesOpts = {
slidesPerView: 1
}
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
}
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