camper/src/ReservationsTimeline.qml

pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Fusion

Control {
    id: control

    required property real dayWidth
    property date fromDate: model.fromDate
    required property TimelineListModel model
    property real rowHeight: 32
    property date toDate: model.toDate

    Rectangle {
        id: lodgingList

        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.top: parent.top
        border.color: Fusion.outline(control.palette)
        color: control.palette.base
        width: 100

        ListView {
            ScrollBar.vertical: verticalScroll
            anchors.fill: parent
            boundsBehavior: Flickable.StopAtBounds
            clip: true
            headerPositioning: ListView.OverlayHeader
            model: control.model

            delegate: Column {
                required property string name

                width: ListView.view.width

                Label {
                    anchors.left: parent.left
                    anchors.leftMargin: 6
                    anchors.right: parent.right
                    height: control.rowHeight - 1
                    text: parent.name
                    verticalAlignment: Text.AlignVCenter
                }

                Separator {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    palette: control.palette
                }
            }
            header: Rectangle {
                border.color: Fusion.outline(control.palette)
                color: control.palette.base
                height: timelineList.headerItem.height
                width: parent.width
                z: 2

                Label {
                    anchors.centerIn: parent
                    font.bold: true
                    text: qsTr("Lodging")
                }

                Separator {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 1
                    anchors.left: parent.left
                    anchors.right: parent.right
                    palette: control.palette
                }
            }
        }
    }

    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: lodgingList.right
        anchors.right: parent.right
        anchors.top: parent.top
        border.color: Fusion.outline(control.palette)
        color: control.palette.base

        ListView {
            id: timelineList

            anchors.fill: parent
            boundsBehavior: Flickable.StopAtBounds
            clip: true
            contentWidth: headerItem.implicitWidth
            flickableDirection: Flickable.AutoFlickDirection
            headerPositioning: ListView.OverlayHeader
            model: control.model

            ScrollBar.horizontal: PermanentScrollBar {
            }
            ScrollBar.vertical: PermanentScrollBar {
                id: verticalScroll

            }
            delegate: TimelineView {
                property real contentWidth: ListView.view.contentWidth
                required property TimelineModel timeline

                dayWidth: control.dayWidth
                fromDate: control.fromDate
                height: control.rowHeight
                model: timeline
                toDate: control.toDate
                viewportWidth: ListView.view.width
                viewportX: ListView.view.contentX

                delegate: Label {
                    id: reservation

                    required property string holder
                    required property string reservationStatus

                    elide: Text.ElideRight
                    padding: 2
                    text: holder
                    verticalAlignment: Text.AlignVCenter
                    z: 1

                    background: Rectangle {
                        function backgroundColor(status) {
                            switch (status) {
                            case "created":
                                return "#cbebff";
                            case "cancelled":
                                return "#ffbaa6";
                            case "confirmed":
                                return "#ffe673";
                            case "checked-in":
                                return "#9fefb9";
                            case "invoiced":
                                return "#e1dbd6";
                            }
                        }

                        function borderColor(status) {
                            switch (status) {
                            case "created":
                                return "#6fc7fe";
                            case "cancelled":
                                return "#ff7851";
                            case "confirmed":
                                return "#ffd829";
                            case "checked-in":
                                return "#5ae387";
                            case "invoiced":
                                return "#bbaea3";
                            }
                        }

                        border.color: borderColor(reservation.reservationStatus)
                        color: backgroundColor(reservation.reservationStatus)
                        radius: 5
                    }
                }

                Separator {
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    palette: control.palette
                }
            }
            header: Rectangle {
                border.color: Fusion.outline(control.palette)
                color: control.palette.base
                implicitHeight: headerLayout.implicitHeight + 1
                implicitWidth: headerLayout.implicitWidth
                z: 2

                Column {
                    id: headerLayout

                    TimelineMonthRow {
                        dayWidth: control.dayWidth
                        fromDate: control.fromDate
                        height: 24
                        toDate: control.toDate
                    }

                    Separator {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        palette: control.palette
                    }

                    TimelineDayRow {
                        dayWidth: control.dayWidth
                        fromDate: control.fromDate
                        height: 24
                        toDate: control.toDate
                    }
                }

                Separator {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 1
                    anchors.left: parent.left
                    anchors.right: parent.right
                    palette: control.palette
                }
            }

            Row {
                height: parent.height
                parent: timelineList.contentItem

                Repeater {
                    delegate: Rectangle {
                        required property bool isWeekend

                        color: isWeekend ? palette.alternateBase : "transparent"
                        height: parent.height
                        width: control.dayWidth

                        Separator {
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            anchors.top: parent.top
                            palette: control.palette
                        }
                    }
                    model: TimelineDayModel {
                        fromDate: control.fromDate
                        toDate: control.toDate
                    }
                }
            }
        }
    }
}