Skip to content

G
getme
Commit e48283aa by amalk
Options

14-11-2019

parent 4894b145
Showing with 255 additions and 132 deletions
src/app/app-routing.module.ts
......@@ -31,7 +31,8 @@ const routes: Routes = [
{ path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
{ path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
{ path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' },
{ path: 'addcard', loadChildren: './addcard/addcard.module#AddcardPageModule' }
{ path: 'addcard', loadChildren: './addcard/addcard.module#AddcardPageModule' }, { path: 'searchmodal', loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule' }
];
......
src/app/app.module.ts
......@@ -33,11 +33,12 @@ import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [
],
imports: [BrowserModule,
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
......
src/app/home/home.module.ts
......@@ -9,6 +9,9 @@ import { HomePage } from './home.page';
import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from 'agm-direction';
import { from } from 'rxjs';
const routes: Routes = [
{
path: '',
......
src/app/home/home.page.html
......@@ -6,14 +6,7 @@
<div class="nav_title floatLeft relative">
<input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()">
<div class="search_item_list" [hidden]="searchShow">
<ul>
<li>Listing 1</li>
<li>Listing 2</li>
<li>Listing 3</li>
<li>Listing 4</li>
</ul>
</div>
</div>
<button class="nav_btn nav_search floatRight">
</button>
......@@ -122,7 +115,6 @@
<div class="clear"></div>
</div>
<ion-content class="sort_wrappper">
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
</agm-map>
<div class="add_address_wrapper">
......@@ -176,3 +168,14 @@
</ion-content>
</div>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul (click)="clickSearch()">
<li>Listing 1</li>
<li>Listing 2</li>
<li>Listing 3</li>
<li>Listing 4</li>
</ul>
</div>
\ No newline at end of file
src/app/home/home.page.scss
.search_item_list {
position: absolute;
background-color: #fff;
left: 0px;
right: 0px;
width: 100%;
margin: 0px;
top: 50px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(59, 57, 77, 1);
text-align: left;
list-style: none;
padding: 10px;
border-bottom: 1px solid #ddd;
&:hover {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
&:focus {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
}
}
}
.home_wrapper {
width: 100%;
.home_banner {
......@@ -350,3 +320,35 @@
}
}
}
.search_item_list {
position: absolute;
background-color: #fff;
left: 0px;
right: 0px;
width: 100%;
margin: 0px;
top: 50px;
bottom: 0px;
z-index: 99;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(59, 57, 77, 1);
text-align: left;
list-style: none;
padding: 10px;
border-bottom: 1px solid #ddd;
&:hover {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
&:focus {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
}
}
}
\ No newline at end of file
src/app/home/home.page.ts
......@@ -8,6 +8,7 @@ import { ShoppersService } from './../../config/shopper.service';
import { CategoriesService } from './../../config/category.service';
import { ServiceService } from './../../config/service.service';
import { from } from 'rxjs';
import { ModalController } from "@ionic/angular";
@Component({
selector: "app-home",
......@@ -27,7 +28,7 @@ import { from } from 'rxjs';
})
export class HomePage implements OnInit {
isShow = false;
searchShow = true;
searchShow = false;
public lat = 51.678418;
public lng = 7.809007;
......@@ -43,7 +44,8 @@ export class HomePage implements OnInit {
public centerService: CenterService,
public shopperService: ShoppersService,
public categoriesService: CategoriesService,
public service: ServiceService
public service: ServiceService,
public modalController: ModalController
) {}
ngOnInit() {
......
src/app/nearby/nearby.page.html
......@@ -9,16 +9,16 @@
</div>
<ion-content>
<div class="nearby_map">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" [disableDefaultUI]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [iconUrl]="'/assets/nearby.png'" *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable">
<agm-info-window>
<div class="click_marker">
<h5>Lulufashion Store</h5>
<p>Women's Fashion</p>
</div>
</agm-info-window>
</agm-marker>
<agm-circle [latitude]="lat + 0.3" [longitude]="lng" [radius]="5000" [fillColor]="'rgba(29, 27, 130,1)'" [circleDraggable]="true" [editable]="true"></agm-circle>
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>DELIVERY</h5>
<p>{{address}}</p>
<input class="" placeholder="House No./ Building No">
<input class="" placeholder="Landmark">
<button class="add_btn">ADD</button>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/nearby/nearby.page.scss
.nearby_map {
width: 100%;
height: 100vh;
.overlay{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:rgba(29, 27, 130,0.2);
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(29, 27, 130, 0.2);
}
agm-map {
width: 100%;
height: 100%;
position:relative;
position: relative;
}
.click_marker{
.click_marker {
min-width: 200px;
padding:10px;
h5{
margin:0px;
padding:0px;
padding: 10px;
h5 {
margin: 0px;
padding: 0px;
}
p{
margin:0px;
padding:0px;
p {
margin: 0px;
padding: 0px;
}
}
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #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);
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 0px;
font-weight: 800;
}
p {}
input {
width: 100%;
height: 45px;
border: 1px solid #E1E0EB;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
.add_btn {
width: 100%;
height: 45px;
background-color: #29285B;
color: #fff;
border-radius: 4px;
}
}
\ No newline at end of file
src/app/nearby/nearby.page.ts
import { Component, OnInit } from '@angular/core';
import {Component,OnInit,ViewChild,ElementRef,NgZone} from "@angular/core";
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
import { MouseEvent } from '@agm/core';
import { MapsAPILoader, MouseEvent } from "@agm/core";
@Component({
selector: 'app-nearby',
templateUrl: './nearby.page.html',
styleUrls: ['./nearby.page.scss'],
selector: "app-nearby",
templateUrl: "./nearby.page.html",
styleUrls: ["./nearby.page.scss"]
})
export class NearbyPage implements OnInit {
latitude: number;
longitude: number;
zoom: number;
address: string;
private geoCoder;
public searchElementRef: ElementRef;
markers = [
{
lat: 51.67,
lng: 7.815982,
draggable: true
},
{
lat: 51.678,
lng: 7.827,
draggable: false
},
{
lat: 51.65,
lng: 7.82,
draggable: false
},
{
lat: 51.655,
lng: 7.86,
draggable: false
},
{
lat: 51.69,
lng: 7.88,
draggable: true
}
];
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
private location: Location,
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) {}
ngOnInit() {
}
// google maps zoom level
lat: number = 51.673858;
lng: number = 7.815982;
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label || index}`)
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder();
});
}
// google maps zoom level
mapClicked($event: MouseEvent) {
this.markers.push({
lat: $event.coords.lat,
lng: $event.coords.lng,
draggable: true
private setCurrentLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 8;
this.getAddress(this.latitude, this.longitude);
});
}
}
markerDragEnd(m, $event: MouseEvent) {
console.log('dragEnd', m, $event);
markerDragEnd($event: MouseEvent) {
console.log($event);
this.latitude = $event.coords.lat;
this.longitude = $event.coords.lng;
this.getAddress(this.latitude, this.longitude);
}
getAddress(latitude, longitude) {
this.geoCoder.geocode(
{ location: { lat: latitude, lng: longitude } },
(results, status) => {
console.log(results);
console.log(status);
if (status === "OK") {
if (results[0]) {
this.zoom = 12;
this.address = results[0].formatted_address;
} else {
window.alert("No results found");
}
} else {
window.alert("Geocoder failed due to: " + status);
}
}
);
}
goToPage(path, data = null) {
this.router.navigateByUrl(path, { queryParams: data });
......@@ -80,7 +80,7 @@ export class NearbyPage implements OnInit {
goBack() {
window.history.back();
}
}
}
interface marker {
lat: number;
......
src/app/searchmodal/searchmodal.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 { SearchmodalPage } from './searchmodal.page';
const routes: Routes = [
{
path: '',
component: SearchmodalPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
exports: [
SearchmodalPage
],
declarations: [SearchmodalPage]
})
export class SearchmodalPageModule {}
src/app/searchmodal/searchmodal.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchmodalPage } from './searchmodal.page';
describe('SearchmodalPage', () => {
let component: SearchmodalPage;
let fixture: ComponentFixture<SearchmodalPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchmodalPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchmodalPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/searchmodal/searchmodal.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-searchmodal',
templateUrl: './searchmodal.page.html',
styleUrls: ['./searchmodal.page.scss'],
})
export class SearchmodalPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/global.scss
......@@ -423,16 +423,16 @@ app-deliverypop {
}
.not {
background-color: rgba(59, 57, 77, 1);
background-color: #3b394d;
color: #fff;
width: 20px;
height: 20px;
width: 17px;
height: 17px;
border-radius: 50%;
position: absolute;
top: 0px;
right: 0px;
font-size: 13px;
padding: 3px;
top: 2px;
right: 5px;
font-size: 10px;
padding: 4px;
}
.nav_title {
......
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