summaryrefslogtreecommitdiff
path: root/extensions/mistral/templates/mistral/create.html
blob: 430d208ac5ebad89e1d21de9cfd66ebaaa323ad9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
{% 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/js/libs/js-yaml/dist/js-yaml.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}merlin/js/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 %}
  {% block merlin-css %}{% endblock %}
{% endblock %}

{% block main %}
<h3>Create Workbook</h3>
  <div id="create-workbook" class="fluid-container" ng-cloak ng-controller="workbookCtrl"
       ng-init="init({{ id|default:'undefined' }}, '{{ yaml }}', '{{ commit_url }}', '{{ discard_url }}')">
    <div class="well">
      <div class="two-panels">
        <div class="left-panel">
          <div class="pull-left">
            <h4><strong>{$ workbook.get('name') $}</strong></h4>
          </div>
          <div class="pull-right">
            <div class="table-actions clearfix">
              <button ng-click="addAction()" class="btn btn-default btn-sm"><span class="fa fa-plus">Add Action</span></button>
              <button ng-click="addWorkflow()" class="btn btn-default btn-sm"><span class="fa fa-plus">Add Workflow</span></button>
            </div>
          </div>
        </div>
        <div class="right-panel">
          <div class="btn-group btn-toggle pull-right">
            <button ng-click="isGraphMode = true" class="btn btn-sm"
                ng-class="isGraphMode ? 'active btn-primary' : 'btn-default'">Graph</button>
            <button ng-click="isGraphMode = false" class="btn btn-sm"
                ng-class="!isGraphMode ? 'active btn-primary' : 'btn-default'">YAML</button>
          </div>
        </div>
      </div>
      <!-- Data panel start -->
      <div class="two-panels">
        <div class="left-panel">
          <panel ng-repeat="panel in workbook | extractPanels track by panel.id"
                 content="panel">
            <div ng-repeat="row in panel | extractRows track by row.id">
              <div ng-class="{'two-columns': row.index !== undefined }">
                <div ng-repeat="item in row | extractItems track by item.id"
                     ng-class="{'right-column': item.isAtomic() && $odd, 'left-column': item.isAtomic() && $even}">
                  <typed-field value="item" type="{$ item.getType() $}"></typed-field>
                  <div class="clearfix" ng-if="$odd"></div>
                </div>
              </div>
            </div>
          </panel>
        </div>
        <!-- YAML Panel -->
        <div class="right-panel">
          <div class="panel panel-default">
            <div class="panel-body" ng-show="!isGraphMode">
              <pre>{$ workbook.toYAML() $}</pre>
            </div>
            <div class="panel-body" ng-show="isGraphMode">
              Here will be a fancy Graph View as soon as we implement it!
            </div>
          </div>
        </div>
      </div>
      <!-- page footer -->
      <div class="two-panels">
        <div class="full-width">
          <div class="pull-right">
            <button ng-click="discardWorkbook()" class="btn btn-default cancel">Cancel</button>
            <button ng-click="commitWorkbook()" class="btn btn-primary">
              {$ workbookID ? 'Modify' : 'Create' $}
              </button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}