profile qr

src/composable/settings.ts

 
 export const TOKEN = '173cb9e357a861abd91e8008fab9246e0cc116af'
 
-//export const BASE_URL = 'http://localhost:8020/'
-export const BASE_URL = 'https://www.tigermuaythai.live/'
+export const BASE_URL = 'http://localhost:8020/'
+//export const BASE_URL = 'https://www.tigermuaythai.live/'
 
 export const APPLE_CALLBACK = BASE_URL + "soc_accounts/apple/login/callback/";
 //const axios = setupCache(Axios); 
   console.log("apple login = ", data)
   return data
 }
+
+export const updateProfile = async (profileObj) => {
+  const token = await Preferences.get({ key: 'user_token' });
+  console.log("token = ", token)
+  const { data } = await axios.post(BASE_URL + `backend/api/profiles/update_profile/`,
+    profileObj,
+    {
+      headers: { 
+      'Authorization': `Token ${token.value}`
+      }
+    })
+  console.info(data)
+  return data
+}
+
+export const uploadPhoto = async(fileObj) => {
+  const token = await Preferences.get({ key: 'user_token' });
+  let formData = new FormData();
+  formData.append("image", fileObj);
+  const { data }  = await axios.post(BASE_URL + 'backend/api/profiles/upload_photo/', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data', 
+        'Authorization': `Token ${token.value}`
+      }
+  })
+  return data;
+}

src/views/ProfilePage.vue

       <ion-button @click='clear'>Clear Pref</ion-button>
       <ion-button @click='btnLogout'>Btn Logout</ion-button> -->
       <template v-if="refIsLogin && myprofile">
-        
+        <ion-img :src="myprofile.photo" v-if="myprofile.photo" class='profilePhoto' />
+          <div class='ion-text-center'>
+        <ion-button class='ion-margin-vertical' id='myqr-modal'>My QRCODE</ion-button>
+          </div>
+        <ion-modal ref="modal" trigger="myqr-modal">
+            <ion-content class="ion-padding">
+              <ion-img :src="'data:image/png;base64,'+myprofile.qrcode"/><br>
+                <h5 class='ion-text-center'>{{ myprofile.text_qrcode }}</h5>
+                    <ion-button expand="full" @click="modal.$el.dismiss()">Close</ion-button>
+
+            </ion-content>
+        </ion-modal>
         <ion-list>
           <ion-list-header>
+            <ion-label>Info</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <input type='file' @change="onUploadPhoto" />
+          </ion-item>
+          <ion-item>
+            <ion-input label="First Name" label-placement="floating" placeholder="Enter text" :value="myprofile.first_name" @ionInput="onUpdateProfile" ref="first_name" debounce=1000></ion-input>
+            <ion-input label="Last Name" label-placement="floating" placeholder="Enter text" :value="myprofile.last_name" @ionInput="onUpdateProfile" ref="last_name" debounce=1000></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label>Birthdate</ion-label>
+             <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+            <ion-modal :keep-contents-mounted="true">
+              <ion-datetime id="datetime" presentation="date" :value="myprofile.birth_date" ref='birthdate' @ionBlur="onUpdateProfile" ></ion-datetime>
+            </ion-modal>
+          </ion-item>
+          <ion-item>
+            <ion-textarea label="Address" label-placement="floating" placeholder="Enter text" ref='loc' :value="myprofile.location" @ionInput="onUpdateProfile" debounce=1000></ion-textarea>
+          </ion-item>
+          <ion-item>
+            <ion-input label="Tel." type="tel" ref="tel" placeholder="888-888-8888" :value="myprofile.phone_number" @ionInput="onUpdateProfile" debounce=1000></ion-input>
+          </ion-item>
+          <ion-list-header>
             <ion-label>Notifications</ion-label>
           </ion-list-header>
           <ion-item>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel, IonChip, IonIcon, IonSelect, IonSelectOption, IonList, IonListHeader, IonItem, IonText, IonImg, isPlatform } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel, IonChip, IonIcon, IonSelect, IonSelectOption, IonList, IonListHeader, IonItem, IonText, IonImg, isPlatform, IonDatetime, IonDatetimeButton, IonModal, IonTextarea, IonInput } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import LoginForm from '@/components/LoginForm.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
-import { facebookLogin, setUserToken, logout, clearPref, BASE_URL, listCourses, getPref, likeCourse, isLogin, ggLogin, updateNoti, APPLE_CALLBACK, appleLogin } from '@/composable/settings';
+import { facebookLogin, setUserToken, logout, clearPref, BASE_URL, listCourses, getPref, likeCourse, isLogin, ggLogin, updateNoti, APPLE_CALLBACK, appleLogin, updateProfile, uploadPhoto } from '@/composable/settings';
 import { InAppBrowser } from '@capgo/inappbrowser'
 import { close, closeCircle, pin, logoApple, logoFacebook, logoGoogle  } from 'ionicons/icons';
 
 const formError = ref(null)
 const selecteds = ref([])
 const myprofile = ref()
+
+const first_name = ref();
+const last_name = ref();
+const birthdate = ref();
+const loc = ref();
+const tel = ref();
+const modal = ref();
+
 const noti = reactive({liveNoti: true, newsNoti: true});
 const openReset = async () => {
   console.log("open Reset")
   refIsLogin.value = await isLogin()
   if( refIsLogin.value == true ) {
     myprofile.value  = await getPref()
+    console.log(myprofile.value)
     noti.liveNoti = myprofile.value.live_noti;
     noti.newsNoti = myprofile.value.news_noti;
   }
     // Handle error
   });
 }
+const onUpdateProfile = async() => {
+  console.log("update profile");
+  console.log(typeof birthdate.value.$el.value)
+  let obj = { 
+    first_name: first_name.value.$el.value, 
+    last_name: last_name.value.$el.value, 
+    birth_date: birthdate.value.$el.value.substring(0, 10), 
+    loc: loc.value.$el.value, 
+    phone_number: tel.value.$el.value
+  }
+  try{
+    myprofile.value = await updateProfile(obj)
+  }catch(error) {
+    alert(error)
+  }
+  console.log(obj);
+  
+}
+const onUploadPhoto = async($event) => {
+  console.log("upload photo")
+  console.log($event.target.files)
+  const fileObj = $event.target.files[0]
+  try{
+    myprofile.value = await uploadPhoto(fileObj)
+  }catch(error) {
+    alert(error)
+  }
+}
 </script>
+<style scoped>
+ion-datetime {
+  --background: #151515;
+  --wheel-fade-background-rgb: 5,5,5;
+}
+ion-datetime::part(wheel-item) {
+}
+ion-datetime::part(wheel-item active) {
+}
+.profilePhoto::part(image) {
+  width:160px;
+  height:160px;
+  object-fit:cover;
+  border-radius:80px;
+  margin:auto;
+  display:block;
+  border:2px solid #fff;
+}
+</style>