app/resources/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 de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0
import de.itsblue.ScStwApp 2.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.theme.colors.view
        }
    }

    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
            function 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: "transparent"
            anchors {
                bottom: parent.bottom
                left: parent.left
                right: parent.right
            }
        }

        Canvas {

            id: headerBackground

            anchors.fill: parent

            property color color: appTheme.theme.colors.view

            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: 1

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            color: appTheme.theme.colors.text

            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.theme.colors.button

        image: appTheme.theme.images.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.theme.colors.button

        image: appTheme.theme.images.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.theme.colors.text

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

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

        }

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

}