app/resources/qml/Components/BoulderResultRow.qml

import QtQuick 2.10
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

Row  {
    id: multiResRow

    property bool active: parseInt(widgetData[ "route_order" ]) > -1 && boulderResRep.model > 0

    height: parent.height
    width:  active ? parent.width * 0.75:0

    enabled: parseInt(widgetData[ "route_order" ]) > -1 && boulderResRep.model > 0

    Repeater {
        id: boulderResRep
        model: parseInt(widgetData[ "route_num_problems" ])

        function getDataForIcon(index){
            // TODO: clean
            var resultString = widgetData[ "participants" ][partDel.thisIndex]["boulder"+(index+1)]
            var numTrys = widgetData[ "participants" ][partDel.thisIndex]["try"+(index+1)]

            var resultList = []

            if (resultString !== undefined) {
                resultString = resultString.replace("t", "")
                resultString = resultString.replace("z", "")
                resultString = resultString.replace("b", "")
                resultList = resultString.split(" ")

                while (resultList.length < 2){
                    resultList.unshift(0)
                }
            }
            else {
                resultList = [-1,-1]
            }

            if (numTrys !== undefined) {
                resultList.push(numTrys)
            }
            else {
                resultList.push(-1)
            }

            return resultList
        }

        delegate: Item {
            id: boulderResItm

            anchors.verticalCenter: parent.verticalCenter

            width: parent.width / ( boulderResRep.model )
            height: parent.height

            Canvas {
                id: boulderResCv

                property var resultData: boulderResRep.getDataForIcon(index)

                onResultDataChanged: {
                    boulderResCv.requestPaint()
                }

                anchors.centerIn: parent

                height: parent.height > parent.width ? parent.width * 0.9:parent.height * 0.9
                width: height

                onPaint: {
                    var width = 24//boulderResCv.width * 0.9
                    var height = width

                    var radius = width * 0.3

                    var offsetX = width * 0.05
                    var offsetY = height * 0.05

                    //console.log("drawing result rect with width: " + width + " and height: " + height)

                    var context = getContext("2d");

                    // clear all remainings from other routes
                    context.clearRect(0, 0, width, height);

                    context.beginPath();

                    context.moveTo(0 + offsetX + radius, 0 + offsetY);

                    // top line
                    context.lineTo(width - radius + offsetX, 0 + offsetY);
                    // top right corner
                    context.arc(width-radius + offsetX, radius + offsetY, radius, 1.5 * Math.PI, 0);
                    // right line
                    context.lineTo(width + offsetX, height - radius + offsetY);
                    // bottom right corner
                    context.arc(width-radius + offsetX, height - radius + offsetY, radius, 0, 0.5 * Math.PI);
                    // bottom line
                    context.lineTo(0 + radius + offsetX, height + offsetY);
                    // bottom left corner
                    context.arc(radius + offsetY, height - radius + offsetY, radius, 0.5 * Math.PI, Math.PI);
                    // left line
                    context.lineTo(0 + offsetX, radius + offsetY);
                    // top left corner
                    context.arc(radius + offsetX, radius + offsetY, radius, Math.PI, 1.5 * Math.PI);

                    // fill
                    if(resultData[0] !== -1 || resultData[2] !== -1) {
                        // if there is a result available -> draw background
                        context.fillStyle = "#b7b7b7";
                    }
                    else {
                        context.fillStyle = "transparent";
                    }

                    context.fill();

                    // outline
                    context.lineWidth = 1;
                    context.strokeStyle = Material.primaryTextColor;
                    context.stroke();

                    if(resultData[1] > 0){

                        // the first triangle
                        context.beginPath();

                        // top right corner
                        context.arc(width-radius + offsetX, radius + offsetY, radius, 1.75 * Math.PI, 0);

                        // right line
                        context.lineTo(width + offsetX, height - radius + offsetY);

                        // bottom right corner
                        context.arc(width-radius + offsetX, height - radius + offsetY, radius, 0, 0.5 * Math.PI);

                        // bottom line
                        context.lineTo(0 + radius + offsetX, height + offsetY);
                        // bottom left corner
                        context.arc(radius + offsetX, height - radius + offsetY, radius, 0.5 * Math.PI, 0.75 * Math.PI);
                        context.closePath();

                        context.fillStyle = "#44ed38";
                        context.fill();

                        // outline
                        context.lineWidth = 1;
                        context.strokeStyle = Material.primaryTextColor;
                        context.stroke();


                        if(resultData[0] > 0){
                            // the second triangle
                            context.beginPath();
                            // bottom left corner
                            context.arc(radius + offsetX, height - radius + offsetY, radius, 0.75 * Math.PI, 1 * Math.PI);
                            // left line
                            context.lineTo(0 + offsetX, radius + offsetY);
                            // top left corner
                            context.arc(radius + offsetX, radius + offsetY, radius, Math.PI, 1.5 * Math.PI);
                            // top line
                            context.lineTo(width - radius + offsetX, 0 + offsetY);
                            // top right corner
                            context.arc(width-radius + offsetX, radius + offsetY, radius, 1.5 * Math.PI, 1.75 * Math.PI);

                            context.closePath();

                            context.fillStyle = "#44ed38";
                            context.fill();

                            // outline
                            context.lineWidth = 1;
                            context.strokeStyle = Material.primaryTextColor;
                            context.stroke();
                        }
                    }

                }

                Label {
                    id: boulderResTrysLa

                    anchors.centerIn: parent

                    height: parent.height / 2
                    width: parent.width / 2

                    visible: !boulderResZoneLa.visible && boulderResCv.resultData[2] > 0

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

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    color: "#dd000000"

                    text: boulderResCv.resultData[2]

                }

                Label {
                    id: boulderResZoneLa

                    anchors {
                        right: parent.right
                        bottom: parent.bottom
                        margins: boulderResCv.height * 0.05
                    }

                    height: parent.height / 2
                    width: parent.width / 2

                    visible: parseInt(text) > 0

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

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    color: "#dd000000"

                    text: boulderResCv.resultData[1]
                }

                Label {
                    id: boulderResTopLa

                    anchors {
                        left: parent.left
                        top: parent.top
                        margins: boulderResCv.height * 0.05
                    }

                    height: parent.height / 2
                    width: parent.width / 2

                    visible: parseInt(text) > 0

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

                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    color: "#dd000000"

                    text: boulderResCv.resultData[0]
                }
            }

        }

    }

}