{% extends 'index.html' %}

{% block content %}

<div style="margin-left: 20px;">

    <!-- Secondary Search Result -->
    <div id="showBrowseHead" style="background-color: #eee;">
        <p>Template name: {{data['device']['name']}}   Manufacturer: {{mfctString}} </p>
        <p>Meter type: {{theDeviceType}}   Date: {{data['device']['time']}}</p>
    </div>
    <br>
    <br>

    <div style="display:inline-block;">
    <form id ="addTemplateItem" name="addTemplateItem" action="/add_template_item" method="post" enctype="multipart/form-data">
    <table style="border:none; border-collapse:collapse;">
        <tr style="height:40px;border:none;">
            <td style="padding-right:10px;">
                <!--<a id="showBrowse" class="button" href="/add_template_item">Add meter to Template File</a>-->
                {% set device = data['device']['name'] %}
                {% set objectLength = data['tag']|length %}
                <input
                    type="button" 
                    id="showBrowse" 
                    type ="submit" 
                    name ="deviceName" 
                    value="Add metertype" 
                    onclick='sendWithNumberOfObjects("{{device}}", "{{objectLength}}");'></input>
            </td>
            <td style="height:20px;border:none;"><a target="_blank" href="/startup_manual?HASHTAG=add-metertype" class="infoBubble">info</a></td>
        </tr>
        <tr></tr>
    </table>
    </div>
    <div style="margin-top:10px;">
        <button type="button" id="showBrowse" onclick="goBack();">Go Back</button>
    </div>

    <br>
    <br>
    <br>

    <div id="showBrowse"  style="overflow-x:auto;">
        <table>
        <thead>
            <tr>
                <td>#</td>
                <td>Vif/Tag</td>
                <td>Edit</td>
                <td>Value</td>
                <td>Datatype</td>
                <td>Physical Quantity</td>
                <td style="min-width:75px;">Report   
                    <div style="margin-top:8px;">
                        <input 
                            type="checkbox" 
                            class="cb checkboxStyle"
                            id="all" 
                            onclick="toggleAllCheckboxes();" checked/>
                        <label style="padding-left:5px;" class="cb-text" for="all">All</label>
                    </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr id="status-row">
                <td>-</td>
                <td id="status-vif">StatusByte</td>
                <td></td>
                <td>{{data['device']['statusByte']}}</td>
                <td>Status Byte</td>
                <td>{{data['device']['statusText']}}</td>
                <td class="cb" onclick="toggleCheckbox('status');">
                    <input 
                        class="cb checkboxStyle" 
                        type="checkbox" 
                        value="ON" 
                        name="status" 
                        id="status"/>
                    <label id="status-text" class="cb-text">ON</label>
                </td>
            </tr>

            {% set template_name = data['device']['name'] %}
            {% set meter_id = data.device.adress.split('.')[0] %}

            <tr id="meter_id-row">
                <td>-</td>
                <td id="meter_id-vif">MeterId</td>
                <td></td>
                <td>{{meter_id}}</td>
                <td>BCD8</td>
                <td><p>Manufacturer Specific</p></td>
                <td class="cb" onclick="toggleCheckbox('meter_id');">
                    <input 
                        class="cb checkboxStyle" 
                        type="checkbox" 
                        value="ON" 
                        name="meter_id" 
                        id="meter_id"/>
                    <label id="meter_id-text" class="cb-text">ON</label>
                </td>
            </tr>

            {% for i in range(data['tag']|length) %}

                {% set tag = data['tag'][i] %}
                {% set record = tag.record %}

                
                <tr id="{{record}}-row">
                    <td>{{record}}</td>
                    <td id="{{record}}-vif">{{tag.vif}}</td>
                    <td class="cb" onclick="changeVif('{{record}}')"><div class="icon original edit"></div></td>
                    <td>{{tag.value}}{{tag.exponent}}</td>
                    <td>{{tag.datatype}}</td>
                    <td>{{tag.name}}</td>
                    
                    <td class="cb" onclick="toggleCheckbox('{{record}}')">
                        <input 
                            class="cb checkboxStyle" 
                            type="checkbox" 
                            value="ON" 
                            name="{{record}}"
                            id="{{record}}"/>
                        <label id="{{record}}-text" class="cb-text">ON</label>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
        </table>
        </form>
    </div>

    <br>
    <br>
    <div class="modal" id="edit-modal">
        <div id="modal-content" class="modal-content">
            <span id="modal-close" class="modal-close">&times;</span>
            <p class="edit-meter-header">Vif/Tag</p>
        </div>
    </div>

</div>

{% endblock content %}

{% block scripts %}
<script type="text/javascript">

    var objectLength = "{{data.tag|length}}"
    function goBack()
    {
        window.history.back();
    }

    function changeVif(record) {
        var tag = document.getElementById(record+"-vif");
        var tagContent = tag.innerHTML; 
        
        if (document.getElementById("edit-meter-container") != null) {
            document.getElementById("edit-meter-container").remove();
        }

        // Adds the meter parameter table content
        let modalContent = document.getElementById("modal-content");

        if (document.getElementById("tag-input-value") != null) {
            document.getElementById("tag-input-value").remove();
        }
        // Add tag-input field
        var tagInput = document.createElement("input");
        tagInput.id = "tag-input-value";

        tagInput.value = tagContent; 

        modalContent.appendChild(tagInput);
        
        if (document.getElementById("save-edit-meter") != null) {
            document.getElementById("save-edit-meter").remove();
        }
        
        // Add the save edit button
        let saveEditButton = document.createElement("button");
        saveEditButton.id = "save-edit-meter";
        saveEditButton.classList.add("save-edit-button");
        saveEditButton.innerHTML = "Save";
        
        saveEditButton.onclick = () => {
            let input = document.getElementById("tag-input-value").value;
            document.getElementById(record+"-vif").innerHTML = input;
            editModal.style.display = "none";
        }
        modalContent.appendChild(saveEditButton); 

        let close = document.getElementById("modal-close");
        editModal.style.display = "block";
        close.onclick = () => {
            editModal.style.display = "none";
        }
    }
    let editModal = document.getElementById("edit-modal");

    // toggles all checkboxes on or off
    const toggleAllCheckboxes = () => {

        const is_all_on = document.getElementById('all').checked
        toggleCheckbox('status', is_all_on)
        toggleCheckbox('meter_id', is_all_on)

        const length = objectLength;
        for (let i = 1; i <= length; ++i) {
            const id = i.toString()
            toggleCheckbox(id, is_all_on)
        }

    }

    // Set all Mbus objects and the statusbyte to ON and set correct color
    function initPage()
    {
        toggleCheckbox('status', true)
        toggleCheckbox('meter_id', true)
        toggleAllCheckboxes()
    }

    const toggleCheckbox = (cbox_id, is_on=null) => {
        const checkbox = document.getElementById(cbox_id);
        const isOn =  is_on === null ? checkbox.checked : is_on
        const offBgColor = "rgba(255, 150, 150, 0.5)";
        const onBgColor = "rgba(144,238,144,0.5)";
        
        const bgColor = isOn ? onBgColor : offBgColor
        const value = isOn ? "ON" : "OFF"

        const row = document.getElementById(checkbox.id+"-row")
        const text = document.getElementById(checkbox.id+"-text")

        checkbox.checked = isOn
        checkbox.value = value

        text.innerText = value
        row.style.backgroundColor = bgColor
    }

    // Runs when user press the button "Add metertype"
    function sendWithNumberOfObjects(device, objectNumber) {

        // Control that at least one MBus object is selected or the statusbyte
        // Is it enough to only send a statusbyte for a metertype?
        var length = objectLength;
        var sendObject = false;
        var status = document.getElementById('status').value;
        const report_meter_id = document.getElementById('meter_id').value === "ON" ;

        if (status == "ON" || report_meter_id ) {
            sendObject = true;
        } else {
            for(var i=1; i<=length; i++){
                var is = i.toString();
                var object = document.getElementById(is).checked;
                if (object == true) {
                    sendObject = true;
                    break;
                }
            }
        }

        // If at least 1 Mbus object or the statusbyte is selected
        // we send the form to /add_template_item and append
        // the device name and the number of mbus objects
        // in the meters first telegram
        if (sendObject == true) {
            var myForm = document.getElementById("addTemplateItem");

            var input2 = document.createElement('input');
            input2.setAttribute('name', 'device');
            input2.setAttribute('value', device);
            input2.setAttribute('type', 'hidden');
            myForm.appendChild(input2);

            // Adds the vif/tags to the form.
            for(var i=1; i<=length; i++){
                var is = i.toString();
                var object = document.getElementById(is).checked;
                if (object == true) {
                    var tagID = document.getElementById(is+"-vif").innerHTML;
                    console.log("tagID", tagID);
                    var vif = document.createElement('input');
                    vif.setAttribute('name', is+"-vif");
                    vif.setAttribute('value', tagID);
                    vif.setAttribute('type', 'hidden');
                    myForm.appendChild(vif);
                }
            }

            var input = document.createElement('input');
            input.setAttribute('name', 'numberOfObjects');
            input.setAttribute('value', objectNumber);
            input.setAttribute('type', 'hidden');
            myForm.appendChild(input);

            document.forms['addTemplateItem'].submit();
        } else {
            alert("You need to choose a MBus object to report!");
        }
    }

    initPage();

</script>
{% endblock scripts %}