<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ULLR status</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Skranji:wght@400;700&display=swap" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery-3.6.0.min.js') }}">\x3C/script>')</script>
    </head>
    <body>
        <div class="menu_bar" id="config_menu">
            <button onclick="openForm('addRemote')">Add Remote Device</button>
            <div class="form-popup" id="addRemote">
                <form action="/add_remote" method="POST" class="form-container">
                    <h1>Add Remote</h1>
    
                    <input type="text" placeholder="Enter Name" name="name" required>
                    <input type="text" placeholder="Host ID/Device ID" name="topic_name" required>

                    <label for="on_time_max">On-time arrival (s) (0=off):
                        <input type="number" name="on_time_max" min="0" max="86400" step="1" value="0">
                    </label>
                    
                    <label for="type">Type: 
                    <select id="mode" name="mode">
                        <option value="DCE">DCE</option>
                        <option value="DTE">DTE</option>
                    </select>
                    </label>

                    <label>
                        Mute? <input type="checkbox" name="mute"/>
                    </label>
                    <label>
                        Accept Incoming? <input type="checkbox" name="incoming" checked/>
                    </label>
    
                    <button type="submit" class="btn">Add</button>
                    
                </form>
            </div>
            <button onclick="openForm('addLocal')">Add Local Device</button>
            <div class="form-popup" id="addLocal">
                <form action="/add_local" method="POST" class="form-container">
                    <h1>Add Local</h1>
    
                    <input type="text" placeholder="Enter Name" name="name" required>

                    <label for="type">Type: 
                    <select id="mode" name="mode">
                        <option value="DCE">DCE</option>
                        <option value="DTE">DTE</option>
                    </select>
                    </label>

                    <label for="port">Port: 
                    <select id="port" name="port">
                    {% for port in ports %}
                        <option value="{{ port }}">{{ port }}</option>
                    {% endfor %}
                    </select>
                    </label>
                                        
                    <label for="baud">Baud:
                    <select id="baud" name="baud">
                        <option value="9600">9600</option>
                        <option value="1200">1200</option>
                        <option value="2400">2400</option>
                        <option value="4800">4800</option>
                    </select>
                    </label>

                    <label>
                        Mute? <input type="checkbox" name="mute"/>
                    </label>
                    <label>
                        Accept Incoming? <input type="checkbox" name="incoming" checked/>
                    </label>
                    <label>
                        Publish? <input type="checkbox" name="publish" checked/>
                    </label>
    
                    <button type="submit" class="btn local">Add</button>
                    
                </form>
            </div>
            <form action="/get_log" metod="POST" style="margin-bottom: auto;"><button>Get Log File</button></form>
            <button onclick="saveConfig()">Save Configuration</button>
            <button onclick="openMqtt()">MQTT Settings</button>
            <div class="modal" id="mqttSettings">
                <div class="advanced-menu" id="mqtt-menu">
                <div class="advanced-header">
                    <span class="close" onclick="closeMqtt()">&times;</span>
                    <h2>MQTT Broker Settings</h2>
                </div>
                <div class="advanced-body">
                    <form>
                        <div class="row">
                            <div class="col-25">
                            <label for="url">URL:</label>
                            </div>
                            <div class="col-75">
                            <input type="text" value="{{ broker_url }}" name="url" id="url" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-25">
                            <label for="mqtt_port">Port:</label>
                            </div>
                            <div class="col-75">
                            <input type="text" value="{{ broker_port }}" name="port" id="mqtt_port" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-25">
                            <label for="user">Username:</label>
                            </div>
                            <div class="col-75">
                            <input type="text" value="{{ broker_user }}" name="user" id="user" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-25">
                            <label for="pw">Password:</label>
                            </div>
                            <div class="col-75">
                            <input type="text" value="{{ broker_pw }}" name="pw" id="pw" required>
                            </div>
                        </div>
                    </form>
                </div>
                    <div class="advanced-footer">
                        <button class="apply" onclick="submitMqtt()">Apply</button>
                    </div>
                </div>
            </div>

            <button onclick="closeMenuBar()">Close Menu</button>
        </div>
        <div class="main_window">
            <div class="status">
                <div class="title"><h1>ULLR</h1></div><h3>v{{ version }}</h3>
                <div class="subtitle">Running on: {{ hostname }}({{ host_ip }})({{ client_id }})</div>
                <button onclick="openMenuBar()" id="config_button">Configure</button>

            </div>
            <div class="device_window">
                <div class="tabs">
                    <button class="tablinks active" onclick="openTab(event, 'dce')">Devices</button>
                    <button class="tablinks" onclick="openTab(event, 'dte')">Computers</button>
                    <span id="client_status" style="color: {% if client_online %}darkgreen{% else %}darkred{% endif %};">{% if client_online %}Online{% else %}Offline{% endif %}</span>
                </div>
                {% set lists = [session.bus.dce_devices, session.bus.dte_devices] %}
                {% for i in range(2)  %}
                    {% if i == 0 %}
                    <div class="devices" id="dce">
                    {% endif %}
                    {% if i == 1 %}
                    <div class="devices" id="dte" style="display: none;">
                    {% endif %}
                    {% for d in lists[i] %}
                        <div class="device" id="{{ d.sku }}">
                            <div class="modal">
                                <div class="advanced-menu" id="{{ d.sku }}-menu">
                                    <div class="advanced-header">
                                        <span class="close" onclick="closeAdvancedMenu('{{d.sku}}')">&times;</span>
                                        <h2>Advanced Options for {{ d.name }}</h2>
                                    </div>
                                    <div class="advanced-body">
                                        {% if d.type == "serial" %}
                                        <h3><span class="published_name">Published name: {{ d.published_name }}</span></h3>
                                        {% endif %}
                                        <form name="advanced_options_form" class="device-options">
                                            <label>
                                                Muted? <input type="checkbox" name="mute" {% if d.mute %} checked {% endif %}/>
                                            </label>
                                            <label>
                                                Accepts incoming? <input type="checkbox" name="incoming" {% if d.accepts_incoming %} checked {% endif %}/>
                                            </label>
                                            {% if d.type == "serial" %}
                                            <label>
                                                Published? <input type="checkbox" name="publish" {% if d.published %} checked {% endif %}/>
                                            </label>
                                            {% endif %}
                                        </form>
                                        <hr>
                                        <form name="translation_form">
                                            <label for="translate">Translated?
                                            <select name="translate">
                                                <option value="{{ d.translation[0] }}">{{ d.translation[0] }}</option>
                                                <option value="{{ not d.translation[0] }}">{{ not d.translation[0] }}</option>
                                            </select>
                                            </label>
                                            <label for="source">Source:
                                            <select name="source">
                                                {% if d.translation[1] %}
                                                <option value="{{ d.translation[1] }}">{{ d.translation[1] }}</option>
                                                {% endif %}
                                                {% for source in translation_sources %}
                                                {% if source != d.translation[1] %}
                                                <option value="{{source}}">{{source}}</option>
                                                {% endif %}
                                                {% endfor %}
                                            </select>
                                            </label>
                                            <label for="destination">Destination:
                                            <select name="destination">
                                                {% if d.translation[2] %}
                                                <option value="{{ d.translation[2] }}">{{ d.translation[2] }}</option>
                                                {% endif %}
                                                {% for destination in translation_destinations %}
                                                {% if destination != d.translation[2] %}
                                                <option value="{{destination}}">{{destination}}</option>
                                                {% endif %}
                                                {% endfor %}
                                            </select>
                                            </label>
                                            <label for="shift">Channel Shift:</label>
                                            <input type="text" value="{{ d.translation[3] }}" name="shift" required>
                                        </form>
                                        {% if d.type == "mqtt" %}
                                        <hr>
                                        <h3 style="margin: 1em 0 0">Late Messages</h3>
                                        <form name="ota_form" class="ota-form">
                                        <label for="on_time_max">On-time arrival (s) (0=off):
                                            <input type="number" name="on_time_max" min="0" max="86400" step="1" value="{{ d.on_time_max }}">
                                        </label>
                                        </form>
                                        <div class="late-messages-box">
                                        <form name="late_message_form" class="late-message-form" id="{{d.sku}}-late-message-form">
                                            <select name="late_messages" placeholder="None" multiple>
                                                {% if d.late_message_list|length == 0%}
                                                <option value="placeholder">None</option>
                                                {% endif %}
                                                {% for i in range(d.late_message_list|length) %}
                                                <option value="{{ i }}">{{ d.late_message_list[i].decode('utf-8') }}</option>
                                                {% endfor %}}
                                            </select>
                                        </form>
                                        <button onclick="sendLateMessages('{{d.sku}}')">Send Selected</button>
                                        {% if d.received_messages_count > 0 %}
                                        <table class="transit_stats">
                                            <tr><th>Messages Received: </th><td>{{d.received_messages_count}}</td></tr>
                                            <tr><th>Avg. Transit Time: </th><td>{{d.average_transit_time}}</td></tr>
                                        </table>
                                        <table class="transit_stats">
                                            <tr><th>Min Transit Time: </th><td>{{d.min_transit_time}}</td></tr>
                                            <tr><th>Max Transit Time: </th><td>{{d.max_transit_time}}</td></tr>
                                        </table>
                                        {% endif %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="advanced-footer">
                                        <button class="apply" onclick="submitAdvancedMenu('{{d.sku}}')">Apply</button>
                                    </div>
                                </div>
                            </div>
                        
                            {% if d.type == "serial" %}
                                <table class="serial_device">
                                    <tr><td class="tape" colspan="2"><div class="timing_tape"></div></td></tr>
                                    <tr><th class="device_name" colspan="2" style="height: auto;">{{ d.name }}</th></tr>
                                    <tr><th>Port:</th><td>{{ d.port_name }}</td></tr>
                                    <tr><th>Baud:</th><td>{{ d.baudrate }}</td></tr>
                                    <tfoot>
                                        <tr>
                                            <td>
                                                <div class="hamburger_container" onclick="openAdvancedMenu('{{d.sku}}')">
                                                    <div class="hamburger_bar"></div>
                                                    <div class="hamburger_bar"></div>
                                                    <div class="hamburger_bar"></div>
                                                </div>
                                            </td>
                                            <td>
                                                <form action="/remove/{{ d.sku }}" method="POST"><button type="submit" onclick="return confirm('Remove {{ d.name }}?')">X</button></form>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            {% endif %}
                            {% if d.type == "mqtt" %}
                                <table class="dweet_device">
                                    <tr><td class="tape" colspan="2"><div class="timing_tape"></div></td></tr>
                                    <tr><th class="device_name" colspan="2" style="height: auto;">{{ d.name }}<span class="online_dot" style="background-color: {% if d.online %}green{% else %}red{% endif %}"></span></th></tr>
                                    <tr><th>Client ID:</th><td>{{ d.remote_client }}</td></tr>
                                    <tr><th>Device ID:</th><td>{{ d.remote_device_name }}</td></tr>
                                    <tfoot>
                                        <tr>
                                            <td>
                                                <div class="hamburger_container" onclick="openAdvancedMenu('{{d.sku}}')">
                                                    <span class="late_badge" {% if d.late_message_list|length == 0 %}style="display: none;"{% endif %}>{{d.late_message_list|length}}</span>
                                                    <div class="hamburger_bar"></div>
                                                    <div class="hamburger_bar"></div>
                                                    <div class="hamburger_bar"></div>
                                                </div>
                                            </td>
                                            <td>
                                                <form action="/remove/{{ d.sku }}" method="POST"><button type="submit" onclick="return confirm('Remove {{ d.name }}?')">X</button></form>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
                {% endfor %}
                
            </div>
            <div class="console">
                <span id="console_tab">^ Console ^</span>
                <pre id="console"></pre>
            </div>
        </div>
        
        <script>
            var config_file =  "{{ config_file }}";
            var version = "{{ version }}";
            var hostname = "{{ hostname }}";       
        </script>
        
        <!--<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery-3.6.0.min.js') }}">\x3C/script>')</script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js" 
            integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>
        <script src="{{ url_for('static', filename='site.js') }}"></script>
    </body>
</html>