WrenchBoard/WrenchBoardIonic2023
2
0
Fork 0
Code Issues Pull Requests Releases Activity

location maps

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-10-25 17:34:16 -04:00
parent 21e31da332
commit 0ce80a0d20
21 changed files with 360 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
REMEMBER.txt
+6 -2
View File
@@ -39,6 +39,8 @@ ionic generate page startscan
ionic generate page suggest
ionic generate page suggestdetails
ionic generate page locationmaps
ionic generate page playground
ionic generate page addbank
@@ -47,12 +49,14 @@ ionic generate page addbank
ionic generate service user-wallet
ionic generate component tracking
https://masteringionic.com/blog/working-with-capacitor-googlemaps-in-ionic
ionic generate interface interfaces/location
ionic generate interface interfaces/marker
src/app/accounts/locationmaps/locationmaps-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LocationmapsPage } from './locationmaps.page';
const routes: Routes = [
{
path: '',
component: LocationmapsPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LocationmapsPageRoutingModule {}
src/app/accounts/locationmaps/locationmaps.module.ts
+20
View File
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LocationmapsPageRoutingModule } from './locationmaps-routing.module';
import { LocationmapsPage } from './locationmaps.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LocationmapsPageRoutingModule
],
declarations: [LocationmapsPage]
})
export class LocationmapsPageModule {}
src/app/accounts/locationmaps/locationmaps.page.html
+9
View File
@@ -0,0 +1,9 @@
<ion-header>
<ion-toolbar>
<ion-title>locationmaps</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/accounts/locationmaps/locationmaps.page.scss
View File
src/app/accounts/locationmaps/locationmaps.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { LocationmapsPage } from './locationmaps.page';
describe('LocationmapsPage', () => {
let component: LocationmapsPage;
let fixture: ComponentFixture<LocationmapsPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ LocationmapsPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(LocationmapsPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/accounts/locationmaps/locationmaps.page.ts
+15
View File
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-locationmaps',
templateUrl: './locationmaps.page.html',
styleUrls: ['./locationmaps.page.scss'],
})
export class LocationmapsPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/app-routing.module.ts
+4
View File
@@ -238,6 +238,10 @@ const routes: Routes = [
path: 'addbank',
loadChildren: () => import('./accounts/addbank/addbank.module').then(m => m.AddbankPageModule)
},
{
path: 'locationmaps',
loadChildren: () => import('./accounts/locationmaps/locationmaps.module').then(m => m.LocationmapsPageModule)
},
];
@NgModule({
src/app/components/tracking/tracking.component.html
+3
View File
@@ -0,0 +1,3 @@
<div>
<capacitor-google-map #map id="google-map"></capacitor-google-map>
</div>
src/app/components/tracking/tracking.component.scss
+6
View File
@@ -0,0 +1,6 @@
capacitor-google-map {
display: inline-block;
width: 100%;
height: 340px;
//border-radius: 10px;
}
src/app/components/tracking/tracking.component.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { TrackingComponent } from './tracking.component';
describe('TrackingComponent', () => {
let component: TrackingComponent;
let fixture: ComponentFixture<TrackingComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ TrackingComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(TrackingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/tracking/tracking.component.ts
+70
View File
@@ -0,0 +1,70 @@
import { Component, OnInit, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';
import { environment } from 'src/environments/environment';
import { Location, Locations } from '../../interfaces/location';
import { MarkerEl } from '../../interfaces/marker';
@Component({
selector: 'app-tracking',
templateUrl: './tracking.component.html',
styleUrls: ['./tracking.component.scss'],
})
export class TrackingComponent implements OnInit {
@ViewChild('map') public mapEl: ElementRef<HTMLElement>;
public map: GoogleMap;
public heading: string = null;
public description: string = null;
public locationOptions = {
header: 'Asia',
subHeader: 'Select a country from the list',
message: 'There\'s only three :)',
translucent: true,
};
private markers: Array<MarkerEl> = [];
private ids: Array<string> = [];
constructor() {
this.heading = 'Select a country from the above menu';
this.description = 'Interact with the markers that are displayed for each selected country';
setTimeout(async () => {
await this.createMap();
}, 500);
}
ionViewDidEnter() {
debugger;
setTimeout(async () => {
await this.createMap();
}, 500);
}
ngOnInit() {}
/**
* @private
* @async
* @method createMap
* @description Creates a GoogleMap instance which is rendered within the DOM
* @returns {Promise<void>}
* @memberof HomePage
*/
private async createMap(): Promise<void> {
this.map = await GoogleMap.create({
id: 'google-map',
element: this.mapEl.nativeElement,
apiKey: environment.keys.googleMaps,
forceCreate: true,
config: {
center: {
lat: 1.0667172756631198,
lng: 103.96214500683499
},
zoom: 5
}
});
}
}
src/app/interfaces/location.ts
+14
View File
@@ -0,0 +1,14 @@
export interface Location {
country: string;
lat: number;
lng: number;
description: string;
locations: Array<Locations>;
}
export interface Locations {
name: string;
lat: number;
lng: number;
description: string;
}
src/app/interfaces/marker.ts
+11
View File
@@ -0,0 +1,11 @@
export interface MarkerEl {
coordinate: Coordinate;
markerId: string;
title: string;
snippet: string;
}
export interface Coordinate {
lat: number;
lng: number;
}
src/app/pages/familymember/familymember.page.html
+67 -3
View File
@@ -1,5 +1,8 @@
<ion-content>
<div class="boxed_contents">
<div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/family.svg)'">
<div class="ion-padding">
<ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
@@ -93,17 +96,77 @@
</ion-row>
<ion-row>
<ion-col>
<ion-toolbar>
<ion-toolbar *ngIf="toolBarShow == '1' ">
<ion-buttons slot="end">
<ion-button size="small" fill="solid" color="secondary" shape="round">
<ion-button size="small" fill="solid" color="secondary" shape="round" (click)="startAddfund()">
Add Fund
<ion-icon name="chevron-forward-circle-outline"></ion-icon>
</ion-button>
<ion-button size="small" fill="solid" shape="round">Plans
<ion-button size="small" fill="solid" shape="round" (click)="startWalletPlan()">Plans
<ion-icon name="chevron-forward-circle-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<div *ngIf="toolBarShow == '2' ">
<ion-grid class="send-grid">
<ion-row>
<ion-col class="intr">Amount({{item.description}})</ion-col>
<ion-col>
<ion-input type="number" label="Amount(ggg)" placeholder="Enter Amount" [(ngModel)]='amount'></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="intr">From</ion-col>
<ion-col>
<ion-input
type="text"
[readonly]="true"
value="12,000 Naira">
</ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="intr">To</ion-col>
<ion-col>
<ion-input
type="text"
[readonly]="true"
value="{{member_firstname}} {{member_lastname}}">
</ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="intr">Comment</ion-col>
<ion-col>
<ion-textarea class="txta"
label="Outline textarea"
labelPlacement="floating"
fill="outline"
placeholder="Comment">
</ion-textarea>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button
(click)="backToToolBar()"
color="danger"
shape="round"
size="small">Cancel</ion-button>
</ion-col>
<ion-col class="sendpart">
<ion-button
(click)="sendReward()"
color="secondary"
shape="round"
size="small">Send</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-col>
</ion-row>
</ion-grid>
@@ -136,6 +199,7 @@
</div>
</div>
</div>
</ion-content>
<ion-footer>
src/app/pages/familymember/familymember.page.scss
+25
View File
@@ -1,6 +1,7 @@
ion-content {
.back_image {
margin-top: 10px;
width: auto;
height: 130px;
background-size: contain;
@@ -12,6 +13,30 @@ ion-content {
}
}
.send-grid{
background-color: #eff2f4;
border-radius: 10px;
font-size: 14px;
font-weight: bolder;
ion-select, ion-input{
border-radius: 10px;
border-color: #383a3e;
background-color: white;
text-align: right;
}
.intr{
text-align: right;
margin-top: 10px;
}
.txta{
background-color: white;
border-radius: 10px;
}
.sendpart{
text-align: right;
}
}
.flex {
display: flex;
justify-content: space-between;
src/app/pages/familymember/familymember.page.ts
+16
View File
@@ -111,4 +111,20 @@ export class FamilymemberPage implements OnInit {
);
}
toolBarShow:string="1";
backToToolBar(){
this.toolBarShow = "1";
}
startAddfund(){
this.toolBarShow = "2";
}
sendReward(){
setTimeout(()=>{
this.toolBarShow = "1";
}, 3000);
}
startWalletPlan(){}
}
src/app/pages/home/home.module.ts
+9 -1
View File
@@ -9,6 +9,13 @@ import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { SuggestedlistComponent } from "../../components/suggestedlist/suggestedlist.component";
import {FamilypendingComponent} from "../../components/familypending/familypending.component";
import { TrackingComponent } from "../../components/tracking/tracking.component";
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// @NgModule({
// schemas: [CUSTOM_ELEMENTS_SCHEMA]
// })
@NgModule({
imports: [
@@ -17,6 +24,7 @@ import {FamilypendingComponent} from "../../components/familypending/familypendi
IonicModule,
HomePageRoutingModule
],
declarations: [HomePage,SuggestedlistComponent,FamilypendingComponent]
declarations: [HomePage,SuggestedlistComponent,FamilypendingComponent,TrackingComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageModule { }
src/app/pages/home/home.page.html
+12
View File
@@ -119,6 +119,18 @@
<!-- <ion-title>{{walletDescription}}</ion-title>-->
</ion-toolbar>
<ion-card>
<app-tracking></app-tracking>
<!-- <ion-card-header>-->
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
<!-- </ion-card-header>-->
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
<div *ngIf = "homebannerCount <3;">
<div class="offer">
<div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>
src/environments/environment.prod.ts
+4 -1
View File
@@ -5,5 +5,8 @@ export const environment = {
images: 'https://apigate.lotus.g1.wrenchboard.com/svs/user',
appleRedirectUri: 'https://users.wrenchboard.com/loginWithApple',
facebookAppId: '390204307987009',
loginSocial: false
loginSocial: false,
keys: {
googleMaps: 'AIzaSyCvsRozdnd1i1KBGWC6ewe1RaJYuGbrk3s'
}
};
src/environments/environment.ts
+4 -1
View File
@@ -5,6 +5,9 @@ export const environment = {
images: 'https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1/',
appleRedirectUri: 'https://dev-users.wrenchboard.com/loginWithApple',
facebookAppId: '677857427521030',
loginSocial: true
loginSocial: true,
keys: {
googleMaps: 'AIzaSyCvsRozdnd1i1KBGWC6ewe1RaJYuGbrk3s'
}
};