module order VibriPay

order-page.css

.popup-container{
    position: fixed;
	z-index:99999;
	background-color:#bb000000;
	min-height:100;
	width:100%;
    height:100%;
    padding: 30px;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.popup-box{
    padding: 55px;
    background-color: #ffffff;
    color: #199AAE;
}

order-page.js

const { fromObject } = require("tns-core-modules/data/observable");
var fetchModule = require("fetch");
var http = require("http");
var frameModule = require("ui/frame");
var view = require("ui/core/view");
var contacts = require("nativescript-contacts");
const appSettings = require("tns-core-modules/application-settings");
var BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
const permissions = require( "nativescript-permissions" );
var newContact = new contacts.Contact();
var LoadingIndicator = require("nativescript-loading-indicator-new").LoadingIndicator;
var loader = new LoadingIndicator();

var observable = require("data/observable");
var pageData = new observable.Observable();

var context, nameTextField, navigateData;

function onNavigatingTo(args) {
    const page = args.object;
    page.bindingContext = args.context;  
}

function onBackButtonTap(args) {
    const view = args.object;
    const page = view.page;

    page.frame.goBack();
}

exports.onNavigatingTo = onNavigatingTo;
exports.onBackButtonTap = onBackButtonTap;


 
// optional options
// android and ios have some platform specific options
var options = {
  message: 'Proses Order...',
  progress: 0.65
};
  
// Do whatever it is you want to do while the loader is showing, then
 
  var barcodescanner = new BarcodeScanner();
  exports.barCode = function() {
  barcodescanner.scan({
    formats: "QR_CODE,PDF_417,EAN_13",   // Pass in of you want to restrict scanning to certain types
    cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
    cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
    message: "Gunakan tombol volume untuk cahaya ekstra", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: false,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: false,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: function () { console.log("Pemindai ditutup"); }, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: "portrait",     // Android only, optionally lock the orientation to either "portrait" or "landscape"
    openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
  }).then(
      function(result) {
        json2 = result.text;
        console.log(json2);
      },
      function(error) {
        console.log("No scan: " + error);
      }
  );
    }

    const modalView = "pilih/pilih-page";

  exports.openModal = function(args) {
    const mainpage = args.object.page;
      const option = {
        context: { items: phone },
        closeCallback: function (items) {
            json2 = items;
            console.log(json2);
        },
          fullscreen  : false,
          animated    : true,
          stretched   : false
      };
      
      mainpage.showModal(modalView, option);
    }
  


exports.getPhone = function() {
  permissions.requestPermissions([android.Manifest.permission.READ_CONTACTS, android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS], "VibriPay Perlu izin mengakses kontak anda")
  contacts.getContact().then(function(args) {
    if (args.response === "selected") {
      var contact = args.data; //See data structure below
      contact.phoneNumbers.forEach(function(phone) {
        json2 = phone.value;
      });
    }
  });
  }


  
  
exports.onLoaded = function(args) {

    const datasend = JSON.stringify(json2);
    datasend2 = JSON.parse(datasend);


    var page = args.object;


    if (datasend2 == "[object Object]") {
        isihp="";
        var res4 = isihp; 
    }else {
        isihp = datasend2;
        var str = isihp;
        var res = str.replace(" ", ""); 
        var res2 = res.replace("-", ""); 
        var res3 = res2.replace("+62", "0");
        var res4 = res3.replace("-", ""); 
    }

    phone = res4;

    

    let data = { 
      phone : res4
       }


    page.bindingContext = data;
}

function onSwitchLoaded(argsloaded) {
    const mySwitch = argsloaded.object;
    mySwitch.on("checkedChange", (args) => {

      const sw = args.object;
        var isChecked = sw.checked;
        if(isChecked == true){
          simpan="ya"
          pageData.set("showDetails", !pageData.get("showDetails"));
        }else{
          simpan="tidak"
          pageData.set("showDetails", !pageData.get("showDetails"));
        }
        appSettings.setString("simpans", simpan);
        const simpans  = appSettings.getString("simpans");
        console.log(simpans);
    });
}
exports.onSwitchLoaded = onSwitchLoaded;

function onSwitchLoadedkupon(argsloaded) {

  const mySwitch = argsloaded.object;
  mySwitch.on("checkedChange", (args) => {
   

    const sw = args.object;
      var isChecked = sw.checked;
      if(isChecked == true){
        simpan="ya"
        pageData.set("showKupon", !pageData.get("showKupon"));
      }else{
        simpan="tidak"
        pageData.set("showKupon", !pageData.get("showKupon"));
      }
  });
}
exports.onSwitchLoadedkupon = onSwitchLoadedkupon;


function onLoadings(args) {
    var page = args.object;
    nameTextField = view.getViewById(page, "phone");
    var hargajualTextField = view.getViewById(page, "hargajual");
    var kuponTextField = view.getViewById(page, "kupon");
    var namaTextField = view.getViewById(page, "nama");
    var pinTextField = view.getViewById(page, "pin");
    var ordernowButton = view.getViewById(page, "ordernow");
    var resultLabel = view.getViewById(page, "nohp");


    const keys = appSettings.getString("keys");

    

    nameTextField.text=phone;
    hargajualTextField.text="";
    kuponTextField.text="";
    pinTextField.text="";
    namaTextField.text="";

    ordernowButton.on("tap", function () {
      loader.show(options); // options is optional

      const simpans = appSettings.getString("simpans");

    let user = { 
      nomor     : nameTextField.text,
      produk    : page.bindingContext["buyer_sku_code"],
      brand     : page.bindingContext["brand"],
      kupon     : kuponTextField.text,
      pin       : pinTextField.text,
      simpan    : simpans,
      nama      : namaTextField.text,
      hargajual : hargajualTextField.text,
      key       : keys
       }

       console.log(user);

      fetchModule.fetch("http://api.vibri.id/new/ppob/api/order.php", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(user)
    })
    .then(function(response) {
      loader.hide();
        const model = JSON.stringify(response._bodyInit);
        json = JSON.parse(model);
        json2s = JSON.parse(json);
       
        var errCode     = json2s['errCode'];
        var msg     = json2s['msg'];

        var result = "";

        if(errCode == "02"){
       alert({title: "Error", message: msg, okButtonText: "Close"});
       appSettings.remove("simpans");
      } else{

       
        
          alert({title: "Sukses", message: msg, okButtonText: "Close"});
        page.frame.navigate({
          moduleName: "dataorder/dataorder-page",
          context: "",
          animated: true,
          navigationTransition: {
          transition: "slide"
          }
          });

          appSettings.remove("simpans");


         }


      });

    });
  
  }
exports.loadSignUpViewo = onLoadings;

  
exports.kebuka = function(args) {
	pageData.set("showDetails", false);
	args.object.bindingContext = pageData;
}

  
exports.kebukakupon = function(args) {
	pageData.set("showKupon", false);
	args.object.bindingContext = pageData;
}


//Halaman dari POPUP


/* const xViewModel = require("./order-model");
var GetModel = new xViewModel([]);

var context;


exports.onLoadedpopup = function(args) {
    const page = args.object;
    context = GetModel;
    
    context.set("popup", false);

    page.bindingContext = context;
} */

exports.popup_loaded = function(args){
  args.object.bindingContext = pageData;
};

exports.OpenPopup = function(){

  pageData.set("popup", true);
  pageData.set("items", [
        {
            nohp: "08771989989",
        },
        {
            nohp: "087719892432",
        }
    ]);
};

exports.ClosePopup = function(){
  pageData.set("popup", false);
};

exports.onItemTapFromPopup=function(args){
    let itemTap = args.view;
    let itemTapData = itemTap.bindingContext;

    // context.set("phone", itemTapData.nohp);
    nameTextField.text = itemTapData.nohp;
    pageData.set("popup", false); 
};

order-page.xml

<Page
    navigatingTo="onNavigatingTo"  loaded="loadSignUpViewo"
	xmlns="http://schemas.nativescript.org/tns.xsd"
	xmlns:Barcode="nativescript-barcodescanner">
	<ActionBar title="Order" backgroundColor="#00b7ff"  flat="true">
		<NavigationButton tap="onBackButtonTap" icon="font://&#xf060;" class="backnya"/>
	</ActionBar>
    <AbsoluteLayout width="100%" height="100%">
        <ScrollView scrollBarIndicatorVisible="false" width="100%">
            <StackLayout width="100%" height="100%">
                <StackLayout class="coverImage" backgroundColor="#00b7ff">
                    <GridLayout columns="auto, *" rows="auto, auto" width="90%"  marginBottom="10" marginTop="10">
                        <StackLayout row="0" col="0">
                            <Image src="{{ gbr }}" backgroundColor="white" width="40" height="40" padding="10" borderRadius="50" horizontalAlignment="center"></Image>
                        </StackLayout>
                        <Label
                        text="{{ product_name + ' (' + buyer_sku_code + ')'}}"
                        textWrap="true"
                        fontWeight="bold"
                        fontSize="13"
                        marginLeft="15"
                        row="0" col="1"
                        color="white"
                        marginTop="0"
                        />
                    </GridLayout>
                </StackLayout>
                <StackLayout marginTop="10" width="90%">
                    <Label
                        text="{{ 'Rp ' + price }}"
                        textWrap="true"
                        fontSize="17"
                        fontWeight="bold"
                        color="green"
                        horizontalAlignment="center"
                        />
                    <Label
                        text="{{ status }}"
                        textWrap="true"
                        fontSize="12"
                        color="blue"
                        horizontalAlignment="center"

                        />
                    <Label
                        text="{{ desc }}"
                        textWrap="true"
                        fontSize="12"
                        color="red"
                        horizontalAlignment="center"
                        marginBottom="10"

                        />
                </StackLayout>
                <StackLayout width="90%"  loaded="onLoaded"  >
                    <GridLayout columns="*" rows="*" height="60" marginBottom="5">
                        <TextField text="{{ phone }}" class="isihint" id="phone" col="0" row="0" fontSize="17" keyboardType="phone" hint="No Hp / ID Pelanggan" />
                    </GridLayout>
                    <StackLayout width="40%">
                        <GridLayout columns="*, *, *" rows="*" height="60">
                            <Image src="~/images/phonebook.png" width="30" col="0" row="0" tap="getPhone"></Image>
                            <Image src="~/images/fav.png" width="30" col="1" row="0" tap="OpenPopup"></Image>
                            <Image src="~/images/barcode.png" width="30" col="2" row="0" tap="barCode" ></Image>
                        </GridLayout>
                    </StackLayout>
                    <TextField  id="hargajual" class="isihint" fontSize="15" keyboardType="number" hint="Harga Jual" marginBottom="10"/>
                    <TextField  id="pin" class="isihint" fontSize="15" keyboardType="number" hint="Pin Transaksi" marginBottom="10"/>
                    <GridLayout columns="*,auto" rows="*"  marginTop="3">
                        <Label      marginLeft="13"
                        col="0" row="0"
                        fontSize="15" 
                        marginTop="10"
                        text="Punya Kupon Reward?"
                        textWrap="true"
                        horizontalAlignment="left"
                        />
                        <Switch col="1" row="0" fontSize="15" loaded="onSwitchLoadedkupon" backgroundColor="red" offBackgroundColor="black" horizontalAlignment="right"></Switch>
                    </GridLayout>
                    <TextField loaded="kebukakupon" id="kupon" class="isihint" fontSize="15" hint="Kode Kupon" visibility="{{ showKupon ? 'visible' : 'collapsed' }}" marginTop="-10"/>
                    <GridLayout columns="*,auto" rows="*"  marginTop="3">
                        <Label      marginLeft="13"
                        col="0" row="0"
                        fontSize="15" 
                        marginTop="10"
                        text="Simpan Ke Favorit?"
                        textWrap="true"
                        horizontalAlignment="left"
                        />
                        <Switch col="1" row="0" fontSize="15" loaded="onSwitchLoaded" backgroundColor="red" offBackgroundColor="black" horizontalAlignment="right"></Switch>
                    </GridLayout>
                    <TextField loaded="kebuka" id="nama" class="isihint" fontSize="15" hint="Nama Pelanggan" visibility="{{ showDetails ? 'visible' : 'collapsed' }}" marginTop="-10"/>
                    <Button id="ordernow" backgroundColor="#00b7ff" color="white" marginTop="15">
                        <FormattedString>
                            <Span text="BELI SEKARANG" fontSize="16"></Span>
                        </FormattedString>
                    </Button>
                    <!--<StackLayout marginTop="10" width="90%"><Label 
                        text="Penting:"
                        textWrap="true"
                        fontSize="12"
                        fontWeight="bold"
                        horizontalAlignment="left"
                        color="#999"
                        /><Label
                        text="Jika anda memiliki Kode Kupon, silahkan masukkan kode kupon anda dengan benar, kosongkan jika tidak memiliki."
                        textWrap="true"
                        fontSize="12"
                        horizontalAlignment="left"
                        color="#999"
                        /></StackLayout>-->
                </StackLayout>
            </StackLayout>
        </ScrollView>
        
        
        <StackLayout loaded="popup_loaded" class="popup-container" horizontalAlignment="center" verticalAlignment="center" visibility="{{ popup ? 'visible' : 'collapsed' }}">
            <ScrollView orientation="vertical" height="70%">
                <GridLayout class="popup-box" rows="*, auto" height="100%">
                    <StackLayout orientation="vertical" row="0">
                        <ListView items="{{ items }}" itemTap="onItemTapFromPopup" class="list-group">
                            <ListView.itemTemplate>
                                <StackLayout orientation="horizontal" class="list-group-item">
                                    <Label text="{{ nohp }}" textWrap="true"></Label>
                                </StackLayout>
                            </ListView.itemTemplate>
                        </ListView>
                    </StackLayout>
                    <StackLayout orientation="vertical" row="1">
                        <Button text="Close" tap="ClosePopup" />
                    </StackLayout>
                </GridLayout>
            </ScrollView>
        </StackLayout>
    </AbsoluteLayout>
</Page>