{% extends '_mbushub_layout.html' %}

{% block content %}

<div id="configurationTabs">
    <ul>
        <li>
            <a href="/mbushub_portconf?SLNR=0">Master Port</a>
        </li>
        <li>
        <a href="/mbushub_portconf?SLNR=1">Slave Port 1</a>
        </li>
        <li>
        <a href="/mbushub_portconf?SLNR=2">Slave Port 2</a>
        </li>
        <li>
            <a href="/mbushub_portconf?SLNR=3">Slave Port 3</a>
        </li>
        <li>
            <a href="/mbushub_portconf?SLNR=4">Slave Port 4</a>
        </li>
        <li><a href="/mbushub_logging">Logging</a></li>
        <li>
            <a href="/mbushub_manual">Documentation</a>
        </li>
    </ul>
</div>
<section>
    <br>
    <div>
        <div style="margin-left: 20px;" class="flow">
            <h1 class="header">Logging</h1>

            <ul class="flex" style="list-style: none;" >
                <li>
                    <form id="startlog" method="post" action="/mbushub_logging?start=1" enctype="multipart/form-data">
                        <button type="submit" class="btn"> Start</button>
                    </form>
                </li>
                <li>
                    <form id="showlog" method="post" action="/mbushub_logging?show=1" enctype="multipart/form-data">
                        <button class="btn" type="submit"> Show</button>
                    </form>
                </li>
                {% if log_days == 0 %}
                <li>
                    <form id="clearlog" method="post" action="/mbushub_logging?clear=1" enctype="multipart/form-data">
                        <button class="btn" type="submit" >Clear</button>
                    </form>
                </li>
                {% else %}
                    <li>
                        <button class="btn" disabled >Clear</button>
                    </li>
                {% endif %}
                <li>
                    <form id="startuplog" method="post" action="/mbushub_logging?startup=1"
                        enctype="multipart/form-data">
                        <button class="btn" type="submit" >Startup Log</button>
                    </form>
                </li>
            </ul>
            {% if log_days %}
                <p class="fs-300">Clear button is disabled due to Continous logging is on. </p>
            {% endif %}
        </div>
        <!--downloadable logs-->
        <section class="container flow">
            <textarea cols="1" rows="100" id="logArea" name="logg" readonly>
                {{logstring}}
            </textarea>
            <p class="fw-600 flex">Download current log file 
                <button class="btn" onclick="downloadLogFile();"> Download </button>
            </p>
            <p class="fw-600">Manage historic log files</p>
            <div>
                <span>Log days: {{log_days}}</span>
            </div>
            <div class="flex">
                <select name="logfsel" id="logfsel">
                    <option value="">No File</option>
                    {% for logf in logfArray: %}
                    <option id="{{logf}}" value="{{logf}}">{{logf}}</option>
                    {% endfor %}
                </select>
                <div class="flex">
                    <button class="btn" onclick="downloadLogFile1();"> Download </button>
                    <button class="btn" onclick="removeHistoricLogfile();"> Remove </button>
                </div>
            </div>
    
    </div>
</section>

{% endblock content %}
{% block scripts %}
<script>
    function downloadLogFile() {
        window.location = "/mbushub_DownloadLogFile?FILE=mbushub_log.txt";
    }

    async function downloadLogFile1() {
        var fileName = $('#logfsel').val();
        const res = await fetch("/api/v1/mbushub/logs?FILE=" + fileName);
        if (!res.ok) {
            console.error("file not found")
        } else {
            window.open("/api/v1/mbushub/logs?FILE=" + fileName)
        }
    }
    //On load, set all parameters

    async function removeHistoricLogfile() {
        const filename = $('#logfsel').val();
        try {

            const res = await fetch(`/api/v1/mbushub/logs?FILE=${filename}`, {
                method: 'DELETE',
                credentials: 'include',
            })

            if (res.ok) {
                const children = document.getElementById('logfsel').children;

                for (let i = 0; i < children.length; i++){
                    const item = children[i]
                    if (item.id === filename) {
                        item.remove()
                        break
                    }
                }
            } else {
                console.error('failed to remove file')
            }
            
        } catch (err) {
            console.error(err)
        }
    }
</script>
{% endblock scripts %}