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.01 &times; nilai_tukar + 25000</code>, dibulatkan ke seribuan terdekat.</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>
    </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.round(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.01 * rates.bni / 1000) * 1000 + 25000).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 action = function(e) {
      e.preventDefault()
      $(".js").hide()

      var x = input();

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

      if (rates.fixer === undefined) {
        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);
        });
      };

      if (rates.bni === undefined) {
        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);
        });
      };

      displayResult();
    };

    $("form").submit(action)
    $("button[type=reset]").click(function(e) { xForm.focus(); });
  </script>
</body>
author	nanaya <me@myconan.net>
date	Thu, 19 Nov 2015 02:19:03 +0900
parents	9e5f60aae01c
children	c1086c23ef29