diff --git a/firebase.json b/firebase.json
index 45041e0..bd08b1c 100644
--- a/firebase.json
+++ b/firebase.json
@@ -5,12 +5,6 @@
"firebase.json",
"**/.*",
"**/node_modules/**"
- ],
- "rewrites": [
- {
- "source": "**",
- "destination": "/index.html"
- }
]
}
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 11a7669..1d964e6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -47,6 +47,7 @@ export class MyApp {
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
+ console.log(page)
this.nav.setRoot(page.component);
}
}
diff --git a/src/assets/imgs/Add_Photo.PNG b/src/assets/imgs/Add_Photo.PNG
new file mode 100644
index 0000000..ed5467a
Binary files /dev/null and b/src/assets/imgs/Add_Photo.PNG differ
diff --git a/src/assets/imgs/noProfile.png b/src/assets/imgs/noProfile.png
new file mode 100644
index 0000000..8028d24
Binary files /dev/null and b/src/assets/imgs/noProfile.png differ
diff --git a/src/pages/list/list.html b/src/pages/list/list.html
index c9d623a..ceda538 100644
--- a/src/pages/list/list.html
+++ b/src/pages/list/list.html
@@ -46,10 +46,10 @@
Expertise level
- Primary School
- Junior Secondary School
- Senior Secondary School
- University
+ Primary School
+ Junior Secondary School
+ Senior Secondary School
+ University
@@ -104,33 +104,30 @@
+
FILTER===================
-
-
+
+
{{result|json}}
-
-
--->
+
+
diff --git a/src/pages/list/list.ts b/src/pages/list/list.ts
index c51d28e..6752672 100644
--- a/src/pages/list/list.ts
+++ b/src/pages/list/list.ts
@@ -1,152 +1,182 @@
-import { Component } from '@angular/core';
-import { NavController, NavParams } from 'ionic-angular';
-
-import { AngularFirestoreDocument } from 'angularfire2/firestore';
-// import { AngularFirestoreCollection } from 'angularfire2/firestore';
-import { AngularFireAuth } from 'angularfire2/auth';
-import { AngularFirestore } from 'angularfire2/firestore';
-import { Observable } from 'rxjs/Observable';
-
-// export interface Item {}
-
-
-@Component({
- selector: 'page-list',
- templateUrl: 'list.html'
-})
-export class ListPage {
-
- userList;
- userListFilter;
- searchUserForm = {
- gender: ['All'],
- subject: ['Chinese'],
- education: [],
- level: []
- };
-
-
-
- constructor(
- public navCtrl: NavController,
- public afDB: AngularFirestore,
- public afAuth: AngularFireAuth
- ) {}
-
- GetUserList(){
-
- // var educationsubject = ['HKU','CUHK', 'HKUST', 'HKIED']
- // for (var i = 0, len = educationsubject.length; i < len; i++) {
- // if (this.searchUserForm.education.indexOf(educationsubject[i])>-1){
- // const formEduaction = 'education.' + educationsubject[i]
- // } else {
- // const formEduaction = 'dummy'
- // // this['formEduaction' + educationsubject[i]] = 'dummy'
- // }
- // }
-
- const formGender = 'dummy'
-
- if (this.searchUserForm.gender!='All'){
+ import { Component } from '@angular/core';
+ import { NavController, NavParams } from 'ionic-angular';
+
+ import { AngularFirestoreDocument } from 'angularfire2/firestore';
+ // import { AngularFirestoreCollection } from 'angularfire2/firestore';
+ import { AngularFireAuth } from 'angularfire2/auth';
+ import { AngularFirestore } from 'angularfire2/firestore';
+ import { Observable } from 'rxjs/Observable';
+
+ // export interface Item {}
+
+
+ @Component({
+ selector: 'page-list',
+ templateUrl: 'list.html'
+ })
+ export class ListPage {
+
+ userList;
+ userListFilter;
+ userListFilterArray;
+ searchUserForm = {
+ gender: 'All',
+ subject: 'Chinese',
+ education: [],
+ level: []
+ };
+
+
+
+ constructor(
+ public navCtrl: NavController,
+ public afDB: AngularFirestore,
+ public afAuth: AngularFireAuth
+ ) {}
+
+ GetUserList(){
+
+ // var educationsubject = ['HKU','CUHK', 'HKUST', 'HKIED']
+ // for (var i = 0, len = educationsubject.length; i < len; i++) {
+ // if (this.searchUserForm.education.indexOf(educationsubject[i])>-1){
+ // const formEduaction = 'education.' + educationsubject[i]
+ // } else {
+ // const formEduaction = 'dummy'
+ // // this['formEduaction' + educationsubject[i]] = 'dummy'
+ // }
+ // }
+
+ // const formGender = 'dummy'
+
+ // if (this.searchUserForm.gender!='All'){
+ // const formGender = 'gender.' + this.searchUserForm.gender
+ // } else {
+ // const formGender = 'dummy'
+ // }
+
+ const formSubject = 'expertArea.' + this.searchUserForm.subject
+ const formLevel = 'expertLevel.' + this.searchUserForm.level
const formGender = 'gender.' + this.searchUserForm.gender
- } else {
- const formGender = 'dummy'
+
+ console.log(formGender,formLevel,formSubject)
+
+ this.userListFilter = this.afDB.collection('users', ref => {
+ return ref.where(formGender, '==', true)
+ .where(formSubject, '==', true)
+ .where(formLevel, '==', true)
+ }).valueChanges()
+
+ this.afDB.collection('users', ref => {
+ return ref.where(formGender, '==', true)
+ .where(formSubject, '==', true)
+ .where(formLevel, '==', true)
+ }).valueChanges().subscribe(result => {
+ this.userListFilterArray = result
+ console.log(result)
+ })
}
- const formSubject = 'expertArea.' + this.searchUserForm.subject
- const formLevel = 'expertLevel.' + this.searchUserForm.level
-
- console.log(formGender,formLevel,formSubject)
-
- // this.userListFilter = this.afDB.collection('users', ref => {
- // return ref.where(formGender, '==', true)
- // .where(this.formEduactionHKU, '==', true)
- // .where(formSubject, '==', true)
- // }).valueChanges();
-
- this.userListFilter = this.afDB.collection('users', ref => {
- return ref.where(formGender, '==', true)
- .where(formSubject, '==', true)
- .where(formLevel, '==', true)
- }).valueChanges();
+
+ SubmitRequest(){
+ console.log(this.userListFilterArray)
+ const subscriptionData = {Requrement: this.searchUserForm, Result: this.userListFilterArray}
+ this.afAuth.authState.subscribe(user => {
+ this.afDB.collection('users').doc(user.uid).valueChanges().subscribe( userInfo =>{
+ this.afDB.collection("users").doc(user.uid).collection('subscription').add(subscriptionData)
+ })
+ })
}
-
-
- UploadTestData(){
- var pushkey = this.afDB.createId();
- var RandPhoneNumber = 90000000 + Math.round(Math.random()*10000000)
- var TestName = "USER #" + Math.round(Math.random()*100)
- var UserAvaliablity = {
- MonAM: Math.random() >= 0.5,
- MonNN: Math.random() >= 0.5,
- MonPM: Math.random() >= 0.5,
- TueAM: Math.random() >= 0.5,
- TueNN: Math.random() >= 0.5,
- TuePM: Math.random() >= 0.5,
- WedAM: Math.random() >= 0.5,
- WedNN: Math.random() >= 0.5,
- WedPM: Math.random() >= 0.5,
- ThuAM: Math.random() >= 0.5,
- ThuNN: Math.random() >= 0.5,
- ThuPM: Math.random() >= 0.5,
- FriAM: Math.random() >= 0.5,
- FriNN: Math.random() >= 0.5,
- FriPM: Math.random() >= 0.5,
- SatAM: Math.random() >= 0.5,
- SatNN: Math.random() >= 0.5,
- SatPM: Math.random() >= 0.5,
- SunAM: Math.random() >= 0.5,
- SunNN: Math.random() >= 0.5,
- SunPM: Math.random() >= 0.5,
- }
- var UserEducation = {
- HKU: Math.random() >= 0.5,
- CUHK: Math.random() >= 0.5,
- HKUST: Math.random() >= 0.5,
- HKIED: Math.random() >= 0.5,
- Oversea: Math.random() >= 0.5,
- Others: Math.random() >= 0.5
- }
- var userExpertArea = {
- Chinese: Math.random() >= 0.5,
- English: Math.random() >= 0.5,
- Mathematics: Math.random() >= 0.5,
- Physics: Math.random() >= 0.5,
- Chemistry: Math.random() >= 0.5,
- Biology: Math.random() >= 0.5,
- GeneralEducation: Math.random() >= 0.5,
- AllSubjects: Math.random() >= 0.5
- }
-
- const userExpLevel = {
- Primany: Math.random() >= 0.5,
- SecondaryJunior: Math.random() >= 0.5,
- SecondarySenior: Math.random() >= 0.5,
- University: Math.random() >= 0.5,
- }
-
- var userGender = {
- Male: RandPhoneNumber % 2 == 1,
- Female: RandPhoneNumber % 2 != 1,
- All: true
- }
-
- const userData = {
- phonenumber: RandPhoneNumber,
- userID: pushkey,
- selfDescription: "This is a auto-gen test user " + RandPhoneNumber,
- userName: TestName,
- gender: userGender,
- expertArea: userExpertArea,
- education: UserEducation,
- avaliablity: UserAvaliablity,
- expertLevel: userExpLevel,
- dummy: true
- }
- console.log(userData)
- this.afDB.collection("users").doc(pushkey).set(userData)
+
+
+ // jsonParser(stringValue) {
+
+ // var string = JSON.stringify(stringValue);
+ // var objectValue = JSON.parse(string);
+ // return objectValue['mm'];
+ // }
+
+ SelectPreference(turtorID){
- }
+ console.log(this.userListFilterArray)
+ }
+
-}
+ UploadTestData(){
+ var pushkey = this.afDB.createId();
+ var RandPhoneNumber = 90000000 + Math.round(Math.random()*10000000)
+ var TestName = "USER #" + Math.round(Math.random()*100)
+ var UserAvaliablity = {
+ MonAM: Math.random() >= 0.5,
+ MonNN: Math.random() >= 0.5,
+ MonPM: Math.random() >= 0.5,
+ TueAM: Math.random() >= 0.5,
+ TueNN: Math.random() >= 0.5,
+ TuePM: Math.random() >= 0.5,
+ WedAM: Math.random() >= 0.5,
+ WedNN: Math.random() >= 0.5,
+ WedPM: Math.random() >= 0.5,
+ ThuAM: Math.random() >= 0.5,
+ ThuNN: Math.random() >= 0.5,
+ ThuPM: Math.random() >= 0.5,
+ FriAM: Math.random() >= 0.5,
+ FriNN: Math.random() >= 0.5,
+ FriPM: Math.random() >= 0.5,
+ SatAM: Math.random() >= 0.5,
+ SatNN: Math.random() >= 0.5,
+ SatPM: Math.random() >= 0.5,
+ SunAM: Math.random() >= 0.5,
+ SunNN: Math.random() >= 0.5,
+ SunPM: Math.random() >= 0.5,
+ }
+ var UserEducation = {
+ HKU: Math.random() >= 0.5,
+ CUHK: Math.random() >= 0.5,
+ HKUST: Math.random() >= 0.5,
+ HKIED: Math.random() >= 0.5,
+ Oversea: Math.random() >= 0.5,
+ Others: Math.random() >= 0.5
+ }
+ var userExpertArea = {
+ Chinese: Math.random() >= 0.5,
+ English: Math.random() >= 0.5,
+ Mathematics: Math.random() >= 0.5,
+ Physics: Math.random() >= 0.5,
+ Chemistry: Math.random() >= 0.5,
+ Biology: Math.random() >= 0.5,
+ GeneralEducation: Math.random() >= 0.5,
+ AllSubjects: Math.random() >= 0.5
+ }
+
+ const userExpLevel = {
+ Primany: Math.random() >= 0.5,
+ SecondaryJunior: Math.random() >= 0.5,
+ SecondarySenior: Math.random() >= 0.5,
+ University: Math.random() >= 0.5,
+ }
+
+ var userGender = {
+ Male: RandPhoneNumber % 2 == 1,
+ Female: RandPhoneNumber % 2 != 1,
+ All: true
+ }
+
+ const userData = {
+ phonenumber: RandPhoneNumber,
+ userID: pushkey,
+ selfDescription: "This is a auto-gen test user " + RandPhoneNumber,
+ userName: TestName,
+ gender: userGender,
+ expertArea: userExpertArea,
+ education: UserEducation,
+ avaliablity: UserAvaliablity,
+ expertLevel: userExpLevel,
+ dummy: true
+ }
+ console.log(userData)
+ this.afDB.collection("users").doc(pushkey).set(userData)
+
+ }
+
+
+ }
diff --git a/src/pages/profile/profile.html b/src/pages/profile/profile.html
index c05b3a2..2729790 100644
--- a/src/pages/profile/profile.html
+++ b/src/pages/profile/profile.html
@@ -8,36 +8,45 @@
-
-
-
-
Current User
-
-
1
-
{{currentUserInfo|json}}
-
2
-
{{(currentUserInfo)?.userName}}
-
3
-
{{(currentUserInfo)?.phonenumber}}
-
-
-
- =================
+
-
+
+
+
+
+
+
+
+
+
+
+ Name
+
- Name
-
+ Phone Number
+
Gender
-
+
Male
Female
@@ -45,7 +54,7 @@
Education
-
+
HKU
CUHK
HKUST
@@ -57,7 +66,7 @@
Education Level
-
+
Bachelor
Master
Current Teacher
@@ -66,7 +75,7 @@
Expertise Areas
-
+
Chinese
English
Mathematics
@@ -79,25 +88,25 @@
Expertise level
-
- Primary School
- Junior Secondary School
- Senior Secondary School
- University
+
+ Primary School
+ Junior Secondary School
+ Senior Secondary School
+ University
Request Pay
-
+
Description
-
+
-
+
diff --git a/src/pages/profile/profile.scss b/src/pages/profile/profile.scss
index d5deafd..8a19293 100644
--- a/src/pages/profile/profile.scss
+++ b/src/pages/profile/profile.scss
@@ -1,3 +1,297 @@
page-list {
+
+}
+
+.circular--portrait {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ border-radius: 50%;
+ border:5px solid #cfd8dc;
+// margin-bottom: -50px;
+ display: block;
+ margin: 0 auto;
+
+}
+
+.circular--portrait img {
+ width: 100%;
+ height: auto;
+// margin-bottom: -50px;
+ display: block;
+ margin: 0 auto;
+}
+
+
+.img-circle {
+ border-radius: 50%;
+ display: block;
+ margin: 0 auto;
+ width: 50%;
+ // height: auto;
+}
+
+
+.fileContainer {
+ overflow: hidden;
+ position: relative;
+}
+
+.fileContainer [type=file] {
+ cursor: inherit;
+ display: block;
+ font-size: 999px;
+ filter: alpha(opacity=0);
+ min-height: 200%;
+ min-width: 100%;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ text-align: right;
+ top: 0;
+}
+
+.card {
+ padding-top: 20px;
+ margin: 10px 0 20px 0;
+ background-color: rgba(214, 224, 226, 0.2);
+ border-top-width: 0;
+ border-bottom-width: 2px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.card .card-heading {
+ padding: 0 20px;
+ margin: 0;
+}
+
+.card .card-heading.simple {
+ font-size: 20px;
+ font-weight: 300;
+ color: #777;
+ border-bottom: 1px solid #e5e5e5;
+}
+
+.card .card-heading.image img {
+ display: inline-block;
+ width: 46px;
+ height: 46px;
+ margin-right: 15px;
+ vertical-align: top;
+ border: 0;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+}
+
+.card .card-heading.image .card-heading-header {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.card .card-heading.image .card-heading-header h3 {
+ margin: 0;
+ font-size: 14px;
+ line-height: 16px;
+ color: #262626;
+}
+
+.card .card-heading.image .card-heading-header span {
+ font-size: 12px;
+ color: #999999;
+}
+
+.card .card-body {
+ padding: 0 20px;
+ margin-top: 20px;
+}
+
+.card .card-media {
+ padding: 0 20px;
+ margin: 0 -14px;
+}
+
+.card .card-media img {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.card .card-actions {
+ min-height: 30px;
+ padding: 0 20px 20px 20px;
+ margin: 20px 0 0 0;
+}
+
+.card .card-comments {
+ padding: 20px;
+ margin: 0;
+ background-color: #f8f8f8;
+}
+
+.card .card-comments .comments-collapse-toggle {
+ padding: 0;
+ margin: 0 20px 12px 20px;
}
+
+.card .card-comments .comments-collapse-toggle a,
+.card .card-comments .comments-collapse-toggle span {
+ padding-right: 5px;
+ overflow: hidden;
+ font-size: 12px;
+ color: #999;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.card-comments .media-heading {
+ font-size: 13px;
+ font-weight: bold;
+}
+
+.card.people {
+ position: relative;
+ display: inline-block;
+ width: 170px;
+ height: 300px;
+ padding-top: 0;
+ margin-left: 20px;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+.card.people:first-child {
+ margin-left: 0;
+}
+
+.card.people .card-top {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: inline-block;
+ width: 170px;
+ height: 150px;
+ background-color: #ffffff;
+}
+
+.card.people .card-top.green {
+ background-color: #53a93f;
+}
+
+.card.people .card-top.blue {
+ background-color: #427fed;
+}
+
+.card.people .card-info {
+ position: absolute;
+ top: 150px;
+ display: inline-block;
+ width: 100%;
+ height: 101px;
+ overflow: hidden;
+ background: #ffffff;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.card.people .card-info .title {
+ display: block;
+ margin: 8px 14px 0 14px;
+ overflow: hidden;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 18px;
+ color: #404040;
+}
+
+.card.people .card-info .desc {
+ display: block;
+ margin: 8px 14px 0 14px;
+ overflow: hidden;
+ font-size: 12px;
+ line-height: 16px;
+ color: #737373;
+ text-overflow: ellipsis;
+}
+
+.card.people .card-bottom {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: inline-block;
+ width: 100%;
+ padding: 10px 20px;
+ line-height: 29px;
+ text-align: center;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.card.hovercard {
+ position: relative;
+ padding-top: 0;
+ overflow: hidden;
+ text-align: center;
+ background-color: rgba(214, 224, 226, 0.2);
+}
+
+.card.hovercard .cardheader {
+ background: url("http://lorempixel.com/850/280/nature/4/");
+ background-size: cover;
+ height: 135px;
+}
+
+.card.hovercard .avatar {
+ position: relative;
+ top: -50px;
+ margin-bottom: -50px;
+}
+
+.card.hovercard .avatar img {
+ width: 100px;
+ height: 100px;
+ max-width: 100px;
+ max-height: 100px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ border: 5px solid rgba(255,255,255,0.5);
+}
+
+.card.hovercard .info {
+ padding: 4px 8px 10px;
+}
+
+.card.hovercard .info .title {
+ margin-bottom: 4px;
+ font-size: 24px;
+ line-height: 1;
+ color: #262626;
+ vertical-align: middle;
+}
+
+.card.hovercard .info .desc {
+ overflow: hidden;
+ font-size: 12px;
+ line-height: 20px;
+ color: #737373;
+ text-overflow: ellipsis;
+}
+
+.card.hovercard .bottom {
+ padding: 0 20px;
+ margin-bottom: 17px;
+}
+
+.btn{ border-radius: 50%; width:32px; height:32px; line-height:18px; }
diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts
index d49fc15..70e7d9d 100644
--- a/src/pages/profile/profile.ts
+++ b/src/pages/profile/profile.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFirestoreDocument } from 'angularfire2/firestore';
@@ -12,7 +12,12 @@ import { Observable } from 'rxjs/Observable';
})
export class ProfilePage {
- currentUserInfo;
+ currentUserInfo = {
+ phonenumber: null,
+ photoURLCustom64: null,
+ photoURLCustom: null
+ };
+ isReadonlyForm = false;
userInfoForm = {
education: {Summary:null},
expertArea: {Summary:null},
@@ -31,15 +36,17 @@ export class ProfilePage {
) {
this.afAuth.authState.subscribe(user => {
this.afDB.collection('users').doc(user.uid).valueChanges().subscribe( userInfo =>{
+ this.isReadonly(true);
this.currentUserInfo = userInfo
+ console.log(this.currentUserInfo)
this.userInfoForm = {
education: {Summary:this.currentUserInfo.education.Summary},
expertArea: {Summary:this.currentUserInfo.expertArea.Summary},
degree: {Summary:this.currentUserInfo.degree.Summary},
- expertLevel:{Summary:this.currentUserInfo.level.Summary},
+ expertLevel:{Summary:this.currentUserInfo.expertLevel.Summary},
requestPay: this.currentUserInfo.requestPay,
userName: this.currentUserInfo.userName,
- selfDescription: null,
+ selfDescription: this.currentUserInfo.selfDescription,
gender:{Summary:this.currentUserInfo.gender.Summary},
};
})
@@ -55,10 +62,23 @@ export class ProfilePage {
})
}
+ editProfile(){
+ this.isReadonly(false)
+ }
+
+ isReadonly(edit){
+ return this.isReadonlyForm = edit;
+ }
+
logForm() {
+
+ this.isReadonly(true);
+
this.afAuth.authState.subscribe(user => {
if (user!=null){
+ console.log(this.userInfoForm.expertLevel.Summary.value)
+
const formatEducation = {
Summary: this.userInfoForm.education.Summary,
HKU: this.userInfoForm.education.Summary.indexOf("HKU")>-1,
@@ -90,9 +110,9 @@ export class ProfilePage {
const formatExpLevel = {
Summary: this.userInfoForm.expertLevel.Summary,
- Primany: this.userInfoForm.expertLevel.Summary.indexOf("Primany School")>-1,
- SecondaryJunior: this.userInfoForm.expertLevel.Summary.indexOf("Junior Secondary School")>-1,
- SecondarySenior: this.userInfoForm.expertLevel.Summary.indexOf("Senior Secondary School")>-1,
+ Primary: this.userInfoForm.expertLevel.Summary.indexOf("Primary")>-1,
+ SecondaryJunior: this.userInfoForm.expertLevel.Summary.indexOf("SecondaryJunior")>-1,
+ SecondarySenior: this.userInfoForm.expertLevel.Summary.indexOf("SecondarySenior")>-1,
University: this.userInfoForm.expertLevel.Summary.indexOf("University")>-1,
}
@@ -115,5 +135,76 @@ export class ProfilePage {
})
}
+
+ProfilePic(event){
+ this.afAuth.authState.subscribe(user => {
+ var fileCaptured = event.target.files[0];
+ console.log(fileCaptured)
+ if (fileCaptured != null){
+ this.base64Converter(fileCaptured).then(data => {
+ this.ImageResize('data:image/jpeg;base64,' + data).then(ResizedImg => {
+ ResizedImg = 'data:image/jpeg;base64,' + ResizedImg
+ this.afDB.collection("users").doc(user.uid).update({photoURLCustom64: ResizedImg})
+ })
+ })
+ }
+ })
+}
+
+ base64Converter(file){
+ return new Promise((resolve) => {
+ var reader = new FileReader();
+ reader.onload = (event) => {
+ var Base64Img = event.target.result;
+ var ConvertedBase64Img = Base64Img.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
+ resolve (ConvertedBase64Img)
+ };
+ reader.readAsDataURL(file);
+ })
+ }
+
+ImageResize(fileCaptured){
+ return new Promise((resolve) => {
+ var img = document.createElement("img");
+ var canvas = document.createElement('canvas')
+ img.src = fileCaptured
+
+ img.onload = function() {
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0);
+ var MAX_WIDTH = 800;
+ var MAX_HEIGHT = 600;
+ var width = img.width;
+ var height = img.height;
+
+ if (width <= MAX_WIDTH && height <= MAX_HEIGHT){
+ console.log('No need to resize')
+ var ConvertedBase64Img = fileCaptured.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
+ resolve (ConvertedBase64Img)
+ } else {
+ console.log('Need to resize')
+ if (width > height) {
+ if (width > MAX_WIDTH) {
+ height *= MAX_WIDTH / width;
+ width = MAX_WIDTH;
+ }
+ } else {
+ if (height > MAX_HEIGHT) {
+ width *= MAX_HEIGHT / height;
+ height = MAX_HEIGHT;
+ }
+ }
+ canvas.width = width;
+ canvas.height = height;
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0, width, height);
+ var Base64Img = canvas.toDataURL("image/png");
+ var ConvertedBase64Img = Base64Img.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
+ resolve (ConvertedBase64Img)
+ }
+ }
+ })
+}
+
}