[wifi kcm]: add connection info page

This changeset adds a page with information about the currently active
wifi connection when clicking on the active connection item.

A traffic graph (much like in the desktop applet) shows current data
transfer rates.
An overview of connection information such as IP addresses, gateway,
access points, signal strength, security type, etc. complements this
information.

Signed-off-by: Sebastian Kügler <sebas@kde.org>

kcms/wifi/ui/ConnectionInfo.qml

@@ -0,0 +1,63 @@
+// SPDX-FileCopyrightText: 2024 Sebastian Kügler <sebas@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls as Controls
+import org.kde.coreaddons as KCoreAddons
+import org.kde.kirigami as Kirigami
+import org.kde.kirigamiaddons.formcard as FormCard
+
+
+FormCard.FormCardPage {
+    id: connectionInfo
+    title: i18nc("kcm page title", "Connection Info for \"%1\"", connectionName)
+
+    property string connectionName: ""
+    property var details: []
+    property QtObject delegate: null // for reaching rx/txSpeed
+
+    FormCard.FormHeader {
+        title: i18nc("@title:group", "Transfer Rates")
+    }
+
+    FormCard.FormCard {
+        padding: Math.round(Kirigami.Units.gridUnit / 2)
+
+        TrafficMonitor {
+            id: trafficMonitorGraph
+            width: parent.width
+            downloadSpeed: delegate.rxSpeed
+            uploadSpeed: delegate.txSpeed
+        }
+        Controls.Label {
+            font: Kirigami.Theme.smallFont
+            horizontalAlignment: Text.AlignRight
+            Layout.fillWidth: true
+            text: i18n("Connected, ↓ %1/s, ↑ %2/s",
+                KCoreAddons.Format.formatByteSize(delegate.rxSpeed),
+                KCoreAddons.Format.formatByteSize(delegate.txSpeed))
+        }
+    }
+
+    FormCard.FormHeader {
+        title: i18nc("@title:group", "Connection Details")
+    }
+
+    FormCard.FormCard {
+        Repeater {
+            /* details is the ConnectionDetails property of the
+            * connection model item, a flat stringlist with
+            * title / value pairs.
+            */
+            model: details.length / 2
+
+            FormCard.FormTextDelegate {
+                text: details[index * 2]
+                description: details[(index * 2) + 1]
+                enabled: true
+            }
+        }
+    }
+}
+

kcms/wifi/ui/ConnectionItemDelegate.qml

@@ -22,9 +22,28 @@ FormCard.AbstractFormDelegate {
                                                      SecurityType == PlasmaNM.Enums.WpaPsk ||
                                                      SecurityType == PlasmaNM.Enums.Wpa2Psk ||
                                                      SecurityType == PlasmaNM.Enums.SAE)
+    property real rxSpeed: 0
+    property real txSpeed: 0
 
     verticalPadding: Kirigami.Units.largeSpacing
 
+    Timer {
+        id: timer
+        repeat: true
+        interval: 2000
+        running: ConnectionState === PlasmaNM.Enums.Activated
+        triggeredOnStart: true
+        // property int can overflow with the amount of bytes.
+        property double prevRxBytes: 0
+        property double prevTxBytes: 0
+        onTriggered: {
+            rxSpeed = prevRxBytes === 0 ? 0 : (RxBytes - prevRxBytes) * 1000 / interval
+            txSpeed = prevTxBytes === 0 ? 0 : (TxBytes - prevTxBytes) * 1000 / interval
+            prevRxBytes = RxBytes
+            prevTxBytes = TxBytes
+        }
+    }
+
     contentItem: RowLayout {
         spacing: 0
 
@@ -118,8 +137,11 @@ FormCard.AbstractFormDelegate {
                 } else {
                     handler.activateConnection(ConnectionPath, DevicePath, SpecificPath);
                 }
-            } else{
-                //show popup
+            } else {
+                kcm.push("ConnectionInfo.qml", {details: ConnectionDetails,
+                                                connectionName: ItemUniqueName,
+                                                delegate: root})
+
             }
         } else if (predictableWirelessPassword) {
             connectionDialog.headingText = i18n("Connect to") + " " + ItemUniqueName;