Mercurial > titip
view index.html @ 16:1f999668080f
Migrate to eu central bank data and use local jquery
author | nanaya <me@nanaya.pro> |
---|---|
date | Fri, 08 Jun 2018 22:11:01 +0900 |
parents | 72ee98d173a4 |
children | aef027838046 |
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"> * { box-sizing: border-box; } body { font-size: 12px; font-family: Arial, sans-serif; line-height: 1.5; margin: 0; background-color: #eee; } .content { width: 100%; max-width: 500px; min-height: 100vh; padding: 10px; margin: auto; background-color: #fff; } input, button, select, option, .js { font-size: 150%; } .input { font-size: 16px; width: 100%; } .button { font-size: 16px; padding: 5px 10px; } .result { font-size: 16px; padding: 10px; background-color: #eee; } .result__title { padding: 0; margin: 0 0 10px; } .result__list { margin: 0; } .list { padding-left: 20px; } .u-hidden { display: none !important; } </style> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function () { var $loading = $(".js-x-loading"); var $ok = $(".js-x-ok"); var $error = $(".js-x-error"); var $form = $(".js-x-form"); var $submit = $(".js-x-submit"); var $reset = $(".js-x-reset"); var $input = $(".js-x-input"); var $rateEu = $(".js-x-rate-eu"); var $resultEu = $(".js-x-result-eu"); var $rateBni = $(".js-x-rate-bni"); var $resultBni = $(".js-x-result-bni"); var $resultPaypal = $(".js-x-result-paypal"); var locks = {}; var rates = {}; var val = function() { return parseFloat($input.val()); } var lock = function(isLoading) { if (!isLoading && (locks.eu || locks.bni)) { return; } show(isLoading ? $loading : null); $submit.attr("disabled", isLoading); }; var displayResult = function() { if (rates.eu == null || rates.bni == null) { return; } var x = val(); var resultEu = (Math.ceil(x * 1.07 * rates.eu / 1000) * 1000).toLocaleString(); $rateEu.text(rates.eu.toLocaleString()); $resultEu.text(resultEu); var resultBni; var rateBni; if (rates.bni !== 0) { rateBni = rates.bni.toLocaleString(); resultBni = (Math.ceil(x * 1.04 * rates.bni / 1000) * 1000 + (25000 * Math.ceil(x / 35000))).toLocaleString(); } else { rateBni = "x"; resultBni = "x"; }; $rateBni.text(rateBni); $resultBni.text(resultBni); $resultPaypal.text((Math.round(x * 1.05)).toLocaleString()); lock(false); show($ok); }; var fetchEu = function() { if (rates.fixer != null) { return; } lock(true); locks.fixer = true; $.get("eu-daily.xml") .always(function() { locks.fixer = false; lock(false); }).done(function(data) { var $data = $(data); var idrEur = parseFloat($data.find("[currency=IDR]").attr("rate")); var jpyEur = parseFloat($data.find("[currency=JPY]").attr("rate")); rates.eu = idrEur / jpyEur; displayResult(); }).fail(function() { error("connection"); }); }; var fetchBni = function() { if (rates.bni != null) { return; } lock(true); locks.bni = true; $.get("bni-jpyidr.txt") .always(function() { locks.bni = false; lock(false); }).done(function(data) { if (data === "") { rates.bni = 0; } else { rates.bni = parseFloat(data); } displayResult(); }).fail(function() { error("connection"); }); }; var error = function(err) { var message; if (err === "connection") { message = "Koneksi ke server nilai tukar bermasalah."; } else if (err === "missing") { message = "Masukkan jumlah."; } $error.text(message); show($error); } var show = function($el) { $error.toggleClass("u-hidden", $el !== $error); $ok.toggleClass("u-hidden", $el !== $ok); $loading.toggleClass("u-hidden", $el !== $loading); } var action = function(e) { e.preventDefault(); show(); if (!isFinite(val())) { error("missing"); return; }; fetchEu(); fetchBni(); displayResult(); }; $form.submit(action) $reset.click(function() { $input.focus(); }); }); </script> </head> <body> <div class="content"> <h1>Konversi buat nitip</h1> <form class="js-x-form"> <label> <p> Jumlah dalam yen: <br> <input class="input js-x-input" type="number" autofocus> </p> </label> <p> <button type="submit" class="button js-x-submit">Hitung</button> <button type="reset" class="button js-x-reset">Hapus</button> </p> </form> <div class="result js-x-loading u-hidden"> Memuat data nilai tukar... </div> <div class="result js-x-ok u-hidden"> <p class="result__title"> Biaya: </p> <ul class="result__list"> <li> Bank transfer: <strong><span class="js-x-result-eu"></span> IDR</strong> (<span class="js-x-rate-eu"></span> IDR/JPY) <li> Bank transfer (alt): <strong><span class="js-x-result-bni"></span> IDR</strong> (<span class="js-x-rate-bni"></span> IDR/JPY) <li> PayPal: <strong><span class="js-x-result-paypal"></span> JPY</strong> </ul> </div> <div class="result js-x-error u-hidden"> </div> <hr> <ul class="list"> <li>Ongkir, cukai, dll tidak termasuk. <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim. <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>. <li>Perhitungan: <ul class="list"> <li>Bank: <code>jumlah × 1.07 × nilai_tukar</code>, dibulatkan ke seribuan terdekat. <li>Bank (alt): <code>jumlah × 1.04 × nilai_tukar + (25000 * ceil(jumlah / 35000))</code>, dibulatkan ke seribuan terdekat. Rekeningnya sama. <li>PayPal: <code>jumlah × 1.05</code>, dibulatkan ke satuan terdekat. </ul> <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal). <li>Data nilai tukar didapat dari <a href="https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/index.en.html">Bank Sentral Eropa</a>. <li>Data nilai tukar "(alt)" didapat dari <a href="http://bni.co.id/informasivalas.aspx">BNI</a>. </ul> </div> </body>