{% extends '_quickpost_layout.html' %}

{% block content %}

<style>
    input:invalid {
        color: var(--piigab-red);
    }
</style>
<section>
    <div style="margin-left: 20px;">
        <h1 class="header">QuickPost Configuration</h1>
        <h5>Version {{qpversion}}</h5>
        {% if qpLicense|length > 3 %}
        <h4 class="success">You have a QuickPost license</h4>
        {% elif qpLicense|length > 3 and numberOfTags > 5000: %}
        <h4 class="fail">Please contact PiiGAB if you need more tags.</h4>
        {% else %}
        <h4 class="fail">You have no QuickPost license.</h4>
        {% endif %}
        <div id="configurationTabs">
            <ul>
                <li>
                    <a href="/quickpost_config">Configure</a>
                </li>
                <li>
                    <a href="/quickpost_log">Log</a>
                </li>
                <li>
                    <a href="/quickpost_security">Security</a>
                </li>
                <li>
                    <a href="/quickpost_listfiles">List Files</a>
                </li>
                <li>
                    <a href="/quickpost_manual">Documentation</a>
                </li>
            </ul>
        </div>
        <section class="container">
            <div class="sub-header">
                &darr;&nbsp;Upload Server
            </div>

            <form id="quickpostForm" name="Setup" action="/quickpost_setconf" method="post">
                <!-- Upload server section -->
                <section class="grid">

                    <section class="grid-two-column align-items-center">

                        <!-- filename -->
                        <label for="filename">Filename</label>
                        <div>
                            <input name="filename" id="filename" value="{{filename}}" required pattern="\w{3,250}" />
                            <div style="color: var(--piigab-red);" id="filename-feedback"></div>
                        </div>
                        <!-- format -->
                        <label for="file_format">Format</label>
                        {% set format_options = [('Format 1','FORMAT1'),('Format 2','FORMAT2'),('Format 3','FORMAT3'),('Format 4','FORMAT4')] %}
                        <div>
                            <select id="file_format" name="file_format">
                                {% for name,format_option in format_options %}
                                {% if format_option == file_format %}
                                <option selected value="{{format_option}}">{{name}}</option>
                                {% else %}
                                <option value="{{format_option}}">{{name}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>

                        <!-- upload method -->
                        <label for="upload_method">Upload method</label>
                        {% set methods =
                        [('Sftp','SFTP'),('HttpPost (http)','HTTPPOST'),
                        ('HttpsPost (https)', 'HTTPSPOST'),
                        ('Ftp', 'FTP')] %}
                        <div>
                            <select id="upload_method" name="upload_method">
                                {% for (name, val) in methods %}
                                {% if val == upload_method %}
                                <option selected value="{{val}}">{{name}}</option>
                                {% else %}
                                <option value="{{val}}">{{name}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </section>
                    <!--private key (sftp) -->
                    <div id="sftp" class="grid-two-column align-items-center">
                        <!--  use sftp private key -->
                        <label for="sftp_use_private_key">Use SFTP private key auth: </label>
                        <div>
                            <select id="sftp_use_private_key" name="sftp_use_private_key">
                                {% if sftp_use_private_key == 'YES' %}
                                <option selected value="YES">Yes</option>
                                <option value="NO">No</option>
                                {% else %}
                                <option value="YES">Yes</option>
                                <option selected value="NO">No</option>
                                {% endif %}
                            </select>
                            <select name="sftp_private_key" id="sftp_key_select">
                                <option value="">&lt;select file&gt;</option>
                                {% for keyfile in sshKeyArray: %}
                                {% if sftp_private_key == keyfile %}
                                <option selected value="{{keyfile}}">{{keyfile}}</option>
                                {% else %}
                                <option value="{{keyfile}}">{{keyfile}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>

                    </div>
                    <!-- https cert -->
                    <div id="https" class="grid-two-column align-items-center">
                        <!-- use cert -->
                        <label for="use_ssl_cert">Use SSL cert:</label>
                        <div>
                            <select id="use_ssl_cert" name="use_ssl_cert">
                                {% if use_ssl_cert=="YES" : %}
                                <option selected value="YES">Yes</option>
                                <option value="NO">No</option>

                                {% else %}
                                <option value="YES">Yes</option>
                                <option selected value="NO">No</option>
                                {% endif %}
                            </select>
                            <select name="certificate" id="crtselect">
                                <option value="">&lt;select file&gt;</option>
                                {% for crtf in crtfArray: %}
                                {% if certificate == crtf %}
                                <option value="{{crtf}}" selected> {{crtf}}</option>
                                {% else %}
                                <option value="{{crtf}}"> {{crtf}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <section class="grid-two-column align-items-center">
                        <!-- ip -->
                        <label for="remote_ip">Server IP</label>
                        <input name="remote_ip" id="remote_ip" type="text" value="{{remote_ip}}" />
                        <!-- remote port -->
                        <label for="remote_port">Remote port</label>
                        <input placeholder="using default port value" name="remote_port" id="remote_port" type="text"
                            value="{{remote_port}}" />
                        <!-- username -->
                        <label for="username">Username</label>
                        <input name="username" id="username" type="text" value="{{username}}" />
                        <!-- password -->
                        <label for="password">Password</label>
                        <input name="password" id="password" type="text" value="{{password}}" />
                        <!-- path -->
                        <label for="remote_path">Path</label>
                        <input name="remote_path" id="remote_path" value="{{remote_path}}" type="text" />
                    </section>
                </section>

                <!-- mbus ascii -->
                <section class="grid">
                    <div class="sub-header">
                        &darr;&nbsp;M-BusAscii Client Configuration
                    </div>

                    <div class="grid-two-column align-items-center">
                        <label for="settings_mode">Settings</label>
                        <div>
                            <select id="settings_mode">
                                {% if mbusasciiSelector == 'BASIC' %}
                                <option value='ADVANCED'>Custom</option>
                                <option value='BASIC' selected>Default</option>
                                {% else %}
                                <option value='ADVANCED' selected>Custom</option>
                                <option value='BASIC'>Default</option>
                                {% endif %}
                            </select>
                        </div>
                    </div>

                    <!-- MBUS ASCII Advanced settings -->
                    <div id="advanced" class="grid-two-column align-items-center">
                        <label for="mbus_ascii_server_ip">M-Bus ASCII Server IP</label>
                        <input name="mbus_ascii_server_ip" id="mbus_ascii_server_ip" value="{{mbus_ascii_server_ip}}"
                            type="text">
                        <label for="mbus_ascii_server_port">M-Bus ASCII Server Port</label>
                        <input name="mbus_ascii_server_port" id="mbus_ascii_server_port"
                            value="{{mbus_ascii_server_port}}" type="text">
                        <label for="read_timeout">Read Timeout [s]</label>
                        <input name="read_timeout" id="read_timeout" value="{{read_timeout}}" type="text" />
                        <label for="n_bad_reads">N Bad Reads</label>
                        <input name="n_bad_reads" id="n_bad_reads" value="{{n_bad_reads}}" type="text" />
                    </div>
                </section>
                <div class="sub-header">
                    &darr;&nbsp;Data Readout
                </div>
                <!-- Data readout -->
                <section class="grid">
                    <section class="grid-two-column align-items-center">
                        <!-- configuration file -->
                        <label for="csvfile">Configuration File</label>
                        <div>
                            <select name="csvfile" id="csvselect">
                                <option value="">&lt;select file&gt;</option>
                                {% for csv in csvArray: %}
                                {% if csvfile == csv %}
                                <option value="{{csv}}" selected>{{csv}}</option>
                                {% else %}
                                <option value="{{csv}}">{{csv}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                            <button type="button" id="show_csv_button">Show</button>
                        </div>
                        <!-- select reporting -->
                        <label for="read_frequency">Reporting</label>
                        <div>
                            <select id="read_frequency" name="read_frequency">
                                {% set frequency_options =
                                [('24h','24h'),('12h','12h'),('6h','6h'),('15min','15min'),('Custom','ADVANCED')]
                                %}
                                {% for (name,val) in frequency_options %}
                                {% if val == selectChoice %}
                                <option value="{{val}}" selected>{{name}}</option>
                                {% else %}
                                <option value="{{val}}">{{name}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </section>

                    <section id="advanced_read">
                        <!-- custom reporting -->
                        
                        <div class="grid-two-column align-items-center">
                            <label for="upload_time">Upload time (UTC) [HH:MM]</label>
                            <input name="upload_time" id="upload_time" type="text" value="{{upload_time}}" />
                            <label for="read_period">Read Period [min]</label>
                            <input name="read_period" id="read_period" type="text" value="{{read_period}}" />
                            <label for="read_offset">Offset [min]</label>
                            <input name="read_offset" id="read_offset" type="text" value="{{read_offset}}" />
                            <label for="upload_period">Upload Period [min]</label>
                            <input name="upload_period" id="upload_period" type="text" value="{{upload_period}}" />
                        </div>
                    </section>

                    <!-- keep files days -->
                    <div class="grid-two-column align-items-center">
                        <label for="keep_files_days">Keep Files [Days]</label>
                        <input name="file_keep_days" id="file_keep_days" type="text" value="{{file_keep_days}}" />
                    </div>
                </section>

                <!-- Startup -->
                <section>
                    <div class="sub-header">
                        &darr;&nbsp;Startup
                    </div>

                    <section class="grid">
                        <div class="grid-two-column align-items-center">
                            <label for="enable">Enable Quickpost</label>
                            <div>
                                <select name="enable" id="enable">
                                    {% if enable == 'YES' %}
                                    <option selected value="YES">Yes</option>
                                    <option value="NO">No</option>
                                    {% else %}
                                    <option value="YES">Yes</option>
                                    <option selected value="NO">No</option>
                                    {% endif%}
                                </select>
                            </div>
                        </div>

                        <div class="grid-two-column align-items-center">
                            <label for="startup_read_and_upload">Read & Upload at startup</label>
                            <div>
                                <select id="startup_read_and_upload" name="startup_read_and_upload">
                                    {% if startup_read_and_upload == 'YES' %}
                                    <option selected value="YES">Yes</option>
                                    <option value="NO">No</option>
                                    {% else %}
                                    <option value="YES">Yes</option>
                                    <option selected value="NO">No</option>
                                    {% endif%}
                                </select>
                            </div>
                        </div>
                        <div>
                            <button type="submit" id="quickpostSubmit" name="quickpostSubmit">Save and
                                Restart
                            </button>
                        </div>
                        <div class="grid">

                            <div>
                                <button id="restart-quickpost-btn"> Restart </button>
                            </div>
                            <div id="quickpost-restart-feedback"></div>
                        </div>
                    </section>
                </section>
            </form>
        </section>
    </div>
</section>
{% endblock content %}


{% block scripts %}


<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/piigab.js"></script>
<script type="text/javascript">

    // setup event listeners
    document.getElementById('upload_method').onchange = (event) => uploadMethod()
    document.getElementById('settings_mode').onchange = (event) => settingsMode()
    document.getElementById('show_csv_button').onclick = () => showCsvFile()
    document.getElementById('read_frequency').onchange = (event) => onReadFrequencyChanged(event.target.value)
    document.getElementById('quickpostSubmit').onclick = () => submitForm()
    onReadFrequencyChanged(document.getElementById('read_frequency').value)
    document.getElementById('filename').oninput = (event) => {
        validateFilename(event.target.value, document.getElementById('filename-feedback'))
    }


    validateFilename(document.getElementById('filename').value, document.getElementById('filename-feedback'))



    function submitForm() {
        const form = document.forms['quickpostForm']
        if (form.checkValidity() == true) {
            form.submit();
        }
    }


    function onReadFrequencyChanged(val) {
        const read_freq = document.getElementById("read_frequency")
        const read_period = document.getElementById("read_period")
        const upload_period = document.getElementById("upload_period")
        const read_offset = document.getElementById("read_offset")
        const advancedReadSection = document.getElementById("advanced_read")
        advancedReadSection.style.display = "none"
        switch (val) {
            case '24h':
                read_period.value = 1440;
                upload_period.value = 1440;
                read_offset.value = 0;
                break
            case '12h':
                read_period.value = 720;
                upload_period.value = 720;
                read_offset.value = 0;
                break
            case '6h':
                read_period.value = 360;
                upload_period.value = 360;
                read_offset.value = 0;
                break
            case '1h':
                read_period.value = 60;
                upload_period.value = 60;
                read_offset.value = 0;
                break
            case '15min':
                read_period.value = 15;
                upload_period.value = 15;
                read_offset.value = 0;
                break
            break
            case 'ADVANCED':
                advancedReadSection.style.display = "contents"
            break
            default:
                advancedReadSection.style.display = "contents"
        }
    }

    function validateFilename(filename, feedbackDiv) {
        if (feedbackDiv === null) {
            console.error("Feedbackdiv is null")
            return
        }

        if (! typeof filename === 'string') {
            feedbackDiv.innerText = "invalid filename"
            return
        }

        if (filename.length === 0) {
            feedbackDiv.innerText = "filename is required"
            return
        }

        if (document.getElementById("filename").validity.patternMismatch) {
            feedbackDiv.innerText = "No spaces in filename, underscores are allowed. english letters only. Numbers are allowed."
        } else {
            feedbackDiv.innerText = ""
        }
    }

    document.getElementById('restart-quickpost-btn').onclick = async (e) => {
        e.preventDefault()
        const res = await fetch('/quickpost_restart')

        if (res.ok) {
            document.getElementById('quickpost-restart-feedback').innerText = "Quickpost restarted"
        } else {
            document.getElementById('quickpost-restart-feedback').innerText = "Failed to restart"
        }
    }


    function initSettings() {
        var selecter = '{{selectChoice}}';
        var mbusasciiSel = '{{mbusasciiSelector}}';
        $('#empty').show();
        $('#https').hide();
        $('#sftp').hide();
        $('#hidden').show();

        if (mbusasciiSel == "ADVANCED") {
            $('#advanced').show();
        } else {
            $('#advanced').hide();
        }

        if (($('#upload_method').val() == 'SFTP')) {
            $('#sftp').show();
            $('#https').hide();
            $('#empty').hide();
        }
        else if (($('#upload_method').val() == 'HTTPSPOST')) {
            $('#sftp').hide();
            $('#https').show();
            $('#empty').hide();
        }
        else {
            $('#sftp').hide();
            $('#https').hide();
            $('#empty').show();
        }
    }
    function settingsMode() {
        if (($('#settings_mode').val() == "ADVANCED")) {
            $('#advanced').show();
        }
        else {
            $('#advanced').hide();
            document.getElementById("mbus_ascii_server_ip").value = "127.0.0.1";
            document.getElementById("mbus_ascii_server_port").value = 9002;
            document.getElementById("read_timeout").value = 20;
            document.getElementById("n_bad_reads").value = 3;
        }
    }

    function uploadMethod() {
        if (($('#upload_method').val() == 'SFTP')) {
            $('#sftp').show();
            $('#https').hide();
            $('#empty').hide();
        }
        else if (($('#upload_method').val() == 'HTTPSPOST')) {
            $('#sftp').hide();
            $('#https').show();
            $('#empty').hide();
        }
        else {
            $('#sftp').hide();
            $('#https').hide();
            $('#empty').show();
        }
    }

    function showCsvFile() {
        var sel = $('#csvselect');
        if (sel) {
            var val = sel.val();
            if (val != '')
                window.open("/showCsvFile?FILE=" + val);
        }
    }
    function removeSSHkey() {
        var fileName = $('#ssh_key_file').val();
        if (window.confirm("Are you sure you want to remove \"" + fileName + "?")) {
            $('#removekeyform').submit();
        }
    }

    initSettings();
</script>
{% endblock scripts %}