baangt/baangt/templates/summary.html

{% extends "base.html" %}

{% block content %}

<main class="container">

    <div class="d-flex align-items-center p-3 my-4 rounded shadow">
        <div class="lh-100">
            <div class="display-4 text-primary lh-100">{{ data.name }}</div>
            <div class="mt-1 text-dark">Execution ID: {{ data.id }}</div>
            <div class="text-secondary">Execution time: {{ data.time }}</div>
        </div>
    </div>
    
    <!-- Summary -->
    <div class="display-4 p-2">Summary</div>
    <div class="card mb-4 shadow">
        <div class="row no-gutters">
            <div class="col-md-5">
                <canvas class="card-img my-3" id="statusChart"></canvas>
            </div>
            <div class="col-md-7">
                <div class="card-body row h-100 align-items-center">
                    <div class="d-flex flex-column col-3 border-right px-0">
                        <div class="display-3 text-center">{{ data.figures.records }}</div>
                        <h4 class="text-center">TESTS</h4>
                    </div>
                    {% if data.figures.successful > 0  %}
                    <div class="d-flex flex-column col-3 text-success px-0">
                        <div class="display-3 text-center">{{ data.figures.successful }}</div>
                        <h4 class="text-center">PASSED</h4>
                    </div>
                    {% endif %}
                    {% if data.figures.error > 0  %}
                    <div class="d-flex flex-column col-3 text-danger px-0">
                        <div class="display-3 text-center">{{ data.figures.error }}</div>
                        <h4 class="text-center">FAILED</h4>
                    </div>
                    {% endif %}
                    {% if data.figures.paused > 0  %}
                    <div class="d-flex flex-column col-3 text-secondary px-0">
                        <div class="display-3 text-center">{{ data.figures.paused }}</div>
                        <h4 class="text-center">PAUSED</h4>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- TestCases -->
    <div class="display-4 p-2">Test Cases</div>
    <canvas class="rounded border w-100 mb-4 p-2 shadow" height="250" id="testcaseChart"></canvas>

    <!-- Screenshots -->
    {% if data.screenshots %}
        <div class="display-4 p-2">Screenshots</div>
        <div class="row row-cols-1 row-cols-md-3 mb-4">
        {% for screenshot in data.screenshots %}
            <div class="col mb-4">
                <a href="file://{{ screenshot.path }}">
                    <div class="card shadow">
                        <img src="file://{{ screenshot.path }}" class="card-img" alt="Test Case {{ screenshot.index }}">
                        <div class="card-body">
                            <h5 class="card-title">Test Case {{ screenshot.index }}</h5>
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
        </div>
    {% endif %}

    <!-- Files -->
    <div class="display-4 p-2">Files</div>
    <ul class="list-group w-100 mb-5 shadow">
        {% for file in data.files %}
            <li class="list-group-item">
                <div class="row">
                    <div class="col-2 h5">
                        {{ file.name }}
                    </div>
                    <div class="col-10 h6">
                        <a href="file://{{ file.path }}">{{ file.path }}</a>
                    </div>
            </li>
        {% endfor%}
    </ul>

</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">
    var statusChart = new Chart(document.querySelector('#statusChart'), {{ data.status }});
    var testcaseChart = new Chart(document.querySelector('#testcaseChart'), {{ data.testcases }});
</script>

{% endblock %}