PrintABrick/app/Resources/views/set/detail.html.twig

{% extends 'base.html.twig' %}

{% block title %}{{ rbset ? rbset.number }}  {{ rbset ? rbset.name }}{% endblock %}

{% block header %}{{ rbset ? rbset.number }}  {{ rbset ? rbset.name }}{% endblock %}

{% block content %}

    <div class="ui stackable grid">
        <div class="column nine wide">
            <div class="image bordered ui big">
                {% if brset %}
                    <img class="big" src="{{ brset.imageURL }}">
                {% elseif rbset %}
                    <img class="big" src="{{ rbset.number|setImage|imagine_filter('rebrickable') }}">
                {% endif %}
            </div>
        </div>
        <div class="column seven wide">
            <div class="item-info black ui">
                <table class="ui table">
                    <tr>
                        <td>number</td><td>{{ brset ? brset.legoSetID :  rbset ? rbset.number : null}}</td>
                    </tr>
                    <tr>
                        <td>name</td><td>{{ brset ? brset.name :  rbset ? rbset.name : null}}</td>
                    </tr>
                    <tr>
                        <td>year</td><td>{{ brset ? brset.year :  rbset ? rbset.year : null}}</td>
                    </tr>
                    <tr>
                        <td>theme</td>
                        {% if rbset %}
                            <td><a href="#">{{ rbset.theme.parent ? rbset.theme.parent.name }}</a>  <a href="#">{{ rbset.theme.name }}</a> </td>
                        {% elseif brset %}
                            <td>{{ brset.theme }}</td>
                        {% endif %}
                    </tr>
                    <tr>
                        <td>parts</td><td>{{ brset ? brset.pieces : rbset ? rbset.partCount }}</td>
                    </tr>
                    {% if brset %}
                        <tr>
                            <td></td>
                            <td><a class="brickset link" href="{{ brset.bricksetURL }}">Brickset</a></td>
                        </tr>
                    {% endif %}
                    {% if rbset %}
                        <tr>
                            <td></td>
                            <td><a class="rebrickable link" href="http://rebrickable.com/sets/{{ rbset ? rbset.number }}">Rebrickable</a></td>
                        </tr>
                    {% endif %}
                </table>

                {% if brset is not null %}
                    <dl>
                        <dt>themegroup:</dt><dd>{{ brset.themeGroup }}</dd>
                        <dt>theme:</dt><dd>{{ brset.theme }}</dd>
                        <dt>subtheme:</dt><dd>{{ brset.subtheme }}</dd>
                        <dt>count of parts:</dt><dd>{{ brset.pieces }}</dd>
                        <dt>minifigs:</dt><dd>{{ brset.minifigs }}</dd>
                    </dl>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="segment vertical item-info">
        <div class="ui tabular menu">
            <a class="item active" data-tab="parts"><i class="cubes icon"></i> Parts ({{ rbset ? rbset.partCount : 0}})</a>
            {% if brset %}
                <a class="item" data-tab="description"><i class="info icon"></i> Description</a>
                <a class="item" data-tab="images"> <i class="image icon"></i> Images ({{ brset.additionalImageCount }})</a>
                <a class="item" data-tab="instructions"> <i class="file pdf outline icon"></i> Instructions ({{ brset.instructionsCount }})</a>
                <a class="item" data-tab="reviews"><i class="write icon"></i> Reviews ({{ brset.reviewCount }})</a>
            {% endif %}
        </div>
        <div class="ui tab active" data-tab="parts">
            {% if rbset %}

                <div class="ajax-load" id="parts" data-src="{{ path('rebrickable_set_parts', { 'number': rbset.number }) }}"></div>

                {#{{ render(controller('AppBundle:Rebrickable/Set:parts', { 'number': rbset.number })) }}#}

            {% endif %}
        </div>
        {% if brset %}
            <div class="ui tab" data-tab="images">
                {#<div class="ajax-load" id="images" data-src="{{ path('brickset_images', { 'id': brset.setID }) }}"></div>#}

                {{ render(controller('AppBundle:Brickset/Set:images', { 'id': brset.setID })) }}
            </div>
            <div class="ui tab" data-tab="instructions">
                {#<div class="ajax-load" id="instructions" data-src="{{ path('brickset_instructions', { 'id': brset.setID }) }}"></div>#}

                {{ render(controller('AppBundle:Brickset/Set:instructions', { 'id': brset.setID })) }}
            </div>
            <div class="ui tab" data-tab="reviews">
                {#<div class="ajax-load" id="reviews" data-src="{{ path('brickset_reviews', { 'id': brset.setID }) }}"></div>#}

                {{ render(controller('AppBundle:Brickset/Set:reviews', { 'id': brset.setID })) }}
            </div>
            <div class="ui tab" data-tab="description">
                {{ brset.description }}
            </div>
        {% endif %}
    </div>


{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $(document).ready(function () {

            $('.ajax-load').each(function () {
                $self = $(this);

                console.log($self);
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: $self.data('src'),
                    async: true, //you won't need that if nothing in your following code is dependend of the result
                    success: function(response){
                        $self.html(response); //Change the html of the div with the id = "your_div"
                    }
                })
            })

        })

    </script>
{% endblock %}