芝麻web文件管理V1.00

编辑当前文件:/home/mgatv524/novabrasil.mgaplay.com.br/views/campaign-builder.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 %}
{% import "forms.twig" as forms %}

{% block title %}{% set campaignName = campaign.campaign %}{% trans %}{{ campaignName }} - Campaign Builder{% endtrans %} | {% endblock %}

{% set hideNavigation = "1" %}

{% block pageContent %}
    <div id="campaign-builder"
         data-campaign-id="{{ campaign.campaignId }}">
        <div class="back-button">
            <a id="backBtn" class="btn btn-primary" href="{{ url_for("campaign.view") }}">
                <i class="fa fa-angle-left"></i>
                <span>{{ "Back"|trans }}</span>
            </a>
        </div>

<div class="widget mt-3">
            <div class="widget-body">
                <div class="row">
                    <div class="col-12">
                        <div class="campaign-title">
                            <h1>{{ campaign.campaign }}</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link active" href="#tab-general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
                            <li class="nav-item"><a class="nav-link" href="#tab-refs" role="tab" data-toggle="tab"><span>{% trans "Reference" %}</span></a></li>
                        </ul>
                        <form id="campaign-builder-form-details" class="XiboForm form-horizontal"
                             method="put"
                             action="{{ url_for("campaign.edit", {id: campaign.campaignId}) }}">
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-general">

{% set title %}{% trans "Name" %}{% endset %}
                                    {% set helpText %}{% trans "The Name for this Campaign" %}{% endset %}
                                    {{ forms.input("name", title, campaign.campaign, helpText) }}

{% set title %}{% trans "Start Date" %}{% endset %}
                                    {% set helpText %}{% trans "Select the start date for this campaign" %}{% endset %}
                                    {{ forms.date("startDt", title, campaign.getStartDt(), helpText, "starttime-control", "required", "") }}

{% set title %}{% trans "End Date" %}{% endset %}
                                    {% set helpText %}{% trans "Select the end date for this campaign" %}{% endset %}
                                    {{ forms.date("endDt", title, campaign.getEndDt(), helpText, "endtime-control", "required", "") }}

{% set title %}{% trans "Display" %}{% endset %}
                                    {% set helpText %}{% trans "Please select one or more displays / groups for this event to be shown on." %}{% endset %}
                                    {% set attributes = [
                                        { name: "data-search-url", value:  url_for("displayGroup.search") },
                                        { name: "data-trans-groups", value:  "Groups"|trans },
                                        { name: "data-trans-display", value:  "Display"|trans },
                                        { name: "data-search-term", value: "displayGroup" },
                                        { name: "data-id-property", value: "displayGroupId" },
                                        { name: "data-text-property", value: "displayGroup" },
                                    ] %}
                                    {{ forms.dropdown("displayGroupIds[]", "dropdownmulti", title, displayGroupIds, displayGroups, "displayGroupId", "displayGroup", helpText, "", "", "", "", attributes) }}

{% set title %}{% trans "Target Type" %}{% endset %}
                                    {% set helpText %}{% trans "How would you like to set the target for this campaign?" %}{% endset %}
                                    {% set options = [
                                        { id: "plays", name: "Plays"|trans },
                                        { id: "budget", name: "Budget"|trans },
                                        { id: "impressions", name: "Impressions"|trans },
                                    ] %}
                                    {{ forms.dropdown("targetType", "single", title, campaign.targetType, options, "id", "name", helpText, "campaign-type-ad") }}

{% set title %}{% trans "Target" %}{% endset %}
                                    {% set helpText %}{% trans "What is the target number for this Campaign over its entire playtime" %}{% endset %}
                                    {{ forms.number("target", title, campaign.target, helpText) }}

{% if currentUser.featureEnabled("tag.tagging") %}
                                        {% set title %}{% trans "Tags" %}{% endset %}
                                        {% set helpText %}{% trans "Tags for this Campaign - Comma separated string of Tags or Tag|Value format. If you choose a Tag that has associated values, they will be shown for selection below." %}{% endset %}
                                        {{ forms.inputWithTags("tags", title, campaign.tags, helpText, 'tags-with-value') }}

{% set title %}{% trans "Tag value" %}{% endset %}
                                        {{ forms.dropdown("tagValue", "single", title, "", options, "key", "value") }}

<div id="tagValueContainer">
                                            {% set title %}{% trans "Tag value" %}{% endset %}
                                            {% set helpText %}{% trans "Please provide the value for this Tag and confirm by pressing enter on your keyboard." %}{% endset %}
                                            {{ forms.input("tagValueInput", title, "", helpText) }}
                                        </div>

<div id="tagValueRequired" class="alert alert-info">
                                            <p>{% trans "This tag requires a set value, please select one from the Tag value dropdown or provide Tag value in the dedicated field." %}</p>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="tab-pane" id="tab-refs">
                                    {{ forms.message("Add reference fields if needed"|trans) }}

{% set title %}{% trans "Reference 1" %}{% endset %}
                                    {{ forms.input("ref1", title, campaign.ref1, null) }}

{% set title %}{% trans "Reference 2" %}{% endset %}
                                    {{ forms.input("ref2", title, campaign.ref2, null) }}

{% set title %}{% trans "Reference 3" %}{% endset %}
                                    {{ forms.input("ref3", title, campaign.ref3, null) }}

{% set title %}{% trans "Reference 4" %}{% endset %}
                                    {{ forms.input("ref4", title, campaign.ref4, null) }}

{% set title %}{% trans "Reference 5" %}{% endset %}
                                    {{ forms.input("ref5", title, campaign.ref5, null) }}
                                </div>
                            </div>

{{ forms.button("Save"|trans, "submit", null, null, null, "btn-success") }}
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-md-12">
                                {# Layouts #}
                                {% set attributes = [
                                    { name: "data-search-url", value:  url_for("layout.search") },
                                    { name: "data-search-term", value: "layout" },
                                    { name: "data-search-term-tags", value: "tags" },
                                    { name: "data-trans-layout", value: "Layout"|trans },
                                    { name: "data-id-property", value: "layoutId" },
                                    { name: "data-text-property", value: "layout" },
                                    { name: "data-placeholder--id", value: null },
                                    { name: "data-placeholder--value", value: "Add a layout"|trans },
                                ] %}

{% set title %}{% trans "Add Layout" %}{% endset %}
                                {% set helpText %}{% trans "Please select a Layout to add to this Campaign" %}{% endset %}
                                {{ forms.dropdown("layoutId", "single", title, event.campaignId, null, "campaignId", "campaign", helpText, "layout-control", "", "", "", attributes) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                    <table id="table-campaign-builder-layout-assignments"
                                           data-search-url="{{ url_for("campaign.search") }}?campaignId={{ campaign.campaignId }}&embed=layouts"
                                           data-assignment-delete-url="{{ url_for("campaign.layout.remove.form", {id: campaign.campaignId}) }}"
                                           class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "Name" %}</th>
                                        <th>{% trans "Duration" %}</th>
                                        <th>{% trans "Day Parts" %}</th>
                                        <th>{% trans "Days of the week" %}</th>
                                        <th>{% trans "Geofence" %}</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>

</tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Time - {{ stats.complete }}%</h5>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 aria-valuenow="{{ stats.complete }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: {{ stats.complete }}%"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Target - {{ stats.target }}%</h5>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 aria-valuenow="{{ stats.target }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: {{ stats.target }}%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr>
                                                    <td>{{ "Plays"|trans }}</td>
                                                    <td>{{ campaign.plays }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{{ "Spend"|trans }}</td>
                                                    <td>{{ campaign.spend }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{{ "Impressions"|trans }}</td>
                                                    <td>{{ campaign.impressions }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    {{ "Stats need to be enabled on the Displays and Layouts selected on this campaign"|trans }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script src="{{ theme.rootUri() }}dist/campaignBuilder.bundle.min.js?v={{ version }}&rev={{revision}}"></script>
    <script type="text/javascript">
        {# Custom translations #}
        {% autoescape "js" %}
            {# Insert custom translations here #}
            const campaignBuilderTrans = {
              saveButton: '{{ "Save"|trans }}',
              cancelButton: '{{ "Cancel"|trans }}',
              addLayoutFormTitle: '{{ "Add Layout"|trans }}',
              editLayoutFormTitle: '{{ "Edit Layout"|trans }}',
              assignmentEditButton: '{{ "Edit"|trans }}',
              assignmentDeleteButton: '{{ "Delete"|trans }}',
              daysOfWeek: {
                1: "{{ "Monday"|trans }}",
                2: "{{ "Tuesday"|trans }}",
                3: "{{ "Wednesday"|trans }}",
                4: "{{ "Thursday"|trans }}",
                5: "{{ "Friday"|trans }}",
                6: "{{ "Saturday"|trans }}",
                7: "{{ "Sunday"|trans }}",
              },
            };
        {% endautoescape %}
    </script>
{% endblock %}

{% block javaScriptTemplates %}
    {{ parent() }}
    <script type="text/x-handlebars-template" id="campaign-builder-layout-add-form-template">
        <form action="{{ url_for("campaign.assign.layout", {id: campaign.campaignId}) }}"
            data-assignment-remove-url="{{ url_for("campaign.remove.layout", {id: campaign.campaignId}) }}?layoutId={% verbatim %}{{layoutId}}{% endverbatim %}"
            data-existing-display-order="{% verbatim %}{{displayOrder}}{% endverbatim %}"
            method="POST"
            class="form-horizontal XiboForm">
            <input type="hidden" name="layoutId" value="{% verbatim %}{{layoutId}}{% endverbatim %}">

{% set title %}{% trans "Days of the week" %}{% endset %}
                {% set helpText %}{% trans "Which days of the week should the layout be active?" %}{% endset %}
                {% set options = [
                    { id: 1, name: "Monday"|trans },
                    { id: 2, name: "Tuesday"|trans },
                    { id: 3, name: "Wednesday"|trans },
                    { id: 4, name: "Thursday"|trans },
                    { id: 5, name: "Friday"|trans },
                    { id: 6, name: "Saturday"|trans },
                    { id: 7, name: "Sunday"|trans },
                ] %}
            {{ forms.dropdown("daysOfWeek[]", "dropdownmulti", title, null, options, "id", "name", helpText) }}

{# Day Part #}
            {% set attributes = [
                { name: "data-search-url", value:  url_for("daypart.search") ~ "?isAlways=0&isCustom=0" },
                { name: "data-search-term", value: "name" },
                { name: "data-id-property", value: "dayPartId" },
                { name: "data-text-property", value: "name" },
                { name: "data-initial-key", value: "dayPartId" },
                { name: "data-placeholder--id", value: null },
                { name: "data-placeholder--value", value: "" },
                { name: "data-allow-clear", value: "true" },
            ] %}
            {% set title %}{% trans "Dayparting" %}{% endset %}
            {% set helpText %}{% trans "Should this layout only be shown on selected day parts?" %}{% endset %}
            {{ forms.dropdown("dayPartId", "single", title, null, null, "dayPartId", "name", helpText, "", "", "", "", attributes) }}

{{ forms.hidden("geoFence", "{{geoFence}}") }}

{{ forms.message("Draw areas on the map where you want this layout to play."|trans) }}

<div id="campaign-builder-map"
                 data-map-tile-server="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 data-map-lat="{{ settings.DEFAULT_LAT }}"
                 data-map-long="{{ settings.DEFAULT_LONG }}"
                 data-map-zoom="13"
                 style="height: 500px; width: 100%"></div>
        </form>
    </script>
{% endblock %}