import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Templates 2.15
import QtQuick.Controls 2.15
import QtPositioning 5.14
import QtQuick.Timeline 1.0

Window {
    id: window
    width: Screen.width
    height: Screen.height
    visible: true
    color: "#000000"
    title: qsTr("HUD")

        RoundButton{
            id: rbuttonProva1
            width: 45
            height: 45
            icon.source: "file/img/ShutDown.svg"
            icon.height: height
            icon.width: width
            anchors.left: rbuttonsys.right
            anchors.bottom: parent.bottom
            anchors.leftMargin: 35
            anchors.bottomMargin: 45
            palette {button: "#EC7063"}
            onClicked: popupsd.open()
        }

        RoundButton{
            id: rbuttonProva2
            width: 45
            height: 45
            opacity: 1
            icon.source: "file/img/ReBoot.svg"
            icon.height: height
            icon.width: width
            anchors.left: rbuttonProva1.right
            anchors.bottom: parent.bottom
            anchors.leftMargin: 35
            anchors.bottomMargin: 45
            palette {button: "#F5B041"}
            onClicked: popuprb.open()
        }

        RoundButton{
            id: rbuttonProva3
            width: 45
            height: 45
            opacity: 1
            visible: true
            icon.source: "file/img/LogOut.svg"
            icon.height: height
            icon.width: width
            anchors.left: rbuttonProva2.right
            anchors.bottom: parent.bottom
            anchors.leftMargin: 35
            anchors.bottomMargin: 45
            palette {button: "#5DADE2"}
            onClicked: popupdc.open()
        }


    function readTextFile(fileUrl){
           var xhr = new XMLHttpRequest;
           xhr.open("GET", fileUrl);
           xhr.onreadystatechange = function () {
               if(xhr.readyState === XMLHttpRequest.DONE){
                   var response = xhr.responseText;

                   scrollableBox.text = response
               }
           }
           xhr.send();
       }

    RoundButton{
        id: rbuttonsts
        width: 45
        height: 45
        anchors.left: parent.left
        anchors.bottom: rbuttonsys.top
        anchors.leftMargin: 35
        anchors.bottomMargin: 25
        icon.source: "file/img/info_icon.svg"
        icon.height: height
        icon.width: width
        checkable: true
        onClicked: {
            checked ? popupinfo.open() : popupinfo.close();
            scrollableBox.text = "";
            readStarter.running = true;
        }
    }

    RoundButton{
        id: rbuttonsys
        width: 45
        height: 45
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.leftMargin: 35
        anchors.bottomMargin: 45
        icon.source: "file/img/power_icon.svg"
        icon.height: height
        icon.width: width
        checkable: true
        onClicked: checked ? timelineAnimation.start() : timelineAnimation1.start()
    }

    Timer{
        id: readStarter
        interval: 5
        running: false
        repeat:  false
        onTriggered: readTextFile("file.txt");
    }

    // Pop-Up ShutDown
    Popup {
        id: popupsd
        width: 250
        height: 100
        modal: true
        focus: true
        anchors.centerIn: parent
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        background: Rectangle {
            color: "black"
            radius: 15
        }
        
        Column {
            id: column
            width: 220
            height: 100
            clip: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        
            Text {
                id: text1
                color: "#ffffff"
                text: qsTr("Vuoi spegnere il sistema?")
                anchors.bottom: toolSeparator.top
                font.pixelSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
            }
        
            ToolSeparator {
                id: toolSeparator
                width: 220
                opacity: 0.6
                anchors.bottom: row2.top
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
                orientation: Qt.Horizontal
            }
        
            Row {
                id: row2
                width: 220
                height: 30
                clip: true
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 9
        
                RoundButton {
                    id: button2
                    width: 100
                    height: 30
                    text: qsTr("Si")
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    palette {button: "#ABEBC6"}
                    onClicked: popupsd.open()
                }
        
                RoundButton {
                    id: button3
                    width: 100
                    height: 30
                    text: qsTr("No")
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    palette {button: "#F5B7B1"}
                    onClicked: popupsd.close() & popupsys.close()
                }
        
            }
        }
    }

    // Pop-Up Reboot
    Popup {
        id: popuprb
        width: 250
        height: 100
        modal: true
        focus: true
        anchors.centerIn: parent
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        background: Rectangle {
            color: "black"
            radius: 15
        }
        
        Column {
            id: column2
            width: 220
            height: 100
            clip: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        
            Text {
                id: text2
                color: "#ffffff"
                text: qsTr("Vuoi riavviare il sistema?")
                anchors.bottom: toolSeparator2.top
                font.pixelSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
            }
        
            ToolSeparator {
                id: toolSeparator2
                width: 220
                opacity: 0.6
                anchors.bottom: row3.top
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
                orientation: Qt.Horizontal
            }
        
            Row {
                id: row3
                width: 220
                height: 30
                clip: true
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 9
        
                RoundButton {
                    id: button4
                    width: 100
                    height: 30
                    text: qsTr("Si")
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    palette {button: "#ABEBC6"}
                    onClicked: popupds.open()
                }
        
                RoundButton {
                    id: button5
                    width: 100
                    height: 30
                    text: qsTr("No")
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    palette {button: "#F5B7B1"}
                    onClicked: popuprb.close() & popupsys.close()
                }
        
            }
        }
    }

    // Pop-Up Logout
    Popup {
        id: popupdc
        width: 250
        height: 100
        modal: true
        focus: true
        anchors.centerIn: parent
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        background: Rectangle {
            color: "black"
            radius: 15
        }

        Column {
            id: column2pp
            width: 220
            height: 100
            clip: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
                id: text2pp
                color: "#ffffff"
                text: qsTr("Vuoi disconnetterti dal sistema?")
                anchors.bottom: toolSeparator2pp.top
                font.pixelSize: 15
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
            }

            ToolSeparator {
                id: toolSeparator2pp
                width: 220
                opacity: 0.6
                anchors.bottom: row3pp.top
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottomMargin: 5
                orientation: Qt.Horizontal
            }

            Row {
                id: row3pp
                width: 220
                height: 30
                clip: true
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 9

                RoundButton {
                    id: button4pp
                    width: 100
                    height: 30
                    text: qsTr("Si")
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    palette {button: "#ABEBC6"}
                    onClicked: popupdc.open()
                }

                RoundButton {
                    id: button5pp
                    width: 100
                    height: 30
                    text: qsTr("No")
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    palette {button: "#F5B7B1"}
                    onClicked: popupdc.close() | popupsys.close()
                }

            }
        }
    }

    // Pop-Up sysInfo
    Popup {
        id: popupinfo
        width: 250
        height: 125
        parent: rbuttonsts
        bottomMargin: 110
        leftMargin: 110
        clip: true
        modal: false
        focus: false
        closePolicy: Popup.NoAutoClose
        background: Rectangle {
            color: "grey"
            radius: 15
        }

        ScrollableBox{
            id: scrollableBox
            width: 200
            height: 90
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

        Timeline {
            id: timeline
            currentFrame: 0
            animations: [
                TimelineAnimation {
                    id: timelineAnimation
                    onFinished: window.state = ""
                    pingPong: false
                    loops: 1
                    duration: 600
                    to: 600
                    from: 0
                },
                TimelineAnimation {
                    id: timelineAnimation1
                    onFinished: window.state = ""
                    loops: 1
                    duration: 600
                    running: false
                    to: 0
                    from: 600
                }
            ]
            startFrame: 0
            enabled: true
            endFrame: 600

            KeyframeGroup {
                target: rbuttonProva1
                property: "anchors.leftMargin"
                Keyframe {
                    frame: 0
                    value: -45
                }

                Keyframe {
                    frame: 600
                    value: 35
                }
            }

            KeyframeGroup {
                target: rbuttonProva2
                property: "anchors.leftMargin"
                Keyframe {
                    frame: 0
                    value: -45
                }

                Keyframe {
                    frame: 600
                    value: 35
                }
            }

            KeyframeGroup {
                target: rbuttonProva3
                property: "anchors.leftMargin"
                Keyframe {
                    frame: 0
                    value: -45
                }

                Keyframe {
                    frame: 600
                    value: 35
                }
            }

            KeyframeGroup {
                target: rbuttonProva1
                property: "opacity"
                Keyframe {
                    frame: 60
                    value: 1
                }

                Keyframe {
                    frame: 0
                    value: 0
                }
            }

            KeyframeGroup {
                target: rbuttonProva2
                property: "opacity"
                Keyframe {
                    frame: 0
                    value: 0
                }

                Keyframe {
                    frame: 60
                    value: 1
                }
            }

            KeyframeGroup {
                target: rbuttonProva3
                property: "opacity"
                Keyframe {
                    frame: 0
                    value: 0
                }

                Keyframe {
                    frame: 60
                    value: 1
                }
            }
        }
}



/*##^##
Designer {
    D{i:0;formeditorZoom:0.5}D{i:34}
}
##^##*/