Commit e652021f by 123bila

fixmyauto user final

parents
# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
\ No newline at end of file
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*
.idea/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
dist/
node_modules/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/
.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.fixmyautouser" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Garnedo User</name>
<description>An app for finding garages and to book services they offer.</description>
<author email="[email protected]" href="http://techlabz.in/">Techware Solutions</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="16" />
<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" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<platform name="android">
<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="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="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="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="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<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="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
<edit-config file="*-Info.plist" mode="merge" target="UIStatusBarHidden">
<true />
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
<false />
</edit-config>
</platform>
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>Allow to access location</string>
</edit-config>
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova.plugins.diagnostic" spec="~4.0.4" />
<plugin name="com.synconset.imagepicker" spec="~2.1.10">
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="your usage message" />
</plugin>
<plugin name="cordova-plugin-file-transfer" spec="~1.7.1" />
<plugin name="onesignal-cordova-plugin" spec="~2.3.3" />
<plugin name="cordova-plugin-file" spec="~6.0.1" />
<plugin name="cordova-plugin-network-information" spec="^2.0.1" />
<plugin name="cordova-plugin-badge" spec="^0.8.7" />
<plugin name="cordova-plugin-geolocation" spec="~2.4.3">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="com-sarriaroman-photoviewer" spec="^1.1.18" />
<engine name="android" spec="~6.1.2" />
</widget>
{
"name": "user",
"app_id": "",
"type": "ionic-angular",
"integrations": {
"cordova": {}
}
}
{
"name": "Tabs Starter",
"baseref": "master"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "user",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/animations": "4.1.3",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/compiler-cli": "5.2.9",
"@angular/core": "5.2.9",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@ionic-native/badge": "^4.9.0",
"@ionic-native/core": "4.5.3",
"@ionic-native/diagnostic": "^4.6.0",
"@ionic-native/file": "^4.7.0",
"@ionic-native/file-transfer": "^4.7.0",
"@ionic-native/geolocation": "^4.14.0",
"@ionic-native/image-picker": "^4.7.0",
"@ionic-native/location-accuracy": "^4.14.0",
"@ionic-native/network": "^4.7.0",
"@ionic-native/onesignal": "^4.7.0",
"@ionic-native/photo-viewer": "^4.18.0",
"@ionic-native/splash-screen": "4.5.3",
"@ionic-native/status-bar": "4.5.3",
"@ionic/storage": "2.1.3",
"com-sarriaroman-photoviewer": "^1.1.18",
"cordova-android": "~6.1.2",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-request-location-accuracy": "^2.2.3",
"ionic-angular": "3.9.2",
"ionic-tooltips": "^2.0.1",
"ionic2-rating": "^1.2.2",
"ionicons": "3.0.0",
"rxjs": "5.5.7",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"platforms": [
"android"
],
"plugins": {
"cordova-plugin-network-information": {},
"cordova-plugin-badge": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-request-location-accuracy": {},
"com-sarriaroman-photoviewer": {}
}
}
}
\ No newline at end of file
679432675f26c5bf6c6c5e3e4cb34f33
\ No newline at end of file
50b3381a4f0b85d265867b80963724b7
\ No newline at end of file
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform ,Events,ToastController,IonicApp,AlertController} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { PermissionsService } from '../providers/permissionservice';
import { Geolocation } from '@ionic-native/geolocation';
import { OneSignal } from '@ionic-native/onesignal';
import { Network } from '@ionic-native/network';
import {Myservice} from '../providers/myservice';
import { Badge } from '@ionic-native/badge';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage:any = 'LandingPage';
user_data:any;
device_id:any;
toast:any;
notify:any;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public events:Events,public storage:Storage, private permission: PermissionsService,private geolocation: Geolocation,private oneSignal: OneSignal,private network: Network, private toastCtrl: ToastController, private myservice: Myservice, private ionicApp: IonicApp, private alertCtrl: AlertController,private badge: Badge) {
this.events.publish('user:notifications', '');
platform.ready().then(() => {
console.log("out app notificatn outside");
this.badge.isSupported().then((data) => {
console.log(data,"in app notificatn Supported");
});
this.badge.requestPermission().then((data) => {
console.log(data, "in app notificatn Permission");
if(data){
this.badge.set(10);
}
else {
console.log('Not Granted loc');
}
});
this.badge.hasPermission().then((data) => {
console.log(data, "in app notificatn hasPermission");
if(data){
this.badge.set(10);
}
else {
console.log('Not Granted hasPermission');
}
});
this.badge.get().then((data) => {
console.log(data,"get badge noti");
});
this.badge.set(10);
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//network starts
/* platform.registerBackButtonAction(() => {
// get current active page
let view = this.nav.getActive();
//if (view.component.name == "SuccessPage") {
/* //Double check to exit app
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
this.platform.exitApp(); //Exit from app
} else {
let toast = this.toastCtrl.create({
message: 'Press back again to exit App?',
duration: 3000,
position: 'bottom'
});
toast.present();
lastTimeBackPress = new Date().getTime();
} slash *
// } else {
// go to previous page
// this.nav.pop({});
// }
console.log(view.id)
console.log("view page", view.component.name)
if(view.id=='TabsPage') {
platform.exitApp();
}
if(view.id=='SuccessPage') {
this.nav.setRoot('TabsPage');
}
if (this.nav.canGoBack()) { // CHECK IF THE USER IS IN THE ROOT PAGE.
console.log("in back")
this.nav.pop(); // IF IT'S NOT THE ROOT, POP A PAGE.
} else {
console.log("exit back")
platform.exitApp(); // IF IT'S THE ROOT, EXIT THE APP.
}
});
var ready = true;
platform.registerBackButtonAction(function () {
console.log("registerback");
console.log(this.ionicApp);
var activePortal = this.ionicApp._loadingPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(function () { ready = true; });
return;
}
if (this.nav.length() == 1) {
this.confirmExitApp();
}
else {
this.nav.pop();
}
platform.registerBackButtonAction(() => {
let nav = this.nav.getActive();
if (this.nav.canGoBack()){ //Can we go back?
this.nav.pop();
}else{
platform.exitApp(); //Exit from app
}
});*/
if (this.network.type === 'none') {
console.log('network was disconnected :-(');
this.presentToast('No network connection');
}
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
console.log("hi");
this.presentToast('network was disconnected');
});
// stop disconnect watch
//disconnectSubscription.unsubscribe();
// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
console.log('network connected!');
this.closeToast();
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait.
// prior to doing any api requests as well.
setTimeout(() => {
if (this.network.type === 'wifi') {
console.log('we got a wifi connection, woohoo!');
//this.presentToast('we got a wifi connection');
}
}, 3000);
});
//network ends
// statusBar.styleDefault();
statusBar.hide();
statusBar.overlaysWebView(true);
splashScreen.hide();
this.geolocation.getCurrentPosition().then(pos => {
this.storage.set('lat_lng', {'lat': pos.coords.latitude ,'lng':pos.coords.longitude});
});
this.triggerNotification();
});
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data=user_data;
// this.myservice.get_notifications(this.user_data.id);
}
})
events.subscribe('user:update_profile', userdetails => {
console.log("app comp", userdetails);
if(userdetails !== undefined && userdetails !== ""){
this.storage.set('user_data', userdetails);
this.user_data = userdetails;
console.log("profile", this.user_data);
}
else {
console.log("logout");
this.storage.remove('user_data');
this.user_data = '';
}
});
// events.subscribe('user:notifications', userdetails => {
// this.get_notifications(userdetails);
//});
this.permission.checkLocationPermissions().then(permissionOk => {
if (permissionOk) {
this.permission.checkCameraPermissions().then(permissionOk => {
if (permissionOk) {
console.log('Granted cam');
this.permission.checkMicPermissions().then(permissionOk => {
if (permissionOk) {
console.log('Granted mic');
}
else {
console.log('Not Granted mic');
}
})
}
else {
console.log('Not Granted cam');
}
})
}
else {
console.log('Not Granted loc');
}
})
}
confirmExitApp(){
var alert = this.alertCtrl.create({
title: "CONFIRMATION",
message: "Quit App ?",
buttons: [
{
text: 'Cancel',
handler: function () {
}
},
{
text: 'Ok',
handler: function () {
this.platform.exitApp();
}
}
]
});
alert.present();
}
logout() {
this.storage.remove('user_data');
this.events.publish('user:update_profile', '');
this.nav.setRoot('LoginPage');
}
login(){
this.nav.setRoot('LoginPage');
}
home(){
this.nav.setRoot('TabsPage');
}
offers(){
this.nav.setRoot('Moreoffers');
}
request_quotes(){
this.nav.setRoot('RequestQuote');
}
legal_notice(){
this.nav.setRoot('LegalnoticePage');
}
edit_profile(){
this.nav.setRoot('AddcarPage');
}
view_booking(){
this.nav.setRoot('Booking');
}
/*push notification starts*/
triggerNotification()
{
// Define settings for iOS
var iosSettings = {};
iosSettings["kOSSettingsKeyAutoPrompt"] = false;
iosSettings["kOSSettingsKeyInAppLaunchURL"] = false;
// Initialise plugin with OneSignal service
this.oneSignal.startInit('2b04ea88-bd29-47be-85ec-53012c3d4f74', '935901141024').iOSSettings(iosSettings);
this.oneSignal.registerForPushNotifications();
// Control how OneSignal notifications will be shown when
// one is received while your app is in focus
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.None);
// Retrieve the OneSignal user id and the device token
this.oneSignal.getIds().then((ids) => {
console.log('getIds: ' + JSON.stringify(ids));
this.device_id =ids;
console.log(this.device_id)
this.storage.set('get_deviceId',this.device_id);
// this.myservice.load_post({ device_id:ids },"store_id").subscribe(response => { })
});
// When a push notification is received handle
// how the application will respond
this.oneSignal.handleNotificationReceived().subscribe((msg) => {
// Log data received from the push notification service
console.log('Notification received');
console.dir(msg);
});
// When a push notification is opened by the user
// handle how the application will respond
this.oneSignal.handleNotificationOpened().subscribe((msg) => {
// Log data received from the push notification service
console.log('Notification opened');
console.log(JSON.stringify(msg));
var pool_id = msg.notification.payload.additionalData.pool_id;
if(pool_id)
this.nav.setRoot('QuoteDetailsPage',{'pool_id' : pool_id,'from_push' : false});
//console.log(this.event_id);
//this.detail(this.event_id);
});
// End plugin initialisation
this.oneSignal.endInit();
}
/*push notification ends*/
presentToast(msg) {
this.toast = this.toastCtrl.create({
message: msg,
position: 'bottom'
});
this.toast.present();
this.toast.onDidDismiss(() => {
//this.closeToast();
console.log('Dismissed toast');
});
}
closeToast() {
if(this.toast) {
console.log("hi,close the toast");
this.toast.dismiss();
}
}
}
<ion-menu [content]="content" fullscreen >
<ion-content padding>
<div class="fm_sidemenu_profile_pic">
<div *ngIf="user_data" (click)="edit_profile()" menuClose class="edit"></div>
<div *ngIf="user_data" class="fm_sidemenu_profile_pic_inner">
<img *ngIf="user_data.profile_pic" [src]="user_data.profile_pic" >
</div>
</div>
<h5 *ngIf="user_data" >{{user_data.first_name}}</h5>
<p *ngIf="user_data" >{{user_data.mobile}} </p>
<h5 *ngIf="!user_data" >Guest User</h5>
<hr>
<ul>
<li *ngIf="!user_data" menuClose (click)="login()" >Login</li>
<li menuClose (click)="home()" >Home</li>
<!---<li menuClose (click)="offers()" >Offers</li>-->
<li menuClose (click)="request_quotes()" >Quotes for Requests</li>
<li *ngIf="user_data" menuClose (click)="view_booking()" >My Bookings</li>
<li menuClose (click)="legal_notice()" >Legal Notice</li>
<li *ngIf="user_data" menuClose (click)="logout()" >Logout </li>
</ul>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
\ No newline at end of file
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Diagnostic } from '@ionic-native/diagnostic';
import { IonicStorageModule } from '@ionic/storage';
import { HttpModule } from '@angular/http';
import { Myservice } from '../providers/myservice';
import { PermissionsService } from '../providers/permissionservice';
import { Geolocation } from '@ionic-native/geolocation';
import { Ionic2RatingModule } from 'ionic2-rating';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { OneSignal } from '@ionic-native/onesignal';
import { Network } from '@ionic-native/network';
import { TooltipsModule } from 'ionic-tooltips';
import { Badge } from '@ionic-native/badge';
import { LocationAccuracy } from '@ionic-native/location-accuracy';
import { PhotoViewer } from '@ionic-native/photo-viewer';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp,{tabsPlacement:"bottom"}),
IonicStorageModule.forRoot(),
Ionic2RatingModule // Put ionic2-rating module here
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
Myservice,
Diagnostic,
PermissionsService,
Geolocation,
FileTransfer,
File,
ImagePicker,
Network,
OneSignal,
TooltipsModule,
PhotoViewer,
Badge,
LocationAccuracy,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
//Global SCSS//
//Themening SCSS//
@import "../assets/css/theme.scss";
//Essentail SCSS//
@import "../assets/css/custom.scss";
.menu-inner{
.content{
background: #07426a !important;
.scroll-content {
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-left: 35px !important;
}
.fm_sidemenu_profile_pic{
width:100px;
height:100px;
background-color: #15b3d5;
border-radius: 50%;
background-image:url('../../assets/imgs/fm_user_avatar.png');
background-repeat: no-repeat;
background-position: center;
background-size: 35px;
position: relative;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.edit{
position: absolute;
top:35px;
right:-10px;
width:28px;
height:28px;
background-image:url('../assets/imgs/fm_home_edit.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
}
.fm_sidemenu_profile_pic_inner{
width:100%;
height:100%;
border-radius:50%;
}
h5{
color: #fff;
font-weight: 400;
text-align: left;
font-size: 19px;
margin:0px;
padding:0px;
padding-top: 20px;
}
p{
color: #fff;
font-weight: 200;
text-align: left;
padding:0px;
margin:0px;
padding-top:5px;
font-size: 14px;
}
hr{
border:2px solid #15b3d5;
height: 0px;
border-radius: 20px;
width:40px;
margin-left:0px;
margin-top:30px;
margin-bottom:30px;
}
ul{
padding:0px;
margin:0px;
li{
padding:0px;
list-style: none;
color: #fff;
text-align: left;
font-weight: 300;
font-size: 17px;
padding-bottom: 10px;
padding-top: 10px;
}
}
}
}
.empty_div_style{
text-align:center;
padding:45px;
color: #8a6d3b !important;
font-size:16px;
font-weight:400;
background-color: #f4f3ee !important;
}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:50px;z-index:99;}
.alert-ios [aria-checked=true] .alert-radio-inner{
background:transparent !important;
}
.theme_green{
background-color:#1DB100 !important;
}
.theme_dblue{
background-color:#205373 !important;
}
.theme_lblue{
background-color:#0076ba !important;
}
.theme_grey{
background-color:#929292 !important;
}
.theme_orange{
background-color:#f8b800 !important;
}
.theme_red{
background-color:#ee2203 !important;
}
.login_btn{
width:200px;
color: #fff !important;
font-weight: 300;
height:40px !important;
border-radius:5px;
font-size:18px;
margin-bottom: 10px;
}
.login_btn_clear{
width:150px;
color: #000;
background:transparent;
font-weight: 300;
height:40px;
border-radius:5px;
font-size:18px;
text-transform: capitalize;
border:1px solid #000;
}
.signup_btn{
width:150px;
color: #fff;
background:transparent;
font-weight: 300;
height:40px;
border-radius:5px;
font-size:18px;
text-transform: capitalize;
}
.login_wizard_head{
color: #0076ba !important;
font-weight: 500;
letter-spacing: 1px;
text-align: left;
font-size: 18px;
text-transform:capitalize;
padding-bottom:15px;
}
.text_green{
color: #1DB100;
}
.no_result_found{
text-align: center;
padding-top: 50px;
img{
width:120px;
margin:0 auto;
}
.no_result_icon{
width: 120px;
margin:0 auto;
}
p{
text-align: center;
color:#205373;
font-size: 25px;
font-weight: 400;
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Site Name: HomeoCare International
URI: http:
Description: This is the theme css for HomeoCare International
Version: 1.0
Author: Amal-Techware Solution
Author URI:
Tags:
---------------------------
THEME STYLES
---------------------------
TABLE OF CONTENTS
---------------------------
01. FONTS-N-SIZES
02. FONTS-COLOR
03. THEMES-N-BACKGROUNDS
04. SPACING-N-POSITIONS
05. ALIGMENTS
06. ALERTS-N-MESSAGES
07. BODY-STRUCTURE
08. OVERWRITTEN
*/
/*-------------------------------
01. FONTS-N-SIZES
--------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
*{font-family: 'Roboto', sans-serif;}
*::-webkit-scrollbar {
display: none;
}
a{text-decoration: none !important;}
.font_size_xs{font-size:12px !important;}
.font_size_sm{font-size:14px !important;}
.font_size_md{font-size:16px !important;}
.font_size_lg{font-size:18px !important;}
.font_size_xl{font-size:20px !important;}
.font_size_vl{font-size:35px !important;}
/*-------------------------------
02. FONTS-COLOR
--------------------------------*/
.text_color_primary{color: #1d527f !important;}
.text_color_white{color:#fff !important;}
.text_dark{color:#3a3a3a !important;}
/*-------------------------------
03. THEMES-N-BACKGROUNDS
--------------------------------*/
.theme_primary{background-color: #1d527f !important;border: 1px solid #1d527f;}
.theme_dark{background-color: #083352 !important;border:1px solid #083352;}
.theme_light{background-color: #f4f3ee !important;border:1px solid #f4f3ee;}
.theme_transparent{background:rgba(0,0,0,0.7);}
/*-------------------------------
04. SPACING-N-POSITIONS
--------------------------------*/
.width25{width:25% !important;}
.width50{width:50% !important;}
.width75{width:75% !important;}
.widthFull{width:100% !important;}
.height25{height:25% !important;}
.height50{height:50% !important;}
.height75{width:75% !important;}
.heightFull{height:100% !important;}
.p0{padding:0px !important;}
.pl0{padding-left: 0px !important;}
.pr0{padding-right:0px !important;}
.pt0{padding-top:0px !important;}
.pb0{padding-bottom: 0px !important;}
.p10{padding:10px !important;}
.p20{padding:20px !important;}
.m0{margin:0px !important;}
.ml0{margin-left: 0px !important;}
.mr0{margin-right: 0px !important;}
.mt0{margin-top: 0px !important;}
.mb0{margin-bottom: 0px !important;}
.clear{clear:both !important;}
.top10{top:10px;}
.bottom10{bottom:10px;}
.left10{left:10px;}
.right10{right:10px;}
.bottom10{bottom:10px;}
.absolute{position: absolute !important;}
.relative{position: relative !important;}
.fixed{position: fixed !important;}
/*-------------------------------
05. ALIGMENTS
--------------------------------*/
.floatLeft{float:left !important;}
.floatRight{float:right !important;}
.textLeft{text-align: left !important;}
.textRight{text-align: right !important;}
.textCenter{text-align: center !important;}
/*-------------------------------
06. ALERTS-N-MESSAGES
--------------------------------*/
.alert{padding: 15px;margin-bottom: 20px;border: 1px solid transparent;font-weight: 600;transition: all 0.5s ease;position: fixed;border-bottom:0px;left:0px;right: 0px;}
.warning p{color: #8a6d3b !important;}
.success p{color: #3c763d !important;}
.error p{color: #a94442 !important;}
.no_resultfound{
width:100%;
text-align: center;
padding-top:30px;
img{
width: 65px;
}
p{
text-align: center;
padding: 0px;
font-weight: 600;
color: #394152;
text-transform: uppercase;
font-size: 20px;
}
}
/*-------------------------------
07. BODY-STRUCTURE
--------------------------------*/
.nav_header{width:100%;height:45px;}
.nav_btn{width:45px !important;height:45px !important;background: transparent;margin: 0px;font-size: 25px;color: #fff;padding: 0px !important;}
.nav_header_title{height:100%;font-weight: 400;text-align:center;font-size:18px;color: #fff;padding:12px;text-transform: capitalize;width:calc(100% - 90px);letter-spacing:1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 8px;padding-right: 8px;}
.nav_header_title img{width:90px;}
.clear{clear:both !important;}
.border{border:1px solid;}
.borderNone{border:none !important;}
.status_label{font-size:16px;padding:5px;margin-top:5px;}
/*-------------------------------
08. OVERWRITTEN
--------------------------------*/
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {background-image:none !important}
.picker-wrapper{background:#1d527f !important;color: #fff !important;}
.picker-toolbar{background:#1d527f !important;color: #fff !important;border:none !important;}
.picker-button{color: #fff !important;}
.picker-opt{color: #fff !important;}
.picker-below-highlight{background:#1d527f !important;border:none !important;}
.picker-above-highlight{background:#1d527f !important;border:none !important;}
.swiper-slide{overflow: scroll !important;}
.slide-zoom{height:100% !important;}
.menu-inner{width:220px;}
.button-md{box-shadow: none !important;}
.activated{background: transparent !important;}
.button-default{background: transparent;}
.item-md.item-block .item-inner{padding:0px !important;}
.tab-button[aria-selected=true] .tab-button-icon{color: #1d527f !important;}
.tab-button[aria-selected=true] .tab-button-text{color: #1d527f !important;}
.tabbar{background-color: #fff !important;box-shadow: 0px 50px 100px 50px #888888 !important;}
.tab-button-text{margin-top:0px !important;margin-bottom:4px !important;font-size: 12px;}
.tab-button-icon{font-size:25px !important;}
.datetime-placeholder{color: #3a3a3a !important;}
.datetime-md {padding: 13px 8px 13px 0px !important;}
.item{background: transparent !important;border:none;padding-left: 0px !important;}
.item-inner{border:none !important;}
.alert-wrapper{background:url('../assets/imgs/fm_login_bg.png');background-size: cover;background-position: center;}
.item-block:first-child{border:none !important;}
.item-block:last-child{border:none !important;}
.alert-radio-label{color: #595959 !important;}
[aria-checked=true] .alert-radio-icon{border-color: #1d527f !important;}
[aria-checked=true] .alert-radio-inner{background: #1d527f !important; }
.fm_menu{background:url('../assets/imgs/fm_menu.png');background-size: cover;background-position: center;background-size: 25px;background-repeat: no-repeat
}
.fm_filter{background:url('../assets/imgs/fm_filter.png');background-size: cover;background-position: center;background-size:25px;background-repeat: no-repeat
}
.fm_dots{background:url('../assets/imgs/lock.png');background-size: cover;background-position: center;background-size:25px;background-repeat: no-repeat
}
.fm_back{background:url('../assets/imgs/fm_back.png');background-size: cover;background-position: center;background-size:25px;background-repeat: no-repeat
}
.alert-head{display:block !important;}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<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/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- 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">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD7oEUnIkuzKdJUADmNPeKVXKenOMAYUT0&libraries=places" type="text/javascript"></script>
</body>
</html>
{
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
}
\ No newline at end of file
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Quotes For Request
</div>
</ion-header>
<ion-content padding>
<div class="fm_notification_wrapper">
<div class="textCenter" (click)="notification_clear($event)" *ngIf="request_list">
<button ion-button class="clearall_btn">Clear all</button>
</div>
<ul *ngIf="request_list" >
<li (click)="get_details(requests.id)" *ngFor="let requests of request_list" >
<div class="fm_notification_box">
<p>{{requests.name}} </p>
<h4>Quote for: {{requests.work_name}}</h4>
<p>Price : {{requests.quote.total_price}}</p>
</div>
<div class="fm_notification_close" (click)="delete_noti(requests.id,$event)" ></div>
<div class="clear"></div>
</li>
</ul>
<div class="no_resultfound" *ngIf="!request_list" >
<img src="assets/imgs/noresult.png">
<p>No Result Found </p>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RequestQuote } from './Request_quote';
@NgModule({
declarations: [
RequestQuote,
],
imports: [
IonicPageModule.forChild(RequestQuote),
],
})
export class RequestQuoteModule {}
page-Request_quote {
.fm_notification_wrapper{
width: 100%;
height: 100%;
.clearall_btn{
height:30px;
border-radius: 20px;
border:2px solid #15b3d5;
color: #15b3d5;
background: transparent;
padding-left: 20px;
padding-right: 20px;
margin:0 auto;
font-weight: 500;
text-transform: capitalize;
}
ul{
margin:0px;
padding:0px;
width: 100%;
width:100%;
height:calc(100% - 15px);
overflow:scroll;
li{
width:100%;
list-style: none;
border-bottom:1px solid #dcdcdc;
padding-bottom:10px;
padding-top: 10px;
.fm_notification_box{
width:calc(100% - 50px);
float: left;
h4{
color: #144b6d;
font-size: 16px;
margin:0px;
padding:0px;
}
p{
color: #848484;
font-weight: 300;
margin:0px;
padding-top: 5px;
}
}
.fm_notification_close{
width:50px;
float: right;
height: 50px;
background-image:url('../assets/imgs/fm_close_not.png') !important;
background-position: center;
background-size: 18px;
background-repeat: no-repeat;
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController,Events } from 'ionic-angular';
import {Myservice} from '../../providers/myservice';
import { Storage } from '@ionic/storage';
/**
* Generated class for the NotificationPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-Request_quote',
templateUrl: 'Request_quote.html',
})
export class RequestQuote {
user_data:any;
request_list:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController,public events: Events) {
events.subscribe('user:pool_requests', userdetails => {
this.get_pool_requests();
});
setTimeout(() => {
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
console.log("in user")
this.user_data= user_data;
this.get_pool_requests()
}else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data){
if(data.user_data.id) {
this.user_data = data.user_data;
this.get_pool_requests()
}
}else{
this.navCtrl.setRoot('TabsPage');
}
});
modal.present();
}
})
}, 1000);
}
ionViewDidLoad() {
console.log('ionViewDidLoad Request_quote');
}
get_details(id){
this.navCtrl.push('QuoteDetailsPage',{'pool_id' :id});
}
get_pool_requests(){
this.myservice.show_loader();
this.myservice.load_get('get_pool_requests/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.request_list = data.result;
console.log(this.request_list);
}
else
this.request_list =''
});
}
delete_noti(id,evt){
evt.stopPropagation();
this.myservice.show_loader();
this.myservice.load_get('delete_noti/id/'+id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success",data.message);
this.events.publish('user:notifications', '');
this.get_pool_requests();
}
});
}
notification_clear(evt){
evt.stopPropagation();
this.myservice.show_loader();
this.myservice.load_get('notification_clear/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success",data.message);
this.events.publish('user:notifications', '');
this.get_pool_requests();
}
});
}
}
<!--
Generated template for the AboutPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>about</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';
@NgModule({
declarations: [
AboutPage,
],
imports: [
IonicPageModule.forChild(AboutPage),
],
})
export class AboutPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the AboutPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AboutPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Profile
</div>
</ion-header>
<ion-content>
<div class="fm_common_wrapper">
<form [formGroup]="editProform" (ngSubmit)="edit_profile()">
<div class="fm_banner">
<div class="fm_banner_circle" (click)="uploadPicture()">
<img src="assets/imgs/fm_photo.png" *ngIf="!profile_pic">
<img [src]="profile_pic" *ngIf="profile_pic" >
</div>
<div class="fm_border">
</div>
</div>
<h3>About You</h3>
<ion-list>
<ion-item>
<ion-input type="text" formControlName="first_name" placeholder="First Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.first_name.hasError('required') && editProform.controls.first_name.touched">First name is required!</p>
<p class="valid-p" *ngIf="editProform.controls.first_name.hasError('pattern') && editProform.controls.first_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="editProform.controls.first_name.hasError('maxlength') && editProform.controls.first_name.touched">Maximum firstname length is 30!</p>
</div>
<ion-item>
<ion-input type="text" formControlName="last_name" placeholder="Last Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.last_name.hasError('required') && editProform.controls.last_name.touched">Last name is required!</p>
<p class="valid-p" *ngIf="editProform.controls.last_name.hasError('pattern') && editProform.controls.last_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="editProform.controls.last_name.hasError('maxlength') && editProform.controls.last_name.touched">Maximum lastname length is 30!</p>
</div>
<ion-item>
<ion-input formControlName="mobile" type="number" placeholder="Phone Number"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.mobile.hasError('required') && editProform.controls.mobile.touched">Sorry, field Phone no is required!</p>
<p class="valid-p" *ngIf="editProform.controls.mobile.hasError('pattern') && editProform.controls.mobile.touched">Sorry, please enter a valid Phone number!</p>
<p class="valid-p" *ngIf="editProform.controls.mobile.hasError('minlength') && editProform.controls.mobile.touched">Sorry, minimum Phone number length is 10!</p>
<p class="valid-p" *ngIf="editProform.controls.mobile.hasError('maxlength') && editProform.controls.mobile.touched">Sorry, maximum Phone number length is 20!</p>
</div>
<ion-item>
<input type="text" id="address_editpro" (click)="initialize()" formControlName="address" placeholder="Address">
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.address.hasError('required') && editProform.controls.address.touched">Address is required!</p>
</div>
<ion-item>
<ion-input type="number" formControlName="postal_code" placeholder="Postal Code"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.postal_code.hasError('required') && editProform.controls.postal_code.touched">Sorry, field postal code is required!</p>
<p class="valid-p" *ngIf="editProform.controls.postal_code.hasError('pattern') && editProform.controls.postal_code.touched">Sorry, please enter a valid postal code!</p>
<p class="valid-p" *ngIf="editProform.controls.postal_code.hasError('minlength') && editProform.controls.postal_code.touched">Sorry, minimum postal code length is 4!</p>
<p class="valid-p" *ngIf="editProform.controls.postal_code.hasError('maxlength') && editProform.controls.postal_code.touched">Sorry, maximum postal code length is 4!</p>
</div>
<ion-item>
<input type="text" id="locality" formControlName="city" placeholder="City">
</ion-item>
</ion-list>
<h5>About your car</h5>
<ion-list>
<ion-item>
<ion-input type="text" formControlName="car_make" placeholder="Make of Car"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.car_make.hasError('required') && editProform.controls.car_make.touched">Make of Car is required!</p>
</div>
<ion-item>
<ion-input type="text" formControlName="car_model" placeholder="Model of Car"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="editProform.controls.car_model.hasError('required') && editProform.controls.car_model.touched">Model of Car is required!</p>
</div>
</ion-list>
<h5>Vehicle Paper</h5>
<div class="fm_add_picture" >
<li>
<div class="inside_image" *ngIf="vehicle_pic" >
<img (click)="open_img(vehicle_pic['1'])" [src]="vehicle_pic['1']" *ngIf="vehicle_pic['1']" >
<div class="edit" (click)="uploadvehicleimg('1')">
<ion-icon ios="ios-create" md="md-create"></ion-icon>
</div>
</div>
</li>
<li>
<div class="inside_image" *ngIf="vehicle_pic" >
<img (click)="open_img(vehicle_pic['2'])" [src]="vehicle_pic['2']" *ngIf="vehicle_pic['2']" >
<div class="edit" (click)="uploadvehicleimg('2')">
<ion-icon ios="ios-create" md="md-create"></ion-icon>
</div>
</div>
</li>
</div>
<div class="textCenter bottom_bay">
<button ion-button class="login_btn theme_lblue widthFull">Save Changes</button>
<button ion-button type="button" (click)="Changepsw()" class="login_btn_clear widthFull">Change Password</button>
</div>
<br>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddcarPage } from './addcar';
@NgModule({
declarations: [
AddcarPage,
],
imports: [
IonicPageModule.forChild(AddcarPage),
],
})
export class AddcarPageModule {}
page-addcar {
.fm_common_wrapper{
.fm_banner{
width: 100%;
height:115px;
background: #f4f3ee;
text-align: center;
position: relative;
.fm_banner_circle{
width:115px;
height:115px;
margin:0 auto;
position: relative;
border-radius: 50%;
background:#07426a;
top:40px;
z-index:1;
border:2px solid #07426a;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit:cover;
object-position:center;
}
}
.fm_border{
width: 100%;
height:3px;
background:url('../../assets/imgs/fm_border.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left:0px;
right:0px;
bottom:0px;
}
}
h3{
text-align: center;
color:#0076ba;
font-size: 18px;
padding-top: 50px;
}
h5{
color: #777777;
text-align: left;
font-weight: 400;
font-size: 20px;
margin-top: 0px;
padding: 10px;
margin:0px;
}
h6{
margin:0px;
padding:0px;
color: #777777;
font-size: 15px;
padding-top: 5px;
}
.fm_input_add{
width: 100px;
height: 30px;
border:2px solid #198ba6;
border-radius: 20px;
float: right;
padding-left: 10px;
}
.list {
padding:15px;
margin-bottom:0px;
border-bottom: none !important;
.item {
padding: 0px;
padding-bottom:15px;
border-bottom: none !important;
box-shadow: none !important;
.item-inner{
box-shadow: none !important;
.input-wrapper{
.label {
margin:0px;
}
.text-input{
margin:0px;
height: 35px;
border-bottom:1px solid #b7b7b7;
}
input{
margin:0px;
height: 35px;
border:none;
border-bottom:1px solid #b7b7b7;
width:100%;
}
.select{
min-width: 100%;
border-bottom:1px solid #b7b7b7;
padding: 0px;
height: 35px;
color: #7b7b7b;
font-weight: 300;
.select-text{
padding-top: 5px;
padding-bottom:5px;
}
.select-icon{
width:30px;
height:30px;
background:url('../../assets/imgs/fm_drop_down_circle.png');
background-repeat: no-repeat;
background-size: 25px;
.select-icon-inner{
display: none;
}
}
}
}
}
}
}
}
.fm_add_picture{
width:100%;
padding: 10px;
li{
width:85px;
height:85px;
list-style: none;
display: inline-block;
position: relative;
.inside_image{
width:100%;
height:100%;
}
.edit{
width: 30px;
height: 30px;
background:rgba(0,0,0,0.8);
border-radius: 50%;
text-align: center;
padding: 5px;
position: absolute;
top: 0px;
right: 0px;
.icon{
color: #fff;
}
}
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
}
.bottom_bay{
padding: 10px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,Events,ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { PhotoViewer } from '@ionic-native/photo-viewer';
declare var require: any;
declare var google: any;
@IonicPage()
@Component({
selector: 'page-addcar',
templateUrl: 'addcar.html',
})
export class AddcarPage {
services:any;
location={'lat':'','lng':''};
citie: any;
coun: any;
private editProform : FormGroup;
address: any;
user_data: any;
componentForm: any;
base64Image: any;
profile_pic: any;
base64vehicle =[];
vehicle_pic =[];
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice, private formBuilder: FormBuilder,private transfer: FileTransfer, private file: File, private imagePicker: ImagePicker, public events: Events,public modalCtrl: ModalController,private photoViewer: PhotoViewer) {
this.editProform = this.formBuilder.group({
first_name:['', Validators.compose([Validators.maxLength(30), Validators.required])],
last_name: ['', Validators.compose([Validators.maxLength(30), Validators.required])],
car_model: ['', Validators.required],
car_make: ['', Validators.required],
city: ['',],
postal_code: ['',Validators.compose([Validators.pattern("[0-9]*"), Validators.required,Validators.minLength(4),Validators.maxLength(4)])],
address: ['', Validators.required],
mobile: ['',Validators.compose([Validators.pattern("[0-9]*"), Validators.required,Validators.minLength(10),Validators.maxLength(20)])],
});
console.log("addcar");
this.storage.get('user_data').then((user_data) => {
if(user_data){
console.log(user_data);
this.user_data=user_data;
this.get_profile();
}else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
if(data){
console.log("no");
if(data.user_data.id) {
this.user_data = data.user_data;
this.get_profile()
}
}else{
console.log("ys");
this.navCtrl.setRoot('TabsPage');
}
});
modal.present();
}
})
this.componentForm = {
locality: 'long_name'
};
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddcarPage');
}
back()
{
this.navCtrl.pop();
}
servicehistory()
{
this.navCtrl.push('ServicehistoryPage');
}
Changepsw()
{
this.navCtrl.push('Changepsw');
}
edit_profile(){
if(this.editProform.valid)
{
this.myservice.show_loader();
this.editProform.controls['city'].setValue(this.citie);
this.editProform.controls['address'].setValue(this.address);
var user_id ={'id':this.user_data.id}
var obj = Object.assign(this.editProform.value, this.location,user_id);
if(this.base64Image) {
this.load_post_file(this.base64Image, obj, "editProfile");
}else{
this.myservice.load_post(obj, "editProfile").subscribe(response => {
this.myservice.hide_loader();
console.log(response);
if(response.status == "success") {
this.myservice.show_alert("success!", response.message);
this.user_data.first_name = response.result.first_name;
this.user_data.last_name = response.result.last_name;
this.user_data.mobile = response.result.mobile;
console.log(this.user_data);
this.events.publish('user:update_profile', this.user_data);
this.get_profile();
}
else {
this.myservice.show_alert("Error!", response.message);
}
})
}
}
else{ // Form is not valid
this.markFormGroupTouched(this.editProform); // function to mark fields as touched
}
}
load_post_file(imageURI, post_data, fn_name) {
console.log(imageURI);
let ft = this.transfer.create();
let filename = imageURI.substr(imageURI.lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
//ft.onProgress(this.onProgress);
this.myservice.show_loader();
ft.upload(imageURI, this.myservice.webservice_url+fn_name, options, false)
.then((result: any) => {
//this.success(result);
this.myservice.hide_loader();
console.log(result);
var res =JSON.parse(result.response);
if(res.status == "failed") {
this.myservice.show_alert("Error!", res.status);
}
else {
this.myservice.show_alert("Success!", res.status);
console.log("result", res );
console.log("resultval",res.result );
console.log("pro pic", res.result.profile_pic);
this.user_data.profile_pic = res.result.profile_pic;
this.user_data.first_name = res.result.first_name;
this.user_data.last_name = res.result.last_name;
this.user_data.mobile = res.result.mobile;
console.log(this.user_data);
this.events.publish('user:update_profile', this.user_data);
this.get_profile();
}
}).catch((error: any) => {
//this.failed(error);
console.log(error);
//this.result = error;
this.myservice.hide_loader();
this.myservice.show_alert("Error!", 'Error occured. Please try again');
});
//console.log(this.result);
//return this.result;
}
initialize() {
console.log("initialize")
var addressType='address_editpro';
var input = document.getElementById('address_editpro');
/* var options = {
types: ['(cities)']
}; */
var autocomplete = new google.maps.places.Autocomplete(input);
let thiss = this;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place.address_components);
for (var i = 0; i < place.address_components.length; i++) {
addressType = place.address_components[i].types[0];
console.log(addressType);
if (thiss.componentForm[addressType]) {
console.log(thiss.componentForm[addressType]);
var val = place.address_components[i][thiss.componentForm[addressType]];
// document.getElementById(addressType).value = val;
console.log(val);
(document.getElementById(addressType) as HTMLInputElement).value= val;
if(addressType=='locality'){ thiss.citie = place.address_components[i][thiss.componentForm['locality']]; }
}
}
thiss.address = place.formatted_address;
// thiss.signup.controls['address_editpro'].setValue(place.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
/*
thiss.address = place.formatted_address;
console.log(placeA.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
*/
//document.getElementById('driver_lat').value=par.lat;
//document.getElementById('driver_lng').value=par.lng;
// document.getElementById('pickup_lat').value=par.lat;
// document.getElementById('pickup_lng').value=par.lng;
});
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9.]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
nameValidator(control: FormControl): {[s: string]: boolean} {
if ((control.value.toLowerCase().match(' /^[a-zA-Z]*$/'))) {
return {invalid: true};
}
}
get_profile(){
this.myservice.show_loader();
this.myservice.load_get("get_profile/id/"+this.user_data.id).subscribe(response => {
this.myservice.hide_loader();
if(response.status="success") {
this.editProform.patchValue(response.result);
this.location.lat = response.result.lat;
this.location.lng =response.result.lon;
this.profile_pic = response.result.profile_pic
this.vehicle_pic[1] = response.result.vehicle_pic1
this.vehicle_pic[2] = response.result.vehicle_pic2
/* if(response.length > 0){
this.filter_hosp.controls['reasons'].setValue(response.reasons[0].id);
} */
}
else {
}
})
}
uploadPicture(){
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
if(results[i]){
this.base64Image = results[i];
this.profile_pic = results[i];
}
}
}, (err) => { });
}
uploadvehicleimg(pic){
console.log(pic);
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
console.log(results.length);
console.log(results[0]);
if(results){
this.base64vehicle[pic]= results[0];
this.vehicle_pic[pic] = results[0];
}
}, (err) => { });
console.log(this.base64vehicle);
}
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
open_img(img)
{
this.photoViewer.show(img);
}
}
<ion-content class="theme_transparent">
<div class="fm_wrapper">
<div class="nav_header theme_dark">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
Add Review
</div>
<div class="clear"></div>
</div>
<form #ratingform="ngForm" (ngSubmit)="onsubmit(form)">
<div class="fm_body_need">
<div class="fm_list_detail fm_bordernone">
<rating [(ngModel)]="rateval.rate"
readOnly="false"
max="5" name="rate" required
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
></rating>
</div>
<h5>Tell us your feedback</h5>
<hr>
<textarea [(ngModel)]="rateval.comments" required name="comments" class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<!--- <div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div> -->
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" [disabled]="!ratingform.form.valid" >Send<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddReview } from './addreview';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
AddReview,
],
imports: [
IonicPageModule.forChild(AddReview),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class AddReviewModule {}
page-addreview {
.fm_list_detail{width:200px;margin:0 auto;}
.fm_list_detail ul{margin:0px;padding:0px;padding-top:20px;padding-bottom:10px;}
.fm_list_detail ul li .icon{font-size:25px;}
.fm_wrapper{margin-bottom: 150px; width:80%;margin:0 auto;background:#fff;position:relative;top:40px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;}
.fm_add_picture li span{color:#1c8aa4;}
.fm_add_picture li span img{width:auto;height:40px;position: relative;top: 14px;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ModalController, ViewController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-addreview',
templateUrl: 'addreview.html',
})
export class AddReview {
rateval = {
comments: '',
rate: ''
}
user_data:any;
garage_id:any;
booking_id:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private transfer: FileTransfer, private file: File, private formBuilder: FormBuilder,private imagePicker: ImagePicker,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController, public viewCtrl:ViewController) {
this.garage_id = this.navParams.get('garage_id');
this.booking_id = this.navParams.get('booking_id');
console.log(this.garage_id);
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
}
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad DamagephotoPage');
}
back(){
this.navCtrl.pop();
}
success(){
this.navCtrl.push('SuccessPage');
}
onsubmit(vals){
console.log(this.rateval);
var obj = {'rate' : this.rateval.rate,'comments' : this.rateval.comments,'user_id' : this.user_data.id,'garage_id' : this.garage_id,'booking_id' : this.booking_id }
this.myservice.show_loader();
this.myservice.load_post(obj ,'addRating').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success", data.message);
this.viewCtrl.dismiss(data);
}
else
this.myservice.show_alert("Error", data.message);
});
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_common_wrapper">
<div class="fm_banner">
<div class="fm_banner_circle"></div>
<div class="fm_border">
</div>
</div>
<h3>ADD SERVICE HISTORY</h3>
<hr>
<ion-list>
<ion-item class="p0">
<ion-row>
<ion-col col-6 class="p0">
<h6>Date</h6>
</ion-col>
<ion-col col-6 class="p0">
<input class="fm_input_add" type="number" placeholder="23-04-2018">
<div class="clear"></div>
</ion-col>
</ion-row>
</ion-item>
<ion-item class="p0">
<ion-row>
<ion-col col-6 class="p0">
<h6>Odometer</h6>
</ion-col>
<ion-col col-6 class="p0">
<input class="fm_input_add" type="number" placeholder="00000">
<div class="clear"></div>
</ion-col>
</ion-row>
</ion-item>
<ion-item class="p0">
<ion-select>
<ion-option value="1" selected="true">Type of Service</ion-option>
</ion-select>
</ion-item>
<ion-item class="p0">
<ion-row>
<ion-col col-6 class="p0">
<h6>Cost</h6>
</ion-col>
<ion-col col-6 class="p0">
<input class="fm_input_add" type="number" placeholder="00000">
<div class="clear"></div>
</ion-col>
</ion-row>
</ion-item>
<ion-item class="p0">
<ion-input type="Shop Name" placeholder="Shop Name"></ion-input>
</ion-item>
</ion-list>
<h5>Take a picture of Receipt</h5>
<hr>
<div class="textCenter">
<span>
<img src="assets/imgs/fm_photo.png">
</span>
</div>
<div class="textCenter">
<button class="fm_skip" ion-button>Save</button>
</div>
<br>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddservicehistoryPage } from './addservicehistory';
@NgModule({
declarations: [
AddservicehistoryPage,
],
imports: [
IonicPageModule.forChild(AddservicehistoryPage),
],
})
export class AddservicehistoryPageModule {}
page-addservicehistory {
.fm_common_wrapper{
.fm_banner{
width: 100%;
height:115px;
background: #f4f3ee;
text-align: center;
position: relative;
.fm_banner_circle{
width:115px;
height:115px;
margin:0 auto;
position: relative;
border-radius: 50%;
background:#07426a;
top:40px;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit:cover;
object-position:center;
}
}
.fm_border{
width: 100%;
height:3px;
background:url('../../assets/imgs/fm_border.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left:0px;
right:0px;
bottom:0px;
}
}
h5{
color: #777777;
text-align: center;
font-weight: 400;
font-size: 15px;
margin-top:0px;
}
h3{
text-align: center;
color: #07426a;
font-size: 18px;
padding-top: 50px;
}
h6{
margin:0px;
padding:0px;
color: #777777;
font-size: 15px;
padding-top: 5px;
}
hr{
border:2px solid #15b3d5;
width:80px;
margin:0 auto;
height:0px;
border-radius: 20px;
}
.fm_input_add{
width: 100px;
height: 30px;
border:2px solid #198ba6;
border-radius: 20px;
float: right;
padding-left: 10px;
}
.list {
padding: 25px;
margin-bottom:0px;
border-bottom: none !important;
color: #7d7d7d;
.item {
padding: 0px;
padding-bottom:15px;
border-bottom: none !important;
box-shadow: none !important;
.item-inner{
.input-wrapper{
.label {
margin:0px;
}
.text-input{
margin:0px;
height: 35px;
border-bottom:1px solid #b7b7b7;
width: 100%;
}
.select{
min-width: 100%;
border-bottom:1px solid #b7b7b7;
padding: 0px;
height: 35px;
color: #7b7b7b;
font-weight: 300;
.select-text{
padding-top: 5px;
padding-bottom:5px;
}
.select-icon{
width:30px;
height:30px;
background:url('../../assets/imgs/fm_drop_down_circle.png');
background-repeat: no-repeat;
background-size: 25px;
.select-icon-inner{
display: none;
}
}
}
}
}
}
}
}
span{
img{
width:70px;
margin-top:20px;
margin-bottom:20px;
}
}
.fm_skip{
width: 100px;
height:35px;
border-radius: 20px;
background: #050505;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-addservicehistory',
templateUrl: 'addservicehistory.html',
})
export class AddservicehistoryPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddservicehistoryPage');
}
back()
{
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_menu" ion-button menuToggle>
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car"></div>
</div>
</div>
<div class="fm_body_work_list">
<ul>
<li (click)="bodysection()">
<img src="assets/icon/fm_bodywork.png">
<p>Body Works</p>
<span><img src="assets/icon/fm_ques.png"></span>
<div class="clear"></div>
</li>
<li (click)="catagory()">
<img src="assets/icon/fm_repairs.png">
<p>Repairs</p>
<span><img src="assets/icon/fm_ques.png"></span>
<div class="clear"></div>
</li>
<li (click)="wrap()">
<img src="assets/icon/fm_tint.png">
<p>Wraps/Tint</p>
<span><img src="assets/icon/fm_ques.png"></span>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="fm_body_need">
<h5>Tell us what you need to done</h5>
<hr>
<textarea class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn">Next<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BodyPage } from './body';
@NgModule({
declarations: [
BodyPage,
],
imports: [
IonicPageModule.forChild(BodyPage),
],
})
export class BodyPageModule {}
page-body {
.fm_status_progress_bar{height:30px;width:100%;background:url("../../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-body',
templateUrl: 'body.html',
})
export class BodyPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad BodyPage');
}
bodysection() {
this.navCtrl.push('CatagoryBody');
}
catagory() {
this.navCtrl.push('CatagoryPage');
}
wrap() {
this.navCtrl.push('CatagoryWash');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Request
</div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<!-- <div class="fm_status_outter" style="background:#fff !important;">
<div class="fm_status_progress_bar">
<div class="fm_status_car"style="left:45%;"></div>
</div>
</div> -->
<div class="fm_body_need" style="padding-top:55px;">
<h5 class="textCenter">Select what you need to be done</h5>
<div class="fm_car_body_div">
<div class="fm_hood">
<div class="fm_body_part bumber_pos bumber" (click)="body_part('Front Bumber',$event)" >Front Bumber
<div class="fm_arw_down"></div>
</div>
<div class="fm_body_part hood_pos" (click)="body_part('Hood',$event)" >Hood
<div class="fm_arw_down"></div>
</div>
<div class="fm_body_part panel_posright" (click)="body_part('Right Panel',$event)" >Right Panel
<div class="fm_arw_left"></div>
</div>
<div class="fm_body_part panel_posleft" (click)="body_part('Left Panel',$event)" >Left Panel
<div class="fm_arw_right"></div>
</div>
</div>
<div class="fm_body">
<div class="fm_body_part wind_pos" (click)="body_part('Windsheild',$event)" >Windsheild
<div class="fm_arw_down"></div>
</div>
<div class="fm_body_part mirror_pos" (click)="body_part('Side Mirrors',$event)" >Side Mirrors
<div class="fm_arw_left"></div>
</div>
<div class="fm_body_part window_pos" (click)="body_part('Windows',$event)" >Windows
<div class="fm_arw_left"></div>
</div>
<div class="fm_body_part door_posright" (click)="body_part('Right Doors',$event)" >Right Doors
<div class="fm_arw_left"></div>
</div>
<div class="fm_body_part door_posleft" (click)="body_part('Left Doors',$event)" >Left Doors
<div class="fm_arw_right"></div>
</div>
</div>
<div class="fm_body_back">
<div class="fm_body_part panel_posright" (click)="body_part('Right Panel',$event)" >Right Panel
<div class="fm_arw_left"></div>
</div>
<div class="fm_body_part panel_posleft" (click)="body_part('Left Panel',$event)" >Left Panel
<div class="fm_arw_right"></div>
</div>
<div class="fm_body_part wind_pos" (click)="body_part('Windsheild',$event)" >Windsheild
<div class="fm_arw_up"></div>
</div>
<div class="fm_body_part bumber_pos bumber" (click)="body_part('Rear Bumber',$event)" >Rear Bumber
<div class="fm_arw_up"></div>
</div>
</div>
</div>
<div class="fm_body_bottom_btn_bay">
<button class="login_btn theme_lblue widthFull" (click)="damagephoto()">Next</button>
<button class="login_btn_clear widthFull" (click)="skip()" >Skip</button>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BodysectionPage } from './bodysection';
@NgModule({
declarations: [
BodysectionPage,
],
imports: [
IonicPageModule.forChild(BodysectionPage),
],
})
export class BodysectionPageModule {}
page-bodysection {
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:0px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{ color: #0076ba;
margin:0px;
padding-top: 5px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_car_body_div{margin-top:60px !important;width:200px;margin:0 auto;background:url("../assets/imgs/fm_car_body.png");background-repeat:no-repeat !important;background-position:center !important; height:280px;background-size: contain;position:relative;}
.fm_hood{position:absolute;left:0px;right:0px;top:0px;height:130px;}
.fm_body{position:absolute;right:0px;left:0px;top:130px;height:110px;}
.fm_body_back{position:absolute;right:0px;left:0px;bottom:0px;height:130px;}
.fm_body_part{position:absolute;background:#f8b800;color:#fff;padding:3px;padding-left:15px;padding-right:15px;border-radius:5px;font-size: 10px;}
.bumber{
background-color: #1DB100;
}
/*HOOD-PART-LABEL*/
.fm_hood .bumber_pos{left:53px;top:-40px;}
.fm_hood .hood_pos{left:73px;top:22px;}
.fm_hood .panel_posright{right:-50px;top:30px;}
.fm_hood .panel_posleft{left:-40px;top:30px;}
/*BODY-PART-LABEL*/
.fm_body .wind_pos{left:60px;top:-50px;}
.fm_body .mirror_pos{right:-55px;top:-35px;}
.fm_body .window_pos{right:-40px;top:0px;}
.fm_body .door_posright{right:-51px;top:40px;}
.fm_body .door_posleft{left:-40px;top:40px;}
/*BACK-PART-LABEL*/
.fm_body_back .panel_posright{right:-50px;top:70px;}
.fm_body_back .panel_posleft{left:-40px;top:70px;}
.fm_body_back .wind_pos{left:60px;top:80px;}
.fm_body_back .bumber_pos{left:58px;top:150px;}
.selected_part{background:#15b3d5 !important;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.fm_body_next span img{width:10px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;}
.fm_add_picture li span{color:#1c8aa4;}
.fm_add_picture li span img{width:auto;height:40px;position: relative;top: 14px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-bodysection',
templateUrl: 'bodysection.html',
})
export class BodysectionPage {
body_parts=[];
service_id:any;
service:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.service_id = this.navParams.get('service_id');
this.service = this.navParams.get('service');
console.log(this.service);
}
ionViewDidLoad() {
console.log('ionViewDidLoad BodysectionPage');
}
back(){
this.navCtrl.pop();
}
damagephoto(){
if(this.body_parts.length>0)
this.navCtrl.push('DamagephotoPage',{'body_parts':this.body_parts,'service_id':this.service_id,'service' : this.service});
}
body_part(body_parts,evt){
if(evt.target.classList.contains('fm_body_part')){
console.log(evt)
if(this.body_parts.indexOf(body_parts) != -1)
{
evt.target.classList.remove('selected_part');
this.body_parts.splice(this.body_parts.indexOf(body_parts), 1);
}
else{
evt.target.classList.add('selected_part');
this.body_parts.push(body_parts);
}
console.log(this.body_parts)
}
}
skip(){
this.navCtrl.push('DamagephotoPage',{'body_parts':'','service_id':this.service_id,'service' : this.service});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Booking Overview
</div>
</ion-header>
<ion-content class="page_background"><div *ngIf="request_val" >
<div class="widthFull theme_lblue text_color_white textCenter status_label" *ngIf="request_val.book_status=='1'" >BOOKED</div>
<div class="widthFull theme_green text_color_white textCenter status_label" *ngIf="request_val.book_status=='3'" >COMPLETED</div>
<div class="widthFull theme_red text_color_white textCenter status_label" *ngIf="request_val.book_status=='2'" >CANCELLED</div>
</div>
<div padding>
<div class="fm_vehicle_detail" *ngIf="request_val" >
<div class="fm_quote_received">
Booked for : <strong>{{request_val.book_date |date:'EE,dd.MM.yyyy'}} </strong> at <strong>{{request_val.book_time}} </strong>
</div>
<div class="fm_vehicle_banner">
<div class="fm_vehicle_photo"> <img *ngIf="request_val.profile_pic" [src]="request_val.profile_pic" ></div>
<div class="fm_vehicle_detail">
<h4>{{request_val.name}} </h4>
<!-- <p>Mustang 2017</p> -->
<button type="button" *ngIf="request_val.rate==null && request_val.book_status==3" (click)="presentPopover($event)" class="fm_addreview">Add Review</button>
<rating [(ngModel)]="request_val.rate" *ngIf="request_val.rate!=null"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)"></rating>
</div>
<div class="clear"></div>
</div>
<div class="fm_vehicle_bottom">
<p>Repair Type:</p>
<h4 *ngIf="request_val.pool_id!=0" >{{request_val.service_name}}</h4>
<h4 *ngIf="request_val.pool_id==0" >{{request_val.service}}</h4>
<p>User Name:</p>
<h4>{{request_val.first_name}} {{request_val.last_name}}</h4>
<p *ngIf="request_val.discount!=null" >Discount:</p>
<h4 *ngIf="request_val.discount!=null" >{{request_val.discount}}%</h4>
<p>Price:</p>
<h4>€{{request_val.price}}</h4>
<p>Booking status:</p>
<h4 *ngIf="request_val.book_status==1" >Waiting for Service</h4>
<h4 *ngIf="request_val.book_status==2" >On repair</h4>
<h4 *ngIf="request_val.book_status==3" >Garage has completed service</h4>
<h4 *ngIf="request_val.book_status==4" >Repair Completed</h4>
<br>
<!-- <p>Existing quote photos</p>
<div class="fm_gallery">
<li></li>
<li></li>
<div class="clear"></div>
</div>
<p>Details and Images</p>
<div class="fm_gallery">
<li *ngFor="let images of request_val.pool_images" > <img [src]="images.image" ></li>
</div> -->
</div>
<div class="textCenter" *ngIf="request_val">
<button *ngIf="request_val.book_status==3" class="login_btn widthFull theme_lblue" ion-button (click)="repair()">Confirm Repair Complete</button>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BookingDetail } from './booking-detail';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
BookingDetail,
],
imports: [
IonicPageModule.forChild(BookingDetail),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class BookingDetailModule {}
page-booking-detail {
.page_background{
background:#fff;
background-size: cover;
background-position: center;
}
.fm_vehicle_detail{
width: 100%;
.fm_quote_received{
color: #0076ba;
padding: 10px;
border-radius: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 18px;
font-weight:500;
padding-bottom: 20px;
text-align: center;
strong{
color: #1DB100;
padding-left: 10px;
}
}
.fm_vehicle_banner{
width: 100%;
margin-top: 20px;
border-bottom:1px solid #bfbfbf;
padding-bottom: 20px;
.fm_vehicle_photo{
width:80px;
height:80px;
border-radius: 50%;
border-radius: 50%;
background: #f3f3f3;
float: left;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.fm_vehicle_detail{
float: left;
width:calc(100% - 100px);
padding: 25px;
h4{
margin:0px;
padding:0px;
color: #07426a;
font-size: 20px;
}
p{
margin:0px;
padding:0px;
color: #5c5c5c;
}
}
}
.fm_vehicle_bottom{
width: 100%;
p{
color: #0076ba;
margin-bottom: 0px;
font-weight: 600;
font-size: 16px;
}
h4{
color: #7b7b7b;
margin:0px;
font-weight: 400;
font-size: 18px;
padding-top: 8px;
}
.fm_gallery{
width: 100%;
padding-top: 10px;
padding-bottom: 20px;
li{
width: calc(100% - 51%);
height: 100px;
background: #a8a8a8;
list-style: none;
display:inline-block;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
}
}
}
}
.login_btn{
text-transform: capitalize !important;
}
\ No newline at end of file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController ,Events} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-booking-detail',
templateUrl: 'booking-detail.html',
})
export class BookingDetail {
booking_id:any;
request_val:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController,public events:Events) {
this.booking_id = this.navParams.get('id');
if(this.booking_id){
this.getSingleBookings();
this.update_read_status();
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad VehicleDetailPage');
}
back(){
this.navCtrl.pop();
}
repair(){
this.myservice.show_loader();
this.myservice.load_get('update_book_status/id/'+this.booking_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success",data.message);
this.getSingleBookings()
this.update_read_status();
}
else
this.myservice.show_alert("Error",data.message)
});
}
getSingleBookings(){
this.myservice.show_loader();
this.myservice.load_get('getSingleBookings/id/'+this.booking_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.request_val = data.data;
console.log("book details", this.request_val)
}
});
}
update_read_status(){
this.myservice.show_loader();
this.myservice.load_get('update_bookread_status/id/'+this.booking_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.events.publish('user:read_status','');
console.log(data);
}
});
}
presentPopover(myEvent) {
let modal = this.modalCtrl.create('AddReview',{'garage_id':this.request_val.garage_id,'booking_id' : this.booking_id});
modal.onDidDismiss(data => {
if(data) {
this.getSingleBookings();
}
});
modal.present({
ev: myEvent
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button>
<ion-icon name="ios-menu" menuToggle></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Bookings
</div>
</ion-header>
<ion-content padding class="page_background">
<div class="fm_list">
<div class="fm_list_tab">
<ul>
<li [ngClass]="{'active' : slidertab == 0}" (click)="goToSlide(0)">Booked</li>
<li [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">Completed</li>
<div class="clear"></div>
</ul>
<ion-slides pager="false" #mySlider class="fm_slide" (ionSlideDidChange)="slideChanged()">
<ion-slide class="theme_secondary">
<ion-list *ngIf="book_list">
<ion-item (click)="booking_details(bookings.id)" *ngFor="let bookings of book_list.booked" [ngClass]="(bookings.read_user_status == 0)?'stat':''" >
<h5>{{bookings.name}}</h5>
<div class="fill_detail">
<div class="fill_detail_half">
<p>Booked Service:</p>
<h6 *ngIf="bookings.service!=null" >{{bookings.service}}</h6>
<h6 *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</h6>
</div>
<div class="fill_detail_half pl15">
<p>Booked for:</p>
<h6>{{bookings.book_date |date:'dd.MM.yyyy'}}, {{bookings.book_time }}</h6>
<p>Total Amount:<strong class="text_green">€{{bookings.price}}</strong></p>
</div>
<div class="clear"></div>
</div>
</ion-item>
<div class="no_resultfound" *ngIf="book_list.booked.length <=0" >
<img src="assets/imgs/noresult.png">
<p>No Booking Found </p>
</div>
</ion-list>
</ion-slide>
<ion-slide class="theme_secondary">
<!-- <ion-list *ngIf="book_list">
<ion-item (click)="booking_details(bookings.id)" *ngFor="let bookings of book_list.active">
<div class="fm_list_left">
<div class="fm_list_top">
<div class="fm_list_top_circle floatLeft">
<img *ngIf="bookings.profile_pic" [src]="bookings.profile_pic" >
</div>
<h4 class="floatLeft">{{bookings.name}}</h4>
<h4 class="floatRight red" *ngIf="bookings.book_time!=null" >{{bookings.book_time }}</h4>
<div class="clear"></div>
<p>Repair Details:</p>
<div class="fm_list_bottom">
<ul>
<li *ngIf="bookings.service!=null" >{{bookings.service}}</li>
<li *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</li>
</ul>
</div>
</div>
</div>
<div class="fm_list_right">
<p>{{bookings.book_date |date:'EE'}}</p>
<h6>{{bookings.book_date |date:'dd.MM.yyyy'}}</h6>
<img src="assets/imgs/fm_arw.png">
</div>
</ion-item>
<div class="no_resultfound" *ngIf="book_list.active.length <=0" >
<img src="assets/imgs/noresult.png">
<p>No Booking Found </p>
</div>
</ion-list > -->
<ion-list *ngIf="book_list">
<ion-item (click)="booking_details(bookings.id)" *ngFor="let bookings of book_list.completed" >
<h5>{{bookings.name}}</h5>
<div class="fill_detail">
<div class="fill_detail_half">
<p>Booked Service:</p>
<h6 *ngIf="bookings.service!=null" >{{bookings.service}}</h6>
<h6 *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</h6>
</div>
<div class="fill_detail_half pl15">
<p>Booked for:</p>
<h6>{{bookings.book_date |date:'dd.MM.yyyy'}}, {{bookings.book_time }}</h6>
<p>Total Amount:<strong class="text_green">€{{bookings.price}}</strong></p>
</div>
<div class="clear"></div>
</div>
</ion-item>
<div class="no_resultfound" *ngIf="book_list.completed.length <=0" >
<img src="assets/imgs/noresult.png">
<p>No Booking Found </p>
</div>
</ion-list>
</ion-slide>
<!-- <ion-slide class="theme_secondary"> -->
<!-- <ion-list *ngIf="book_list"> -->
<!-- <ion-item (click)="booking_details(bookings.id)" *ngFor="let bookings of book_list.completed"> -->
<!-- <div class="fm_list_left"> -->
<!-- <div class="fm_list_top"> -->
<!-- <div class="fm_list_top_circle floatLeft"> -->
<!-- <img *ngIf="bookings.profile_pic" [src]="bookings.profile_pic" > -->
<!-- </div> -->
<!-- <h4 class="floatLeft">{{bookings.name}} </h4> -->
<!-- <h4 class="floatRight red" *ngIf="bookings.book_time!=null" >{{bookings.book_time }}</h4> -->
<!-- <div class="clear"></div> -->
<!-- <p>Repair Details:</p> -->
<!-- <div class="fm_list_bottom"> -->
<!-- <ul> -->
<!-- <li *ngIf="bookings.service!=null" >{{bookings.service}}</li> -->
<!-- <li *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="fm_list_right"> -->
<!-- <p>{{bookings.book_date |date:'EE'}}</p> -->
<!-- <h6>{{bookings.book_date |date:'dd.MM.yyyy'}}</h6> -->
<!-- <img src="assets/imgs/fm_arw.png"> -->
<!-- </div> -->
<!-- </ion-item> -->
<!-- <div class="no_resultfound" *ngIf="book_list.completed.length <=0" > -->
<!-- <img src="assets/imgs/noresult.png"> -->
<!-- <p>No Booking Found </p> -->
<!-- </div> -->
<!-- </ion-list > -->
<!-- </ion-slide> -->
</ion-slides>
<div class="no_resultfound" *ngIf="!book_list" >
<img src="assets/imgs/noresult.png">
<p>No Booking Found </p>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Booking } from './booking';
@NgModule({
declarations: [
Booking,
],
imports: [
IonicPageModule.forChild(Booking),
],
})
export class BookingModule {}
page-booking {
.page_background{
background-size: cover;
background-position: center;
}
.fm_list{
width: 100%;
.fm_list_tab{
ul{
padding:0px;
margin:0px;
border:1px solid #000;
border-radius: 30px;
li{
list-style:none;
float: left;
width:33.33%;
text-align: center;
padding: 10px;
color: #919191;
font-weight:500;
border-radius: 30px;
font-size: 14px;
position:relative;
letter-spacing: 1px;
}
.badge {
position:absolute;
right:8px;
top: 5px;
}
.active{
background: #205373;
color: #fff;
border-radius: 30px;
}
}
}
.fm_slide{
padding-top: 20px;
.list{
margin:0px;
.stat{
}
.item{
border-radius: 0px;
border:none !important;
border-top:1px solid #929292 !important;
background-repeat: no-repeat !important;
background-image:url('../assets/imgs/fm_dot.png') !important;
background-position: top 12px left 10px !important;
background-size: 15px !important;
padding: 15px;
padding-left: 35px !important;
h5{
color: #000;
font-weight: 600;
padding-bottom: 8px;
}
.fill_detail{
width:100%;
.fill_detail_half{
width:50%;
float: left;
overflow-x: hidden;
p{
color: #0076ba;
margin:0px;
}
h6{
color: #929292;
padding-top: 3px;
}
strong{
padding-left:10px;
}
}
.pl15{
padding-left:15px;
}
}
.label{
padding: 0px;
margin:0px;
}
.fm_list_left{
width: calc(100% - 50px);
float: left;
border-right:1px solid #bfbfbf;
.fm_list_top{
width:100%;
.fm_list_top_circle{
width:30px;
height:30px;
border-radius: 50%;
background: #a8a8a8;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
h4{
margin:0px;
padding:0px;
color: #07426a;
font-size: 15px;
padding: 5px;
padding-left: 10px;
strong{
color: #5c5c5c;
font-size: 12px;
font-weight: 400;
padding-left:5px;
}
}
p{
margin:0px;
padding: 0px;
color: #1c8aa4;
font-weight: 300;
padding-top:8px;
padding-bottom:8px;
font-size: 13px;
}
}
.fm_list_bottom{
width: 100%;
ul{
margin:0px;
padding:0px;
border:none;
li{
list-style: none;
background: #e2e2e2;
color:#646464;
border-radius: 20px;
padding: 3px;
font-weight: 300;
margin: 1px;
font-size: 10px;
}
}
}
}
.fm_list_right{
width: 40px;
float: right;
text-align: right;
padding-top: 10px;
img{
width:25px;
}
p{
margin:0px;
padding:0px;
color: #636363;
text-align: right;
font-size: 12px;
}
h6{
margin:0px;
padding:0px;
color: #919191;
text-align: right;
font-size: 10px;
padding-bottom: 10px;
}
}
}
}
}
}
}
import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,Content,Slides, Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-booking',
templateUrl: 'booking.html',
})
export class Booking {
currentIndex:any;
slidertab:any;
user_data:any;
book_list:any;
@ViewChild(Content) content: Content;
@ViewChild('mySlider') slider: Slides;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice,public events:Events) {
setInterval(() => {
this.get_booking_back();
}, 10000);
let id = this.navParams.get("id");
this.slidertab = id;
console.log("id", id);
setTimeout(() => {
this.goToSlide(id);
}, 500)
this.slidertab = 0;
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data=user_data
console.log(this.user_data);
this.get_booking();
}
})
events.subscribe('user:read_status', userdetails => {
console.log("read");
this.get_booking();
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ListVehiclePage');
}
goToSlide(id) {
this.slider.slideTo(id, 500);
}
slideChanged() {
let currentIndex = this.slider.getActiveIndex();
this.slidertab = currentIndex;
console.log("Current index is", currentIndex);
}
booking_details(id){
this.navCtrl.push('BookingDetail',{'id' :id });
}
get_booking(){
this.myservice.show_loader();
this.myservice.load_get('getBookings/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.book_list = data.data;
console.log(this.book_list);
}
});
}
get_booking_back(){
this.myservice.load_get('getBookings/id/'+this.user_data.id).subscribe(data => {
if(data.status == 'success'){
this.book_list = data.data;
console.log(this.book_list);
}
});
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_common_wrapper">
<div class="fm_banner">
<img src="assets/imgs/fm_brake_img.png">
</div>
<h6>FIND BRAKE SERVICE FOR</h6>
<h3>NICK NAME</h3>
<hr>
<br>
<p class="textCenter">or</p>
<br>
<div class="textCenter">
<button class="fm_skip">Select new car</button>
</div>
<br>
<br>
<div class="fm_tab_container">
<div class="fm_tab_header">
<ul>
<li [ngClass]="{'active' : slidertab == 0}" (click)="goToSlide(0)">Font</li>
<li [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">Rear</li>
</ul>
</div>
<div class="fm_tab_content">
<ion-slides pager="false" #mySlider (ionSlideDidChange)="slideChanged()">
<ion-slide>
<h5>What do you need done?</h5>
<ion-list radio-group>
<ion-item>
<ion-radio checked="true" value="go"></ion-radio>
<ion-label>Brake Pads</ion-label>
</ion-item>
<ion-item>
<ion-radio value="rust"></ion-radio>
<ion-label>Rotors</ion-label>
</ion-item>
<ion-item>
<ion-radio value="python" ></ion-radio>
<ion-label>Replace all</ion-label>
</ion-item>
</ion-list>
<hr>
<br>
<ion-list>
<ion-item>
<ion-select>
<ion-option value="1" selected="true">Within km</ion-option>
</ion-select>
</ion-item>
<br>
<ion-item>
<ion-input type="Enter City" placeholder="Enter City"></ion-input>
</ion-item>
</ion-list>
<br>
</ion-slide>
<ion-slide>2</ion-slide>
</ion-slides>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BrakePage } from './brake';
@NgModule({
declarations: [
BrakePage,
],
imports: [
IonicPageModule.forChild(BrakePage),
],
})
export class BrakePageModule {}
page-brake {
.fm_common_wrapper{
.fm_banner{
width: 100%;
height:115px;
background: #f4f3ee;
text-align: center;
position: relative;
img{
width:160px;
}
}
}
h3{
text-align: center;
color: #07426a;
font-size: 18px;
margin-top:0px;
padding-top: 5px;
}
h6{
margin:0px;
padding:0px;
color: #777777;
font-size: 15px;
padding-top: 50px;
text-align: center;
font-weight: 400;
}
hr{
border:2px solid #15b3d5;
width:60px;
margin:0 auto;
height:0px;
border-radius: 20px;
}
p{
margin:0px;
padding:0px;
color: #7b7b7b;
font-weight: 600;
font-size: 18px;
}
.fm_skip{
width: 140px;
height:35px;
border-radius: 20px;
background: #050505;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
color: #cecece;
}
.fm_tab_container{
width: 90%;
margin:0 auto;
.fm_tab_header{
ul{
padding:0px;
margin:0px;
border:1px solid #b7b7b7;
height:35px;
border-radius: 20px;
li{
width:50%;
float: left;
list-style: none;
text-align: center;
color: #8f8f8f;
font-weight: 400;
height: 100%;
font-size: 16px;
padding: 5px;
}
.active{
background: #1c8aa4;
border-radius: 20px;
color: #fff;
}
}
}
.fm_tab_content{
width:100%;
padding-top: 20px;
h5{
color: #767676;
text-align: left;
margin:0px;
font-weight: 400;
font-size:16px;
padding-bottom: 15px;
}
.item{
min-height: 0px !important;
}
.radio-checked {
border-color: #15b3d5 !important;
.label{
color: #979797 !important;
}
}
.radio-inner{
background: #07426a !important;
}
.label{
margin:0px !important;
font-weight: 400;
color: #767676 !important;
font-size: 14px;
}
.select{
min-width: 100%;
border-bottom:1px solid #b7b7b7;
padding: 0px;
height: 35px;
color: #7b7b7b;
font-weight: 300;
.select-text{
padding-top: 5px;
padding-bottom:5px;
}
.select-icon{
width:30px;
height:30px;
background:url('../../assets/imgs/fm_drop_down_circle.png');
background-repeat: no-repeat;
background-size: 25px;
.select-icon-inner{
display: none;
}
}
}
}
}
}
import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController,Content,Slides } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-brake',
templateUrl: 'brake.html',
})
export class BrakePage {
currentIndex:any;
slidertab:any;
@ViewChild(Content) content: Content;
@ViewChild('mySlider') slider: Slides;
constructor(public navCtrl: NavController, public navParams: NavParams) {
let id = this.navParams.get("id");
this.slidertab = id;
console.log("id", id);
setTimeout(() => {
this.goToSlide(id);
}, 500)
this.slidertab = 0;
}
goToSlide(id) {
this.slider.slideTo(id, 500);
}
slideChanged() {
let currentIndex = this.slider.getActiveIndex();
this.slidertab = currentIndex;
console.log("Current index is", currentIndex);
}
back()
{
this.navCtrl.pop();
}
ionViewDidLoad() {
console.log('ionViewDidLoad BrakePage');
}
}
<!--
Generated template for the CameraPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>camera</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CameraPage } from './camera';
@NgModule({
declarations: [
CameraPage,
],
imports: [
IonicPageModule.forChild(CameraPage),
],
})
export class CameraPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the CameraPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-camera',
templateUrl: 'camera.html',
})
export class CameraPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad CameraPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Repair Catagories
</div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car" style="left:44%;"></div>
</div>
</div>
<div class="fm_body_work_list">
<div class="fm_body_need">
<h5>Select a Service for Fixprice</h5>
</div>
<ul>
<li *ngFor="let subcat of sub_cat" (click)="issue(subcat)" >
<img *ngIf="subcat.image" [src]="subcat.image">
<img *ngIf="!subcat.image" [src]="subcat.image">
<p>{{subcat.service}}</p>
<div class="ques" (click)="tool_tip(subcat.description,$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="fm_body_need">
<h5>Select a Service for Request</h5>
</div>
<ul>
<li (click)="request('Annual Service')" >
<img src="assets/imgs/car.png">
<p>Annual Service</p>
<div class="ques" (click)="tool_tip('annual_service',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
<li (click)="request('Oil Service')" >
<img src="assets/imgs/oil.png">
<p>Oil Service</p>
<div class="ques" (click)="tool_tip('oil_service',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
<li (click)="request_brk('Brake Service')" >
<img src="assets/imgs/cd.png">
<p>Brake Service</p>
<div class="ques" (click)="tool_tip('brake_service',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
<li (click)="request_protocol('Repair after §57a-Protocol')" >
<img src="assets/imgs/carsearch.png">
<p>Repair after §57a-Protocol</p>
<div class="ques" (click)="tool_tip('repair',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
<li (click)="request('Others')" >
<img src="assets/imgs/motor.png">
<p>Others</p>
<div class="ques" (click)="tool_tip('others',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<hr>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CatagoryPage } from './catagory';
@NgModule({
declarations: [
CatagoryPage,
],
imports: [
IonicPageModule.forChild(CatagoryPage),
],
})
export class CatagoryPageModule {}
page-catagory {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:0px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../assets/icon/fm_go1.png");background-repeat:no-repeat !important;position:relative;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#0076ba;text-align:center;font-weight:600;margin: 0px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_noidea{width:100%;padding:15px;}
.fm_oil_type p strong{color:#466683;font-size:18px;padding-left:15px;}
.fm_noidea .fm_oil_type{position:relative;top:5px;}
.fm_range{width:40%;text-align:left;}
.fm_city{width:40%;text-align:right;}
.fm_or{width:20%;text-align:center;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.ques{width:25px;height:25px;background:#c7c7c7;color:#fff;position:absolute;right:0px;padding:1px;text-align:center;font-size: 20px;border-radius:50%;right:50px;top:24px;}
}
.toast-wrapper{
width: 100% !important;
border-radius :10px !important;
.toast-container{
.toast-message{
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-catagory',
templateUrl: 'catagory.html',
})
export class CatagoryPage {
service_id:any;
sub_cat:any;
toast:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private toastCtrl: ToastController,private myservice: Myservice) {
this.service_id = this.navParams.get('service_id');
if(this.service_id)
this.getSubServices();
console.log(this.service_id);
}
ionViewDidLoad() {
console.log('ionViewDidLoad CatagoryPage');
}
back(){
this.navCtrl.pop();
}
// issue(id,service){
// this.navCtrl.push('DamagephotoPage',{'body_parts':service,'service_id':this.service_id});
//}
issue(service){
this.navCtrl.push('FixpricesPage',{'service':service,'service_id':this.service_id});
}
request(service){
this.navCtrl.push('RequestPage',{'service':service});
}
request_brk(service){
this.navCtrl.push('RequestBreak',{'service':service});
}
request_protocol(service){
this.navCtrl.push('RequestProtocol',{'service':service});
}
getSubServices(){
this.myservice.show_loader();
this.myservice.load_get('getSubServices/id/'+this.service_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.sub_cat = data.result
}
});
}
tool_tip(msg,evt){
this.closeToast()
this.presentToast(msg);
evt.stopPropagation();
}
presentToast(msg) {
this.toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom'
});
this.toast.present();
this.toast.onDidDismiss(() => {
//this.closeToast();
console.log('Dismissed toast');
});
}
closeToast() {
if(this.toast) {
console.log("hi,close the toast");
this.toast.dismiss();
}
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Body
</div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car" style="left:44%;"></div>
</div>
</div>
<div class="fm_body_work_list">
<div class="fm_body_need">
<h5>Select a Service for Fixprice</h5>
</div>
<ul>
<li *ngFor="let subcat of sub_cat" (click)="issue(subcat)" >
<img *ngIf="subcat.image" [src]="subcat.image">
<img *ngIf="!subcat.image" [src]="subcat.image">
<p>{{subcat.service}}</p>
<div class="ques" (click)="tool_tip(subcat.description,$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="fm_body_need">
<h5>Select a Service for Request</h5>
</div>
<ul>
<li (click)="request('Paint/Foil')" >
<img src="assets/imgs/car.png">
<p>Paint/Foil</p>
<div class="ques" (click)="tool_tip('Paint/Foil',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<hr>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CatagoryBody } from './catagory_body';
@NgModule({
declarations: [
CatagoryBody,
],
imports: [
IonicPageModule.forChild(CatagoryBody),
],
})
export class CatagoryBodyModule {}
page-catagory_body {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:0px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../assets/icon/fm_go1.png");background-repeat:no-repeat !important;position:relative;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#0076ba;text-align:center;font-weight:600;margin: 0px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_noidea{width:100%;padding:15px;}
.fm_oil_type p strong{color:#466683;font-size:18px;padding-left:15px;}
.fm_noidea .fm_oil_type{position:relative;top:5px;}
.fm_range{width:40%;text-align:left;}
.fm_city{width:40%;text-align:right;}
.fm_or{width:20%;text-align:center;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.ques{width:25px;height:25px;background:#c7c7c7;color:#fff;position:absolute;right:0px;padding:1px;text-align:center;font-size: 20px;border-radius:50%;right:50px;top:24px;}
}
.toast-wrapper{
width: 100% !important;
border-radius :10px !important;
.toast-container{
.toast-message{
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-catagory_body',
templateUrl: 'catagory_body.html',
})
export class CatagoryBody {
service_id:any;
sub_cat:any;
toast:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private toastCtrl: ToastController,private myservice: Myservice) {
this.service_id = this.navParams.get('service_id');
if(this.service_id)
this.getSubServices();
console.log(this.service_id);
}
ionViewDidLoad() {
console.log('ionViewDidLoad CatagoryPage');
}
back(){
this.navCtrl.pop();
}
issue(service){
this.navCtrl.push('FixpricesPage',{'service':service,'service_id':this.service_id});
}
request(service){
this.navCtrl.push('BodysectionPage',{'service':service});
}
getSubServices(){
this.myservice.show_loader();
this.myservice.load_get('getSubServices/id/'+this.service_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.sub_cat = data.result
}
});
}
tool_tip(msg,evt){
this.closeToast()
this.presentToast(msg);
evt.stopPropagation();
}
presentToast(msg) {
this.toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom'
});
this.toast.present();
this.toast.onDidDismiss(() => {
//this.closeToast();
console.log('Dismissed toast');
});
}
closeToast() {
if(this.toast) {
console.log("hi,close the toast");
this.toast.dismiss();
}
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Wash
</div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car" style="left:44%;"></div>
</div>
</div>
<div class="fm_body_work_list">
<div class="fm_body_need">
<h5>Select a Service for Fixprice</h5>
</div>
<ul>
<li *ngFor="let subcat of sub_cat" (click)="issue(subcat)" >
<img *ngIf="subcat.image" [src]="subcat.image">
<img *ngIf="!subcat.image" [src]="subcat.image">
<p>{{subcat.service}}</p>
<div class="ques" (click)="tool_tip(subcat.description,$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="fm_body_need">
<h5>Select a Service for Request</h5>
</div>
<ul>
<li (click)="request_protocol('Other Washes')" >
<img src="assets/imgs/car.png">
<p>Other Washes</p>
<div class="ques" (click)="tool_tip('Other Washes',$event)" >
<ion-icon name="ios-help-outline"></ion-icon>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<hr>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CatagoryWash } from './catagory_wash';
@NgModule({
declarations: [
CatagoryWash,
],
imports: [
IonicPageModule.forChild(CatagoryWash),
],
})
export class CatagoryWashModule {}
page-catagory_wash {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:0px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../assets/icon/fm_go1.png");background-repeat:no-repeat !important;position:relative;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#0076ba;text-align:center;font-weight:600;margin: 0px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_noidea{width:100%;padding:15px;}
.fm_oil_type p strong{color:#466683;font-size:18px;padding-left:15px;}
.fm_noidea .fm_oil_type{position:relative;top:5px;}
.fm_range{width:40%;text-align:left;}
.fm_city{width:40%;text-align:right;}
.fm_or{width:20%;text-align:center;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.ques{width:25px;height:25px;background:#c7c7c7;color:#fff;position:absolute;right:0px;padding:1px;text-align:center;font-size: 20px;border-radius:50%;right:50px;top:24px;}
}
.toast-wrapper{
width: 100% !important;
border-radius :10px !important;
.toast-container{
.toast-message{
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-catagory_wash',
templateUrl: 'catagory_wash.html',
})
export class CatagoryWash {
service_id:any;
sub_cat:any;
toast:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private toastCtrl: ToastController,private myservice: Myservice) {
this.service_id = this.navParams.get('service_id');
if(this.service_id)
this.getSubServices();
console.log(this.service_id);
}
ionViewDidLoad() {
console.log('ionViewDidLoad CatagoryWash');
}
back(){
this.navCtrl.pop();
}
// issue(id,service){
// this.navCtrl.push('DamagephotoPage',{'body_parts':service,'service_id':this.service_id});
//}
issue(service){
this.navCtrl.push('FixpricesPage',{'service':service,'service_id':this.service_id});
}
request(service){
this.navCtrl.push('RequestPage',{'service':service});
}
request_brk(service){
this.navCtrl.push('RequestBreak',{'service':service});
}
request_protocol(service){
this.navCtrl.push('RequestProtocol',{'service':service});
}
getSubServices(){
this.myservice.show_loader();
this.myservice.load_get('getSubServices/id/'+this.service_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.sub_cat = data.result
}
});
}
tool_tip(msg,evt){
this.closeToast()
this.presentToast(msg);
evt.stopPropagation();
}
presentToast(msg) {
this.toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom'
});
this.toast.present();
this.toast.onDidDismiss(() => {
//this.closeToast();
console.log('Dismissed toast');
});
}
closeToast() {
if(this.toast) {
console.log("hi,close the toast");
this.toast.dismiss();
}
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title">
</div>
</ion-header>
<ion-content padding class="page_background">
<div class="f_login_wrapper">
<form [formGroup]="changepswform" (ngSubmit)="change_psw()" >
<ion-list>
<h4 class="textCenter" >Enter Actual Password</h4>
<ion-item>
<ion-input type="password" formControlName="old_password" placeholder="Actual Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="changepswform.controls.old_password.hasError('required') && changepswform.controls.old_password.touched">Sorry, Actual password is required!</p>
<p class="valid-p" *ngIf="changepswform.controls.old_password.hasError('minlength') && changepswform.controls.old_password.touched">Sorry, minimum password length is 6!</p>
<p class="valid-p" *ngIf="changepswform.controls.old_password.hasError('maxlength') && changepswform.controls.old_password.touched">Sorry, maximum password length is 25!</p>
</div>
<h4 class="textCenter" >Create a new Password</h4>
<ion-item>
<ion-input type="password" formControlName="password" placeholder="New Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="changepswform.controls.password.hasError('required') && changepswform.controls.password.touched">Sorry, field password is required!</p>
<p class="valid-p" *ngIf="changepswform.controls.password.hasError('minlength') && changepswform.controls.password.touched">Sorry, minimum password length is 6!</p>
<p class="valid-p" *ngIf="changepswform.controls.password.hasError('maxlength') && changepswform.controls.password.touched">Sorry, maximum password length is 25!</p>
</div>
<ion-item>
<ion-input type="password" formControlName="cpassword" placeholder="Confirm Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="changepswform.controls.cpassword.hasError('required') && changepswform.controls.cpassword.touched">Sorry, field Confirm password is required!</p>
<p class="valid-p" *ngIf="changepswform.controls.cpassword.invalid && changepswform.controls.cpassword.touched">Password Mismatch!</p>
<p class="valid-p" *ngIf="changepswform.controls.cpassword.hasError('minlength') && changepswform.controls.cpassword.touched">Sorry, minimum Confirm password length is 6!</p>
<p class="valid-p" *ngIf="changepswform.controls.cpassword.hasError('maxlength') && changepswform.controls.cpassword.touched">Sorry, maximum Confirm password length is 25!</p>
</div>
</ion-list>
<button class="fm_login_btn" ion-button >Save New Password</button>
</form>
<!--- <p>Resend</p>
<button class="fm_signup_btn" ion-button (click)="signup()">Signup here</button> --->
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Changepsw } from './changepsw';
@NgModule({
declarations: [
Changepsw,
],
imports: [
IonicPageModule.forChild(Changepsw),
],
})
export class ChangepswModule {}
page-changepsw {
.page_background{
background:url('../../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
padding-top:20%;
.f_logo_container{
width:100%;
text-align: center;
img{
width:160px;
}
margin-bottom: 30px;
}
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
font-size: 18px;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin:0 auto;
margin-bottom:40px;
}
.item{
padding:0px;
background: transparent;
border:none !important;
height: 40px !important;
margin-bottom:20px;
.item-inner{
border:2px solid #15b3d5 !important;
border-radius:30px;
.input{
.text-input{
text-align: center !important;
color: #989898;
font-size: 18px;
font-weight: 300;
}
}
}
}
.item-input-has-focus{
border:none !important;
}
.input-has-focus{
border:none !important;
}
.fm_login_btn{
width:100%;
color: #fff;
background: #1d527f;
font-weight: 300;
min-height:40px !important;
border-radius: 30px;
font-size:18px;
}
p{
color: #656565;
font-size: 18px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Myservice} from '../../providers/myservice'
import { ValidationService } from '../../providers/validation_service';
import {Validators, FormBuilder, FormGroup, FormControl , AbstractControl} from '@angular/forms';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-changepsw',
templateUrl: 'changepsw.html',
})
export class Changepsw {
private changepswform : FormGroup;
user_data:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private myservice: Myservice, public formBuilder : FormBuilder,public storage:Storage) {
this.changepswform = this.formBuilder.group({
old_password: ['', Validators.compose([Validators.required, Validators.minLength(6),Validators.maxLength(25)])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6),Validators.maxLength(25)]) ],
cpassword: ['', Validators.compose([Validators.required, Validators.minLength(6),Validators.maxLength(25)])],
}, {
validator: this.Match('password', 'cpassword')
});
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data=user_data;
}
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad OtpPage');
}
login(){
this.navCtrl.push('LoginPage');
}
change_psw(){
if(this.changepswform.valid)
{
console.log(this.changepswform.value);
this.myservice.show_loader();
var obj = {'oldpassword': this.changepswform.value.old_password,'cpassword': this.changepswform.value.cpassword,'password': this.changepswform.value.password,'id':this.user_data.id}
this.myservice.load_post(obj,'changepsw').subscribe(data => {
this.myservice.hide_loader();
if(data.status == "success") {
this.myservice.show_alert("Success" , data.message);
this.navCtrl.push('AddcarPage');
}
else {
this.myservice.show_alert("Error" , data.message);
}
})
} else{ // Form is not valid
this.markFormGroupTouched(this.changepswform); // function to mark fields as touched
}
}
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
Match(firstControlName, secondControlName) {
return (AC: AbstractControl) => {
let firstControlValue = AC.get(firstControlName).value; // to get value in input tag
let secondControlValue = AC.get(secondControlName).value; // to get value in input tag
if (firstControlValue != secondControlValue) {
AC.get(secondControlName).setErrors({mismatch: true});
console.log(false);
} else {
console.log(true);
return null
}
};
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9.]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
back()
{
this.navCtrl.pop();
}
}
<!--
Generated template for the ContactPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>contact</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';
@NgModule({
declarations: [
ContactPage,
],
imports: [
IonicPageModule.forChild(ContactPage),
],
})
export class ContactPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the ContactPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-contact',
templateUrl: 'contact.html',
})
export class ContactPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Damage Photos
</div>
</ion-header>
<ion-content padding>
<div class="fm_wrapper">
<h5 *ngIf="service" >Get upto 3 Quotes for {{service}} </h5>
<!-- <div class="fm_status_outter" style="background:#fff !important;">
<div class="fm_status_progress_bar">
<div class="fm_status_car"style="left:90%;"></div>
</div>
</div> -->
<form [formGroup]="body_shop_form" (ngSubmit)="body_shop()">
<div class="fm_body_need" >
<h5 *ngIf="service" >Add Picture of Parts for {{service}}</h5>
<div class="fm_add_picture" >
<li class="fm_add_photo" (click)="uploadPicture('1')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['1']" *ngIf="profile_pic['1']" ></div></li>
<li (click)="uploadPicture('2')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['2']" *ngIf="profile_pic['2']" ></div></li>
<li (click)="uploadPicture('3')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['3']" *ngIf="profile_pic['3']" ></div></li>
</div>
<h5>Tell us what you need to be done</h5>
<textarea formControlName="message" class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<br>
<br>
<div class="">
<button class="login_btn theme_green widthFull" [disabled]="!body_shop_form.valid">Send</button>
</div>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DamagephotoPage } from './damagephoto';
@NgModule({
declarations: [
DamagephotoPage,
],
imports: [
IonicPageModule.forChild(DamagephotoPage),
],
})
export class DamagephotoPageModule {}
page-damagephoto {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:0px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li .inside_image img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;}
.fm_body_need h5{color:#0076ba;font-weight:600;margin: 0px;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{border:1px solid #000;width:100%;margin-top:20px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png"); background-repeat: no-repeat !important;
background-position: center !important; background-size: 30px !important;}
.fm_add_picture li img{width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;}
.fm_add_photo{background:url("../assets/icon/fm_photo.png") !important; background-repeat: no-repeat !important;
background-position: center !important;}
.inside_image{width:100%;
height:100%;}
.inside_image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-damagephoto',
templateUrl: 'damagephoto.html',
})
export class DamagephotoPage {
private body_shop_form : FormGroup;
body_parts:any;
service_id:any;
service:any;
user_data:any;
successs:any;
lat_lng:any;
base64Image= [];
profile_pic= [];
constructor(public navCtrl: NavController, public navParams: NavParams,private transfer: FileTransfer, private file: File, private formBuilder: FormBuilder,private imagePicker: ImagePicker,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController) {
this.storage.get('lat_lng').then((lat_lng) => {
console.log("instorage", lat_lng);
if(lat_lng){
this.lat_lng=lat_lng;
}
})
this.successs=false;
//this.lat_lng ={'lat':'9.9312328','lon':'76.2673041'}
this.body_parts = this.navParams.get('body_parts');
this.service = this.navParams.get('service');
this.body_parts = this.body_parts.toString();;
console.log(this.body_parts)
this.service_id = this.navParams.get('service_id');
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
}
})
this.body_shop_form = this.formBuilder.group({
message: ['', Validators.required],
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad DamagephotoPage');
}
back(){
this.navCtrl.pop();
}
success(){
this.navCtrl.push('SuccessPage');
}
body_shop(){
if(this.user_data){
console.log(this.base64Image);
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':this.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data.user_data.id) {
this.user_data = data.user_data;
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':data.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
});
modal.present();
}
}
save_body_shop(vals){
console.log(this.base64Image.length);
if(this.base64Image.length > 0){
this.myservice.show_loader();
this.myservice.load_post(vals,'save_body_shop').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.load_post_multifile(this.base64Image, {'value' :data.data }, "save_pool_img");
}else{
this.myservice.show_alert("Error",data.message);
}
});
}else
this.myservice.show_alert("Warning","Please upload atleast one image");
}
uploadPicture(pic){
console.log(pic);
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
console.log(results.length);
console.log(results[0]);
if(results){
this.base64Image[pic]= results[0];
this.profile_pic[pic] = results[0];
}
}, (err) => { });
console.log(this.base64Image);
}
load_post_multifile(imageURI, post_data, fn_name) {
this.myservice.show_loader();
var i;
for (i = 1; i < imageURI.length; i++) {
if(imageURI[i]!=undefined){
console.log("imageURI" ,imageURI[i]);
let ft = this.transfer.create();
let filename = imageURI[i].substr(imageURI[i].lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
ft.upload(imageURI[i], this.myservice.webservice_url+fn_name, options, false)
.then((result: any) => {
this.myservice.hide_loader();
console.log('result ' + i, result);
this.successs=true;
console.log('imageURIlength ',imageURI.length);
console.log('i ',i);
}).catch((error: any) => {
this.myservice.hide_loader();
this.successs=false;
this.myservice.show_alert("Error!", 'No garages found');
});
}
}
console.log(this.successs);
if(i == imageURI.length)
this.navCtrl.push('SuccessPage',{'page':'car_details'});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
FixPrices
</div>
</ion-header>
<ion-content padding>
<div class="fix_price_wrapper">
<h5>You are looking for <strong>{{services.service}}</strong></h5>
<p>Service details</p>
<p><b>{{services.service}} : </b><span *ngIf="services.description!=''"> {{services.description}}</span><span *ngIf="services.description==''"> No Description Available</span></p>
<div class="fm_wrapper fm_margin_top0">
<div class="fm_listing">
<ul *ngIf="garage_list" >
<li *ngFor="let garages of garage_list" (click)="shopdetail(garages.id)">
<div class="fm_listing_top">
<div class="fm_list_pic"> <img [src]="garages.profile_pic"> </div>
<div class="fm_list_detail">
<h6>{{garages.name}}</h6>
<p>{{garages.address}}</p>
<rating [(ngModel)]="garages.rate"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)"></rating>
</div>
<div class="fm_list_price">
<span>€{{garages.price}}</span>
</div>
<div class="clear"></div>
</div>
<div class="fm_listing_bottom">
<div class="fm_line" >
<div class="child1"><strong>Open From</strong></div>
<div class="child2" ><p *ngIf="garages.open_time" >: &nbsp;{{garages.open_time.start}} to {{garages.open_time.end}} </p> <p *ngIf="!garages.open_time" >Closed Today</p></div>
<div class="clear"></div>
</div>
<div class="fm_line">
<div class="child1"><strong>Days Open</strong></div>
<div class="child2"><p>:&nbsp;<span *ngFor="let days of garages.available_days" >{{days}}</span></p></div>
<div class="clear"></div>
</div>
<div class="fm_line">
<div class="child1"><strong>Services</strong></div>
<div class="child2"><p>:&nbsp;<span class="service">{{garages.services}}</span> </p></div>
<div class="clear"></div>
</div>
</div>
</li>
</ul>
<div class="no_resultfound" *ngIf="!garage_list" >
<img src="assets/imgs/noresult.png">
<p>No Result Found </p>
</div>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FixpricesPage } from './fixprices';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
FixpricesPage,
],
imports: [
IonicPageModule.forChild(FixpricesPage),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class FixpricesPageModule {}
page-fixprices {
.fix_price_wrapper{
h5{
color:#929292;
font-weight:600;
margin: 0px;
strong{
color: #1DB100;
}
}
p{
color: #0076ba;
padding-bottom: 5px;
}
}
.fm_oil_top_div{width:100%;padding-left: 15px;padding-right:15px;padding-top: 30px;}
.fm_oil_top_inner_div{width:100%;background: #fff;box-shadow: 0px 10px 30px 0px #888888;padding: 15px;}
.fm_oil_top_head{border-bottom: 1px solid #cacaca;padding-bottom: 15px;padding-top: 15px;}
.fm_oil_bottom_head{padding-top: 15px;padding-bottom: 15px;}
.fm_oil_head1{float: left;width:15%;text-align: left;margin-right: 10px;}
.fm_oil_head1 img{position: relative;width: 40px;}
.fm_oil_head2{float: left;border-left:1px solid #cacaca;padding-left: 10px;width:40%;}
.fm_oil_head2 h5{color:#0076ba;font-weight:600;margin: 0px;}
.fm_oil_head2 h6{margin:0px;padding:0px;color: #5e5f5f;font-size: 14px;text-align: left;}
.fm_oil_head4{float: right;}
.fm_new_car_select{height:30px;padding-left: 15px;padding-right:15px;border-radius:20px;background: #050505;color: #fff;font-size:12px;}
.fm_oil_type{float: left;width:50%;}
.fm_oil_type span{float: left;padding-left: 15px;padding-right:5px;}
.fm_oil_type p{float: left;margin:0px;color: #767676; font-size: 16px;position: relative;top: 5px;}
.fm_oil_type span img{position: relative !important;width:auto;height:25px;}
.fm_map_div{width:100%;height:400px;background:url("../assets/img/fm_map.png") !important;background-size: cover !important;}
.fm_listing{width:100%;position: relative;}
.fm_listing ul{width:100%;background: #fff;padding: 0px;margin:0px;}
.fm_listing ul li{list-style: none;padding: 0px;}
.fm_listing_top{width:100%;border-bottom:1px solid #cacaca;padding-bottom: 15px;}
.fm_listing_bottom{width:100%;padding-top: 10px;}
.fm_list_pic{float: left;width:60px;height:60px;border-radius:50%;background:#07426a;}
.fm_list_pic img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.fm_list_detail{float: left;padding-left: 10px;padding-top: 10px;border-right:1px solid #cacaca;height:75px;padding-right:10px;width:55%;}
.fm_list_detail h6{margin:0px;color: #5e5e5e;padding-bottom: 5px;}
.fm_list_detail p{margin:0px;color: #9d9d9d;font-size: 11px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:100%;}
.fm_list_price{float: right;color: #434343;font-size: 18px;text-align: right;padding-top: 20px;font-weight: 600;}
.fm_line{width:100%;padding-bottom: 10px;}
.fm_line .child1{width:25%;float: left;color: #07426a;}
.fm_line .child2{width:75%;float: left;}
.fm_line .child2 p{color: #bababa;margin:0px;}
.fm_line .child2 p span{color: #434343;font-weight: 600;margin-right:10px;}
.fm_line .child2 p .service{border-radius:20px;background: #f3f3f3;color: #878787;padding: 2px;padding-left: 9px;padding-right:9px;font-weight: 400;}
.fm_line .c1 img{width: 50px;}
.fm_listing_sort{width:100%;background:#fff;position:fixed;top:0px;z-index: 99;text-align:center;padding:20px;padding-bottom:30px;}
.fm_sort_select{width:150px;border:1px solid #bbbbbb;height:35px;border-radius:20px;color:#bbbbbb;padding-left:15px; font-size: 18px;}
.fm_down_top{width:100%;text-align:center;padding-bottom:30px;}
.fm_down_top img{height:20px;}
.rating{
margin:0px !important;
padding: 0px;
padding-top: 10px;
li{
padding:2px !important;
font-size: 15px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the FixpricesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-fixprices',
templateUrl: 'fixprices.html',
})
export class FixpricesPage {
services:any;
garage_list:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private myservice: Myservice,public storage:Storage) {
this.services = this.navParams.get('service')
this.find_garage();
console.log(this.services)
}
ionViewDidLoad() {
console.log('ionViewDidLoad FixpricesPage');
}
find_garage(){
this.myservice.show_loader();
this.myservice.load_get('find_garage/id/'+this.services.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.garage_list = data.data;
console.log(this.garage_list);
}
});
}
shopdetail(id){
this.navCtrl.push('ShopdetailPage',{'garage_id' : id,'page' : 'fixprice','services' :this.services});
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_menu" ion-button menuToggle>
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content padding>
<div class="fm_garage_wrapper">
<h4>My Garage</h4>
<hr>
<ul>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
<li (click)="garagedetail()">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
<p>2017</p>
<button ion-button>Set as Default</button>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
<ion-footer class="textCenter fm_footer">
<button class="fm_circle" (click)="addcar()">+</button>
<p>Add Vehicles</p>
<button class="recall_history" ion-button (click)="servicehistory()">Service History & Recall</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { GaragePage } from './garage';
@NgModule({
declarations: [
GaragePage,
],
imports: [
IonicPageModule.forChild(GaragePage),
],
})
export class GaragePageModule {}
page-garage {
.fm_garage_wrapper{
padding-top:10px;
height: 100%;
h4{
color: #07426a;
text-align: center;
font-weight:400;
}
hr{
border:2px solid #449db2;
width:50px;
border-radius: 10px;
margin:0 auto;
height:0px;
margin-bottom: 15px;
}
ul{
padding: 0px;
margin:0px;
width: 100%;
height: calc(100% - 65px);
overflow: scroll;
li{
list-style: none;
background-color: #f1f1f1 !important;
margin-bottom: 10px;
padding: 15px;
background-image:url('../../assets/imgs/fm_arrow.png') !important;
background-position: right 10px top 40px;
background-repeat: no-repeat;
background-size: 35px;
.fm_garage_pic{
width:90px;
height:90px;
border-radius: 50%;
float: left;
background: #449db2;
position: relative;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit:cover;
object-position: center;
}
.ex{
width:30px;
height:30px;
border-radius: 50%;
background-color: #f43400;
color: #fff;
position: absolute;
top:0px;
left:0px;
text-align: center;
font-size: 18px;
padding: 4px;
}
}
.fm_garage_detail{
width:calc(100% - 90px);
float: left;
padding-left: 15px;
h4{
margin:0px;
padding: 0px;
color: #07426a;
text-align: left;
font-size: 14px;
}
p{
margin:0px;
padding:0px;
color: #828282;
padding-top: 4px;
padding-bottom: 4px;
}
button{
border:1px solid #07426a;
color: #07426a;
background: transparent;
border-radius: 20px;
text-transform: capitalize;
height: 25px;
font-size: 13px;
}
}
}
}
}
}
.fm_footer{
padding: 30px;
p{
margin:0px;
padding:0px;
color: #15b3d5;
text-align: center;
padding-top: 15px;
font-size: 16px;
padding-bottom: 15px;
}
}
.fm_circle{
width: 50px;
height:50px;
border-radius: 50%;
border:2px solid #15b3d5;
color: #15b3d5;
text-align:center;
background: transparent;
font-weight: 500;
font-size: 26px;
}
.recall_history{
background: #449db2;
color: #fff;
height:30px;
border-radius: 20px;
text-transform: capitalize;
font-weight: 300;
padding-left: 30px;
padding-right: 30px;
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-garage',
templateUrl: 'garage.html',
})
export class GaragePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad GaragePage');
}
garagedetail()
{
this.navCtrl.push('GaragedetailPage');
}
addcar()
{
this.navCtrl.push('AddcarPage');
}
servicehistory()
{
this.navCtrl.push('ServicehistoryPage');
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_garage_detail_wrapper">
<div class="fm_garage_banner">
<div class="fm_garage_pic">
<div class="ex">!</div>
</div>
<div class="fm_garage_detail">
<h4>
<strong>Ford</strong><br>
Mustang
</h4>
</div>
<div class="clear"></div>
</div>
<div class="fm_garage_detail">
<ul>
<li>
<ion-row>
<ion-col col-6><p>Open Recall</p></ion-col>
<ion-col col-1>:</ion-col>
<ion-col col-5><strong>Recall Active</strong></ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Oil Change</p></ion-col>
<ion-col col-1>:</ion-col>
<ion-col col-5>In <strong>2000</strong>kms</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Tire Rotation</p></ion-col>
<ion-col col-1>:</ion-col>
<ion-col col-5>In <strong>6000</strong>kms</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Registration</p></ion-col>
<ion-col col-1>:</ion-col>
<ion-col col-5>In <strong>4 </strong>Months</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Schedulled Service</p></ion-col>
<ion-col col-1>:</ion-col>
<ion-col col-5>In <strong>3500 </strong>Kms</ion-col>
</ion-row>
</li>
</ul>
</div>
</div>
</ion-content>
<ion-footer class="textCenter fm_footer">
<button class="recall_history">Service History</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { GaragedetailPage } from './garagedetail';
@NgModule({
declarations: [
GaragedetailPage,
],
imports: [
IonicPageModule.forChild(GaragedetailPage),
],
})
export class GaragedetailPageModule {}
page-garagedetail {
.fm_garage_detail_wrapper{
width: 100%;
height:100%;
.fm_garage_banner{
width: 100%;
padding: 20px;
background: #f4f3ee;
.fm_garage_pic{
width:60px;
height:60px;
border-radius: 50%;
float: left;
background: #449db2;
position: relative;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit:cover;
object-position: center;
}
.ex{
width:30px;
height:30px;
border-radius: 50%;
background-color: #f43400;
color: #fff;
position: absolute;
top:0px;
left:0px;
text-align: center;
font-size: 18px;
padding: 4px;
}
}
.fm_garage_detail{
width:calc(100% - 60px);
float: left;
padding: 10px;
padding-left: 15px;
h4{
margin:0px;
padding: 0px;
color: #07426a;
text-align: left;
font-size: 15px;
}
p{
margin:0px;
padding:0px;
color: #828282;
padding-top: 4px;
padding-bottom: 4px;
}
button{
border:1px solid #07426a;
color: #07426a;
background: transparent;
border-radius: 20px;
text-transform: capitalize;
height: 25px;
font-size: 13px;
}
}
}
.fm_garage_detail{
width:100%;
height:calc(100% - 100px);
overflow: scroll;
ul{
padding:0px;
margin:0px;
li{
padding:0px;
list-style: none;
width:100%;
color: #7d7d7d;
font-size: 16px;
padding: 10px;
p{
margin:0px;
padding:0px;
color: #07426a;
}
.recall{
background: #e3e3e3;
border:1px solid #7fd5e8;
border-radius: 20px;
padding: 2px;
text-align: center;
}
}
}
}
}
}
.fm_footer{
padding: 30px;
.recall_history{
background: #449db2;
color: #fff;
height:30px;
border-radius: 20px;
text-transform: capitalize;
font-weight: 300;
padding-left: 30px;
padding-right: 30px;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-garagedetail',
templateUrl: 'garagedetail.html',
})
export class GaragedetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad GaragedetailPage');
}
back()
{
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
</div>
</ion-header>
<ion-content>
<div class="fm_home_wrapper">
<div class="fm_home_banner">
<div class="fm_home_photo">
<span *ngIf="user_data" >
<img *ngIf="user_data.profile_pic!=''" [src]="user_data.profile_pic" >
</span></div>
<div class="fm_home_banner_detail">
<div class="fm_home_detail_inner">
<p *ngIf="user_data" >Welcome back</p>
<p *ngIf="!user_data" > Hi</p>
<h4 *ngIf="user_data" >{{user_data.first_name}} {{user_data.last_name}} </h4>
<h4 *ngIf="!user_data" >Guest User</h4>
</div>
<div class="edit" *ngIf="user_data" (click)="edit_profile()" ></div>
</div>
<div class="clear"></div>
<hr>
<h4>Find the offers next door</h4>
</div>
<div class="fm_home_section">
<span *ngIf="offers" >
<div *ngFor="let offer_list of offers" class="fm_home_poster" (click)="get_profile(offer_list.garage_id,offer_list,offer_list.garage_service_id)" >
<!-- <img *ngIf="offer_list.img" [src]="offer_list.img">
-->
<div class="fm_poster_inner">
<ion-row>
<ion-col col-12 class="textRight">
<h5>{{offer_list.description}}</h5>
<h6>-{{offer_list.discount}}%</h6>
<!--<button class="poster_btn">Book Now</button>
<p>Conditions apply !</p> -->
</ion-col>
</ion-row>
</div>
</div>
</span>
<div class="no_resultfound" *ngIf="!offers">
<img src="assets/imgs/noresult.png">
<p>No offers Found</p>
</div>
<br>
<!--- <div class="fm_home_tip">
<button ion-button (click)="view_more()">
View More Offers
</button>
</div> -->
<div class="clear"></div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
declarations: [
HomePage,
],
imports: [
IonicPageModule.forChild(HomePage),
],
})
export class HomePageModule {}
page-home {
.fm_home_wrapper{
width: 100%;
height:100%;
.fm_home_banner{
width: 100%;
padding: 15px;
h4{
color: #0076ba;
text-align: center;
padding-top: 8px;
margin:0px;
}
.fm_home_photo{
width:70px;
height:70px;
border-radius: 50%;
background: #07426a;
float: left;
background-image: url(../../assets/imgs/fm_user_avatar.png);
background-repeat:no-repeat;
background-position:center;
background-size:20px;
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
border-radius:50%;
}
}
.fm_home_banner_detail{
width:calc(100% - 70px);
float: left;
padding:15px;
position: relative;
.fm_home_detail_inner{
border-left:1px solid #bababa;
padding-left:15px;
p{
padding: 0px;
margin:0px;
font-size: 15px;
color: #70706f;
font-weight: 300;
}
h4{
padding: 0px;
margin:0px;
font-size: 17px;
color: #07426a;
font-weight: 600;
text-transform: uppercase;
text-align: left;
}
}
.edit{
position:absolute;
top:15px;
right:0px;
width:35px;
height: 35px;
background:url('../assets/imgs/fm_edit.png');
background-repeat: no-repeat;
background-size:40px;
}
}
}
.fm_home_section{
width: 100%;
height:calc(100% - 150px);
overflow: scroll;
.fm_home_poster{
width:50%;
height:50%;
position:relative;
background:url('../assets/imgs/no_offer.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 140px;
float: left;
box-shadow: 0px 2px 70px -24px;
img{
width:100%;
height:100%;
object-fit:cover;
object-position: center;
}
.fm_poster_inner{
position: absolute;
top:0px;
right:0px;
left:0px;
bottom:0px;
padding:20px;
background: rgba(0,0,0,0.6);
h5{
color: #fff;
margin:0px;
padding: 0px;
font-style: italic;
font-weight: 600;
font-size: 25px;
}
h6{
color: #fff;
margin:0px;
padding: 0px;
padding-top: 5px;
padding-bottom:15px;
font-weight: 300;
}
.poster_btn{
background: #07426a;
color: #fff;
padding:5px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
font-size: 16px;
}
p{
color: #a8a6a3;
margin:0px;
padding:0px;
font-size: 12px;
padding-top: 15px;
}
}
}
.fm_home_tip{
width: 100%;
padding: 30px;
text-align: center;
button{
font-weight: 300;
color: #3a3a3a;
padding: 5px;
margin:0px;
color:#fff;
background: #07426a;
border-radius: 20px;
text-align: center;
text-transform: capitalize;
padding-left: 30px;
padding-right: 30px;
span{
img{
width:45px;
position: relative;
top: 13px;
}
}
}
p{
color: #7a7a7a;
font-weight: 300;
padding:0px;
margin:0px;
padding-top: 10px;
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the HomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
user_data:any;
offers:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice) {
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data!=null){
this.user_data= user_data;
console.log(user_data.id)
this.get_offers(user_data.id);
}
else{
this.get_offers(null);
}
})
this.get_stars();
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
get_offers(id){
this.myservice.show_loader();
this.myservice.load_get('getOffers/limit/4/id/'+id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.offers = data.result;
console.log(this.offers);
}
});
}
/* get_profile(id,offer_id,service_id){
var obj = {'offers' : offer_id,'service_id' : service_id}
this.navCtrl.push('ShopdetailPage',{'garage_id' : id,'page' :'offers' , 'offers':obj});
} */
get_profile(id,offer_id,service_id){
this.navCtrl.push('Moreoffers');
}
view_more(){
this.navCtrl.push('Moreoffers');
}
edit_profile(){
this.navCtrl.push('AddcarPage');
}
get_stars(){
var i;
var k;
for(i=1;i<=5;i++){
console.log('*');
for(k=1;k<=i;k++){
console.log('*');
}
}
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
<div class="clear"></div>
</ion-header>
<ion-content padding>
<div class="fm_wrapper">
<div class="fm_status_outter" style="background:#fff !important;">
<div class="fm_status_progress_bar">
<div class="fm_status_car"style="left:90%;"></div>
</div>
</div>
<div class="fm_body_need" style="padding-top:55px;">
<h5>Take a picture of the issue</h5>
<hr>
<div class="fm_add_picture">
<li class="fm_sidemenu_bg"><span><img src="assets/icon/fm_photo.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
</div>
<h5>Breifly describe your issue</h5>
<hr>
<textarea class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div>
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" (click)="success()">Send<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { IssuePage } from './issue';
@NgModule({
declarations: [
IssuePage,
],
imports: [
IonicPageModule.forChild(IssuePage),
],
})
export class IssuePageModule {}
page-issue {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../../assets/img/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../../assets/img/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:50px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.fm_body_next span img{width:10px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;}
.fm_add_picture li span{color:#1c8aa4;}
.fm_add_picture li span img{width:auto;height:40px;position: relative;top: 14px;}
.fm_sidemenu_bg{background:#07426a !important;border:none !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-issue',
templateUrl: 'issue.html',
})
export class IssuePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad IssuePage');
}
back()
{
this.navCtrl.pop();
}
success()
{
this.navCtrl.push('SuccessPage');
}
}
<ion-content>
<div class="landing_wizard">
<div class="logo">
<img src="assets/imgs/logo1.png">
</div>
<ion-slides (ionSlideDidChange)="slideChanged()" pager="true" padding>
<ion-slide>
<img src="assets/imgs/icon5.png">
<h3>What is Lorem Ipsum?</h3>
<p>ndustry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled</p>
</ion-slide>
<ion-slide>
<img src="assets/imgs/icon1.png">
<h3>Why do we use it?</h3>
<p>ndustry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled</p>
</ion-slide>
<ion-slide>
<img src="assets/imgs/icon2.png">
<h3>Where does it come from?</h3>
<p>ndustry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled</p>
</ion-slide>
</ion-slides>
<div class="bottom_btn_bay">
<button ion-button class="next_btn" [hidden]="currentIndex == 2" (click)="goToNextSlide()" >
<ion-icon name="ios-arrow-dropright-circle-outline"></ion-icon>
</button>
<button ion-button class="next_btn" [hidden]="currentIndex != 2" (click)="login()">
<ion-icon name="ios-arrow-dropright-circle-outline"></ion-icon>
</button>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LandingPage } from './landing';
@NgModule({
declarations: [
LandingPage,
],
imports: [
IonicPageModule.forChild(LandingPage),
],
})
export class LandingPageModule {}
page-landing {
.slide-zoom{
height: auto !important;
}
.slides{
padding: 20px;
height:auto !important;
img{
width: 150px;
margin-bottom: 10px;
margin-top: 10px;
}
}
.swiper-pagination{
bottom:0px !important;
.swiper-pagination-bullet{
border:1px solid #0076ba;
width:10px;
height:10px;
opacity:1;
background: transparent;
}
.swiper-pagination-bullet-active{
background: #0076ba;
}
}
.landing_wizard{
.logo{
width: 100%;
padding-top: 60px;
padding-bottom: 20px;
text-align: center;
img{
width:130px;
}
}
width:100%;
height: 80vh;
position: relative;
h3{
color: #0076ba;
text-align:left;
font-weight: 600;
font-size: 25px;
text-align: center;
}
p{
color: #000;
text-align:left;
padding-bottom: 45px;
text-align: center;
}
.bottom_btn_bay{
position: fixed;
bottom:0px;
padding: 10px;
text-align: center;
z-index: 999;
width:100%;
left:0px;
right:0px;
.next_btn{
width:50px;
height:50px;
margin:0 auto;
color:#000;
font-size: 40px;
}
}
}
}
\ No newline at end of file
import { Component,ViewChild } from '@angular/core';
import { IonicPage,NavController,Slides,NavParams} from 'ionic-angular';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
@ViewChild(Slides) slides: Slides;
currentIndex:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
this.currentIndex=0;
this.storage.get('landing_pg').then((landing_pg) => {
if(landing_pg){
this.navCtrl.push('LoginPage');
}
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad LandingPage');
}
goToNextSlide() {
this.slides.slideNext();
this.slides.getActiveIndex();
console.log("fsfsf");
}
goToPrevSlide() {
this.slides.slidePrev();
this.slides.getActiveIndex();
}
slideChanged() {
this.currentIndex = this.slides.getActiveIndex();
console.log(this.currentIndex);
}
login(){
this.storage.set('landing_pg',1).then(()=>{
})
this.navCtrl.push("LocationsPage");
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button>
<ion-icon name="ios-menu" menuToggle></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Legal Notice
</div>
</ion-header>
<ion-content padding class="page_background">
<ion-grid>
<ion-row (click)="agree_terms('terms')" >
<ion-col col-10>
T & C
</ion-col>
<ion-col col-2>
<ion-icon name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<ion-row (click)="agree_terms('privacy')" >
<ion-col col-10>
Privacy Policy
</ion-col>
<ion-col col-2>
<ion-icon name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<ion-row (click)="agree_terms('impressum')" >
<ion-col col-10>
Impressum
</ion-col>
<ion-col col-2>
<ion-icon name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LegalnoticePage } from './legalnotice';
@NgModule({
declarations: [
LegalnoticePage,
],
imports: [
IonicPageModule.forChild(LegalnoticePage),
],
})
export class LegalnoticePageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the LegalnoticePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-legalnotice',
templateUrl: 'legalnotice.html',
})
export class LegalnoticePage {
terms_service:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController, public storage: Storage, private myservice: Myservice) {
this.get_terms()
}
ionViewDidLoad() {
console.log('ionViewDidLoad LegalnoticePage');
}
agree_terms(pg){
console.log(pg)
let termsModal = this.modalCtrl.create('TermsPage',{'data' :this.terms_service,'page' : pg} );
termsModal.present();
}
get_terms(){
//this.myservice.show_loader();
this.myservice.load_get('get_terms').subscribe(data => {
//this.myservice.hide_loader();
if(data.status == 'success'){
console.log(data.result);
this.terms_service = data.result
}
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Garage Next Door
</div>
</ion-header>
<ion-content padding>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<div class="fm_wrapper fm_margin_top0">
<!-- <div class="fm_editprofile_banner" style="height:100px;">
<div class="fm_oil_top_div">
<div class="fm_oil_top_inner_div">
<div class="fm_oil_top_head fm_bordernone">
<div class="fm_oil_head1">
<img src="assets/icon/fm_emi_icon.png">
</div>
<div class="fm_oil_head2">
<h5>EMISSION TEST</h5>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div> -->
<!-- <div class="fm_map_div">
</div> -->
<div class="fm_listing">
<ul *ngIf="garages" >
<li *ngFor="let garage_list of garages" (click)="shopdetail(garage_list.id)">
<div class="fm_listing_top">
<div class="fm_list_pic"> <img [src]="garage_list.profile_pic"> </div>
<div class="fm_list_detail">
<h6>{{garage_list.name}}</h6>
<p>{{garage_list.address}}</p>
<!-- <fieldset class="rating">
<input type="radio" id="star5" name="rating" [(ngModel)]="garage_list.rate" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" [(ngModel)]="garage_list.rate" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" [(ngModel)]="garage_list.rate" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" [(ngModel)]="garage_list.rate" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" [(ngModel)]="garage_list.rate" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" [(ngModel)]="garage_list.rate" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" [(ngModel)]="garage_list.rate" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" [(ngModel)]="garage_list.rate" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" [(ngModel)]="garage_list.rate" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" [(ngModel)]="garage_list.rate" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset> --->
<rating [(ngModel)]="garage_list.rate"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)"></rating>
</div>
<div class="fm_list_price">
<span>{{garage_list.distance}}km</span>
</div>
<div class="clear"></div>
</div>
<div class="fm_listing_bottom">
<!-- <div class="fm_line" >
<div class="child1"><strong>Open From</strong></div>
<div class="child2" ><p *ngIf="garage_list.open_time" >: &nbsp;{{garage_list.open_time.start}} to {{garage_list.open_time.end}} </p> <p *ngIf="!garage_list.open_time" >Closed Today</p></div>
<div class="clear"></div>
</div>
<div class="fm_line">
<div class="child1"><strong>Days Open</strong></div>
<div class="child2"><p>:&nbsp;<span *ngFor="let days of garage_list.available_days" >{{days}}</span></p></div>
<div class="clear"></div>
</div>-->
<div class="fm_line">
<div class="child1"><strong>Services</strong></div>
<div class="child2"><p>:&nbsp;<span class="service">{{garage_list.services}}</span> </p></div>
<div class="clear"></div>
</div>
</div>
</li>
</ul>
<div class="no_resultfound" *ngIf="!garages" >
<img src="assets/imgs/noresult.png">
<p>No Result Found </p>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LocationPage } from './location';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
LocationPage,
],
imports: [
IonicPageModule.forChild(LocationPage),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class LocationPageModule {}
page-location {
.fm_oil_top_div{width:100%;padding-left: 15px;padding-right:15px;padding-top: 30px;}
.fm_oil_top_inner_div{width:100%;background: #fff;box-shadow: 0px 10px 30px 0px #888888;padding: 15px;}
.fm_oil_top_head{border-bottom: 1px solid #cacaca;padding-bottom: 15px;padding-top: 15px;}
.fm_oil_bottom_head{padding-top: 15px;padding-bottom: 15px;}
.fm_oil_head1{float: left;width:15%;text-align: left;margin-right: 10px;}
.fm_oil_head1 img{position: relative;width: 40px;}
.fm_oil_head2{float: left;border-left:1px solid #cacaca;padding-left: 10px;width:40%;}
.fm_oil_head2 h5{margin:0px;padding:0px;color:#07426a;font-size:16px;text-align: left;}
.fm_oil_head2 h6{margin:0px;padding:0px;color: #5e5f5f;font-size: 14px;text-align: left;}
.fm_oil_head4{float: right;}
.fm_new_car_select{height:30px;padding-left: 15px;padding-right:15px;border-radius:20px;background: #050505;color: #fff;font-size:12px;}
.fm_oil_type{float: left;width:50%;}
.fm_oil_type span{float: left;padding-left: 15px;padding-right:5px;}
.fm_oil_type p{float: left;margin:0px;color: #767676; font-size: 16px;position: relative;top: 5px;}
.fm_oil_type span img{position: relative !important;width:auto;height:25px;}
.fm_map_div{width:100%;height:400px;background:url("../assets/img/fm_map.png") !important;background-size: cover !important;}
.fm_listing{width:100%;position: relative;}
.fm_listing ul{width:100%;background: #fff;padding: 0px;margin:0px;}
.fm_listing ul li{list-style: none;padding: 10px;}
.fm_listing_top{width:100%;border-bottom:1px solid #cacaca;padding-bottom: 15px;}
.fm_listing_bottom{width:100%;padding-top: 10px;}
.fm_list_pic{float: left;width:60px;height:60px;border-radius:50%;background:#07426a;}
.fm_list_pic img{width:100%;height:100%;border-radius:50%;object-fit: cover;object-position: center;}
.fm_list_detail{float: left;padding-left: 10px;padding-top: 10px;border-right:1px solid #cacaca;height:75px;padding-right:10px;width:55%;}
.fm_list_detail h6{margin:0px;color: #5e5e5e;padding-bottom: 5px;}
.fm_list_detail p{margin:0px;color: #9d9d9d;font-size: 11px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:100%;}
.fm_list_price{float: right;color: #434343;font-size: 18px;text-align: right;padding-top: 20px;font-weight: 600;}
.fm_line{width:100%;padding-bottom: 10px;}
.fm_line .child1{width:25%;float: left;color: #07426a;}
.fm_line .child2{width:75%;float: left;}
.fm_line .child2 p{color: #bababa;margin:0px;}
.fm_line .child2 p span{color: #434343;font-weight: 600;margin-right:10px;}
.fm_line .child2 p .service{border-radius:20px;background: #f3f3f3;color: #878787;padding: 2px;padding-left: 9px;padding-right:9px;font-weight: 400;}
.fm_line .c1 img{width: 50px;}
.fm_listing_sort{width:100%;background:#fff;position:fixed;top:0px;z-index: 99;text-align:center;padding:20px;padding-bottom:30px;}
.fm_sort_select{width:150px;border:1px solid #bbbbbb;height:35px;border-radius:20px;color:#bbbbbb;padding-left:15px; font-size: 18px;}
.fm_down_top{width:100%;text-align:center;padding-bottom:30px;}
.fm_down_top img{height:20px;}
.rating{
margin:0px !important;
padding: 0px;
padding-top: 10px;
li{
padding:2px !important;
font-size: 15px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-location',
templateUrl: 'location.html',
})
export class LocationPage {
lat_lng:any;
garages:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice) {
console.log("Fgfg");
this.storage.get('lat_lng').then((lat_lng) => {
console.log("instorage"+lat_lng);
if(lat_lng){
this.lat_lng=lat_lng;
this.get_garages();
}
})
//this.lat_lng ={'lat':'9.9312328','lon':'76.2673041'}
}
ionViewDidLoad() {
console.log('ionViewDidLoad LocationPage');
}
shopdetail(id)
{
this.navCtrl.push('ShopdetailPage',{'garage_id' : id,'page' : 'location'});
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
this.get_garages();
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
get_garages(){
//this.myservice.show_loader();
this.myservice.load_post(this.lat_lng,'get_nearest_garages').subscribe(data => {
//this.myservice.hide_loader();
if(data.status == 'success'){
this.garages = data.data;
}
});
}
}
<ion-content padding>
<div class="landing_wizard">
<div class="logo">
<img src="assets/imgs/logo1.png">
</div>
<div class="section">
<img src="assets/imgs/icon3.png">
<h3>What is Lorem Ipsum?</h3>
<p>ndustry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled</p>
</div>
</div>
</ion-content>
<ion-footer padding>
<button class="login_btn widthFull theme_green" ion-button full (click)="login()">Activate GPS</button>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LocationsPage } from './locations';
@NgModule({
declarations: [
LocationsPage,
],
imports: [
IonicPageModule.forChild(LocationsPage),
],
})
export class LocationsPageModule {}
page-locations {
.landing_wizard{
.logo{
width: 100%;
padding-top: 60px;
padding-bottom: 20px;
text-align: center;
img{
width:130px;
}
}
.section{
text-align: center;
img{
width: 130px;
margin-bottom: 10px;
margin-top: 10px;
}
}
width:100%;
height: 80vh;
position: relative;
h3{
color: #0076ba;
text-align:left;
font-weight: 600;
font-size: 25px;
text-align: center;
}
p{
color: #000;
text-align:left;
padding-bottom: 45px;
text-align: center;
}
.bottom_btn_bay{
position: fixed;
bottom:0px;
padding: 10px;
text-align: center;
z-index: 999;
width:100%;
left:0px;
right:0px;
.next_btn{
width:50px;
height:50px;
margin:0 auto;
color:#000;
font-size: 40px;
}
}
}
}
.login_btn{
text-transform: capitalize !important;
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-locations',
templateUrl: 'locations.html',
})
export class LocationsPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LocationsPage');
}
login(){
this.navCtrl.push("LoginPage");
}
}
<ion-content padding class="page_background">
<div class="f_login_wrapper">
<div class="f_logo_container">
<img src="assets/imgs/logo1.png">
</div>
<h4>LOGIN</h4>
<form [formGroup]="LoginForm" (ngSubmit)="OnLogin()">
<ion-list>
<ion-item>
<ion-input formControlName="email" type="text" placeholder="Email" #emailVal (keyup)="trim_white(emailVal.value)" autocomplete="off" ></ion-input>
</ion-item>
<ion-item>
<ion-input formControlName="password" type="password" placeholder="Password" autocomplete="off" ></ion-input>
</ion-item>
</ion-list>
<button class="login_btn theme_lblue" ion-button [disabled]="!LoginForm.valid" >LOGIN</button>
</form>
<p (click)="forgot_psw()" >Forgot Password?</p>
<hr>
<br>
<button class="signup_btn theme_green" ion-button (click)="signup()">Sign up here</button>
<p>or</p>
<button class="login_btn_clear" ion-button (click)="skip()">Skip</button>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
})
export class LoginPageModule {}
page-login {
.page_background{
background:url('../../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
text-align: center;
padding-top: 15%;
.f_logo_container{
width:100%;
text-align: center;
img{
width:160px;
}
margin-bottom: 30px;
}
h4{
color: #0076ba;
font-weight: 600;
letter-spacing: 1px;
font-size:20px;
text-transform: uppercase;
padding-bottom: 20px;
}
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
margin-bottom:20px;
box-shadow: none !important;
.item-inner{
border:2px solid #929292 !important;
border-radius:0px;
box-shadow: none !important;
.input{
height:100%;
.text-input{
text-align: center !important;
color: #989898;
font-size: 18px;
font-weight: 300;
margin: 0px;
height:100%;
}
}
}
}
.fm_signup_btn{
width:150px;
color: #1d527f;
background:transparent;
font-weight: 500;
height:35px !important;
border-radius: 30px;
font-size:18px;
text-transform: capitalize;
border:2px solid #f6921e;
}
p{
color: #656565;
font-size: 16px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,Events } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
private LoginForm : FormGroup;
device_id:any;
lat_lng:any;
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public storage: Storage, private myservice: Myservice, public events: Events) {
console.log("in login");
this.storage.get('get_deviceId').then((deviceId) => {
console.log(deviceId);
if(deviceId){
this.device_id = deviceId.userId
}
})
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.navCtrl.push('TabsPage');
}
})
this.storage.get('lat_lng').then((lat_lng) => {
if(lat_lng){
this.lat_lng = lat_lng;
}
})
this.LoginForm = this.formBuilder.group({
email: ['', Validators.compose([Validators.pattern("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$"), Validators.required])],
password: ['', Validators.required ]
});
/* this.LoginForm.controls['email'].valueChanges.subscribe(value => {
var mails= value.trim();
console.log(mails)
// this.LoginForm.patchValue({email: mails});
// this.controls[email].patchValue(mails, {onlySelf: true, emitEvent});
//this.LoginForm.controls['email'].patchValue(mails);
//this.LoginForm.controls['email'].setValue(mails);
});
this.LoginForm.controls['email'].updateValue(mails); */
}
trim_white(value){
var mails= value.trim();
console.log(mails);
this.LoginForm.controls['email'].patchValue(mails);
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login() {
this.navCtrl.push('HomePage');
}
signup(){
this.navCtrl.push('SignupPage');
}
forgot_psw(){
this.navCtrl.push('OtpPage');
}
skip(){
this.navCtrl.push('TabsPage');
}
OnLogin(){
console.log(this.LoginForm.value)
console.log(this.device_id)
console.log(this.lat_lng)
this.myservice.show_loader();
var val = Object.assign({}, this.LoginForm.value , {'device_id' :this.device_id,'lat' : this.lat_lng.lat, 'lng' : this.lat_lng.lng })
this.myservice.load_post(val,'login').subscribe(data =>{
console.log(data);
this.myservice.hide_loader();
if(data.status=='success'){
this.storage.set('user_data',data.data).then(()=>{
this.myservice.hide_loader();
this.storage.get('user_data').then((user_data) => {
this.events.publish('user:update_profile', user_data);
//this.nav.setRoot('LoginPage');
this.navCtrl.setRoot('TabsPage');
})
});
}else
this.myservice.show_alert("Error!", data.message);
});
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9.]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
}
<ion-content padding class="page_background">
<div class="f_login_wrapper" *ngIf="login_clicked">
<div class="f_close" (click)="close_login()" >
<ion-icon name="close-circle"></ion-icon>
</div>
<div class="f_logo_container">
<img src="assets/imgs/fm_logo.png">
</div>
<h4>LOGIN</h4>
<hr>
<form [formGroup]="LoginForm" (ngSubmit)="OnLogin()">
<ion-list>
<ion-item>
<ion-input formControlName="email" #emailbookVal (keyup)="trim_white(emailbookVal.value)" type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-input formControlName="password" type="password" placeholder="Password"></ion-input>
</ion-item>
</ion-list>
<button class="fm_login_btn" ion-button [disabled]="!LoginForm.valid" >LOGIN</button>
</form>
<button class="fm_signup_btn" ion-button (click)="signup_button()">Signup here</button>
</div>
<div class="f_login_wrapper" *ngIf="signup_clicked">
<div class="f_close" (click)="close_login()" >
<ion-icon name="close-circle"></ion-icon>
</div>
<form [formGroup]="signup" (ngSubmit)="signupForm()">
<h4>SIGNUP</h4>
<hr>
<ion-list>
<ion-item>
<ion-input type="text" formControlName="first_name" placeholder="First Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('required') && signup.controls.first_name.touched">First name is required!</p>
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('pattern') && signup.controls.first_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('maxlength') && signup.controls.first_name.touched">Maximum firstname length is 30!</p>
</div>
<ion-item>
<ion-input type="text" formControlName="last_name" placeholder="Last Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('required') && signup.controls.last_name.touched">Last name is required!</p>
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('pattern') && signup.controls.last_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('maxlength') && signup.controls.last_name.touched">Maximum lastname length is 30!</p>
</div>
<ion-item>
<ion-input formControlName="email" type="email" placeholder="Email Id"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.email.hasError('required') && signup.controls.email.touched">Sorry, field email is required!</p>
<p class="valid-p" *ngIf="signup.controls.email.hasError('pattern') && signup.controls.email.touched">Sorry, please enter a valid email address!</p>
</div>
<ion-item>
<ion-input formControlName="mobile" type="number" placeholder="Phone Number"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('required') && signup.controls.mobile.touched">Sorry, field Phone no is required!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('pattern') && signup.controls.mobile.touched">Sorry, please enter a valid Phone number!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('minlength') && signup.controls.mobile.touched">Sorry, minimum Phone number length is 10!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('maxlength') && signup.controls.mobile.touched">Sorry, maximum Phone number length is 20!</p>
</div>
<ion-item>
<input type="text" id="address_signup" (click)="initialize()" formControlName="address" placeholder="Address">
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.address.hasError('required') && signup.controls.address.touched">Address is required!</p>
</div>
<ion-item>
<ion-input type="number" formControlName="postal_code" placeholder="Postal Code"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('required') && signup.controls.postal_code.touched">Sorry, field postal code is required!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('pattern') && signup.controls.postal_code.touched">Sorry, please enter a valid postal code!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('minlength') && signup.controls.postal_code.touched">Sorry, minimum postal code length is 4!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('maxlength') && signup.controls.postal_code.touched">Sorry, maximum postal code length is 4!</p>
</div>
<ion-item>
<input type="text" id="locality" formControlName="city" placeholder="City">
</ion-item>
</ion-list>
<h4>CREATE A PASSWORD</h4>
<hr>
<ion-list>
<ion-item>
<ion-input type="password" formControlName="password" placeholder="Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.password.hasError('required') && signup.controls.password.touched">Sorry, field password is required!</p>
<p class="valid-p" *ngIf="signup.controls.password.hasError('minlength') && signup.controls.password.touched">Sorry, minimum password length is 6!</p>
</div>
<ion-item>
<ion-input type="password" formControlName="cpassword" placeholder="Confirm Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.cpassword.hasError('required') && signup.controls.cpassword.touched">Sorry, field Confirm password is required!</p>
<p class="valid-p" *ngIf="signup.controls.cpassword.invalid && signup.controls.cpassword.touched">Password Mismatch!</p>
<p class="valid-p" *ngIf="signup.controls.cpassword.hasError('minlength') && signup.controls.cpassword.touched">Sorry, minimum Confirm password length is 6!</p>
</div>
</ion-list>
<button class="fm_login_btn" ion-button full >SIGNUP</button>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Loginbook } from './loginbook';
@NgModule({
declarations: [
Loginbook,
],
imports: [
IonicPageModule.forChild(Loginbook),
],
})
export class LoginbookModule {}
page-loginbook {
.f_close{
position:absolute;
top:15px;
right:15px;
font-size:25px;
color:#1d527f;
}
.page_background{
background:url('../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
text-align: center;
padding-top: 15%;
.f_logo_container{
width:100%;
text-align: center;
img{
width:160px;
}
margin-bottom: 30px;
}
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
font-size: 18px;
text-transform: uppercase;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin:0 auto;
margin-bottom:40px;
}
.item{
padding:0px;
background: transparent;
border:none !important;
height: 40px !important;
margin-bottom:20px;
.item-inner{
border:2px solid #15b3d5 !important;
border-radius:30px;
.input{
.text-input{
text-align: left !important;
color: #989898;
font-size: 18px;
font-weight: 300;
}
}
input{
width:100%;
height:100%;
background:transparent;
border:none;
padding-left:25px;
color: #989898;
font-size: 18px;
font-weight: 300;
}
}
}
.item-input-has-focus{
border:none !important;
}
.input-has-focus{
border:none !important;
}
.fm_login_btn{
width:150px;
color: #fff;
background: #1d527f;
font-weight: 300;
min-height:40px !important;
border-radius: 30px;
font-size:18px;
}
.fm_signup_btn{
width:150px;
color: #1d527f;
background:transparent;
font-weight: 500;
height:40px;
border-radius: 30px;
font-size:18px;
text-transform: capitalize;
border:2px solid #f6921e;
}
p{
color: #656565;
font-size: 18px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,Events , ViewController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl , AbstractControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
declare var require: any;
declare var google: any;
@IonicPage()
@Component({
selector: 'page-loginbook',
templateUrl: 'loginbook.html',
})
export class Loginbook {
private LoginForm : FormGroup;
device_id:any;
services:any;
location:any;
citie: any;
coun: any;
signup: any;
address: any;
componentForm: any;
login_clicked :any = true;
signup_clicked :any = false;
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public storage: Storage, private myservice: Myservice, public events: Events,public viewCtrl: ViewController) {
this.storage.get('get_deviceId').then((deviceId) => {
console.log(deviceId);
if(deviceId){
this.device_id = deviceId.userId
}
})
this.LoginForm = this.formBuilder.group({
email: ['', [Validators.required, this.emailValidator.bind(this)]],
password: ['', Validators.required ]
});
this.signup = this.formBuilder.group({
email: ['', Validators.compose([Validators.pattern("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$"), Validators.required])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
first_name: ['', Validators.compose([Validators.maxLength(30), Validators.required])],
last_name: ['', Validators.compose([Validators.maxLength(30), Validators.required])],
city: ['',],
postal_code: ['',Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(4)])],
address: ['', Validators.required],
cpassword: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
mobile: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(20)])],
}, {
validator: this.Match('password', 'cpassword')
});
this.componentForm = {
locality: 'long_name'
};
}
ionViewDidLoad() {
console.log('ionViewDidLoad Loginbook');
}
trim_white(value){
var mails= value.trim();
console.log(mails);
this.LoginForm.controls['email'].patchValue(mails);
}
login() {
this.navCtrl.setRoot('HomePage');
}
forgot_psw(){
this.navCtrl.setRoot('OtpPage',{'page':'loginbook'});
}
signup_button(){
this.login_clicked = false;
this.signup_clicked = true;
//this.navCtrl.push('SignupPage',{'page':'loginbook'});
}
skip(){
this.navCtrl.setRoot('TabsPage');
}
OnLogin(){
console.log(this.LoginForm.value)
this.myservice.show_loader();
var val = Object.assign({}, this.LoginForm.value , {'device_id' :this.device_id})
this.myservice.load_post(val,'login').subscribe(data =>{
console.log(data);
this.myservice.hide_loader();
if(data.status=='success'){
this.storage.set('user_data',data.data).then(()=>{
this.myservice.hide_loader();
this.storage.get('user_data').then((user_data) => {
this.events.publish('user:update_profile', user_data);
this.viewCtrl.dismiss({'user_data':user_data });
})
});
}else
this.myservice.show_alert("Error!", data.message);
});
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
close_login(){
this.viewCtrl.dismiss();
}
signupForm(){
if(this.signup.valid)
{
this.myservice.show_loader();
this.signup.controls['city'].setValue(this.citie);
this.signup.controls['address'].setValue(this.address);
var val = Object.assign({}, this.signup.value , {'device_id' :this.device_id})
var obj = Object.assign(val, this.location);
this.myservice.load_post(this.signup.value, "signup").subscribe(response => {
this.myservice.hide_loader();
console.log(response);
if(response.status == "success") {
//this.myservice.show_alert("success!", response.message);
//this.navCtrl.push('LoginPage');
this.storage.set('user_data',response.data).then(()=>{
this.myservice.hide_loader();
this.storage.get('user_data').then((user_data) => {
this.events.publish('user:update_profile', user_data);
this.viewCtrl.dismiss({'user_data':user_data });
})
});
}
else {
this.myservice.show_alert("Error!", response.message);
}
})
}
else{ // Form is not valid
this.markFormGroupTouched(this.signup); // function to mark fields as touched
}
}
Match(firstControlName, secondControlName) {
return (AC: AbstractControl) => {
let firstControlValue = AC.get(firstControlName).value; // to get value in input tag
let secondControlValue = AC.get(secondControlName).value; // to get value in input tag
if (firstControlValue != secondControlValue) {
AC.get(secondControlName).setErrors({mismatch: true});
console.log(false);
} else {
console.log(true);
return null
}
};
}
initialize() {
console.log("initialize")
var addressType='address_signup';
var input = document.getElementById('address_signup');
/* var options = {
types: ['(cities)']
}; */
var autocomplete = new google.maps.places.Autocomplete(input);
let thiss = this;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place.address_components);
for (var i = 0; i < place.address_components.length; i++) {
addressType = place.address_components[i].types[0];
console.log(addressType);
if (thiss.componentForm[addressType]) {
console.log(thiss.componentForm[addressType]);
var val = place.address_components[i][thiss.componentForm[addressType]];
// document.getElementById(addressType).value = val;
console.log(val);
(document.getElementById(addressType) as HTMLInputElement).value= val;
if(addressType=='locality'){ thiss.citie = place.address_components[i][thiss.componentForm['locality']]; }
}
}
thiss.address = place.formatted_address;
// thiss.signup.controls['address_signup'].setValue(place.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
/*
thiss.address = place.formatted_address;
console.log(placeA.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
*/
//document.getElementById('driver_lat').value=par.lat;
//document.getElementById('driver_lng').value=par.lng;
// document.getElementById('pickup_lat').value=par.lat;
// document.getElementById('pickup_lng').value=par.lng;
});
}
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="dismiss()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Location Map
</div>
</ion-header>
<!-- END-HEADER -->
<ion-content>
<!-- STARTS-MAP -->
<div #map id="map" class="widthFull heightFull"></div>
<!-- ENDS-MAP -->
</ion-content>
<!-- STARTS-FOOTER -->
<ion-footer padding *ngIf="search_by_map">
<div class="s_login_input_container">
<button ion-button class="s_login_btn theme_background_one" (click)="search_apply()" >Apply<span><img src="assets/imgs/s_arw.png"></span></button>
</div>
</ion-footer>
<!-- ENDS-FOOTER -->
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MapPage } from './map';
@NgModule({
declarations: [
MapPage,
],
imports: [
IonicPageModule.forChild(MapPage),
],
})
export class MapPageModule {}
.ios, .md {
home-page {
.scroll {
height: 100%
}
#map {
width: 100%;
height: 100%;
}
}
}
\ No newline at end of file
import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController,ViewController,NavParams } from 'ionic-angular';
import {Myservice} from '../../providers/myservice';
import { Storage } from '@ionic/storage';
declare var google: any;
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
lat: any;
lon: any;
mapData: any;
mapIcon: any;
@ViewChild('map') mapElement: ElementRef;
map: any
locations: any
search_val: any;
center_lng: any;
center_lat: any;
dis: any;
search_by_map: boolean;
is_map_search: boolean = false;
languages:any;
language_list:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController, private myservice: Myservice, public storage: Storage) {
this.is_map_search=false;
this.locations=this.navParams.get('locations');
this.storage.get('language').then((language) => {
if(language){
this.languages=language.languages;
this.language_list=language.values;
}
})
}
/* COMMON-NAVIGATION-CONTROL-FUNCTION */
dismiss() {
this.viewCtrl.dismiss();
}
/*------------------*/
/* GOOGLE-MAP-FUNCTION */
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
this.load_map();
}
load_map(){
var This=this;
this.myservice.show_loader();
setTimeout(() =>{
This.myservice.hide_loader();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat:Number(This.locations.lat),lng: Number(This.locations.lng)} // Australia.
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: false,
map: map,
});
directionsDisplay.addListener('directions_changed', function() {
This.computeTotalDistance(directionsDisplay.getDirections());
});
// {lat:This.lat_lng.lat,lng: This.lat_lng.lon}
// This.displayRoute({lat:9.036198,lng:38.829117},{lat:Number(This.locations.lat),lng: Number(This.locations.lng)}, directionsService,
// directionsDisplay);
directionsService.route({
origin: {lat:9.036198,lng:38.829117},
destination: {lat:Number(This.locations.lat),lng: Number(This.locations.lng)},
// waypoints: [{location: {lat:9.8761,lng: 76.2871}}, {location: {lat:9.9312,lng: 76.2673}},{location:{lat:9.9816,lng: 76.2999} }],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
console.log(directionsDisplay);
var markerData= {lat:Number(This.locations.lat),lng: Number(This.locations.lng)};
let marker = new google.maps.Marker({
position: markerData,
map: map,
draggable: false,
});
// display.setPosition(destination);
//alert('Could not display directions due to: ' + status);
}
});
},2000);
}
computeTotalDistance(result) {
var total = 0;
if(result.routes[0]){
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
//document.getElementById('total').innerHTML = total + ' km';
}
}
search() {
//is_map_search
console.log('Cucumbers new state:' + this.search_by_map);
}
search_apply(){
var map_array ={ 'radius' : this.dis, 'lat' : this.center_lat, 'lon' : this.center_lng, };
console.log(map_array);
console.log(this.search_val);
var merge_values = Object.assign(this.search_val, map_array);
this.viewCtrl.dismiss(merge_values);
}
}
<!--
Generated template for the MechanicalPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>mechanical</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MechanicalPage } from './mechanical';
@NgModule({
declarations: [
MechanicalPage,
],
imports: [
IonicPageModule.forChild(MechanicalPage),
],
})
export class MechanicalPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the MechanicalPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-mechanical',
templateUrl: 'mechanical.html',
})
export class MechanicalPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad MechanicalPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Offers
</div>
</ion-header>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<div class="offer_wrapper">
<ul *ngIf="offers.length >0">
<li *ngFor="let offer_list of offers" (click)="get_profile(offer_list.garage_id,offer_list,offer_list.service_id)">
<div class="offer_image">
<img *ngIf="offer_list.img" [src]="offer_list.img">
</div>
<div class="offer_detail">
<h5>{{offer_list.description}}</h5>
<h6><span class="floatLeft">{{offer_list.garage_name}}</span>
<span class="floatLeft"><rating [(ngModel)]="offer_list.rate"
readOnly="true"
max="5" name="rate"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"></rating></span>
<div class="clear"></div>
</h6>
<p class="textRight"><span class="discount_price">-{{offer_list.discount}}%</span></p>
<p class="textRight"><span class="actual_price"> {{offer_list.price}}</span><span class="final_price">€ {{offer_list.total_price}}</span></p>
</div>
<div class="clear"></div>
</li>
<!--<div class="fm_wrapper fm_margin_top0">
<div class="fm_editprofile_banner" style="height:100px;">
<div class="fm_oil_top_div">
<div class="fm_oil_top_inner_div">
<div class="fm_oil_top_head fm_bordernone">
<div class="fm_oil_head1">
<img src="assets/icon/fm_emi_icon.png">
</div>
<div class="fm_oil_head2">
<h5>EMISSION TEST</h5>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div> -->
<!-- <div class="fm_map_div">
</div> -->
<!-- <div class="fm_listing">
<ul *ngIf="offers.length >0">
<li *ngFor="let offer_list of offers" (click)="get_profile(offer_list.garage_id,offer_list,offer_list.service_id)">
<div class="offer_top">
<div class="offer_left"> -->
<!-- <h4 class="floatRight">
{{offer_list.discount}}% OFF
</h4> -->
<!-- <img *ngIf="offer_list.img" [src]="offer_list.img">
</div>
<div class="offer_right">
<ion-row>
<ion-col col-12 class="p0">
<h5 class="floatLeft">{{offer_list.description}}</h5>
<div class="clear"></div>
<p class="floatLeft" style="font-style:italic;padding-bottom:10px;color:#449db2;">{{offer_list.garage_name}}</p>
<rating [(ngModel)]="offer_list.rate"
readOnly="true"
max="5" name="rate"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star" ></rating>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
</ion-col>
<ion-col col-1 class="p0"></ion-col>
<ion-col col-6 class="textRight p0">
<p><i>-{{offer_list.discount}}%</i></p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5 class="p0">
<p>€ {{offer_list.price}}</p>
</ion-col>
<ion-col col-1 class="p0"></ion-col>
<ion-col col-6 class="textRight p0">
<p><i>€ {{offer_list.total_price}}</i></p>
</ion-col>
</ion-row>
</div>
<div class="clear"></div>
</div>
</li>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content>
</ion-infinite-scroll-content>
</ion-infinite-scroll>-->
</ul>
<div class="no_result_found" *ngIf="offers.length <=0">
<div class="no_result_icon">
<img src="assets/imgs/icon4.png">
</div>
<p>
No result found
</p>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Moreoffers } from './moreoffers';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
Moreoffers,
],
imports: [
IonicPageModule.forChild(Moreoffers),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class MoreoffersModule {}
page-moreoffers {
.offer_wrapper{
width:100%;
ul{
margin:0px;
padding:0px;
padding-top:10px;
li{
list-style: none;
margin-bottom: 0px;
border-bottom: 1px solid #929292;
.offer_image{
width:110px;
height:130px;
float: left;
background: #929292;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
.offer_detail{
float: left;
width:calc(100% - 110px);
padding-left:15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
h5{
margin:0px;
padding:0px;
color: #000;
font-weight: 600;
padding-bottom: 4px;
}
p{
margin:0px;
padding:0px;
padding-top: 10px;
}
h6{
margin:0px;
padding:0px;
color: #929292;
font-weight: 400;
}
.discount_price{
color: #ee2203;
font-size: 18px;
font-weight: 500;
}
.actual_price{
color: #929292;
font-size: 18px;
margin-right:10px;
font-weight: 400;
text-decoration:line-through;
}
.final_price{
color: #1DB100;
font-size: 18px;
font-weight: 600;
}
.rating{
padding:0px;
margin-left: 10px;
li{
padding: 0px;
.icon{
font-size: 10px;
}
}
}
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-moreoffers',
templateUrl: 'moreoffers.html',
})
export class Moreoffers {
offers=[];
user_data:any;
//page =5;
page:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice) {
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
this.get_offers();
}
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad Moreoffers');
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
this.get_offers();
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
shopdetail()
{
this.navCtrl.push('ShopdetailPage');
}
get_offers(){
this.myservice.show_loader();
this.myservice.load_get('getOffers/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
//this.offers = data.result;
console.log(this.page)
//if(data.result.length ==this.page)
this.offers = data.result;
//else
//this.offers = this.offers.concat(data.result);
console.log(this.offers);
}
});
}
/* doInfinite(infiniteScroll) {
console.log('Begin async operation');
this.page +=5;
setTimeout(() => {
this.get_offers();
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
} */
get_profile(id,offer_id,service_id){
var obj = {'offers' : offer_id,'service_id' : service_id}
this.navCtrl.push('ShopdetailPage',{'garage_id' : id,'page' : 'offers','offers':obj});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Notification
</div>
</ion-header>
<ion-content padding>
<div class="fm_notification_wrapper">
<div class="textCenter" (click)="notification_clear($event)" *ngIf="request_list">
<button ion-button class="clearall_btn">Clear all</button>
</div>
<ul *ngIf="request_list" >
<li (click)="get_details(requests.id)" *ngFor="let requests of request_list" >
<div class="fm_notification_box">
<h4>{{requests.work_name}}</h4>
<p>Garage Name : {{requests.name}} </p>
<p>Quote : {{requests.quote.total_price}}</p>
</div>
<div class="fm_notification_close" (click)="delete_noti(requests.id,$event)" ></div>
<div class="clear"></div>
</li>
</ul>
<div class="no_resultfound" *ngIf="!request_list" >
<img src="assets/imgs/noresult.png">
<p>No Result Found </p>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { NotificationPage } from './notification';
@NgModule({
declarations: [
NotificationPage,
],
imports: [
IonicPageModule.forChild(NotificationPage),
],
})
export class NotificationPageModule {}
page-notification {
.fm_notification_wrapper{
width: 100%;
height: 100%;
.clearall_btn{
height:30px;
border-radius: 20px;
border:2px solid #15b3d5;
color: #15b3d5;
background: transparent;
padding-left: 20px;
padding-right: 20px;
margin:0 auto;
font-weight: 500;
text-transform: capitalize;
}
ul{
margin:0px;
padding:0px;
width: 100%;
width:100%;
height:calc(100% - 15px);
overflow:scroll;
li{
width:100%;
list-style: none;
border-bottom:1px solid #dcdcdc;
padding-bottom:10px;
padding-top: 10px;
.fm_notification_box{
width:calc(100% - 50px);
float: left;
h4{
color: #144b6d;
font-size: 16px;
margin:0px;
padding:0px;
}
p{
color: #848484;
font-weight: 300;
margin:0px;
padding-top: 5px;
}
}
.fm_notification_close{
width:50px;
float: right;
height: 50px;
background-image:url('../assets/imgs/fm_close_not.png') !important;
background-position: center;
background-size: 18px;
background-repeat: no-repeat;
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController,Events } from 'ionic-angular';
import {Myservice} from '../../providers/myservice';
import { Storage } from '@ionic/storage';
/**
* Generated class for the NotificationPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-notification',
templateUrl: 'notification.html',
})
export class NotificationPage {
user_data:any;
request_list:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController,public events: Events) {
events.subscribe('user:pool_requests', userdetails => {
this.get_pool_requests();
});
setTimeout(() => {
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
console.log("in user")
this.user_data= user_data;
this.get_pool_requests()
}else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data){
if(data.user_data.id) {
this.user_data = data.user_data;
this.get_pool_requests()
}
}else{
this.navCtrl.setRoot('TabsPage');
}
});
modal.present();
}
})
}, 1000);
}
ionViewDidLoad() {
console.log('ionViewDidLoad NotificationPagess');
}
get_details(id){
this.navCtrl.push('QuoteDetailsPage',{'pool_id' :id});
}
get_pool_requests(){
this.myservice.show_loader();
this.myservice.load_get('get_pool_requests/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.request_list = data.result;
console.log(this.request_list);
}
else
this.request_list =''
});
}
delete_noti(id,evt){
evt.stopPropagation();
this.myservice.show_loader();
this.myservice.load_get('delete_noti/id/'+id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success",data.message);
this.events.publish('user:notifications', '');
this.get_pool_requests();
}
});
}
notification_clear(evt){
evt.stopPropagation();
this.myservice.show_loader();
this.myservice.load_get('notification_clear/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.myservice.show_alert("Success",data.message);
this.events.publish('user:notifications', '');
this.get_pool_requests();
}
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Booking
</div>
</ion-header>
<ion-content padding>
<div class="booking_wrapper">
<div *ngIf="page == 'offers'" >
<h5>Selected</h5>
<div class="" *ngIf="offers">
<p><strong>{{offers.description}}</strong></p>
<!--<h6 class="textRight">
<span class="discount_price"> -{{service_selected.discount}}%</span>
</h6> -->
<h6 class="textRight">
<span class="actual_price">€{{offers.price}}</span>
<span class="final_price">€{{offers.total_price}}</span>
</h6>
<h5>Further Services</h5>
<ion-list *ngIf="selected_services">
<ion-item *ngFor="let serv of selected_services; let i=index">
<ion-label class="floatLeft">
<span class="floatLeft">{{serv.service}}</span>
<span class="floatRight">€{{serv.price}}</span></ion-label>
<div class="clear"></div>
<ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</div>
<hr>
<div [hidden]="page == 'offers' || page == 'quotes'" >
<h5>Our Services</h5>
<ion-list *ngIf="selected_services">
<ion-item *ngFor="let serv of selected_services; let i=index">
<ion-label class="floatLeft">
<span class="floatLeft">{{serv.service}}</span>
<span class="floatRight">€{{serv.price}}</span></ion-label>
<div class="clear"></div>
<ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox>
</ion-item>
</ion-list>
</div>
<div class="no_result_found" *ngIf="service_message">
<div class="no_result_icon">
<img src="assets/imgs/icon4.png">
</div>
<p>
Book Value Empty
</p>
</div>
<div class="no_result_found" *ngIf="book_message">
<div class="no_result_icon">
<img src="assets/imgs/icon4.png">
</div>
<p>
service value empty
</p>
</div>
<hr>
<div *ngIf="page == 'quotes'" >
<h5>Selected</h5>
<div class="" *ngIf="quote_val">
<p><strong>{{quote_val.service_name}}</strong></p>
<!--<h6 class="textRight">
<span class="discount_price"> -{{service_selected.discount}}%</span>
</h6> -->
<h6 class="textRight">
<span class="final_price">€{{quote_val.price}}</span>
</h6>
<h5>Further Services</h5>
<ion-list *ngIf="selected_services">
<ion-item *ngFor="let serv of selected_services; let i=index">
<ion-label class="floatLeft">
<span class="floatLeft">{{serv.service}}</span>
<span class="floatRight">€{{serv.price}}</span></ion-label>
<div class="clear"></div>
<ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</div>
<ion-row class="p0">
<ion-col col-8 class="p0">
<h4>Total Amount</h4>
<span>(incl. 20 Mwst)</span>
</ion-col>
<ion-col col-4 class="textRight p0">
<h3>€ {{total_price}}</h3>
</ion-col>
</ion-row>
<br>
<hr>
<h4>Select Date and Available time</h4>
<div class="offered_head">
<div class="nav_btn floatLeft">
<ion-icon name="ios-arrow-back" *ngIf="timing.dates >= tom" (click)="get_next_dates(timing.dates,'prev')"></ion-icon>
</div>
<div class="nav_header_title floatLeft">
<ion-item class="s_result_detail_datepicker">
<ion-datetime displayFormat="DD MMM, YYYY" min="{{today_dt}}" max="2040" pickerFormat="YYYY-MM-DD" [(ngModel)]="timing.dates"
(ngModelChange)="get_next_dates(timing.dates,'no')"
placeholder="Start Time">
</ion-datetime>
</ion-item>
</div>
<div class="nav_btn floatRight" (click)="get_next_dates(timing.dates,'next')">
<ion-icon name="ios-arrow-forward"></ion-icon>
</div>
<div class="clear"></div>
</div>
<div class="booking_div">
<div class="booking_content" *ngIf="schedule">
<div class="no_result_found" *ngIf="schedule.length <=0">
<div class="no_result_icon">
<img src="assets/imgs/icon4.png">
</div>
<p>
No Schedule Found
</p>
</div>
<ul class="time_list" *ngIf="schedule.length >0">
<li *ngFor="let book_dates of schedule" (click)="select_time(timing.dates,book_dates)">
{{book_dates}}
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<button class="login_btn theme_lblue widthFull" (click)="book()">Next</button>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OfferedPage } from './offered';
@NgModule({
declarations: [
OfferedPage,
],
imports: [
IonicPageModule.forChild(OfferedPage),
],
})
export class OfferedPageModule {}
page-offered {
.booking_wrapper{
h5{
color: #0076ba;
}
p{
color: #000;
margin:0px;
padding:0px;
}
h6{
.discount_price{
color: #ee2203;
font-size: 18px;
font-weight: 500;
}
.actual_price{
color: #929292;
font-size: 18px;
margin-right:10px;
font-weight: 400;
}
.final_price{
color: #1DB100;
font-size: 18px;
font-weight: 600;
}
}
span{
color: #000;
}
h4{
margin:0px;
padding: 0px;
padding-top: 10px;
color: #0076ba;
font-weight: 600;
font-size: 18px;
}
h3{
margin:0px;
padding: 0px;
color: #1DB100;
font-size: 20px;
padding-top: 14px;
font-weight: 600;
}
.list{
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
.checkbox {
margin-right:9px !important;
}
.label {
color: #787878 !important;
font-size: 17px !important;
font-weight: 400;
padding-left: 10px;
}
.checkbox-checked{
background: #225682 !important;
border:1px solid #225682 !important;
border-radius: 6px !important;
}
.checkbox-icon{
width:18px !important;
height:18px !important;
border-radius: 6px;
border:2px solid #225682 !important;
background: transparent;
}
.checkbox-checked .checkbox-inner{
left:5px !important;
top:2px !important;
border-color: #15b3d5 !important;
}
}
}
.offered_head{
margin-top: 10px;
.datetime {
padding:0px !important;
width:100%;
}
.nav_btn{
color: #205373;
text-align: center;
padding:10px !important;
}
.nav_header_title{
color: #205373;
font-weight: 400;
text-align: center;
}
}
.time_list{
width:100%;
padding: 0px;
margin: 0px;
margin-bottom: 10px;
li{
list-style: none;
width:33.3%;
padding: 10px;
border: 1px solid #fff;
float: left;
background: #f6f6f6;
text-align: center;
font-size: 18px;
}
}
}
.f_login_wrapper{
width: 100%;
padding-top: 30px;
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
font-size: 18px;
text-transform: uppercase;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin-left:0;
margin-bottom:20px;
}
.list{
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
.checkbox {
margin-right:9px !important;
}
.label {
color: #787878 !important;
font-size: 17px !important;
font-weight: 400;
padding-left: 10px;
}
.checkbox-checked{
background: #225682 !important;
border:1px solid #225682 !important;
border-radius: 6px !important;
}
.checkbox-icon{
width:18px !important;
height:18px !important;
border-radius: 6px;
border:2px solid #225682 !important;
background: transparent;
}
.checkbox-checked .checkbox-inner{
left:5px !important;
top:2px !important;
border-color: #15b3d5 !important;
}
}
}
.fm_signup_btn{
color: #1d527f;
background:transparent;
font-weight: 500;
height:40px;
border-radius: 30px;
font-size:18px;
text-transform: capitalize;
border:2px solid #f6921e;
}
p{
color: #656565;
font-size: 18px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
}
.fm_login_btn{
color: #fff;
background: #1d527f;
font-weight: 300;
height:40px;
border-radius: 30px;
font-size:20px;
}
.booking_div{
width:100%;
.nav_header{
.nav_header_title{
padding:0px;
}
margin-bottom:20px;
.item{
.item-inner{
.input-wrapper{
.datetime{
text-align:center;
color:#083352;
padding:0px !important;
width:100%;
}
}
}
}
}
.text_primary{color: #1d527f !important;}
.text_dark{color: #083352 !important;}
.booking_content{
width:100%;
ul
{
margin:0px;
padding:0px;
height: 155px;
overflow:scroll;
li{
width:calc(100% - 68%);
display:inline-block;
text-align: center;
background: #f1f1f1;
color: #1d527f;
padding:10px;
border:1px solid #fff;
font-weight: 400;
&:hover{
background: #1d527f;
color: #fff;
}
}
.active{
background: #1d527f;
color: #fff;
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ViewController ,ModalController, Events} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl,FormArray } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-offered',
templateUrl: 'offered.html',
})
export class OfferedPage {
todo = {}
services_offered:any;
selected_services:any;
user_data:any;
timing:any;
schedule:any;
today_dt:any;
page:any;
offers:any;
garage_id:any;
tom:any;
book_message:any;
service_message:any;
device_id:any;
total_price:any=0;
total_taxprice:any=0;
quote_val:any;
services_pg:any;
service_selected=[];
myForm: FormGroup;
bookvals = {'book_date': '', 'book_time': '','user_id':'','service_id':'','service' : [],'total_price' : ''};
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public storage: Storage, private myservice: Myservice,public viewCtrl: ViewController,public modalCtrl: ModalController,public events: Events) {
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data =user_data;
}
})
if(this.navParams.get('offers')){
this.offers = this.navParams.get('offers');
this.offers = this.offers.offers
this.total_price = (parseInt(this.offers.total_price))
console.log("offers" ,this.offers )
}
if(this.navParams.get('services')){
this.services_pg = this.navParams.get('services');
console.log("services_pg" ,this.services_pg )
}
this.storage.get('get_deviceId').then((deviceId) => {
console.log(deviceId);
if(deviceId){
this.device_id = deviceId.userId
}
else
this.device_id = '';
})
this.page = this.navParams.get('page');
this.garage_id = this.navParams.get('garage_id')
console.log(this.garage_id);
this.timing = this.navParams.get('timing');
this.schedule = this.timing.timing;
this.book_message = false;this.service_message = false;
this.quote_val = this.navParams.get('quote_val');
if(this.page = 'quotes' )
this.total_price = (parseInt(this.quote_val.price))
console.log(this.quote_val);
var tdyDate = new Date();
var tdys = new Date(tdyDate);
tdys.setDate(tdyDate.getDate());
this.today_dt = tdys.toISOString();
var nextDays = new Date(tdyDate);
nextDays.setDate(tdyDate.getDate()+1);
this.tom = nextDays.toISOString();
this.get_selected_services()
this.get_services()
this.myForm = formBuilder.group({
services: this.formBuilder.array([])
})
if(this.page == 'offers'){
var offers = this.navParams.get('offers');
console.log("offers",offers);
/* this.service_selected.push({'service_id':offers.offers.garage_service_id,'offer_id':offers.offers.id, 'service_charge':offers.offers.price,
'price':offers.offers.discounted_price, 'discount' : offers.offers.discount,'service':offers.offers.service,'garage_id':this.garage_id}); */
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad OfferedPage');
}
back(){
this.navCtrl.pop();
}
timings(){
this.navCtrl.push('TimingPage')
}
get_services(){
this.myservice.show_loader();
this.myservice.load_get('get_services').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.services_offered = data.result;
console.log(this.services_offered)
}
});
}
get_selected_services(){
this.myservice.show_loader();
this.myservice.load_get('get_selected_services/id/'+this.garage_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.selected_services = data.result;
}
});
}
updateCheckedOptions(serv, isChecked: boolean) {
console.log(this.total_price)
this.total_taxprice = 0
if(isChecked){
this.total_price = parseInt(serv.price)+parseInt(this.total_price)
//this.total_taxprice = ((parseInt(this.total_price) * 20)/100)+(parseInt(this.total_price))
}else{
this.total_price =parseInt(this.total_price) - parseInt(serv.price)
//this.total_taxprice = ((parseInt(this.total_price) * 20)/100)+(parseInt(this.total_price))
}
this.service_selected.push({'service_id':serv.id,'service':serv.service,'service_desc':serv.description,'price':serv.price,'garage_id':this.garage_id});
const services = <FormArray>this.myForm.controls.services;
services.push(new FormControl(serv));
/* if(isChecked) {
} else {
let index = services.controls.findIndex(x => x.value.id == serv.id);
services.removeAt(index);
}
*/
}
/*add_tax(){
this.total_price = ((parseInt(this.total_price) * 20)/100)+(parseInt(this.total_price))
}*/
select_time(dates,times){
console.log("userdata " ,this.user_data)
if(this.user_data){
this.bookvals = {'book_date': dates, 'book_time': times,'user_id':this.user_data.id,'service_id':'','service' : [],'total_price' : ''};
console.log(this.bookvals);
}else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data){
if(data.user_data.id) {
this.user_data = data.user_data;
this.bookvals = {'book_date': dates, 'book_time': times,'user_id':data.user_data.id,'service_id':'','service' : [],'total_price' : ''};
console.log(this.bookvals);
}}
});
modal.present();
}
}
book(){
var obj = {'service' : this.service_selected,'total_price' :this.total_price}
this.bookvals = Object.assign(this.bookvals, obj);
if(this.page == 'quotes'){
this.bookvals = Object.assign(this.bookvals, this.quote_val );
} if(this.page == 'offers'){
this.bookvals = Object.assign(this.bookvals, this.offers );
}
console.log(this.bookvals);
if(this.bookvals){
if(this.bookvals.service.length>=0){
if(this.bookvals.book_time && this.bookvals.service[0].service_id){
this.book_message = false;
this.service_message = false;
this.navCtrl.push('OverviewPage',{'bookvals':this.bookvals,'garage_name':this.navParams.get('garage_name'),'garage_id':this.garage_id,'page' : this.page});
}
else{
if(this.bookvals.book_time==undefined && this.bookvals.service[0].service_id==undefined){
this.book_message = true;this.service_message = true;
}
else{
if(this.bookvals.book_time=='' || this.bookvals.book_time==undefined){
this.book_message = true;
this.service_message = false;
}
if(this.bookvals.service[0].service_id=='' || this.bookvals.service[0].service_id==undefined){
this.service_message = true;
this.book_message = false;
}
}
}}
}
}
logForm(form){
var arr=[];
for (var i = 0; i < form.services.length; i++) {
console.log(form.services[i])
arr[i]={ 'garage_id' :this.user_data.id , 'service_id' : form.services[i].id };
}
this.myservice.show_loader();
this.myservice.load_post({arr},'add_services').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.navCtrl.push('Services')
}
else{
this.myservice.show_alert("Error", data.message);
}
});
}
get_next_dates(dates,status){
var nextDay = new Date(dates);
if(status=='next')
nextDay.setDate(nextDay.getDate() + 1);
else if(status=='prev')
nextDay.setDate(nextDay.getDate() - 1);
else
nextDay.setDate(nextDay.getDate());
var MyDateString =nextDay.getFullYear() + '-' + ('0' + (nextDay.getMonth()+1)).slice(-2) + '-' + ('0' + nextDay.getDate()).slice(-2);
var date_string= nextDay.toLocaleDateString();
var arr = [];
arr = date_string.split("/");
this.timing.dates = MyDateString;
console.log(MyDateString);
let dates1 =arr[2]+"-"+arr[0]+"-"+arr[1];
var obj = {
id: this.garage_id,
date: MyDateString
};
this.myservice.show_loader();
this.myservice.load_post(obj, "getshopDetails_by_date").subscribe(response => {
this.myservice.hide_loader();
if(response.status=='success') {
this.schedule =response.result.timing.timing;
}
else {
this.myservice.show_alert("Error!", response.message);
}
})
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Booking
</div>
</ion-header>
<ion-content padding class="page_background">
<div class="f_login_wrapper" >
<!--- <div [hidden]="page == 'offers' || page == 'quotes'" >
<h4>Select Services Offered </h4>
<hr>
// <form [formGroup]="myForm" (ngSubmit)="logForm(myForm.value)" >
<ion-list>
<ion-item *ngFor="let serv of services_offered; let i=index" >
<ion-label> {{serv.service}} </ion-label>
<ion-checkbox (ionChange)="updateCheckedOptions(serv, $event.checked)" color=""></ion-checkbox>
</ion-item>
</ion-list>
</div> --->
<div *ngIf="page == 'fixprice'" >
<h4>Selected </h4>
<h5>{{services_pg.service}} €{{services_pg.price}}</h5>
<hr>
<ion-list *ngIf="selected_services">
<ion-item *ngFor="let serv of selected_services; let i=index">
<ion-label class="floatLeft">
<span class="floatLeft">{{serv.service}}</span>
<span class="floatRight">€{{serv.price}}</span></ion-label>
<div class="clear"></div>
<ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</div>
<div *ngIf="service_message" class="empty_div_style" >service value empty</div>
<div *ngIf="book_message" class="empty_div_style" >Book Value Empty</div>
<!--- <div class="s_search_appointment_list" >
<ion-scroll scrollX="true" style="height:220px;">
<ul *ngIf="timing">
<ion-row nowrap>
<li class="s_search_appointment_inner" >
<div class="s_appointment_head">
<!--- *ngIf="timing.dates >= today_dt"
<button class="nav_btn floatLeft text_color_one" (click)="get_next_dates('prev')"> <i primary class="fa fa-angle-left fa-lg"></i></button>
<button class="nav_btn floatRight text_color_one" (click)="get_next_dates('next')"> <i primary class="fa fa-angle-right fa-lg"></i></button>
<div class="s_appointment_head_date floatRight textCenter">
<!---- <p class="p0"><strong>{{timing.dates | date : 'EEE d'}} </strong> {{book_dates.date | date : 'yyyy'}} </p>
<ion-item class="s_result_detail_datepicker">
<ion-datetime displayFormat="DD MMM, YYYY" min="{{today_dt}}" max="2040" pickerFormat="YYYY-MM-DD" [(ngModel)]="timing.dates"
(ngModelChange)="get_next_dates(doctor_profile.profile.id,timing.dates,'no')"
placeholder="Start Time">
</ion-datetime>
</ion-item>
</div>
<div class="clear"></div>
</div>
<div class="s_appointment_date_detail" >
<div class="s_appoinment_result_noschedule text_color_one" *ngIf="schedule.length <=0" >
<span >No_Schedule_Found </span>
<span >Doctor_Not_Available </span>
</div>
<ul *ngIf="schedule.length >0" >
<!--- *ngIf="book_dates.date > todayDate" <li *ngIf="book_dates.times.length <=0" > <p>No Schedule Found</li>
<li *ngFor="let book_dates of schedule">
<div id="s_custom_check_button" >
<label>
<input id="1" type="radio" name="services" value="" (click)="select_time(timing.dates,book_dates)" >
<p>{{book_dates}}</p>
</label>
</div>
</li>
</ul>
</div>
</li>
</ion-row>
</ul>
</ion-scroll>
</div> -->
<hr>
<h5>Total Amount: € {{total_price}}</h5>
<h5>(Incl. 20% MwSt) </h5>
<div class="booking_div">
<div class="nav_header">
<button *ngIf="timing.dates >= tom" class="nav_btn floatLeft text_primary" ion-button (click)="get_next_dates(timing.dates,'prev')" >
<ion-icon name="arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft TextCenter text_dark">
<ion-item class="s_result_detail_datepicker">
<ion-datetime displayFormat="DD MMM, YYYY" min="{{today_dt}}" max="2040" pickerFormat="YYYY-MM-DD" [(ngModel)]="timing.dates"
(ngModelChange)="get_next_dates(timing.dates,'no')"
placeholder="Start Time">
</ion-datetime>
</ion-item>
</div>
<button class="nav_btn floatRight text_primary" ion-button (click)="get_next_dates(timing.dates,'next')" >
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<div class="booking_content" *ngIf="schedule">
<div class="s_appoinment_result_noschedule text_color_one" *ngIf="schedule.length <=0" >
<div class="empty_div_style">
No Schedule Found
</div>
</div>
<ul *ngIf="schedule.length >0">
<li *ngFor="let book_dates of schedule" (click)="select_time(timing.dates,book_dates)" >
{{book_dates}}
</li>
</ul>
</div>
</div>
<button class="fm_login_btn" ion-button full (click)="book()" >Next</button>
</ion-content>
<ion-footer padding>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OfferedFixprices } from './offeredfixprices';
@NgModule({
declarations: [
OfferedFixprices,
],
imports: [
IonicPageModule.forChild(OfferedFixprices),
],
})
export class OfferedFixpricesModule {}
page-offeredfixprices {
.booking_wrapper{
h5{
color: #0076ba;
}
p{
color: #000;
margin:0px;
padding:0px;
}
h6{
.discount_price{
color: #ee2203;
font-size: 18px;
font-weight: 500;
}
.actual_price{
color: #929292;
font-size: 18px;
margin-right:10px;
font-weight: 400;
}
.final_price{
color: #1DB100;
font-size: 18px;
font-weight: 600;
}
}
span{
color: #000;
}
h4{
margin:0px;
padding: 0px;
padding-top: 10px;
color: #0076ba;
font-weight: 600;
font-size: 18px;
}
h3{
margin:0px;
padding: 0px;
color: #1DB100;
font-size: 20px;
padding-top: 14px;
font-weight: 600;
}
.list{
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
.checkbox {
margin-right:9px !important;
}
.label {
color: #787878 !important;
font-size: 17px !important;
font-weight: 400;
padding-left: 10px;
}
.checkbox-checked{
background: #225682 !important;
border:1px solid #225682 !important;
border-radius: 6px !important;
}
.checkbox-icon{
width:18px !important;
height:18px !important;
border-radius: 6px;
border:2px solid #225682 !important;
background: transparent;
}
.checkbox-checked .checkbox-inner{
left:5px !important;
top:2px !important;
border-color: #15b3d5 !important;
}
}
}
.offered_head{
margin-top: 10px;
.datetime {
padding:0px !important;
width:100%;
}
.nav_btn{
color: #205373;
text-align: center;
padding:10px !important;
}
.nav_header_title{
color: #205373;
font-weight: 400;
text-align: center;
}
}
.time_list{
width:100%;
padding: 0px;
margin: 0px;
margin-bottom: 10px;
li{
list-style: none;
width:33.3%;
padding: 10px;
border: 1px solid #fff;
float: left;
background: #f6f6f6;
text-align: center;
font-size: 18px;
}
}
}
.f_login_wrapper{
width: 100%;
padding-top: 30px;
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
font-size: 18px;
text-transform: uppercase;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin-left:0;
margin-bottom:20px;
}
.list{
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
.checkbox {
margin-right:9px !important;
}
.label {
color: #787878 !important;
font-size: 17px !important;
font-weight: 400;
padding-left: 10px;
}
.checkbox-checked{
background: #225682 !important;
border:1px solid #225682 !important;
border-radius: 6px !important;
}
.checkbox-icon{
width:18px !important;
height:18px !important;
border-radius: 6px;
border:2px solid #225682 !important;
background: transparent;
}
.checkbox-checked .checkbox-inner{
left:5px !important;
top:2px !important;
border-color: #15b3d5 !important;
}
}
}
.fm_signup_btn{
color: #1d527f;
background:transparent;
font-weight: 500;
height:40px;
border-radius: 30px;
font-size:18px;
text-transform: capitalize;
border:2px solid #f6921e;
}
p{
color: #656565;
font-size: 18px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
}
.fm_login_btn{
color: #fff;
background: #1d527f;
font-weight: 300;
height:40px;
border-radius: 30px;
font-size:20px;
}
.booking_div{
width:100%;
.nav_header{
.nav_header_title{
padding:0px;
}
margin-bottom:20px;
.item{
.item-inner{
.input-wrapper{
.datetime{
text-align:center;
color:#083352;
padding:0px !important;
width:100%;
}
}
}
}
}
.text_primary{color: #1d527f !important;}
.text_dark{color: #083352 !important;}
.booking_content{
width:100%;
ul
{
margin:0px;
padding:0px;
height: 155px;
overflow:scroll;
li{
width:calc(100% - 68%);
display:inline-block;
text-align: center;
background: #f1f1f1;
color: #1d527f;
padding:10px;
border:1px solid #fff;
font-weight: 400;
&:hover{
background: #1d527f;
color: #fff;
}
}
.active{
background: #1d527f;
color: #fff;
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ViewController ,ModalController, Events} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl,FormArray } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-offeredfixprices',
templateUrl: 'offeredfixprices.html',
})
export class OfferedFixprices {
todo = {}
services_offered:any;
selected_services:any;
user_data:any;
timing:any;
schedule:any;
today_dt:any;
page:any;
offers:any;
garage_id:any;
tom:any;
book_message:any;
service_message:any;
device_id:any;
total_price:any=0;
total_taxprice:any=0;
quote_val:any;
services_pg:any;
service_selected=[];
myForm: FormGroup;
bookvals = {'book_date': '', 'book_time': '','user_id':'','service_id':'','service' : [],'total_price' : ''};
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public storage: Storage, private myservice: Myservice,public viewCtrl: ViewController,public modalCtrl: ModalController,public events: Events) {
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data =user_data;
}
})
if(this.navParams.get('offers')){
this.offers = this.navParams.get('offers');
this.offers = this.offers.offers
console.log("offers" ,this.offers )
}
if(this.navParams.get('services')){
this.services_pg = this.navParams.get('services');
console.log("services_pg" ,this.services_pg )
this.total_price = this.services_pg.price
}
this.storage.get('get_deviceId').then((deviceId) => {
console.log(deviceId);
if(deviceId){
this.device_id = deviceId.userId
}
else
this.device_id = '';
})
this.page = this.navParams.get('page');
this.garage_id = this.navParams.get('garage_id')
console.log(this.garage_id);
this.timing = this.navParams.get('timing');
this.schedule = this.timing.timing;
this.book_message = false;this.service_message = false;
this.quote_val = this.navParams.get('quote_val');
console.log(this.quote_val);
var tdyDate = new Date();
var tdys = new Date(tdyDate);
tdys.setDate(tdyDate.getDate());
this.today_dt = tdys.toISOString();
var nextDays = new Date(tdyDate);
nextDays.setDate(tdyDate.getDate()+1);
this.tom = nextDays.toISOString();
this.get_selected_services()
this.get_services()
this.myForm = formBuilder.group({
services: this.formBuilder.array([])
})
if(this.page == 'offers'){
var offers = this.navParams.get('offers');
console.log("offers",offers);
this.service_selected.push({'service_id':offers.offers.garage_service_id,'offer_id':offers.offers.id, 'service_charge':offers.offers.price,
'price':offers.offers.discounted_price, 'discount' : offers.offers.discount,'service':offers.offers.service,'garage_id':this.garage_id});
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad OfferedPage');
}
back(){
this.navCtrl.pop();
}
timings(){
this.navCtrl.push('TimingPage')
}
get_services(){
this.myservice.show_loader();
this.myservice.load_get('get_services').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.services_offered = data.result;
console.log(this.services_offered)
}
});
}
get_selected_services(){
this.myservice.show_loader();
this.myservice.load_get('get_selected_services/id/'+this.garage_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.selected_services = data.result;
console.log(this.services_pg.id)
let index = this.selected_services.findIndex(x =>x.service_id == this.services_pg.id);
console.log(this.selected_services)
console.log(index)
this.selected_services.splice(index, 1);
}
});
}
/* updateCheckedOptions(serv, isChecked: boolean) {
console.log(isChecked)
if(isChecked == true){
this.total_price = parseInt(serv.price)+parseInt(this.total_price)
this.service_selected.push({'service_id':serv.id,'service':serv.service,'price':serv.price,'garage_id':this.garage_id});
const services = <FormArray>this.myForm.controls.services;
services.push(new FormControl(serv));
}
if(isChecked) {
} else {
let index = services.controls.findIndex(x => x.value.id == serv.id);
services.removeAt(index);
}
}*/
updateCheckedOptions(serv, isChecked: boolean) {
console.log(this.page)
this.total_taxprice = 0
if(isChecked){
this.total_price = parseInt(serv.price)+parseInt(this.total_price)
//this.total_taxprice = ((parseInt(this.total_price) * 20)/100)+(parseInt(this.total_price))
}else{
this.total_price =parseInt(this.total_price) - parseInt(serv.price)
//this.total_taxprice = ((parseInt(this.total_price) * 20)/100)+(parseInt(this.total_price))
}
this.service_selected.push({'service_id':serv.id,'service':serv.service,'service_desc':serv.description,'price':serv.price,'garage_id':this.garage_id});
const services = <FormArray>this.myForm.controls.services;
services.push(new FormControl(serv));
/* if(isChecked) {
} else {
let index = services.controls.findIndex(x => x.value.id == serv.id);
services.removeAt(index);
}
*/
}
select_time(dates,times){
console.log("userdata " ,this.user_data)
if(this.user_data){
this.bookvals = {'book_date': dates, 'book_time': times,'user_id':this.user_data.id,'service_id':'','service' : [],'total_price' : ''};
console.log(this.bookvals);
}else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data){
if(data.user_data.id) {
this.user_data = data.user_data;
this.bookvals = {'book_date': dates, 'book_time': times,'user_id':data.user_data.id,'service_id':'','service' : [],'total_price' : ''};
console.log(this.bookvals);
}}
});
modal.present();
}
}
book(){
var obj = {'service' : this.service_selected,'total_price' :this.total_price}
this.bookvals = Object.assign(this.bookvals, obj);
if(this.page == 'quotes'){
this.bookvals = Object.assign(this.bookvals, this.quote_val );
}
console.log(this.bookvals);
if(this.bookvals){
if(this.bookvals.service.length>=0){
if(this.bookvals.book_time && this.bookvals.service[0].service_id){
this.book_message = false;this.service_message = false;
this.navCtrl.push('OverviewPage',{'bookvals':this.bookvals,'garage_name':this.navParams.get('garage_name'),'garage_id':this.garage_id,'page' : this.page});
}
else{
if(this.bookvals.book_time==undefined && this.bookvals.service[0].service_id==undefined){
this.book_message = true;this.service_message = true;
}
else{
if(this.bookvals.book_time=='' || this.bookvals.book_time==undefined){
this.book_message = true;
this.service_message = false;
}
if(this.bookvals.service[0].service_id=='' || this.bookvals.service[0].service_id==undefined){
this.service_message = true;
this.book_message = false;
}
}
}}
}
}
logForm(form){
var arr=[];
for (var i = 0; i < form.services.length; i++) {
console.log(form.services[i])
arr[i]={ 'garage_id' :this.user_data.id , 'service_id' : form.services[i].id };
}
this.myservice.show_loader();
this.myservice.load_post({arr},'add_services').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.navCtrl.push('Services')
}
else{
this.myservice.show_alert("Error", data.message);
}
});
}
get_next_dates(dates,status){
var nextDay = new Date(dates);
if(status=='next')
nextDay.setDate(nextDay.getDate() + 1);
else if(status=='prev')
nextDay.setDate(nextDay.getDate() - 1);
else
nextDay.setDate(nextDay.getDate());
var MyDateString =nextDay.getFullYear() + '-' + ('0' + (nextDay.getMonth()+1)).slice(-2) + '-' + ('0' + nextDay.getDate()).slice(-2);
var date_string= nextDay.toLocaleDateString();
var arr = [];
arr = date_string.split("/");
this.timing.dates = MyDateString;
console.log(MyDateString);
let dates1 =arr[2]+"-"+arr[0]+"-"+arr[1];
var obj = {
id: this.garage_id,
date: MyDateString
};
this.myservice.show_loader();
this.myservice.load_post(obj, "getshopDetails_by_date").subscribe(response => {
this.myservice.hide_loader();
if(response.status=='success') {
this.schedule =response.result.timing.timing;
}
else {
this.myservice.show_alert("Error!", response.message);
}
})
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_menu" ion-button menuToggle>
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_editprofile_wrapper">
<div class="fm_editprofile_banner">
<div class="fm_editprofie_picture">
<img src="assets/imgs/fm_profile_img.png">
</div>
<img src="assets/imgs/fm_edit_border.png">
</div>
<div class="fm_editprofile_details">
<br>
<div class="fm_edit_details_img"><img src="assets/icon/fm_oil.png"></div>
<h4 class="fm_margin_top0">OIL CHANGE</h4>
<hr>
<br>
<br>
<div class="fm_history_wrapper">
<ul>
<li>
<div class="child1">Remind me every</div>
<div class="child2">
<input class="fm_change_input" type="text" placeholder="000000Km">
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OilPage } from './oil';
@NgModule({
declarations: [
OilPage,
],
imports: [
IonicPageModule.forChild(OilPage),
],
})
export class OilPageModule {}
page-oil {
.fm_history_wrapper{width:100%;}
.fm_history_wrapper ul{padding:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top: 20px;padding-bottom: 20px;}
.fm_history_wrapper ul li{width:100%;list-style:none;font-size:18px;padding-top: 10px;padding-bottom: 10px;}
.fm_history_wrapper ul li .child1{float:left;text-align:left;color:#07426a;}
.fm_history_wrapper ul li .child2{float:right;text-align:right;color:#7d7d7d;}
.fm_history_wrapper span{color:#767676;}
.fm_history_wrapper span img{padding-right:10px;}
.fm_history_wrapper hr{width:100%;border:1px solid #7d7d7d;height:0px;border-top:none;margin-top:10px;margin-bottom:10px;}
.fm_history_wrapper ul li strong{color:#5b5b5b !important;}
.fm_garage_details{width:100%;}
.fm_garage_details ul{width:90%;margin:0px;padding:0px;margin:0 auto;}
.fm_garage_details ul li{width:100%;list-style:none;font-size: 18px;padding-top: 10px;padding-bottom: 10px;}
.fm_garage_details ul li .child1{float:left;width:45%;color:#07426a;}
.fm_garage_details ul li .child2{float:left;width:10%;color:#7d7d7d;}
.fm_garage_details ul li .child3{float:right;width:45%;color:#7d7d7d;}
.fm_recall{height:25px;border-radius:20px;padding-left:15px;padding-right:15px;border:1px solid #85d7e9; font-size: 16px;}
.fm_garage_detail_bottom_bay{width:100%;position:fixed;bottom:110px;text-align:center;}
.fm_history_btn{color:#fff;border-radius:20px;height:30px;background:#15b3d5;padding-left:15px;padding-right:15px;font-size:16px;}
.fm_edit_details_img{margin:0 auto;text-align: center;}
.fm_edit_details_img img{margin:0 auto;width:45px;margin-bottom: 10px;}
.fm_change_input{border:1px solid #198ba6;border-radius:20px;height:30px;width:150px;padding-left:10px;padding-right:10px;text-align:center;}
.fm_garage_btm_bar{width:100%;text-align:center;padding-top:20px;}
.fm_add_history{height:35px;border-radius:20px;width:210px;background:#449db2;color:#fff;font-size:16px;}
.fm_notification_list{width:100%;}
.fm_notification_list ul{width:100%;margin:0px;padding:0px;}
.fm_notification_list ul li{width:100%;list-style:none;border-bottom:1px solid #e7e7e7;padding-top: 20px;padding-bottom:20px;}
.fm_notification_btn_bay{width:100%;text-align:center;padding:20px;}
.fm_clear_all{border:2px solid #15b3d5;color:#15b3d5;font-weight:500;height:35px;padding-left:20px;padding-right:20px;background:transparent;border-radius:20px;}
.fm_notification_list ul li h6{color:#144b6d;}
.fm_notification_list ul li p{color:#8e8e8e;padding:0px;margin-bottom:0px;}
.fm_notification_left{float:left;width:70%;}
.fm_notification_right{float:right;position: relative;top: 29px;}
.fm_notification_right img{width:25px;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:120px;height:120px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the OilPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-oil',
templateUrl: 'oil.html',
})
export class OilPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad OilPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Forgot Password
</div>
<div class="clear"></div>
</ion-header>
<ion-content padding class="page_background">
<div class="f_login_wrapper">
<div class="login_wizard_head">Please enter your registered email id
to receive temp password</div>
<form [formGroup]="forgot" (ngSubmit)="on_submit()" >
<ion-list>
<ion-item>
<ion-input type="text" formControlName="email" placeholder="Email Id"></ion-input>
</ion-item>
</ion-list>
<button class="login_btn theme_lblue widthFull" ion-button [disabled]="!forgot.valid" >Get new password</button>
</form>
<!--- <p>Resend</p>
<button class="fm_signup_btn" ion-button (click)="signup()">Signup here</button> --->
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OtpPage } from './otp';
@NgModule({
declarations: [
OtpPage,
],
imports: [
IonicPageModule.forChild(OtpPage),
],
})
export class OtpPageModule {}
page-otp {
.page_background{
background:url('../../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
padding-top: 30px;
.f_logo_container{
width:100%;
text-align: center;
img{
width:160px;
}
margin-bottom: 30px;
}
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
font-size: 18px;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin:0 auto;
margin-bottom:40px;
}
.item{
padding:0px;
background: transparent;
border:none !important;
height: 40px !important;
margin-bottom:20px;
.item-inner{
border:2px solid #929292 !important;
border-radius:0px;
.input{
.text-input{
text-align: left !important;
color: #989898;
font-size: 18px;
font-weight: 300;
}
}
}
}
.item-input-has-focus{
border:none !important;
}
.input-has-focus{
border:none !important;
}
.fm_login_btn{
width:100%;
color: #fff;
background: #1d527f;
font-weight: 300;
min-height:40px !important;
border-radius: 30px;
font-size:18px;
}
p{
color: #656565;
font-size: 18px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
.login_btn{
text-transform: capitalize;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Myservice} from '../../providers/myservice'
import { ValidationService } from '../../providers/validation_service';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-otp',
templateUrl: 'otp.html',
})
export class OtpPage {
private forgot : FormGroup;
user_data:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private myservice: Myservice, public formBuilder : FormBuilder,public storage:Storage) {
this.forgot = this.formBuilder.group({
email: ['', [Validators.required, this.emailValidator.bind(this)]],
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad OtpPage');
}
login(){
this.navCtrl.push('LoginPage');
}
on_submit(){
console.log(this.forgot.value);
this.myservice.show_loader();
var obj = {'email': this.forgot.value.email}
this.myservice.load_post(obj,'forgotpassword').subscribe(data => {
this.myservice.hide_loader();
if(data.status == "success") {
this.myservice.show_alert("Success" , data.message);
}
else {
this.myservice.show_alert("Error" , data.message);
}
})
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9.]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
back()
{
this.navCtrl.pop();
}
}
<!--
Generated template for the OverviewPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>overview</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-4>
Garage:
</ion-col>
<ion-col col-8>
{{garage_name}}
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
Booking For:
</ion-col>
<ion-col col-8 *ngIf="bookvals" >
{{bookvals.book_date | date:'dd.MM.yyyy'}} at {{bookvals.book_time}}
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
Service Details:
</ion-col>
</ion-row>
<ion-row *ngIf="page=='offers'" >
<ion-col >
{{bookvals.description}}
</ion-col>
</ion-row>
<ion-row *ngFor="let service of bookvals.service" >
<ion-col >
{{service.service}} : {{service.service_desc}}
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
Payment:
</ion-col>
<ion-col col-8>
On Site
</ion-col>
</ion-row>
<ion-row *ngIf="page=='offers' || page=='quotes'" >
<ion-col col-4 >
Spare Parts:
</ion-col>
<ion-col col-8>
OEM-Parts (Erstausrusterqualitat)
</ion-col>
</ion-row>
<ion-row *ngIf="page=='offers' || page=='quotes'" >
<ion-col col-8>
Warranty on spare parts & work:
</ion-col>
<ion-col col-4>
24 Months
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
Total Amount:
<br>
(Incl. 20% MwSt)
</ion-col>
<ion-col col-8>
€{{bookvals.total_price}}
</ion-col>
</ion-row>
<button (click)="book()" >Book Now</button>
</ion-grid>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OverviewPage } from './overview';
@NgModule({
declarations: [
OverviewPage,
],
imports: [
IonicPageModule.forChild(OverviewPage),
],
})
export class OverviewPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the OverviewPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-overview',
templateUrl: 'overview.html',
})
export class OverviewPage {
garage_name:any;
garage_id:any;
bookvals:any;
page:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice) {
this.garage_name = this.navParams.get('garage_name')
this.garage_id = this.navParams.get('garage_id')
this.bookvals = this.navParams.get('bookvals')
this.page = this.navParams.get('page')
console.log('this.garage_name' ,this.garage_name)
console.log('this.bookvals' ,this.page)
}
ionViewDidLoad() {
console.log('ionViewDidLoad OverviewPage');
}
book(){
// this.myservice.show_loader();
var service_name =this.bookvals.description
if(this.page ='quotes')
service_name = this.bookvals.service_name
var obj = { 'book_date' : this.bookvals.book_date , 'book_time' : this.bookvals.book_time ,'service_name' : service_name, 'discount' : this.bookvals.discount, 'garage_id' : this.garage_id, 'price' : this.bookvals.price, 'service' : this.bookvals.service, 'total_price' : this.bookvals.total_price,'user_id' :this.bookvals.user_id,'offer_id' :this.bookvals.id}
this.myservice.load_post(obj,'book_garage').subscribe(data => {
//this.myservice.hide_loader();
if(data.status == 'success'){
//alert("hi");
//this.myservice.show_alert('Success',data.message);
var datas = {'garage_name':this.garage_name,'bookvals' :this.bookvals}
// this.events.publish('user:notifications', '');
this.navCtrl.push('SuccessPage',{'datas':datas,'page' : this.page });
}else if(data.status == 'booked'){
this.myservice.show_alert('Error',data.message);
this.navCtrl.push('TabsPage');
}
else
this.myservice.show_alert('Error',data.message);
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft fm_menu" *ngIf="from_push" ion-button menuToggle>
</button>
<button class="nav_btn floatLeft fm_back" *ngIf="!from_push" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
Quote Overview
</div>
</ion-header>
<ion-content padding class="page_background">
<div class="f_login_wrapper">
<h4 *ngIf="quote_list" >Your quote for {{quote_list.work_name}}</h4>
<hr>
<h4 *ngIf="quote_list" > {{quote_list.name}}</h4>
<h4 *ngIf="quote_list" > {{quote_list.rate}}</h4>
<h4 *ngIf="quote_list" > {{quote_list.address}}</h4>
<div class="quote_details">
<ion-grid *ngIf="quote_list" class="p0" >
<ion-row>
<ion-col col-5>
<p>
<strong>Note Garage </strong>
</p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p>{{quote_list.message}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5>
<p>
<strong>Garage Name </strong>
</p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p> {{quote_list.name}}</p>
</ion-col>
</ion-row>
<ion-grid *ngFor="let parts_list of quote_list.quote.parts" class="p0" >
<ion-row>
<ion-col>
</ion-col>
</ion-row>
<ion-row >
<ion-col col-5>
<p><strong> {{parts_list.name}}</strong></p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p> €{{parts_list.price}}</p>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngFor="let parts_list of quote_list.quote.parts" class="p0" >
<ion-row>
<ion-col>
</ion-col>
</ion-row>
<ion-row >
<ion-col col-5>
<p><strong> {{parts_list.name}}</strong></p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p> €{{parts_list.price}}</p>
</ion-col>
</ion-row>
</ion-grid>
<ion-row>
<ion-col col-5>
<p><strong>Labour Charge</strong></p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p>€{{quote_list.quote.labour}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5>
<p><strong>Tax</strong></p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p>20%</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-5>
<p><strong>Total Price</strong></p>
</ion-col>
<ion-col col-1><p>:</p></ion-col>
<ion-col col-6>
<p>€{{quote_list.quote.total_price}}</p>
</ion-col>
</ion-row>
<br>
<br>
<ion-row >
<ion-col class="textCenter">
<button class="fm_signup_btn" ion-button (click)="garage_details(quote_list.garage_id,quote_list.id,quote_list.service_id,quote_list.work_name,quote_list.quote.total_price)" color="secondary" >View Garage & Book</button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { QuoteDetailsPage } from './quote-details';
@NgModule({
declarations: [
QuoteDetailsPage,
],
imports: [
IonicPageModule.forChild(QuoteDetailsPage),
],
})
export class QuoteDetailsPageModule {}
page-quote-details {
.page_background{
background:url('../../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
font-size: 18px;
text-transform: uppercase;
}
hr{
border:2px solid #f6921e;
width:60px;
height:0px;
margin-left:0;
margin-bottom:20px;
}
h3{
color: #848484;
font-weight: 400;
font-size: 18px;
padding-top: 15px;
padding-bottom: 15px;
margin:0px;
}
p{
margin:0px;
padding:0px;
color: #848484;
font-size: 15px;
strong{
color: #07426a;
}
}
button{
font-weight: 300;
color: #3a3a3a;
padding: 5px;
margin:0px;
color:#fff;
background: #07426a;
border-radius: 20px;
text-align: center;
text-transform: capitalize;
padding-left: 30px;
padding-right: 30px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,Events } from 'ionic-angular';
import {Myservice} from '../../providers/myservice';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-quote-details',
templateUrl: 'quote-details.html',
})
export class QuoteDetailsPage {
pool_id:any;
quote_list:any;
user_data:any;
notify:any;
from_push:any = false;
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice,public events:Events) {
this.pool_id = this.navParams.get('pool_id');
this.from_push = this.navParams.get('from_push');
if(this.pool_id){
this.get_quote_details();
this.update_read_status();
}
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
}
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad QuoteDetailsPage');
}
get_quote_details(){
this.myservice.show_loader();
this.myservice.load_get('get_quote_details/id/'+this.pool_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.quote_list = data.result;
console.log(this.quote_list);
}
});
}
update_read_status(){
this.myservice.show_loader();
this.myservice.load_get('update_read_status/id/'+this.pool_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.events.publish('user:notifications', '');
//this.events.publish('user:notifications', this.user_data.id);
console.log(data);
}
});
}
garage_details(id,pool_id,service_id,service_name,price){
var obj = {'pool_id' : pool_id,'service_id' : service_id,'service_name' : service_name,'price' : price, 'user_accepted_status' :1,'garage_id':id,'quote_status':1}
this.navCtrl.push('ShopdetailPage',{'garage_id' : id,'page' : 'quotes','quote_val' : obj});
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Request
</div>
</ion-header>
<ion-content>
<div class="request_wrapper">
<form [formGroup]="requestsForm" (ngSubmit)="onSubmit()">
<h5 *ngIf="service">Get upto 3 Quotes for <strong>{{service}}</strong></h5>
<ion-row class="p0">
<ion-col col-8 class="p0">
<h4>Add mileage of your car</h4>
</ion-col>
<ion-col col-4 class="p0">
<input class="mileage_input" placeholder="Mileage in Km" type="number" formControlName="km">
</ion-col>
</ion-row>
<div class="fma-field error">
<p class="valid-p" *ngIf="requestsForm.controls.km.hasError('required') && requestsForm.controls.km.touched">Sorry, field km is required!</p>
<p class="valid-p" *ngIf="requestsForm.controls.km.hasError('maxLength') && requestsForm.controls.km.touched">Sorry, maximum length is 8!</p>
</div>
<h5 *ngIf="service=='Oil Service'" >Do you need further filters ?</h5>
<ion-item-group *ngIf="service=='Oil Service'" >
<ion-item *ngFor="let val of checkbox_val" >
<ion-label>{{val.name}}</ion-label>
<ion-checkbox (ionChange)="change_val(val, $event.checked)" ></ion-checkbox>
</ion-item>
</ion-item-group>
<ion-row class="p0">
<ion-col col-12>
<h4>Would you like to add something?</h4>
<textarea formControlName="message" class="request_text" rows="4"></textarea>
</ion-col>
</ion-row>
<div class="fma-field error">
<p class="valid-p" *ngIf="requestsForm.controls.message.hasError('required') && requestsForm.controls.message.touched">Sorry, field is required!</p>
</div>
<button class="login_btn theme_green widthFull">Send Request</button>
</form>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RequestPage } from './request';
@NgModule({
declarations: [
RequestPage,
],
imports: [
IonicPageModule.forChild(RequestPage),
],
})
export class RequestPageModule {}
page-request {
.request_wrapper{
padding:10px;
h5{
color: #929292;
font-weight: 500;
margin-bottom: 30px;
strong{
color: #1DB100;
}
}
.mileage_input{
width: 100%;
height:40px;
border:none;
border-bottom: 1px solid #929292;
}
h4{
color: #0076ba;
margin:0px;
padding-top: 5px;
}
.request_text{
border:1px solid #000;
width:100%;
margin-top:20px;
}
.row{
margin-bottom: 15px;
}
}
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li .inside_image img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png"); background-repeat: no-repeat !important;
background-position: center !important; background-size: 30px !important;}
.fm_add_picture li img{width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;}
.fm_add_photo{background:url("../assets/icon/fm_photo.png") !important; background-repeat: no-repeat !important;
background-position: center !important;}
.inside_image{width:100%;
height:100%;}
.inside_image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl,FormArray } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the RequestPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-request',
templateUrl: 'request.html',
})
export class RequestPage {
private requestsForm : FormGroup;
service:any;
filtr:any;
arr:any=[];
checkbox_val = [{'value': 'fuelfilter','name' : 'Fuel Filter'},{'value': 'cabinfilter','name' : 'Cabin Filter'},{'value': 'airfilter','name' : 'Air Filter'}]
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder,public storage:Storage, private myservice: Myservice,) {
this.service = this.navParams.get('service')
this.requestsForm = this.formBuilder.group({
//filters: [{'value': 'fuelfilter','name' : 'Fuel Filter'}, ],
km: ['', Validators.compose([Validators.required, Validators.maxLength(8)])],
message: ['', Validators.required],
filters: this.formBuilder.array([]),
});
this.arr = [{'value': 'fuelfilter','name' : 'Fuel Filter'}]
//this.requestsForm.controls['filters'].setValue({'value': 'fuelfilter','name' : 'Fuel Filter'});
// if(this.service == 'Oil Service')
// this.requestsForm.setControl('filters',new FormControl('',Validators.required));
// else
// this.requestsForm.setControl('filters',new FormControl('',));
}
ionViewDidLoad() {
console.log('ionViewDidLoad RequestPage');
}
back(){
this.navCtrl.pop()
}
onSubmit(){
if(this.requestsForm.valid){
console.log('in',this.requestsForm.value)
}else{ // Form is not valid
this.markFormGroupTouched(this.requestsForm);
}
}
change_val(val,isChecked){
console.log(val)
const emailFormArray = <FormArray>this.requestsForm.controls.filters;
if(isChecked) {
emailFormArray.push(new FormControl(val));
} else {
let index = emailFormArray.controls.findIndex(x => x.value.value == val.value)
emailFormArray.removeAt(index);
}
// this.filtr = val
// console.log(this.arr)
// if(evt == true){
// let index = this.arr.findIndex(x => console.log(x));
// }
// this.requestsForm.controls['filters'].setValue(this.arr);
// console.log(this.arr)
// console.log(index)
// this.arr.splice(index, 1);
// console.log('val', val)
// console.log('evt',evt)
}
/**** function to mark fields as touched ****/
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Request
</div>
</ion-header>
<ion-content>
<div class="request_wrapper">
<form [formGroup]="requestsForm" (ngSubmit)="onSubmit()">
<h5 *ngIf="service" >Get upto 3 Quotes for <strong>{{service}} </strong></h5>
<h5 >Select What to Do ? </h5>
<ion-item *ngFor="let val of checkbox_val" >
<ion-label>{{val}}</ion-label>
<ion-checkbox (ionChange)="change_val(val, $event.checked)" ></ion-checkbox>
</ion-item>
<ion-row class="p0">
<ion-col col-12>
<h4>Would you like to add something</h4>
<textarea formControlName="message" class="request_text" placeholder="Type here" rows="4"></textarea>
</ion-col>
</ion-row>
<div class="fma-field error">
<p class="valid-p" *ngIf="requestsForm.controls.message.hasError('required') && requestsForm.controls.message.touched">Sorry, field is required!</p>
</div>
<button class="login_btn theme_green widthFull">Send Request</button>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RequestBreak } from './request_break';
@NgModule({
declarations: [
RequestBreak,
],
imports: [
IonicPageModule.forChild(RequestBreak),
],
})
export class RequestBreakModule {}
page-request_break {
.request_wrapper{
padding:10px;
h5{
color: #929292;
font-weight: 500;
margin-bottom: 30px;
strong{
color: #1DB100;
}
}
.mileage_input{
width: 100%;
height:40px;
border:none;
border-bottom: 1px solid #929292;
}
h4{
color: #0076ba;
margin:0px;
padding-top: 5px;
}
.request_text{
border:1px solid #000;
width:100%;
margin-top:20px;
}
.row{
margin-bottom: 15px;
}
}
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li .inside_image img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png"); background-repeat: no-repeat !important;
background-position: center !important; background-size: 30px !important;}
.fm_add_picture li img{width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;}
.fm_add_photo{background:url("../assets/icon/fm_photo.png") !important; background-repeat: no-repeat !important;
background-position: center !important;}
.inside_image{width:100%;
height:100%;}
.inside_image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl,FormArray} from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
/**
* Generated class for the RequestPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-request_break',
templateUrl: 'request_break.html',
})
export class RequestBreak {
private requestsForm : FormGroup;
service:any;
filtr:any;
arr:any=[];
checkbox_val = ['Bremsbeläge vorne','Bremsscheiben inkl. Bremsbeläge vorne','Bremsbeläge hinten', 'Bremsscheiben inkl. Bremsbeläge hinten', 'Bremsflüssigkeit erneuern']
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder,public storage:Storage, private myservice: Myservice,) {
this.service = this.navParams.get('service')
this.requestsForm = this.formBuilder.group({
//filters: [{'value': 'fuelfilter','name' : 'Fuel Filter'}, ],
message: ['', Validators.required],
filters: this.formBuilder.array([])
});
this.arr = [{'value': 'fuelfilter','name' : 'Fuel Filter'}]
//this.requestsForm.controls['filters'].setValue({'value': 'fuelfilter','name' : 'Fuel Filter'});
// if(this.service == 'Oil Service')
// this.requestsForm.setControl('filters',new FormControl('',Validators.required));
// else
// this.requestsForm.setControl('filters',new FormControl('',));
}
ionViewDidLoad() {
console.log('ionViewDidLoad RequestPage');
}
back(){
this.navCtrl.pop()
}
onSubmit(){
if(this.requestsForm.valid){
console.log('in',this.requestsForm.value)
}else{ // Form is not valid
this.markFormGroupTouched(this.requestsForm);
}
}
change_val(val,isChecked){
console.log(val)
const emailFormArray = <FormArray>this.requestsForm.controls.filters;
if(isChecked) {
emailFormArray.push(new FormControl(val));
} else {
let index = emailFormArray.controls.findIndex(x => x.value.value == val)
emailFormArray.removeAt(index);
}
// this.filtr = val
// console.log(this.arr)
// if(evt == true){
// let index = this.arr.findIndex(x => console.log(x));
// }
// this.requestsForm.controls['filters'].setValue(this.arr);
// console.log(this.arr)
// console.log(index)
// this.arr.splice(index, 1);
// console.log('val', val)
// console.log('evt',evt)
}
/**** function to mark fields as touched ****/
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<h5 *ngIf="service" >Get upto 3 Quotes for {{service}} </h5>
<form [formGroup]="body_shop_form" (ngSubmit)="body_shop()">
<div class="fm_body_need" style="padding-top:55px;">
<h5 >Add Picture of 57a-Protocol</h5>
<hr>
<div class="fm_add_picture" >
<li class="fm_add_photo" (click)="uploadPicture('1')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['1']" *ngIf="profile_pic['1']" ></div></li>
<li (click)="uploadPicture('2')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['2']" *ngIf="profile_pic['2']" ></div></li>
<li (click)="uploadPicture('3')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['3']" *ngIf="profile_pic['3']" ></div></li>
</div>
<h5>Would you like add something?</h5>
<hr>
<textarea formControlName="message" class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<!--- <div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div> -->
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" [disabled]="!body_shop_form.valid" >Send Request<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RequestProtocol } from './request_protocol';
@NgModule({
declarations: [
RequestProtocol,
],
imports: [
IonicPageModule.forChild(RequestProtocol),
],
})
export class RequestProtocolModule {}
page-request_protocol {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li .inside_image img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png"); background-repeat: no-repeat !important;
background-position: center !important; background-size: 30px !important;}
.fm_add_picture li img{width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;}
.fm_add_photo{background:url("../assets/icon/fm_photo.png") !important; background-repeat: no-repeat !important;
background-position: center !important;}
.inside_image{width:100%;
height:100%;}
.inside_image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-request_protocol',
templateUrl: 'request_protocol.html',
})
export class RequestProtocol {
private body_shop_form : FormGroup;
body_parts:any;
service_id:any;
user_data:any;
successs:any;
lat_lng:any;
service:any;
base64Image= [];
profile_pic= [];
constructor(public navCtrl: NavController, public navParams: NavParams,private transfer: FileTransfer, private file: File, private formBuilder: FormBuilder,private imagePicker: ImagePicker,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController) {
this.storage.get('lat_lng').then((lat_lng) => {
console.log("instorage", lat_lng);
if(lat_lng){
this.lat_lng=lat_lng;
}
})
this.service = this.navParams.get('service')
console.log(this.service);
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
}
})
this.body_shop_form = this.formBuilder.group({
message: ['', Validators.required],
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad DamagephotoPage');
}
back(){
this.navCtrl.pop();
}
success(){
this.navCtrl.push('SuccessPage');
}
body_shop(){
if(this.user_data){
console.log(this.base64Image);
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':this.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data.user_data.id) {
this.user_data = data.user_data;
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':data.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
});
modal.present();
}
}
save_body_shop(vals){
console.log(this.base64Image.length);
if(this.base64Image.length > 0){
this.myservice.show_loader();
this.myservice.load_post(vals,'save_body_shop').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.load_post_multifile(this.base64Image, {'value' :data.data }, "save_pool_img");
}else{
this.myservice.show_alert("Error",data.message);
}
});
}else
this.myservice.show_alert("Warning","Please upload atleast one image");
}
uploadPicture(pic){
console.log(pic);
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
console.log(results.length);
console.log(results[0]);
if(results){
this.base64Image[pic]= results[0];
this.profile_pic[pic] = results[0];
}
}, (err) => { });
console.log(this.base64Image);
}
load_post_multifile(imageURI, post_data, fn_name) {
this.myservice.show_loader();
var i;
for (i = 1; i < imageURI.length; i++) {
if(imageURI[i]!=undefined){
console.log("imageURI" ,imageURI[i]);
let ft = this.transfer.create();
let filename = imageURI[i].substr(imageURI[i].lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
ft.upload(imageURI[i], this.myservice.webservice_url+fn_name, options, false)
.then((result: any) => {
this.myservice.hide_loader();
console.log('result ' + i, result);
this.successs=true;
console.log('imageURIlength ',imageURI.length);
console.log('i ',i);
}).catch((error: any) => {
this.myservice.hide_loader();
this.successs=false;
this.myservice.show_alert("Error!", 'No garages found');
});
}
}
console.log(this.successs);
if(i == imageURI.length)
this.navCtrl.push('SuccessPage',{'page':'car_details'});
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<h5 *ngIf="service" >Get upto 3 Quotes for {{service}} </h5>
<form [formGroup]="body_shop_form" (ngSubmit)="body_shop()">
<div class="fm_body_need" style="padding-top:55px;">
<h5 >Add Pictures to be cleaned</h5>
<hr>
<div class="fm_add_picture" >
<li class="fm_add_photo" (click)="uploadPicture('1')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['1']" *ngIf="profile_pic['1']" ></div></li>
<li (click)="uploadPicture('2')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['2']" *ngIf="profile_pic['2']" ></div></li>
<li (click)="uploadPicture('3')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['3']" *ngIf="profile_pic['3']" ></div></li>
</div>
<h5>Tell us whats needs to be done?</h5>
<hr>
<textarea formControlName="message" class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<!--- <div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div> -->
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" [disabled]="!body_shop_form.valid" >Send Request<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RequestWash } from './request_wash';
@NgModule({
declarations: [
RequestWash,
],
imports: [
IonicPageModule.forChild(RequestWash),
],
})
export class RequestWashModule {}
page-request_wash {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li .inside_image img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png"); background-repeat: no-repeat !important;
background-position: center !important; background-size: 30px !important;}
.fm_add_picture li img{width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;}
.fm_add_photo{background:url("../assets/icon/fm_photo.png") !important; background-repeat: no-repeat !important;
background-position: center !important;}
.inside_image{width:100%;
height:100%;}
.inside_image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-request_wash',
templateUrl: 'request_wash.html',
})
export class RequestWash {
private body_shop_form : FormGroup;
body_parts:any;
service_id:any;
user_data:any;
successs:any;
lat_lng:any;
service:any;
base64Image= [];
profile_pic= [];
constructor(public navCtrl: NavController, public navParams: NavParams,private transfer: FileTransfer, private file: File, private formBuilder: FormBuilder,private imagePicker: ImagePicker,public storage:Storage, private myservice: Myservice,public modalCtrl: ModalController) {
this.storage.get('lat_lng').then((lat_lng) => {
console.log("instorage", lat_lng);
if(lat_lng){
this.lat_lng=lat_lng;
}
})
this.service = this.navParams.get('service')
console.log(this.service);
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
}
})
this.body_shop_form = this.formBuilder.group({
message: ['', Validators.required],
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad DamagephotoPage');
}
back(){
this.navCtrl.pop();
}
success(){
this.navCtrl.push('SuccessPage');
}
body_shop(){
if(this.user_data){
console.log(this.base64Image);
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':this.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
else{
let modal = this.modalCtrl.create('Loginbook');
modal.onDidDismiss(data => {
console.log(data);
if(data.user_data.id) {
this.user_data = data.user_data;
var objs = Object.assign({}, this.body_shop_form.value, {'work_name':this.body_parts,'service_id':this.service_id, 'user_id':data.user_data.id, 'lat':this.lat_lng.lat, 'lon':this.lat_lng.lng});
console.log(objs);
if(this.base64Image){
this.save_body_shop(objs);
}
}
});
modal.present();
}
}
save_body_shop(vals){
console.log(this.base64Image.length);
if(this.base64Image.length > 0){
this.myservice.show_loader();
this.myservice.load_post(vals,'save_body_shop').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.load_post_multifile(this.base64Image, {'value' :data.data }, "save_pool_img");
}else{
this.myservice.show_alert("Error",data.message);
}
});
}else
this.myservice.show_alert("Warning","Please upload atleast one image");
}
uploadPicture(pic){
console.log(pic);
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
console.log(results.length);
console.log(results[0]);
if(results){
this.base64Image[pic]= results[0];
this.profile_pic[pic] = results[0];
}
}, (err) => { });
console.log(this.base64Image);
}
load_post_multifile(imageURI, post_data, fn_name) {
this.myservice.show_loader();
var i;
for (i = 1; i < imageURI.length; i++) {
if(imageURI[i]!=undefined){
console.log("imageURI" ,imageURI[i]);
let ft = this.transfer.create();
let filename = imageURI[i].substr(imageURI[i].lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
ft.upload(imageURI[i], this.myservice.webservice_url+fn_name, options, false)
.then((result: any) => {
this.myservice.hide_loader();
console.log('result ' + i, result);
this.successs=true;
console.log('imageURIlength ',imageURI.length);
console.log('i ',i);
}).catch((error: any) => {
this.myservice.hide_loader();
this.successs=false;
this.myservice.show_alert("Error!", 'No garages found');
});
}
}
console.log(this.successs);
if(i == imageURI.length)
this.navCtrl.push('SuccessPage',{'page':'car_details'});
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_common_wrapper">
<div class="fm_banner">
<div class="fm_banner_circle"></div>
<div class="fm_border">
</div>
</div>
<h3>SERVICE HISTORY</h3>
<hr>
<div class="fm_service_history">
<p>23/07/2019</p>
<ul>
<li>
<ion-row>
<ion-col col-6><p>Changed Sensor</p></ion-col>
<ion-col col-6 class="textRight">$ 200</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Changed Radiator</p></ion-col>
<ion-col col-6 class="textRight">$ 600</ion-col>
</ion-row>
</li>
<li>
<ion-row>
<ion-col col-6><p>Replaced Braked</p></ion-col>
<ion-col col-6 class="textRight">$ 300</ion-col>
</ion-row>
</li>
</ul>
<ul>
<li>
<ion-row>
<ion-col col-6><strong>Total</strong></ion-col>
<ion-col col-6 class="textRight"><strong>$ 1100</strong></ion-col>
</ion-row>
</li>
</ul>
</div>
</div>
</ion-content>
<ion-footer class="textCenter fm_footer">
<button class="fm_circle" (click)="add()">+</button>
<p>Add Service History</p>
</ion-footer>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ServicehistoryPage } from './servicehistory';
@NgModule({
declarations: [
ServicehistoryPage,
],
imports: [
IonicPageModule.forChild(ServicehistoryPage),
],
})
export class ServicehistoryPageModule {}
page-servicehistory {
.fm_common_wrapper{
.fm_banner{
width: 100%;
height:115px;
background: #f4f3ee;
text-align: center;
position: relative;
.fm_banner_circle{
width:115px;
height:115px;
margin:0 auto;
position: relative;
border-radius: 50%;
background:#07426a;
top:40px;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit:cover;
object-position:center;
}
}
.fm_border{
width: 100%;
height:3px;
background:url('../../assets/imgs/fm_border.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left:0px;
right:0px;
bottom:0px;
}
}
h3{
text-align: center;
color: #07426a;
font-size: 18px;
padding-top: 50px;
}
.fm_service_history{
padding: 10px;
p{
color: #767676;
font-weight: 400;
letter-spacing: 1px;
background:url('../../assets/imgs/fm_dot.png');
background-position:0px;
background-size: 13px;
background-repeat: no-repeat;
padding-left: 20px;
font-size: 17px;
}
ul{
margin:0px;
padding:0px;
width:100%;
padding-left: 15px;
li{
width:100%;
list-style: none;
color: #929292;
padding-bottom: 8px;
font-size: 17px;
&:last-child{
border-bottom:1px solid #c0c0c0;
}
p{
color: #07426a;
margin:0px;
padding:0px;
background-image: none;
letter-spacing: 0px;
}
}
}
}
hr{
border:2px solid #15b3d5;
width:80px;
margin:0 auto;
height:0px;
border-radius: 20px;
}
.fm_input_add{
width: 100px;
height: 30px;
border:2px solid #198ba6;
border-radius: 20px;
float: right;
padding-left: 10px;
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-servicehistory',
templateUrl: 'servicehistory.html',
})
export class ServicehistoryPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ServicehistoryPage');
}
back()
{
this.navCtrl.pop();
}
add(){
this.navCtrl.push('AddservicehistoryPage');
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Garage
</div>
</ion-header>
<ion-content>
<div class="shop_wrapper" *ngIf="profile" >
<div class="shop_banner_img">
<img [src]="profile.profile_pic">
<img class="border_img" src="assets/img/fm_edit_border1.png">
</div>
<div class="shop_detail">
<h4>{{profile.name}}</h4>
<rating [(ngModel)]="profile.rate"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<br>
<div class="clear"></div>
<div class="map_nav">
<div class="map_direction floatLeft">
<p>{{profile.address}}</p>
</div>
<button type="button" class="map_btn floatRight" (click)="open_map(profile.lat,profile.lng)" >Map</button>
<div class="clear"></div>
</div>
</div>
<div class="more_details">
<div class="row">
<p>About</p>
<h6>{{profile.description}}</h6>
</div>
<div class="row" *ngIf="offers">
<p>Service details :</p>
<h6><span *ngIf="offers.description!=''" >{{offers.description}}</span><span *ngIf="offers.description==''" >No Description Available</span></h6>
<p>Spare Parts :</p>
<h6>OEM-parts(Erstausrusterqualitat)</h6>
<p>Warranty on spare parts and work :</p>
<h6>24 Months</h6>
<p>Payment :</p>
<h6>Pay on site</h6>
<p>Price :</p>
<h6><span class="actual_price">€ {{offers.price}}</span><span class="final_price">€ {{offers.total_price}}</span></h6>
</div>
<div class="row" *ngIf="page=='quotes'">
<p>Service details :</p>
<h6><span *ngIf="quote_val.service_name!=''" >{{quote_val.service_name}}:including all parts and all labour according to quote</span><span *ngIf="quote_val.service_name==''" >No Description Available</span></h6>
<p>Spare Parts :</p>
<h6>OEM-parts(Erstausrusterqualitat)</h6>
<p>Warranty on spare parts and work :</p>
<h6>24 Months</h6>
<p>Payment :</p>
<h6>Pay on site</h6>
<p>Price :</p>
<h6><span class="final_price">€ {{quote_val.price}}</span></h6>
</div>
<div class="row" *ngIf="page=='fixprice'">
<p>Service details:</p>
<h6><span *ngIf="services_pg.description!=''" >{{services_pg.description}}</span><span *ngIf="services_pg.description==''" >No Description Available</span></h6>
<p>Payment:</p>
<h6>Pay on site</h6>
<p>Price:</p>
<h6>{{services_pg.price}}</h6>
</div>
<div class="row" *ngIf="selected_services && page=='location'">
<p> Our Services</p>
<h6 *ngFor="let serv of selected_services">{{serv.service}} € {{serv.price}} </h6>
</div>
<button ion-button type="button" class="login_btn theme_lblue widthFull" (click)="book_now()">Go To Booking</button>
</div>
<hr>
<div class="review_bay">
<p>RATE & REVIEW</p>
<ul *ngIf="profile.rating.length >0">
<li *ngFor="let rate_list of profile.rating">
<div class="rate_pic">
<img [src]="rate_list.profile_pic" *ngIf="rate_list.profile_pic" >
</div>
<div class="rate_detail">
<h6>{{rate_list.first_name}} {{rate_list.last_name}}</h6>
<p>{{rate_list.timestamp |date:'EE,dd.MM.yyyy'}}</p>
<p *ngIf="rate_list.service" > {{rate_list.service }}</p>
<p *ngIf="rate_list.service_name" > {{rate_list.service_name }}</p>
<rating [(ngModel)]="rate_list.rate"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)"></rating>
<h5>{{rate_list.comments}}</h5>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="no_result_found"*ngIf="profile.rating.length <=0">
<div class="no_result_icon">
<img src="assets/imgs/icon4.png">
</div>
<p>
No result found
</p>
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ShopdetailPage } from './shopdetail';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
ShopdetailPage,
],
imports: [
IonicPageModule.forChild(ShopdetailPage),
Ionic2RatingModule // Put ionic2-rating module here
],
})
export class ShopdetailPageModule {}
page-shopdetail {
.shop_wrapper{
.shop_banner_img{
width:100%;
height:250px;
position:relative;
img{
width:100%;
height:100%;
object-position:center;
object-fit:cover;
}
.border_img{
position:absolute;
bottom:0px;
left:0px;
right:0px;
width: 100%;
height: 5px;
object-fit:cover;
object-position:center;
}
}
.shop_detail{
width:100%;
background:#fbfbf9;
padding:10px;
padding-top:10px;
padding-bottom:10px;
.rating{
margin:0px;
padding: 0px;
padding-top: 10px;
li{
padding:3px !important;
}
}
h4{
margin:0px;
color:#5e5e5e;
font-weight: 400;
font-size:25px;
}
.map_nav{
width:100%;
background:url("../assets/icon/fm_loc_icon.png") !important;
background-repeat:no-repeat !important;
background-position:left !important;
background-size: 20px !important;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #fbfbf9;
}
.map_direction{
width: calc(100% - 90px);
border-left: 1px solid #929292;
padding-left: 10px;
p{
color: #929292;
margin: 0px;
padding-top: 4px;
padding-bottom: 4px;
}
}
.map_btn{
float:right;
background:#0076ba;
height:30px;
padding-right:25px;
padding-left:25px;
color:#fff;
border-radius:20px;
font-size:16px;
}
}
}
.more_details{
width:100%;
padding: 10px;
.row{
width:100%;
padding-bottom: 10px;
p{
color: #0076ba;
width:100%;
margin:0px;
padding:0px;
font-weight: 600;
font-size: 16px;
padding-bottom:4px;
}
h6{
color: #000;
width:100%;
margin:0px;
padding:0px;
padding-bottom: 8px;
}
.actual_price{
color: #929292;
font-size: 18px;
margin-right:10px;
font-weight: 400;
text-decoration:line-through;
}
.final_price{
color: #1DB100;
font-size: 18px;
font-weight: 600;
}
}
}
.review_bay{
width:100%;
padding:10px;
p{
color: #0076ba;
margin:0px;
padding:0px;
font-size: 18px;
}
ul{
padding:0px;
margin:0px;
padding-top: 15px;
li{
list-style: none;
.rate_pic{
width:70px;
height:70px;
float: left;
background: #929292;
border-radius: 50%;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.rate_detail{
width:calc(100% - 70px);
float: left;
padding-left: 15px;
h6{
margin:0px;
color: #5e5e5e;
}
p{
margin:0px;
color: #929292;
font-size: 10px;
padding-bottom: 10px;
}
h5{
margin:0px;
padding:0px;
color: #000;
font-size: 15px;
}
.rating{
padding: 0px;
padding-top: 3px;
padding-bottom: 3px;
li{
padding:2px;
}
}
}
}
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ModalController,PopoverController} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
@IonicPage()
@Component({
selector: 'page-shopdetail',
templateUrl: 'shopdetail.html',
})
export class ShopdetailPage {
user_data:any;
profile:any;
garage_id:any;
page:any;
offers:any;
selected_services:any;
services_pg:any;
quote_val:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice,public modalCtrl: ModalController,public popoverCtrl: PopoverController) {
this.garage_id = this.navParams.get('garage_id');
console.log(this.garage_id);
if(this.navParams.get('offers')){
this.offers = this.navParams.get('offers');
this.offers = this.offers.offers;
}
if(this.navParams.get('services')){
this.services_pg = this.navParams.get('services');
console.log(this.services_pg)
}
console.log("offers", this.offers);
this.page = this.navParams.get('page');
if(this.page == 'quotes')
this.quote_val = this.navParams.get('quote_val');
console.log('page' , this.page)
console.log('page' , this.quote_val)
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data=user_data
console.log(this.user_data);
}
})
this.get_profile();
this.get_selected_services();
}
ionViewDidLoad() {
console.log('ionViewDidLoad ShopdetailPage');
}
back()
{
this.navCtrl.pop();
}
get_profile(){
this.myservice.show_loader();
this.myservice.load_get('getshopDetails/id/'+this.garage_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.profile = data.result;
console.log(this.profile)
}
});
}
get_selected_services(){
this.myservice.show_loader();
this.myservice.load_get('get_selected_services/id/'+this.garage_id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.selected_services = data.result;
}
});
}
open_map(lat,lng){
var obj ={'lat' : lat, 'lng' :lng}
let modal = this.modalCtrl.create('MapPage',{'locations':obj});
modal.onDidDismiss(data => {
if(data) {
}
});
modal.present();
}
presentPopover(myEvent) {
let modal = this.modalCtrl.create('AddReview',{'garage_id':this.garage_id});
modal.onDidDismiss(data => {
if(data) {
this.get_profile();
}
});
modal.present({
ev: myEvent
});
}
book_now(){
if(this.page == 'offers')
var offers = this.navParams.get('offers');
console.log(this.profile.timing);
if(this.page == 'fixprice'){
this.navCtrl.push('OfferedFixprices',{'page':this.page,'timing':this.profile.timing,'garage_name':this.profile.name,'garage_id':this.garage_id,'services' : this.services_pg });
}else{
/* let modal = this.modalCtrl.create('OfferedPage',{'page':this.page, 'offers' :offers,'timing':this.profile.timing,'garage_name':this.profile.name,'garage_id':this.garage_id });
modal.onDidDismiss(data => {
if(data) {
console.log(data);
this.navCtrl.push('SuccessPage',{'datas':data.datas,'page' : 'offered' });
}
});
modal.present(); */
this.navCtrl.push('OfferedPage',{'page':this.page,'quote_val' : this.quote_val, 'offers' :offers,'timing':this.profile.timing,'garage_name':this.profile.name,'garage_id':this.garage_id,'services' : this.services_pg });
}
}
}
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft">
Registration
</div>
</ion-header>
<ion-content padding class="page_background">
<div class="f_login_wrapper">
<form [formGroup]="signup" (ngSubmit)="signupForm()">
<ion-list>
<ion-item>
<ion-input type="text" formControlName="first_name" placeholder="First Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('required') && signup.controls.first_name.touched">First name is required!</p>
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('pattern') && signup.controls.first_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="signup.controls.first_name.hasError('maxlength') && signup.controls.first_name.touched">Maximum firstname length is 30!</p>
</div>
<ion-item>
<ion-input type="text" formControlName="last_name" placeholder="Last Name"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('required') && signup.controls.last_name.touched">Last name is required!</p>
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('pattern') && signup.controls.last_name.touched">Only alphabets are allowed!</p>
<p class="valid-p" *ngIf="signup.controls.last_name.hasError('maxlength') && signup.controls.last_name.touched">Maximum lastname length is 30!</p>
</div>
<ion-item>
<ion-input formControlName="email" type="email" placeholder="Email Id"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.email.hasError('required') && signup.controls.email.touched">Sorry, field email is required!</p>
<p class="valid-p" *ngIf="signup.controls.email.hasError('pattern') && signup.controls.email.touched">Sorry, please enter a valid email address!</p>
</div>
<ion-item>
<ion-input formControlName="mobile" type="number" placeholder="Phone Number"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('required') && signup.controls.mobile.touched">Sorry, field Phone no is required!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('pattern') && signup.controls.mobile.touched">Sorry, please enter a valid Phone number!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('minlength') && signup.controls.mobile.touched">Sorry, minimum Phone number length is 8!</p>
<p class="valid-p" *ngIf="signup.controls.mobile.hasError('maxlength') && signup.controls.mobile.touched">Sorry, maximum Phone number length is 20!</p>
</div>
<ion-item>
<input type="text" id="address_signup" (click)="initialize()" formControlName="address" placeholder="Address">
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.address.hasError('required') && signup.controls.address.touched">Address is required!</p>
</div>
<ion-item>
<ion-input type="number" formControlName="postal_code" placeholder="Postal Code"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('required') && signup.controls.postal_code.touched">Sorry, field postal code is required!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('pattern') && signup.controls.postal_code.touched">Sorry, please enter a valid postal code!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('minlength') && signup.controls.postal_code.touched">Sorry, minimum postal code length is 4!</p>
<p class="valid-p" *ngIf="signup.controls.postal_code.hasError('maxlength') && signup.controls.postal_code.touched">Sorry, maximum postal code length is 4!</p>
</div>
<ion-item>
<input type="text" id="locality" formControlName="city" placeholder="City">
</ion-item>
<ion-item>
<ion-input type="number" formControlName="car_make" placeholder="Make of Car"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.car_make.hasError('required') && signup.controls.car_make.touched">Sorry, field is required!</p>
</div>
<ion-item>
<ion-input type="number" formControlName="car_model" placeholder="Model of Car"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.car_model.hasError('required') && signup.controls.car_model.touched">Sorry, field is required!</p>
</div>
<div class="login_wizard_head"> Add Picture Of Vehicle Paper </div>
<div class="fm_add_picture" >
<li class="fm_add_photo" (click)="uploadPicture('1')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['1']" *ngIf="profile_pic['1']" ></div></li>
<li (click)="uploadPicture('2')" ><div class="inside_image" *ngIf="profile_pic" ><img [src]="profile_pic['2']" *ngIf="profile_pic['2']" ></div></li>
</div>
<div class="bmd-field error">
<p class="valid-p" *ngIf="">Sorry, Please upload Two Vehicle Paper Images to Continue!</p>
</div>
</ion-list>
<div class="login_wizard_head">Create a password</div>
<ion-list>
<ion-item>
<ion-input type="password" formControlName="password" placeholder="Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.password.hasError('required') && signup.controls.password.touched">Sorry, field password is required!</p>
<p class="valid-p" *ngIf="signup.controls.password.hasError('minlength') && signup.controls.password.touched">Sorry, minimum password length is 6!</p>
</div>
<ion-item>
<ion-input type="password" formControlName="cpassword" placeholder="Confirm Password"></ion-input>
</ion-item>
<div class="bmd-field error">
<p class="valid-p" *ngIf="signup.controls.cpassword.hasError('required') && signup.controls.cpassword.touched">Sorry, field Confirm password is required!</p>
<p class="valid-p" *ngIf="signup.controls.cpassword.invalid && signup.controls.cpassword.touched">Password Mismatch!</p>
<p class="valid-p" *ngIf="signup.controls.cpassword.hasError('minlength') && signup.controls.cpassword.touched">Sorry, minimum Confirm password length is 6!</p>
</div>
</ion-list>
<ion-row radio-group class="p0 check_div">
<ion-checkbox formControlName="terms" class="floatLeft"></ion-checkbox>
<ion-label class="floatLeft">I Accept <a (click)="agree_terms('terms')" > T & C </a> and <a (click)="agree_terms('privacy')" >Privacy Policy </a></ion-label>
<div class="clear"></div>
</ion-row>
<div class="fma-field error">
<p class="valid-p" *ngIf="signup.controls.terms.invalid ">Sorry, field is required!</p>
</div>
<button class="login_btn theme_lblue widthFull" ion-button full>Sign up</button>
</form>
</div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignupPage } from './signup';
@NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage),
],
})
export class SignupPageModule {}
page-signup {
.page_background{
background:url('../../assets/imgs/fm_login_bg.png');
background-size: cover;
background-position: center;
}
.f_login_wrapper{
width: 100%;
h4{
color: #07426a;
font-weight: 600;
letter-spacing: 1px;
text-align: left;
font-size: 18px;
text-transform: uppercase;
}
.list{
.item{
padding:0px;
background: transparent;
border:none !important;
min-height: 40px !important;
margin-bottom:20px;
box-shadow: none !important;
.item-inner{
border:2px solid #929292 !important;
height: 10px !important;
border-radius:0px;
box-shadow: none !important;
.input{
.text-input{
text-align:left !important;
color: #989898;
font-size: 18px;
font-weight: 300;
padding-left: 25px;
margin:0px;
}
}
}
}
.item-input-has-focus{
border:none !important;
}
.input-has-focus{
border:none !important;
}
input{
width:100%;
height:100%;
background:transparent;
border:none;
padding-left:25px;
color: #989898;
font-size: 18px;
font-weight: 300;
}
}
.fm_login_btn{
color: #fff;
background: #1d527f;
font-weight: 300;
height:35px;
border-radius: 30px;
font-size:18px;
}
.fm_signup_btn{
color: #1d527f;
background:transparent;
font-weight: 500;
height:35px;
border-radius: 30px;
font-size:18px;
text-transform: capitalize;
border:2px solid #f6921e;
}
p{
color: #656565;
font-size: 16px;
text-align: center;
}
.fm_spacer{
height:40px;
width:100%;
}
}
.checkbox {
margin-right:9px !important;
}
.label {
color: #a0a0a0 !important;
font-size: 18px !important;
font-weight: 400;
margin: 0px;
}
.checkbox-md .checkbox-checked{
background: #1d527f !important;
border:1px solid #1d527f !important;
}
.checkbox-icon{
width:20px !important;
height:20px !important;
}
.checkbox-checked .checkbox-inner{
left:6px !important;
top:3px !important;
}
.fm_add_picture{
width:100%;text-align:center;padding-top:20px;padding-bottom:20px;
}
.fm_add_picture li{
display:inline-block;width:70px !important;height:70px;border-radius:50%;
border:1px solid #1c8aa4;margin:5px;background:url("../assets/icon/fm_add.png");
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 30px !important;
}
.fm_add_picture li img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:50%;
}
.fm_add_photo{
background:url("../assets/icon/fm_photo.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,Events, ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
declare var require: any;
declare var google: any;
@IonicPage()
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
services:any;
location:any;
citie: any;
coun: any;
signup: any;
terms_service: any;
successs: any;
address: any;
componentForm: any;
device_id:any;
image_needed:boolean=false;
base64Image= [];
profile_pic= [];
constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage, private myservice: Myservice, private formBuilder: FormBuilder, public events: Events,public modalCtrl: ModalController,private transfer: FileTransfer, private file: File,private imagePicker: ImagePicker) {
this.get_terms()
this.storage.get('get_deviceId').then((deviceId) => {
console.log(deviceId);
if(deviceId){
this.device_id = deviceId.userId
}
})
this.signup = this.formBuilder.group({
email: ['', Validators.compose([Validators.pattern("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$"), Validators.required])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
first_name: ['', Validators.compose([Validators.maxLength(30), Validators.required])],
last_name: ['', Validators.compose([Validators.maxLength(30), Validators.required])],
city: ['',],
postal_code: ['',Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(4)])],
address: ['', Validators.required],
cpassword: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
mobile: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(20)])],
car_model: ['', Validators.required],
car_make: ['', Validators.required],
terms: [ 'false',Validators.requiredTrue],
}, {
validator: this.Match('password', 'cpassword')
});
this.componentForm = {
locality: 'long_name'
};
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPg');
}
back(){
this.navCtrl.pop();
}
otp()
{
this.navCtrl.push('OtpPag');
}
signupForm(){
if(this.signup.valid)
{
console.log(this.base64Image.length);
if(this.base64Image.length <1){
this.image_needed =false;
this.myservice.show_loader();
this.signup.controls['city'].setValue(this.citie);
this.signup.controls['address'].setValue(this.address);
var val = Object.assign({}, this.signup.value , {'device_id' :this.device_id})
var obj = Object.assign(val, this.location);
this.load_post_multifile(this.base64Image, this.signup.value, "signup");
/*this.myservice.load_post(this.signup.value, "signup").subscribe(response => {
this.myservice.hide_loader();
console.log(response);
if(response.status == "success") {
//this.myservice.show_alert("success!", response.message);
//this.navCtrl.push('LoginPage');
this.storage.set('user_data',response.data).then(()=>{
this.myservice.hide_loader();
this.storage.get('user_data').then((user_data) => {
this.events.publish('user:update_profile', user_data);
this.navCtrl.setRoot('TabsPage');
})
});
}
else {
this.image_needed =true;
}
}) */
}else
this.image_needed =true;
}else{ // Form is not valid
this.markFormGroupTouched(this.signup); // function to mark fields as touched
}
}
load_post_multifile(imageURI, post_data, fn_name) {
this.myservice.show_loader();
var i;
for (i = 1; i < imageURI.length; i++) {
if(imageURI[i]!=undefined){
console.log("imageURI" ,imageURI[i]);
let ft = this.transfer.create();
let filename = imageURI[i].substr(imageURI[i].lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
ft.upload(imageURI[i], this.myservice.webservice_url+fn_name, options, false)
.then((result: any) => {
this.myservice.hide_loader();
console.log('result ' + i, result);
this.successs=true;
console.log('imageURIlength ',imageURI.length);
console.log('i ',i);
this.storage.set('user_data',result.data).then(()=>{
this.storage.get('user_data').then((user_data) => {
this.events.publish('user:update_profile', user_data);
this.navCtrl.setRoot('TabsPage');
})
});
}).catch((error: any) => {
this.myservice.hide_loader();
this.successs=false;
this.myservice.show_alert("Error!", 'No garages found');
});
}
}
console.log(this.successs);
//if(i == imageURI.length)
//this.navCtrl.push('SuccessPage',{'page':'car_details'});
}
emailValidator(control: FormControl): {[s: string]: boolean} {
if (!(control.value.toLowerCase().match('^[a-z0-9.]+( \ [_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)\\.(\.[a-z0-9-]{1,15})$'))) {
return {invalidEmail: true};
}
}
Match(firstControlName, secondControlName) {
return (AC: AbstractControl) => {
let firstControlValue = AC.get(firstControlName).value; // to get value in input tag
let secondControlValue = AC.get(secondControlName).value; // to get value in input tag
if (firstControlValue != secondControlValue) {
AC.get(secondControlName).setErrors({mismatch: true});
console.log(false);
} else {
console.log(true);
return null
}
};
}
initialize() {
console.log("initialize")
var addressType='address_signup';
var input = document.getElementById('address_signup');
/* var options = {
types: ['(cities)']
}; */
var autocomplete = new google.maps.places.Autocomplete(input);
let thiss = this;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place.address_components);
for (var i = 0; i < place.address_components.length; i++) {
addressType = place.address_components[i].types[0];
console.log(addressType);
if (thiss.componentForm[addressType]) {
console.log(thiss.componentForm[addressType]);
var val = place.address_components[i][thiss.componentForm[addressType]];
// document.getElementById(addressType).value = val;
console.log(val);
(document.getElementById(addressType) as HTMLInputElement).value= val;
if(addressType=='locality'){ thiss.citie = place.address_components[i][thiss.componentForm['locality']]; }
}
}
thiss.address = place.formatted_address;
// thiss.signup.controls['address_signup'].setValue(place.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
/*
thiss.address = place.formatted_address;
console.log(placeA.formatted_address);
var latLong = autocomplete.getPlace().geometry.location;
var js=JSON.stringify(latLong);
var par=JSON.parse(js);
thiss.location = {lat : par.lat, lng : par.lng};
*/
//document.getElementById('driver_lat').value=par.lat;
//document.getElementById('driver_lng').value=par.lng;
// document.getElementById('pickup_lat').value=par.lat;
// document.getElementById('pickup_lng').value=par.lng;
});
}
private markFormGroupTouched(formGroup: FormGroup) {
(<any>Object).values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control.controls) {
control.controls.forEach(c => this.markFormGroupTouched(c));
}
});
}
agree_terms(pg){
let termsModal = this.modalCtrl.create('TermsPage',{'data' :this.terms_service,'page' : pg} );
termsModal.present();
}
uploadPicture(pic){
console.log(pic);
var options ={ maximumImagesCount:1,
width:400,
height: 400,
quality: 100
}
this.imagePicker.getPictures(options).then((results) => {
console.log(results.length);
console.log(results[0]);
if(results){
this.base64Image[pic]= results[0];
this.profile_pic[pic] = results[0];
}
}, (err) => { });
console.log(this.base64Image);
}
get_terms(){
//this.myservice.show_loader();
this.myservice.load_get('get_terms').subscribe(data => {
//this.myservice.hide_loader();
if(data.status == 'success'){
console.log(data.result);
this.terms_service = data.result
}
});
}
}
<ion-header class="nav_header theme_light">
<!-- <button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button> -->
<div class="clear"></div>
</ion-header>
<ion-content class="fm_success_bg" padding>
<div class="fm_success_wrapper" [hidden]="page=='offered'">
<div class="fm_success_tick">
<img src="assets/icon/fm_tick.png">
<p>Awesome !</p>
<hr>
</div>
<div class="fm_success_statement">
Please give up to 48 hrs for Shops to <br>
respond back with an accurate quote to<br> your inbox
</div>
</div>
<div class="fm_success_wrapper" [hidden]="page=='car_details'" >
<div class="fm_success_tick">
<img src="assets/icon/fm_tick.png">
<p>Booking Success!</p>
<hr>
</div>
<div class="fm_success_statement" *ngIf="book_vals" >
You have scheduled an appointment with {{book_vals.garage_name}}
<br>
<ion-grid>
<ion-row>
<ion-col col-6 class="textLeft">Booking Date</ion-col>
<ion-col col-6 class="textRight"> {{book_vals.bookvals.book_date|date : 'EE,dd.MM.yyyy'}}</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="textLeft">Booking Time</ion-col>
<ion-col col-6 class="textRight"> {{book_vals.bookvals.book_time}}</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="textLeft">Service </ion-col>
<ion-col col-6 class="textRight"> {{book_vals.bookvals.service}}</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="textLeft">Service Charge </ion-col>
<ion-col col-6 class="textRight"> {{book_vals.bookvals.price}}</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<p (click)="goto_home()" class="textCenter">Go To Home</p>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SuccessPage } from './success';
@NgModule({
declarations: [
SuccessPage,
],
imports: [
IonicPageModule.forChild(SuccessPage),
],
})
export class SuccessPageModule {}
page-success {
.fm_success_bg{background:url("../../assets/img/fm_success_bg.png");background-repeat:no-repeat !important;background-position:center !important;background-repeat:no-repeat;background-size:cover !important;}
.fm_success_wrapper{width:100%;}
.fm_success_tick{width:30%;margin:0 auto;margin-top:20%;}
.fm_success_tick p{text-align:center;color:#616161;font-size:19px;font-weight: 300;}
.fm_success_tick hr{border:1px solid #083352;width:70px;height:0px;border-radius:20px;}
.fm_success_statement{width:100%;text-align:center;color:#8e8e8e;font-size:16px;padding-top:25px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, Events } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-success',
templateUrl: 'success.html',
})
export class SuccessPage {
book_vals:any;
page:any;
constructor(platform: Platform,public navCtrl: NavController, public navParams: NavParams,public events: Events) {
let backAction = platform.registerBackButtonAction(() => {
console.log("backPressed success page");
this.navCtrl.push('TabsPage');
backAction();
},2)
this.book_vals = this.navParams.get('datas');
console.log(this.book_vals);
this.page = this.navParams.get('page');
}
ionViewDidLoad() {
console.log('ionViewDidLoad SuccessPage');
}
back()
{
this.navCtrl.pop();
}
goto_home()
{
this.events.publish('user:pool_requests', '');
this.navCtrl.push('TabsPage');
}
}
<ion-fab center bottom>
<button ion-fab class="theme_dark"><ion-icon name="settings"></ion-icon></button>
<ion-fab-list side="top">
<div class="fm_list_pop_container">
<ul *ngIf="services_offered">
<!--- <li (click)="open_page('TyrePage')">
<div class="floatLeft"><img src="assets/imgs/fm_tyre.png"></div>
<div class="floatLeft"><p>Tyres</p>
</div>
<div class="clear"></div>
</li>
<li (click)="open_page('BrakePage')">
<div class="floatLeft"><img src="assets/imgs/fm_brake.png"></div>
<div class="floatLeft">
<p>Brakes</p>
</div>
<div class="clear"></div>
</li> -->
<li (click)="open_page('CatagoryPage', services_offered[0].id)">
<div class="floatLeft"><img src="assets/imgs/fm_mechanical.png"></div>
<div class="floatLeft"><p>{{services_offered[0].service}}</p></div>
<div class="clear"></div>
</li>
<li (click)="open_page('CatagoryBody',services_offered[1].id)">
<div class="floatLeft"><img src="assets/imgs/fm_body.png"></div>
<div class="floatLeft"><p>{{services_offered[1].service}}</p></div>
<div class="clear"></div>
</li>
<li (click)="open_page('CatagoryWash',services_offered[2].id)">
<div class="floatLeft"><img src="assets/imgs/fm_wash.png"></div>
<div class="floatLeft"><p>{{services_offered[2].service}}</p></div>
<div class="clear"></div>
</li>
<!--- <li (click)="open_page('OilPage')">
<div class="floatLeft"><img src="assets/imgs/fm_oil1.png"></div>
<div class="floatLeft"><p>Oil Change</p></div>
<div class="clear"></div>
</li> -->
</ul>
<div class="arrow-down"></div>
</div>
</ion-fab-list>
</ion-fab>
<ion-tabs color="headColor" selectedIndex="2">
<ion-tab [root]="tab2" tabTitle="" tabIcon="md-home"></ion-tab>
<ion-tab [root]="tab1" tabTitle="" tabIcon="md-map"></ion-tab>
<ion-tab [root]="tab3" tabTitle="" tabIcon=""></ion-tab>
<ion-tab [root]="tab4" tabTitle="" tabIcon="md-notifications" [tabBadge]="notify" tabBadgeStyle="danger">
<div class="notification">
</div>
</ion-tab>
<ion-tab [root]="tab5" tabTitle="" tabIcon="md-person"></ion-tab>
</ion-tabs>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';
@NgModule({
declarations: [
TabsPage,
],
imports: [
IonicPageModule.forChild(TabsPage),
],
})
export class TabsPageModule {}
page-tabs {
.fab-list-active{
left:0px;
right:0px;
}
.fm_list_pop_container{
width: 200px !important;
background: #083352;
border-radius: 30px;
ul{
margin:0px;
padding:7px;
padding-top: 12px;
padding-bottom: 0px;
li{
color: #cdd0d0;
list-style: none;
padding:7px;
padding-left: 20px;
padding-right: 20px;
div{
p{
padding:10px;
padding-left: 20px;
margin:0px;
}
img{
width:30px;
}
}
}
}
.arrow-down{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #083352;
margin: 0 auto;
position: relative;
top: 8px;
}
}
.ion-md-settings{width:50px;height:50px;background:url('../assets/imgs/fm_settings.png') !important;background-position: center !important;background-size:38px !important;background-repeat: no-repeat !important;}
.ion-md-settings:before{content:none;}
.ion-md-close{width:55px;height:54px;background:url('../assets/imgs/fm_close.png') !important;background-position: center !important;background-size:38px !important;background-repeat: no-repeat !important;}
.ion-md-close:before{content:none;}
.ion-ios-settings{width:50px;height:50px;background:url('../assets/imgs/fm_settings.png') !important;background-position: center !important;background-size:38px !important;background-repeat: no-repeat !important;}
.ion-ios-settings:before{content:none;}
.ion-ios-close{width:55px;height:54px;background:url('../assets/imgs/fm_close.png') !important;background-position: center !important;background-size:38px !important;background-repeat: no-repeat !important;}
.ion-ios-close:before{content:none;}
.alert-head{display:block !important;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,Events,Platform,ModalController } from 'ionic-angular';
import { FabContainer } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import {Myservice} from '../../providers/myservice';
import { Badge } from '@ionic-native/badge';
@IonicPage()
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
user_data:any;
notify:any;
services_offered:any;
tab1: string = "LocationPage";
tab2: string = "TabsPage";
tab3: string = "HomePage";
tab4: string = "NotificationPage";
tab5: string = "AddcarPage";
constructor(platform: Platform,public navCtrl: NavController, public navParams: NavParams, public storage: Storage, private myservice: Myservice,public events:Events,private badge: Badge,public modalCtrl: ModalController) {
/* let backAction = platform.registerBackButtonAction(() => {
console.log("backPressed tabs page");
platform.exitApp();
backAction();
},2) */
this.storage.get('user_data').then((user_data) => {
console.log(user_data);
if(user_data){
this.user_data= user_data;
console.log("noti");
this.get_notifications();
console.log("in tabs",this.notify);
events.subscribe('user:notifications', userdetails => {
this.get_notifications();
});
}
})
this.get_services();
}
ionViewDidLoad() {
console.log('ionViewDidLoad TabsPage');
}
open_page(page,id){
let profileModal = this.modalCtrl.create(page, {'service_id': id});
profileModal.present();
//this.navCtrl.push(page,{'service_id': id});
}
get_services(){
this.myservice.show_loader();
this.myservice.load_get('getServices').subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
this.services_offered = data.data;
console.log("tabs")
console.log(this.services_offered)
}
});
}
get_notifications(){
console.log("noti called")
this.myservice.show_loader();
this.myservice.load_get('getNotifications/id/'+this.user_data.id).subscribe(data => {
this.myservice.hide_loader();
if(data.status == 'success'){
console.log(data.data.count)
this.notify = data.data.count
this.badge.set(this.notify);
console.log("tabs")
console.log("vl",this.notify)
}
});
}
}
<!--
Generated template for the TermsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header class="nav_header theme_primary">
<button class="nav_btn floatLeft" ion-button (click)="back()">
<ion-icon name="ios-arrow-back"></ion-icon>
</button>
<div class="nav_header_title floatLeft" *ngIf="title" >
{{title}}
</div>
</ion-header>
<ion-content padding>
<div [innerHTML]="htmlStr"></div>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TermsPage } from './terms';
@NgModule({
declarations: [
TermsPage,
],
imports: [
IonicPageModule.forChild(TermsPage),
],
})
export class TermsPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the TermsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-terms',
templateUrl: 'terms.html',
})
export class TermsPage {
htmlStr: string;
title: any;
data: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.data = this.navParams.get('data')
var page = this.navParams.get('page')
console.log(this.data)
if(page == 'terms'){
this.title = 'T&C'
this.htmlStr= this.data.terms_conditions;
}
else if(page == 'privacy'){
this.title = 'Privacy Policy'
this.htmlStr= this.data.privacy_policy;
}
else if(page == 'impressum'){
this.title = 'Impressum'
this.htmlStr= this.data.impressum;
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad TermsPag');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car"style="left:90%;"></div>
</div>
</div>
<div class="fm_editprofile_banner">
<div class="fm_editprofie_picture2">
<img src="assets/icon/fm_tint.png" style="width:70px;">
</div>
</div>
<div class="fm_editprofile_details" style="padding-top:0px;">
<h6>FIND WINDOW TINT SERVICE FOR</h6>
<h4>NICK NAME</h4>
<hr>
<h6><span>or</span></h6>
<br>
<div class="fm_edit_button_bay">
<button ion-button class="fm_edit_skip_btn">Select new car</button>
</div>
</div>
<div class="fm_body_need" style="padding-top:55px;">
<h5>Take a picture of your car</h5>
<hr>
<div class="fm_add_picture">
<li class="fm_sidemenu_bg"><span><img src="assets/icon/fm_photo.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
</div>
<h5>Add the color or wrap details</h5>
<hr>
<textarea class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div>
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" (click)="success()">Send<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TintPage } from './tint';
@NgModule({
declarations: [
TintPage,
],
imports: [
IonicPageModule.forChild(TintPage),
],
})
export class TintPageModule {}
page-tint {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../../assets/img/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_parts_tab{width:100%;}
.fm_parts_tab ul{width:100%;margin:0px;padding:0px;border:1px solid #b7b7b7;border-radius:20px;}
.fm_parts_tab ul li{display:inline-block;width:50%;border-radius:20px;height:40px;float:left;text-align:center;font-size:18px;padding:8px;color:#8f8f8f;}
.fm_parts_tab ul .active{color:#fff;background:#1c8aa4;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.fm_body_next span img{width:10px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;}
.fm_add_picture li span{color:#1c8aa4;}
.fm_add_picture li span img{width:auto;height:40px;position: relative;top: 14px;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-tint',
templateUrl: 'tint.html',
})
export class TintPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TintPage');
}
success()
{
this.navCtrl.push('SuccessPage');
}
back(){
this.navCtrl.pop();
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
</ion-header>
<ion-content>
<div class="fm_common_wrapper">
<div class="fm_banner">
<img src="assets/imgs/fm_tyre_img.png">
</div>
<h6>FIND TYRE SERVICE FOR</h6>
<h3>NICK NAME</h3>
<hr>
<br>
<p class="textCenter">or</p>
<br>
<div class="textCenter">
<button class="fm_skip">Select new car</button>
</div>
<br>
<br>
<div class="fm_tab_container">
<div class="fm_tab_content">
<ion-list radio-group>
<ion-item>
<ion-select>
<ion-option value="1" selected="true">Tyre Dimension</ion-option>
</ion-select>
</ion-item>
<br>
<p class="textCenter">or</p>
<br>
<h5 class="textCenter">Enter Custom size</h5>
<br>
<ion-grid class="p0">
<ion-row>
<ion-col col-4 class="">
<input class="fm_input_add" placeholder="0000" type="number">
</ion-col>
<ion-col col-4 class="">
<input class="fm_input_add" placeholder="0000" type="number">
</ion-col>
<ion-col col-4 class="">
<input class="fm_input_add" placeholder="0000" type="number">
</ion-col>
</ion-row>
</ion-grid>
<br>
<h5>What do you need done?</h5>
<ion-item>
<ion-radio checked="true" value="go"></ion-radio>
<ion-label>Winter Tyres</ion-label>
</ion-item>
<ion-item>
<ion-radio value="rust"></ion-radio>
<ion-label>All season tyres</ion-label>
</ion-item>
<ion-item>
<ion-radio value="python" ></ion-radio>
<ion-label>Performance/ offroad </ion-label>
</ion-item>
<ion-item>
<ion-radio value="python" ></ion-radio>
<ion-label>Tyre Rotation/ Balance </ion-label>
</ion-item>
</ion-list>
<hr>
<br>
<ion-list>
<br>
<ion-item>
<ion-select>
<ion-option value="1" selected="true">Within Km</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-input type="Enter City" placeholder="Enter City"></ion-input>
</ion-item>
</ion-list>
<br>
</div>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TyrePage } from './tyre';
@NgModule({
declarations: [
TyrePage,
],
imports: [
IonicPageModule.forChild(TyrePage),
],
})
export class TyrePageModule {}
page-tyre {
.fm_common_wrapper{
.fm_banner{
width: 100%;
height:115px;
background: #f4f3ee;
text-align: center;
position: relative;
img{
width:160px;
}
}
}
h3{
text-align: center;
color: #07426a;
font-size: 18px;
margin-top:0px;
padding-top: 5px;
}
h6{
margin:0px;
padding:0px;
color: #777777;
font-size: 15px;
padding-top: 50px;
text-align: center;
font-weight: 400;
}
hr{
border:2px solid #15b3d5;
width:60px;
margin:0 auto;
height:0px;
border-radius: 20px;
}
p{
margin:0px;
padding:0px;
color: #7b7b7b;
font-weight: 600;
font-size: 18px;
}
.fm_skip{
width: 140px;
height:35px;
border-radius: 20px;
background: #050505;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
color: #cecece;
}
.fm_tab_container{
width: 90%;
margin:0 auto;
.fm_tab_header{
ul{
padding:0px;
margin:0px;
border:1px solid #b7b7b7;
height:35px;
border-radius: 20px;
li{
width:50%;
float: left;
list-style: none;
text-align: center;
color: #8f8f8f;
font-weight: 400;
height: 100%;
font-size: 16px;
padding: 5px;
}
.active{
background: #1c8aa4;
border-radius: 20px;
color: #fff;
}
}
}
.fm_tab_content{
width:100%;
padding-top: 20px;
h5{
color: #767676;
text-align: left;
margin:0px;
font-weight: 400;
font-size:16px;
padding-bottom: 15px;
}
.item{
min-height: 0px !important;
}
.radio-checked {
border-color: #15b3d5 !important;
.label{
color: #979797 !important;
}
}
.radio-inner{
background: #07426a !important;
}
.label{
margin:0px !important;
font-weight: 400;
color: #767676 !important;
font-size: 14px;
}
.select{
min-width: 100%;
border-bottom:1px solid #b7b7b7;
padding: 0px;
height: 35px;
color: #7b7b7b;
font-weight: 300;
.select-text{
padding-top: 5px;
padding-bottom:5px;
}
.select-icon{
width:30px;
height:30px;
background:url('../../assets/imgs/fm_drop_down_circle.png');
background-repeat: no-repeat;
background-size: 25px;
.select-icon-inner{
display: none;
}
}
}
}
}
.fm_input_add{
width: 100%;
height: 30px;
border:2px solid #198ba6;
border-radius: 20px;
text-align: center;
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-tyre',
templateUrl: 'tyre.html',
})
export class TyrePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TyrePage');
}
back()
{
this.navCtrl.pop();
}
}
<!--
Generated template for the WashPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>wash</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { WashPage } from './wash';
@NgModule({
declarations: [
WashPage,
],
imports: [
IonicPageModule.forChild(WashPage),
],
})
export class WashPageModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the WashPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-wash',
templateUrl: 'wash.html',
})
export class WashPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad WashPage');
}
}
<ion-header class="nav_header theme_light">
<button class="nav_btn floatLeft fm_back" ion-button (click)="back()">
</button>
<div class="nav_header_title floatLeft">
<img src="assets/imgs/fm_logo.png">
</div>
<button class="nav_btn floatRight fm_filter" ion-button>
</button>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="fm_wrapper">
<div class="fm_status_outter">
<div class="fm_status_progress_bar">
<div class="fm_status_car"style="left:90%;"></div>
</div>
</div>
<div class="fm_editprofile_banner fm_transparent_bg">
<div class="fm_editprofie_picture2">
<img src="assets/imgs/fm_wrap.png">
</div>
</div>
<div class="fm_editprofile_details" style="padding-top:0px;">
<h6>FIND WRAP SERVICE FOR</h6>
<h4>NICK NAME</h4>
<hr>
<h6><span>or</span></h6>
<br>
<div class="fm_edit_button_bay">
<button ion-button class="fm_edit_skip_btn">Select new car</button>
</div>
</div>
<div class="fm_body_need" style="padding-top:55px;">
<h5>Take a picture of your car</h5>
<hr>
<div class="fm_add_picture">
<li class="fm_sidemenu_bg"><span><img src="assets/icon/fm_photo.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
<li><span><img src="assets/icon/fm_add.png"></span></li>
</div>
<h5>Add the color or wrap details</h5>
<hr>
<textarea class="fm_body_need_textarea" placeholder="Type here" rows="4">
</textarea>
</div>
<div class="fm_editprofile_details1">
<div class="fm_edit_row fm_float_left fm_range">
<select class="fm_edit_select">
<option>Km Range</option>
</select>
</div>
<h6 class="fm_float_left fm_or"><span>or</span></h6>
<div class="fm_edit_row fm_float_right fm_city">
<input class="fm_edit_input" placeholder="Enter City">
</div>
<div class="fm_clear"></div>
</div>
<div class="fm_bottom_btn_bay">
<button class="fm_bottom_nxt_btn" (click)="tint()">Send<span><img src="assets/icon/fm_blue_arrow.png"></span></button>
</div>
</div>
</ion-content>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { WrapPage } from './wrap';
@NgModule({
declarations: [
WrapPage,
],
imports: [
IonicPageModule.forChild(WrapPage),
],
})
export class WrapPageModule {}
page-wrap {
.fm_wrapper{margin-bottom: 150px;}
.fm_status_progress_bar{height:30px;width:100%;background:url("../../assets/imgs/fm_progressbar.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:relative;}
.fm_status_car{width:35px;height:20px;background:url("../../assets/imgs/fm_progress_car.png");background-repeat:no-repeat !important;background-position:center !important;background-size: contain;position:absolute;left:0px;top:4px;}
.fm_status_outter{padding:10px;background:#f4f3ee;position:fixed;width:100%;top:45px;z-index:99;}
.fm_body_work_list{width:100%;background:#f4f3ee;padding-top:55px;}
.fm_body_work_list ul{margin:0px;padding:10px;}
.fm_body_work_list ul li{list-style:none;list-style:none;background:url("../../assets/icon/fm_go1.png");background-repeat:no-repeat !important;background-position:right 15px top 30px !important;padding-top:10px;padding-bottom:10px;padding-right:50px;background-size: 10px;padding-left:10px;}
.fm_body_work_list ul li img{width:60px;float:left;}
.fm_body_work_list ul li p{float:left;color:#767676;font-size: 16px;padding-left: 20px;}
.fm_body_work_list ul li span{float:right;}
.fm_body_work_list ul li span img{width:25px;position:relative;top:14px;}
.fm_body_need{width:100%;padding-left:30px;padding-right:30px;}
.fm_body_need h5{color:#07426a;text-align:center;font-weight:400;}
.fm_body_need hr{border:2px solid #449db2;height:0px;border-radius:20px;width:50px;}
.fm_body_need_textarea{width:100%;border:1px solid #9f9f9f;text-align:center;color:#9f9f9f;padding-top:20px;margin-top:10px;}
.fm_bottom_btn_bay{width:100%;padding:10px;text-align:center;}
.fm_bottom_nxt_btn{height:35px;border-radius:20px;background:#343434;color:#fff;width:150px;font-size:16px;}
.fm_bottom_nxt_btn span{width:20px;position:relative;padding-left:10px;}
.fm_bottom_nxt_btn span img{width: 15px;}
.fm_editprofile_wrapper{width:100%;padding-bottom:80px;}
.fm_editprofile_banner{width:100%;text-align:center;background:#f4f3ee;height:130px;position:relative;}
.fm_editprofie_picture{width:150px;height:150px;border-radius:50%;margin:0 auto;position: relative;top:50px;}
.fm_editprofie_picture1{width:150px;height:170px;margin:0 auto;position: relative;top:25px;}
.fm_editprofie_picture2{width:150px;height:100px;margin:0 auto;position: relative;top:20px;}
.fm_editprofie_picture2 img{width:120px;height:auto;margin: 0 auto;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture1 img{width:100%;height:100%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofie_picture img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;z-index:9 !important;}
.fm_editprofile_banner img{width:100%;position:absolute;left:0px;right:0px;bottom:0px;z-index:8;}
.fm_editprofile_details{width:100%;padding-top:75px;padding-left:20px;padding-right:20px;}
.fm_editprofile_details h4{text-align:center;color:#07426a;}
.fm_editprofile_details hr{border:2px solid #15b3d5;border-radius:8px;height:0px;width:80px;margin:0 auto;}
.fm_edit_row{width:100%;}
.fm_edit_select{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;background:url("../assets/icon/fm_select_dwn.png") !important;background-position:right !important;background-repeat:no-repeat !important;background-size:35px !important;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_editprofile_details h5{color:#777777;text-align:center;font-weight: 300;}
.fm_edit_input{width:100%;height:40px;border:none;border-bottom:1px solid #b7b7b7;-webkit-appearance: none;-moz-appearance: none;color:#7b7b7b;font-size: 18px;font-weight:300;margin-bottom: 20px;}
.fm_row_child1{width:60%;float:left;}
.fm_row_child2{width:40%;float:right;}
.fm_row_child1 p{color:#7b7b7b;font-size: 18px;font-weight:300;margin:0px;}
.fm_row_child2{}
.fm_edit_km{width:100%;height:30px;border:1px solid #15b3d5;border-radius:20px;margin-bottom:10px;}
.fm_edit_button_bay{width:100%;text-align:center;}
.fm_edit_skip_btn{border-radius:20px;height:40px;color:#fff;background:#050505;margin-top:10px;padding-left:30px;padding-right:30px;text-transform:capitalize;font-size:18px;}
.fm_body_bottom_btn_bay{width:100%;text-align:center;margin-top:80px;margin-bottom:150px;}
.fm_body_bottom_btn{border-radius:20px;height:30px;width:100px;margin:5px;}
.fm_body_skip{border:1px solid #15b3d5;color:#15b3d5;background:transparent;height:30px;padding-left:10px;padding-right:10px;}
.fm_body_next{background:#343434;color:#fff;height:30px;padding-left:10px;padding-right:10px;background:#343434;}
.fm_body_next span{padding-left:10px;}
.fm_body_next span img{width:10px;}
.fm_add_picture{width:100%;text-align:center;padding-top:20px;padding-bottom:20px;}
.fm_add_picture li{display:inline-block;width:70px !important;height:70px;border-radius:50%;border:1px solid #1c8aa4;margin:5px;}
.fm_add_picture li span{color:#1c8aa4;}
.fm_add_picture li span img{width:auto;height:40px;position: relative;top: 14px;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_editprofile_details h6{text-align:center;color:#5f5f5f;margin:0px;position: relative;top: 10px;}
.fm_editprofile_details h6 span{color:#919191;font-weight:700;}
.fm_tire_size{width:100%;}
.fm_tire_size ul {margin:0px;padding:0px;text-align:center;}
.fm_tire_size ul li{display:inline-block;}
.fm_tire_size_input{width:100px;border:1px solid #198ba6;border-radius:20px;height:35px;padding-left:10px;padding-right:10px;margin:10px;text-align:center; font-size: 18px;}
.fm_editprofile_details1{width:100%;padding-left:30px;padding-right:30px;padding-top:30px;}
.fm_tire_selection{width:100%;}
.fm_tire_selection ul{margin:0px;padding:0px;padding-top: 10px;}
.fm_tire_selection ul li{width:100%;list-style:none;padding-top: 10px;}
.fm_tire_selection h4{margin:0px;padding:0px;color:#767676;font-weight:400;font-size:18px;}
.fm_tire_selection ul li span{float:left;}
.fm_tire_selection ul li span img{width:25px;height:25px;margin-left:10px;margin-right:10px;}
.fm_tire_selection ul li p{float:left;color:#767676;font-size: 18px;padding:0px;margin:0px;}
.fm_editprofile_details1 h6{text-align:center !important;}
.fm_parts_tab{width:100%;}
.fm_parts_tab ul{width:100%;margin:0px;padding:0px;border:1px solid #b7b7b7;border-radius:20px;}
.fm_parts_tab ul li{display:inline-block;width:50%;border-radius:20px;height:40px;float:left;text-align:center;font-size:18px;padding:8px;color:#8f8f8f;}
.fm_parts_tab ul .active{color:#fff;background:#1c8aa4;}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-wrap',
templateUrl: 'wrap.html',
})
export class WrapPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad WrapPage');
}
back()
{
this.navCtrl.pop();
}
tint()
{
this.navCtrl.push('TintPage');
}
}
import { Injectable , NgZone, ViewChild} from '@angular/core';
import { NavParams } from 'ionic-angular';
import { Content } from 'ionic-angular';
import { Storage } from '@ionic/storage';
declare var apiRTC: any;
@Injectable()
export class Chatservice {
@ViewChild(Content) content: Content;
webRTCClient;
myCallId;
reg_data:any;
imClient:any;
allMessages = {messages : '',doctor : ''};
txt_msg:any;
patientId:any;
srcId:any;
conv_id:string;
convHistory=[];
patient_conv_id= [];
convhis= [];
public ionScroll;
obj={};
constructor(private zone: NgZone,public storage:Storage) {
this.storage.get('reg_data').then((reg_data) => {
this.reg_data=reg_data;
apiRTC.jsLoaded = false;
this.srcId=this.reg_data.id+12;
this.InitializeApiRTC();
})
}
InitializeApiRTC() {
//apiRTC initialization
apiRTC.init({
apiKey : "819abef1fde1c833e0601ec6dd4a8226",
apiCCId : this.srcId,
onReady: (e) => {
this.sessionReadyHandler(e);
}
});
}
sessionReadyHandler(e){
this.imClient = apiRTC.session.createIMClient('im68568846015');
this.myCallId = apiRTC.session.apiCCId;
console.log('sessionReady');
apiRTC.session.getConversationList();
apiRTC.addEventListener("receiveIMMessage", e=>{
console.log("new message")
var list=this.imClient.getConversationHistory(this.conv_id);
apiRTC.session.getConversationList();
});
apiRTC.addEventListener("channelEvent", e=>{
//console.log(e)
});
apiRTC.addEventListener("receiveConversationHistory", e=>{
var i;
var len;
var histry= e.detail.convHistory;
//console.log(this.convHistory);
if(this.convHistory != undefined && this.convHistory.length >0 ){
for ( i=0, len=histry.length; i < len; i++ ){
this.obj[histry[i].date] = histry[i];
}
console.log(this.obj)
for ( var key in this.obj )
this.convHistory.push(this.obj[key]);
}else{
this.convHistory = e.detail.convHistory;
}
});
apiRTC.addEventListener("receiveConversationList", e => {
var i;
this.convHistory = [];
for (i=e.detail.convList.length-1;i>-1;i--) {
//console.log(e.detail.convList[i].destId, this.patientId);
//if(parseInt(e.detail.convList[i].destId) == parseInt(this.patientId)){
this.imClient.getConversationHistory(e.detail.convList[i].convId);
//}
}
});
apiRTC.addEventListener("updatePresence", e=>{
//console.log('updatePresenceHandler :' + JSON.stringify(e.detail.connectedUsersList));
});
}
receiveConversationListHandler(e) {
//console.log('e receiveConversationListHandler = ', e);
}
send_msg(msg,patient_id){
patient_id = patient_id+123456789;
console.log(patient_id);
if(msg != '' || msg != null){
var msgg =this.imClient.sendMessage(patient_id,msg);
var d = new Date(); var n = d.getMilliseconds();
var msg_obj = {'date':d, 'dst': patient_id,'message': msg, 'src' : this.srcId,'srcNickname' : this.srcId}
this.convHistory.push(msg_obj);
}
}
receiveIMMessageHandler(e) {
console.log("new message")
//var list=this.imClient.getConversationHistory(this.conv_id);
//apiRTC.session.getConversationList();
}
get_history(patientId){
this.convHistory = [];
this.patientId = patientId;
this.patientId = patientId+123456789;
console.log(this.patientId);
apiRTC.session.getConversationList();
}
}
\ No newline at end of file
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import { Storage } from '@ionic/storage';
import { LoadingController, AlertController, Events } from 'ionic-angular';
/* import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ImagePicker } from '@ionic-native/image-picker';
,private transfer: FileTransfer, private file: File, private imagePicker: ImagePicker
*/
@Injectable()
export class Myservice {
//webservice_url = 'http://localhost/fixmyauto/Webservice_user/';
webservice_url = 'http://192.168.140.22/fixmyauto/Webservice_user/';
// webservice_url = 'http://localhost/fixmyauto/Webservice_user/';
// webservice_url = 'http://techlabz.in/fixmyauto/Webservice_user/';
// webservice_url = 'http://www.garnedo.com/fixmyauto/Webservice_user/';
// webservice_url = 'https://104.198.77.184:8443/fixmyauto/Webservice_user/';
loader : any;
alert : any;
post_url : any;
data : any;
result:any;
user_data:any;
notify:any;
constructor(public http: Http, public loadingCtrl: LoadingController, public alertCtrl: AlertController, public events: Events,public storage:Storage ) {
//const fileTransfer: TransferObject = this.transfer.create();
this.storage.get('user_data').then((user_data) => {
if(user_data){
this.user_data =user_data;
}
})
}
show_loader() {
this.loader = this.loadingCtrl.create({
content: ""
});
this.loader.present();
}
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'show',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>
<h5>Please wait your image is being downloaded</h5>`,
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
show_alert(title, message) {
this.alert = this.alertCtrl.create({
title: title,
subTitle: message,
buttons: ['OK']
});
this.alert.present();
}
fileUpload(data,fn_name){
console.log(data);
var post_url = this.webservice_url + fn_name;
return this.http.post(post_url, data) .map(res =>res.json());
}
hide_loader() {
this.loader.dismissAll();
}
/* load_posts(post_data, fn_name) {
post_data = JSON.stringify(post_data);
this.post_url = this.webservice_url + fn_name;
return this.http.post(`${this.post_url}`, `${post_data}`, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.map(res => res.json());
}
*/
load_post(post_data, fn_name) {
var post_url = this.webservice_url + fn_name;
post_data = JSON.stringify(post_data);
let headers = new Headers(
{
'Content-Type' : 'application/json'
});
let options = new RequestOptions({ headers: headers });
return this.http.post(post_url, post_data, options)
.map(res => res.json());
}
load_get(fn_name) {
this.post_url = this.webservice_url + fn_name;
return this.http.get(`${this.post_url}`).map(res => res.json());
}
/*
load_post_file(imageURI, post_data, fn_name) {
console.log(imageURI);
let ft = this.transfer.create();
let filename = imageURI.substr(imageURI.lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
//ft.onProgress(this.onProgress);
this.show_loader();
ft.upload(imageURI, this.webservice_url+fn_name, options, false)
.then((result: any) => {
//this.success(result);
this.hide_loader();
console.log(result);
var res =JSON.parse(result.response);
if(res.status == "failed") {
this.show_alert("Error!", result.message);
}
else {
this.show_alert("Success!", res.message);
console.log("result", JSON.parse(result.response) );
console.log("reg data post", this.reg_data);
console.log("pro pic", res.result.profile_pic);
this.reg_data.profile_pic = res.result.profile_pic;
this.reg_data.first_name = res.result.first_name;
this.reg_data.last_name = res.result.last_name;
console.log(this.reg_data);
this.events.publish('user:update_profile', this.reg_data);
}
}).catch((error: any) => {
//this.failed(error);
console.log(error);
//this.result = error;
this.hide_loader();
this.show_alert("Error!", 'Error occured. Please try again');
});
//console.log(this.result);
//return this.result;
}
load_post_file(imageURI, post_data, fn_name) {
let ft = this.transfer.create();
let filename = imageURI.substr(imageURI.lastIndexOf('/')+1);
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: post_data
};
//ft.onProgress(this.onProgress);
ft.upload(imageURI, this.webservice_url+fn_name, options, false)
.then((result: any) => {
//this.success(result);
console.log("1 ", result.response);
this.result = result.response;
}).catch((error: any) => {
//this.failed(error);
console.log(error);
this.result = error;
});
console.log("r ", this.result);
return this.result;
} */
load_new() {
this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(data => {
this.data = data;
console.log(this.data);
});
}
}
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Diagnostic } from '@ionic-native/diagnostic';
@Injectable()
export class PermissionsService {
constructor(public _platform: Platform, public _Diagnostic: Diagnostic) {
}
isAndroid() {
return this._platform.is('android')
}
isiOS() {
return this._platform.is('ios');
}
checkLocationPermissions(): Promise<boolean> {
return new Promise(resolve => {
if (this.isiOS()) {
this._Diagnostic.getLocationAuthorizationStatus().then(status => {
if (status == this._Diagnostic.permissionStatus.GRANTED) {
resolve(true);
}
else if (status == this._Diagnostic.permissionStatus.DENIED) {
resolve(false);
}
else if (status == this._Diagnostic.permissionStatus.NOT_REQUESTED || status.toLowerCase() == 'not_determined') {
this._Diagnostic.requestLocationAuthorization().then(authorisation => {
resolve(authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
else if (this.isAndroid()) {
this._Diagnostic.isLocationAuthorized().then(authorised => {
if (authorised) {
resolve(true);
}
else {
this._Diagnostic.requestLocationAuthorization().then(authorisation => {
resolve(authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
});
}
checkCameraPermissions(): Promise<boolean> {
return new Promise(resolve => {
if (this.isiOS()) {
this._Diagnostic.getCameraAuthorizationStatus().then(status => {
if (status == this._Diagnostic.permissionStatus.GRANTED) {
resolve(true);
}
else if (status == this._Diagnostic.permissionStatus.DENIED) {
resolve(false);
}
else if (status == this._Diagnostic.permissionStatus.NOT_REQUESTED || status.toLowerCase() == 'not_determined') {
this._Diagnostic.requestCameraAuthorization().then(authorisation => {
resolve(authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
else if (this.isAndroid()) {
this._Diagnostic.isCameraAuthorized().then(authorised => {
if (authorised) {
resolve(true);
}
else {
this._Diagnostic.requestCameraAuthorization().then(authorisation => {
resolve(authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
});
}
checkMicPermissions(): Promise<boolean> {
return new Promise(resolve => {
if (this.isiOS()) {
this._Diagnostic.getMicrophoneAuthorizationStatus().then(status => {
if (status == this._Diagnostic.permissionStatus.GRANTED) {
resolve(true);
}
else if (status == this._Diagnostic.permissionStatus.DENIED) {
resolve(false);
}
else if (status == this._Diagnostic.permissionStatus.NOT_REQUESTED || status.toLowerCase() == 'not_determined') {
this._Diagnostic.requestMicrophoneAuthorization().then(authorisation => {
resolve(authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
else if (this.isAndroid()) {
this._Diagnostic.isMicrophoneAuthorized().then(m_authorised=>{
console.log(m_authorised)
if(m_authorised){
resolve(true);
}
else{
this._Diagnostic.requestMicrophoneAuthorization().then(m_authorisation=>{
resolve(m_authorisation == this._Diagnostic.permissionStatus.GRANTED);
});
}
});
}
});
}
}
\ No newline at end of file
import { Injectable } from '@angular/core';
@Injectable()
export class ValidationService {
// {code: "auth/invalid-email", message: "The email address is badly formatted."}
errorList = {
"auth/invalid-email" : "Invalid Email address",
"auth/email-already-in-use": "This Email id is already taken",
"required" : 'This field is required',
"email": "Please enter a valid email",
"minLength": "Minimum characters length is ",
"maxLength": "Maximum characters length is ",
"match": "Password not match",
"alphabets": "Only alphabets are allowed ",
"numeric": "Only numbers are allowed",
"alphanumeric" : "Only alphanumeric characters are allowed",
"website": "Please enter a valid website address",
"min": "Minimum value is ",
"extension": "Not a valid extension",
"max": "Maximum value is ",
}
constructor( ) {
console.log("ValidationService called")
}
/* Get all error list obj
================================== */
getErrorList(){
return this.errorList;
}
/* check whether the error code having our definition else return firebase definition
================================== */
getError(error:any):string{ // Argument = error object
if(this.errorList.hasOwnProperty(error.code)){ // check whether the error code having our definition
return this.errorList[error.code] // return our definition
}else{
return error.message; //
}
}
}
/**
* Check out https://googlechromelabs.github.io/sw-toolbox/ for
* more info on how to use sw-toolbox to custom configure your service worker.
*/
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";
// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$content-ios-transition-background: transparent;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
@import "ionic.ionicons";
// Fonts
// --------------------------------------------------
@import "roboto";
@import "noto-sans";
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/**/*.spec.ts",
"src/**/__tests__/*.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
{
"rules": {
"no-duplicate-variable": true,
"no-unused-variable": [
true
]
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
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