LoggerUI/UI/main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Dialogs 1.3

import "./UserList"

Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: "Logger"

    Material.theme: Material.Light
    Material.primary: Material.Red
    Material.accent: Material.Cyan
    Rectangle {
        anchors.fill: parent
        color: "#E4E4E4"
        Item {
            id: idMenu
            anchors.left: parent.left
            height: parent.height
            width: 300

            CSection {
                id: idOpenFile
                width: parent.width
                height: 70

                Item {
                    width: parent.width - 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.topMargin: 10

                    Button {
                        text: "Open Log File"
                        anchors.horizontalCenter: parent.horizontalCenter
                        Material.accent: Material.Orange
                        highlighted: true
                        Material.background: Material.Teal
                        width: parent.width
                        onClicked: fileDialog.open()
                        FileDialog {
                            id: fileDialog
                            title: "Please choose a Log"
                            folder: shortcuts.home
                            onAccepted: {
                                root.title = fileDialog.fileUrls[0]
                                cpp.fileLogChanged(fileDialog.fileUrls[0])
                            }
                            Component.onCompleted: visible = false
                        }
                    }
                }
            }
            CSection {

                width: parent.width
                anchors.top: idOpenFile.bottom
                anchors.topMargin: 5
                anchors.bottom: parent.bottom

                Label {
                    id: idLabel
                    text: "Filters"
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.topMargin: 4
                    anchors.leftMargin: 4
                    font.pointSize: 12
                    Material.foreground: "#a5a5a5"
                }
                Item {
                    id: idFilters
                    property bool isSignalDisable: false
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    anchors.top: idLabel.bottom
                    anchors.margins: 16
                    anchors.topMargin: 15

                    CFilters {
                        id: idSource
                        name: "Source"
                        onInputChanged: idFilters.setFilters()
                    }
                    CFilters {
                        id: idDistination
                        name: "Destination"
                        anchors.top: idSource.bottom
                        onInputChanged: idFilters.setFilters()
                    }
                    CFilters {
                        id: idMessage
                        name: "Message"
                        anchors.top: idDistination.bottom
                        onInputChanged: idFilters.setFilters()
                    }

                    CFilters {
                        id: idMinMessageLength
                        name: "Min Message Length"
                        anchors.top: idMessage.bottom
                        anchors.topMargin: 32
                        onInputChanged: idFilters.setFilters()
                    }
                    CFilters {
                        id: idMaxMessageLength
                        name: "Max Message Length"
                        anchors.top: idMinMessageLength.bottom
                        onInputChanged: idFilters.setFilters()
                    }

                    CFilters {
                        id: idMinMessageDuration
                        name: "Min Message Time"
                        anchors.top: idMaxMessageLength.bottom
                        anchors.topMargin: 32
                        onInputChanged: idFilters.setFilters()
                    }
                    CFilters {
                        id: idMaxMessageDuration
                        name: "Max Message Time"
                        anchors.top: idMinMessageDuration.bottom
                        onInputChanged: idFilters.setFilters()
                    }

                    function setFilters() {
                        if (!idFilters.isSignalDisable) {
                            cpp.filtersChanged(idSource.input,
                                               idDistination.input,
                                               idMessage.input,
                                               idMinMessageLength.input,
                                               idMaxMessageLength.input,
                                               idMinMessageDuration.input,
                                               idMaxMessageDuration.input)
                        }
                    }

                    Button {
                        text: "Clear All Filters"
                        anchors.horizontalCenter: parent.horizontalCenter
                        Material.accent: Material.Orange
                        highlighted: true
                        Material.background: Material.Orange
                        width: parent.width
                        anchors.top: idMaxMessageDuration.bottom
                        anchors.topMargin: 0
                        onClicked: {
                            idFilters.isSignalDisable = true
                            idMaxMessageDuration.clear()
                            idMinMessageDuration.clear()
                            idMaxMessageLength.clear()
                            idMinMessageLength.clear()
                            idMessage.clear()
                            idDistination.clear()
                            idSource.clear()
                            idFilters.isSignalDisable = false
                            idFilters.setFilters()
                        }
                    }
                }
            }
        }

        CSection {
            id: idMain
            anchors.right: parent.right
            height: parent.height
            anchors.left: idMenu.right
            anchors.leftMargin: 5

            C_Titles {
                id: id_titels
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.rightMargin: 10
                anchors.leftMargin: 10
                height: 25
            }
            C_TableUsers {
                id: tableUsers
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.top: id_titels.bottom
                anchors.topMargin: 10
                anchors.rightMargin: 10
                anchors.leftMargin: 10

                //                Component.onCompleted: {
                //                    let messeges = []
                //                    let messege1 = {
                //                        "source": "source1",
                //                        "destination": "dest1",
                //                        "message": "message1",
                //                        "duration": "120ms",
                //                        "child": [{
                //                                "source": "child source1",
                //                                "destination": "child dest1",
                //                                "message": "chld message1",
                //                                "duration": "120ms"
                //                            }, {
                //                                "source": "child source2",
                //                                "destination": "child dest2",
                //                                "message": "chld message3",
                //                                "duration": "220ms"
                //                            }]
                //                    }
                //                    messeges.push(messege1)
                //                    messeges.push(messege1)
                //                    messeges.push(messege1)
                //                    messeges.push(messege1)
                //                    updateListOfMessages(messeges)
                //                }
                Connections {
                    target: cpp
                    function onSetJsonData(jsonData) {
                        //                        console.log(jsonData)
                        let jsonObj = JSON.parse(jsonData)
                        tableUsers.updateListOfMessages(jsonObj)
                    }
                }
            }
        }
    }
}