vimhandler/template/vim_create.html

<!--
Copyright 2019 ETSI

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an  BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

{% extends "base.html" %}
{% load get %}
{% load staticfiles %}


{% block head_block %}
    {{ block.super }}

{% endblock %}
{% block title_header_big %}
    {{ block.super }}
{% endblock %}
{% block left_sidebar %}

    {% include 'osm/osm_project_left_sidebar.html' %}

{% endblock %}


{% block breadcrumb_body %}
    {{ block.super }}
    <li><a href="{% url 'vims:list'  %}">VIMS</a></li>
{% endblock %}

{% block content_body %}
    {{ block.super }}

    <div class="row">
        <div class="col-md-12">
            <form action='{% url "vims:create"   %}' method="post">
                {% csrf_token %}
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">NEW VIM ACCOUNT</h3>
                        <div class="box-tools">

                        </div>
                    </div>
                    <div class="box-body">

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-3 control-label">Name*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="name" name="name" placeholder="VIM name"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="vim_type" class="col-sm-3 control-label">Type*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <select id="vim_type" name="vim_type" class="form-control"
                                                    onchange="toggleConfig(this)">
                                                <option value="openvim">OpenVIM</option>
                                                <option value="openstack">Openstack</option>
                                                <option value="vmware">VMware vCD</option>
                                                <option value="aws">AWS</option>
                                                <option value="opennebula">OpenNebula</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="vim_url" class="col-sm-3 control-label">VIM URL*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input type="url" class="form-control" id="vim_url" name="vim_url"
                                                   placeholder="VIM URL" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="vim_user" class="col-sm-3 control-label">VIM Username*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="vim_user" name="vim_user"
                                                   placeholder="VIM Username" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="vim_password" class="col-sm-3 control-label">VIM Password*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input type="password" class="form-control" id="vim_password"
                                                   name="vim_password" placeholder="VIM Password" required>
                                        </div>
                                    </div>
                                </div>




                            </div>
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="form-group">
                                        <label for="vim_tenant_name" class="col-sm-3 control-label">Tenant name*</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="vim_tenant_name" name="vim_tenant_name"
                                                   placeholder="Tenant name" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="description" class="col-sm-3 control-label">Description</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="description" name="description"
                                                   placeholder="Description">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="schema_type" class="col-sm-3 control-label">Schema Type</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="schema_type" name="schema_type"
                                                   placeholder="Schema Type">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="schema_version" class="col-sm-3 control-label">Schema
                                            Version</label>
                                        <div class="col-sm-6 input-group input-group-sm">
                                            <input class="form-control" id="schema_version" name="schema_version"
                                                   placeholder="Schema Version">
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                        <div id="config" class="panel box">

                                <a data-toggle="collapse" data-parent="#accordion" href="#config_collapse"
                                   aria-expanded="false" class="collapsed" style="color:black">
                                    <h5 class="box-title" style="background-color:#f7f7f7; text-align: center;">
                                        CONFIG PARAMETERS
                                    </h5>
                                </a>


                            <div id="config_collapse" class="panel-collapse collapse ">
                                {% include 'config/openvim.html' %}
                                {% include 'config/openstack.html' %}
                                {% include 'config/vmware.html' %}
                                {% include 'config/aws.html' %}
                                {% include 'config/opennebula.html' %}

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="row ">
                                            <div class="form-group">
                                                <label for="additional_conf" class="col-sm-4 control-label">Additional configuration</label>
                                                <div class="col-sm-6 input-group input-group-sm">
                                                    <input class="form-control" id="additional_conf"
                                                           name="additional_conf"
                                                           placeholder='{ "key1": [...],  "key2": {}, "key3": "" }'>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                    <div class="box-footer">
                        <button onclick="location.href='{% url 'vims:list' %}'" class="btn btn-default pull-left">Back to
                            VIM Accounts
                        </button>
                        <button class="btn btn-primary pull-right">Create</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
{% endblock %}

{% block resource_block %}
    {{ block.super }}
    <!-- Utility JS -->

    <script>
        $(document).ready(function () {
            toggleConfig(document.getElementById("vim_type"));
        });
        function toggleConfig(element){
            $('.config-vim').hide();
            $('.config-input').prop('disabled', true);
            var type_selected = element.options[element.selectedIndex].value;
            console.log("type selected: " + type_selected);
            var div_config_index = type_selected + '_config_collapse';
            $('#'+div_config_index).show();
            $('#'+div_config_index+' .config-input').prop('disabled', false);
        }
    </script>

{% endblock %}

{% block footer %}
    {% include "footer.html"  %}
{% endblock %}