vimhandler/template/vim_create.html

   1 <!--
   2 Copyright 2019 ETSI
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16
  17 {% extends "base.html" %}
  18 {% load get %}
  19 {% load staticfiles %}
  20
  21
  22 {% block head_block %}
  23     {{ block.super }}
  24
  25 {% endblock %}
  26 {% block title_header_big %}
  27     {{ block.super }}
  28 {% endblock %}
  29 {% block left_sidebar %}
  30
  31     {% include 'osm/osm_project_left_sidebar.html' %}
  32
  33 {% endblock %}
  34
  35
  36 {% block breadcrumb_body %}
  37     {{ block.super }}
  38     <li><a href="{% url 'vims:list'  %}">VIMS</a></li>
  39 {% endblock %}
  40
  41 {% block content_body %}
  42     {{ block.super }}
  43
  44     <div class="row">
  45         <div class="col-md-12">
  46             <form action='{% url "vims:create"   %}' method="post">
  47                 {% csrf_token %}
  48                 <div class="box">
  49                     <div class="box-header with-border">
  50                         <h3 class="box-title">NEW VIM ACCOUNT</h3>
  51                         <div class="box-tools">
  52
  53                         </div>
  54                     </div>
  55                     <div class="box-body">
  56
  57                         <div class="row">
  58                             <div class="col-lg-6">
  59                                 <div class="row">
  60                                     <div class="form-group">
  61                                         <label for="name" class="col-sm-3 control-label">Name*</label>
  62                                         <div class="col-sm-6 input-group input-group-sm">
  63                                             <input class="form-control" id="name" name="name" placeholder="VIM name"
  64                                                    required>
  65                                         </div>
  66                                     </div>
  67                                 </div>
  68                                 <div class="row">
  69                                     <div class="form-group">
  70                                         <label for="vim_type" class="col-sm-3 control-label">Type*</label>
  71                                         <div class="col-sm-6 input-group input-group-sm">
  72                                             <select id="vim_type" name="vim_type" class="form-control"
  73                                                     onchange="toggleConfig(this)">
  74                                                 <option value="openvim">OpenVIM</option>
  75                                                 <option value="openstack">Openstack</option>
  76                                                 <option value="vmware">VMware vCD</option>
  77                                                 <option value="aws">AWS</option>
  78                                                 <option value="opennebula">OpenNebula</option>
  79                                             </select>
  80                                         </div>
  81                                     </div>
  82                                 </div>
  83                                 <div class="row">
  84                                     <div class="form-group">
  85                                         <label for="vim_url" class="col-sm-3 control-label">VIM URL*</label>
  86                                         <div class="col-sm-6 input-group input-group-sm">
  87                                             <input type="url" class="form-control" id="vim_url" name="vim_url"
  88                                                    placeholder="VIM URL" required>
  89                                         </div>
  90                                     </div>
  91                                 </div>
  92                                 <div class="row">
  93                                     <div class="form-group">
  94                                         <label for="vim_user" class="col-sm-3 control-label">VIM Username*</label>
  95                                         <div class="col-sm-6 input-group input-group-sm">
  96                                             <input class="form-control" id="vim_user" name="vim_user"
  97                                                    placeholder="VIM Username" required>
  98                                         </div>
  99                                     </div>
 100                                 </div>
 101                                 <div class="row">
 102                                     <div class="form-group">
 103                                         <label for="vim_password" class="col-sm-3 control-label">VIM Password*</label>
 104                                         <div class="col-sm-6 input-group input-group-sm">
 105                                             <input type="password" class="form-control" id="vim_password"
 106                                                    name="vim_password" placeholder="VIM Password" required>
 107                                         </div>
 108                                     </div>
 109                                 </div>
 110
 111
 112
 113
 114                             </div>
 115                             <div class="col-lg-6">
 116                                 <div class="row">
 117                                     <div class="form-group">
 118                                         <label for="vim_tenant_name" class="col-sm-3 control-label">Tenant name*</label>
 119                                         <div class="col-sm-6 input-group input-group-sm">
 120                                             <input class="form-control" id="vim_tenant_name" name="vim_tenant_name"
 121                                                    placeholder="Tenant name" required>
 122                                         </div>
 123                                     </div>
 124                                 </div>
 125                                 <div class="row">
 126                                     <div class="form-group">
 127                                         <label for="description" class="col-sm-3 control-label">Description</label>
 128                                         <div class="col-sm-6 input-group input-group-sm">
 129                                             <input class="form-control" id="description" name="description"
 130                                                    placeholder="Description">
 131                                         </div>
 132                                     </div>
 133                                 </div>
 134                                 <div class="row">
 135                                     <div class="form-group">
 136                                         <label for="schema_type" class="col-sm-3 control-label">Schema Type</label>
 137                                         <div class="col-sm-6 input-group input-group-sm">
 138                                             <input class="form-control" id="schema_type" name="schema_type"
 139                                                    placeholder="Schema Type">
 140                                         </div>
 141                                     </div>
 142                                 </div>
 143                                 <div class="row">
 144                                     <div class="form-group">
 145                                         <label for="schema_version" class="col-sm-3 control-label">Schema
 146                                             Version</label>
 147                                         <div class="col-sm-6 input-group input-group-sm">
 148                                             <input class="form-control" id="schema_version" name="schema_version"
 149                                                    placeholder="Schema Version">
 150                                         </div>
 151                                     </div>
 152                                 </div>
 153                             </div>
 154
 155
 156                         </div>
 157
 158                         <div id="config" class="panel box">
 159
 160                                 <a data-toggle="collapse" data-parent="#accordion" href="#config_collapse"
 161                                    aria-expanded="false" class="collapsed" style="color:black">
 162                                     <h5 class="box-title" style="background-color:#f7f7f7; text-align: center;">
 163                                         CONFIG PARAMETERS
 164                                     </h5>
 165                                 </a>
 166
 167
 168                             <div id="config_collapse" class="panel-collapse collapse ">
 169                                 {% include 'config/openvim.html' %}
 170                                 {% include 'config/openstack.html' %}
 171                                 {% include 'config/vmware.html' %}
 172                                 {% include 'config/aws.html' %}
 173                                 {% include 'config/opennebula.html' %}
 174
 175                                 <div class="row">
 176                                     <div class="col-lg-6">
 177                                         <div class="row ">
 178                                             <div class="form-group">
 179                                                 <label for="additional_conf" class="col-sm-4 control-label">Additional configuration</label>
 180                                                 <div class="col-sm-6 input-group input-group-sm">
 181                                                     <input class="form-control" id="additional_conf"
 182                                                            name="additional_conf"
 183                                                            placeholder='{ "key1": [...],  "key2": {}, "key3": "" }'>
 184                                                 </div>
 185                                             </div>
 186                                         </div>
 187                                     </div>
 188                                 </div>
 189
 190                             </div>
 191                         </div>
 192
 193
 194                     </div>
 195                     <div class="box-footer">
 196                         <button onclick="location.href='{% url 'vims:list' %}'" class="btn btn-default pull-left">Back to
 197                             VIM Accounts
 198                         </button>
 199                         <button class="btn btn-primary pull-right">Create</button>
 200                     </div>
 201                 </div>
 202             </form>
 203         </div>
 204
 205     </div>
 206 {% endblock %}
 207
 208 {% block resource_block %}
 209     {{ block.super }}
 210     <!-- Utility JS -->
 211
 212     <script>
 213         $(document).ready(function () {
 214             toggleConfig(document.getElementById("vim_type"));
 215         });
 216         function toggleConfig(element){
 217             $('.config-vim').hide();
 218             $('.config-input').prop('disabled', true);
 219             var type_selected = element.options[element.selectedIndex].value;
 220             console.log("type selected: " + type_selected);
 221             var div_config_index = type_selected + '_config_collapse';
 222             $('#'+div_config_index).show();
 223             $('#'+div_config_index+' .config-input').prop('disabled', false);
 224         }
 225     </script>
 226
 227 {% endblock %}
 228
 229 {% block footer %}
 230     {% include "footer.html"  %}
 231 {% endblock %}