Improve set index and detail view

app/Resources/views/brickset/instructions.html.twig

@@ -1,5 +1,3 @@
-{% import 'macros/utils.html.twig' as utils %}
-
 {% if instructions|length != 0 %}
     <p>
         {{ 'set.instructions.text' | trans }}

app/Resources/views/brickset/reviews.html.twig

@@ -1,5 +1,5 @@
 <div class="ui comments">
-    {% for review in reviews %}
+    {% for review in reviews|slice(0, 3) %}
         <div class="comment">
             <a class="avatar">
                 {#<img src="/images/avatar/small/matt.jpg">#}
@@ -18,7 +18,8 @@
                 </div>
                 <div>
                     Overall rating <div class="ui star rating" data-rating="{{ review.overallRating }}" data-max-rating="5"></div>
-                    {#Value for money <div class="ui star rating" data-rating="{{ review.valueForMoney }}" data-max-rating="5"></div>#}
+                    Value for money <div class="ui star rating" data-rating="{{ review.valueForMoney }}" data-max-rating="5"></div>
+                    Playability <div class="ui star rating" data-rating="{{ review.playability }}" data-max-rating="5"></div>
                 </div>
             </div>
         </div>

app/Resources/views/rebrickable/set/inventory.html.twig

@@ -1,3 +1,7 @@
+{% import 'macros/elements.html.twig' as elements %}
+
+This set consists of {{ models|length }} unique part models
+
 {% if regularParts|length > 0 %}
 <h4 class="ui horizontal divider header">
     Regular parts
@@ -11,8 +15,9 @@
                     <a class="ui right {{ inventoryPart.part.model == null ? 'black' : 'red'}} circular label">{{ inventoryPart.quantity }}</a>
                     <a href="{{ path('reb_part_detail', {number: inventoryPart.part.number}) }}">
                         <div class="image load">
-                            <img src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" data-src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" class="transition visible">
+                            <img src="{{ asset('resources/images/unknown_image.png') }}" data-src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" class="transition visible">
                         </div>
+
                         <div style="border-bottom: #{{ inventoryPart.color.rgb }} 5px solid" class="ui bottom attached label">{{ inventoryPart.part.number }}</div>
                     </a>
                 </div>
@@ -34,7 +39,7 @@
                     <a class="ui right {{ inventoryPart.part.model == null ? 'black' : 'red'}} circular label">{{ inventoryPart.quantity }}</a>
                     <a href="{{ path('reb_part_detail', {number: inventoryPart.part.number}) }}">
                         <div class="image load">
-                            <img src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" data-src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" class="transition visible">
+                            <img src="{{ asset('resources/images/unknown_image.png') }}" data-src="{{ inventoryPart.part.number|partImage(inventoryPart.color.id)| imagine_filter('rebrickable_part_min') }}" class="transition visible">
                         </div>
                         <div style="border-bottom: #{{ inventoryPart.color.rgb }} 5px solid" class="ui bottom attached label">{{ inventoryPart.part.number }}</div>
                     </a>

app/Resources/views/rebrickable/set/models.html.twig

@@ -0,0 +1,48 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+    {% set count = 0 %}
+
+<div class="ui ten column grid">
+    {% for model in models %}
+        <div class="column">
+            <div class="ui bordered fluid image">
+                <a href="{{ url('model_detail', {'number': model['model'].number})}}">
+                    <div class="image load">
+                        <img src="{{ asset('resources/images/unknown_image.png') }}" data-src="{{ asset('/images/-1/'~model['model'].number~'.png') | imagine_filter('model_min') }}" class="transition visible">
+                    </div>
+                    <div class="ui bottom attached label {%  if model['model'].parts|length == 0 %}black{% endif %}">{{ model['model'].number }}</div>
+                </a>
+            </div>
+            {% for color in model['colors'] %}
+                {% set count = count + color['quantity'] %}
+                <div style="border-bottom: 4px solid #{{ color['color'].rgb }}">{{ color['quantity'] }} {{ color['color'].name }}</div>
+            {% endfor %}
+        </div>
+    {% endfor %}
+</div>
+
+
+<div class="ui ten column grid">
+    {% for model in spareModels %}
+        <div class="column">
+            <div class="ui bordered fluid image">
+                <a href="{{ url('model_detail', {'number': model['model'].number})}}">
+                    <div class="image load">
+                        <img src="{{ asset('resources/images/unknown_image.png') }}" data-src="{{ asset('/images/-1/'~model['model'].number~'.png') | imagine_filter('model_min') }}" class="transition visible">
+                    </div>
+                    <div class="ui bottom attached label {%  if model['model'].parts|length == 0 %}black{% endif %}">{{ model['model'].number }}</div>
+                </a>
+            </div>
+            {% for color in model['colors'] %}
+                {% set count = count + color['quantity'] %}
+                <div style="border-bottom: 4px solid #{{ color['color'].rgb }}">{{ color['quantity'] }} {{ color['color'].name }}</div>
+            {% endfor %}
+        </div>
+    {% endfor %}
+</div>
+
+<p>{{ set.partCount }}</p>
+<p>{{ count }} models</p>
+
+{% endblock %}

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

@@ -2,7 +2,7 @@
 
 {% block title %}{{ rbset ? rbset.number }}  {{ rbset ? rbset.name }}{% endblock %}
 
-{% block header %}{{ rbset ? rbset.number }}  {{ rbset ? rbset.name }}{% endblock %}
+{% block header %}{{ rbset ? rbset.number }}  {{ rbset ? rbset.name | escape('html') }}{% endblock %}
 
 {% block content %}
 
@@ -10,15 +10,15 @@
         <div class="column nine wide">
             <div class="image bordered ui big">
                 {% if brset %}
-                    <img class="big" src="{{ brset.imageURL }}">
+                    <img class="big" src="{{ ('/sets/images/'~brset.legoSetID~'.jpg')|imagine_filter('brickset_large') }}">
                 {% elseif rbset %}
-                    <img class="big" src="{{ rbset.number|setImage|imagine_filter('rebrickable') }}">
+                    <img class="big" src="{{ rbset.number|setImage|imagine_filter('rebrickable_large') }}">
                 {% endif %}
             </div>
         </div>
         <div class="column seven wide">
             <div class="item-info black ui">
-                <table class="ui table">
+                <table class="ui very basic table">
                     <tr>
                         <td>number</td><td>{{ brset ? brset.legoSetID :  rbset ? rbset.number : null}}</td>
                     </tr>
@@ -37,7 +37,9 @@
                         {% endif %}
                     </tr>
                     <tr>
-                        <td>parts</td><td>{{ brset ? brset.pieces : rbset ? rbset.partCount }}</td>
+                        <td>parts</td><td>
+                            {{  rbset ? rbset.partCount }} {{ brset ? '('~brset.pieces~')' }}
+                        </td>
                     </tr>
                     {% if brset %}
                         <tr>
@@ -53,21 +55,21 @@
                     {% endif %}
                 </table>
 
-                {% if brset is not null %}
+                {#{% if brset is not null %}#}
-                    <dl>
+                    {#<dl>#}
-                        <dt>themegroup:</dt><dd>{{ brset.themeGroup }}</dd>
+                        {#<dt>themegroup:</dt><dd>{{ brset.themeGroup }}</dd>#}
-                        <dt>theme:</dt><dd>{{ brset.theme }}</dd>
+                        {#<dt>theme:</dt><dd>{{ brset.theme }}</dd>#}
-                        <dt>subtheme:</dt><dd>{{ brset.subtheme }}</dd>
+                        {#<dt>subtheme:</dt><dd>{{ brset.subtheme }}</dd>#}
-                        <dt>count of parts:</dt><dd>{{ brset.pieces }}</dd>
+                        {#<dt>count of parts:</dt><dd>{{ brset.pieces }}</dd>#}
-                        <dt>minifigs:</dt><dd>{{ brset.minifigs }}</dd>
+                        {#<dt>minifigs:</dt><dd>{{ brset.minifigs }}</dd>#}
-                    </dl>
+                    {#</dl>#}
-                {% endif %}
+                {#{% endif %}#}
             </div>
         </div>
     </div>
 
-    <div class="segment vertical item-info">
+    <div class="ui segment vertical item-info">
-        <div class="ui tabular menu">
+        <div class="ui tabular pointing secondary 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>
@@ -76,12 +78,13 @@
                 <a class="item" data-tab="reviews"><i class="write icon"></i> Reviews ({{ brset.reviewCount }})</a>
             {% endif %}
         </div>
+        <div class="ui vertical segment">
             <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>
+                    {#<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 })) }}#}
+                    {{ render(controller('AppBundle:Rebrickable/Set:parts', { 'number': rbset.number })) }}
 
                 {% endif %}
             </div>
@@ -102,12 +105,11 @@
                     {{ render(controller('AppBundle:Brickset/Set:reviews', { 'id': brset.setID })) }}
                 </div>
                 <div class="ui tab" data-tab="description">
-                {{ brset.description }}
+                    {{ brset.description|raw }}
                 </div>
             {% endif %}
         </div>
-
+    </div>
-
 {% endblock %}
 
 {% block javascripts %}
@@ -117,20 +119,20 @@
 
         $(document).ready(function () {
             
-            $('.ajax-load').each(function () {
+//            $('.ajax-load').each(function () {
-                $self = $(this);
+//                $self = $(this);
-
+//
-                console.log($self);
+//
-                $.ajax({
+//                $.ajax({
-                    type: "POST",
+//                    type: "POST",
-                    dataType: 'json',
+//                    dataType: 'json',
-                    url: $self.data('src'),
+//                    url: $self.data('src'),
-                    async: true, //you won't need that if nothing in your following code is dependend of the result
+//                    async: true, //you won't need that if nothing in your following code is dependend of the result
-                    success: function(response){
+//                    success: function(response){
-                        $self.html(response); //Change the html of the div with the id = "your_div"
+//                        $self.html(response); //Change the html of the div with the id = "your_div"
-                    }
+//                    }
-                })
+//                })
-            })
+//            })
 
         })
 

app/Resources/views/set/index.html.twig

@@ -1,7 +1,14 @@
 {% extends 'base.html.twig' %}
 
+{% block title %}{{ 'page.set.index' | trans }}{% endblock %}
+
+{% block header %}{{ 'page.set.index' | trans }}{% endblock %}
+
 {% block content %}
 
+    <div class="ui container divided stackable grid">
+        <div class="row">
+            <div class="column four wide">
                 <form method="get" action="" class="ui form">
                     {{ form_start(form) }}
 
@@ -10,18 +17,26 @@
                         {{ form_label(form.theme.id) }}
                         {{ form_widget(form.theme.id) }}
                     </div>
+                    <div class="field">
+                        {{ form_row(form.partCount) }}
+                    </div>
+                    <div class="field">
+                        {{ form_row(form.year) }}
+                    </div>
+
                     <div class="field">
                         <input class="ui submit button" type="submit" value="filter"/>
                     </div>
                     {{ form_rest(form) }}
                     {{ form_end(form) }}
                 </form>
-
+            </div>
-    <div class="ui seven column grid">
+            <div class="column twelve wide">
+                <div class="ui six column doubling grid">
                     <div class="row">
                         {% for set in sets %}
                             <div class="column">
-                   <a href="{{ url('set_detail', {'number': set.number, 'name' : set.name|escape('url') }) }}">
+                                <a href="{{ url('set_detail', {'number': set.number}) }}">
                                     <img class="ui bordered image medium" src="{{ set.number|setImage|imagine_filter('rebrickable_set_min') }}">
                                     <p>{{ set.number }} - {{ set.name }}</p>
                                 </a>
@@ -30,7 +45,16 @@
                     </div>
                 </div>
 
+
                 <p>{{ sets.getTotalItemCount }}</p>
 
                 {{ knp_pagination_render(sets) }}
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+
 {% endblock %}

app/config/config.yml

@@ -9,6 +9,7 @@ parameters:
     locale: en
     # rebrickable csv files root URL (http://rebrickable.com/media/downloads/ or local dir containing csv files)
     rebrickable_downloads_url: 'http://rebrickable.com/media/downloads/'
+    media_root: "%kernel.root_dir%/../var/media/"
 
 framework:
     #esi:             ~
@@ -104,6 +105,10 @@ liip_imagine:
         rebrickable:
               stream:
                   wrapper: 'http://rebrickable.com/media/'
+        brickset:
+              stream:
+                  wrapper: 'https://images.brickset.com/'
+
 
     resolvers:
         default:
@@ -140,12 +145,31 @@ liip_imagine:
               default_image: '/resources/images/unknown_image.png'
               cache: ~
               filters:
-                  thumbnail: { size: [250, 250], mode: inset }
+                  thumbnail: { size: [250, 200], mode: inset }
+                  background: { size: [250, 200], position: center, color: '#FFFFFF' }
+
+        rebrickable_large:
+              data_loader: rebrickable
+              cache: ~
+              quality: 92
+              filters:
+                  thumbnail: { size: [840, 580], mode: inset }
+                  background: { size: [900, 600], position: center, color: '#FFFFFF' }
+
+        brickset:
+              data_loader: brickset
+        brickset_large:
+              data_loader: brickset
+              cache: ~
+              quality: 92
+              filters:
+                  thumbnail: { size: [840, 580], mode: inset }
+                  background: { size: [900, 600], position: center, color: '#FFFFFF' }
 oneup_flysystem:
     adapters:
         media:
             local:
-                directory: "%kernel.root_dir%/../var/media/"
+                directory: "%media_root%"
     filesystems:
         media:
             adapter: media

app/config/service/service.yml

@@ -1,11 +1,4 @@
 services:
-    app.twig_extension:
-        class: AppBundle\Twig\AppExtension
-        public: false
-        arguments: ['@api.manager.rebrickable', '@app.transformer.format']
-        tags:
-            - { name: twig.extension }
-
     app.brickset.cache_provider:
           class: Doctrine\Common\Cache\PhpFileCache
           arguments: ["%kernel.cache_dir%/brickset", ".cache.php"]

app/config/service/util.yml

@@ -6,3 +6,10 @@ services:
         class: AppBundle\Util\RelationMapper
         arguments:
             - ['%kernel.root_dir%/Resources/relations']
+
+    app.twig_extension:
+        class: AppBundle\Twig\AppExtension
+        public: false
+        arguments: ['@api.manager.rebrickable', '@app.transformer.format']
+        tags:
+            - { name: twig.extension }

src/AppBundle/Controller/SetController.php

@@ -25,7 +25,8 @@ class SetController extends Controller
         $form = $this->get('form.factory')->create(SetFilterType::class);
 
         $filterBuilder = $this->get('repository.rebrickable.set')
-            ->createQueryBuilder('s');
+            ->createQueryBuilder('s')
+            ->orderBy('s.year','DESC');
 
         if ($request->query->has($form->getName())) {
             // manually bind values from the request
@@ -55,13 +56,15 @@ class SetController extends Controller
     {
         $rebrickableSet = null;
         $bricksetSet = null;
+        $colors = null;
+
         try {
-            if (($rebrickableSet = $this->getDoctrine()->getManager()->getRepository(Set::class)->find($number)) == null) {
+            if (($rebrickableSet = $this->get('repository.rebrickable.set')->find($number)) == null) {
                 $this->addFlash('warning', 'Set not found in Rebrickable database');
             }
 
             $bricksetSet = $this->get('api.manager.brickset')->getSetByNumber($number);
-            dump($bricksetSet);
+
         } catch (EmptyResponseException $e) {
             $this->addFlash('warning', 'Set not found in Brickset database');
         } catch (ApiException $e) {

src/AppBundle/Form/Filter/Set/SetFilterType.php

@@ -19,6 +19,14 @@ class SetFilterType extends AbstractType
             'label' => 'filter.part.search',
         ]);
 
+        $builder->add('partCount', Filters\NumberRangeFilterType::class, [
+            'label' => 'filter.part.partCount',
+        ]);
+
+        $builder->add('year', Filters\NumberRangeFilterType::class, [
+            'label' => 'filter.part.year',
+        ]);
+
         $builder->add('theme', ThemeFilterType::class, [
             'add_shared' => function (FilterBuilderExecuterInterface $builderExecuter) {
                 $builderExecuter->addOnce($builderExecuter->getAlias().'.theme', 'c', function (QueryBuilder $filterBuilder, $alias, $joinAlias, $expr) {
@@ -26,6 +34,7 @@ class SetFilterType extends AbstractType
                 });
             },
         ]);
+
     }
 
     public function getBlockPrefix()