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">
        * {
            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 &times; 1.07 &times; nilai_tukar</code>, dibulatkan ke seribuan terdekat.
                    <li>Bank (alt): <code>jumlah &times; 1.04 &times; nilai_tukar + (25000 * ceil(jumlah / 35000))</code>, dibulatkan ke seribuan terdekat. Rekeningnya sama.
                    <li>PayPal: <code>jumlah &times; 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>
author	nanaya <me@nanaya.pro>
date	Fri, 08 Jun 2018 22:11:01 +0900
parents	72ee98d173a4
children	aef027838046