Commit 34c7d32f authored by Ionut Alexandrescu's avatar Ionut Alexandrescu

Improve the payment page

- Add payment accepted text
- Add insert money
- Update translations
parent 3b24cca5
import QtQuick 2.6
import QtQuick.Controls 2.1
import App 1.0
Rectangle
{
id: root
border.width: 2
color: "transparent"
radius: 5
width: 120
signal pinAccepted();
signal pinCaneled();
function clear()
{
textField.text = "";
root.pinCaneled();
}
function insertText( keyId )
{
if ( textField.text.length < 4 )
textField.text = textField.text + "x";
}
function removeText()
{
var len = textField.text.length;
if ( len > 0 )
textField.text = textField.text.substring(0, len - 1);
}
function cancelButton()
{
clear();
}
function acceptedButton()
{
var len = textField.text.length;
if ( len > 0 )
{
root.pinAccepted();
}
}
Label
{
anchors.fill: parent
id: textField
color: "#ffffff"
text: ""
font.pixelSize: Variables.fontPaymentPin
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
import QtQuick 2.6
import QtQuick.Controls 2.2
import App 1.0
import QtQuick.Layouts 1.0
import App 1.0
Item
{
id: root
width: 380
height: 300
property real padOpacity: 1
property alias confirmText: confirmText.text
signal pressedButton (int keyId)
signal pressedButton(int keyId)
Rectangle
{
......@@ -19,11 +22,22 @@ Item
opacity: 0.6
}
Text
{
id: confirmText
anchors.centerIn: parent;
color: "#ffffff"
text: qsTr("Payment\nAccepted")
font.pixelSize: Variables.fontPaymentCost
opacity: 1 - root.padOpacity;
}
Row
{
x: 20
y: 20
spacing: 10
opacity: root.padOpacity;
Column
{
spacing: 10
......
......@@ -10,6 +10,7 @@ Page {
function initializeValues()
{
infoText.text = qsTr( "Charging" )
chargingText.text = qsTr( "Charging in progress" )
battery.initializeValues();
}
......
......@@ -6,101 +6,122 @@ Page
{
id: root
signal paymentAccepted
signal paymentCanceled
signal helpPage
function initializeValues()
{
textField.clear();
padLabel.clear();
pinNumberItem.padOpacity = 1;
payment.paymentEnabled = true;
}
background: Item
background: Row
{
anchors.centerIn: parent
spacing: 30
Text
Item // The payment method item
{
color: "#ffffff"
text: qsTr("Payment method")
font.pixelSize: Variables.fontPayment
x: 80
y: 35
}
PaymentType
{
id: payment
x: 40
y: 70
}
width: childrenRect.width
height: childrenRect.height
Text
{
id: paymentText
color: "#ffffff"
text: qsTr("Payment method")
font.pixelSize: Variables.fontPayment
x: 40
}
PaymentType
{
id: payment
anchors.top: paymentText.bottom
anchors.topMargin: 5;
Text
{
id: textEnterPIN
font.pixelSize: Variables.fontPayment
color: "#ffffff"
text: qsTr("Enter PIN-number:")
x: 410
y: 35
onCardPayment:
{
padLabel.clear();
pinNumberItem.padOpacity = 1;
}
onCashPayment:
{
pinNumberItem.padOpacity = 0;
pad.confirmText = qsTr("Insert money");
root.paymentAccepted()
}
}
}
Rectangle
Item // The pin number item
{
anchors.left: textEnterPIN.right
anchors.top: textEnterPIN.top
anchors.bottom: textEnterPIN.bottom
anchors.leftMargin: 10
border.width: 2
color: "transparent"
radius: 5
width: 120
Label
id: pinNumberItem
width: pad.width
height: padLabel.height + pad.height
property real padOpacity: 1
Behavior on padOpacity { NumberAnimation { duration: 300 } }
Text
{
anchors.fill: parent
id: textField
id: textEnterPIN
font.pixelSize: Variables.fontPayment
color: "#ffffff"
text: ""
font.pixelSize: Variables.fontPaymentPin
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: qsTr("Enter PIN-number:")
x: 40
opacity: pinNumberItem.padOpacity;
function clear()
{
text = "";
}
}
PadLabel
{
id: padLabel
anchors.left: textEnterPIN.right
anchors.top: textEnterPIN.top
anchors.bottom: textEnterPIN.bottom
anchors.leftMargin: 10
opacity: pinNumberItem.padOpacity;
function insertText( keyId ) {
if ( textField.text.length < 4 )
textField.text = textField.text + "x";
onPinAccepted:
{
pad.confirmText = qsTr("Payment\nAccepted");
pinNumberItem.padOpacity = 0;
root.paymentAccepted();
payment.paymentEnabled = false;
}
function removeText() {
var len = textField.text.length;
console.log( len )
if ( len > 0 )
textField.text = textField.text.substring(0, len - 1);
onPinCaneled:
{
pinNumberItem.padOpacity = 1;
root.paymentCanceled();
}
}
}
PadType
{
id: pad
anchors.verticalCenter: payment.verticalCenter
anchors.left: payment.right
anchors.leftMargin: 40
onPressedButton:
PadType
{
updateTextField( keyId )
}
id: pad
anchors.top: textEnterPIN.bottom
anchors.topMargin: 5;
padOpacity: pinNumberItem.padOpacity;
function updateTextField( keyId )
{
switch (keyId) {
case 10: textField.clear(); break;
case 11: textField.removeText(); break;
case 12: break;
case 13: root.paymentAccepted(); break;
case 14: break;
case 15: break;
case 16: break;
default: textField.insertText(keyId); break;
onPressedButton:
{
updateTextField( keyId )
}
function updateTextField( keyId )
{
switch (keyId) {
case 10: padLabel.cancelButton(); break;
case 11: padLabel.removeText(); break;
case 12: root.helpPage(); break;
case 13: padLabel.acceptedButton(); break;
case 14: break;
case 15: break;
case 16: break;
default: padLabel.insertText(keyId); break;
}
}
}
}
......
......@@ -7,8 +7,13 @@ import App 1.0
Item
{
id: root
width: 300
height: 300
signal cardPayment()
signal cashPayment()
property bool paymentEnabled: true
Rectangle
{
......@@ -32,31 +37,43 @@ Item
checked: true
imageName: "Assets/Payment/amex.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cardPayment()
}
PaymentCard {
imageName: "Assets/Payment/discover.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cardPayment()
}
PaymentCard {
imageName: "Assets/Payment/jcb.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cardPayment()
}
PaymentCard {
imageName: "Assets/Payment/mastercard.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cardPayment()
}
PaymentCard {
imageName: "Assets/Payment/money.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cashPayment()
}
PaymentCard {
imageName: "Assets/Payment/visa.png"
ButtonGroup.group: radioGroup
enabled: root.paymentEnabled;
onClicked: root.cardPayment()
}
}
Text
......
......@@ -41,22 +41,29 @@
<context>
<name>PadType</name>
<message>
<location filename="../PadType.qml" line="114"/>
<location filename="../PadType.qml" line="30"/>
<source>Payment
Accepted</source>
<translation>Zahlung
Akzeptiert</translation>
</message>
<message>
<location filename="../PadType.qml" line="128"/>
<source>Cancel</source>
<translation>Stornieren</translation>
</message>
<message>
<location filename="../PadType.qml" line="124"/>
<location filename="../PadType.qml" line="138"/>
<source>Correct</source>
<translation>Richtig</translation>
</message>
<message>
<location filename="../PadType.qml" line="134"/>
<location filename="../PadType.qml" line="148"/>
<source>Help</source>
<translation>Hilfe</translation>
</message>
<message>
<location filename="../PadType.qml" line="143"/>
<location filename="../PadType.qml" line="157"/>
<source>Enter</source>
<translation>Eingeben</translation>
</message>
......@@ -95,12 +102,13 @@
<translation>Aufladung</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="47"/>
<location filename="../PageCharging.qml" line="13"/>
<location filename="../PageCharging.qml" line="48"/>
<source>Charging in progress</source>
<translation>Aufladung läuft</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="72"/>
<location filename="../PageCharging.qml" line="73"/>
<source>Charging Complete</source>
<translation>Aufladung komplett</translation>
</message>
......@@ -108,15 +116,27 @@
<context>
<name>PagePayment</name>
<message>
<location filename="../PagePayment.qml" line="21"/>
<location filename="../PagePayment.qml" line="32"/>
<source>Payment method</source>
<translation>Bezahlverfahren</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="38"/>
<location filename="../PagePayment.qml" line="51"/>
<source>Insert money</source>
<translation>Geld einlegen</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="71"/>
<source>Enter PIN-number:</source>
<translation>PIN-Nummer eingeben:</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="88"/>
<source>Payment
Accepted</source>
<translation>Zahlung
Akzeptiert</translation>
</message>
</context>
<context>
<name>PagePromotionSpot</name>
......@@ -129,7 +149,7 @@
<context>
<name>PaymentType</name>
<message>
<location filename="../PaymentType.qml" line="65"/>
<location filename="../PaymentType.qml" line="82"/>
<source>Total cost</source>
<translation>Gesamtkosten</translation>
</message>
......@@ -170,29 +190,29 @@
<translation>Elektrofahrzeug-Ladestation</translation>
</message>
<message>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="97"/>
<source>Cancel</source>
<translation>Stornieren</translation>
</message>
<message>
<location filename="../main.qml" line="99"/>
<location filename="../main.qml" line="104"/>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="103"/>
<source>Confirm</source>
<translation>Bestätigen</translation>
</message>
<message>
<location filename="../main.qml" line="103"/>
<location filename="../main.qml" line="108"/>
<location filename="../main.qml" line="102"/>
<location filename="../main.qml" line="107"/>
<source>Back</source>
<translation>Zurück</translation>
</message>
<message>
<location filename="../main.qml" line="109"/>
<location filename="../main.qml" line="108"/>
<source>Continue</source>
<translation>Fortsetzen</translation>
</message>
<message>
<location filename="../main.qml" line="113"/>
<location filename="../main.qml" line="112"/>
<source>Done</source>
<translation>Erledigt</translation>
</message>
......
......@@ -41,22 +41,29 @@
<context>
<name>PadType</name>
<message>
<location filename="../PadType.qml" line="114"/>
<location filename="../PadType.qml" line="30"/>
<source>Payment
Accepted</source>
<translation>Payment
Accepted</translation>
</message>
<message>
<location filename="../PadType.qml" line="128"/>
<source>Cancel</source>
<translation>Cancel</translation>
</message>
<message>
<location filename="../PadType.qml" line="124"/>
<location filename="../PadType.qml" line="138"/>
<source>Correct</source>
<translation>Correct</translation>
</message>
<message>
<location filename="../PadType.qml" line="134"/>
<location filename="../PadType.qml" line="148"/>
<source>Help</source>
<translation></translation>
</message>
<message>
<location filename="../PadType.qml" line="143"/>
<location filename="../PadType.qml" line="157"/>
<source>Enter</source>
<translation>Enter</translation>
</message>
......@@ -95,12 +102,13 @@
<translation>Charging</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="47"/>
<location filename="../PageCharging.qml" line="13"/>
<location filename="../PageCharging.qml" line="48"/>
<source>Charging in progress</source>
<translation>Charging in progress</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="72"/>
<location filename="../PageCharging.qml" line="73"/>
<source>Charging Complete</source>
<translation>Charging Complete</translation>
</message>
......@@ -108,15 +116,27 @@
<context>
<name>PagePayment</name>
<message>
<location filename="../PagePayment.qml" line="21"/>
<location filename="../PagePayment.qml" line="32"/>
<source>Payment method</source>
<translation>Payment method</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="38"/>
<location filename="../PagePayment.qml" line="51"/>
<source>Insert money</source>
<translation>Insert money</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="71"/>
<source>Enter PIN-number:</source>
<translation>Enter PIN-number:</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="88"/>
<source>Payment
Accepted</source>
<translation>Payment
Accepted</translation>
</message>
</context>
<context>
<name>PagePromotionSpot</name>
......@@ -129,7 +149,7 @@
<context>
<name>PaymentType</name>
<message>
<location filename="../PaymentType.qml" line="65"/>
<location filename="../PaymentType.qml" line="82"/>
<source>Total cost</source>
<translation>Total cost</translation>
</message>
......@@ -170,29 +190,29 @@
<translation>Electric Vehicle Charging Station</translation>
</message>
<message>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="97"/>
<source>Cancel</source>
<translation>Cancel</translation>
</message>
<message>
<location filename="../main.qml" line="99"/>
<location filename="../main.qml" line="104"/>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="103"/>
<source>Confirm</source>
<translation>Confirm</translation>
</message>
<message>
<location filename="../main.qml" line="103"/>
<location filename="../main.qml" line="108"/>
<location filename="../main.qml" line="102"/>
<location filename="../main.qml" line="107"/>
<source>Back</source>
<translation>Back</translation>
</message>
<message>
<location filename="../main.qml" line="109"/>
<location filename="../main.qml" line="108"/>
<source>Continue</source>
<translation>Continue</translation>
</message>
<message>
<location filename="../main.qml" line="113"/>
<location filename="../main.qml" line="112"/>
<source>Done</source>
<translation>Done</translation>
</message>
......
......@@ -41,22 +41,29 @@
<context>
<name>PadType</name>
<message>
<location filename="../PadType.qml" line="114"/>
<location filename="../PadType.qml" line="30"/>
<source>Payment
Accepted</source>
<translation>Paiement
Accepté</translation>
</message>
<message>
<location filename="../PadType.qml" line="128"/>
<source>Cancel</source>
<translation>Annuler</translation>
</message>
<message>
<location filename="../PadType.qml" line="124"/>
<location filename="../PadType.qml" line="138"/>
<source>Correct</source>
<translation>Correct</translation>
</message>
<message>
<location filename="../PadType.qml" line="134"/>
<location filename="../PadType.qml" line="148"/>
<source>Help</source>
<translation>Aidez</translation>
</message>
<message>
<location filename="../PadType.qml" line="143"/>
<location filename="../PadType.qml" line="157"/>
<source>Enter</source>
<translation>Confirmer</translation>
</message>
......@@ -95,12 +102,13 @@
<translation>Chargement</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="47"/>
<location filename="../PageCharging.qml" line="13"/>
<location filename="../PageCharging.qml" line="48"/>
<source>Charging in progress</source>
<translation>Chargement en cours</translation>
</message>
<message>
<location filename="../PageCharging.qml" line="72"/>
<location filename="../PageCharging.qml" line="73"/>
<source>Charging Complete</source>
<translation>Chargement complet</translation>
</message>
......@@ -108,15 +116,27 @@
<context>
<name>PagePayment</name>
<message>
<location filename="../PagePayment.qml" line="21"/>
<location filename="../PagePayment.qml" line="32"/>
<source>Payment method</source>
<translation>Mode de paiement</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="38"/>
<location filename="../PagePayment.qml" line="51"/>
<source>Insert money</source>
<translation>Insérer l&apos;argent</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="71"/>
<source>Enter PIN-number:</source>
<translation>Entrez le numéro PIN:</translation>
</message>
<message>
<location filename="../PagePayment.qml" line="88"/>
<source>Payment
Accepted</source>
<translation>Paiement
Accepté</translation>
</message>
</context>
<context>
<name>PagePromotionSpot</name>
......@@ -129,7 +149,7 @@
<context>
<name>PaymentType</name>
<message>
<location filename="../PaymentType.qml" line="65"/>
<location filename="../PaymentType.qml" line="82"/>
<source>Total cost</source>
<translation>Coût total</translation>
</message>
......@@ -170,29 +190,29 @@
<translation>Borne de recharge pour voitures électriques</translation>
</message>
<message>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="97"/>
<source>Cancel</source>
<translation>Annuler</translation>
</message>
<message>
<location filename="../main.qml" line="99"/>
<location filename="../main.qml" line="104"/>
<location filename="../main.qml" line="98"/>
<location filename="../main.qml" line="103"/>
<source>Confirm</source>
<translation>Confirmer</translation>
</message>
<message>
<location filename="../main.qml" line="103"/>
<location filename="../main.qml" line="108"/>
<location filename="../main.qml" line="102"/>
<location filename="../main.qml" line="107"/>
<source>Back</source>
<translation>Arrière</translation>
</message>
<message>
<location filename="../main.qml" line="109"/>
<location filename="../main.qml" line="108"/>
<source>Continue</source>
<translation>Continuer</translation>