{% extends 'index.html' %}

{% block content %}


<div class="container flow">
    <h1 class="header">Administration</h1>
    {% if is_default_password %}
        <div style="padding-block: 1rem;">
            <p style="color: var(--piigab-red)">
            Please change your password. Keeping the default password is
            not secure.
            </p>
        </div>
    {% endif %}
    <div id="configurationTabs">
        <ul>
            <li
                {% if tab=='P': %}
                class="selected"
                {% endif %}
                ><a href="/administration">Administration</a></li>

                <li {% if tab=='P1' : %} class="selected" {% endif %}><a href="/basic_settings">Basic Settings</a></li>
                <li {% if tab=='P2' : %} class="selected" {% endif %}><a href="/licenses">Licenses</a></li>
            </ul>
        </div>
        <br />

        <div class="sub-header">&darr;&nbsp;Ethernet Settings</div>
        <div id="" class="">

            {% if isEth0Static %}
                {%set eth_type = 'S' %}
            {% else %}
                {% set eth_type = 'D' %}
            {% endif %}
            <section class="grid">
                <!-- Test by connection pinging address -->
                <div class="">
                    <div class="grid-two-column align-items-center">
                        <div>
                            <label class="fw-500" for="test-ping-ip">Test ping</label>
                        </div>

                        <div>
                            <input id="test-ping-ip" name="test-ping-ip" type="text" value="{{nameserv}}" /> 
                            <button class="btn" onclick="testConnectivity()">Test</button>
                        </div>
                    </div>
                    <span id="test-connection-feeback"></span>

                </div>
                <form id="AdpOneForm" >
                    <div class="grid">
                        <div hidden
                        hx-get="/ethernet-settings?ethernet-type={{eth_type}}"
                        hx-target="#ethernet-settings-form" 
                        hx-trigger="load"
                        hx-indicator="#load-eth-spinner"
                        ></div>

                        <div id="ethernet-settings-form">
                            <div class="grid align-items-center">
                                <div id="load-eth-spinner" class="htmx-indicator flex">
                                    <img alt="loading ethernet settings..." src="/img/spinner.gif" style="width: 30px; height: 30px;"/>
                                    <span>loading ethernet settings...</span>
                                </div>
                            </div>
                        </div>
                        <div class="grid-two-column">
                            <label for="ping_address">Ping Reboot</label>
                            <div class="flex">
                                <input type="text" 
                                        placeholder="ping address" 
                                        value="{{ping_address}}" 
                                        id="ping_address"
                                        name="ping_address" />
                            
                                <select name="ping_interval" id="ping_interval">
                                    {% for p_i in pingIntervalArray: %}
                                    <option value="{{p_i}}" {% if ping_interval==p_i %} selected="selected" {% endif %}>
                                        {{p_i}}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                        </div>
                    <div id="ethernet-settings-feedback" class=""></div>
                    <div>

                        <input type="button" value="Save Ethernet Settings" 
                        hx-post="/setEthernet" 
                        hx-target="#ethernet-settings-feedback" 
                        hx-include="#AdpOneForm" />
                        <input type="button" value="Refresh" onclick="refreshPage();" />
                    </div>
                </form>
            </section>
        </div>

        <div class="sub-header">&darr;&nbsp;Manage Configuration Files</div>
        <div class="subsubsection">
            <div class="info floatLeft">Show INI Files:</div>
            <div class="floatLeft" style="width: 400px">
                <select name="csvselecter" id="inifilesel">
                    <option value="">No File</option>
                    {% for inifile in inifileArray: %}
                    <option value={{inifile}}>{{inifile}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="floatLeft">
                <input type="button" value="Show" onclick="showFile();" style="width: 80px;" />
            </div>
            <div class="clearBoth"></div>
        </div>

        <div class="subsubsection">
            <div class="info floatLeft">Upload CSV/XML/INI-File</div>
            <div class="floatLeft" style="width: 400px">&nbsp;</div>
            <div class="floatLeft" style="width: 80px">
                <input type="button" value="Upload" onclick="uploadCsvFile();" style="width: 80px;" />
            </div>
            <div class="floatLeft" style="width: 630px;">
                <form id="ffilens" method="post" action="/uploadCSV" enctype="multipart/form-data">
                    <input id="conffile" type="file" accept=".csv,.xml,.ini" name="conffile" size="70" />
                </form>
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="subsubsection">
            <div class="info floatLeft">Download CSV/XML/INI-File</div>
            <div class="floatLeft" style="width: 400px">
                <select name="csvselecter" id="csvseldl">
                    <option value="">No File</option>
                    {% for csv in csvArray+iniArray: %}
                    <option value="{{csv}}">{{csv}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="floatLeft">
                <input type="button" value="Download" onclick="downloadCsvFile();" style="width: 80px;" />
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="subsubsection">
            <div class="info floatLeft">Remove CSV/XML-File</div>
            <div class="floatLeft" style="width: 400px">
                <select name="csvselecter1" id="csvselrm">
                    <option value="">No File</option>
                    {% for csv in csvArray: %}
                    <option value="{{csv}}">{{csv}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="floatLeft">
                <input type="button" value="Remove" onclick="rmCsvFile();" style="width: 80px;" />
            </div>
            <div class="clearBoth"></div>
        </div>

        <div class="sub-header">&darr;&nbsp;Configuration Backup</div>

        <!--Backup section -->
        <section class="container flow">
            <!--save -->
            <div class="grid-three-column">
                <p class="fw-600">Back up Current Configuration</p>
                <form id="backup" method="post" action="/backupConf" enctype="multipart/form-data">
                    <input type="submit" value="Create backup" class="btn" />
                </form>
            </div>

            <div class="grid">
                <p class="fw-600">Configure from backup</p>
                <form id="bffilens" method="post" action="/uploadBackupConf" enctype="multipart/form-data">
                    <div class="grid-two-column">
                        <input class="btn" id="bconffile" type="file" accept=".tgz" name="bconffile" size="74" />
                        <input type="submit" value="Upload Configuration" class="btn" />
                    </div>
                </form>

            </div>
        </section>


        {%set pi900_type = get_pi900_type() %}
        {% if pi900_os == '2016.02' %}
        <div>
            <div class="sub-header">&darr;&nbsp;Update Software (900S/T style)</div>
            {% if mbushubVersion|length > 0: %}
            <div>Installed MBusHub version: {{mbushubVersion}}</div>
            {% endif %}
            {% if quickpostVersion|length > 0: %}
            <div>Installed Quickpost version: {{quickpostVersion}}</div>
            {% endif %}
            {% if modbusVersion|length > 0: %}
            <div>Installed Modbus2Mbus version: {{modbusVersion}}</div>
            {% endif %}
            {% if wirelessVersion|length > 0: %}
            <div>Installed Wireless version: {{wirelessVersion}}</div>
            {% endif %}
            {% if hanbusVersion|length > 0: %}
            <div>Installed Hanbus2Mbus version: {{hanbusVersion}}</div>
            {% endif %}
            <table style="vertical-align: top; margin: 20px 0;" width="650px">
                <tr>
                    <td class="style3">Install Firmware/Software (<filename>_{{pi900_type}}.tgz)</td>
                    <td class="style3"></td>
                    <td valign="top">
                        <input type="button" value="Install" onclick="installSoftware();" class="styleButton" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <form id="Form2" enctype="multipart/form-data" action="/install_software" method="post">
                            <br><input id="software" type="file" accept=".tgz" name="filename" size="74" />
                        </form>
                    </td>
                    <td align="left">
                        <div id="showSpinner"></div>
                    </td>
                </tr>
            </table>
            <p>Please refresh the page after installing new software (Press CTRL+F5)</p>
        </div>
        {% else: %}
        <div>

        <section class="flow">
            <div class="sub-header">&darr;&nbsp;Update Software</div>

            <div class="flow">
                <div class="grid-two-column">
                    <div class="flex" style="align-items: center;">
                        <span class="fw-600">Available Software</span>
                        <div class="">
                            <div id="spinner-container"></div>
                        </div>
                    </div>
                    <button id="update-software-list-button" class="btn">Update List</button>
                </div>

                <p>Please restart the system after you have finished installing all software.</p>
            </div>
            <p id="install-feedback"></p>
            <small>
                <p>
                    You will need internet access and have port 80 open (outgoing traffic only) enabled on your network, 
                    In order to update from our remote package repository.
                    <span>Contact PiiGAB Support for more information.</span>
                </p>
            </small>
            <table style="min-height: 400px;" width="100%" class="table">
                <thead>
                    <tr>
                        <th>Software</th>
                        <th>Installed Version</th>
                        <th>Server version</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="opkg-package-view">
                </tbody>
            </table>

                <section>
                    <div class="grid-two-column">
                        <label class="fw-600">Install package</label>
                        <div>
                                <form class="flex align-items-center" onsubmit="installOPKG(event)" method="post" id="opkg-package-upload-form" enctype="multipart/form-data">
                                    <input id="opkgsoftware" type="file" accept=".ipk" name="filename" size="74" />
                                    <button class="btn" type="submit" >Install ipk</button>
                                </form>
                        </div>
                    </div>

                    <div>
                        <p id="install-feedback-msg"></p>
                    </div>
                    <div hidden="true" id="showSpinner">
                        <img src="/img/spinner.gif" alt="loading spinner" height="42" width="42">
                        <p>Installing, please wait for page to reload...</p>
                    </div>
                </section>
        </section>

        {% endif %}


        <section class="flow" style="--flow-gap: 1.25rem;">

                <!-- Date & Time -->
                <div class="sub-header">&darr;&nbsp;Time and Date</div>
                <div class="grid-three-column" >
                    <span class="bold">Local Time</span>
                    <span class="">{{currtime}}</span>
                </div>

                <!-- Hardware clock -->
                <div class="grid-three-column">
                    <span class="bold"> Hardware Clock (UTC)</span>
                    <span class=""> {{hwtime}} </span>
                </div>
                <!-- Timezones -->
                <div class="">
                    <div class="grid-three-column" style="gap: 1rem">
                        <label class="fw-600" for="ttimezones-select">Select Timezone</label>
                        <select class="btn" onclick="fetchAvailableTimezones()" name="timezones-select" id="timezones-select">
                            <option>Loading Timezones...</option>
                        </select>
                        <button class="btn" onclick="setTimeZone()">Set Time Zone</button>
                    </div>
                    <p id="timezone-feedback"></p>
                </div>

                <section class="flow">
                    <div>
                        <div class="grid-three-column">
                            <label class="fw-600" for="TimeDate">
                            Time and Date
                            </label>
                            <input type="text" id="TimeDate" name="TimeDate" value="{{currtime}}" placeholder="YYYY-MM-DD hh:mm:ss" pattern="" />
                            <button class="btn" id="set-timedate-button" >Set time</button>
                        </div>
                        <span id="timedate-feedback"></span>

                    </div>
                </section>

                <!-- ntp -->
                <section class="flow">
                    <div>
                        <form id="SetNTPForm" method="post" action="/administration_setntp" enctype="multipart/form-data">
                                <div class="grid-three-column">
                                    <label class="fw-600" for="ntpIP">
                                        Network Time Protocol (NTP)
                                    </label>
                                    <input type="text" name="ntpIP" value="{{ntpIP}}" placeholder="NTP Disabled"/>
                                    
                                    <input class="btn" type="submit" value="Set NTP" />
                                </div>
                            </div>
                        </form>
                    
                    <article class="flow">
                        <p>Hardware clock is set to UTC according to Local time and Time Zone.</p>
                        <p>The Stockholm timezone for example, the local time will be 1 hour (winter) and 2 hours (summer) ahead of the
                        hardware clock.</p>
                        <p>
                            NTP: hostname NTP server requires nameserver.
                        </p>
                    </article>
                </section>

                <!-- System reboot -->
                <section class="flow">
                    <div class="sub-header">&darr;&nbsp;Reboot Pi-{{pi900_type}}</div>
                    <p id="reboot-feedback"></p>
                    <div>
                        <input class="btn" value="Reboot" onclick="reboot();" type="button"/>
                    </div>
                </section>

        </section>
    </div>

    </div>
</div>
</div>

{% endblock content %}


{% block scripts %}

<script src="js/piigab.js"></script>
<script src="js/administration.js"></script>
<script>
function installSoftware() {
    let fileName = document.getElementById('software').value
    if (!fileName.endsWith('_{{pi900_type}}.tgz')) {
        alert('\"' + fileName + '\" is not a valid filename.\nAll software suitable for Pi-{{pi900_type}} ends with _{{pi900_type}}.tgz');
        return;
    }
    if (window.confirm("Are you sure you want to install \"" + fileName + "?")) {
        document.getElementById('Form2').submit();
        let spinner = document.getElementById("showSpinner");
        spinner.innerHTML = "<img src=\"/img/spinner.gif\" alt=\"spinner\" height=\"42\" width=\"42\"><br><p>Installing, please wait for page to reload...</p>";
    }
}

async function installOPKG(event) {
    event.preventDefault()
    let fileupload = document.getElementById('opkgsoftware')
    let fileName = fileupload.value

    const form = document.getElementById('opkg-package-upload-form')
    const data = new FormData(form)

    if (!fileName.endsWith('{{pi900_ipk}}.ipk')) {
        alert('\"' + fileName + '\" is not a valid filename.\nAll software suitable for Pi-{{pi900_type}} ends with _{{pi900_ipk}}.ipk');
        return;
    }
    if (window.confirm(`Are you certain you want to install ${fileName}? Please verify that you obtained this file from PiiGAB before installing.` )) {
        
        let feedback = document.getElementById("install-feedback-msg");
        feedback.innerHTML = "<img src=\"/img/spinner.gif\" alt=\"spinner\" height=\"42\" width=\"42\"><br><p>Installing, please wait...</p>";
        const res = await fetch('/api/v1/system/packages/install/ipk', {
            method: 'POST',
            body: data
        })
        if (res.ok) {
            feedback.innerHTML = "Sucessfully installed package."
        } else {
            feedback.innerHTML = "Failed to install ipk package.";
        }
        form.reset()
    }
}

</script>

{% endblock scripts %}