116 lines
5.3 KiB
HTML
116 lines
5.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load url from future %}
|
|
{% load static %}
|
|
{% load compress %}
|
|
{% block title %}{% trans "Create Workbook" %}{% endblock %}
|
|
|
|
{% block page_header %}
|
|
{% include "horizon/common/_page_header.html" with title=_("Workbooks") %}
|
|
{% endblock page_header %}
|
|
|
|
{% block js %}
|
|
{% include "horizon/_scripts.html" %}
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/custom-libs/barricade.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/libs/js-yaml/dist/js-yaml.min.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/libs/underscore/underscore-min.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.init.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.templates.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.filters.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.directives.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.field.models.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.panel.models.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/merlin.utils.js"></script>
|
|
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.init.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.controllers.js"></script>
|
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/mistral.workbook.models.js"></script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
{% include "_stylesheets.html" %}
|
|
{% compress css %}
|
|
<link href='{{ STATIC_URL }}merlin/scss/merlin.scss' type='text/scss' media='screen' rel='stylesheet' />
|
|
{% endcompress %}
|
|
<link href='{{ STATIC_URL }}merlin/libs/flexboxgrid/dist/flexboxgrid.css' type='text/css' media='screen' rel='stylesheet' />
|
|
{% block merlin-css %}{% endblock %}
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<h3>Create Workbook</h3>
|
|
<div id="create-workbook" ng-cloak ng-controller="WorkbookController as wb"
|
|
ng-init="wb.init({{ id|default:'undefined' }}, '{{ yaml }}', '{{ commit_url }}', '{{ discard_url }}')">
|
|
<div class="well">
|
|
<div class="row">
|
|
<div class="col-xs row">
|
|
<div class="col-xs start-xs">
|
|
<h4><strong>{$ wb.workbook.get('name') $}</strong></h4>
|
|
</div>
|
|
<div class="col-xs end-xs">
|
|
<div class="table-actions">
|
|
<button ng-click="wb.addAction()" class="btn btn-default btn-sm">
|
|
<span class="fa fa-plus">Add Action</span></button>
|
|
<button ng-click="wb.addWorkflow()" class="btn btn-default btn-sm">
|
|
<span class="fa fa-plus">Add Workflow</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs end-xs">
|
|
<div class="btn-group btn-toggle">
|
|
<button ng-click="wb.isGraphMode = true" class="btn btn-sm"
|
|
ng-class="wb.isGraphMode ? 'active btn-primary' : 'btn-default'">Graph</button>
|
|
<button ng-click="wb.isGraphMode = false" class="btn btn-sm"
|
|
ng-class="!wb.isGraphMode ? 'active btn-primary' : 'btn-default'">YAML</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Data panel start -->
|
|
<div class="row">
|
|
<div class="col-xs">
|
|
<panel ng-repeat="panel in wb.workbook | extractPanels:wb.keyExtractor track by panel.id"
|
|
content="panel">
|
|
<div ng-repeat="row in panel | extractFields | chunks:2 track by $index">
|
|
<div ng-repeat="(label, field) in row track by field.uid()">
|
|
<div ng-if="field.isAtomic()" class="col-xs-6">
|
|
<labeled label="{$ label $}" for="{$ field.uid() $}">
|
|
<typed-field value="field" type="{$ field.getType() $}"></typed-field>
|
|
</labeled>
|
|
</div>
|
|
<div ng-if="!field.isAtomic()" class="col-xs-12">
|
|
<collapsible-group content="field" title="label"
|
|
additive="{$ field.isAdditive() $}" on-add="field.add()">
|
|
<div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
|
|
<typed-field value="field" type="{$ field.getType() $}"></typed-field>
|
|
</div>
|
|
</collapsible-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</panel>
|
|
</div>
|
|
<!-- YAML Panel -->
|
|
<div class="col-xs">
|
|
<div class="panel panel-default">
|
|
<div class="panel-body" ng-show="!wb.isGraphMode">
|
|
<pre>{$ wb.workbook.toYAML() $}</pre>
|
|
</div>
|
|
<div class="panel-body" ng-show="wb.isGraphMode">
|
|
Here will be a fancy Graph View as soon as we implement it!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- page footer -->
|
|
<div class="row">
|
|
<div class="col-xs end-xs">
|
|
<button ng-click="wb.discardWorkbook()" class="btn btn-default cancel">Cancel</button>
|
|
<button ng-click="wb.commitWorkbook()" class="btn btn-primary">
|
|
{$ wb.workbookID ? 'Modify' : 'Create' $}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|