294 lines
17 KiB
Twig
294 lines
17 KiB
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: "imp", 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.getTagString(), helpText, 'tags-with-value') }}
|
|
|
|
<p id="loadingValues" style="margin-left: 17%"></p>
|
|
|
|
{% 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 %}
|
|
{# Initialise JS variables and translations #}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}" defer>
|
|
{# JS variables #}
|
|
var campaignBuilderDefaultVars = {
|
|
campaignAssignLayoutURL: "{{ url_for('campaign.assign.layout', {id: campaign.campaignId}) }}",
|
|
campaignRemoveLayoutURL: "{{ url_for('campaign.remove.layout', {id: campaign.campaignId}) }}",
|
|
defaultLat: "{{ settings.DEFAULT_LAT }}",
|
|
defaultLong: "{{ settings.DEFAULT_LONG }}",
|
|
dayPartSearchURL: "{{ url_for('daypart.search')}}" + "?isAlways=0&isCustom=0",
|
|
};
|
|
|
|
{# Custom translations #}
|
|
{% autoescape "js" %}
|
|
{# Insert custom translations here #}
|
|
var campaignBuilderTrans = {
|
|
saveButton: '{{ "Save"|trans }}',
|
|
cancelButton: '{{ "Cancel"|trans }}',
|
|
addLayoutFormTitle: '{{ "Add Layout"|trans }}',
|
|
editLayoutFormTitle: '{{ "Edit Layout"|trans }}',
|
|
assignmentEditButton: '{{ "Edit"|trans }}',
|
|
assignmentDeleteButton: '{{ "Delete"|trans }}',
|
|
daysOfWeek: {
|
|
monday: '{{ "Monday"|trans }}',
|
|
tuesday: '{{ "Tuesday"|trans }}',
|
|
wednesday: '{{ "Wednesday"|trans }}',
|
|
thursday: '{{ "Thursday"|trans }}',
|
|
friday: '{{ "Friday"|trans }}',
|
|
saturday: '{{ "Saturday"|trans }}',
|
|
sunday: '{{ "Sunday"|trans }}',
|
|
},
|
|
daysOfWeekDropdownTitle: '{{ "Days of the week"|trans }}',
|
|
daysOfWeekDropdownHelpText: '{{ "Which days of the week should the layout be active?"|trans }}',
|
|
dayPartDropdownTitle: '{{ "Dayparting"|trans }}',
|
|
dayPartDropdownHelpText:'{{ "Should this layout only be shown on selected day parts?"|trans }}',
|
|
builderMessage: '{{ "Draw areas on the map where you want this layout to play"|trans }}',
|
|
};
|
|
{% endautoescape %}
|
|
</script>
|
|
|
|
<script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/campaignBuilder.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
{% endblock %} |