//-----------------------------------------------------------------------------------------------------
// Fichier définissant un bouton de type Capteur sur la page d'accueil
// A priori, appelé depuis "home.qml"
//-----------------------------------------------------------------------------------------------------
import QtQuick 2.12


//=======================================================
// Ensemble du bouton
//=======================================================
Rectangle {
    id: bouton_capteur

    readonly property int largeur_bouton: capteurs_grid.cellWidth - espace_colonnes_secondaires;
    readonly property int hauteur_bouton: capteurs_grid.cellHeight - espace_lignes_secondaires;
    readonly property int rayon_bouton: 5

    width: largeur_bouton
    height: hauteur_bouton
    radius: rayon_bouton
    color: "transparent"                    // On ne peut pas mettre l'opacité sur celui-ci, sinon tous ses enfants sont aussi semi-transparents...


    //-------------------------------------------------------
    // Fond de bouton :
    Rectangle {
        anchors.fill: parent
        color: shipheart_couleur_fond_bouton
        radius: rayon_bouton
        border.color: couleur_rouge
        border.width: (model.Etat_systeme === 0) ? 0 : 3

        //-------------------------
        // Triangle orange d'alerte :
        Image {
            source: "/images/coin_bas_droite_orange.png"
            sourceSize.height: 20
            anchors {
                bottom: parent.bottom
                right: parent.right
            }
            visible: (model.Etat_systeme === 0) &&                                  // SDIR #285
                     ((model.Etat_capteur === shipheart_capteur_etat_alerte) ||
                      (model.Etat > 0) ||                                           // Nb alertes d'Events > 0
                      (model.Obsolete) )
        }

        //-------------------------
        // Triangle rouge d'alarme :
        Image {
            source: "/images/coin_bas_droite_rouge.png"
            sourceSize.height: 20
            anchors {
                bottom: parent.bottom
                right: parent.right
            }
            visible: (model.Etat_systeme === 0) &&                                  // SDIR #285
                     (model.Etat_capteur === shipheart_capteur_etat_alarme)
        }
    }

    //-------------------------------------------------------
    // Nom du capteur :
    Rectangle {
        id: nom_capteur
        width: parent.width
        height: parent.height * 0.25;
        color: "transparent"

        Text {

            text: model.Nom
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
            leftPadding: 10
            font.pixelSize: 15
            font.weight: Font.Bold
            color: couleur_blanc_casse
            elide: Text.ElideRight          // Pas de wrap car on ne peut afficher qu'une seule ligne quoi qu'il arrive...
        }
    }

    //-------------------------------------------------------
    // Valeur si aucune unité :
    Rectangle {
        id: valeur_capteur_sans_unite
        anchors.top: nom_capteur.bottom
        width: parent.width
        height: parent.height - nom_capteur.height
        color: "transparent"
        visible: (model.Etat_systeme === 0) && (model.Unite === "")

        Text {
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            padding: 10
            text: model.Valeur
            font.family: "Montserrat"
            fontSizeMode: Text.HorizontalFit;
            minimumPixelSize: 20;
            font.pixelSize: 50
            elide: Text.ElideRight
            wrapMode: Text.Wrap
            font.weight: Font.Bold
//            color: (model.Etat === 0) ? couleur_blanc_casse : couleur_rouge
            color: couleur_blanc_casse
        }
    }

    //-------------------------------------------------------
    // Valeur si unité :
    Rectangle {
        id: valeur_capteur_avec_unite
        anchors.top: nom_capteur.bottom
        width: parent.width
        height: parent.height - nom_capteur.height
        color: "transparent"
        visible: (model.Etat_systeme === 0) && (model.Unite !== "")

        Text {
            id: valeur_actuelle
            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
                horizontalCenterOffset: -20
            }
            text: model.Valeur
            font.family: "Montserrat"
            font.pixelSize: 50
            font.weight: Font.Bold
//            color: (model.Etat === 0) ? couleur_blanc_casse : couleur_rouge
            color: couleur_blanc_casse
        }

        //-------------------------------------------------------
        // Unite :
        Text {
            anchors {
                baseline: valeur_actuelle.baseline
                left: valeur_actuelle.right
                leftMargin: 10
            }
            text: model.Unite
            font.pixelSize: 15
            color: couleur_gris_pale
        }
    }


    //-------------------------------------------------------
    // Zone de clic :
    MouseArea {                            // Zone d'interaction Paramètres du reservoir
        id: mouse_area_zone_parametres
        anchors.fill: parent
        onClicked: {
            shipheart_clic();
            stackView.push("capteur.qml", {"id_capteur": model.Cle_primaire})
        }
    }
}