summaryrefslogtreecommitdiffstats
path: root/src/templates/resource/steps/pod_definition.html
blob: 5826ccb9af0ad53270fdfa853d28b2ff74cce3e2 (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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
{% extends "workflow/viewport-element.html" %}
{% block extrahead %}
<link href="/static/css/graph_common.css" rel="stylesheet">
<title>Pod Definition Prototype</title>

<!-- Loads and initializes the library -->
<script>
    var mxLoadStylesheets = false;
</script>
<script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
<script type="text/javascript" src="/static/js/dashboard.js" ></script>
{% endblock extrahead %}

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
{% block content %}
    <div id="graphParent"
         style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
        <div id="graphContainer"
            style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
        </div>


        <!-- Creates a container for the sidebar -->
        <div id="toolbarContainer"
            style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
        </div>

        <!-- Creates a container for the outline -->
        <div id="outlineContainer"
            style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
        </div>
    </div>

    <style>
        p {
            word-break: normal;
            white-space: normal;
        }
        #network_select {
                background: inherit;
                padding: 0px;
                padding-top: 0px;
        }
        #toolbarContainer {
                background: #DDDDDD;
                height: 36px;
        }
        #toolbar_extension {
                height: 36px;
                background: #DDDDDD;
        }
        #btn_add_network {
                width: 100%;
        }
        #vlan_notice {
                margin: 20px;
        }
        #network_list li {
                border-radius: 2px;
                margin: 5px;
                padding: 5px;
                vertical-align: middle;
                background: #DDDDDD;
        }
        #network_list {
                list-style-type: none;
                padding: 0;
        }
        .colorblob {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
        }
        .network_innertext {
                display: inline-block;
                padding-left: 10px;
                vertical-align: middle;
                padding-bottom: 0px;
                margin-bottom: 2px;
        }
        .mxWindow {
                background: #FFFFFF;
        }
    </style>

    <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;">
        <div id="toolbar_extension">
        <button id="btn_add_network" type="button" class="btn btn-primary" onclick="network_step.newNetworkWindow();">Add Network</button>
        </div>
        <ul id="network_list">
        </ul>
        <button type="button" style="display: none" onclick="network_step.submitForm();">Submit</button>
    </div>
    <form id="xml_form" method="post" action="/wf/workflow/">
        {% csrf_token %}
        <input type="hidden" id="hidden_xml_input" name="xml" />
    </form>

<script>
    //gather context data
    let debug = false;
    {% if debug %}
    debug = true;
    {% endif %}

    let xml = '';
    {% if xml %}
    xml = '{{xml|safe}}';
    {% endif %}

    let hosts = [];
    {% for host in hosts %}
    hosts.push({{host|safe}});
    {% endfor %}
    
    let added_hosts = [];
    {% for host in added_hosts %}
    added_hosts.push({{host|safe}});
    {% endfor %}

    let removed_host_ids = {{removed_hosts|safe}};

    network_step = new NetworkStep(
        debug,
        xml,
        hosts,
        added_hosts,
        removed_host_ids,
        document.getElementById('graphContainer'),
        document.getElementById('outlineContainer'),
        document.getElementById('toolbarContainer'),
        document.getElementById('sidebarContainer')
    );
</script>
{% endblock content %}
{% block onleave %}
network_step.submitForm();
{% endblock %}