GfA-Browser/HMI_DateTimeSettings.qml

import QtQuick 2.5
import ApplicationLauncher 1.0
import "qrc:/Globals"

Item {
    id: dateTimeSETTINGS
    property int dateListTextFontSize: mHighlightBarHeight - 3 * mHighlightBarThickness
    property int mHighlightBarThickness: 3
    property int mHighlightBarHeight: (setMonthRect.height / 3) * 0.8
    property color cGreenLetterColor: "gray" //Globals.customer_color_base
    property color bgColor: "lightgray"
    property color selCol: Globals.customer_color_base //"black"//"white"
    property int numITEMS: 3
    property double pathScale: 0.5
    property int defaultMONTHIDX: 0
    property int defaultDAYIDX: 0
    property int defaultYEARIDX: 0
    property int defaultHOURIDX: 0
    property int defaultMINIDX: 0
    property int defaultSECIDX: 0
    property int defaultTZIDX: 0
    //------------------
    property int dtDay: -1
    property int dtMonth: -1
    property int dtYear: -1
    property int dtHour: -1
    property int dtMin: -1
    property int dtSec: -1
    property string dtTZ: ""

    function datetimeSet() {
        dayNumSet();
        monthNamesSet();
        yearNumSet();
        hourNumSet();
        minNumSet();
        secNumSet();
        tzNamesSet();

        defaultDAYIDX = parseInt(Qt.formatDate(new Date(), "d")) - 1;
        dayView.currentIndex = defaultDAYIDX;
    }

    function monthNamesSet(){
        var monthnames = transLoad.getMonthNames();
        monthModel.clear();
        defaultMONTHIDX = 0;
        var i = 0;

        for ( i = 0; i < monthnames.length; i++){
            monthModel.append( {index: i,
                                  month: monthnames[i],
                              } );
        }
        defaultMONTHIDX = new Date().getMonth();
    }

    function dayNumSet(){

        if ( dayModel.count === 0) {
            dayModel.clear();
            defaultDAYIDX = 0;
            var i = 0;
            for ( i = 0; i < 31; i++){
                dayModel.append( {index: i,
                                    day: (i + 1).toString(),
                                } );
            }
        }
        defaultDAYIDX = parseInt(Qt.formatDate(new Date(), "d")) - 1;
    }

    function dayNumSetMonth(){
        var rows = dayModel.count;
        if ( rows === 0) {
            dayModel.clear();
            defaultDAYIDX = 0;
            var i = 0;
            for ( i = 0; i < 31; i++){
                dayModel.append( {index: i,
                                    day: (i + 1).toString(),
                                } );
            }
            defaultDAYIDX = parseInt(Qt.formatDate(new Date(), "d")) - 1;
        }

        if ((dtYear != -1) && (dtMonth != -1)) {

            var daysinmonth = new Date(dtYear, dtMonth, 0).getDate();

            if (daysinmonth > dayModel.count) {
                for (i = dayModel.count; i < daysinmonth; i++ ) {
                    dayModel.append( {index: i,
                                        day: (i + 1).toString(),
                                    } );
                }
            }

            if (daysinmonth < dayModel.count) {
                var rmcnt = dayModel.count;
                for (i = daysinmonth; i < rmcnt; i++ ) {
                    var idx = dayModel.count - 1;
                    dayModel.remove(idx);
                }
            }
        }
    }

    function yearNumSet(){
        yearModel.clear();
        defaultYEARIDX = 0;
        var i = 0;
        for ( i = 2010; i < 2035; i++){

            yearModel.append( {index: i - 2010,
                                 year: i.toString(),
                             } );
        }
        var year = new Date().getFullYear();
        year -= 2010;
        defaultYEARIDX = year;
    }

    function hourNumSet() {
        hourModel.clear();
        defaultHOURIDX = 0;
        var i = 0;
        for ( i = 0; i < 24; i++){
            hourModel.append( {index: i,
                                 hour: i.toString(),
                             } );
        }
        defaultHOURIDX = new Date().getHours();
    }

    function minNumSet() {
        minModel.clear();
        defaultMINIDX = 0;
        var i = 0;
        for ( i = 0; i < 60; i++){
            minModel.append( {index: i,
                                min: i.toString(),
                            } );
        }
        defaultMINIDX = new Date().getMinutes();
    }

    function secNumSet() {
        secModel.clear();
        defaultSECIDX = 0;
        var i = 0;
        for ( i = 0; i < 60; i++){
            secModel.append( {index: i,
                                sec: i.toString(),
                            } );
        }
        defaultSECIDX = new Date().getSeconds();
    }

    function tzNamesSet(){
        var tznames = transLoad.getTimeZoneIds();
        var idxtxt = transLoad.getSystemTimeZoneId();
        var idx = 0;

        tzModel.clear();
        defaultTZIDX = 0;

        var i = 0;
        for ( i = 0; i < tznames.length; i++){
            tzModel.append( {index: i,
                               tz: tznames[i],
                           } );
            if (tznames[i] === idxtxt) idx = i;
        }
        defaultTZIDX = idx;
    }

    Rectangle {
        id: setDayRect
        width: (parent.width / 2) / 3
        height: (parent.height / 3) - mHighlightBarThickness
        x: 0
        y: 0
        color: bgColor

        Component.onCompleted: {
            dayNumSet();
        }

        ListModel {
            id: dayModel
        }

        Component {
            id: dayDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: day
            }
        }

        PathView{
            id: dayView

            onCurrentIndexChanged: {
                dtDay = currentIndex + 1;
            }

            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: dayModel
            delegate: dayDelegate
            currentIndex: defaultDAYIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setMonthRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setMonthRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // END DAY

    Rectangle {
        id: setMonthRect
        width: (parent.width / 2) * 1.15
        height: (parent.height / 3) - mHighlightBarThickness
        x: (parent.width / 2) / 3
        y: 0
        color: bgColor

        Component.onCompleted: {
            monthNamesSet();
        }

        ListModel {
            id: monthModel
        }

        Component {
            id: monthDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: month
            }
        }


        PathView{
            id: monthView

            onCurrentIndexChanged: {
                dtMonth = currentIndex + 1;
                dayNumSetMonth();
            }
            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: monthModel
            delegate: monthDelegate
            currentIndex: defaultMONTHIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setMonthRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setMonthRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // Month END

    Rectangle {
        id: setYearRect
        width: parent.width - (setMonthRect.x + setMonthRect.width)
        height: (parent.height / 3) - mHighlightBarThickness
        x: setMonthRect.x + setMonthRect.width
        y: 0
        color: bgColor

        Component.onCompleted: {
            yearNumSet();
        }

        ListModel {
            id: yearModel
        }

        Component {
            id: yearDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: year
            }
        }


        PathView{
            id: yearView

            onCurrentIndexChanged: {
                dtYear = currentIndex + 2010;
                dayNumSetMonth();
            }

            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: yearModel
            delegate: yearDelegate
            currentIndex: defaultYEARIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setYearRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setYearRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // YEAR END

    Rectangle {
        id: setHourRect
        width: (parent.width / 2) / 3
        height: (parent.height / 3) - mHighlightBarThickness
        x: 0
        y: (parent.height / 3)
        color: bgColor

        Component.onCompleted: {
            hourNumSet();
        }

        ListModel {
            id: hourModel
        }

        Component {
            id: hourDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: hour
            }
        }

        PathView{
            id: hourView

            onCurrentIndexChanged: {
                dtHour = currentIndex;
            }

            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: hourModel
            delegate: hourDelegate
            currentIndex: defaultHOURIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setHourRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setHourRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // HOUR END

    Rectangle {
        id: setMinRect
        width: (parent.width / 2) / 3
        height: (parent.height / 3) - mHighlightBarThickness
        x: (parent.width / 2) / 3
        y: parent.height / 3
        color: bgColor

        Component.onCompleted: {
            minNumSet();
        }

        ListModel {
            id: minModel
        }

        Component {
            id: minDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: min
            }
        }


        PathView{
            id: minView

            onCurrentIndexChanged: {
                dtMin = currentIndex;
            }

            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: minModel
            delegate: minDelegate
            currentIndex: defaultMINIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setMinRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setMinRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // MIN END

    Rectangle {
        id: setSecRect
        width: (parent.width / 2) / 3
        height: (parent.height / 3) - mHighlightBarThickness
        x: 2 * ((parent.width / 2) / 3)
        y: parent.height / 3
        color: bgColor

        Component.onCompleted: {
            secNumSet();
        }

        ListModel {
            id: secModel
        }

        Component {
            id: secDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: sec
            }
        }

        PathView{
            id: secView

            onCurrentIndexChanged: {
                dtSec = currentIndex;
            }

            anchors.fill: parent
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: secModel
            delegate: secDelegate
            currentIndex: defaultSECIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: setSecRect.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: setSecRect.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // END SEC

    Rectangle {
        id: setTzRect
        width: parent.width
        height: (parent.height / 3) - mHighlightBarThickness
        x: 0
        y: 2 * (parent.height / 3)
        color: bgColor

        Component.onCompleted: {
            tzNamesSet();
        }

        ListModel {
            id: tzModel
        }

        Component {
            id: tzDelegate

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                scale: PathView.pathScale
                opacity: scale
                font.pixelSize: dateListTextFontSize

                onScaleChanged: {
                    color = scale === 1.0 ? selCol:cGreenLetterColor;
                }
                text: tz
            }
        }

        PathView{
            id: tzView
            anchors.fill: parent
            onCurrentIndexChanged: {
                dtTZ = tzModel.get(currentIndex).tz;
            }

            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            highlightRangeMode: PathView.StrictlyEnforceRange
            highlight: Component {
                Rectangle{
                    visible: PathView.onPath
                    anchors.centerIn: parent
                    height: mHighlightBarHeight
                    width: parent.width
                    color: "transparent"
                    border.color: "transparent"
                    Rectangle{
                        anchors.top: parent.top
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                    Rectangle{
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: mHighlightBarThickness
                        color: cGreenLetterColor
                    }
                }
            }

            model: tzModel
            delegate: tzDelegate
            currentIndex: defaultTZIDX
            pathItemCount: numITEMS
            path:Path{
                startX: 0
                startY: 0
                PathAttribute { name: "pathScale"; value: pathScale }
                PathLine { x:0; y: tzView.height/2}
                PathAttribute { name: "pathScale"; value: 1.0 }
                PathLine { x: 0; y: tzView.height }
                PathAttribute { name: "pathScale"; value: pathScale }
            }
        }
    } // END TZ

    //==================================

    ApplicationLaunch {
        id: setTimeZone
        appName: "sudo " + Globals.baseDir +  "/Scripts/SetTimeDateZone.sh " + dtTZ + " " + dtYear + " " + dtMonth + " " + dtDay + " " + dtHour + " " + dtMin + " " + dtSec + " " + sysinfo.currentCpuArchitecture;
        onAppFinished: {
            transLoad.reloadTimeZone();
        }
    }

    Rectangle {
        id: setDateTimeButtArea
        width: parent.width / 2
        height: (parent.height / 3) - mHighlightBarThickness
        x: 3 * ((parent.width / 2) / 3)
        y: parent.height / 3
        color: bgColor

        //border.color: "blue"
        //border.width: 3

        ButtHMI {
            id: datetimeOK
            buttY: (parent.height / 2) - (buttHeight / 2)
            buttX: (parent.width / 2) * 0.1 // (parent.width / 2) - (buttWidth / 2)
            buttWidth: parent.width / 2 * 0.75
            buttHeight: buttWidth
            color: Globals.customer_color_base
            text: "\uf046" //check-sqare
            onButtPressed: {
                // Take selected settings and save to SystemPalette
                console.log(dtYear+"."+dtMonth+"."+dtDay+" "+dtHour+":"+dtMin+":"+dtSec);
                console.log(dtTZ);
                setTimeZone.launchScript();
            }
        }

        ButtHMI {
            id: datetimeREDO
            buttY: (parent.height / 2) - (buttHeight / 2)
            buttX: parent.width / 2 + (parent.width / 2) * 0.1 // (parent.width / 2) - (buttWidth / 2)
            buttWidth: parent.width / 2 * 0.75
            buttHeight: buttWidth
            color: Globals.customer_color_base
            text: "\uf01e" // redo
            onButtPressed: {
                datetimeSet();
            }
        }
    }

}