<!doctype html>
<html lang="en">

    <head>
        <title>{% block title %}{% endblock %}</title>
        <meta charset="utf-8"/>
        <!-- Favicon -->
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='favicon/favicon.ico') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon/favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon/favicon-16x16.png') }}">
        <!--Open Graph Protocol -->
        <meta name="title" property="og:title" content="Exchange Radar"/>
        <meta property="og:type" content="website">
        <meta name="image" property="og:image" content="{{ url_for('static', path='favicon/favicon-180x180.png') }}"/>
        <meta name="description" property="og:description" content="Get real-time trading data from different Crypto Exchanges and configure hooks, trends, notifications, messages based on custom rules."/>
        <meta property="og:url" content="{{ http_trades_url }}"/>
        <!-- CSS -->
        <link rel="stylesheet" href="{{ url_for('static', path='css/style.css') }}" type="text/css"/>
        <link rel="stylesheet" href="{{ url_for('static', path='css/theme.css') }}" type="text/css"/>
        <link rel="stylesheet" href="{{ url_for('static', path='css/custom.css') }}" type="text/css"/>
        <link rel="stylesheet" href="{{ url_for('static', path='css/exchanges.css') }}" type="text/css"/>
        <link rel="stylesheet" href="{{ url_for('static', path='css/toggle-switch.css') }}" type="text/css"/>
        <!-- Fonts -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css"/>
        <!-- JS -->
        <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/web-socket-js/1.0.0/web_socket.min.js"></script>

        <script>
            function createElement(obj) {
                const span = document.createElement("span");

                if (obj.is_seller === false) {
                    span.className = "order_buy";
                } else {
                    span.className = "order_sell";
                }

                span.innerHTML = ` ${obj.message} \n`;
                return span
            }

            function addRow(obj) {
                const elem = createElement(obj)

                const selector = '#messages';

                $(`${selector}`).prepend(elem);

                const length = $(selector).find('span').length;
                if (length > {{ max_rows * 2 }}) {
                    $(`${selector} > span:last`).remove();
                }
            }

            function setVolume(obj) {
                const volume = obj.volume.toLocaleString('en-US', {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 8
                });
                $(`#${obj.trade_symbol}_volume`).text(volume);

                if (obj.hasOwnProperty('price')) {
                    const volume_in_currency = (obj.volume * obj.price).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                    $(`#${obj.trade_symbol}_volume_in_currency`).text(`${volume_in_currency} ${obj.currency}`);
                }
            }

            function setVolumeTrades(obj) {
                const volume_trades_buys = obj.volume_trades[0].toLocaleString('en-US', {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 8
                });
                $(`#${obj.trade_symbol}_volume_trades_buy_orders`).text(volume_trades_buys);

                const volume_trades_sells = obj.volume_trades[1].toLocaleString('en-US', {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 8
                });
                $(`#${obj.trade_symbol}_volume_trades_sell_orders`).text(volume_trades_sells);
            }

            function setNumberTrades(obj) {
                $(`#${obj.trade_symbol}_number_trades_buy_orders`).text(obj.number_trades[0]);
                $(`#${obj.trade_symbol}_number_trades_sell_orders`).text(obj.number_trades[1]);
            }

            function retrieveData() {
                $.get('{{ http_stats_url }}').done(function (response) {
                    setVolume(response);
                    setVolumeTrades(response);
                    setNumberTrades(response);
                })
                $.get('{{ http_trades_url }}').done(function (response) {
                    for (const obj of response.r) {
                        addRow(obj);
                    }
                })
            }

            function setupAndStartWS() {
                const ws = new WebSocket("{{ websocket_url }}");

                ws.onopen = (event) => {
                    console.log("onopen")
                };

                ws.onclose = (event) => {
                    console.log("onclose")
                };

                ws.onmessage = function (event) {
                    const obj = JSON.parse(event.data);
                    setPageTitle(obj);
                    addRow(obj);
                    setVolume(obj);
                    setVolumeTrades(obj);
                    setNumberTrades(obj);
                }

                ws.onclose = function(e) {
                    console.log("Socket is closed. Reconnect will be attempted in 1 second.", e.reason);
                    setTimeout(function() {
                        setupAndStartWS()
                    }, 1000);
                };

                ws.onerror = function(err) {
                    console.error("Socket encountered error: ", err.message, "Closing socket");
                    ws.close();
                };
            }
            function formatPage() {
                const subURL = new URL("{{ http_trades_url }}").pathname.replace(/^\/feed/, "");
                $("a").each(function () {
                    const link = $(this).attr('href');
                    if (link === subURL) {
                        $(this).css({'font-weight': 'bold', 'font-size': '1.2em'});
                    }
                });
            }
        </script>
        <script>
            $(document).ready(function() {
                setupAndStartWS();
                retrieveData();
                formatPage();
            });
        </script>
        <script>
            $(document).ready(function () {
                const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
                const currentTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

                if (currentTheme) {
                    document.documentElement.setAttribute('data-theme', currentTheme);

                    if (currentTheme === 'dark') {
                        toggleSwitch.checked = true;
                    }
                }

                function switchTheme(e) {
                    if (e.target.checked) {
                        document.documentElement.setAttribute('data-theme', 'dark');
                        localStorage.setItem('theme', 'dark');
                    } else {
                        document.documentElement.setAttribute('data-theme', 'light');
                        localStorage.setItem('theme', 'light');
                    }
                }

                toggleSwitch.addEventListener('change', switchTheme, false);
            });
        </script>

        {% block javascript %}{% endblock %}
    </head>

    <body>
        <div class="padded-boxes">
            <section>
                <div class="padded">
                    <!-- box 1 content -->
<pre>
------------------------------------------------------------------------------------------------------------
     <b>DATETIME UTC    | EXCHANGE |        PRICE        |          QUANTITY          |          TOTAL</b>
------------------------------------------------------------------------------------------------------------
<span id="messages"></span></pre>
                </div>
            </section>
            <section class="right">
                <div class="padded">
                    <!-- box 2 content -->
<pre>
<b>Exchanges:</b>

{{ exchanges|safe }}


<b>Bitcoin:</b>

<a href="/BTC">BTC all trades</a>
{%- if coin == "BTC" %}
  <i>Daily Volume: <span id="BTC_volume">-</span> BTC @ <span id="BTC_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="BTC_volume_trades_buy_orders">-</span> BTC, Sells <span id="BTC_volume_trades_sell_orders">-</span> BTC</i>
  <i>Daily Number Trades: Buys <span id="BTC_number_trades_buy_orders">-</span>, Sells <span id="BTC_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/BTC/octopuses">BTC octopus trades</a>
<a href="/BTC/dolphins">BTC dolphin trades</a> 💾
<a href="/BTC/whales">BTC whale trades</a> 💾

<b>Ethereum:</b>

<a href="/ETH">ETH all trades</a>
{%- if coin == "ETH" %}
  <i>Daily Volume: <span id="ETH_volume">-</span> ETH @ <span id="ETH_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="ETH_volume_trades_buy_orders">-</span> ETH, Sells <span id="ETH_volume_trades_sell_orders">-</span> ETH</i>
  <i>Daily Number Trades: Buys <span id="ETH_number_trades_buy_orders">-</span>, Sells <span id="ETH_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/ETH/octopuses">ETH octopus trades</a>
<a href="/ETH/dolphins">ETH dolphin trades</a> 💾
<a href="/ETH/whales">ETH whale trades</a> 💾

<b>Chainlink:</b>

<a href="/LINK">LINK all trades</a>
{%- if coin == "LINK" %}
  <i>Daily Volume: <span id="LINK_volume">-</span> LINK @ <span id="LINK_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="LINK_volume_trades_buy_orders">-</span> LINK, Sells <span id="LINK_volume_trades_sell_orders">-</span> LINK</i>
  <i>Daily Number Trades: Buys <span id="LINK_number_trades_buy_orders">-</span>, Sells <span id="LINK_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/LINK/octopuses">LINK octopus trades</a>
<a href="/LINK/dolphins">LINK dolphin trades</a> 💾
<a href="/LINK/whales">LINK whale trades</a> 💾

<b>Fantom:</b>

<a href="/FTM">FTM all trades</a>
{%- if coin == "FTM" %}
  <i>Daily Volume: <span id="FTM_volume">-</span> FTM @ <span id="FTM_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="FTM_volume_trades_buy_orders">-</span> FTM, Sells <span id="FTM_volume_trades_sell_orders">-</span> FTM</i>
  <i>Daily Number Trades: Buys <span id="FTM_number_trades_buy_orders">-</span>, Sells <span id="FTM_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/FTM/octopuses">FTM octopus trades</a>
<a href="/FTM/dolphins">FTM dolphin trades</a> 💾
<a href="/FTM/whales">FTM whale trades</a> 💾

<b>Pepe:</b>

<a href="/PEPE">PEPE all trades</a>
{%- if coin == "PEPE" %}
  <i>Daily Volume: <span id="PEPE_volume">-</span> PEPE @ <span id="PEPE_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="PEPE_volume_trades_buy_orders">-</span> PEPE, Sells <span id="PEPE_volume_trades_sell_orders">-</span> PEPE</i>
  <i>Daily Number Trades: Buys <span id="PEPE_number_trades_buy_orders">-</span>, Sells <span id="PEPE_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/PEPE/octopuses">PEPE octopus trades</a>
<a href="/PEPE/dolphins">PEPE dolphin trades</a> 💾
<a href="/PEPE/whales">PEPE whale trades</a> 💾

<b>LTO Network:</b>

<a href="/LTO">LTO all trades</a> 💾
{%- if coin == "LTO" %}
  <i>Daily Volume: <span id="LTO_volume">-</span> LTO @ <span id="LTO_volume_in_currency">-</span></i>
  <i>Daily Trades Volume: Buys <span id="LTO_volume_trades_buy_orders">-</span> LTO, Sells <span id="LTO_volume_trades_sell_orders">-</span> LTO</i>
  <i>Daily Number Trades: Buys <span id="LTO_number_trades_buy_orders">-</span>, Sells <span id="LTO_number_trades_sell_orders">-</span></i>
{%- endif %}
<a href="/LTO/octopuses">LTO octopus trades</a> 💾
<a href="/LTO/dolphins">LTO dolphin trades</a> 💾
<a href="/LTO/whales">LTO whale trades</a> 💾


<span class="order_buy">&nbsp;&nbsp;</span> Matched Buy Order <span class="order_sell">&nbsp;&nbsp;</span> Matched Sell Order


In a single transaction:

<i>>> octopus</i>
More than 1,000 USD/USDT or 0.04 BTC or 0.6 ETH

<i>>> dolphin</i>
More than 10,000 USD/USDT or 0.4 BTC or 6 ETH

<i>>> whale</i>
More than 100,000 USD/USDT or 4 BTC or 60 ETH


<label class="switch"><span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#ffd43b"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg></span><span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg></span><input type="checkbox" class="input"><span class="slider"></span></label>


<a href="https://pauloantunes.com">Contact</a> | <a href="https://github.com/pantunes/exchange-radar">Github</a>

</pre>
                </div>
            </section>
        </div>
    </body>

</html>
