OTSSignsTheme/custom/otssignange/views/campaign-page.twig

{#
/**
 * Copyright (C) 2020 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}

{% block title %}{{ "Campaigns"|trans }} | {% endblock %}

{% block actionMenu %}
  <div class="widget-action-menu pull-right">
    {% if currentUser.featureEnabled("campaign.add") %}
      <button class="btn btn-icon btn-success XiboFormButton" title="{% trans "Add a new Campaign" %}" href="{{ url_for("campaign.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
    {% endif %}
    <button class="btn btn-icon btn-primary" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
  </div>
{% endblock %}

{% block pageContent %}
    <div class="ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Campaigns" %}</h1>
            <p class="text-muted">{% trans "Manage your campaigns and ad campaigns." %}</p>
        </div>

        <div class="widget dashboard-card ots-displays-card">
            <div class="widget-body ots-displays-body">
                <div class="XiboGrid" id="{{ random() }}" data-grid-name="campaignView">
                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
                        <div class="ots-filter-header">
                            <h3 class="ots-filter-title">{% trans "Filter Campaigns" %}</h3>
                            <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
                                <i class="fa fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="ots-filter-content collapsed" id="ots-filter-content">
                            <div class="FilterDiv card-body" id="Filter">
                        <form class="form-inline">
                            {% set title %}{% trans "Name" %}{% endset %}
                            {{ inline.inputNameGrid('name', title) }}

                            {% if currentUser.featureEnabled("tag.tagging") %}
                                {% set title %}{% trans "Tags" %}{% endset %}
                                {% set exactTagTitle %}{% trans "Exact match?" %}{% endset %}
                                {% set logicalOperatorTitle %}{% trans "When filtering by multiple Tags, which logical operator should be used?" %}{% endset %}
                                {% set helpText %}{% trans "A comma separated list of tags to filter by. Enter a tag|tag value to filter tags with values. Enter --no-tag to filter all items without tags. Enter - before a tag or tag value to exclude from results." %}{% endset %}
                                {{ inline.inputWithTags("tags", title, null, helpText, null, null, null, "exactTags", exactTagTitle, logicalOperatorTitle) }}
                            {% endif %}

                            {% set title %}{% trans "Layouts" %}{% endset %}
                            {% set values = [{id: 0, value: ""}, {id: 2, value: "Yes"}, {id: 1, value: "No"}] %}
                            {{ inline.dropdown("hasLayouts", "single", title, 0, values, "id", "value") }}

                            {{ inline.hidden("folderId") }}

                            {% set title %}{% trans "Layout ID" %}{% endset %}
                            {{ inline.number("layoutId", title, layoutId) }}

                            {% if currentUser.featureEnabled('ad.campaign') %}
                                {% set title %}{% trans "Type" %}{% endset %}
                                {% set options = [
                                    { id: null, name: "" },
                                    { id: "list", name: "Layout list"|trans },
                                    { id: "ad", name: "Ad Campaign"|trans }
                                ] %}
                                {{ inline.dropdown("type", "single", title, "both", options, "id", "name", helpText) }}
                            {% endif %}

                            {% set title %}{% trans "Cycle Based Playback" %}{% endset %}
                            {% set enabled %}{% trans "Enabled" %}{% endset %}
                            {% set disabled %}{% trans "Disabled" %}{% endset %}
                            {% set options = [
                                { optionid: "", option: "" },
                                { optionid: 0, option: disabled},
                                { optionid: 1, option: enabled}
                            ] %}
                            {{ inline.dropdown("cyclePlaybackEnabled", "single", title, "", options, "optionid", "option") }}
                        </form>
                            </div>
                        </div>
                    </div>

                <div class="grid-with-folders-container">
                    <div class="grid-folder-tree-container p-3" id="grid-folder-filter">
                        <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
                            <label class="form-check-label" for="folder-tree-clear-selection-button" title="{% trans "Search in all folders" %}">{% trans "All Folders" %}</label>
                        </div>
                        <div class="folder-search-no-results d-none">
                            <p>{% trans 'No Folders matching the search term' %}</p>
                        </div>
                        <div id="container-folder-tree"></div>
                    </div>
                    <div class="folder-controller d-none">
                        <button type="button" id="folder-tree-select-folder-button" class="btn btn-outline-secondary" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder fa-1x"></i></button>
                        <div id="breadcrumbs" class="mt-2 pl-2"></div>
                    </div>
                    <div id="datatable-container">
                        <div class="XiboData card py-3 dashboard-card ots-table-card">
                            <table id="campaigns" class="table table-striped" data-content-type="campaign" data-content-id-name="campaignId" data-state-preference-name="campaignGrid" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>{% trans "Name" %}</th>
                                        {% if currentUser.featureEnabled('ad.campaign') %}
                                        <th>{% trans "Type" %}</th>
                                        <th>{% trans "Start Date" %}</th>
                                        <th>{% trans "End Date" %}</th>
                                        {% endif %}
                                        <th>{% trans "# Layouts" %}</th>
                                        {% if currentUser.featureEnabled("tag.tagging") %}<th>{% trans "Tags" %}</th>{% endif %}
                                        <th>{% trans "Duration" %}</th>
                                        <th>{% trans "Cycle based Playback" %}</th>
                                        <th>{% trans "Play Count" %}</th>
                                        {% if currentUser.featureEnabled('ad.campaign') %}
                                        <th>{% trans "Target Type" %}</th>
                                        <th>{% trans "Target" %}</th>
                                        <th>{% trans "Plays" %}</th>
                                        <th>{% trans "Spend" %}</th>
                                        <th>{% trans "Impressions" %}</th>
                                        {% endif %}
                                        <th>{% trans "Ref 1" %}</th>
                                        <th>{% trans "Ref 2" %}</th>
                                        <th>{% trans "Ref 3" %}</th>
                                        <th>{% trans "Ref 4" %}</th>
                                        <th>{% trans "Ref 5" %}</th>
                                        <th>{% trans "Created At" %}</th>
                                        <th>{% trans "Modified At" %}</th>
                                        <th>{% trans "Modified By" %}</th>
                                        <th class="rowMenu"></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    {# Initialise JS variables and translations #}
    <script type="text/javascript" nonce="{{ cspNonce }}" defer>
        {# JS variables #}
        var campaignSearchURL = "{{ url_for('campaign.search') }}";
        var layoutSearchURL = "{{ url_for('layout.search') }}";

        var folderViewEnabled = "{{ currentUser.featureEnabled('folder.view') }}";
        var adCampaignEnabled = "{{ currentUser.featureEnabled('ad.campaign') }}";
        var taggingEnabled = "{{ currentUser.featureEnabled('tag.tagging') }}";

        {# Custom translations #}
        var campaignPageTrans = {
            list: "{% trans "List" %}",
            ad: "{% trans "Ad" %}",
            plays: "{% trans "Plays" %}",
            budget: "{% trans "Budget" %}",
            impressions: "{% trans "Impressions" %}",
        };
    </script>

    {# Add page source code bundle #}
    <script src="{{ theme.rootUri() }}dist/pages/campaign-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
{% endblock %}