import QtQuick 2.6 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 import App 1.0 Item { id: root signal valueChanged( real value ); signal priceChanged( real value ); property bool indicatorText: true; property alias chargingVisible: chargeSpinBox.visible property alias chargingText: chargingText.text function setChargeValue( value ) { chargeSpinBox.from = value; chargeSpinBox.to = value; chargeSpinBox.value = value; } function setTimeValue( value ) { timeSpinBox.from = value; timeSpinBox.to = value; timeSpinBox.value = value; } function setPriceValue( value ) { priceSpinBox.from = value; priceSpinBox.to = value; priceSpinBox.value = value; } Component.onCompleted: { chargeSpinBox.from = Variables.initialCharge * 100 } function updateValues( value ) { setSizeStep( 100 ) chargeSpinBox.updateValue( value ); timeSpinBox.updateValue( value ); priceSpinBox.updateValue( value ); } function setSizeStep( value ) { chargeSpinBox.stepSize = value; timeSpinBox.stepSize = Variables.timeOnePercent * value priceSpinBox.stepSize = Variables.priceOnePercent * value } ColumnLayout { spacing: 30 id: spinBoxColumn Rectangle { color: "#0b2a4a" border.color: "#41CD52" border.width: Variables.pixelBorderSpinBox Layout.preferredWidth: Variables.pixelSpinBoxWidth height: Variables.pixelSpinBoxButton visible: !root.chargingVisible Text { id: chargingText color: "#42cc53" height: Variables.pixelSpinBoxButton text: qsTr( "Charging in progress" ) font.pixelSize: Variables.fontChargingProgress horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter x:20 } } SpinBoxNumber { Layout.preferredWidth: Variables.pixelSpinBoxWidth id: chargeSpinBox indicatorText: root.indicatorText function updateValue( inValue ) { chargeSpinBox.value = inValue * 100 } onValueModified: { var sendValue = value / 100; root.valueChanged( sendValue ) timeSpinBox.updateValue( sendValue ) priceSpinBox.updateValue( sendValue ) } } SpinBoxTime { id: timeSpinBox indicatorText: root.indicatorText Layout.preferredWidth: Variables.pixelSpinBoxWidth function updateValue( inValue ) { var chargeToAdd = inValue - Variables.initialCharge timeSpinBox.value = chargeToAdd * Variables.timeOnePercent * 100 } onValueModified: { var chargeToAdd = value / ( Variables.timeOnePercent * 100 ) var sendValue = chargeToAdd + Variables.initialCharge; root.valueChanged( sendValue ) chargeSpinBox.updateValue( sendValue ) priceSpinBox.updateValue( sendValue ) } } SpinBoxPrice { id: priceSpinBox indicatorText: root.indicatorText stepSize: Variables.timeOnePercent * 100 Layout.preferredWidth: Variables.pixelSpinBoxWidth function updateValue( inValue ) { var chargeToAdd = inValue - Variables.initialCharge priceSpinBox.value = chargeToAdd * Variables.priceOnePercent * 100 } onValueChanged: { priceChanged( value ) } onValueModified: { var chargeToAdd = value / ( Variables.priceOnePercent * 100 ) var sendValue = chargeToAdd + Variables.initialCharge; root.valueChanged( sendValue ) chargeSpinBox.updateValue( sendValue ) timeSpinBox.updateValue( sendValue ) } } } Text { anchors.top: spinBoxColumn.bottom anchors.topMargin: 8 color: "#979eb6" text: qsTr("Charging Rate")+ " 200 Mi/hr 355V 191A" font.pixelSize: Variables.fontChargingRate } }