Wifi.qml « wifi « app - settings - Settings (submenu) reference application

/*
 * Copyright (C) 2016 The Qt Company Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import '..'

SettingPage {
    id: root
    icon: '/wifi/images/HMI_Settings_WifiIcon.svg'
    title: 'Wifi'
    checkable: true

    property string protocol: 'http://'
    property string ipAddress: '127.0.0.1'
    property string portNumber: Qt.application.arguments[1]
    property string tokenString: Qt.application.arguments[2]
    property string wifiAPI: '/api/wifi-manager/'
    property string wifiAPIpath: protocol + ipAddress + ':' + portNumber + wifiAPI

    Text {
        id: log
        anchors.fill: parent
        anchors.margins: 10
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        //text: "log"
    }

    onCheckedChanged: {
        console.log("Wifi set to", checked)
        if (checked == true) {
            periodicRefresh.start()
            request(wifiAPIpath + 'activate', function (o) {
                // log the json response
                console.log(o.responseText)
            })

        } else {
            //console.log(networkPath)
            networkList.clear()
            request(wifiAPIpath + 'deactivate', function (o) {
                // log the json response
                console.log(o.responseText)
            })
        }
    }
    function listWifiNetworks() {
        console.log("test #4")
    }
    ListModel {
        id: networkList
    }

    function request(url, callback) {
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = (function (myxhr) {
            return function () {
                if (xhr.readyState == 4 && xhr.status == 200)
                    callback(myxhr)
            }
        })
        (xhr)
        xhr.open('GET', url, false)
        xhr.send('')
    }

    function securityType(security) {
       if (security === "Open")
           return "unsecured"
       else
           return "secured"
    }

    Component {
        id: wifiDevice
        Rectangle {
            height: 120
            width: parent.width
            color: "transparent"
            Image {

                anchors.left: parent.left
                anchors.leftMargin: 80
                //width: 70
                //height: 50
                id: icon
                source: {
                    if (securityType(security) === "unsecured") {
                        if (strength < 30)
                            source = "images/HMI_Settings_Wifi_1Bar.svg"
                        else if (strength >= 30 && strength < 50)
                            source = "images/HMI_Settings_Wifi_2Bars.svg"
                        else if (strength >= 50 && strength < 70)
                            source = "images/HMI_Settings_Wifi_3Bars.svg"
                        else
                            source = "images/HMI_Settings_Wifi_Full.svg"
                    } else {
                        if (strength < 30)
                            source = "images/HMI_Settings_Wifi_Locked_1Bar.svg"
                        else if (strength >= 30 && strength < 50)
                            source = "images/HMI_Settings_Wifi_Locked_2Bars.svg"
                        else if (strength >= 50 && strength < 70)
                            source = "images/HMI_Settings_Wifi_Locked_3Bars.svg"
                        else
                            source = "images/HMI_Settings_Wifi_Locked_Full.svg"
                    }
                }
            }
            Column {
                anchors.left: icon.right
                anchors.leftMargin: 5
                Text {
                    id: networkNameText
                    text: name
                    color: '#66FF99'
                    font.pixelSize: 48
                    font.bold: {
                        if ((serviceState === "ready")
                                || serviceState === "online")
                            font.bold = true
                        else
                            font.bold = false
                    }
                }
                Text {
                    visible: ((serviceState === "ready")
                              || serviceState === "online") ? true : false
                    text: "connected, " + address
                    font.pointSize: 18
                    color: "white"
                    //font.italic: true
                }
            }
            Button {
                id: connectButton
                anchors.top: parent.top
                anchors.topMargin: 5
                //anchors.horizontalCenter: networkNameText.horizontalCenter
                anchors.rightMargin: 50
                anchors.right: parent.right
                width: 250

                MouseArea {
                    anchors.fill: parent

                    Text {
                        anchors.fill: parent
                        id: buttonTextLabel
                        font.pixelSize: 15
                        font.bold: true
                        color: "black"
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        text: {
                            if ((serviceState === "ready")
                                    || serviceState === "online")
                                text = "Forget"
                            else
                                text = "Connect"
                        }
                    }

                    onClicked: {

                        //connectButton.border.color = "steelblue"
                        if ((serviceState === "ready")
                                || serviceState === "online") {

                            //means we are connected
                            console.log("Disconnecting from", index, " ,", name)
                            request(wifiAPIpath + 'disconnect?network=' + index,
                                    function (o) {

                                        //showRequestInfo(o.responseText)
                                        console.log(o.responseText)
                                    })
                        } else {
                            console.log("Conect to", index, " ,", name)

                            //passwordDialog.open()
                            request(wifiAPIpath + 'connect?network=' + index,
                                    function (o) {

                                        // log the json response
                                        //showRequestInfo(o.responseText)
                                        console.log(o.responseText)
                                    })
                        }
                    }
                }
            }

            Button {
                id: passwordButton
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.right: connectButton.right
                width: 40
                visible: (securityType(security) === "unsecured") ? false : true

                text: {
                    "Key"
                }

                MouseArea {
                    anchors.fill: parent

                    onClicked: {

                        //connectButton.border.color = "steelblue"
                        passwordInputText.visible = true
                        connectButton.visible = false
                        passwordValidateButton.visible = true

                        //passwordInputText.o
                        periodicRefresh.stop()

                        var passkey = passwordInputText.text.valueOf()

                        //var passkey = 'randompassword'
                        console.log("Disconnecting from", index, " ,", name)
                    }
                }
            }

            Button {
                id: passwordValidateButton
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.right: parent.right
                anchors.rightMargin: connectButton.width + 5
                width: 40
                visible: false

                //anchors.rightMargin: connectButton.width + 5
                //buttonText: "Connect"
                text: {
                    "ok" //or some icon?
                }

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        //passwordInputText = ""
                        var passkey = passwordInputText.text.valueOf()
                        console.log("Validating", passkey)

                        console.log("Passkey is", passkey)
                        request(wifiAPIpath + 'security?passkey=' + passkey,
                                function (o) {

                                    //showRequestInfo(o.responseText)
                                    console.log(o.responseText)
                                })
                        passwordValidateButton.visible = false
                        passwordInputText.visible = false
                        connectButton.visible = true

                        periodicRefresh.start()
                    }
                }
            }

            TextInput {
                id: passwordInputText
                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.right: parent.right
                anchors.rightMargin: 0
                readOnly: false
                //horizontalAlignment: TextInput.AlignHCenter
                //verticalAlignment: TextInput.AlignVCenter


                font.pointSize: 15
                color: "#ffffff"

                width: connectButton.width
                visible: false
                text: "password"
                /*hardcore until virtual keyboard works*/
            }

            Image {
                source: '../images/HMI_Settings_DividingLine.svg'
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: -15

                visible: model.index > 0
            }

        }


    }
    ListView {
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 70
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 150
        model: networkList //WifiList {}
        delegate: wifiDevice
        clip: true
    }


    //Timer for periodic refresh; this is BAD solution, need to figure out how to subscribe for events
    Timer {
        id: periodicRefresh
        interval: 1000 // 1second
        onTriggered: {

            networkList.clear()
            request(wifiAPIpath + 'scan_result', function (o) {
                // log the json response
                console.log(o.responseText)

                // translate response into object
                var jsonObject = eval('(' + o.responseText + ')')
                var jsonObjectNetworks = eval('(' + JSON.stringify(
                                                  jsonObject.response) + ')')
                console.log("WiFi list refreshed")
                //console.log(jsonObject.response)
                for (var i = 0; i < jsonObjectNetworks.length; i++) {
                    networkList.append({
                                           number: jsonObjectNetworks[i].Number,
                                           name: jsonObjectNetworks[i].ESSID,
                                           strength: jsonObjectNetworks[i].Strength,
                                           serviceState: jsonObjectNetworks[i].State,
                                           security: jsonObjectNetworks[i].Security,
                                           address: jsonObjectNetworks[i].IPAddress
                                       })
                }
            })
            start()
        }
    }
}