<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <script type="text/javascript" src="static/js/socket.io.js"></script>
        <title>LoRa Scanner</title>
        <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="static/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->

        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="static/css/styles.css" rel="stylesheet" />
        <!-- Include SweetAlert2 CSS -->
        <link rel="stylesheet" href="static/css/sweetalert2.css">

        <!-- Include SweetAlert2 JS -->
        <script src="static/js/sweetalert2.js"></script>
        

    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">
                <span class="d-block d-lg-none">LoRa Scanner</span>
                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="static/assets/img/profile.jpg" alt="..." /></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">Home</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="/analysis">Analysis Mode</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="/survey">Survey Mode</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="/tracking">Tracking Mode</a></li>
                </ul>
            </div>
        </nav>
        <!-- Page Content-->
        <div class="container-fluid p-0">
            <!-- About-->
            <section class="resume-section" id="about">
                <div class="resume-section-content">
                    <h1 class="mb-0">
                        LoRa Scanner
                    </h1>
                    <h2 class="lead mb-5">Skinny Research and Development</h2>
                    <p>LoRa, short for Long Range, is a wireless communication technology designed for long-range, low-power communication between devices in the Internet of Things (IoT) and machine-to-machine (M2M) applications. Developed to address the specific needs of IoT devices, LoRa technology enables efficient, low-cost, and long-range communication in various scenarios.

                        <br><br>LoRa operates on unlicensed radio frequencies, such as those in the Industrial, Scientific, and Medical (ISM) bands, providing the flexibility for deployment without the need for a dedicated spectrum license. It utilizes a modulation technique called Chirp Spread Spectrum (CSS), which allows for long-range communication with minimal power consumption.
                        
                        <br><br>One of the key features of LoRa technology is its ability to provide extended communication ranges, often reaching several kilometers in open environments. This makes it suitable for applications where devices need to communicate over long distances while conserving battery life, such as in agriculture, smart cities, asset tracking, and environmental monitoring.
                        
                        <br><br>LoRa devices typically consist of two main components: LoRa nodes (sensors or devices) and LoRa gateways. The nodes collect and transmit data, while gateways receive and forward this data to the central server or cloud infrastructure. The open LoRaWAN (Long Range Wide Area Network) protocol standardizes communication between devices and gateways, ensuring interoperability and facilitating the deployment of large-scale IoT networks.
                        
                        <br><br>Due to its low power consumption, long-range capabilities, and suitability for diverse IoT applications, LoRa technology has gained popularity as a reliable and cost-effective solution for connecting a wide range of devices and sensors in the evolving landscape of the Internet of Things.
                        </p>
                </div>
            </section>
            <!-- Add this form within the body where it fits best, possibly under the About section -->
            <section class="resume-section">
                <div class="resume-section-content">
                   <h2 class="mb-0" style="text-align: center;">LoRaWAN Gateway Configuration</h2><br>
                    <img src="static/assets/img/lorawan.webp" style="width:100%; "><br><br>
                    <div style="display: flex; justify-content: center; margin-top: 20px;"><button class="transmit-button" id="configureGatewayBtn">Configure Gateway</button></div>
                </div>
            </section>
            

        </div>

        <script>
            document.getElementById('configureGatewayBtn').addEventListener('click', function() {
                let gatewayIPs = {};

                const ipPrompt = (title) => {
                    return Swal.fire({
                        title: title,
                        input: 'text',
                        inputPlaceholder: 'Leave empty to keep current IP',
                        inputValidator: (value) => {
                            if (value && !value.match(/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/)) {
                                return 'Please enter a valid IP address or leave it empty';
                            }
                        }
                    });
                };

                ipPrompt('Enter Gateway 1 IP Address').then((result) => {
                    if (result.value) gatewayIPs.gateway1 = result.value;

                    ipPrompt('Enter Gateway 2 IP Address').then((result) => {
                        if (result.value) gatewayIPs.gateway2 = result.value;

                        ipPrompt('Enter Gateway 3 IP Address').then((result) => {
                            if (result.value) gatewayIPs.gateway3 = result.value;

                            // Now send the IPs to the server only if they are not undefined
                            let queryString = Object.keys(gatewayIPs).reduce((acc, key) => {
                                if (gatewayIPs[key] !== undefined) {
                                    acc.push(`${key}=${encodeURIComponent(gatewayIPs[key])}`);
                                }
                                return acc;
                            }, []).join('&');

                            if (queryString) {
                                fetch('/set_gateways', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/x-www-form-urlencoded',
                                    },
                                    body: queryString
                                })
                                .then(response => response.json())
                                .then(data => Swal.fire('Success', 'Gateway IPs updated successfully', 'success'))
                                .catch(error => Swal.fire('Error', 'There was an issue updating the Gateway IPs', 'error'));
                            } else {
                                Swal.fire('No Changes', 'No IP addresses were changed.', 'info');
                            }
                        });
                    });
                });
            });

        </script>
            


        <!-- Bootstrap core JS-->
        <script src="static/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="static/js/scripts.js"></script>
    </body>
</html>
