{% extends "layout.html" %}

{% block title %}
    Home
{% endblock %}

{% block main %}
    <br>
    <h1>Fleet Manager</h1>
    <br>
    <a href='/carinfo'>View Car Information</a><br>
    <a href='/footage'>View Dashcam Footage</a><br>
    <br><a href='/preserved'>Access Preserved Footage</a><br>
    <br><a href='/screenrecords'>View Screen Recordings</a><br>
    <br><a href='/error_logs'>Access Error Logs</a><br>
    <br><a href='/about'>About Fleet Manager</a><br>
    <br><a href='/amap_nav'>高德导航</a><br>
    <br><a href='/tmap_addr_input'>TMap导航</a><br>
    <br><a href='/tmap_key_input'>设置TMap API密钥</a><br>

    <!-- 系统状态部分 -->
    <div class="uk-card uk-card-default uk-card-body uk-margin-medium">
        <h3 class="uk-card-title">系统状态</h3>
        <div id="system-status" class="uk-grid-small uk-child-width-1-3@s uk-text-center" uk-grid>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                    <h4>导航状态</h4>
                    <div id="nav-status">
                        <span class="uk-label uk-label-warning">待机</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                    <h4>GPS信号</h4>
                    <div id="gps-status">
                        <span class="uk-label uk-label-warning">检测中</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                    <h4>网络状态</h4>
                    <div id="network-status">
                        <span class="uk-label uk-label-warning">检测中</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 定期更新系统状态
        function updateSystemStatus() {
            fetch('/get_system_status')
                .then(response => response.json())
                .then(data => {
                    // 更新导航状态
                    document.getElementById('nav-status').innerHTML =
                        `<span class="uk-label ${data.nav_status.active ? 'uk-label-success' : 'uk-label-warning'}">
                        ${data.nav_status.state}
                        </span>`;

                    // 更新GPS状态
                    document.getElementById('gps-status').innerHTML =
                        `<span class="uk-label ${data.gps_status.active ? 'uk-label-success' : 'uk-label-warning'}">
                        ${data.gps_status.signal}
                        </span>`;

                    // 更新网络状态
                    document.getElementById('network-status').innerHTML =
                        `<span class="uk-label ${data.network_status.connected ? 'uk-label-success' : 'uk-label-warning'}">
                        ${data.network_status.type}
                        </span>`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    // 发生错误时显示错误状态
                    ['nav-status', 'gps-status', 'network-status'].forEach(id => {
                        document.getElementById(id).innerHTML =
                            `<span class="uk-label uk-label-danger">错误</span>`;
                    });
                });
        }

        // 每5秒更新一次状态
        setInterval(updateSystemStatus, 5000);
        updateSystemStatus(); // 初始更新
    </script>
{% endblock %}