app/qml/ProfilesDialog.qml

/*
    Speed Climbing Stopwatch - Simple Stopwatch for Climbers
    Copyright (C) 2018  Itsblue Development - Dorian Zeder

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, version 3 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

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 com.itsblue.speedclimbingstopwatch 1.0
import "./components"


Popup {
    id: root

    modal: true
    dim: false

    opacity: 0

    enter: Transition {
        NumberAnimation { properties: "opacity"; to: 1; duration: 300; easing.type: Easing.InOutQuad }
        NumberAnimation { properties: "scale"; from: 0.9; to: 1; duration: 300; easing.type: Easing.InOutQuad }
    }

    exit: Transition {
        NumberAnimation { properties: "opacity"; to: 0; duration: 300; easing.type: Easing.InOutQuad }
        NumberAnimation { properties: "scale"; from: 1; to: 0.9; duration: 300; easing.type: Easing.InOutQuad }
    }

    background: Item {

        RectangularGlow {
            id: backgroundEffect
            glowRadius: 7
            spread: 0.02
            color: "black"
            opacity: 0.18
            anchors.fill: backgroundRect
            cornerRadius: backgroundRect.radius
            scale: 1
        }

        Rectangle {
            id: backgroundRect
            anchors.fill: parent
            radius: width * 0.1
            color: appTheme.style.viewColor
        }
    }


    StackView {
        id: profiles_stack
        property int text_pixelSize: headlineUnderline.width * 0.08
        initialItem: profileListComp
        width: headlineUnderline.width

        anchors  {
            top: topContainerItm.bottom
            left: parent.left
            leftMargin: ( parent.width - headlineUnderline.width ) / 2
            //topMargin: headlineUnderline.anchors.topMargin * 1.2
            bottom: parent.bottom
            bottomMargin: topContainerItm.height
        }

        Behavior on opacity {
            NumberAnimation {duration: 200}
        }

        /*-----List of all profiles-----*/
        Component {
            id: profileListComp


            ListView {
                id: profileList

                property string title: "profiles"
                property string secondButt: "add"
                property var listData: speedBackend.getAthletes()

                function loadData() {
                    profileList.enabled = false
                    listData = speedBackend.getAthletes()
                    profileList.enabled = true
                }

                model: listData.length

                Connections {
                    target: root
                    onOpened: {
                        profileList.loadData()
                    }
                }

                Label {
                    opacity: profileList.count <= 0 ? 1:0
                    text: "add a profile by clicking +"
                    anchors.centerIn: parent
                    font.pixelSize: parent.width*0.06
                    Behavior on opacity {
                        NumberAnimation {
                            duration: 200
                            easing.type: Easing.InOutQuad
                        }
                    }
                }

                delegate: SwipeDelegate {
                    id: swipeDelegate

                    property bool active: profileList.listData[index]["active"]

                    text: profileList.listData[index]["fullName"]
                    width: profileList.width - (swipeDelegate.x)



                    font.pixelSize: profiles_stack.text_pixelSize

                    function remove() {
                        removeAnim.start()
                    }

                    onClicked: {
                        if(speedBackend.selectAthlete(profileList.listData[index]["userName"])){
                            profileList.loadData()
                        }
                    }

                    background: Rectangle {
                        color: Qt.darker( pressed ? Qt.darker("white", 1.1):"white", swipeDelegate.active ? 1.1:0 )

                    }

                    Rectangle {
                        color: "grey"
                        height: 1
                        width: parent.width * 0.9
                        visible: index > 0
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            top: parent.top
                        }
                    }

                    NumberAnimation {
                        id: removeAnim
                        target: swipeDelegate
                        property: "height"
                        to: 0
                        easing.type: Easing.InOutQuad
                        onStopped: profileModel.model.remove(index)
                    }

                    swipe.transition: Transition {
                        SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic }
                    }

                    swipe.left: Row {
                        anchors.left: parent.left
                        height: parent.height

                        Label {
                            id: deleteLabel
                            text: qsTr("Delete")
                            color: "white"
                            verticalAlignment: Label.AlignVCenter
                            padding: 12
                            height: parent.height

                            SwipeDelegate.onClicked: {
                                if(speedBackend.deleteAthlete(profileList.listData[index]["userName"])){
                                    profileList.loadData()
                                }
                            }

                            background: Rectangle {
                                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
                            }
                        }
                    }
                }

                ScrollIndicator.vertical: ScrollIndicator { }
            }

        }

        /*-----Option to add a profile-----*/
        Component {
            id: addProfileComp
            Column {
                property string title: "add profile"
                property string secondButt: "ok"
                property string newProfileName: ""

                Connections {
                    target: head_add

                    enabled: true

                    onClicked: {
                        if(speedBackend.createAthlete(userNameTf.text, fullNameTf.text)){
                            profiles_stack.pop()
                        }
                    }
                }

                TextField {
                    id: fullNameTf
                    width: parent.width
                    placeholderText: "full name"
                    onTextChanged: {
                        parent.newProfileName = text
                    }
                    Keys.onReturnPressed: {
                    }
                }
                TextField {
                    id: userNameTf
                    width: parent.width
                    placeholderText: "username"
                    onTextChanged: {
                        parent.newProfileName = text
                    }
                    Keys.onReturnPressed: {
                    }
                }
            }
        }

        /*-----Custom animations-----*/

        pushEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        pushExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }

        popExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        popEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    }

    Item {
        id: topContainerItm

        anchors {
            top: parent.top
            horizontalCenter: parent.horizontalCenter
        }

        height: parent.height * 0.15
        width: backgroundRect.width

        RectangularGlow {
            id: headerUnderlineEffect
            glowRadius: 7
            spread: 0.02
            color: "black"
            opacity: 0.18
            anchors.fill: headlineUnderline
            scale: 1
        }

        Rectangle {
            id: headlineUnderline
            height: 1
            width: parent.width
            color: "grey"
            anchors {
                bottom: parent.bottom
                left: parent.left
                right: parent.right
            }
        }

        Canvas {

            id: headerBackground

            anchors.fill: parent

            property color color: appTheme.style.viewColor

            onPaint: {
                var ctx = getContext("2d");

                ctx.beginPath();
                ctx.fillStyle = headerBackground.color
                ctx.moveTo(0, 0);
                //ctx.arc(centreX, centreY, root.width / 2, 1 * Math.PI, 2*Math.PI, false);
                ctx.lineTo(width, 0);
                ctx.lineTo(width, height);
                ctx.lineTo(0, height);
                ctx.lineTo(0, 0);
                ctx.fill();
            }
        }

        Label {
            id: head_text

            anchors {
                centerIn: parent
            }

            width: parent.width * 0.8
            height: parent.height * 0.8

            fontSizeMode: Text.Fit
            font.pixelSize: headlineUnderline.width * 0.1
            minimumPixelSize: 0

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            text: profiles_stack.currentItem.title

        }

    }

    FancyButton {
        id: head_back

        anchors {
            left: parent.left
            leftMargin: -parent.width * 0.03
            top:parent.top
            topMargin: -parent.height * 0.03
        }

        height: parent.height * 0.1
        width: height

        glowOpacity: Math.pow( root.opacity, 100 )

        backgroundColor: appTheme.style.buttonColor

        image: "qrc:/graphics/icons/back_black.png"

        onClicked: profiles_stack.depth > 1 ? profiles_stack.pop():root.close()

        Behavior on opacity {
            NumberAnimation {
                duration: 100
            }
        }
    }

    FancyButton {
        id: head_add

        anchors {
            right: parent.right
            rightMargin: -parent.width * 0.03
            top:parent.top
            topMargin: -parent.height * 0.03
        }
        height: parent.height * 0.1
        width:height

        glowOpacity: Math.pow( root.opacity, 100 )

        backgroundColor: appTheme.style.buttonColor

        image: "qrc:/graphics/icons/ok_black.png"
        imageScale: profiles_stack.currentItem.secondButt === "ok" ? 1:0

        Label {
            anchors {
                top: parent.top
                topMargin: parent.height/2 - height*0.55
                left: parent.left
                leftMargin: parent.width/2 - width/2
            }
            opacity:  profiles_stack.currentItem.secondButt === "add" ? 1:0
            text: "+"
            font.pixelSize: parent.height
        }

        onClicked: {
            switch(profiles_stack.currentItem.secondButt){
            case "add":
                profiles_stack.push(addProfileComp)
                break
            case "ok":
                //speedBackend.createAthlete(fullNameTf.text, userNameTf.text)
            }

        }

        Behavior on opacity {
            NumberAnimation {
                duration: 100
            }
        }
    }

}