<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
            integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
            crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        body {
            padding: 10px;
        }

        .card {
            margin: 5px;
        }
    </style>
    <script>
        async function generateNumberFile() {
            let number = Number($("#numberCount").val());
            let bits = $("#numberSize").val();
            window.location.href = "{{url_for("downloadRandomNumbers")}}?numberCount=" + number + "&numberSize=" + bits;
        }

        async function onGenerate() {
            let bits = Number($("#numberOfBits").val());
            let number = $("#randomNumber");
            const response = await fetch("{{url_for("randomNumberRequest")}}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    "numberOfBits": bits
                }),
            });
            const body = await response.text()
            number.text(body)
        }

        function refreshImage() {
            let source = "{{ url_for("getBitmap") }}?t=" + new Date().getTime();
            $("#bitmapImage").attr("src", source);
        }

        async function runSts() {
            let output = $("#stsOutput")
            let runButton = $("#stsRunButton")
            let loading = $("#stsLoading")
            let bitCount = $("#testedFileBitCount").val()
            let finalAnalysisReport = $("#analysis-output")
            let approxEntropy = $("#entropy-output")
            let blockFrequency = $("#blockFreq-output")
            let cumulativeSums = $("#cumSum-output")
            let fft = $("#fft-output")
            let frequency = $("#frequency-output")
            let linearComplexity = $("#linComplex-output")
            let longestRun = $("#lonRun-output")
            let nonOverlappingTemplate = $("#nonOverlapTempl-output")
            let overlappingTemplate = $("#overlapTempl-output")
            let randomExcursions = $("#randExc-output")
            let randomExcursionsVariant = $("#randExcVar-output")
            let rank = $("#rank-output")
            let runs = $("#runs-output")
            let serial = $("#serial-output")
            let universal = $("#universal-output")

            if (bitCount == null || bitCount === "") return;

            output.text("")
            finalAnalysisReport.text("")
            approxEntropy.text("")
            blockFrequency.text("")
            fft.text("")
            frequency.text("")
            linearComplexity.text("")
            longestRun.text("")
            nonOverlappingTemplate.text("")
            overlappingTemplate.text("")
            randomExcursions.text("")
            randomExcursionsVariant.text("")
            rank.text("")
            runs.text("")
            serial.text("")
            universal.text("")
            cumulativeSums.text("")

            loading.css("display", "flex")
            runButton.prop("disabled", true)

            let result = await fetch("{{ url_for("runStsRequest") }}?bitCount=" + bitCount, {
                method: "POST"
            });
            let json = await result.json();

            console.log(json)

            runButton.prop("disabled", false)
            loading.css("display", "none")

            output.text(json.stdout)
            finalAnalysisReport.text(json.finalAnalysisReport)
            approxEntropy.text(json.ApproximateEntropy)
            blockFrequency.text(json.BlockFrequency)
            fft.text(json.FFT)
            frequency.text(json.Frequency)
            linearComplexity.text(json.LinearComplexity)
            longestRun.text(json.LongestRun)
            nonOverlappingTemplate.text(json.NonOverlappingTemplate)
            overlappingTemplate.text(json.OverlappingTemplate)
            randomExcursions.text(json.RandomExcursions)
            randomExcursionsVariant.text(json.RandomExcursionsVariant)
            rank.text(json.Rank)
            runs.text(json.Runs)
            serial.text(json.Serial)
            universal.text(json.Universal)
            cumulativeSums.text(json.CumulativeSums)
        }
    </script>
</head>
<body>
<div style="display: flex; flex-direction: row;">
    <div class="card" style="flex:1">
        <div class="card-body" style="display: flex; flex-direction: column">
            <h5 class="card-title">Number generator</h5>
            <label for="numberOfBits" class="form-label">Number of bits</label>
            <input type="number" id="numberOfBits" class="form-control"/>
            <h3 id="randomNumber"></h3>
            <button onclick="onGenerate()" class="btn btn-primary">Generate</button>
        </div>
    </div>
    <div class="card" style="flex:1">
        <div class="card-body">
            <h5 class="card-title">Bitmap</h5>
            <div style="width: 100%; height: 128px; display: flex; justify-content: center; align-items: center">
                <img style="margin-left: auto; margin-right: auto" id="bitmapImage" src="">
            </div>
            <button onclick="refreshImage()" class="btn btn-primary"
                    style="width: 100%; margin-bottom: 5px; margin-top: 5px">Generate
            </button>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">NIST STS test</h5>
        <label for="testedFileBitCount" class="form-label">Number of bits in tested file:</label>
        <input id="testedFileBitCount" type="number" class="form-control">

        <div style="width: 100%; display: flex; flex-direction: row">
            <button id="stsRunButton" onclick="runSts()" class="btn btn-primary"
                    style="flex: 10; margin-top: 5px; margin-bottom: 5px">Run
            </button>
            <div id="stsLoading" style="width: 50px; display: none; align-items: center; justify-content: center;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="output-tab" data-bs-toggle="tab" data-bs-target="#output-tab-pane"
                        type="button" role="tab" aria-controls="output-tab-pane" aria-selected="true">Output
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="analysis-tab" data-bs-toggle="tab" data-bs-target="#analysis-tab-pane"
                        type="button" role="tab" aria-controls="analysis-tab-pane" aria-selected="false">Final analysis
                    report
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="entropy-tab" data-bs-toggle="tab" data-bs-target="#entropy-tab-pane"
                        type="button" role="tab" aria-controls="entropy-tab-pane" aria-selected="false">Approximate
                    entropy
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="blockFreq-tab" data-bs-toggle="tab" data-bs-target="#blockFreq-tab-pane"
                        type="button" role="tab" aria-controls="blockFreq-tab-pane" aria-selected="false">Block
                    frequency
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="fft-tab" data-bs-toggle="tab" data-bs-target="#fft-tab-pane"
                        type="button" role="tab" aria-controls="fft-tab-pane" aria-selected="false">FFT
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="frequency-tab" data-bs-toggle="tab" data-bs-target="#frequency-tab-pane"
                        type="button" role="tab" aria-controls="frequency-tab-pane" aria-selected="false">Frequency
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="linComplex-tab" data-bs-toggle="tab" data-bs-target="#linComplex-tab-pane"
                        type="button" role="tab" aria-controls="linComplex-tab-pane" aria-selected="false">Linear
                    complexity
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="lonRun-tab" data-bs-toggle="tab" data-bs-target="#lonRun-tab-pane"
                        type="button" role="tab" aria-controls="lonRun-tab-pane" aria-selected="false">Longest run
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="nonOverlapTempl-tab" data-bs-toggle="tab"
                        data-bs-target="#nonOverlapTempl-tab-pane"
                        type="button" role="tab" aria-controls="nonOverlapTempl-tab-pane" aria-selected="false">Non
                    overlapping template
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="overlapTempl-tab" data-bs-toggle="tab"
                        data-bs-target="#overlapTempl-tab-pane"
                        type="button" role="tab" aria-controls="overlapTempl-tab-pane" aria-selected="false">Overlapping
                    template
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="randExc-tab" data-bs-toggle="tab" data-bs-target="#randExc-tab-pane"
                        type="button" role="tab" aria-controls="randExc-tab-pane" aria-selected="false">Random
                    excursions
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="randExcVar-tab" data-bs-toggle="tab" data-bs-target="#randExcVar-tab-pane"
                        type="button" role="tab" aria-controls="randExcVar-tab-pane" aria-selected="false">Random
                    excursions variant
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="rank-tab" data-bs-toggle="tab" data-bs-target="#rank-tab-pane"
                        type="button" role="tab" aria-controls="rank-tab-pane" aria-selected="false">
                    Rank
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="runs-tab" data-bs-toggle="tab" data-bs-target="#runs-tab-pane"
                        type="button" role="tab" aria-controls="runs-tab-pane" aria-selected="false">
                    Runs
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="serial-tab" data-bs-toggle="tab" data-bs-target="#serial-tab-pane"
                        type="button" role="tab" aria-controls="serial-tab-pane" aria-selected="false">
                    Serial
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="universal-tab" data-bs-toggle="tab" data-bs-target="#universal-tab-pane"
                        type="button" role="tab" aria-controls="universal-tab-pane" aria-selected="false">
                    Universal
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="cumSum-tab" data-bs-toggle="tab" data-bs-target="#cumSum-tab-pane"
                        type="button" role="tab" aria-controls="cumSum-tab-pane" aria-selected="false">
                    Cumulative sums
                </button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade" id="output-tab-pane" role="tabpanel" aria-labelledby="output-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="stsOutput"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="stsOutput">STS test output</label>
                </div>
            </div>
            <div class="tab-pane fade show active" id="analysis-tab-pane" role="tabpanel" aria-labelledby="analysis-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="analysis-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="analysis-output">Final analysis</label>
                </div>
            </div>
            <div class="tab-pane fade" id="entropy-tab-pane" role="tabpanel" aria-labelledby="entropy-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="entropy-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="entropy-output">Approximate entropy</label>
                </div>
            </div>
            <div class="tab-pane fade" id="blockFreq-tab-pane" role="tabpanel" aria-labelledby="blockFreq-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="blockFreq-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="blockFreq-output">Approximate entropy</label>
                </div>
            </div>

            <div class="tab-pane fade" id="fft-tab-pane" role="tabpanel" aria-labelledby="fft-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="fft-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="fft-output">FFT</label>
                </div>
            </div>

            <div class="tab-pane fade" id="frequency-tab-pane" role="tabpanel" aria-labelledby="frequency-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="frequency-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="frequency-output">Frequency</label>
                </div>
            </div>

            <div class="tab-pane fade" id="linComplex-tab-pane" role="tabpanel" aria-labelledby="linComplex-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="linComplex-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="linComplex-output">Linear complexity</label>
                </div>
            </div>

            <div class="tab-pane fade" id="lonRun-tab-pane" role="tabpanel" aria-labelledby="lonRun-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="lonRun-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="lonRun-output">Longest run</label>
                </div>
            </div>

            <div class="tab-pane fade" id="nonOverlapTempl-tab-pane" role="tabpanel"
                 aria-labelledby="nonOverlapTempl-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="nonOverlapTempl-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="nonOverlapTempl-output">Non overlapping template</label>
                </div>
            </div>

            <div class="tab-pane fade" id="overlapTempl-tab-pane" role="tabpanel" aria-labelledby="overlapTempl-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="overlapTempl-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="overlapTempl-output">Overlapping template</label>
                </div>
            </div>
            <div class="tab-pane fade" id="randExc-tab-pane" role="tabpanel" aria-labelledby="randExc-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="randExc-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="randExc-output">Random excursions</label>
                </div>
            </div>
            <div class="tab-pane fade" id="randExcVar-tab-pane" role="tabpanel" aria-labelledby="randExcVar-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="randExcVar-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="randExcVar-output">Random excursions variant</label>
                </div>
            </div>
            <div class="tab-pane fade" id="rank-tab-pane" role="tabpanel" aria-labelledby="rank-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="rank-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="rank-output">Rank</label>
                </div>
            </div>

            <div class="tab-pane fade" id="runs-tab-pane" role="tabpanel" aria-labelledby="runs-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="runs-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="runs-output">Runs</label>
                </div>
            </div>

            <div class="tab-pane fade" id="serial-tab-pane" role="tabpanel" aria-labelledby="serial-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="serial-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="serial-output">Serial</label>
                </div>
            </div>

            <div class="tab-pane fade" id="universal-tab-pane" role="tabpanel" aria-labelledby="universal-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="universal-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="universal-output">Universal</label>
                </div>
            </div>

            <div class="tab-pane fade" id="cumSum-tab-pane" role="tabpanel" aria-labelledby="cumSum-tab">
                <div class="form-floating">
                    <textarea class="form-control" id="cumSum-output"
                              style="white-space: pre-line; font-family: monospace; height: 300px" disabled></textarea>
                    <label for="cumSum-output">Cumulative sums</label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body" style="display: flex; flex-direction: column">
        <h5 class="card-title">File with random numbers</h5>
        <label for="numberCount" class="form-label">Number of generated numbers</label>
        <input id="numberCount" type="number" class="form-control">
        <label for="numberSize" class="form-label">Bit size of generated numbers</label>
        <input id="numberSize" type="number" class="form-control">
        <button id="filedDownloadButton" onclick="generateNumberFile()" class="btn btn-primary"
                style="margin-top: 10px">
            DownloadFile
        </button>
    </div>
</div>
</body>
</html>