<!DOCTYPE html>
<html lang="en">
<head>
    <script>
    ((document) => {
        'use strict';
        let fastNode;
        let failed;
        let isRunning;
        const DEST_LIST = [
            'cdn.jsdelivr.net',
            'fastly.jsdelivr.net',
            'gcore.jsdelivr.net',
            'testingcf.jsdelivr.net',
            'test1.jsdelivr.net'
        ];
        const PREFIX = '//';
        const SOURCE = DEST_LIST[0];
        const starTime = Date.now();
        const TIMEOUT = 2000;
        const STORE_KEY = 'jsdelivr-auto-fallback';
        const TEST_PATH = '/gh/PipecraftNet/jsdelivr-auto-fallback@main/empty.css?';
        const shouldReplace = (text) => text && text.includes(PREFIX + SOURCE);
        const replace = (text) => text.replace(PREFIX + SOURCE, PREFIX + fastNode);
        const setTimeout = window.setTimeout;
        const $ = document.querySelectorAll.bind(document);

        const replaceElementSrc = () => {
            let element;
            let value;
            for (element of $('link[rel="stylesheet"]')) {
                value = element.href;
                if (shouldReplace(value) && !value.includes(TEST_PATH)) {
                    element.href = replace(value);
                }
            }

            for (element of $('script')) {
                value = element.src;
                if (shouldReplace(value)) {
                    const newNode = document.createElement('script');
                    newNode.src = replace(value);
                    element.defer = true;
                    element.src = '';
                    element.before(newNode);
                    element.remove();
                }
            }

            for (element of $('img')) {
                value = element.src;
                if (shouldReplace(value)) {
                    // Used to cancel loading. Without this line it will remain pending status.
                    element.src = '';
                    element.src = replace(value);
                }
            }

            // All elements that have a style attribute
            for (element of $('*[style]')) {
                value = element.getAttribute('style');
                if (shouldReplace(value)) {
                    element.setAttribute('style', replace(value));
                }
            }

            for (element of $('style')) {
                value = element.innerHTML;
                if (shouldReplace(value)) {
                    element.innerHTML = replace(value);
                }
            }
        };

        const tryReplace = () => {
            if (!isRunning && failed && fastNode) {
                console.warn(SOURCE + ' is not available. Use ' + fastNode);
                isRunning = true;
                setTimeout(replaceElementSrc, 0);
                // Some need to wait for a while
                setTimeout(replaceElementSrc, 20);
                // Replace dynamically added elements
                setInterval(replaceElementSrc, 500);
            }
        };

        const checkAvailable = (url, callback) => {
            let timeoutId;
            const newNode = document.createElement('link');
            const handleResult = (isSuccess) => {
                if (!timeoutId) {
                    return;
                }

                clearTimeout(timeoutId);
                timeoutId = 0;
                // Used to cancel loading. Without this line it will remain pending status.
                if (!isSuccess) newNode.href = 'data:text/plain;base64,';
                newNode.remove();
                callback(isSuccess);
            };

            timeoutId = setTimeout(handleResult, TIMEOUT);

            newNode.addEventListener('error', () => handleResult(false));
            newNode.addEventListener('load', () => handleResult(true));
            newNode.rel = 'stylesheet';
            newNode.text = 'text/css';
            newNode.href = url + TEST_PATH + starTime;
            document.head.insertAdjacentElement('afterbegin', newNode);
        };

        const cached = (() => {
            try {
                return Object.assign(
                    {},
                    JSON.parse(localStorage.getItem(STORE_KEY) || '{}')
                );
            } catch {
                return {};
            }
        })();

        const main = () => {
            cached.time = starTime;
            cached.failed = false;
            cached.fastNode = null;

            for (const url of DEST_LIST) {
                checkAvailable('https://' + url, (isAvailable) => {
                    // console.log(url, Date.now() - starTime, Boolean(isAvailable));
                    if (!isAvailable && url === SOURCE) {
                        failed = true;
                        cached.failed = true;
                    }

                    if (isAvailable && !fastNode) {
                        fastNode = url;
                    }

                    if (isAvailable && !cached.fastNode) {
                        cached.fastNode = url;
                    }

                    tryReplace();
                });
            }

            setTimeout(() => {
                // If all domains are timeout
                if (failed && !fastNode) {
                    fastNode = DEST_LIST[1];
                    tryReplace();
                }

                localStorage.setItem(STORE_KEY, JSON.stringify(cached));
            }, TIMEOUT + 100);
        };

        if (
            cached.time &&
            starTime - cached.time < 60 * 60 * 1000 &&
            cached.failed &&
            cached.fastNode
        ) {
            failed = true;
            fastNode = cached.fastNode;
            tryReplace();
            setTimeout(main, 1000);
        } else {
            main();
        }
    })(document);
</script>
    <meta charset="UTF-8">
    <title>monitors report</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="icon" href="https://fastly.jsdelivr.net/gh/openutx/static/image/fav.ico">

</head>

<style>
    .container {
        margin: 20px;
        background-color: {{ background_color }};
    }
    .card-body {
        background-color: {{ background_color }};
    }
    .footer {
        position: relative;
        height: 40px;
        bottom: 20px;
        left: 0px;
        right: 0px;
        text-align: center;
        background-color: {{ background_color }};
    }
    body {
        background-color: {{ background_color }};
        margin-bottom: 40px;
    }
</style>

<body>
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="">monitors report</a>
</nav>

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" data-toggle="tab" href="#nav-stages" role="tab"
           aria-controls="nav-stages" aria-selected="true">Stages</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#nav-charts" role="tab"
           aria-controls="nav-charts" aria-selected="false">Charts</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#nav-others" role="tab"
           aria-controls="nav-others" aria-selected="false">Others</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#nav-helper" role="tab"
           aria-controls="nav-helper" aria-selected="false">Help</a>
    </div>
</nav>

<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-stages" role="tabpanel">
        {% if thumbnail_list %}
        <div class="container">
            <div class="card border-light">
                <div class="card-body">
                    <ul style="margin-top: 10px;">
                        {% for name, each_thumbnail in thumbnail_list %}
                        <li>
                            <h5> {{ name }} </h5>
                            <img src="data:image/png;base64,{{ each_thumbnail }}"/>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    <div class="tab-pane fade" id="nav-charts" role="tabpanel">
        <div class="container">
            <div class="card border-light">
                <div class="card-body">
                    <h2>Charts</h2>
                    <div>
                        {{ chart }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="nav-others" role="tabpanel">
        <div class="container">
        </div>
        {% if cost_dict %}
        <div class="container">
            <div class="card border-light">
                <div class="card-body">
                    <h2>Time Cost between stages</h2>
                    <p> Calculate the time spent on stage changes. </p>
                    {% for name, result in cost_dict.items() %}
                    <h4> stage {{ name }} </h4>
                    <ul>
                        <li>range: {{ result[0].frame_id }} - {{ result[1].frame_id }} ({{ result[0].timestamp }} - {{
                            result[1].timestamp }})
                        </li>
                        <li>time cost: {{ result[1].timestamp - result[0].timestamp }}</li>
                    </ul>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if extras %}
        <div class="container">
            <div class="card border-light">
                <div class="card-body">
                    <h2>Extras</h2>
                    {% for name, value in extras.items() %}
                    <h4> {{ name }} </h4>
                    <p> {{ value }} </p>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="tab-pane fade" id="nav-helper" role="tabpanel">
        <div class="container">
            <h5 class="card-title">Stages(阶段)</h5>
            <span class="card-text">报告中 "Stages" 将显示您的视频中发生的事情，带有精确的时间戳和缩略图。</span><br>
            <span class="card-text">
                <br>
                - `stable` 表示在此期间（几乎）没有发生任何事情<br>
                - `unstable` 表示发生了什么事<br>
                - `unspecific` 意味着你的模型不知道`这个frame应该是哪类`（低于阈值）<br>
                <br>
            </span>
        </div>
    </div>
</div>


<footer class="footer">
    <div class="container-fluid">
        <HR>
        <span class="text-muted">
            Built with <a href="">@monitors</a> Page generated: {{ timestamp }}
        </span>
    </div>
</footer>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
