TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!DOCTYPE html>
<html>
    <head>
        <!-- Notes: This should be open in its original path-->
        <meta charset="utf-8">
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <script src="../script/jquery-3.6.0.min.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui header">
                <div class="content">
                    Advance Statistics Operations
                    <div class="sub header">Selected Range: <span id="daterange"></span></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <h3>Export Data</h3>
            <p>You can export the statistics collected by Zoraxy in the selected range for further analysis</p>
            <button class="ui basic teal button" onclick="handleExportAsCSV();"><i class="download icon"></i> Export CSV</button>
            <button class="ui basic pink button" onclick="handleExportAsJSON();"><i class="download icon"></i> Export JSON</button>
            <div class="ui divider"></div>
            <h3>Reset Statistics</h3>
            <p>You can reset the statistics within the selected time range for debug purpose. Note that this operation is irreversible.</p>
            <button class="ui basic red button" onclick="handleResetStats();"><i class="trash icon"></i> RESET STATISTICS</button>
            <br><br>
            <button class="ui basic button iframeOnly"  style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
        </div>
        <script>
            let startDate = "";
            let endDate = "";

            /*
                Actions Handler
            */

            function handleExportAsJSON(){
                window.open(`/api/analytic/exportRange?start=${startDate}&end=${endDate}&format=json`, 'download');
            }

            function handleExportAsCSV(){
                window.open(`/api/analytic/exportRange?start=${startDate}&end=${endDate}&format=csv`, 'download');
            }

            function handleResetStats(){
                if (confirm("Confirm remove statistics from " + startDate + " to " + endDate +"?")){
                    $.ajax({
                        url: "/api/analytic/resetRange?start=" + startDate + "&end=" + endDate,
                        method: "DELETE",
                        success: function(data){
                            if (data.error != undefined){
                                parent.msgbox(data.error, false, 5000);
                            }else{
                                parent.msgbox("Statistic Cleared");
                                parent.hideSideWrapper();
                            }
                        }
                    })
                }
            }

            /*
                Data Loading
            */
            function loadDateRange(){
                if (window.location.hash.length > 1){
                    try{
                        var dateRange = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
                        startDate = dateRange[0].trim();
                        endDate = dateRange[1].trim();

                        //Check if they are valid dates
                        if (!isValidDateFormat(startDate)){
                            alert("Start date is not a valid date: " + startDate);
                            return
                        }

                        if (!isValidDateFormat(endDate)){
                            alert("End date is not a valid date: " + endDate);
                            return
                        }

                        //Sort the two dates if they are placed in invalid orders
                        var [s, e] = sortDates(startDate, endDate);
                        startDate = s;
                        endDate = e;

                        $("#daterange").html(startDate + ` <i class="arrow right icon" style="margin-right: 0;"></i> ` + endDate);
                    }catch(ex){
                        alert("Invalid usage: Invalid date range given");
                    }
                }
            }
            loadDateRange();

            function isValidDateFormat(dateString) {
                if (dateString.indexOf("_") >= 0){
                    //Replace all the _ to -
                    dateString = dateString.split("_").join("-");
                }
                // Create a regular expression pattern for the yyyy-mm-dd format
                const pattern = /^\d{4}-\d{2}-\d{2}$/;

                // Check if the input string matches the pattern
                if (!pattern.test(dateString)) {
                    return false; // Invalid format
                }

                // Parse the date components
                const year = parseInt(dateString.substring(0, 4), 10);
                const month = parseInt(dateString.substring(5, 7), 10);
                const day = parseInt(dateString.substring(8, 10), 10);

                // Check if the parsed components represent a valid date
                const date = new Date(year, month - 1, day);
                if (
                    date.getFullYear() !== year ||
                    date.getMonth() + 1 !== month ||
                    date.getDate() !== day
                ) {
                    return false; // Invalid date
                }

                return true; // Valid date in yyyy-mm-dd format
            }

            function sortDates(date1, date2) {
                // Parse the date strings
                const parsedDate1 = new Date(date1);
                const parsedDate2 = new Date(date2);

                // Compare the parsed dates
                if (parsedDate1 > parsedDate2) {
                    // Swap the dates
                    const temp = date1;
                    date1 = date2;
                    date2 = temp;
                }

                // Return the swapped dates
                return [date1, date2];
            }


        </script>
    </body>
</html>