芝麻web文件管理V1.00

编辑当前文件:/home/mgatv524/public_html/mctv/modules/chart-form-edit.twig

{#
/**
 * Xibo - Digital Signage - http://www.xibo.org.uk
 * Copyright (C) 2018 Lukas Zurschmiede
 * Copyright (C) 2018 Xibo Signage Ltd
 *
 * 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 "form-base.twig" %}
{% import "forms.twig" as forms %}

{% block formTitle %}
    {% trans "Edit Chart" %}
{% endblock %}

{% block extra %}{{ module.getExtra()|json_encode|raw }}{% endblock %}

{% block formHtml %}
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" href="#general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    {% trans "Configuration" %}<span class="caret"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#dataTab" role="tab" data-toggle="tab"><span>{% trans "Data" %}</span></a>
                    <a class="dropdown-item" href="#labelsTab" role="tab" data-toggle="tab"><span>{% trans "Labels" %}</span></a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    {% trans "Appearance" %}<span class="caret"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#styleTab" role="tab" data-toggle="tab"><span>{% trans "Style" %}</span></a>
                    <a class="dropdown-item" href="#colourPalletTab" role="tab" data-toggle="tab"><span>{% trans "Colour Palette" %}</span></a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link" href="#orderCriteria" role="tab" data-toggle="tab"><span>{% trans "Order" %}</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#filterCriteria" role="tab" data-toggle="tab"><span>{% trans "Filter" %}</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#cacheTab" role="tab" data-toggle="tab"><span>{% trans "Caching" %}</span></a></li>
        </ul>

<div class="col-md-12">
            <form id="graphEditFormStep2" class="XiboForm form-horizontal" data-form-step="2" method="put" action="{{ url_for("module.widget.edit", {id: module.widget.widgetId}) }}">
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        {% set helpText %}{% trans "An optional name for this widget" %}{% endset %}
                        {% set title %}{% trans "Name" %}{% endset %}
                        {{ forms.input("name", title, module.getOption("name"), helpText) }}

{% set title %}{% trans "Set a duration?" %}{% endset %}
                        {% set helpText %}{% trans "Select to provide a specific duration for this Widget" %}{% endset %}
                        {{ forms.checkbox("useDuration", title, module.getUseDuration(), helpText) }}

{% set title %}{% trans "Duration" %}{% endset %}
                        {% set helpText %}{% trans "The duration in seconds this should be displayed" %}{% endset %}
                        {{ forms.number("duration", title, module.getDuration(), helpText, "duration-fields", "required") }}

{% set title %}{% trans "Enable Stats Collection?" %}{% endset %}
                        {% set helpText %}{% trans "Enable the collection of Proof of Play statistics for this Widget. Ensure that ‘Enable Stats Collection’ is set to ‘On’ in the Display Settings." %}{% endset %}

{% set offOption %}{% trans "Off" %}{% endset %}
                        {% set onOption %}{% trans "On" %}{% endset %}
                        {% set inheritOption %}{% trans "Inherit" %}{% endset %}
                        {% set options = [
                            { id: "Off", value: offOption },
                            { id: "On", value: onOption },
                            { id: "Inherit", value: inheritOption }
                        ] %}
                        {{ forms.dropdown("enableStat", "single", title, module.getOption("enableStat", theme.getSetting("WIDGET_STATS_ENABLED_DEFAULT")), options, "id", "value", helpText) }}
                    </div>

<div class="tab-pane" id="dataTab">
                        <div class="form-content-title">
                            <h4>{% trans "Data" %}</h4>
                        </div>

{% set bar_chart %}{% trans "Bar" %}{% endset %}
                        {% set line_chart %}{% trans "Line" %}{% endset %}
                        {% set horizontal_bar_chart %}{% trans "Horizontal Bar" %}{% endset %}
                        {% set pie_chart %}{% trans "Pie" %}{% endset %}
                        {% set donut_chart %}{% trans "Donut" %}{% endset %}
                        {% set radar_chart %}{% trans "Radar" %}{% endset %}
                        {% set options = [
                            { typeid: "line", type: line_chart },
                            { typeid: "bar", type: bar_chart },
                            { typeid: "pie", type: pie_chart },
                            { typeid: "doughnut", type: donut_chart },
                            { typeid: "horizontalBar", type: horizontal_bar_chart },
                            { typeid: "radar", type: radar_chart },
                        ] %}

{% set title %}{% trans "Chart Type" %}{% endset %}
                        {% set helpText %}{% trans "Select which type of chart to Display." %}{% endset %}
                        {{ forms.dropdown("graphType", "single", title, module.getOption("graphType"), options, "typeid", "type", helpText) }}
                        
                        {% set message %}Configure your Chart data using the below selectors. Use the `+` icon to add an X and Y-Axis and to include a Series Identifier (not available for Pie/Donut Chart Types) to breakdown values.{% endset %}
                        {{ forms.message(message) }}

{% set title %}{% trans "Always start the Y-Axis at 0?" %}{% endset %}
                        {{ forms.checkbox("startYAtZero", title, module.getOption("startYAtZero")) }}
                    </div>

<div class="tab-pane" id="labelsTab">
                        <div class="form-content-title">
                            <h4>{% trans "Labels" %}</h4>
                        </div>

{% set title %}{% trans "Title" %}{% endset %}
                        {% set helpText %}{% trans "Enter a title to show on the Chart." %}{% endset %}
                        {{ forms.input("title", title, module.getOption("title"), helpText) }}

{% set title %}{% trans "X-Axis Label" %}{% endset %}
                        {% set helpText %}{% trans "Enter a label to show on the Charts x-axis." %}{% endset %}
                        {{ forms.input("x-axis-label", title, module.getOption("x-axis-label"), helpText) }}

{% set title %}{% trans "Y-Axis Label" %}{% endset %}
                        {% set helpText %}{% trans "Enter a label to show on the Charts y-axis." %}{% endset %}
                        {{ forms.input("y-axis-label", title, module.getOption("y-axis-label"), helpText) }}
                        
                        {% set positionTop %}{% trans "Top" %}{% endset %}
                        {% set positionLeft %}{% trans "Left" %}{% endset %}
                        {% set positionRight %}{% trans "Right" %}{% endset %}
                        {% set positionBottom %}{% trans "Bottom" %}{% endset %}
                        {% set options = [
                            { typeid: "top", type: positionTop },
                            { typeid: "left", type: positionLeft },
                            { typeid: "right", type: positionRight },
                            { typeid: "bottom", type: positionBottom },
                        ] %}
                        
                        {% set title %}{% trans "Show legend?" %}{% endset %}
                        {{ forms.checkbox("showLegend", title, module.getOption("showLegend")) }}

{% set title %}{% trans "Legend Position" %}{% endset %}
                        {% set helpText %}{% trans "Where should the legend be positioned." %}{% endset %}
                        {{ forms.dropdown("legendPosition", "single", title, module.getOption("legendPosition"), options, "typeid", "type", helpText, "legend-fields") }}
                    </div>

<div class="tab-pane" id="styleTab">
                        <div class="form-content-title">
                            <h4>{% trans "Style" %}</h4>
                        </div>

{% set title %}{% trans "Background Color" %}{% endset %}
                        {% set helpText %}{% trans "Select an optional background colour to put behind the chart, leaving this blank will make the graph transparent." %}{% endset %}
                        {{ forms.input("backgroundColor", title, module.getOption("backgroundColor"), helpText, "background-color-group") }}

{% set title %}{% trans "Font Color" %}{% endset %}
                        {% set helpText %}{% trans "Choose a font colour that will work well with your Layout's background - or the Region below this one." %}{% endset %}
                        {{ forms.input("fontColor", title, module.getOption("fontColor"), helpText) }}

{% set title %}{% trans "Font Size" %}{% endset %}
                        {% set helpText %}{% trans "Set the font size for all text that will show on the chart." %}{% endset %}
                        {{ forms.number("fontSize", title, module.getOption("fontSize"), helpText) }}
                    </div>

<div class="form-content-title">
                            <h4>{% trans "Colour Palette" %}</h4>
                        </div>

{% set message %}{% trans "Add a Colour Palette to use when drawing a charts data series. If no or too few colours are specified the default colours will be used." %}{% endset %}
                        {{ forms.message(message) }}

<div class="tab-pane" id="orderCriteria">
                        {% set message %}{% trans "The DataSet results can be ordered by any column and set below. New fields can be added by selecting the plus icon at the end of the current row. Should a more complicated order be required the advanced checkbox can be selected to provide custom SQL syntax." %}{% endset %}
                        {{ forms.message(message) }}

{% set title %}{% trans "Use advanced order clause?" %}{% endset %}
                        {% set helpText %}{% trans "Provide a custom clause instead of using the clause builder above." %}{% endset %}
                        {{ forms.checkbox("useOrderingClause", title, module.getOption("useOrderingClause", 0), helpText) }}

{% set title %}{% trans "Order" %}{% endset %}
                        {% set helpText %}{% trans "Please enter a SQL clause for how this dataset should be ordered" %}{% endset %}
                        {{ forms.input("ordering", title, module.getOption("ordering"), helpText, "order-clause-field") }}
                    </div>

<div class="tab-pane" id="filterCriteria">
                        {% set message %}{% trans "The DataSet results can be filtered by any column and set below. New fields can be added by selecting the plus icon at the end of the current row. Should a more complicated filter be required the advanced checkbox can be selected to provide custom SQL syntax." %}{% endset %}
                        {{ forms.message(message) }}

{% set title %}{% trans "Use advanced filter clause?" %}{% endset %}
                        {% set helpText %}{% trans "Provide a custom clause instead of using the clause builder above." %}{% endset %}
                        {{ forms.checkbox("useFilteringClause", title, module.getOption("useFilteringClause", 0), helpText) }}

{% set title %}{% trans "Filter" %}{% endset %}
                        {% set helpText %}{% trans "Please enter a SQL clause to filter this DataSet." %}{% endset %}
                        {{ forms.input("filter", title, module.getOption("filter"), helpText, "filter-clause-field") }}
                    </div>

<div class="tab-pane" id="cacheTab">
                        {% set title %}{% trans "Update Interval (mins)" %}{% endset %}
                        {% set helpText %}{% trans "Please enter the update interval in minutes. This should be kept as high as possible. For example, if the data will only change once per day this could be set to 60." %}{% endset %}
                        {{ forms.number("updateInterval", title, module.getOption("updateInterval", 5), helpText, "", "required") }}
                    </div>

</div>

<input type="hidden" name="step" value="2" />
            </form>
        </div>
    </div>
{% endblock %}