Refs #2. Reviewed SessionDelegate

Frontend/DashboardsViewer/content/CMakeLists.txt

@@ -11,6 +11,7 @@ qt6_add_qml_module(content
         screens/DashboardSelector.qml
         screens/Login.qml
         # Uis
+        ui/Badge.qml
         ui/BasicButton.ui.qml
         ui/BasicDialog.qml
         ui/FlickableScrollBar.qml
@@ -49,5 +50,6 @@ qt6_add_qml_module(content
         images/icons/patient_yellow.png
         images/icons/patient_red.png
         images/icons/project.png
+        images/icons/session.png
         images/icons/site.png
     )

Frontend/DashboardsViewer/content/delegates/ParticipantDelegate.qml

@@ -7,7 +7,7 @@ import DashboardsViewer
 BaseDelegate {
     id: myDelegate
     height: parent ? Math.min(100, mainLayout.implicitHeight + mainLayout.anchors.margins*2) : 0
-    width: parent ? parent.width : 0
+    width: parent ? (parent.interactive ? parent.width - 20 : parent.width) : 0
 
     property int daysWarningThreshold: 2
     property int daysErrorThreshold: 4

Frontend/DashboardsViewer/content/delegates/SessionDelegate.qml

@@ -2,64 +2,43 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 2.15
 
+import DashboardsViewer
+import "../ui"
+
 BaseDelegate {
     id: myDelegate
-    height: parent ? 80 : 0
-    width: parent ? parent.width : 0
+    height: parent ? Math.max(80, mainLayout.implicitHeight + mainLayout.anchors.margins*2) : 0
+    width: parent ? (ListView && ListView.view.interactive ? parent.width - 20 : parent.width) : 0
 
-    Rectangle {
-        id: myRectangle
-        anchors.fill: parent
-        color: "#cccccc"
-        border.color: "black"
-        border.width: 1
-        radius: 5
+    property int daysWarningThreshold: 7
+    property int daysErrorThreshold: 14
 
-        ColumnLayout {
-            id: columnLayout
-            anchors.fill: parent
+    property bool isCurrentItem: ListView ? ListView.isCurrentItem : false
 
-            Text {
-                id: text1
-                text: model.id_session + "(" + model.session_name + ")"
-                font.bold: true
-                font.pixelSize: 20
-                color: "black"
-                height: parent.height
-                Layout.fillWidth: true
-            }
+    states: [
+        /*State{
+          name: "good"
+          PropertyChanges {
+              target: recBase
+              color: "darkgreen"
+          }
+        },
 
-            Text {
-                id: text2
-                text: model.session_start_datetime + " Duration: " + model.session_duration
-                font.bold: true
-                font.pixelSize: 20
-                color: "black"
-                height: parent.height
-                Layout.fillWidth: true
+        State {
+            name: "warning"
+            PropertyChanges {
+                target: recBase
+                color: "#77fcba03"
             }
-
-        }
-
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-            onDoubleClicked: {
-                console.log("SessionDelegate clicked");
-                if (stackView) {
-                    stackView.push("../widgets/SessionViewerWidget.qml", {"session": model})
-                }
-            }
-            onPressAndHold: {
-                console.log("SessionDelegate long pressed");
-
-                if (stackView) {
-                    stackView.push("../widgets/SessionViewerWidget.qml", {"session": model})
-                }
-
+        },
+        State {
+            name: "error"
+            PropertyChanges {
+                target: recBase
+                color: "#77000000"//"#77ff0000"
             }
-        }
-    }
+        }*/
+    ]
 
     Component.onCompleted: function() {
         // Look for last_session
@@ -68,30 +47,195 @@ BaseDelegate {
             if (lastSession) {
                 var now = new Date()
                 var diff = now - lastSession
+                let warningDelta = daysWarningThreshold * 1000 * 60 * 60 * 24;
+                let errorDelta = daysErrorThreshold * 1000 * 60 * 60 * 24;
 
                 // Difference less than a day ?
-                if (diff < 1000 * 60 * 60 * 24) {
-                    //console.log("Less than a day")
-                    myRectangle.color = "green"
+                if (diff < warningDelta) {
+                    state = "good";
                 }
                 else {
-                    //console.log("More than a day")
                     // Less than a week ?
-                    if (diff < 1000 * 60 * 60 * 24 * 7) {
-                        //console.log("Less than a week")
-                        myRectangle.color = "orange"
+                    if (diff < errorDelta) {
+                        state = "warning";
                     }
                     else {
-                        //console.log("More than a week")
-                        myRectangle.color = "red"
+                        state = "error";
                     }
                 }
             }
             else {
-                //console.log("Invalid date")
-                myRectangle.color = "red"
+                console.log("Invalid date")
+
             }
         }
     }
 
+    function formatDateTime(datetime_to_format){
+        var str_date = "";
+        var day = datetime_to_format.getDate();
+        var month = datetime_to_format.getMonth() + 1;
+        var year = datetime_to_format.getFullYear();
+        var hours = datetime_to_format.getHours();
+        var minutes = datetime_to_format.getMinutes();
+
+        /*if (day < 10){
+            str_date = "0"
+        }
+        str_date += day.toString() + " " + Qt.locale().monthName(month) + " " + year.toString() + " ";*/
+        str_date = year.toString() + "-";
+        if (month < 10){
+            str_date += "0";
+        }
+        str_date += month.toString() + "-";
+        if (day < 10){
+            str_date += "0"
+        }
+        str_date += day.toString() + " ";
+
+        if (hours < 10)
+            str_date += "0";
+
+        str_date += hours.toString() + ":";
+        if (minutes < 10)
+            str_date += "0";
+
+        str_date += minutes.toString();
+
+        return str_date;
+    }
+
+    Rectangle {
+        id: recBase
+        anchors.fill: parent
+        color: Constants.highlightColor
+        opacity: 0.8
+        border.color: isCurrentItem ? "lightgrey" : "black"
+        border.width: isCurrentItem ? 5 : 1
+        radius: 5
+    }
+
+    RowLayout {
+        id: mainLayout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: 5
+
+        Rectangle{
+            id: recSession
+            height: imgSession.height + 8
+            width: imgSession.width + 8
+            radius: 4
+            //color: model.session_type_color ? "#99" + model.session_type_color.substring(1) : "transparent"
+            color: "transparent"
+            //opacity: 0.5
+            Image{
+                id: imgSession
+                anchors.centerIn: parent
+                source: "../images/icons/session.png"
+                fillMode: Image.PreserveAspectFit
+                height: 32
+                sourceSize.height: height
+                width: height
+                sourceSize.width: height
+                //opacity: model.session_status === 2 ? 1.0 : 0.3  // Session completed or not
+            }
+        }
+
+        ColumnLayout{
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            spacing: 5
+            RowLayout{
+                Layout.fillWidth: true
+                Badge{
+                    visible: model.session_status === 2
+                    text: qsTr("Completed")
+                    color: "darkgreen"
+                    padding: 0
+                }
+                Badge{
+                    visible: model.session_status === 3
+                    text: qsTr("Cancelled")
+                    color: "darkred"
+                    padding: 0
+                }
+                Badge{
+                    visible: model.session_status === 4
+                    text: qsTr("Terminated")
+                    color: "red"
+                    padding: 0
+                }
+                Badge{
+                    visible: model.session_status === 1
+                    text: qsTr("In progress")
+                    color: "darkgrey"
+                    padding: 0
+                }
+                Badge{
+                    visible: model.session_status === 0
+                    text: qsTr("Planned")
+                    color: "white"
+                    padding: 0
+                    textColor: "black"
+                }
+                Badge{
+                    visible: model.session_type_name
+                    text: model.session_type_name
+                    color: model.session_type_color ? model.session_type_color : "white"
+                    padding: 0
+                    textColor: "black"
+                }
+                Item{
+                    Layout.fillWidth: true
+                }
+
+                Text{
+                    id: txtName
+                    Layout.fillWidth: true
+                    text: model.session_name
+                    font.pixelSize: Constants.baseFontSize
+                    wrapMode: Text.WordWrap
+                    style: Text.Outline
+                    color: Constants.textColor
+                }
+
+            }
+
+            Text{
+                id: txtDate
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                property date sessionDate: new Date(model.session_start_datetime)
+                text: sessionDate.toLocaleDateString() +" - " + sessionDate.toLocaleTimeString()
+                font.pixelSize: Constants.baseFontSize
+                style: Text.Outline
+                font.bold: true
+                color: Constants.textAltColor
+                wrapMode: Text.WordWrap
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+            }
+
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onDoubleClicked: {
+            console.log("SessionDelegate clicked");
+            if (stackView) {
+                stackView.push("../widgets/SessionViewerWidget.qml", {"session": model})
+            }
+        }
+        onPressAndHold: {
+            console.log("SessionDelegate long pressed");
+
+            if (stackView) {
+                stackView.push("../widgets/SessionViewerWidget.qml", {"session": model})
+            }
+
+        }
+    }
 } // Item

Frontend/DashboardsViewer/content/screens/DashboardSelector.qml

@@ -105,7 +105,7 @@ Item {
                                             "name": name,
                                             "definition": definition,
                                             "enabled": enabled,
-                                            "color": "#7e57c2"
+                                            "color": "#cb42f5"
                                            })
             }
         }

Frontend/DashboardsViewer/content/ui/Badge.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+
+import DashboardsViewer
+
+Item {
+    id: baseItem
+    implicitWidth: recBackground.implicitWidth
+    implicitHeight: recBackground.implicitHeight
+
+    property alias color: recBackground.color
+    property alias textColor: txtBadge.color
+    property alias textAlign: txtBadge.horizontalAlignment
+    property alias font: txtBadge.font
+    property alias padding: txtBadge.padding
+    required property string text
+
+    Rectangle{
+        id: recBackground
+        radius: 5
+        color: "blue"
+        implicitHeight: txtBadge.implicitHeight + 10
+        implicitWidth: txtBadge.implicitWidth + 15
+        anchors.fill: parent
+        Text {
+            id: txtBadge
+            anchors.fill: parent
+            anchors.margins: 5
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            text: baseItem.text
+            wrapMode: Text.WordWrap
+            font.pixelSize: Constants.smallFontSize
+            font.bold: true
+            color: "white"
+        }
+    }
+    MultiEffect{
+        source: recBackground
+        anchors.fill: source
+        autoPaddingEnabled: true
+        shadowEnabled: true
+        shadowHorizontalOffset: 2
+        shadowVerticalOffset: 2
+        shadowColor: "black"
+    }
+}

Frontend/DashboardsViewer/content/widgets/ListViewWidget.qml

@@ -43,6 +43,8 @@ BaseWidget {
         model: dataSource ? dataSource.model : null
         currentIndex: -1
 
+        interactive: contentHeight > height
+
         property string fieldDisplayName: dataSource.fieldDisplayName
         property string fieldIdName: dataSource.fieldIdName
         property string iconPath: dataSource.iconPath

Frontend/DashboardsViewer/content/widgets/TimeLineWidget.qml

@@ -80,7 +80,6 @@ BaseWidget {
         ignoreUnknownSignals: true
         target: dataSource
         onModelChanged: function() {
-            console.log("*** Model changed");
             if (dataSource.model.count < 1){
                 repeaterSessions.model = [];
                 repeaterDays.model = [];