Synnefo

{% load i18n %}

<div id="machines" class="separator"></div>

<!-- the create button -->

<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>

<!-- changing between standard/list view -->

<div id="view-select">

    <a id="standard" href="/machines/standard">#</a>

    <span class="view-separator">|</span>

    <a id="list" href="/machines/list">=</a>

</div>

<!-- the form -->

<form action="#">

        <!-- scrollable root element -->

        <div class="modal" id="wizard">

                <!-- status bar -->

                <ul id="status">

                        <li class="active"><strong>1.</strong> {% trans "Image" %}</li>

                        <li><strong>2.</strong> {% trans "Machine" %}</li>

                        <li><strong>3.</strong> {% trans "Review" %}</li>

                </ul>

                <!-- scrollable items -->

                <div class="items">

                        <!-- pages -->

                        <div class="page">

                <h2>{% trans "Select an OS" %}</h2>

                <ul class="tabs">

                    <li><a href="#">{% trans "standard" %}</a></li>

                    <li><a href="#">{% trans "custom" %}</a></li>

                </ul>

                <div class="panes">

                            <li id="image-template" style="display:none">

                                    <label for="image.id"> 

                            <a>

                                <div class="image">

                                    <img src="" class="image-logo"/>

                                    <strong class="image-title">image.title</strong>

                                    <input class="radio" type="radio" name="image-id" id="image-id" />

                                    <br />

                                    <span class="description">image.description</span> 

                                    <span class="size">?? MB</span>                              

                                </div>

                            </a>

                                    </label>

                            </li>

                    <ul class="pane" id="standard-images">

                                            <!-- standard images -->

                                    </ul>

                    <ul class="pane" id="custom-images">

                                            <!-- custom images -->

                    </ul>

                </div>

                                <button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>

                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>

            </div>

                        <div class="page">

                                <h2>{% trans "Select CPU, RAM and storage" %}</h2>

                <ul>

                    <li>

                        <div class="machine-type">

                            <label for="small">

                                <input type="radio" id="small" name="machine-type" value="small" checked="true" />

                                <strong>{% trans "small" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">      

                            <label for="medium">

                                <input type="radio" id="medium" name="machine-type" value="medium" />                  

                                <strong>{% trans "medium" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="large">

                                <input type="radio" id="large" name="machine-type" value="large" />

                                <strong>{% trans "large" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="custom">

                                <input type="radio" name="machine-type" id="custom" value="large" />

                                <strong>{% trans "custom" %}</strong>

                            </label>

                        </div>

                    </li>

                    <li>

                                    <label><strong class="sliders">CPU (cores)</strong></label>

                        <input type="range" id="cpu" style="display:none" />

                        <input type="text" class="range" id="cpu-indicator" />

                    </li>

                    <li>

                                    <label><strong class="sliders">RAM (MB)</strong></label>

                        <input type="range" id="ram" style="display:none" />

                        <input type="text" class="range" id="ram-indicator" />

                    </li>

                    <li>

                                <label><strong class="sliders">Storage (GB)</strong></label>

                        <input type="range" id="storage" style="display:none" />

                        <input type="text" class="range" id="storage-indicator" />

                    </li>

                    <li>

                        <div class="cost">

                            {% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000

                        </div>

                    </li>

                </ul>

                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>

                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>

            </div>

                        <div class="page">

                                <h2>{% trans "Confirm your settings" %}</h2>

                <ul>

                    <li class="required">

                        <label>

                            <strong>Machine name</strong>

                            <input type="text" class="text" name="machine_name" value="My Ubuntu 10.04 x86_64 server"/>

                        </label>

                    </li>

                    <li>

                        <strong>{% trans "Image:" %}</strong> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>

                    </li>

                    <li>

                        <strong>{% trans "CPU:" %}</strong> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>

                    </li>

                    <li>

                        <strong>{% trans "RAM:" %}</strong> <span id="machine_ram-label">1024</span><span>MB</span>

                    </li>

                    <li>

                        <strong>{% trans "Storage:" %}</strong> <span id="machine_storage-label">10</span><span>GB</span>

                    </li>

                    <li>

                        <strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>

                    </li>

                    <li>

                        <strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>

                    </li>

                </ul>

                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>

                                <button type="button" class="next right" id="start">{% trans "Create VM" %}</button>        

            </div>

                </div>

        </div>

</form>

<!-- notification after wizard completion -->

<a id="notification" rel="#error-success" href="#"></a>

<div class="modal" id="error-success">

    <h3>{% trans "Error!/Success!" %}</h3>

    <p>{% trans "More details about the result"%}</p>

</div>

<!-- confirmation before executing an action -->

<a id="confirmation" rel="#yes-no" href="#"></a>

<div class="modal" id="yes-no">

    <h3>{% trans "You are about to xxx machine yyy" %}</h3>

    <p>{% trans "Are you sure you want to proceed?" %}</p>

    <button>{% trans "Yes" %}</button>

        <button>{% trans "No" %}</button>

</div>

<div id="machinesview"></div>

<div class="confirm_multiple">

    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "machines" %}</p>

    <button class="yes">{% trans "Confirm All" %}</button>

        <button class="no">{% trans "Cancel All" %}</button>

</div>

<div id="machines" class="separator"></div>

<script>

// hardcoded image types

// TODO: get this from the metadata

var image_tags = {

                1: 'archlinux',

                2: 'centos',

                3: 'debian',

                4: 'freebsd',

                5: 'gentoo',

                6: 'netbsd',

                7: 'openbsd',

                8: 'redhat',

                9: 'slackware',

                10: 'suse',

                11: 'ubuntu',

                12: 'windows',

                20: 'ubuntu',

               };

// switch to list view

$("a#list").click(function(){

    list_view(); 

    return false;

});

// switch to standard view

$("a#standard").click(function(){

    standard_view();

    return false;

});

// launch VM creation wizard

$("a#create").click(function(){

    // launch wizard only if images and flavors are found

    if (images.length > 0  && flavors.length > 0) {

        $("#wizard").scrollable().begin();

        $("#wizard").show();

        $('a#create').data('overlay').load()   

    } else if (images.length == 0 ) {

        ajax_error('NO_IMAGES');

        return false;   

    } else if (flavors.length == 0) {

        ajax_error('NO_FLAVORS');

        return false;

    }

});

// create wizard overlay

$(function() { 

    $("a#create").overlay({

        mask: '#000', 

        effect: 'default', 

        top: '5%', 

        oneInstance: false,

        closeOnClick: false

    });

});

// wizard

$(function() {

    var root = $("#wizard").scrollable();

    var api = root.scrollable();

    // rangeinput with default configuration

    // validation logic is done inside the onBeforeSeek callback

    api.onBeforeSeek(function(event, i) {

            // we are going 1 step backwards so no need for validation

            if (api.getIndex() < i) {

             // 1. get current page

                     var page = root.find(".page").eq(api.getIndex()),

                         // 2. .. and all required fields inside the page

                         inputs = page.find(".required :input").removeClass("error"),

                         // 3. .. which are empty

                         empty = inputs.filter(function() {

                                return $(this).val().replace(/\s*/g, '') == '';

                         });

                     // if there are empty fields, then

                    if (empty.length) {

                            // add a CSS class name "error" for empty & required fields

                            empty.addClass("error");

                            // cancel seeking of the scrollable by returning false

                            return false;

                    // everything is good

                    } 

            }

            // update status bar

            $("#status li").removeClass("active").eq(i).addClass("active");

        // update confirm step

        if (api.getIndex()==0) {

            var image = $("input[type=radio][name=image-id]:checked");

            var imageRef = image.length ? image[0].id : false

            if (imageRef) {

                var imageName = $("label[for=" + imageRef + "] .image-title").text();

                $("#machine_image-label")[0].textContent = imageName;

                $("input[type=text][name=machine_name]")[0].value = "My " + imageName + " server";

            }

        } else if (api.getIndex()==1) {

            $("#machine_cpu-label")[0].textContent = $("#cpu-indicator")[0].value;

            $("#machine_ram-label")[0].textContent = $("#ram-indicator")[0].value;

            $("#machine_storage-label")[0].textContent = $("#storage-indicator")[0].value;

        }    

    });

    // if tab is pressed on the next button seek to next page

    root.find("button.next").keydown(function(e) {

            if (e.keyCode == 9) {

                    // seeks to next tab by executing our validation routine

                    api.next();

                    e.preventDefault();

            }

    });

});

// disable sliders in flavor selection

function disableSliders() {

    $("#cpu").attr('disabled',true);

    $("#ram").attr('disabled',true);

    $("#storage").attr('disabled',true);

}

// confirm all actions

$("div.confirm_multiple .yes").live('click', function(){

    while(pending_actions.length > 0){ // if there is a pending action for this server execute it

        action = pending_actions.pop(); // extract action

        var serverID = action[1];

        if ($.cookie("list") != '1') { // standard view

            $('#'+serverID+' .spinner').show();

            $('#'+serverID+' .selected').removeClass('selected');

            $('#'+serverID+' .display').removeClass('display');

        } else { // list view

            osIcon = $('#'+serverID).parent().parent().find('.list-logo');

            osIcon.attr('os',osIcon.attr('src'));

            osIcon.attr('src','static/progress.gif');

        }

        action[0]([serverID]); // execute action

    }

    update_confirmations();    

});

// cancel all actions

$("div.confirm_multiple .no").live('click', function(){

    pending_actions = [];

    $('.machine .selected').removeClass('selected');

    $('.machine .display').removeClass('display');

    update_confirmations();

});

// validate cpu input box

$("#cpu-indicator").live('change',function(){

    var v = Number(this.value);

    var i = cpus.indexOf(v);

    if (isNaN(v)) {

        $(this).value = cpus[0];

        $("#cpu").data('rangeinput').setValue(0);

    } else if (i == -1) {

        for (var j=0; j < cpus.length; j++)

            if (v<cpus[j])

                break;

        $("#cpu").data('rangeinput').setValue(j);

    } else {

        $("#cpu").data('rangeinput').setValue(i);

    }   

    return false;

});

// validate ram input box

$("#ram-indicator").live('change',function(){

    var v = Number(this.value);

    var i = ram.indexOf(v);

    if (isNaN(v)) {

        $(this).value = cpus[0];

        $("#ram").data('rangeinput').setValue(0);

    } else if (i == -1) {

        for (var j=0; j < ram.length; j++)

            if (v<ram[j])

                break;

        $("#ram").data('rangeinput').setValue(j);

    } else {

        $("#ram").data('rangeinput').setValue(i);

    }   

    return false;

});

// validate storage input box

$("#storage-indicator").live('change',function(){

    var v = Number(this.value);

    var i = disks.indexOf(v);

    if (isNaN(v)) {

        $(this).value = disks[0];

        $("#storage").data('rangeinput').setValue(0);

    } else if (i == -1) {

        for (var j=0; j < disks.length; j++)

            if (v<disks[j])

                break;

        $("#storage").data('rangeinput').setValue(j);

    } else {

        $("#storage").data('rangeinput').setValue(i);

    }   

    return false;

});

// selecting the small size

$("#small").click(function(){

    $("#cpu").data('rangeinput').setValue(0);

    $("#ram").data('rangeinput').setValue(0);

    $("#storage").data('rangeinput').setValue(0);

    $("#cpu-indicator")[0].value = cpus[0];

    $("#ram-indicator")[0].value = ram[0];

    $("#storage-indicator")[0].value = disks[0];

});

// selecting the medium size

$("#medium").click(function(){

    $("#cpu").data('rangeinput').setValue(1);

    $("#ram").data('rangeinput').setValue(1);

    $("#storage").data('rangeinput').setValue(1);

    $("#cpu-indicator")[0].value = cpus[1];

    $("#ram-indicator")[0].value = ram[1];

    $("#storage-indicator")[0].value = disks[1];    

});

// selecting the large size

$("#large").click(function(){

    $("#cpu").data('rangeinput').setValue(2);

    $("#ram").data('rangeinput').setValue(2);

    $("#storage").data('rangeinput').setValue(2);

    $("#cpu-indicator")[0].value = cpus[2];

    $("#ram-indicator")[0].value = ram[2];

    $("#storage-indicator")[0].value = disks[2];    

});

// selecting the custom flavor enables the sliders

$("#custom").click(function(){

    $("#cpu").attr('disabled',false);

    $("#ram").attr('disabled',false);

    $("#storage").attr('disabled',false);

    $("strong.sliders").style = 'color: #778899;';

});

// exit the wizard

$("#cancel").click(function(){

    $("a#create").overlay().close();

});

// starting a new VM through the wizard

$("#start").click(function(){

    var imageRef = $('input[type=radio][name=image-id]:checked')[0].id.replace('img-radio-','');   

    var flavorRef = identify_flavor($("#cpu-indicator")[0].value, $("#storage-indicator")[0].value, $("#ram-indicator")[0].value);

    var machineName = $('input[name=machine_name]')[0].value;

    create_vm(machineName, imageRef, flavorRef);

    $('a#create').data('overlay').close();

    $("#emptymachineslist").hide();

    try{console.warn('creating ' + $("input[name=machine_name]")[0].value)} catch(err){}

    $("#wizard").hide();

});

// basic functions executed on page load

if (images.length > 0) {

    // populate image list

    update_wizard_images();

}

if (flavors.length > 0) {

    // configure flavors

    update_wizard_flavors(); 

}

// create tabs for main menu

$("ul.tabs").tabs("div.panes ul");

$(window).resize(function(){

    if (this.innerHeight - 240 < $('#machinesview').height())

        $('.confirm_multiple').addClass('fixed');

    else

        $('.confirm_multiple').removeClass('fixed');

});

</script>