harbour-labyrinth/qml/pages/CastPage.qml

import QtQuick 2.0
import Sailfish.Silica 1.0
import "../JSONListModel"

Page {
    id: page
    property string showname: ""
    property string showimage: ""
    property string summary: ""
    property string showid: ""
    property string jsonSource: "http://api.tvmaze.com/schedule"+_country //"date="+Qt.formatDateTime(new Date(), "yyyy-MM-dd")

    //property string filter: ""
    property string country: ""
    //property string date: ""
    property string _country: country ? "?country="+country : ""
    //property string _date: date ? ""

    SilicaListView {
        id: listView
        anchors.fill: parent
        clip: true

        JSONListModel {
            id: jsonModel1
            source: "http://api.tvmaze.com/shows/"+showid+"/cast" //"http://api.tvmaze.com/schedule?country=US&date="+Qt.formatDateTime(new Date(), "yyyy-MM-dd") //2016-07-16" //+filter
            query: "$[*]"
        }

        model: jsonModel1.model

        BusyIndicator {
            id: busyIndicator
            running: !jsonModel1.jsonready
            size: BusyIndicatorSize.Large
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
       }

        header: PageHeader {
            id: pHeader
            title: showname
            description: "Main cast"
        }

        delegate: BackgroundItem {
            id: myListItem
            width: ListView.view.width
            height: (showImg.height + showRect.height ) * showImg.scale

            OpacityRampEffect {
                sourceItem: showRect
                direction: OpacityRamp.TopToBottom
                offset: 0.0
                slope: 1.0
            }

            Rectangle {
                 id: showRect
                 anchors.left: parent.left
                 anchors.right: parent.right
                 width: parent.width
                 height: firstName.height + Theme.paddingLarge
                 color: Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
            }

            Image {
               id: nextIcon
               anchors.verticalCenter: showRect.verticalCenter
               anchors.right: showRect.right
               anchors.rightMargin: Theme.paddingMedium
               source: "image://theme/icon-m-right"
            }

            Image {
               id: seenIcon
               visible: false
               anchors.right: parent.right
               anchors.bottom: showImg.bottom
               anchors.rightMargin: Theme.paddingMedium
               source: "image://theme/icon-m-acknowledge"
            }

            Image {
                id: showImg
                property int errorCount: 0
                anchors.top: showRect.bottom
                anchors.margins: Theme.paddingLarge
              //  anchors.topMargin: Theme.paddingLarge
              //  anchors.leftMargin: Theme.paddingLarge
                anchors.left: parent.left
               // width: parent.width * 0.4
               // height: parent.height
                scale: 1.2
                fillMode: Image.PreserveAspectFit
                source: model.person.image ? model.person.image.medium ? model.person.image.medium : "../No-Image-.png" : "../No-Image-.png"
            }

            Text {
                 id: firstName
                 text: model.person.name !== null ? model.person.name : ""
                 color: highlighted ? Theme.highlightColor : Theme.primaryColor
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: showRect.verticalCenter
                 wrapMode: Text.ElideRight
                 anchors.leftMargin: Theme.paddingMedium
                 font.pixelSize: Theme.fontSizeLarge
             }

            Text {
                 id: showType
                 text: model.character.name !== null ? "<u>Character</u><br><b>" + model.character.name + "</b>" : ""
                 color: highlighted ? Theme.highlightColor : Theme.primaryColor
                 wrapMode: Text.WordWrap
                 anchors.bottomMargin: Theme.paddingLarge
                 anchors.bottom: showImg.bottom
                 anchors.left: showImg.right
                 anchors.right: parent.right
                 anchors.leftMargin: Theme.paddingLarge * showImg.scale
                 anchors.rightMargin: Theme.paddingMedium
                 font.pixelSize: Theme.fontSizeSmall
             }

            onPressAndHold: {
                pageStack.push(Qt.resolvedUrl("ShowImg.qml"),{"img": model.person.image ? model.person.image.medium ? model.person.image.medium : "../No-Image-.png" : "../No-Image-.png"})

                //window.pageStack.push(Qt.resolvedUrl("SeasonsPage.qml"),{"showid": model.id,"showname": showname,"showimage": showImg.source} )
            }

            onClicked: {
              //  frompage = pageStack.currentPage
                pageStack.push(Qt.resolvedUrl("CastInfoPage.qml"),
                                            {"showid": model.person.id,"actorname": model.person.name,"showname": showname, "showimage": showImg.source, "summary": model.summary})
            }
        }

        PullDownMenu {
            MenuItem {
                text: qsTr("Show seasons")
                onClicked: pageStack.replace(Qt.resolvedUrl("SeasonsPage.qml"),{"showid": showid,"showname": showname,"showimage": showimage},PageStackAction.Immediate )
            }
        }

        ViewPlaceholder {
            enabled: listView.count == 0 && jsonModel1.jsonready
            text: "No TVmaze data"
            hintText: "no information about cast"
        }
    }
}