Family Pages

REMEMBER.txt

@@ -90,3 +90,9 @@ https://devdactic.com/ionic-image-upload-capacitor
 
 https://www.youtube.com/watch?v=fU8uM5oU1wY&t=1640s
 
+    <uses-feature
+        android:name="android.hardware.camera"
+        android:required="false" />
+    <uses-feature
+        android:name="android.hardware.location.network"
+        android:required="false" />

src/app/pages/familymember/familymember.page.html

@@ -214,6 +214,30 @@
 
         </div>
 
+        <div class="item_line" >
+            <div class="left">
+                <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/family/'+family_uid+')'"></div>
+
+                <div class="text">
+                    <ion-label class="bold_text name_bg_text">Change Picture</ion-label>
+<!--                    &lt;!&ndash;              <ion-label class="grey_text"> {{item.last_login}}</ion-label>&ndash;&gt;-->
+<!--                    <ion-label class="extra_text"><span class="title">Last Login:</span>{{item.last_login | date}}</ion-label>-->
+                </div>
+            </div>
+            <div class="right">
+<!--                <ion-icon name="images-outline" color="medium"></ion-icon>-->
+<!--                <ion-icon name="camera-reverse-outline" color="medium"></ion-icon>-->
+                <ion-button size="small" class="media_but" (click)="startCamera(0)">
+                    Photos
+                    <ion-icon slot="end" name="images-outline" ></ion-icon>
+                </ion-button>
+                <ion-button  size="small" class="media_but"  (click)="startCamera(100)">
+                    Camera
+                    <ion-icon slot="end" name="camera-reverse-outline"></ion-icon>
+                </ion-button>
+            </div>
+        </div>
+
         <div class="bg_white">
 
 

src/app/pages/familymember/familymember.page.scss

@@ -224,6 +224,58 @@ ion-content {
     }
   }
 
+  .item_line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    margin-top: 20px;
+    .media_but{
+      margin: 0px 5px 0px 5px;
+    }
+    .left {
+      display: flex;
+    }
+
+    .men_image {
+      height: 40px;
+      width: 40px;
+      border-radius: 100%;
+    }
+    .wallet-tools{
+      background-color: white;
+      ion-toolbar{
+        --ion-background-color: white;
+        border-radius: 10px;
+        .actions{
+          ion-button{
+            font-size: 14px;
+            margin-left: 10px;
+            margin-right: 10px;
+            font-weight: bolder;
+          }
+        }
+      }
+    }
+    .text {
+      margin-left: 10px;
+      width: 100%;
+    }
+
+    .bold_text {
+      font-size: 16px;
+      font-family: 'bold';
+    }
+
+    .grey_text {
+      font-size: 14px;
+      color: grey;
+    }
+  }
+
   .review_tab {
     margin-top: 20px;
 

src/app/pages/familymember/familymember.page.ts

@@ -1,8 +1,9 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {NavController} from "@ionic/angular";
+import {LoadingController, NavController} from "@ionic/angular";
 import {Router} from "@angular/router";
 import {SessionDataProviderService} from "../../store/session-data-provider.service";
 import {WrenchService} from "../../services/wrench.service";
+import {Camera, CameraResultType, CameraSource} from "@capacitor/camera";
 
 @Component({
   selector: 'app-familymember',
@@ -33,6 +34,7 @@ export class FamilymemberPage implements OnInit {
       private router: Router,
       public sessionDataProviderService: SessionDataProviderService,
       private wrenchService: WrenchService,
+      private loadingCtrl: LoadingController
   ) {
     this.familyMemberData  =  this.router.getCurrentNavigation().extras.state;
     //debugger;
@@ -250,6 +252,63 @@ familyTransfer(reqData){
     );
 
 
+  }
+  uploadData: {
+    action:number,
+    member_id: number,
+    uid: string,
+    family_uid: string,
+    sessionid: string,
+    msg_type:'FILE',
+    file_name: string,
+    file_size: number,
+    file_type: string,
+    file_data: string
+  };
+
+  uploadResult:any;
+  async startCamera(cameraMode){
+    const image = await Camera.getPhoto({
+      quality: 50,
+      width : 600,
+      height : 300,
+      allowEditing: false,
+      resultType: CameraResultType.Base64,
+      source: (cameraMode == 100 ) ? CameraSource.Camera  : CameraSource.Photos // Camera, Photos or Prompt!
+    });
+
+    if (image) {
+      const loading = await this.loadingCtrl.create({
+        message: 'Uploading Profile Picture',
+        duration: 5000,
+      });
+      var file_size = parseInt(String(image.base64String.toString().length / 1.3224954) ) ;
+      // this.saveImage(image)
+      //debugger;
+      //image.base64String
+      this.uploadData={
+        action:11305,
+        member_id: this.sessionDataProviderService.member_id,
+        uid: this.sessionDataProviderService.member_uid,
+        family_uid: this.family_uid,
+        sessionid: this.sessionDataProviderService.session ,
+        msg_type:'FILE',
+        file_name: `family-banner.${image.format}`,
+        file_size: file_size ,
+        file_type: `image/${image.format}`,
+        file_data: image.base64String
+      };
+      //console.log(image);
+      loading.present();
+      this.wrenchService.uploadFile(this.uploadData).subscribe(
+          uploadResult => {
+            this.uploadResult = uploadResult;
+            console.log("this.wrenchService.uploadFile RETURN DATA->", this.uploadResult);
+          }
+      );
+
+      console.log( this.uploadData);
+    }
   }
   startWalletPlan(){}
 }