source: adagios/templates/configurator/addhost.html @ 63cbec6

{% extends "configurator/base.html" %}

{% block title %}Characters{% endblock %}

{% block sidebar %}arg {% endblock %}

{% block javascript %}
                $(document).ready(function() {
                        $('#hostname').focus();
                });

{% endblock %}

{% block head %}


        <!-- tab styling -->
        <link rel="stylesheet" type="text/css" href="/static/css/tabs-flowplayer-v2.css"/>

        <style>
        

        /* override the root element to enable scrolling */
        #flowpanes {
                position:relative;
                overflow:hidden;
                clear:both;
        }

        /* override single pane */
        #flowpanes div {
                float:left;
                display:block;
                width:670px;
                font-size:14px;
        }

        /* our additional wrapper element for the items */
        #flowpanes .items {
                width:20000em;
                position:absolute;
                clear:both;
                margin:0;
                padding:0;
        }

        #flowpanes .less, #flowpanes .less a {
                color:#999 !important;
                font-size:11px;
        }
        </style>
{% endblock %}


{% block content %}


<!-- tabs work as navigator for scrollable -->
<ul id="flowtabs" class="navi">
        <li><a id="t1" href="#host">Host</a></li>
        <li><a id="t2" href="#templates">Templates</a></li>
        <li><a id="t3" href="#review">Review</a></li>
        <li><a id="t4" href="#complete">Complete</a></li>

</ul>

<form action="#" method="POST">
<!-- panes -->
<div id="flowpanes">


        <!-- wrapper for scrollable items -->
        <div class="items">

                <div>
                        
                          <fieldset id="hostinfo">
                                <legend>Host Information</legend>

                                        
                                                <p>
                                                        <label for="hostname">Hostname <em>*</em></label>
                                                        <input id="hostname" type="text" name="hostname" />
                                                        <span id="warn_hostname"></span>
                                                </p>
                                                <p>
                                                        <label for="description">Description</label>
                                                        <input id="description" type="text" name="description" />
                                                        <span id="warn_description"></span>
                                                </p>
                                                <p>
                                                        <label for="ipaddress">IP Address <em>*</em></label>
                                                        <input id="ipaddress" type="text" name="ipaddress" />
                                                        <span id="warn_hostname"></span>
                                                </p>
                                        
                                </fieldset>
                        
                </div>  
                
                <div>

                        <fieldset id="templateinfo">
                          <legend>Select Relevant Templates</legend>
                                                
                                                <p>
                                                    <select id="os">
                                                      <option value="none">-- select --</option>
                                                      <option value="windows">Microsoft Windows</option>
                                                      <option value="linux">Linux</option>
                                                      <option value="switch">Switch</option>
                                                    </select>
                                                </p>
                                                <p>
                                                  <fieldset id="subtemplates">
                                                    <legend>Templates</legend>
                                                        <p><input type="checkbox" class="left" /> <label>Microsoft Exchange</p>
                                                        <p style="clear: both"><input type="checkbox" class="left" /> <label>Microsoft SQL Server</p>
                                                  </fieldset>
                                                </p>
                        </fieldset>
                </div>

                <div>
                                <h2>Review</h2>
                </div>
                <div>
                                <h2>Complete</h2>
                </div>

        </div>

</div>
</form>         
<p style="text-align:center;width:500px">
        <button class="custom prev">&laquo; Previous</button>
        <button class="custom next">Next &raquo;</button>

</p>

<!-- activate tabs with JavaScript -->
<script>


// wait until document is fully scriptable
$(function() {

        // select #flowplanes and make it scrollable. use circular and navigator plugins
        $("#flowpanes").scrollable({ circular: true, mousewheel: true }).navigator({

                // select #flowtabs to be used as navigator
                navi: "#flowtabs",

                // select A tags inside the navigator to work as items (not direct children)
                naviItem: 'a',

                // assign "current" class name for the active A tag inside navigator
                activeClass: 'current',

                // make browser's back button work
                history: true

        });
});
</script>
                <script type="text/javascript">
                                $('#hostname').keypress(function() {
                                        if ($('#warn_hostname').html() != "") {
                                                $('#warn_hostname').html("");
                                        }
                                });
                                
                                
                                $('#os').change(function() {
                                        $('#subtemplates').show();
                                });
                                
                                $('#hostname').blur(function(e) {
                                        if ($(this).val() == "") {
                                                return false;
                                        }
                                        $.getJSON("/adagios/api/host/" + $(this).val() + ".json", function(json) {
                                                if (json.host.host_name != "null") {            
                                                        $('#warn_hostname').html('<img src="/static/attention.png" title="Hostname already exists" />');
                                                        $("#warn_hostname img[title]").tooltip({
                                                        
        // place tooltip on the right edge
        position: "center right",

        // a little tweaking of the position
        offset: [-2, 10],

        // use the built-in fadeIn/fadeOut effect
        effect: "fade",

        // custom opacity setting
        opacity: 0.7 });
                                                        $('#hostname').select();
                                                        e.stopImmediatePropagation();
                                                }
                                        });
                                        $.getJSON("/adagios/api/gethostbyname/" + $('#hostname').val(), function(json) {
                                                                $('#ipaddress').val(json.host);
                                        });
                                });

                </script>
{% endblock %}