app/resources/qml/Pages/CompetitionCalendarPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.3

import "../Components"

Page {
    id: root

    title: "calendar"

    property Component headerComponent: Item {
        anchors.fill: parent

        Row {
            anchors.fill: parent

            spacing: width * 0.05

            Label {
                anchors.verticalCenter: parent.verticalCenter

                width: parent.width - toolButton.width - parent.spacing
                height: parent.height * 0.6

                fontSizeMode: Text.Fit
                font.pixelSize: height
                minimumPixelSize: 0

                text: root.year

            }

            Button {
                id:toolButton

                anchors {
                    verticalCenter: parent.verticalCenter
                }

                height: parent.height * 0.5
                width: height

                onClicked: {
                    yearSelectPu.open()
                }

                onPressed: toolButton.scale = 0.9
                onReleased: toolButton.scale = 1.0

                background: Image {
                    source: "qrc:/icons/calendar.png"

                    height: parent.height
                    width: height

                    fillMode: Image.PreserveAspectFit
                    Behavior on scale {
                        PropertyAnimation {
                            duration: 100
                        }
                    }
                }
            }

        }
    }

    property string nation: ""
    property int year: new Date().getFullYear()
    property int status: -1
    property var calendarData

    Component.onCompleted: {
        loadData(root.nation, root.year)
    }

    function loadData(nation, year) {
        root.status = 905
        loadingDl.open()

        var ret = serverConn.getCalendar(nation, year)

        if(ret["status"] === 200){
            root.status = 200
            root.calendarData = ret["data"]
            calendarList.listData = ret["data"]["competitions"]
        }
        else {
            root.status = parseInt(ret["status"])
            calendarList.listData = {}
            root.calendarData = {}
        }
        loadingDl.close()
    }

    DataListView {
        id: calendarList

        property var listData

        anchors.fill: parent

        //boundsBehavior: Flickable.StopAtBounds

        model: listData.length

        status: root.status

        onRefresh: {
            root.loadData(root.nation, root.year)
        }

        delegate: ItemDelegate {
            id: competitionDel

            property string name: calendarList.listData[index]["name"]
            property string date: calendarList.listData[index]["date_span"]
            property var cats: calendarList.listData[index]["cats"]
            property int catId: calendarList.listData[index]["cat_id"]

            width: parent.width
            height: compDelCol.height + 10

            onClicked: {
                catSelectPu.appear(index)
            }

            Rectangle {
                id: delBackroundRect

                anchors.fill: parent

                opacity: 0.5

                color: app.competitionCategoryColors[catId]

            }

            Column {
                id: compDelCol

                anchors.centerIn: parent

                width: parent.width * 0.97

                spacing: 10

                Label {
                    id: nameLa

                    width: parent.width

                    font.bold: true

                    wrapMode: Text.WordWrap

                    text: name
                }

                Label {
                    id: dateLa

                    color: "grey"

                    text: date
                }

                Label {
                    id: catIdLa

                    color: "grey"

                    text: catId
                }
            }

            Rectangle {
                id: bottomLineRa

                anchors {
                    bottom: parent.bottom
                    left: parent.left
                    right: parent.right
                }

                height: 1

                color: "lightgrey"

            }
        }
    }

    Dialog {
        id: catSelectPu

        property int index: -1
        property var catObj: calendarList.listData[catSelectPu.index] !== undefined ? calendarList.listData[catSelectPu.index]["cats"]:undefined

        x: root.width / 2 - width / 2
        y: root.height / 2 - height / 2

        width: root.width * 0.8
        height: root.height * 0.6

        modal: true
        focus: true

        title: qsTr("select category")

        function appear(index) {
            catSelectPu.open()
            catSelectPu.index = index
        }

        contentItem: ListView {
            id: catsLv

            width: parent.width
            height: root.height * 0.6

            model: catSelectPu.catObj !== undefined ? catSelectPu.catObj.length:0

            delegate: Button {
                id: catBt

                width: parent.width

                flat: true

                text: catSelectPu.catObj[index]["name"]

                onClicked: {
                    catSelectPu.close()
                    app.openResults(calendarList.listData[catSelectPu.index]["WetId"], catSelectPu.catObj[index]["GrpId"], (catSelectPu.catObj[index]["status"] === 4 || catSelectPu.catObj[index]["status"] === undefined))
                }
            }
        }

    }

    Dialog {
        id: yearSelectPu

        property var yearList: root.calendarData["years"]

        x: root.width / 2 - width / 2
        y: root.height / 2 - height / 2

        width: root.width * 0.8
        height: root.height * 0.6

        modal: true
        focus: true

        title: qsTr("select year")

        contentItem: ListView {
            id: yearsLv

            width: parent.width
            height: root.height * 0.6

            model: yearSelectPu.yearList.length

            delegate: Button {
                id: yearBt

                width: parent.width

                flat: true

                text: yearSelectPu.yearList[index]

                onClicked: {
                    yearSelectPu.close()
                    root.year = yearSelectPu.yearList[index]
                    root.loadData(root.nation, root.year)
                }
            }
        }

    }

}