Skip to content

G
getme
Commit 9c9be920 by amalk
Options

20-08-2019 sprint one

parent f05bbb2e
Showing with 1529 additions and 60 deletions
config.xml
......@@ -100,4 +100,8 @@
<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" />
<plugin name="cordova-plugin-geolocation" spec="4.0.2">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
<plugin name="cordova-plugin-nativegeocoder" spec="3.2.2" />
</widget>
package.json
......@@ -13,6 +13,7 @@
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.7",
"@angular/animations": "^8.2.2",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
......@@ -22,13 +23,17 @@
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/geolocation": "^5.0.0",
"@ionic-native/native-geocoder": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"cordova-android": "7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "4.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-nativegeocoder": "3.2.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
......@@ -73,10 +78,14 @@
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-nativegeocoder": {}
},
"platforms": [
"android"
]
}
}
\ No newline at end of file
}
src/app/app-routing.module.ts
......@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '', loadChildren: './landing/landing.module#LandingPageModule'
},
{
path: '', loadChildren: './landing/landing.module#LandingPageModule'
},
{ path: 'tabs',loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
......@@ -24,7 +24,8 @@ const routes: Routes = [
{ path: 'productlist', loadChildren: './productlist/productlist.module#ProductlistPageModule' },
{ path: 'productdetail', loadChildren: './productdetail/productdetail.module#ProductdetailPageModule' },
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' }
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' }
];
@NgModule({
......
src/app/app.module.ts
......@@ -10,10 +10,19 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule,
],
providers: [
StatusBar,
SplashScreen,
......
src/app/cart/cart.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 { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-cart',
......@@ -7,9 +11,66 @@ import { Component, OnInit } from '@angular/core';
})
export class CartPage implements OnInit {
constructor() { }
@ViewChild(IonSlides, { static: false }) slides: IonSlides;
currentIndex: any;
count:any;
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) {
this.currentIndex = 0;
this.count = 0;
}
ngOnInit() {
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
cart_wizard = {
initialSlide: 0,
speed: 1000,
allowTouchMove: false
};
next() {
this.slides.slideNext();
}
prev() {
this.slides.slidePrev();
}
addCount(){
this.count = this.count+1
}
removeCount() {
this.count = this.count - 1;
if(this.count <0){
this.count = 0;
}
}
slideChanged() {
this.slides.getActiveIndex().then(index => {
this.currentIndex = index;
console.log(this.currentIndex);
});
}
}
src/app/home/home.page.html
......@@ -16,7 +16,7 @@
<img src="../../assets/Group 11_2.png">
</ion-col>
<ion-col class="textRight">
<p class="floatRight">Territory Queens</p>
<p class="floatRight" (click)="istoggle()">Territory Queens</p>
</ion-col>
</ion-row>
</div>
......@@ -182,4 +182,11 @@
</ul>
</div>
</div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut] (click)="istoggle()">
<div class="sort_inner">
<input class="search_box" placeholder="Enter your location">
<button class="search_btn" (click)="istoggle()">Search</button>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/home/home.page.scss
......@@ -216,4 +216,130 @@
}
}
}
}
.sort_wrappper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.search_btn {
width: 100px;
height: 45px;
background-color: rgba(41, 40, 91, 1);
border: none;
color: #fff;
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
}
}
}
\ No newline at end of file
src/app/home/home.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-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({ transform: 'translateY(100%)' }),
animate('200ms ease-in', style({ transform: 'translateY(0%)' }))
]),
transition(':leave', [
animate('200ms ease-out', style({ transform: 'translateY(100%)' }))
])
])
]
})
export class HomePage implements OnInit {
isShow = false;
slideOpts = {
slidesPerView:1.5
}
......@@ -29,5 +43,9 @@ export class HomePage implements OnInit {
this.location.back();
}
istoggle() {
this.isShow = !this.isShow;
}
}
src/app/landing/landing.page.ts
......@@ -23,7 +23,8 @@ export class LandingPage implements OnInit {
slideOpts = {
initialSlide: 0,
speed: 1000
speed: 1000,
allowTouchMove: false
};
......
src/app/login/login.page.ts
......@@ -20,4 +20,5 @@ export class LoginPage implements OnInit {
}
}
src/app/myorder/myorder.page.html
<ion-header>
<ion-toolbar>
<ion-title>myorder</ion-title>
</ion-toolbar>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4>MY ORDERS</h4>
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="myorder_wrapper">
<ul>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
<button class="track_btn" (click)=" goToPage('trackorder')">TRACK</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
</ion-content>
</div>
<div class="clear"></div>
</li>
<li>
<div class="order_image"></div>
<div class="order_detail">
<h5 class="floatLeft">European Style V Neck</h5>
<div class="clear"></div>
<h5>Green, Small <span>3</span></h5>
<p>AU$99.00</p>
</div>
<div class="order_other">
<h6 class="floatRight">June 26th 2019</h6>
<div class="clear"></div>
<h5 class="floatRight">Cancelled</h5>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
\ No newline at end of file
src/app/myorder/myorder.page.scss
.myorder_wrapper {
ul {
margin: 0px;
padding: 10px;
li {
list-style: none;
padding: 10px;
padding-bottom: 15px;
.order_image {
width: 90px;
height: 90px;
float: left;
border-radius: 8px;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.order_detail {
width: calc(100% - 190px);
float: left;
padding-left: 20px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 16px;
padding-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span {
color: #29285b;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
padding-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-top: 10px;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.order_other {
width: 100px;
float: right;
h6 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
padding-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 10px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(206, 153, 76, 1);
font-size: 16px;
font-weight: bold;
}
.track_btn {
background: #29285b;
color: #FFF;
float: right;
padding: 12px;
font-size: 18px;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
}
}
}
}
\ No newline at end of file
src/app/myorder/myorder.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-myorder',
......@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
})
export class MyorderPage 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/ordercancelled/ordercancelled.page.html
<ion-header>
<ion-toolbar>
<ion-title>ordercancelled</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../../assets/[email protected]">
<h4>ORDER CANCELLED</h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail">
<h6>Green, Small</h6>
<h5>Quantity : <span>3</span></h5>
<h5>Amount : <strong>AU$99.00</strong></h5>
<h5>Delivery time : <span>Delivery in 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h5>
<button class="cancel_btn" (click)="goToPage('productdetail')">BUY NOW</button>
<hr>
</div>
</ion-content>
<div class="related_product_slider">
<h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div>
</h5>
<ul>
<ion-slides pager="false" [options]="relatedProd">
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/ordercancelled/ordercancelled.page.scss
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/Group [email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
padding-top: 40px;
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
\ No newline at end of file
src/app/ordercancelled/ordercancelled.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-ordercancelled',
......@@ -7,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
})
export class OrdercancelledPage implements OnInit {
constructor() { }
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
relatedProd = {
slidesPerView: 2
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/orderplaced/orderplaced.page.html
<ion-header>
<ion-toolbar>
<ion-title>orderplaced</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../../assets/white_tick.png">
<h4>ORDER IS PLACED</h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
<div class="order_status">
<div class="clear"></div>
<div class="status_div go_green">
<h4>Order Placed</h4>
<h6>June 26th 2019, 03:00PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Retailer Accepted</h4>
<h6>June 26th 2019, 03:05PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<div class="floatLeft">
<h4>Product Packed</h4>
<h6>June 26th 2019, 03:10PM</h6>
</div>
<button class="track_btn floatRight" (click)="goToPage('trackorder')">Track Order</button>
<div class="clear"></div>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Rider is assigned to shop</h4>
<h6>June 26th 2019, 03:12PM</h6>
</div>
<div class="status_gap go_green">
</div>
<div class="status_div go_green">
<h4>Rider has picked up your product and on the way</h4>
<h6>June 26th 2019, 03:15PM</h6>
</div>
<div class="status_gap">
</div>
<div class="status_div">
<h4>Your product is delivered</h4>
</div>
</div>
<div class="nearby_shop_list">
<ul>
<li (click)="goToPage('productlist')">
<div class="nearby_image">
<img src="../../assets/[email protected]">
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">Carnival Life</span>
<span class="floatRight">4
<img src="../../assets/Path61_2.png">
</span>
<div class="clear"></div>
</h5>
<p>Men's & Women's Fashion</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="product_detail">
<h6>Green, Small</h6>
<h5>Quantity : <span>3</span></h5>
<h5>Amount : <strong>AU$99.00</strong><span class="afterpay">After Pay</span></h5>
<h5>Delivery time : <span>Delivery in 1 hour</span></h5>
<h4>DELIVERY</h4>
<h5>
Shamjith KS<br> +00 0000 888 888<br> Carnival Infopark Infopark Kochi<br> 682030, Kerala, India
</h5>
<button class="cancel_btn" (click)="goToPage('ordercancelled')">CANCEL THIS ORDER</button>
<hr>
</div>
</ion-content>
<div class="related_product_slider">
<h5>
<span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
<div class="clear"></div>
</h5>
<ul>
<ion-slides pager="false" [options]="relatedProd">
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00</p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00 <span class="offer">-8%</span></p>
</li>
</ion-slide>
<ion-slide>
<li (click)="goToPage('productdetail')">
<div class="product_image">
<img src="../../assets/[email protected]">
<div class="fav_icon">
</div>
<div class="featured_badge">Featured</div>
</div>
<h5>European Style V Neck</h5>
<p>AU$99.00<span>AU$110.00</span></p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/orderplaced/orderplaced.page.scss
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
\ No newline at end of file
src/app/orderplaced/orderplaced.page.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-orderplaced',
......@@ -7,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
})
export class OrderplacedPage implements OnInit {
constructor() { }
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() {
}
relatedProd = {
slidesPerView: 2
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
}
src/app/productdetail/productdetail.page.html
<ion-header>
<ion-nav-pop>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
</ion-nav-pop>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
</div>
<button class="nav_btn floatRight">
......@@ -206,8 +203,8 @@
<div class="footer_options">
<button class="share"></button>
<button class="fav"></button>
<button class="cart"></button>
<button class="cart" (click)="goToPage('cart')"></button>
</div>
<div class="footer_btn">BUY NOW</div>
<div class="footer_btn" (click)="goToPage('cart')">BUY NOW</div>
</div>
</ion-content>
\ No newline at end of file
src/app/tabs/tabs.module.ts
......@@ -2,8 +2,8 @@ import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { Tab1PageModule } from './../tab1/tab1.module';
import { TabsPage } from './tabs.page';
......@@ -12,7 +12,8 @@ import { TabsPage } from './tabs.page';
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule
TabsPageRoutingModule,
Tab1PageModule
],
declarations: [TabsPage]
})
......
src/app/tabs/tabs.router.module.ts
......@@ -2,8 +2,14 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
redirectTo: '/tabs',
pathMatch: 'full'
},
{
path: 'tabs',
component: TabsPage,
children: [
......@@ -43,12 +49,8 @@ const routes: Routes = [
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
......
src/app/trackorder/trackorder.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 { TrackorderPage } from './trackorder.page';
import { AgmCoreModule } from '@agm/core';
const routes: Routes = [
{
path: '',
component: TrackorderPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
}),
RouterModule.forChild(routes)
],
declarations: [TrackorderPage]
})
export class TrackorderPageModule {}
src/app/trackorder/trackorder.page.html 0 → 100644
<ion-header>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
</button>
<div class="nav_title floatLeft">
<h4>ORDER TRACKING</h4>
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="trackorder_div">
<agm-map [zoom]="18" [latitude]=" lat " [longitude]="lng " [backgroundColor]="444397">
<agm-marker [latitude]="lat " [longitude]="lng "></agm-marker>
</agm-map>
<!-- <div class="overlay">
</div> -->
</div>
<div class="rider_footer ">
<div class="rider_image "></div>
<div class="rider_detail ">
<h5>John Doe</h5>
<p>Rider</p>
</div>
<div class="rider_time ">
18<span>Mins</span>
</div>
<div class="rider_call ">Call Rider</div>
<div class="clear "></div>
</div>
</ion-content>
\ No newline at end of file
src/app/trackorder/trackorder.page.scss 0 → 100644
.trackorder_div {
width: 100%;
height: 100vh;
position: relative;
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(68, 67, 151, 0.2);
}
agm-map {
width: 100%;
height: 100%;
}
}
.rider_footer {
position: fixed;
bottom: 0px;
left: 0px;
padding: 15px;
right: 0px;
background-color: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.rider_image {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
}
.rider_detail {
float: left;
padding: 5px;
padding-left: 10px;
width: calc(100% - 300px);
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.rider_time {
float: left;
width: 150px;
font-size: 35px;
font-weight: 900;
color: rgba(59, 57, 77, 1);
padding: 5px;
padding-left: 15px;
span {
color: rgba(176, 174, 199, 1);
font-size: 16px;
padding-left: 5px;
font-weight: 400;
}
}
.rider_call {
background-color: rgba(53, 203, 171, 1);
color: #fff;
float: right;
height: 50px;
padding: 14px;
font-size: 16px;
width: 100px;
border-radius: 5px;
font-weight: 700;
padding-left: 20px;
padding-right: 20px;
}
}
\ No newline at end of file
src/app/trackorder/trackorder.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TrackorderPage } from './trackorder.page';
describe('TrackorderPage', () => {
let component: TrackorderPage;
let fixture: ComponentFixture<TrackorderPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TrackorderPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TrackorderPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/trackorder/trackorder.page.ts 0 → 100644
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
declare var google;
@Component({
selector: 'app-trackorder',
templateUrl: './trackorder.page.html',
styleUrls: ['./trackorder.page.scss'],
})
export class TrackorderPage implements OnInit {
map: any;
address: string;
lat: number = 51.678418;
lng: number = 7.809007;
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/global.scss
......@@ -417,6 +417,10 @@ button {
background-image: url("./assets/Group 17_2.png");
}
.nav_back_white {
background-image: url("./assets/arrow_white.png");
}
.nav_menu {
background-image: url("./assets/Group 22_2.png");
}
......
src/index.html
......@@ -2,24 +2,24 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</html>
</html>
\ No newline at end of file
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