harbour-aira/qml/cover/CoverPage.qml

import QtQuick 2.0
import Sailfish.Silica 1.0

// Copertina: legge api.summary (context property C++), quindi non dipende
// dallo scope delle property della pagina principale.
//
// Due righe con l'etichetta davanti — "Casa" e "Acqua calda" — ognuna con il
// valore attuale e l'obiettivo dopo la freccia ("51,5 → 55,0 °C"): l'etichetta
// dell'acqua e' lunga e la cover e' stretta, percio' il valore attuale sta piu'
// grande e l'obiettivo piu' piccolo, invece di due numeri della stessa taglia
// che costringerebbero a tagliare.
CoverBackground {
    id: cover

    function t(key) {
        var v = api.summary[key]
        return api.formatValue(v)
    }

    // "\u2192 19,0 °C": l'obiettivo dopo la freccia, attaccato al valore attuale.
    // Scelto da Carlo: "22,5/19,0 °C" era la scrittura vecchia, e la freccia si
    // legge a colpo d'occhio anche di sfuggita.
    function obiettivo(key) {
        return " \u2192 " + cover.t(key) + " °C"
    }

    // Colore del pallino: gli stessi criteri della Home (vedi MainPage.qml).
    // Un dato vecchio e' ambra come un modo attivo: un dato vecchio non e' un
    // dato buono, e la copertina e' il posto dove si guarda di sfuggita.
    // Rosso solo per un allarme che ferma la macchina (livello 3): un avviso
    // (livello 2) e' ambra.
    function statusColor() {
        if (!api.hasData || api.stale)
            return "orange"
        var livello = api.statusLevel()
        if (livello === 3)
            return Theme.errorColor
        if (livello === 2)
            return "#ffb300"
        if (livello === 1)
            return Theme.highlightColor
        return "#4caf50"
    }

    Row {
        id: intestazione
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: Theme.paddingLarge
        spacing: Theme.paddingSmall

        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            width: Theme.paddingSmall
            height: width
            radius: width / 2
            color: cover.statusColor()
        }

        Label {
            text: "Aira"
            color: Theme.primaryColor
            font.pixelSize: Theme.fontSizeLarge
        }
    }

    Column {
        anchors.centerIn: parent
        width: parent.width - 2 * Theme.paddingMedium
        spacing: Theme.paddingMedium

        // ---- casa ---------------------------------------------------------- //
        Row {
            id: rigaCasa
            width: parent.width
            spacing: Theme.paddingSmall

            Label {
                text: qsTr("House")
                color: Theme.secondaryColor
                font.pixelSize: Theme.fontSizeExtraSmall
                width: rigaCasa.width * 0.42
                anchors.verticalCenter: parent.verticalCenter
            }

            Row {
                width: rigaCasa.width * 0.58 - rigaCasa.spacing
                spacing: 0
                anchors.verticalCenter: parent.verticalCenter

                Label {
                    id: casaOra
                    // Spento quando i numeri sono vecchi: non deve sembrare fresco.
                    text: cover.t("zone1_temperature")
                    color: api.stale ? Theme.secondaryColor : Theme.primaryColor
                    font.pixelSize: Theme.fontSizeSmall
                    font.bold: true
                }

                Label {
                    text: cover.obiettivo("zone1_setpoint")
                    color: Theme.secondaryColor
                    font.pixelSize: Theme.fontSizeExtraSmall
                    width: parent.width - casaOra.width
                    elide: Text.ElideRight
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        // ---- acqua calda --------------------------------------------------- //
        Row {
            id: rigaAcqua
            width: parent.width
            spacing: Theme.paddingSmall

            Label {
                text: qsTr("Hot water")
                color: Theme.secondaryColor
                font.pixelSize: Theme.fontSizeExtraSmall
                width: rigaAcqua.width * 0.42
                anchors.verticalCenter: parent.verticalCenter
            }

            Row {
                width: rigaAcqua.width * 0.58 - rigaAcqua.spacing
                spacing: 0
                anchors.verticalCenter: parent.verticalCenter

                Label {
                    id: acquaOra
                    text: cover.t("dhw_current")
                    color: api.stale ? Theme.secondaryColor : Theme.primaryColor
                    font.pixelSize: Theme.fontSizeSmall
                    font.bold: true
                }

                Label {
                    // Col boost in corso questo posto lo prende il conto alla
                    // rovescia: piu' utile del valore obiettivo.
                    text: api.boostActive
                          ? qsTr("boost %1").arg(api.boostCountdown)
                          : cover.obiettivo("dhw_target")
                    color: api.boostActive ? Theme.highlightColor : Theme.secondaryColor
                    font.pixelSize: Theme.fontSizeExtraSmall
                    width: parent.width - acquaOra.width
                    elide: Text.ElideRight
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }
    }

    Label {
        anchors.horizontalCenter: parent.horizontalCenter
        // Sopra l'area delle azioni: quando l'azione c'e', Silica disegna li'
        // l'icona del boost, che non deve coprire questa riga. Se l'area non
        // c'e' la riga resta attaccata al fondo, come prima.
        anchors.bottom: cover.coverActionArea ? cover.coverActionArea.top : parent.bottom
        anchors.bottomMargin: Theme.paddingMedium
        // Qui c'e' posto per dire che i numeri non sono freschi.
        text: api.stale
              ? qsTr("Not updated · last %1").arg(api.lastUpdate)
              : qsTr("outside %1 °C").arg(cover.t("outdoor_temperature"))
        color: api.stale ? "orange" : Theme.secondaryColor
        font.pixelSize: Theme.fontSizeExtraSmall
        truncationMode: TruncationMode.Fade
        width: parent.width - 2 * Theme.paddingMedium
    }

    // ---- azione sulla copertina (P8) --------------------------------------- //
    // Agire senza aprire l'app: il boost dell'acqua calda. Una sola, perche' la
    // documentazione Silica dice che due azioni si possono avere ma che lo stile
    // delle app di sistema ne mostra una. CoverBackground eredita da Cover,
    // quindi l'elenco si attacca: e' il posto documentato dove dichiararlo.
    // Il componente e' in Sailfish.Silica 1.0 (verificato nella guida dell'SDK).
    CoverActionList {
        CoverAction {
            // Anche dalla copertina il tasto ferma quando il boost e' in corso:
            // altrimenti un tocco per fermarlo ne farebbe ripartire un altro.
            iconSource: api.boostActive ? "../icons/quick-boost-stop.png"
                                        : "../icons/quick-boost.png"
            onTriggered: api.sendCommand(api.boostActive ? "hot_water_boost_off"
                                                         : "hot_water_boost_on")
        }
    }
}