app/qml/ProfilesDialog/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.4
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
        }
    }

    ProfilesStack {
        id: profilesStack

        width: headlineUnderline.width

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

        Behavior on opacity {
            NumberAnimation {duration: 200}
        }

        Component.onCompleted: {
            profilesStack.init()
        }

        Connections {
            target: root
            onOpened: {
                profilesStack.init()
            }
        }
    }

    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");

                var topMargin = backgroundRect.radius


                ctx.beginPath();
                ctx.fillStyle = headerBackground.color
                ctx.moveTo(width, topMargin);
                //
                //ctx.lineTo(width, topMargin);
                ctx.lineTo(width, height);
                ctx.lineTo(0, height);
                ctx.lineTo(0, topMargin)

                ctx.arc(topMargin, topMargin, topMargin, 1 * Math.PI, 1.5*Math.PI, false);
                ctx.lineTo(width-topMargin, 0)
                ctx.arc(width-topMargin, topMargin, topMargin, 1.5*Math.PI, 0, false)
                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

            color: appTheme.style.textColor

            text: profilesStack.currentItem.title

        }

    }

    FancyButton {
        id: head_back

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

        height: topContainerItm.height * 0.8
        width: height

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

        backgroundColor: appTheme.style.buttonColor

        image: appTheme.style.backIcon

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

    }

    FancyButton {
        id: head_add

        anchors {
            right: parent.right
            rightMargin: -height * 0.3
            top:parent.top
            topMargin: anchors.rightMargin
        }

        height: topContainerItm.height * 0.8
        width: height

        opacity: root.opacity < 1 ? root.opacity : ["ok", "add"].indexOf(profilesStack.currentItem.secondButt) >= 0 ? 1:0

        glowOpacity: opacity < 1 ? Math.pow( opacity, 100 ) : Math.pow( opacity, 100 )

        backgroundColor: appTheme.style.buttonColor

        image: appTheme.style.confirmIcon
        imageScale: profilesStack.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:  profilesStack.currentItem.secondButt === "add" ? 1:0

            color: appTheme.style.textColor

            text: "+"
            font.pixelSize: parent.height * 0.8
        }

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

        }

        Behavior on opacity {
            enabled: root.opacity === 1
            NumberAnimation {
                duration: 200
            }
        }
    }

}