heat-dashboard/heat_dashboard/content/template_generator/templates/template_generator/index.html

133 lines
7.1 KiB
HTML

{% extends 'base.html' %}
{% load i18n %}
{% block title %}{{ title }}{% endblock %}
{% block page_header %}
<div class="page-header" ng-cloak>
<h1>{% trans "Template Generator" %}</h1>
<p>{% trans "Please drag and drop resource icons into center canvas to define resource for template." %}</p>
</div>
{% endblock %}
{% block main %}
<div ng-show="loading" class="col-xs-12 load-block" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.LoadingController">
<md-icon md-svg-src="{$ basePath $}css/img/icons/spinner.svg" class="spinner"></md-icon>
</div>
<div ng-cloak>
<div class="row table_action">
<span flex></span>
<div class="col-sm-11" style="height:80px;">
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.AgentController" style="display:inline-block">
<md-input-container class="md-block" flex-gt-xs>
<label>{% trans "Template Version" %}</label>
<md-select ng-model="template_version" ng-change="update_template_version(template_version)">
<md-option ng-repeat="tmptversion in template_versions" ng-value="tmptversion.id">
{$ tmptversion.name $}
</md-option>
</md-select>
</md-input-container>
</div>
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.TempModalController" style="display:inline-block">
<md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Template Generator" %}</md-tooltip>
<md-button class="md-fab md-mini md-primary" ng-click="open()" aria-label="Template Generator">
<md-icon md-svg-src="{$ basePath $}css/img/icons/file-text-o.svg"></md-icon>
</md-button>
</div>
<div class="md-menu" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.DraftMenuController" style="display:inline-block">
<md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Manage Drafts" %}</md-tooltip>
<md-menu>
<md-button class="md-fab md-mini" ng-click="openMenu($mdMenu, $event)" aria-label="Manage Drafts">
<md-icon md-svg-src="{$ basePath $}css/img/icons/floppy-o.svg"></md-icon>
</md-button>
<md-menu-content width="4" ng-mouseleave="closeMenu()">
<md-menu-item>
<md-button ng-click="save_draft()">
{% trans "Save Draft" %}
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="load_draft()">
{% trans "Load Draft" %}
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button ng-click="import_draft()">
{% trans "Import Draft" %}
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="export_draft()">
{% trans "Export Draft" %}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.ClearCanvasController" style="display:inline-block">
<md-tooltip style="font-size:12px !important;" md-direction="top">{% trans "Clear Canvas" %}</md-tooltip>
<md-button ng-click="clear_canvas()" class="md-fab md-mini md-warn" aria-label="clear canvas">
<md-icon md-svg-src="{$ basePath $}css/img/icons/trash.svg"></md-icon>
</md-button>
</div>
<input id="draft-file" type="file" style="visibility:hidden" />
<input id="template-file" type="file" style="visibility:hidden" />
</div>
</div>
<div class="row">
<span flex></span>
<!-- Icon Drag sidebar -->
<div class="col-sm-10" ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.IconController" >
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="Icon Group Nav">
<md-nav-item md-nav-click="showIcon()" ng-repeat="(level, level_item) in project_types" name="{$ level $}">
{$ level $}
</md-nav-item>
</md-nav-bar>
<div class="navbar-content">
<div ng-repeat="(level, level_item) in project_types" >
<div ng-show="level == currentNavItem">
<div draggable ng-repeat="(reskey, resobj) in level_item" class="os-resource" draggable="true" id="{$ reskey $}" ng-if="admin || !resource_admin[reskey]">
<md-tooltip md-direction="top" style="font-size:12px !important;">{$ resobj.name $}</md-tooltip>
<md-icon style="height: 36px; width: 36px;" md-svg-src="{$ basePath $}js/resources/{$ reskey|lowercase $}/{$ reskey|lowercase $}.svg"></md-icon>
</div>
</div>
</div>
</div>
</div>
<!-- End Drag sidebar -->
</div>
<div class="row table_action">
<span flex></span>
<!-- Drop Canvas -->
<div class="col-sm-11" style="margin-bottom: 10%; min-height:400px; height: 500px">
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.VisController" id="canvas_area" droppable>
<vis-network component="hotnetwork" data="data" options="options" events="events">
</vis-network>
</div>
</div>
</div>
<!-- End Drop Canvas -->
<!-- Node Modal -->
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.FormModalController" class="md-padding" id="popupContainer" ng-cloak>
</div>
<!-- End Node Modal -->
<!-- Edge Modal -->
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.EdgeFormModalController" class="md-padding" id="popupEdgeContainer" ng-cloak>
</div>
<!-- End Edge Modal -->
<!-- Load Draft Modal -->
<div ng-controller="horizon.dashboard.project.heat_dashboard.template_generator.DraftModalController" class="md-padding" ng-cloak>
</div>
<!-- End Load Draft Modal -->
</div>
{% endblock %}