Ajout de suivifilm en tant que plugin jquery

assets/css/app.scss

@@ -3,5 +3,3 @@ body {
 }
 
 @import "~bootstrap/scss/bootstrap";
-
-@import "./select2/core.scss";

assets/css/select2/_dropdown.scss

@@ -1,73 +0,0 @@
-.select2-dropdown {
-    background-color: white;
-
-    border: 1px solid blue;
-    border-radius: 0;
-
-    box-sizing: border-box;
-
-    display: block;
-
-    position: absolute;
-    left: -100000px;
-
-    width: 100%;
-
-    z-index: 1051;
-}
-
-.select2-results {
-    display: block;
-}
-
-.select2-results__options {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.select2-results__option {
-    padding: 6px;
-
-    user-select: none;
-    -webkit-user-select: none;
-
-    &[aria-selected] {
-        cursor: pointer;
-    }
-}
-
-.select2-container--open .select2-dropdown {
-    left: 0;
-}
-
-.select2-container--open .select2-dropdown--above {
-    border-bottom: none;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.select2-container--open .select2-dropdown--below {
-    border-top: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-
-.select2-search--dropdown {
-    display: block;
-    padding: 4px;
-
-    .select2-search__field {
-        padding: 4px;
-        width: 100%;
-        box-sizing: border-box;
-
-        &::-webkit-search-cancel-button {
-            -webkit-appearance: none;
-        }
-    }
-
-    &.select2-search--hide {
-        display: none;
-    }
-}

assets/css/select2/_multiple.scss

@@ -1,35 +0,0 @@
-.select2-selection--multiple {
-    box-sizing: border-box;
-
-    cursor: pointer;
-    display: block;
-
-    min-height: 32px;
-
-    user-select: none;
-    -webkit-user-select: none;
-
-    .select2-selection__rendered {
-        display: inline-block;
-        overflow: hidden;
-        padding-left: 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-
-.select2-search--inline {
-    float: left;
-
-    .select2-search__field {
-        box-sizing: border-box;
-        border: none;
-        font-size: 100%;
-        margin-top: 5px;
-        padding: 0;
-
-        &::-webkit-search-cancel-button {
-            -webkit-appearance: none;
-        }
-    }
-}

assets/css/select2/_single.scss

@@ -1,34 +0,0 @@
-.select2-selection--single {
-    box-sizing: border-box;
-
-    cursor: pointer;
-    display: block;
-
-    height: 36px;
-
-    user-select: none;
-    -webkit-user-select: none;
-
-    .select2-selection__rendered {
-        display: block;
-        padding-left: 8px;
-        padding-right: 20px;
-
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .select2-selection__clear {
-        position: relative;
-    }
-}
-
-&[dir="rtl"] {
-    .select2-selection--single {
-        .select2-selection__rendered {
-            padding-right: 8px;
-            padding-left: 20px;
-        }
-    }
-}

assets/css/select2/core.scss

@@ -1,50 +0,0 @@
-.select2-container {
-    box-sizing: border-box;
-
-    display: inline-block;
-    margin: 0;
-    position: relative;
-    vertical-align: middle;
-
-    @import "single";
-    @import "multiple";
-}
-
-@import "dropdown";
-
-.select2-close-mask {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: block;
-    position: fixed;
-    left: 0;
-    top: 0;
-    min-height: 100%;
-    min-width: 100%;
-    height: auto;
-    width: auto;
-    opacity: 0;
-    z-index: 99;
-
-    // styles required for IE to work
-
-    background-color: #fff;
-    filter: alpha(opacity=0);
-}
-
-.select2-hidden-accessible {
-    border: 0 !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-}
-
-@import "theme/default/layout";
-//@import "theme/classic/layout";

assets/css/select2/mixins/_gradients.scss

@@ -1,13 +0,0 @@
-// https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/mixins/_gradients.scss#L17-L27
-
-// Vertical gradient, from top to bottom
-//
-// Creates two color stops, start and end, by specifying a color and position for each color stop.
-// Color stops are not available in IE9 and below.
-@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
-    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
-    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
-}

assets/css/select2/theme/default/_multiple.scss

@@ -1,99 +0,0 @@
-.select2-selection--multiple {
-    background-color: white;
-    //border: 1px solid $cnaf-border;
-    border-radius: 0px;
-    cursor: text;
-
-    .select2-selection__rendered {
-        box-sizing: border-box;
-        list-style: none;
-        margin: 0;
-        padding: 0 5px;
-        width: 100%;
-
-        li {
-            list-style: none;
-        }
-    }
-
-    .select2-selection__placeholder {
-        //color: $cnaf-placeholder;
-
-        margin-top: 5px;
-
-        float: left;
-    }
-
-    .select2-selection__clear {
-        cursor: pointer;
-        float: right;
-        font-weight: bold;
-        margin-top: 5px;
-        margin-right: 10px;
-    }
-
-    .select2-selection__choice {
-        background-color: $secondary;
-
-        border: 0;
-        border-radius: 2px;
-        cursor: default;
-        //color: $cnaf;
-
-        float: left;
-
-        margin-right: 5px;
-        margin-top: 5px;
-        padding: 0 5px;
-    }
-
-    .select2-selection__choice__remove {
-        //color: $cnaf;
-        cursor: pointer;
-
-        display: inline-block;
-        font-weight: bold;
-
-        margin-right: 2px;
-
-        &:hover {
-            //color: $cnaf-dark;
-        }
-    }
-}
-
-&[dir="rtl"] {
-    .select2-selection--multiple {
-        .select2-selection__choice, .select2-selection__placeholder, .select2-search--inline {
-            float: right;
-        }
-
-        .select2-selection__choice {
-            margin-left: 5px;
-            margin-right: auto;
-        }
-
-        .select2-selection__choice__remove {
-            margin-left: 2px;
-            margin-right: auto;
-        }
-    }
-}
-
-&.select2-container--focus {
-    .select2-selection--multiple {
-        //border: solid $cnaf-border 1px;
-        outline: 0;
-    }
-}
-
-&.select2-container--disabled {
-    .select2-selection--multiple {
-        //background-color: $cnaf-disabled;
-        cursor: default;
-    }
-
-    .select2-selection__choice__remove {
-        display: none;
-    }
-}

assets/css/select2/theme/default/_single.scss

@@ -1,88 +0,0 @@
-.select2-selection--single {
-    background-color: #fff;
-
-    //border: 1px solid $cnaf-border;
-    border-radius: 0px;
-
-    .select2-selection__rendered {
-        //color: $cnaf;
-        line-height: 28px;
-    }
-
-    .select2-selection__clear {
-        cursor: pointer;
-        float: right;
-        font-weight: bold;
-    }
-
-    .select2-selection__placeholder {
-        //color: $cnaf-placeholder;
-    }
-
-    .select2-selection__arrow {
-        height: 23px;
-        background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' viewBox='0 0 448 512'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E"), "#", "%23");
-
-        position: absolute;
-
-        top: 6px;
-        right: 8px;
-
-        width: 18px;
-
-        /*
-                b {
-                    border-color: $cnaf-placeholder transparent transparent transparent;
-                    border-style: solid;
-                    border-width: 5px 4px 0 4px;
-        
-                    height: 0;
-                    left: 50%;
-        
-                    margin-left: -4px;
-                    margin-top: -2px;
-        
-                    position: absolute;
-        
-                    top: 50%;
-                }
-        */
-
-    }
-}
-
-&[dir="rtl"] {
-    .select2-selection--single {
-        .select2-selection__clear {
-            float: left;
-        }
-
-        .select2-selection__arrow {
-            left: 1px;
-            right: auto;
-        }
-    }
-}
-
-&.select2-container--disabled {
-    .select2-selection--single {
-        //background-color: $cnaf-disabled;
-        cursor: default;
-
-        .select2-selection__clear {
-            display: none;
-        }
-    }
-}
-
-&.select2-container--open {
-    .select2-selection--single {
-        .select2-selection__arrow {
-            background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' viewBox='0 0 448 512'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E"), "#", "%23");
-            // b {
-            //    border-color: transparent transparent $cnaf-placeholder transparent;
-            //    border-width: 0 4px 5px 4px;
-            //  }
-        }
-    }
-}

assets/css/select2/theme/default/layout.scss

@@ -1,104 +0,0 @@
-.select2-container--default {
-    @import "single";
-    @import "multiple";
-
-    &.select2-container--open.select2-container--above {
-        .select2-selection--single, .select2-selection--multiple {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-    }
-
-    &.select2-container--open.select2-container--below {
-        .select2-selection--single, .select2-selection--multiple {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-    }
-
-    .select2-search--dropdown {
-        .select2-search__field {
-            //color: $cnaf;
-            //border: 1px solid $cnaf-brder;
-        }
-    }
-
-    .select2-search--inline {
-        .select2-search__field {
-            background: transparent;
-            //color: $cnaf;
-            border: none;
-            outline: 0;
-            box-shadow: none;
-            -webkit-appearance: textfield;
-        }
-    }
-
-    .select2-results > .select2-results__options {
-        max-height: 200px;
-        //color: $cnaf-text;
-        overflow-y: auto;
-    }
-
-    .select2-results__option {
-        &[role=group] {
-            padding: 0;
-        }
-
-        &[aria-disabled=true] {
-            //color: $cnaf-disabled;
-        }
-
-        &[aria-selected=true] {
-            //color: $cnaf;
-        }
-
-        .select2-results__option {
-            padding-left: 1em;
-
-            .select2-results__group {
-                padding-left: 0;
-            }
-
-            .select2-results__option {
-                margin-left: -1em;
-                padding-left: 2em;
-
-                .select2-results__option {
-                    margin-left: -2em;
-                    padding-left: 3em;
-
-                    .select2-results__option {
-                        margin-left: -3em;
-                        padding-left: 4em;
-
-                        .select2-results__option {
-                            margin-left: -4em;
-                            padding-left: 5em;
-
-                            .select2-results__option {
-                                margin-left: -5em;
-                                padding-left: 6em;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .select2-results__option--highlighted[aria-selected] {
-        //background-color: $cnaf;
-        //color: $cnaf-text-white;
-    }
-
-    .select2-results__group {
-        cursor: default;
-        display: block;
-        padding: 6px;
-    }
-
-    .select2-results__message {
-        //color: $cnaf-placeholder;
-    }
-}

assets/js/app.js

@@ -13,10 +13,15 @@ import 'bootstrap-star-rating/css/star-rating.css';
 import 'bootstrap-star-rating/themes/krajee-fa/theme';
 import 'bootstrap-star-rating/themes/krajee-fa/theme.css';
 
+import './suivifilms2.js';
+
 $(document).ready(function() {
     $(function() {
         $('[data-toggle="tooltip"]').tooltip();
 
+        $('[data-fonction="follow"]').follow();
+        $('[data-fonction="seen"]').seen();
+
         $('[data-toggle="notify"]').each(function() {
             $.notify({
                 message: $(this).data('message')

assets/js/suivifilms.js

@@ -1,57 +0,0 @@
-function ecouterSuivi(classBouton, texteUn, iconeEtatUn, texteDeux, iconeEtatDeux, chemin) {
-    $('.'+classBouton).each(function() {
-        $(this).click(function(e) {
-            e.preventDefault();
-            let $icone = $(this).children('i');
-            let contenu = $(this).attr('data-content');
-            $.ajax({
-                type: 'POST',
-                url: chemin,
-                data: 'id_film=' + contenu,
-                success: function (data) {
-                    console.log(data);
-                    if ($icone.attr('class') === iconeEtatUn) {
-                        $icone.attr('class', iconeEtatDeux);
-                        $icone.text(texteDeux);
-                    } else {
-                        $icone.attr('class', iconeEtatUn);
-                        $icone.text(texteUn);
-                    }
-                    return;
-                },
-                complete: function () {
-
-                }
-            })
-        })
-    })
-}
-
-function ecouterVu(classBouton, couleurVu, couleurPasVu, couleurNeutre, chemin) {
-    $('.'+classBouton).each(function() {
-        $(this).click(function(e) {
-            e.preventDefault();
-            let $icone = $(this).children();
-            let contenu = $(this).attr('data-content');
-            $.ajax({
-                type: 'POST',
-                url: chemin,
-                data: 'id_film=' + contenu,
-                success: function (data) {
-                    console.log(data);
-                    if ($icone.attr('class') === couleurNeutre) {
-                        $icone.attr('class', couleurPasVu);
-                        $icone.next().attr('class', couleurNeutre);
-                    } else {
-                        $icone.attr('class', couleurNeutre);
-                        $icone.next().attr('class', couleurVu);
-                    }
-                    return;
-                },
-                complete: function () {
-
-                }
-            })
-        })
-    })
-}

assets/js/tagSelect2.js

@@ -1 +0,0 @@
-import './widgets/select2.js';

assets/js/widgets/select2.js

@@ -1,129 +0,0 @@
-// assets/js/widgets/select2.js
-
-// pour le widget select2
-import  'select2';
-//require('./select2-fr.js');
-import 'select2/dist/js/i18n/fr.js';
-
-(function ($) {
-    $.fn.select2entity = function (options) {
-        this.each(function () {
-            var request;
-
-            // Keep a reference to the element so we can keep the cache local to this instance and so we can
-            // fetch config settings since select2 doesn't expose its options to the transport method.
-            var $s2 = $(this),
-                    limit = $s2.data('page-limit') || 0,
-                    scroll = $s2.data('scroll'),
-                    prefix = Date.now(),
-                    cache = [];
-
-            var reqParams = $s2.data('req_params');
-            if (reqParams) {
-                $.each(reqParams, function (key, value) {
-                    $('*[name="' + value + '"]').on('change', function () {
-                        $s2.val(null);
-                        $s2.trigger('change');
-                    });
-                });
-            }
-
-            // Deep-merge the options
-            $s2.select2($.extend(true, {
-                // Tags support
-                createTag: function (data) {
-                    if ($s2.data('tags') && data.term.length > 0) {
-                        var text = data.term + $s2.data('tags-text');
-                        return {id: $s2.data('new-tag-prefix') + data.term, text: text};
-                    }
-                },
-                ajax: {
-                    url: $s2.data('ajax--url'),
-                    transport: function (params, success, failure) {
-                        // is caching enabled?
-                        if ($s2.data('ajax--cache')) {
-                            // try to make the key unique to make it less likely for a page+q to match a real query
-                            var key = prefix + ' page:' + (params.data.page || 1) + ' ' + params.data.q,
-                                    cacheTimeout = $s2.data('ajax--cacheTimeout');
-                            // no cache entry for 'term' or the cache has timed out?
-                            if (typeof cache[key] == 'undefined' || (cacheTimeout && Date.now() >= cache[key].time)) {
-                                $.ajax(params).fail(failure).done(function (data) {
-                                    cache[key] = {
-                                        data: data,
-                                        time: cacheTimeout ? Date.now() + cacheTimeout : null
-                                    };
-                                    success(data);
-                                });
-                            } else {
-                                // return cached data with no ajax request
-                                success(cache[key].data);
-                            }
-                        } else {
-                            // no caching enabled. just do the ajax request
-                            if (request) {
-                                request.abort();
-                            }
-                            request = $.ajax(params).fail(failure).done(success).always(function () {
-                                request = undefined;
-                            });
-                        }
-                    },
-                    data: function (params) {
-                        var ret = {
-                            'q': params.term,
-                            'field_name': $s2.data('name')
-                        };
-
-                        var reqParams = $s2.data('req_params');
-                        if (reqParams) {
-                            $.each(reqParams, function (key, value) {
-                                ret[key] = $('*[name="' + value + '"]').val()
-                            });
-                        }
-
-                        // only send the 'page' parameter if scrolling is enabled
-                        if (scroll) {
-                            ret['page'] = params.page || 1;
-                        }
-
-                        return ret;
-                    },
-                    processResults: function (data, params) {
-                        var results, more = false, response = {};
-                        params.page = params.page || 1;
-
-                        if ($.isArray(data)) {
-                            results = data;
-                        } else if (typeof data == 'object') {
-                            // assume remote result was proper object
-                            results = data.results;
-                            more = data.more;
-                        } else {
-                            // failsafe
-                            results = [];
-                        }
-
-                        if (scroll) {
-                            response.pagination = {more: more};
-                        }
-                        response.results = results;
-
-                        return response;
-                    }
-                },
-                placeholder: $s2.data('placeholder'),
-                minimumInputLength: $s2.data('minimum-input-length'),
-                language: $s2.data('language'),
-//            theme: 'bootstrap4',
-                tags: $s2.data('tags')
-            }, options || {}));
-        });
-        return this;
-    };
-})(jQuery);
-
-(function ($) {
-    $(document).ready(function () {
-        $('.select2entity[data-autostart="true"]').select2entity();
-    });
-})(jQuery);

package.json

@@ -11,7 +11,6 @@
     "node-sass": "^4.9.4",
     "popper.js": "^1.14.4",
     "sass-loader": "^7.1.0",
-    "select2": "^4.0.7",
     "webpack-notifier": "1.6.0"
   }
 }

templates/videotheque/ajouter.html.twig

@@ -2,15 +2,20 @@
 
 {% block title %}Ajouter un titre{% endblock %}
 {% block titre %}Ajouter un film{% endblock %}
+{% block stylesheets %}
+	{{ encore_entry_link_tags('tags') }}
+{% endblock %}
 {% block body %}
 	{{ include('videotheque/form.html.twig') }}
 {% endblock %}
 {% block javascripts %}
-	<script src="{{ asset('/bundles/app/assets/collectiontypeadd.js') }}"></script>
-	<script>
+	{{ encore_entry_script_tags('tags') }}
+	{#<script src="{{ asset('/bundles/app/assets/collectiontypeadd.js') }}"></script>#}
+	{#<script>
 		$(document).ready(function () {
 		    requete('{{ path('videotheque_ajax_realisateurs') }}', 'appbundle_film_realisateurs', 'add_realisateur');
 		    requete('{{ path('videotheque_ajax_genres') }}', 'appbundle_film_genres', 'add_genre');
         });
 	</script>
+	#}
 {% endblock %}

templates/videotheque/form.html.twig

@@ -21,7 +21,7 @@
                         {{ form_label(form.genres, 'Genres') }}
                     </div>
                     <div class="card-body">
-                        <a href="#" id="add_genre" class="btn btn-link">Ajouter un genre</a>
+                        {#<a href="#" id="add_genre" class="btn btn-link">Ajouter un genre</a>#}
                         <div class="form-inline">
                             {{ form_errors(form.genres) }}
                             {{ form_widget(form.genres) }}

templates/videotheque/liste.html.twig

@@ -31,19 +31,36 @@
 		<tr>
 			<td>
                 {%  if app.user.wantToSee(film) %}
-					<a href="#" class="boutonVoir" data-toggle="tooltip" title="Supprimer ce film de votre liste à voir" data-content="{{ film.id }}"><i class="fa fa-star fa-lg"></i></a>
-                {%  else %}
-					<a href="#" class="boutonVoir" data-toggle="tooltip" title="Ajouter ce film à vos liste à voir" data-content="{{ film.id }}"><i class="fa fa-star-o fa-lg"></i></a>
-
-                {%  endif %}
+					{% set follow_icone = "fa fa-star fa-lg" %}
+					{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
+				{% else %}
+					{% set follow_icone = "fa fa-star-o fa-lg" %}
+					{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
+				{% endif %}
+				<a href="#" data-fonction="follow"
+							data-icactif="fa fa-star fa-lg"
+							data-icinactif="fa fa-star-o fa-lg"
+							data-path="{{ path('maliste_modifier_a_voir') }}"
+							data-toggle="tooltip"
+							title="{{ follow_texte }}"
+							data-content="{{ film.id }}">
+					<i class="{{ follow_icone }}"></i>
+				</a>
 			</td>
 			<td>
                 {%  if app.user.haveSeen(film) %}
-					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i></a>
-                {%  else %}
-					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i></a>
-                {%  endif %}
-
+					{% set vu_icone = '<i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i>' %}
+				{% else %}
+					{% set vu_icone = '<i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i>' %}
+				{% endif %}				
+				<a href="#" data-fonction="seen"
+							data-path="{{ path('maliste_modifier_vus') }}"
+							data-content="{{ film.id }}"
+							data-neutre = "badge badge-secondary"
+							data-vu = "badge badge-success"
+							data-pasvu = "badge badge-danger">
+					{{ vu_icone | raw }}
+				</a>
 			</td>
 			<td>
 				{%  if film.authered is defined %}
@@ -101,14 +118,4 @@
 		{% endfor %}
 	</tbody>
 </table>
-{% endblock %}
-
-{% block javascripts %}
-	<script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
-	<script>
-        $(document).ready(function() {
-                ecouterSuivi('boutonVoir', '', 'fa fa-star fa-lg', '', 'fa fa-star-o fa-lg', '{{ path('maliste_modifier_a_voir') }}');
-                ecouterVu('boutonVu', 'badge badge-success', 'badge badge-danger', 'badge badge-secondary' ,'{{ path('maliste_modifier_vus') }}');
-        });
-	</script>
-{%  endblock %}
+{% endblock %}

templates/videotheque/modifier.html.twig

@@ -7,11 +7,12 @@
 	{{  include('videotheque/form.html.twig') }}
 {% endblock %}
 {% block javascripts %}
-	<script src="{{ asset('/bundles/app/assets/collectiontypeadd.js') }}"></script>
+	{#<script src="{{ asset('/bundles/app/assets/collectiontypeadd.js') }}"></script>
 	<script>
         $(document).ready(function () {
             requete('{{ path('videotheque_ajax_realisateurs') }}', 'appbundle_film_realisateurs', 'add_realisateur');
             requete('{{ path('videotheque_ajax_genres') }}', 'appbundle_film_genres', 'add_genre');
         });
 	</script>
+    #}
 {% endblock %}

templates/videotheque/voirfilm.html.twig

@@ -3,18 +3,35 @@
 {% block title %}Fiche film - {{ film.titre }}{% endblock %}
 {% block titre %}
     {%  if film.usersWantToView.contains(app.user) %}
-        <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="fa fa-star"></i></a>
-    {%  else %}
-        <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="fa fa-star-o"></i></a>
-    {%  endif %}
+        {% set follow_icone = "fa fa-star" %}
+        {% set follow_texte = "Supprimer ce film de votre liste à voir" %}
+    {% else %}
+        {% set follow_icone = "fa fa-star-o" %}
+        {% set follow_texte = "Ajouter ce film à votre liste à voir" %}
+    {% endif %}
+    <a href="#" data-fonction="follow"
+                data-icactif="fa fa-star"
+                data-icinactif="fa fa-star-o"
+                data-path="{{ path('maliste_modifier_a_voir') }}"
+                data-toggle="tooltip"
+                title="{{ follow_texte }}"
+                data-content="{{ film.id }}">
+        <i class="{{ follow_icone }}"></i></a>
     {{ film.titre }}
     {% if film.usersWhoSeen.contains(app.user) %}
-        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i></a>
-        {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>#}
-    {%  else %}
-        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i></a>
-        {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>#}
-    {%  endif %}
+        {% set vu_icone = '<i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i>' %}
+    {% else %}
+        {% set vu_icone = '<i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i>' %}
+    {% endif %}				
+    <a href="#" data-fonction="seen"
+                data-path="{{ path('maliste_modifier_vus') }}"
+                data-content="{{ film.id }}"
+                data-neutre = "badge badge-secondary"
+                data-vu = "badge badge-success"
+                data-pasvu = "badge badge-danger">
+        {{ vu_icone | raw }}
+    </a>
+    
     {% if film.note > 0 %}
         <p>
             <input class="rating"
@@ -147,11 +164,12 @@
     </div>
 {% endblock %}
 {% block javascripts %}
-    <script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
+    {#<script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
     <script>
         $(document).ready(function() {
             ecouterSuivi('boutonVoir', '', 'fa fa-star', '', 'fa fa-star-o', '{{ path('maliste_modifier_a_voir') }}');
             ecouterVu('boutonVu', 'badge badge-success', 'badge badge-danger', 'badge badge-secondary' ,'{{ path('maliste_modifier_vus') }}');
         });
     </script>
+    #}
 {%  endblock %}

webpack.config.js

@@ -18,7 +18,7 @@ Encore
      * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
      */
     .addEntry('app', './assets/js/app.js')
-    .addEntry('tags', './assets/js/tagSelect2.js')
+    //.addEntry('tags', './assets/js/tagSelect2.js')
     //.addEntry('page1', './assets/js/page1.js')
     //.addEntry('page2', './assets/js/page2.js')
 

yarn.lock

@@ -5863,11 +5863,6 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-select2@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.7.tgz#7b80473ef7900f4dc2b988623275fe569204ae8d"
-  integrity sha512-t46Z2nkEEYnBYdRpLNw5dj9qqO+YTiTlWKnpJ/B5e1Q3hPND00JRgcLJxYRzqpeLZd+ZkszkHEMagLKIfbTjVA==
-
 selfsigned@^1.10.4:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"