Mercurial > titip
view index.html @ 9:c7f8d6c21edd
Increase rate
author | nanaya <me@myconan.net> |
---|---|
date | Fri, 15 Jan 2016 20:04:18 +0900 |
parents | d0bb084e17b4 |
children | bc14e1e8d046 |
line wrap: on
line source
<!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 × 1.07 × nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li> <li>Bank (alt): <code>jumlah × 1.02 × nilai_tukar + 25000</code>, dibulatkan ke seribuan terdekat. Rekeningnya sama.</li> <li>PayPal: <code>jumlah × 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.02 * 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>