admin/public/football/javascripts/browser.js

jQuery(function($){
    'use strict';

    var selectors = {
            query: ".query",
            parameters: ".parameters",
            form: "form.browser-form",
            teamChange: '#team-change'
        },
        dom = (function(){
            var dom = {};
            for (var key in selectors) {
                if (selectors.hasOwnProperty(key)) {
                    dom[key] = $(selectors[key]);
                }
            }
            return dom;
        })(),
        hints = {
            teamId: [
                {
                    label: "England",
                    value: "497"
                },
                {
                    label: "Spurs",
                    value: "19"
                },
                {
                    label: "Chelsea",
                    value: "4"
                },
                {
                    label: "Hull",
                    value: "26"
                },
                {
                    label: "Man Utd",
                    value: "12"
                },
                {
                    label: "Newcastle",
                    value: "31"
                }
            ],
            playerId: [
                {
                    label: "Joe Hart",
                    value: "Joe_Hart"
                },
                {
                    label: "Emmanuel Adebayor",
                    value: "237670"
                }
            ],
            matchId: [{
                label: "Stoke v Spurs, 07/04/2018",
                value: "3998945"
            }],
            managerId: [{
                label: "Andre Villas-Boas",
                value: "468795"
            }],
            seasonId: [{
                label: "Premier league 17/18",
                value: "4578"
            }],
            competitionId: [
                {
                    label: "Premier league",
                    value: "100"
                },
                {
                    label: "World Cup",
                    value: "700"
                }
            ],
            type: [
                {
                    label: "Strikers",
                    value: "Strikers"
                },
                {
                    label: "Midfielders",
                    value: "Midfielders"
                },
                {
                    label: "Defenders",
                    value: "Defenders"
                },
                {
                    label: "GoalKeepers",
                    value: "GoalKeepers"
                },
                {
                    label: "Top100",
                    value: "Top100"
                }
            ]
        },
        currentFields = {},
        createReplacements = function() {
            var r = /({.*?})/g,
                query = dom.query.val()
                    // replace to convert new-style in PA docs `:key`
                    // to old-style `{key}` supported by this tool
                    .replace(/:([^\/]+)/g, "{$1}"),
                fields = $.map(query.match(r), function(field){
                    return field.replace("{", "").replace("}", "");
                }).filter(function(field){
                    return field !== "apiKey";
                });
            $.each(fields, function(_, field){
                if (!currentFields.hasOwnProperty(field)) {
                    addReplacementField(field);
                }
            });
            $.each(currentFields, function(currentFieldName, _){
                if (-1 === $.inArray(currentFieldName, fields)) {
                    currentFields[currentFieldName].remove();
                    delete currentFields[currentFieldName];
                }
            });
        },
        addReplacementField = function(name) {
            var field = $("<div class='param-field'><label>" + name + ": <input type='text' name='" + name + "' /></label></div>");
            if (hints.hasOwnProperty(name)) {
                $.each(hints[name], function(_, hint){
                    field.append($("<a href='#' class='hint' data-value='" + hint.value + "'>&larr; " + hint.label + "</a>"));
                });
            }
            if (/(Date|Day)$/.test(name) || "date" === name) {
                field.find("input").datepicker({dateFormat: 'yymmdd'})
            }
            currentFields[name] = field;
            dom.parameters.append(field);
        },
        insertHint = function(hintLink) {
            $(hintLink.parent()).find("input").val(hintLink.data("value"));
        };

    // alias hints
    hints.team1ID = hints.teamID;
    hints.team2ID = hints.teamID;
    hints.player1ID = hints.playerID;
    hints.player2ID = hints.playerID;
    hints.competition = hints.competitionID;

    dom.query.on("change", createReplacements);
    dom.query.on("keyup", createReplacements);
    dom.query.on("paste", function(){
        setTimeout(createReplacements, 10);
    });
    dom.form.on("submit", function() {
        dom.query.val(dom.query.val().replace(/:([^\/]+)/g, "{$1}").replace("{", "%7B").replace("}", "%7D"));
    });
    dom.parameters.on("click", ".hint", function(e) {
        e.preventDefault();
        insertHint($(this));
    });

    dom.teamChange.on("change", function() {
        var select = this.elements.team;
        window.location = '/team/images/'+ select.options[select.selectedIndex].value;
    });

    // simple autocompletes
    $('.foot-autocomplete').footAutocomplete();

    // player chooser
    (function(){
        $('.player-chooser').each(function(){
            var el = $(this);
            el.autocomplete({ source: [] });

            $(this.form).on('submit', function() {
                el.val(el.attr('data-real-value'));
            });

            $('#id-team').change(function(e) {
                var teamId = $(this).val();
                el.val("").addClass("loading")
                    .autocomplete({source: []});

                $.ajax("/admin/football/api/squad/" + teamId, {
                    success: function(json){
                        el.removeClass("loading")
                            .autocomplete({
                                source: json.players,
                                select: function(e, ui) {
                                    // hackhackhack
                                    this.value = ui.item.label;
                                    this.setAttribute('data-real-value', ui.item.value);
                                    return false;
                                }
                            });
                    }
                });
            });
        });
    })();

    // other datepickers
    (function(){
        $('.date-picker').datepicker({dateFormat: 'yymmdd'})
    })();
});

// autocomplete
$.widget('custom.footAutocomplete', {
    _create: function() {
        var self = this,
            placeholder = self.element.data("placeholder");

        $('<input type="text" class="fautocomplete__input form-control" placeholder="' + placeholder + '" />').autocomplete({
            delay: 0,
            _renderItem: function(ul, item) {
                return $('<li>')
                    .attr('data-id', item.id)
                    .append($('<a>').text( item.value ))
                    .appendTo(ul);
            },
            source: self.element.find('option')
                .filter(function(i, o) { return o.value; })
                .map(function(i, o) { return { id: o.value, value: o.innerHTML }; })
                .toArray(),

            select: function(event, ui) {
                self.element.val(ui.item.id);
                self.element.trigger("change");
                $('#focus-on-team').attr('checked', 'checked');
            }
        }).insertBefore(this.element.hide());
    }
});