QML UI: display rating and visibility stars

Display rating and visibility stars on the dive details page. See #495

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>

3 files changed, 93 insertions, 1 deletions

diff --git a/mobile-widgets/qml/DiveDetails.qml b/mobile-widgets/qml/DiveDetails.qml
index bdfda2dc7..2e771f086 100644
--- a/mobile-widgets/qml/DiveDetails.qml
+++ b/mobile-widgets/qml/DiveDetails.qml
@@ -38,6 +38,8 @@ Kirigami.Page {
 	property alias gasmix: detailsEdit.gasmixText
 	property alias gpsCheckbox: detailsEdit.gpsCheckbox
 	property int updateCurrentIdx: manager.updateSelectedDive
+	property alias rating: detailsEdit.rating
+	property alias visibility: detailsEdit.visibility
 
 	title: currentItem && currentItem.modelData ? currentItem.modelData.dive.location : qsTr("Dive details")
 	state: "view"
@@ -174,6 +176,8 @@ Kirigami.Page {
 		endpressure = currentItem.modelData.dive.endPressure
 		gasmix = currentItem.modelData.dive.firstGas
 		cylinderIndex = currentItem.modelData.dive.cylinderList.indexOf(currentItem.modelData.dive.getCylinder)
+		rating = currentItem.modelData.dive.rating
+		visibility = currentItem.modelData.dive.visibility
 
 		diveDetailsPage.state = "edit"
 	}
diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml
index e9fdeb62c..3ad2cd500 100644
--- a/mobile-widgets/qml/DiveDetailsEdit.qml
+++ b/mobile-widgets/qml/DiveDetailsEdit.qml
@@ -35,6 +35,8 @@ Item {
 	property alias divemasterModel: divemasterBox.model
 	property alias buddyModel: buddyBox.model
 	property alias cylinderModel: cylinderBox.model
+	property int rating
+	property int visibility
 
 	function saveData() {
 		// apply the changes to the dive_table
diff --git a/mobile-widgets/qml/DiveDetailsView.qml b/mobile-widgets/qml/DiveDetailsView.qml
index 59670e618..9aa7326d0 100644
--- a/mobile-widgets/qml/DiveDetailsView.qml
+++ b/mobile-widgets/qml/DiveDetailsView.qml
@@ -66,6 +66,7 @@ Item {
 			}
 		}
 		Row {
+			id: dateRow
 			anchors {
 				left: locationText.left
 				top: locationText.bottom
@@ -96,6 +97,91 @@ Item {
 				top: locationText.bottom
 			}
 		}
+		Row {
+			anchors {
+				left: dateRow.left
+				top: numberText.bottom
+			}
+			Kirigami.Label {
+				id: ratingText
+				text: qsTr("Rating:")
+				font.pointSize: subsurfaceTheme.smallPointSize
+				color: subsurfaceTheme.textColor
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: ratingText.verticalCenter 
+				source: (dive.rating >= 1) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: ratingText.verticalCenter 
+				source: (dive.rating >= 2) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: ratingText.verticalCenter 
+				source: (dive.rating >= 3) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: ratingText.verticalCenter 
+				source: (dive.rating >= 4) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: ratingText.verticalCenter 
+				source: (dive.rating === 5) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+		}
+		Row {
+			anchors {
+				right: numberText.right
+				top: numberText.bottom
+			}
+			Kirigami.Label {
+				id: visibilityText
+				text: qsTr("Visibility:")
+				font.pointSize: subsurfaceTheme.smallPointSize
+				color: subsurfaceTheme.textColor
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: visibilityText.verticalCenter 
+				source: (dive.visibility >= 1) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: visibilityText.verticalCenter 
+				source: (dive.visibility >= 2) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}	
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: visibilityText.verticalCenter 
+				source: (dive.visibility >= 3) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: visibilityText.verticalCenter 
+				source: (dive.visibility >= 4) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+			Kirigami.Icon {
+				width: height
+				height: subsurfaceTheme.regularPointSize
+				anchors.verticalCenter: visibilityText.verticalCenter 
+				source: (dive.visibility === 5) ? "icons/ic_star.svg" : "icons/ic_star_border.svg"
+			}
+		}
+
 	}
 	GridLayout {
 		id: bottomLayout
@@ -104,7 +190,7 @@ Item {
 			left: parent.left
 			right: parent.right
 			margins: Math.round(Kirigami.Units.gridUnit / 2)
-			topMargin: Kirigami.Units.gridUnit * 2
+			topMargin: Kirigami.Units.gridUnit
 		}
 		columns: 3
 		rowSpacing: Kirigami.Units.smallSpacing * 2