app/qml/SettingsDialog/SettingsBaseStationPage.qml

import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import "../components"

Column {
    id: control
    property string title: qsTr("base station")

    spacing: parentObj.rowSpacing

    property bool baseConnected: speedBackend.baseStationState === "connected"
    property var parentObj

    opacity: 0

    ConnectionDelegate {
        id: connectToBaseDel
        text: status.status === "connected" ? qsTr("disconnect"): status.status === "disconnected" ? qsTr("connect"):qsTr("connecting...")

        status: { "status": speedBackend.baseStationState, "progress": 100 }
        connect: speedBackend.connectBaseStation
        disconnect: speedBackend.disconnectBaseStation
        type: "baseStation"

        width: parent.width
        height: parentObj.delegateHeight
    }

    Loader {
        id: baseStationOptionsLd

        property alias parentComp: control
        property alias baseConnected: control.baseConnected

        onBaseConnectedChanged: {
            disappearAnim.start()
        }

        Component.onCompleted: {
            baseStationOptionsLd.sourceComponent = control.baseConnected ? baseStationConnectedOptionsComp : baseStationDisconnectedOptionsComp
            item.opacity = 1
            item.scale = 1
        }

        sourceComponent: null

        ParallelAnimation {
            id: disappearAnim

            NumberAnimation {
                property: "opacity"
                to: 0
                duration: 100
                target: baseStationOptionsLd.item
            }

            NumberAnimation {
                property: "scale"
                to: 0.95
                duration: 100
                target: baseStationOptionsLd.item
            }

            onRunningChanged: {
                if(!running) {
                    baseStationOptionsLd.sourceComponent = control.baseConnected ? baseStationConnectedOptionsComp : baseStationDisconnectedOptionsComp
                    appearAnim.start()
                }
            }
        }

        ParallelAnimation {
            id: appearAnim

            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 100
                target: baseStationOptionsLd.item
            }

            NumberAnimation {
                property: "scale"
                from: 0.95
                to: 1
                duration: 100
                target: baseStationOptionsLd.item
            }
        }

    }

    Component {
        id: baseStationDisconnectedOptionsComp

        Column {
            id: baseStationDisconnectedOptions

            width: parentComp.width

            opacity: 0      // opacity and scale are adjusted by baseStationOptionsLd
            scale: 0.95

            InputDelegate {
                id: baseStationIpDel

                text: qsTr("IP")

                inputHint: "IP"
                inputText: speedBackend.readSetting("baseStationIpAdress")
                inputTextFieldWidth: width * 0.7

                onInputTextChanged: {
                    speedBackend.writeSetting("baseStationIpAdress", inputText)
                    speedBackend.reloadBaseStationIpAdress()
                }

                width: parent.width
                height: parentObj.delegateHeight

                visible: height > 5

                Behavior on height {
                    NumberAnimation {
                        duration: 400
                        easing.type: Easing.Linear
                    }
                }
            }

            SmoothItemDelegate {
                id: baseStationHelpDel

                width: parent.width
                height: parentObj.delegateHeight

                text: qsTr("what is this for?")

                onClicked: {
                    Qt.openUrlExternally("https://itsblue.de/index.php/speed-climbing?ref=ScStwApp")
                }
            }

        }

    }

    Component {
        id: baseStationConnectedOptionsComp

        Column {
            id: baseStationConnectedOptions

            width: parentComp.width

            opacity: 0      // opacity and scale are adjusted by baseStationOptionsLd
            scale: 0.95

            SmoothSliderDelegate {
                id: baseStationVolumeDel
                text: qsTr("volume")

                width: parent.width
                height: parentObj.delegateHeight

                sliderValue: 0

                onSliderFinished: {
                    speedBackend.writeSetting("soundVolume", sliderValue)
                }

                Component.onCompleted: {
                    var val = speedBackend.readSetting("soundVolume")
                    console.log(val)
                    if(val !== "false"){
                        sliderValue = parseFloat(val)
                    }
                }

                Behavior on height {
                    NumberAnimation {
                        duration: 400
                        easing.type: Easing.Linear
                    }
                }
            }

            NextPageDelegate {
                id: baseStationConnectionsDel
                text: qsTr("connected extensions")

                width: parent.width
                height: parentObj.delegateHeight

                visible: height > 5

                onClicked: {
                    parentObj.push(baseStationConnections)
                }

                Behavior on height {
                    NumberAnimation {
                        duration: 400
                        easing.type: Easing.Linear
                    }
                }
            }

        }
    }
}