Mercurial > titip

<!doctype html>
<head>
  <title>Kalkulator</title>
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <style type="text/css">
    body {
      font-size: 12px;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      line-height: 1.5;
      margin: 0px;
      background-color: #eee;
    }
    #content {
      width: 100%;
      min-height: 100vh;
      padding: 10px;
      margin: auto;
      background-color: #fff;
    }
    @media (min-width: 600px) {
      #content {
        width: 500px;
      }
    }
    * { box-sizing: border-box; }
    ul { padding-left: 20px; }
    #n, .js { display: none; }
    input, button, select, option, .js { font-size: 150%; }
  </style>
</head>
<body>
  <div id="content">
    <h1>Konversi buat nitip</h1>
    <form>
      <p>
        <label for="x">Jumlah dalam yen:</label>
        <br>
        <input id="x" name="x" type="number" autofocus>
      </p>
      <p>
        <button type="submit">Hitung</button>
        <button type="reset">Hapus</button>
      </p>
    </form>
    <div class="js" id="loading">
      <p>Memuat data nilai tukar...</p>
    </div>
    <div class="js" id="ok">
      <p>
        Biaya:
      </p>
      <ul>
        <li>
          Bank transfer:
          <span id="result-bank"></span> IDR
          (<span id="rate-text"></span> IDR/JPY)
        </li>

        <li>
          Bank transfer (alt):
          <span id="result-bank-bni"></span> IDR
          (<span id="rate-text-bni"></span> IDR/JPY)
        </li>

        <li>
          PayPal:
          <span id="result-paypal"></span> JPY
        </li>
      </ul>
    </div>
    <div class="js" id="error">
      <p>Koneksi ke server nilai tukar bermasalah.</p>
    </div>

    <hr>
    <ul>
      <li>Ongkir, cukai, dll tidak termasuk.</li>
      <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim.</li>
      <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>.</li>
      <li>Perhitungan:
        <ul>
          <li>Bank: <code>jumlah &times; 1.07 &times; nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
          <li>Bank (alt): <code>jumlah &times; 1.02 &times; nilai_tukar + (25000 * ceil(jumlah / 35000))</code>, dibulatkan ke seribuan terdekat. Rekeningnya sama.</li>
          <li>PayPal: <code>jumlah &times; 1.05</code>, dibulatkan ke satuan terdekat.</li>
        </ul>
      </li>
      <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal).</li>
      <li>Data nilai tukar didapat dari layanan <a href="http://fixer.io/">Fixer.io</a>.</li>
      <li>Data nilai tukar "(alt)" didapat dari <a href="http://bni.co.id/informasivalas.aspx">BNI</a>.</li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
    var input = function() { return parseFloat($xForm.val()); }

    var $loading = $("#loading");
    var $doButton = $("button[type=submit]");
    var $xForm = $("#x");

    var locks = {};
    var lock = function(isLoading) {
      if (!isLoading && (locks.fixer === true || locks.bni === true)) { return; }
      $loading.toggle(isLoading);
      $doButton.attr("disabled", isLoading);
    };

    var rates = {};

    var displayResult = function() {
      if (rates.fixer === undefined || rates.bni === undefined) { return; }
      var x = input();

      $("#rate-text").text(rates.fixer.toLocaleString());
      $("#result-bank").text((Math.ceil(x * 1.07 * rates.fixer / 1000) * 1000).toLocaleString());

      if (rates.bni !== 0) {
        $("#rate-text-bni").text(rates.bni.toLocaleString());
        $("#result-bank-bni").text((Math.ceil(x * 1.02 * rates.bni / 1000) * 1000 + (25000 * Math.ceil(x / 35000))).toLocaleString());
      } else {
        $("#rate-text-bni").text('x');
        $("#result-bank-bni").text('x');
      };

      $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString());
      $("#ok").show();
      lock(false);
    };

    var fetchFixer = function() {
      if (rates.fixer !== undefined) { return; }

      lock(true);
      locks.fixer = true;

      $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
      .done(function(data) {
        rates.fixer = parseFloat(data.rates["IDR"]);

        displayResult();
      })
      .fail(function() {
        $("#error").show();
      })
      .always(function() {
        locks.fixer = false;
        lock(false);
      });
    };

    var fetchBni = function() {
      if (rates.bni !== undefined) { return; }

      lock(true);
      locks.bni = true;

      $.get("bni-jpyidr.txt")
      .done(function(data) {
        if (data === "") {
          rates.bni = 0;
        } else {
          rates.bni = parseFloat(data);
        }

        displayResult();
      })
      .fail(function() {
        $("#error").show();
      })
      .always(function() {
        locks.bni = false;
        lock(false);
      });
    };

    var action = function(e) {
      e.preventDefault()
      $(".js").hide()

      var x = input();

      if (x === NaN || x === undefined) { return false; };

      fetchFixer();
      fetchBni();

      displayResult();
    };

    $("form").submit(action)
    $("button[type=reset]").click(function(e) { xForm.focus(); });
  </script>
</body>
author	nanaya <me@myconan.net>
date	Wed, 03 Aug 2016 22:48:47 +0900
parents	13d740477326
children	72ee98d173a4