From 16f2e0ec155d4721a637c4ba92df7214f3f4b45a Mon Sep 17 00:00:00 2001
From: "aleksandr.ledyaev" <aleksandr.ledyaev@demlabs.net>
Date: Thu, 29 Oct 2020 03:46:37 +0300
Subject: [PATCH] add my VPN orders grid
[*] DapCreateVPNOrderPanel.qml; DapVPNServiceTab.qml;
DapVPNServiceTopPanel.qml
[+] ic_info_order.svg; DapVPNOrderInfoLine.qml; DapVPNOrdersGridView.qml
---
CellFrameDashboardGUI/qml.qrc | 3 +
.../resources/icons/ic_info_order.svg | 1 +
.../VPNService/DapCreateVPNOrderPanel.qml | 14 ++
.../VPNService/DapVPNOrderInfoLine.qml | 36 ++++++
.../VPNService/DapVPNOrdersGridView.qml | 121 ++++++++++++++++++
.../desktop/VPNService/DapVPNServiceTab.qml | 74 ++++++++++-
.../VPNService/DapVPNServiceTopPanel.qml | 8 ++
7 files changed, 253 insertions(+), 4 deletions(-)
create mode 100644 CellFrameDashboardGUI/resources/icons/ic_info_order.svg
create mode 100644 CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrderInfoLine.qml
create mode 100644 CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrdersGridView.qml
diff --git a/CellFrameDashboardGUI/qml.qrc b/CellFrameDashboardGUI/qml.qrc
index 777faa4..2f5286b 100755
--- a/CellFrameDashboardGUI/qml.qrc
+++ b/CellFrameDashboardGUI/qml.qrc
@@ -201,5 +201,8 @@
<file>screen/desktop/VPNService/DapRightPanelElement.qml</file>
<file>screen/desktop/VPNService/DapSpinBox.qml</file>
<file>screen/desktop/VPNService/DapDoubleSpinBox.qml</file>
+ <file>screen/desktop/VPNService/DapVPNOrdersGridView.qml</file>
+ <file>resources/icons/ic_info_order.svg</file>
+ <file>screen/desktop/VPNService/DapVPNOrderInfoLine.qml</file>
</qresource>
</RCC>
diff --git a/CellFrameDashboardGUI/resources/icons/ic_info_order.svg b/CellFrameDashboardGUI/resources/icons/ic_info_order.svg
new file mode 100644
index 0000000..27dbbba
--- /dev/null
+++ b/CellFrameDashboardGUI/resources/icons/ic_info_order.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g transform="translate(-7)"><rect width="30" height="30" transform="translate(7)" fill="none"/><path d="M13,5a8,8,0,1,0,8,8,8,8,0,0,0-8-8Zm0,14.578A6.578,6.578,0,1,1,19.578,13,6.578,6.578,0,0,1,13,19.578ZM12.111,8.556A.889.889,0,1,1,13,9.444.889.889,0,0,1,12.111,8.556Zm2.844,8.065v.468a.356.356,0,0,1-.356.356H11.4a.356.356,0,0,1-.356-.356V16.62a.356.356,0,0,1,.248-.339l.732-.232a.124.124,0,0,0,.086-.118V12.289h-.559A.508.508,0,0,1,11.4,11.3l2.026-.64a.356.356,0,0,1,.463.339v4.935a.124.124,0,0,0,.086.118l.732.232a.356.356,0,0,1,.248.339Z" transform="translate(9 2)" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
index 8cd148d..8c42cbb 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
@@ -5,6 +5,8 @@ import "qrc:/widgets"
Item {
id: control
+ signal orderCreated
+
Column {
DapRightPanelElement {
@@ -146,6 +148,7 @@ Item {
model: ListModel {
ListElement { unit: qsTr("hours") }
ListElement { unit: qsTr("days") }
+ ListElement { unit: qsTr("seconds") }
}
}
}
@@ -238,6 +241,17 @@ Item {
onClicked: {
console.log("CRATE ORDER CLICKED. name: " + textName.text + "; region: " + comboBoxRegion.currentText + "; Units: "
+ comboBoxUnit.currentText + " " + spinBoxUnit.value + "; Price: " + comboBoxPrice.currentText + " " + spinBoxPrice.value);
+
+ vpnTest.ordersModel.append({
+ name: textName.text,
+ dateCreated: (new Date()).toLocaleDateString(Qt.locale(), Locale.LongFormat),
+ units: spinBoxUnit.value,
+ unitsType: comboBoxUnit.currentText,
+ value: spinBoxPrice.value,
+ token: comboBoxPrice.currentText
+ });
+
+ control.orderCreated();
}
}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrderInfoLine.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrderInfoLine.qml
new file mode 100644
index 0000000..b7ecbe1
--- /dev/null
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrderInfoLine.qml
@@ -0,0 +1,36 @@
+import QtQuick 2.7
+
+Item {
+ id: control
+
+ property alias name: textName.text
+ property alias value: textValue.text
+
+ implicitWidth: textName.implicitWidth + textValue.implicitWidth
+ implicitHeight: Math.max(textName.implicitHeight, textValue.implicitHeight)
+
+ Text {
+ id: textName
+ anchors.left: parent.left
+ anchors.right: parent.horizontalCenter
+ anchors.verticalCenter: parent.verticalCenter
+ height: Math.max(implicitHeight, parent.height)
+ font: quicksandFonts.medium12
+ elide: Text.ElideRight
+ color: "#211A3A"
+ text: qsTr("text")
+ }
+
+ Text {
+ id: textValue
+ anchors.left: parent.horizontalCenter
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ height: Math.max(implicitHeight, parent.height)
+ font: quicksandFonts.medium12
+ elide: Text.ElideRight
+ horizontalAlignment: Qt.AlignRight
+ color: "#757184"
+ text: qsTr("text")
+ }
+}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrdersGridView.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrdersGridView.qml
new file mode 100644
index 0000000..b49a604
--- /dev/null
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNOrdersGridView.qml
@@ -0,0 +1,121 @@
+import QtQuick 2.7
+
+GridView {
+ id: control
+
+ property int delegateMargin
+ property int delegateWidth: 326 * pt
+ property int delegateHeight: 190 * pt
+ property int delegateContentMargin: 16 * pt
+
+ model: vpnTest.ordersModel
+
+ cellWidth: delegateMargin * 2 + delegateWidth
+ cellHeight: delegateMargin * 2 + delegateHeight
+
+ clip: true
+ currentIndex: -1
+
+ delegate: Item {
+ id: cell
+
+ width: control.cellWidth
+ height: control.cellHeight
+
+ Rectangle {
+ id: contentFrame
+
+ x: control.delegateMargin
+ y: control.delegateMargin
+ width: parent.width - x * 2
+ height: parent.height - y * 2
+
+ color: "#00000000"
+ border.width: pt
+ border.color: "#E2E1E6"
+ radius: 8 * pt
+
+ Rectangle {
+ id: headerFrame
+
+ width: parent.width
+ height: 30 * pt
+ color: control.currentIndex == index ? "#D51F5D" : "#3E3853"
+ radius: 8 * pt
+
+ Rectangle {
+ y: parent.height - height
+ width: parent.width
+ height: 8 * pt
+ color: parent.color
+ }
+
+ Text {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.leftMargin: control.delegateContentMargin
+ anchors.right: orderIcon.right
+ font: quicksandFonts.medium12
+ elide: Text.ElideRight
+ color: "#FFFFFF"
+ text: model.name
+ }
+
+ Image {
+ id: orderIcon
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: (control.delegateContentMargin / 2) * pt // / 2 - ic_info_order.svg have space right
+ sourceSize: Qt.size(parent.height, parent.height)
+ source: "qrc:/resources/icons/ic_info_order.svg"
+ }
+ }
+
+ Item {
+ id: infoFrame
+
+ anchors { left: parent.left; top: headerFrame.bottom; right: parent.right; bottom: parent.bottom }
+ anchors.margins: control.delegateContentMargin
+
+ Column {
+ spacing: 12 * pt
+
+ DapVPNOrderInfoLine {
+ width: infoFrame.width
+ name: qsTr("Date created")
+ value: model.dateCreated
+ }
+ DapVPNOrderInfoLine {
+ width: infoFrame.width
+ name: qsTr("Units")
+ value: model.units
+ }
+ DapVPNOrderInfoLine {
+ width: infoFrame.width
+ name: qsTr("Units type")
+ value: model.unitsType
+ }
+ DapVPNOrderInfoLine {
+ width: infoFrame.width
+ name: qsTr("Value")
+ value: model.value
+ }
+ DapVPNOrderInfoLine {
+ width: infoFrame.width
+ name: qsTr("Token")
+ value: model.token
+ }
+ }
+ }
+
+ MouseArea {
+ anchors.fill: parent
+
+ onClicked: {
+ cell.forceActiveFocus();
+ control.currentIndex = index;
+ }
+ }
+ }
+ }
+}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTab.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTab.qml
index 81c8ce7..232b240 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTab.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTab.qml
@@ -5,14 +5,43 @@ import ".."
Item {
id: tab
+ // TODO только Ð´Ð»Ñ Ñ‚ÐµÑта
Item {
- id: test
+ id: vpnTest
+
+ property alias ordersModel: ordersModel
+
+ Component.onCompleted: {
+ for (var i = 0; i < 10; ++ i) {
+ ordersModel.append({
+ name: "order " + i,
+ dateCreated: "April 22, 2020",
+ units: 3600,
+ unitsType: "seconds",
+ value: 0.1,
+ token: "KELT"
+ });
+ }
+ }
+
+ ListModel {
+ id: ordersModel
+ onCountChanged: console.log("VPN TEST ORDERS COUNT CHANGED: " + count);
+ /*ListElement {
+ name: ""
+ dateCreated: "April 22, 2020"
+ units: 3600
+ unitsType: "seconds"
+ value: 0.1
+ token: "KELT"
+ }*/
+ }
}
// TODO как узнать?
- property bool ordersExists: false
+ property bool ordersExists: vpnTest.ordersModel.count > 0
function newVPNOrder()
{
@@ -45,10 +74,15 @@ Item {
height: parent.height - topPanel.height
width: parent.width
+ // for DapVPNOrdersGridView
+ clip: true
+
Item {
id: mainPanel
- anchors.margins: 24 * pt
+ property int margin: 24 * pt
+ property int halfMargin: margin * 0.5
+
anchors.top: parent.top
anchors.left: parent.left
anchors.right: rightPanel.left
@@ -58,6 +92,7 @@ Item {
id: createYourFirstVPNOrderPanel
anchors.fill: parent
+ anchors.margins: mainPanel.margin
visible: false
onNewVPNOrder: tab.newVPNOrder()
@@ -73,6 +108,30 @@ Item {
text: qsTr("Creating VPN order in process…")
visible: false
}
+
+ Item {
+ id: vpnOrders
+
+ anchors.fill: parent
+ anchors.margins: mainPanel.halfMargin
+ visible: false
+
+ Text {
+ id: textMyVPNOrders
+ x: mainPanel.halfMargin
+ y: mainPanel.halfMargin
+ font: quicksandFonts.bold14
+ color: "#3E3853"
+ text: qsTr("My VPN orders")
+ }
+
+ DapVPNOrdersGridView {
+ id: vpnOrdersView
+
+ anchors { left: parent.left; top: textMyVPNOrders.bottom; right: parent.right; bottom: parent.bottom }
+ delegateMargin: mainPanel.halfMargin
+ }
+ }
}
DapRightPanel_New {
@@ -86,7 +145,10 @@ Item {
id: createVPNOrderPanel
DapCreateVPNOrderPanel {
-
+ onOrderCreated: {
+ rightPanel.stackView.clear();
+ rightPanel.visible = false;
+ }
}
}
@@ -111,6 +173,10 @@ Item {
},
State {
name: "showOrders"
+ PropertyChanges {
+ target: vpnOrders
+ visible: true
+ }
}
]
}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
index 11c3631..13953cf 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
@@ -8,6 +8,14 @@ DapTopPanel {
signal newVPNOrder
+ // TODO только Ð´Ð»Ñ Ñ‚ÐµÑта
+ DapTextButton {
+ anchors.verticalCenter: parent.verticalCenter
+ visible: vpnTest.ordersModel.count > 0
+ text: "delete first order"
+ onClicked: vpnTest.ordersModel.remove(0, 1)
+ }
+
DapTextButton {
visible: control.btnNewVPNOrderVisible
--
GitLab