flask_jsondash/templates/pages/chart_detail.html
{% extends "layouts/charts_base.html" %}
{# Generate all the charts for a row (grid mode only) #}
{%- macro chart_row(rownum, modules=None) %}
<div class="row grid-row {{ 'grid-row-template' if not modules else '' }}">
<p class="grid-row-label-wrapper text-center">
Row <span class="rownum">{{ rownum }}</span>
<a href="#chart-options" class="grid-row-label btn btn-success btn-xs" data-toggle="modal" data-row="{{ rownum }}">
<span class="fa fa-plus"></span> Add a widget</span>
</a>
<a href="#" class="btn btn-xs btn-danger delete-row"><span class="fa fa-times-circle"></span> Delete row</a>
</p>
{% if modules %}
{% for module in modules %}
{{ chart(module=module) }}
{% endfor %}
{% endif %}
</div>
{% endmacro -%}
{# Macro to create a new chart template or existing chart from a config #}
{%- macro chart(module=None) %}
{% if module %}
{% set dims = module|get_dims %}
{% set fixedcol = view.layout == 'grid' %}
{% if fixedcol %}
{% set colcount = dims.width|string|replace('col-', '') %}
<div class="col-sm-12 col-xs-12 col-md-{{ colcount }} col-lg-{{ colcount }}">
{% endif %}
<div class="hidden item widget"
data-guid="{{ module.guid }}"
data-refresh="{{ module.refresh }}"
data-refresh-interval="{{ module.refreshInterval }}"
style="width:{{ '100%' if fixedcol else '%spx'|format(dims.width) }};height: {{ dims.height }}px;">
{% endif %}
<div class="error-overlay hidden">
<div class="alert alert-danger"></div>
</div>
<div class="loader-overlay"></div>
<span class="widget-loader fa fa-circle-o-notch fa-spin"></span>
<p class="widget-title">
<span class="widget-title-text">{{ module.name }}</span>
<span class="pull-right">
{% if module.inputs %}
<span rel="tooltip"
data-target='[data-guid="{{ module.guid }}"] .chart-inputs'
data-toggle="collapse"
title="Form options for this chart"
class="icon charts-input-icon fa fa-plus-square"></span>
{% endif %}
{% if can_edit and not demo_mode and not embeddable %}
<span rel="tooltip" title="Edit panel configuration" data-target="#chart-options" data-toggle="modal" class="icon fa fa-cog widget-edit"></span>
<span rel="tooltip" title="Delete panel" data-toggle="modal" class="text-danger icon fa fa-times-circle widget-delete"></span>
<span rel="tooltip" title="Drag to move this panel around" class="dragger icon fa fa-arrows"></span>
{% endif %}
<span rel="tooltip" title="Refresh the panels url endpoint (will reset any options)" class="icon widget-refresh fa fa-refresh"></span>
</span>
</p>
<div class="chart-container"></div>
{% if module.inputs and can_edit %}
<div class="chart-inputs collapse">
<form action="{{ module.dataSoure }}" class="form-horizontal form-group-sm">
<fieldset>
<legend>Query override options</legend>
{% for input in module.inputs.options %}
<label>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
<span class="label-text">{{ input.label }}</span>
{% if input.help_text %}
<br><small class="help-text">{{ input.help_text }}</small>
{% endif %}
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
{% if input.type == 'select' and input.options %}
<select
class="{{ input.input_classes|join(' ') or '' }}"
name="{{ input.name }}">
{% for val, name in input.options %}
<option value="{{ val }}">{{ name }}</option>
{% endfor %}
</select>
{% elif input.type == 'checkbox' %}
<input class="{{ input.input_classes|join(' ') or '' }}"
type="checkbox"
name="{{ input.name }}"
{{ 'checked="checked"' if input.default and input.default != "false" else '' }}>
{% elif input.type == 'radio' and input.options %}
{% for val, name in input.options %}
<div class="input-radio">
<input class="{{ input.input_classes|join(' ') or '' }}"
type="radio"
name="{{ input.name }}"
value="{{ val }}"
{% if val == input.default %}checked{% endif %}> {{ val }}
</div>
{% endfor %}
{% else %}
<input type="{{ input.type or 'text' }}"
class="{{ input.input_classes|join(' ') or '' }}"
name="{{ input.name }}"
value="{{ input.value }}"
placeholder="{{ input.placeholder }}"
{% if pattern %}pattern="{{ input.validator_regex }}"{% endif %}
>
{% endif %}
</div>
</div>
</label>
{% endfor %}
</fieldset>
<button class="{{ module.inputs.btn_classes|join(' ') or '' }}">
{{ module.inputs.submit_text or 'Submit' }}
</button>
</form>
</div>
{% endif %}
{% if module %}
</div><!-- end item.widget -->
{% if fixedcol %}
</div>
{% endif %}
{% endif %}
{% endmacro -%}
{% block chart_body %}
<div class="row">
<div class="col-md-12">
{% if not embeddable %}
<h2 class="chart-header lead text-center">
{% if not demo_mode %}
<small>
<a href="{{ url_for('jsondash.dashboard') }}" class="btn-xs btn btn-default pull-left">
<span class="fa fa-angle-left"></span> Back
</a>
</small>
{% endif %}
<span class="dashboard-title">{{ view.name }}</span>
{% if can_edit and not demo_mode %}
<small>{% include "partials/dashboard-options.html" %}</small>
{% endif %}
</h2>
{% endif %}
{% if can_edit and not demo_mode and not embeddable %}
<div class="{{ 'collapse' if view.modules|length else '' }} edit-mode-component" id="edit-view-container">
{% if not view.modules|length %}
<div class="alert alert-warning text-center">
<p>
It looks like this dashboard has no modules - add some!
</p>
</div>
{% endif %}
<div class="text-center">
{% include "partials/dashboard-global-form.html" %}
</div>
</div>
{% include "partials/dashboard-json-form.html" %}
{% endif %}
<div class="layout" data-layout="{{ view.layout or 'freeform' }}" id="view-builder">
<div id="container">
{% if view.layout == 'grid' %}
<div class="row collapse edit-mode-component add-new-row-container" data-row-placement="top">
<br>
<div class="col-md-12">
<a href="#" class="btn btn-default btn-block lead well text-center">
<span class="fa fa-plus"></span> Add new row above
</a>
</div>
</div>
{% for row in modules %}
{{ chart_row(loop.index, modules=row) }}
{% endfor %}
<div class="row collapse edit-mode-component add-new-row-container" data-row-placement="bottom">
<br>
<div class="col-md-12">
<a href="#" class="btn btn-default btn-block lead well text-center">
<span class="fa fa-plus"></span> Add new row below
</a>
</div>
</div>
{% else %}
{% for module in modules %}
{{ chart(module=module) }}
{% endfor %}
{% endif %}
</div>
</div>
{# Used as a template to clone from in js only #}
<div class="hidden" id="chart-template">{{ chart() }}</div>
<div class="hidden" id="row-template">{{ chart_row(0) }}</div>
</div>
</div>
{% include "partials/dashboard-edit-modal.html" %}
{% endblock %}