<template>
    <Page>
        <ActionBar title="Post data"/>
        <StackLayout>
            <Label class="label" text="Name"/>
            <TextField class="input" hint="name" :text="name" v-model="name" />
            <Button text="Post" @tap="postData" />
        </StackLayout>
    </Page>
</template>

<script >
  import * as fs from 'tns-core-modules/file-system';
  import * as bgHttp from 'nativescript-background-http';

  export default {
    name: 'PostData',
    data() {
      return {
        name: '',
        logoDir: 'assets/images',
        logoFileName: 'NativeScript-Vue.png',
        apiBase: 'https://jsonplaceholder.typicode.com/posts',  // https://jsonplaceholder.typicode.com/guide.html
      }
    },
    computed: {
      logoFile: function () {
        return fs.path.normalize(
          `${fs.knownFolders.currentApp().path}/${this.logoDir}/${this.logoFileName}`
        );
      },
    },
    methods: {
      postData() {
        if (this.hasInputData()) {
          this.postDataMultiPart();
        } else {
          this.postDataImageOnly();
        }
      },
      // 画像単体のみを送信する場合
      postDataImageOnly() {
        const url = `${this.apiBase}`;
        // 引数('image-upload' の部分) は Session ID として利用される
        // (※複数セッションを同時に使わない限りは気にしなくて良さそう)
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
            'File-Name': this.logoFileName,
          },
          description: `uploading ${this.logoFileName}`,
        };
        const task = session.uploadFile(this.logoFile, request);  // ファイル単体の場合は uploadFile を使う

        // アップロードセッションのイベントハンドラ
        task.on('progress', e => console.log({ on: 'progress', e }));
        task.on('error', e => console.log({ on: 'error', e }));
        task.on('responded', e => console.log({ on: 'responded', e }));
        task.on('complete', e => console.log({ on: 'complete', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled', e }));
      },
      // 画像以外に他データも含む場合
      postDataMultiPart() {
        const url = `${this.apiBase}`;
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
          },
          description: `multipart/form-data`,
        };
        const params = [
          { name: 'name', value: this.name, },
          { name: 'image', filename: this.logoFile, mimeType: 'image/png', },
        ];
        const task = session.multipartUpload(params, request);  // 他データも含む場合は multipartUpload を使う

        // アップロードセッションのイベントハンドラ
        task.on('progress', e => console.log({ on: 'progress(multipart)', e }));
        task.on('error', e => console.log({ on: 'error(multipart)', e }));
        task.on('responded', e => console.log({ on: 'responded(multipart)', e }));
        task.on('complete', e => console.log({ on: 'complete(multipart)', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled(multipart)', e }));
      },
      hasInputData() {
        return this.name;
      },
      hasImage() {
        return this.logoFile;
      },
    },
  }
</script>

<template>
    <Page>
        <ActionBar title="Post data"/>
        <ScrollView>
            <StackLayout>
                <Label class="label" text="Name"/>
                <TextField class="input" hint="name" :text="name" v-model="name" />
                <Button text="Select a photo" @tap="selectPhoto" />
                <Image :src="image" stretch="fill" />
                <Button text="Post" @tap="postData" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script >
  import { isIOS, isAndroid } from "tns-core-modules/platform";
  import { ImageSource } from 'tns-core-modules/image-source/image-source';
  import * as fs from 'tns-core-modules/file-system';
  import * as imagepicker from 'nativescript-imagepicker';
  import * as bgHttp from 'nativescript-background-http';
  import * as permissions from 'nativescript-permissions';

  export default {
    name: 'PostData',
    data() {
      return {
        name: '',
        image: null,
        imagePath: null,
        apiBase: 'https://jsonplaceholder.typicode.com/posts',  // https://jsonplaceholder.typicode.com/guide.html
      }
    },
    methods: {
      selectPhoto() {
        const context = imagepicker.create({ mode: 'single', mediaType: 'Image' });
        // 権限の要求
        context.authorize({})
          .then(() => context.present())  // 選択画面の表示
          .then(selection => this.setImage(selection[0]))  // 選択画像の処理
          .catch(err => {
            console.error({err});
            this.image = null;
          });
      },
      setImage(imageAsset) {
        this.image = imageAsset;
        if (isAndroid) {
          // Android は imageAsset.android にファイルパスが入っている
          this.imagePath = imageAsset.android;
        } else {
          // iOS はファイルパスが取得できないため、アプリ内にファイルを一時保存する必要がある
          const folder = fs.knownFolders.documents();  // ユーザーからは見えないディレクトリ
          this.imagePath = fs.path.join(folder.path, 'temp.png');
          // png として保存
          ImageSource.fromAsset(imageAsset).then(imageSource => {
            imageSource.saveToFile(this.imagePath, 'png');
          });
        }
      },
      postData() {
        if (!this.hasInputData() && !this.hasImage()) {
          return;
        }

        // 画像ファイルが設定されている場合
        if (this.hasImage()) {
          // 他データもある場合場合
          if (this.hasInputData()) {
            this.postDataMultiPart();
          } else {
            this.postDataImageOnly();
          }
        } else {
          // 画像なし
          const data = {
            name: this.name,
            email: this.email,
            password: this.password,
            introduction: this.introduction,
          };
          this.axiosPost(data);
        }
      },
      // 画像単体のみを送信する場合
      postDataImageOnly() {
        const url = `${this.apiBase}`;
        // 引数('image-upload' の部分) は Session ID として利用される
        // (※複数セッションを同時に使わない限りは気にしなくて良さそう)
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
            'File-Name': 'temp.png',
          },
          description: `uploading temp.png`,
        };
        const task = session.uploadFile(this.imagePath, request);  // ファイル単体の場合は uploadFile を使う
        task.on('progress', e => console.log({ on: 'progress', e }));
        task.on('error', e => console.log({ on: 'error', e }));
        task.on('responded', e => console.log({ on: 'responded', e }));
        task.on('complete', e => console.log({ on: 'complete', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled', e }));
      },
      // 画像以外に他データも含む場合
      postDataMultiPart() {
        const url = `${this.apiBase}`;
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
          },
          description: `multipart/form-data`,
        };
        const params = [
          { name: 'name', value: this.name, },
          { name: 'image', filename: this.imagePath, mimeType: 'image/png', },
        ];
        const task = session.multipartUpload(params, request);  // 他データも含む場合は multipartUpload を使う
        task.on('progress', e => console.log({ on: 'progress(multipart)', e }));
        task.on('error', e => console.log({ on: 'error(multipart)', e }));
        task.on('responded', e => console.log({ on: 'responded(multipart)', e }));
        task.on('complete', e => console.log({ on: 'complete(multipart)', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled(multipart)', e }));
      },
      hasInputData() {
        return this.name;
      },
      hasImage() {
        return this.image !== null;
      },
    },
  }
</script>

<template>
    <Page>
        <ActionBar title="Post data"/>
        <ScrollView>
            <StackLayout>
                <Label class="label" text="Name"/>
                <TextField class="input" hint="name" :text="name" v-model="name" />
                <Button text="Take/Select a photo" @tap="takeOrSelectPhoto" />
                <Image :src="image" stretch="fill" />
                <Button text="Post" @tap="postData" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script >
  import { isIOS, isAndroid } from "tns-core-modules/platform";
  import { ImageSource } from 'tns-core-modules/image-source/image-source';
  import * as fs from 'tns-core-modules/file-system';
  import * as camera from 'nativescript-camera';
  import * as imagepicker from 'nativescript-imagepicker';
  import * as bgHttp from 'nativescript-background-http';
  import * as permissions from 'nativescript-permissions';

  export default {
    name: 'PostData',
    data() {
      return {
        name: '',
        image: null,
        imagePath: null,
        apiBase: 'https://jsonplaceholder.typicode.com/posts',  // https://jsonplaceholder.typicode.com/guide.html
      }
    },
    methods: {
      takeOrSelectPhoto() {
        action(
          'Take or Select a photo',
          'Cancel',
          ['Take a photo', 'Select a photo']
        ).then(result => {
          switch (result) {
            case 'Take a photo':
              this.takePhoto();
              break;

            case 'Select a photo':
              this.selectPhoto();
              break;

            case 'Cancel':
            default:
              console.log('Canceled');
              break;
          }
        });
      },
      takePhoto() {
        console.log('Take a photo');
        // 権限の要求
        camera.requestPermissions()
          .then(
            // 許可
            () => {
              console.log('Permitted');
              camera.takePicture({
                keepAspectRatio: true,
                saveToGallery: false,
                allowsEditing: true,
                cameraFacing: 'rear',
              }).then(imageAsset => {
                  this.setImage(imageAsset);
                })
                .catch(err => {
                  console.error({err});
                  this.image = null;
                });
            },
            // 拒否
            () => {
              console.log('Denied to use camera/photo library');
              alert({
                title: 'カメラ利用',
                message: 'カメラを利用するには「設定」→「プライバシー」から「写真」と「カメラ」の利用を許可してください',
                okButtonText: 'OK',
              });
            }
          ).catch(err => console.error({err}));
      },
      selectPhoto() {
        const context = imagepicker.create({ mode: 'single', mediaType: 'Image' });
        // 権限の要求
        context.authorize({})
          .then(() => context.present())  // 選択画面の表示
          .then(selection => this.setImage(selection[0]))  // 選択画像の処理
          .catch(err => {
            console.error({err});
            this.image = null;
          });
      },
      setImage(imageAsset) {
        this.image = imageAsset;
        if (isAndroid) {
          // Android は imageAsset.android にファイルパスが入っている
          this.imagePath = imageAsset.android;
        } else {
          // iOS はファイルパスが取得できないため、アプリ内にファイルを一時保存する必要がある
          const folder = fs.knownFolders.documents();  // ユーザーからは見えないディレクトリ
          this.imagePath = fs.path.join(folder.path, 'temp.png');
          // png として保存
          ImageSource.fromAsset(imageAsset).then(imageSource => {
            imageSource.saveToFile(this.imagePath, 'png');
          });
        }
      },
      postData() {
        if (!this.hasInputData() && !this.hasImage()) {
          return;
        }

        // 画像ファイルが設定されている場合
        if (this.hasImage()) {
          // 他データもある場合場合
          if (this.hasInputData()) {
            this.postDataMultiPart();
          } else {
            this.postDataImageOnly();
          }
        } else {
          // 画像なし
          const data = {
            name: this.name,
            email: this.email,
            password: this.password,
            introduction: this.introduction,
          };
          this.axiosPost(data);
        }
      },
      // 画像単体のみを送信する場合
      postDataImageOnly() {
        const url = `${this.apiBase}`;
        // 引数('image-upload' の部分) は Session ID として利用される
        // (※複数セッションを同時に使わない限りは気にしなくて良さそう)
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
            'File-Name': 'temp.png',
          },
          description: `uploading temp.png`,
        };
        const task = session.uploadFile(this.imagePath, request);  // ファイル単体の場合は uploadFile を使う
        task.on('progress', e => console.log({ on: 'progress', e }));
        task.on('error', e => console.log({ on: 'error', e }));
        task.on('responded', e => console.log({ on: 'responded', e }));
        task.on('complete', e => console.log({ on: 'complete', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled', e }));
      },
      // 画像以外に他データも含む場合
      postDataMultiPart() {
        const url = `${this.apiBase}`;
        const session = bgHttp.session(`image-upload`);
        const request = {
          url,
          method: 'POST',
          headers: {
            'Content-Type': 'application/octet-stream',
          },
          description: `multipart/form-data`,
        };
        const params = [
          { name: 'name', value: this.name, },
          { name: 'image', filename: this.imagePath, mimeType: 'image/png', },
        ];
        const task = session.multipartUpload(params, request);  // 他データも含む場合は multipartUpload を使う
        task.on('progress', e => console.log({ on: 'progress(multipart)', e }));
        task.on('error', e => console.log({ on: 'error(multipart)', e }));
        task.on('responded', e => console.log({ on: 'responded(multipart)', e }));
        task.on('complete', e => console.log({ on: 'complete(multipart)', e }));
        task.on('cancelled', e => console.log({ on: 'cancelled(multipart)', e }));
      },
      hasInputData() {
        return this.name;
      },
      hasImage() {
        return this.image !== null;
      },
    },
  }
</script>

<template>
    <Page>
        <ActionBar title="Post data"/>
          <StackLayout>
              <Label class="label" text="Post data"/>
          </StackLayout>
    </Page>
</template>

<script >
  import axios from 'axios';

  export default {
    data() {
      return {
        apiBase: 'https://jsonplaceholder.typicode.com/posts',
      }
    },
    async created() {
      await this.axiosGet();
      await this.axiosPost();
      await this.axiosPut();
    },
    methods: {
      async axiosGet() {
        console.log('=== GET example ===');
        const url = `${this.apiBase}`;
        const res = await axios.get(url);
        console.log({res});
      },
      async axiosPost() {
        console.log('=== POST example ===');
        const url = `${this.apiBase}`;
        const data = {
          title: 'my title',
          body: 'my body',
          userId: 1,
        }
        const res = await axios.post(url, data);
        console.log({res});
      },
      async axiosPut() {
        console.log('=== PUT example ===');
        const url = `${this.apiBase}/1`;
        const data = {
          id: 1,
          title: 'new title',
          body: 'new body',
          userId: 1,
        }
        const res = await axios.put(url, data);
        console.log({res});
      },
    },
  }
</script>