This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/qml/ProfilesDialog.qml

449 lines
13 KiB
QML
Raw Normal View History

2018-08-12 20:51:57 +02:00
/*
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/>.
*/
2018-08-02 12:50:55 +02:00
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
2018-08-02 12:50:55 +02:00
import com.itsblue.speedclimbingstopwatch 1.0
import "./components"
2018-08-02 12:50:55 +02:00
Popup {
id: root
2018-08-02 12:50:55 +02:00
modal: true
dim: false
opacity: 0
2018-08-02 12:50:55 +02:00
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 }
2018-08-02 12:50:55 +02:00
}
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 }
2018-08-02 12:50:55 +02:00
}
background: Item {
RectangularGlow {
id: backgroundEffect
glowRadius: 7
spread: 0.02
color: "black"
opacity: 0.18
anchors.fill: backgroundRect
cornerRadius: backgroundRect.radius
scale: 1
2018-08-02 12:50:55 +02:00
}
Rectangle {
id: backgroundRect
2018-08-02 12:50:55 +02:00
anchors.fill: parent
radius: width * 0.1
color: appTheme.style.viewColor
2018-08-02 12:50:55 +02:00
}
}
2018-08-03 15:18:23 +02:00
StackView {
id: profiles_stack
property int text_pixelSize: headlineUnderline.width * 0.08
initialItem: profileListComp
width: headlineUnderline.width
2018-08-02 12:50:55 +02:00
anchors {
top: topContainerItm.bottom
2018-08-02 12:50:55 +02:00
left: parent.left
leftMargin: ( parent.width - headlineUnderline.width ) / 2
//topMargin: headlineUnderline.anchors.topMargin * 1.2
2018-08-02 12:50:55 +02:00
bottom: parent.bottom
bottomMargin: topContainerItm.height
2018-08-02 12:50:55 +02:00
}
2018-08-03 15:18:23 +02:00
Behavior on opacity {
NumberAnimation {duration: 200}
}
2018-08-02 12:50:55 +02:00
2018-08-03 15:18:23 +02:00
/*-----List of all profiles-----*/
Component {
id: profileListComp
2018-08-11 23:54:34 +02:00
2018-08-03 15:18:23 +02:00
ListView {
id: profileList
2018-08-03 15:18:23 +02:00
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()
}
}
2018-08-11 23:54:34 +02:00
2018-08-03 15:18:23 +02:00
Label {
2018-08-11 23:54:34 +02:00
opacity: profileList.count <= 0 ? 1:0
2018-08-03 15:18:23 +02:00
text: "add a profile by clicking +"
anchors.centerIn: parent
font.pixelSize: parent.width*0.06
2018-08-11 23:54:34 +02:00
Behavior on opacity {
NumberAnimation {
duration: 200
easing.type: Easing.InOutQuad
}
}
2018-08-03 15:18:23 +02:00
}
2018-08-02 12:50:55 +02:00
2018-08-03 15:18:23 +02:00
delegate: SwipeDelegate {
id: swipeDelegate
property bool active: profileList.listData[index]["active"]
text: profileList.listData[index]["fullName"]
width: profileList.width - (swipeDelegate.x)
2018-08-11 23:54:34 +02:00
font.pixelSize: profiles_stack.text_pixelSize
function remove() {
removeAnim.start()
}
onClicked: {
if(speedBackend.selectAthlete(profileList.listData[index]["userName"])){
profileList.loadData()
}
}
2018-08-11 23:54:34 +02:00
background: Rectangle {
color: Qt.darker( pressed ? Qt.darker("white", 1.1):"white", swipeDelegate.active ? 1.1:0 )
2018-08-11 23:54:34 +02:00
}
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()
}
}
2018-08-11 23:54:34 +02:00
background: Rectangle {
color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
}
}
}
2018-08-02 12:50:55 +02:00
}
2018-08-03 15:18:23 +02:00
ScrollIndicator.vertical: ScrollIndicator { }
2018-08-02 12:50:55 +02:00
}
2018-08-03 15:18:23 +02:00
}
2018-08-02 12:50:55 +02:00
2018-08-03 15:18:23 +02:00
/*-----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()
}
}
}
2018-08-03 15:18:23 +02:00
TextField {
id: fullNameTf
2018-08-03 15:18:23 +02:00
width: parent.width
placeholderText: "full name"
onTextChanged: {
parent.newProfileName = text
}
Keys.onReturnPressed: {
}
}
TextField {
id: userNameTf
width: parent.width
placeholderText: "username"
2018-08-03 15:18:23 +02:00
onTextChanged: {
parent.newProfileName = text
}
2018-08-11 23:54:34 +02:00
Keys.onReturnPressed: {
}
2018-08-03 15:18:23 +02:00
}
}
}
/*-----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
}
2018-08-02 12:50:55 +02:00
}
}
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
}
}
}
2018-08-02 12:50:55 +02:00
}