src/templates/resource/steps/pod_definition.html

   1 {% extends "workflow/viewport-element.html" %}
   2 {% block extrahead %}
   3 <link href="/static/css/graph_common.css" rel="stylesheet">
   4 <title>Pod Definition Prototype</title>
   5
   6 <!-- Loads and initializes the library -->
   7 <script>
   8     var mxLoadStylesheets = false;
   9 </script>
  10 <script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
  11 <script type="text/javascript" src="/static/js/dashboard.js" ></script>
  12 {% endblock extrahead %}
  13
  14 <!-- Calls the main function after the page has loaded. Container is dynamically created. -->
  15 {% block content %}
  16     <div id="graphParent"
  17          style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
  18         <div id="graphContainer"
  19             style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
  20         </div>
  21
  22
  23         <!-- Creates a container for the sidebar -->
  24         <div id="toolbarContainer"
  25             style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
  26         </div>
  27
  28         <!-- Creates a container for the outline -->
  29         <div id="outlineContainer"
  30             style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
  31         </div>
  32     </div>
  33
  34     <style>
  35         p {
  36             word-break: normal;
  37             white-space: normal;
  38         }
  39         #network_select {
  40                 background: inherit;
  41                 padding: 0px;
  42                 padding-top: 0px;
  43         }
  44         #toolbarContainer {
  45                 background: #DDDDDD;
  46                 height: 36px;
  47         }
  48         #toolbar_extension {
  49                 height: 36px;
  50                 background: #DDDDDD;
  51         }
  52         #btn_add_network {
  53                 width: 100%;
  54         }
  55         #vlan_notice {
  56                 margin: 20px;
  57         }
  58         #network_list li {
  59                 border-radius: 2px;
  60                 margin: 5px;
  61                 padding: 5px;
  62                 vertical-align: middle;
  63                 background: #DDDDDD;
  64         }
  65         #network_list {
  66                 list-style-type: none;
  67                 padding: 0;
  68         }
  69         .colorblob {
  70                 width: 20px;
  71                 height: 20px;
  72                 border-radius: 50%;
  73                 display: inline-block;
  74                 vertical-align: middle;
  75         }
  76         .network_innertext {
  77                 display: inline-block;
  78                 padding-left: 10px;
  79                 vertical-align: middle;
  80                 padding-bottom: 0px;
  81                 margin-bottom: 2px;
  82         }
  83         .mxWindow {
  84                 background: #FFFFFF;
  85         }
  86     </style>
  87
  88     <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;">
  89         <div id="toolbar_extension">
  90         <button id="btn_add_network" type="button" class="btn btn-primary" onclick="network_step.newNetworkWindow();">Add Network</button>
  91         </div>
  92         <ul id="network_list">
  93         </ul>
  94         <button type="button" style="display: none" onclick="network_step.submitForm();">Submit</button>
  95     </div>
  96     <form id="xml_form" method="post" action="/wf/workflow/">
  97         {% csrf_token %}
  98         <input type="hidden" id="hidden_xml_input" name="xml" />
  99     </form>
 100
 101 <script>
 102     //gather context data
 103     let debug = false;
 104     {% if debug %}
 105     debug = true;
 106     {% endif %}
 107
 108     let xml = '';
 109     {% if xml %}
 110     xml = '{{xml|safe}}';
 111     {% endif %}
 112
 113     let hosts = [];
 114     {% for host in hosts %}
 115     hosts.push({{host|safe}});
 116     {% endfor %}
 117
 118     let added_hosts = [];
 119     {% for host in added_hosts %}
 120     added_hosts.push({{host|safe}});
 121     {% endfor %}
 122
 123     let removed_host_ids = {{removed_hosts|safe}};
 124
 125     network_step = new NetworkStep(
 126         debug,
 127         xml,
 128         hosts,
 129         added_hosts,
 130         removed_host_ids,
 131         document.getElementById('graphContainer'),
 132         document.getElementById('outlineContainer'),
 133         document.getElementById('toolbarContainer'),
 134         document.getElementById('sidebarContainer')
 135     );
 136 </script>
 137 {% endblock content %}
 138 {% block onleave %}
 139 network_step.submitForm();
 140 {% endblock %}