From be9487e42f76045168533e111f9586805a716f42 Mon Sep 17 00:00:00 2001 From: Retspen Date: Fri, 6 Mar 2015 15:46:59 +0200 Subject: [PATCH] Day is end --- create/views.py | 1 + static/css/bootstrap-multiselect.css | 38 ++ static/js/bootstrap-multiselect.js | 635 +++++++++++++++++++++++++++ templates/base.html | 4 +- templates/create_flav_block.html | 65 +++ templates/create_instance.html | 234 +++++++++- templates/sidebar.html | 4 +- 7 files changed, 965 insertions(+), 16 deletions(-) create mode 100644 static/css/bootstrap-multiselect.css create mode 100644 static/js/bootstrap-multiselect.js create mode 100644 templates/create_flav_block.html diff --git a/create/views.py b/create/views.py index 9734a09..f099b42 100644 --- a/create/views.py +++ b/create/views.py @@ -28,6 +28,7 @@ def create_instance(request, compute_id): storages = [] networks = [] meta_prealloc = False + computes = Compute.objects.all() compute = Compute.objects.get(id=compute_id) flavors = Flavor.objects.filter().order_by('id') diff --git a/static/css/bootstrap-multiselect.css b/static/css/bootstrap-multiselect.css new file mode 100644 index 0000000..64400cd --- /dev/null +++ b/static/css/bootstrap-multiselect.css @@ -0,0 +1,38 @@ + +.multiselect-container { + position: absolute; + list-style-type: none; + margin: 0; + padding: 0; +} +.multiselect-container .input-group { + margin: 5px; +} +.multiselect-container > li { + padding: 0; +} +.multiselect-container > li > a.multiselect-all label { + font-weight: bold; +} +.multiselect-container > li > label.multiselect-group { + margin: 0; + padding: 3px 20px 3px 20px; + height: 100%; +} +.multiselect-container > li > a > label { + margin: 0; + height: 100%; + cursor: pointer; + font-weight: normal; +} +.multiselect-container > li > a > label.radio, +.multiselect-container > li > a > label.checkbox { + margin: 0; +} +.multiselect-container > li > a > label > input[type="checkbox"] { + margin-bottom: 5px; +} +.btn-group > .btn-group:nth-child(2) > .multiselect.btn { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} diff --git a/static/js/bootstrap-multiselect.js b/static/js/bootstrap-multiselect.js new file mode 100644 index 0000000..0ba6569 --- /dev/null +++ b/static/js/bootstrap-multiselect.js @@ -0,0 +1,635 @@ +/** + * bootstrap-multiselect.js + * https://github.com/davidstutz/bootstrap-multiselect + * + * Copyright 2012, 2013 David Stutz + * + * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0. + * See the README. + */ +!function($) { + + "use strict";// jshint ;_; + + if (typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) { + ko.bindingHandlers.multiselect = { + init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {}, + update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { + var ms = $(element).data('multiselect'); + if (!ms) { + $(element).multiselect(ko.utils.unwrapObservable(valueAccessor())); + } + else if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) { + ms.updateOriginalOptions(); + $(element).multiselect('rebuild'); + } + } + }; + } + + function Multiselect(select, options) { + + this.options = this.mergeOptions(options); + this.$select = $(select); + + // Initialization. + // We have to clone to create a new reference. + this.originalOptions = this.$select.clone()[0].options; + this.query = ''; + this.searchTimeout = null; + + this.options.multiple = this.$select.attr('multiple') == "multiple"; + this.options.onChange = $.proxy(this.options.onChange, this); + + // Build select all if enabled. + this.buildContainer(); + this.buildButton(); + this.buildSelectAll(); + this.buildDropdown(); + this.buildDropdownOptions(); + this.buildFilter(); + this.updateButtonText(); + + this.$select.hide().after(this.$container); + }; + + Multiselect.prototype = { + + // Default options. + defaults: { + // Default text function will either print 'None selected' in case no + // option is selected, or a list of the selected options up to a length of 3 selected options. + // If more than 3 options are selected, the number of selected options is printed. + buttonText: function(options, select) { + if (options.length == 0) { + return this.nonSelectedText + ' '; + } + else { + if (options.length > 3) { + return options.length + ' ' + this.nSelectedText + ' '; + } + else { + var selected = ''; + options.each(function() { + var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).html(); + + selected += label + ', '; + }); + return selected.substr(0, selected.length - 2) + ' '; + } + } + }, + // Like the buttonText option to update the title of the button. + buttonTitle: function(options, select) { + var selected = ''; + options.each(function () { + selected += $(this).text() + ', '; + }); + return selected.substr(0, selected.length - 2); + }, + // Is triggered on change of the selected options. + onChange : function(option, checked) { + + }, + buttonClass: 'btn', + dropRight: false, + selectedClass: 'active', + buttonWidth: 'auto', + buttonContainer: '
', + // Maximum height of the dropdown menu. + // If maximum height is exceeded a scrollbar will be displayed. + maxHeight: false, + includeSelectAllOption: false, + selectAllText: ' Select all', + selectAllValue: 'multiselect-all', + enableFiltering: false, + enableCaseInsensitiveFiltering: false, + filterPlaceholder: 'Search', + // possible options: 'text', 'value', 'both' + filterBehavior: 'text', + preventInputChangeEvent: false, + nonSelectedText: 'None selected', + nSelectedText: 'selected' + }, + + // Templates. + templates: { + button: '', + ul: '', + filter: '
', + li: '
    • ', + liGroup: '
    • ' + }, + + constructor: Multiselect, + + buildContainer: function() { + this.$container = $(this.options.buttonContainer); + }, + + buildButton: function() { + // Build button. + this.$button = $(this.templates.button).addClass(this.options.buttonClass); + + // Adopt active state. + if (this.$select.attr('disabled') == undefined) { + this.$button.removeClass('disabled'); + } + else { + this.$button.addClass('disabled'); + } + + // Manually add button width if set. + if (this.options.buttonWidth) { + this.$button.css({ + 'width' : this.options.buttonWidth + }); + } + + // Keep the tab index from the select. + var tabindex = this.$select.attr('tabindex'); + if (tabindex) { + this.$button.attr('tabindex', tabindex); + } + + this.$container.prepend(this.$button) + }, + + // Build dropdown container ul. + buildDropdown: function() { + + // Build ul. + this.$ul = $(this.templates.ul); + + if (this.options.dropRight) { + this.$ul.addClass('pull-right'); + } + + // Set max height of dropdown menu to activate auto scrollbar. + if (this.options.maxHeight) { + // TODO: Add a class for this option to move the css declarations. + this.$ul.css({ + 'max-height': this.options.maxHeight + 'px', + 'overflow-y': 'auto', + 'overflow-x': 'hidden' + }); + } + + this.$container.append(this.$ul) + }, + + // Build the dropdown and bind event handling. + buildDropdownOptions: function() { + + this.$select.children().each($.proxy(function(index, element) { + // Support optgroups and options without a group simultaneously. + var tag = $(element).prop('tagName').toLowerCase(); + if (tag == 'optgroup') { + this.createOptgroup(element); + } + else if (tag == 'option') { + this.createOptionValue(element); + } + // Other illegal tags will be ignored. + }, this)); + + // Bind the change event on the dropdown elements. + $('li input', this.$ul).on('change', $.proxy(function(event) { + var checked = $(event.target).prop('checked') || false; + var isSelectAllOption = $(event.target).val() == this.options.selectAllValue; + + // Apply or unapply the configured selected class. + if (this.options.selectedClass) { + if (checked) { + $(event.target).parents('li').addClass(this.options.selectedClass); + } + else { + $(event.target).parents('li').removeClass(this.options.selectedClass); + } + } + + // Get the corresponding option. + var value = $(event.target).val(); + var $option = this.getOptionByValue(value); + + var $optionsNotThis = $('option', this.$select).not($option); + var $checkboxesNotThis = $('input', this.$container).not($(event.target)); + + // Toggle all options if the select all option was changed. + if (isSelectAllOption) { + $checkboxesNotThis.filter(function() { + return $(this).is(':checked') != checked; + }).trigger('click'); + } + + if (checked) { + $option.prop('selected', true); + + if (this.options.multiple) { + // Simply select additional option. + $option.attr('selected', 'selected'); + } + else { + // Unselect all other options and corresponding checkboxes. + if (this.options.selectedClass) { + $($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass); + } + + $($checkboxesNotThis).prop('checked', false); + $optionsNotThis.removeAttr('selected').prop('selected', false); + + // It's a single selection, so close. + this.$button.click(); + } + + if (this.options.selectedClass == "active") { + $optionsNotThis.parents("a").css("outline", ""); + } + } + else { + // Unselect option. + $option.removeAttr('selected').prop('selected', false); + } + + this.updateButtonText(); + this.options.onChange($option, checked); + this.$select.change(); + + if(this.options.preventInputChangeEvent) { + return false; + } + }, this)); + + $('li a', this.$ul).on('touchstart click', function(event) { + event.stopPropagation(); + $(event.target).blur(); + }); + + // Keyboard support. + this.$container.on('keydown', $.proxy(function(event) { + if ($('input[type="text"]', this.$container).is(':focus')) { + return; + } + if ((event.keyCode == 9 || event.keyCode == 27) && this.$container.hasClass('open')) { + // Close on tab or escape. + this.$button.click(); + } + else { + var $items = $(this.$container).find("li:not(.divider):visible a"); + + if (!$items.length) { + return; + } + + var index = $items.index($items.filter(':focus')); + + // Navigation up. + if (event.keyCode == 38 && index > 0) { + index--; + } + // Navigate down. + else if (event.keyCode == 40 && index < $items.length - 1) { + index++; + } + else if (!~index) { + index = 0; + } + + var $current = $items.eq(index); + $current.focus(); + + if (event.keyCode == 32 || event.keyCode == 13) { + var $checkbox = $current.find('input'); + + $checkbox.prop("checked", !$checkbox.prop("checked")); + $checkbox.change(); + } + + event.stopPropagation(); + event.preventDefault(); + } + }, this)); + }, + + // Will build an dropdown element for the given option. + createOptionValue: function(element) { + if ($(element).is(':selected')) { + $(element).attr('selected', 'selected').prop('selected', true); + } + + // Support the label attribute on options. + var label = $(element).attr('label') || $(element).html(); + var value = $(element).val(); + var inputType = this.options.multiple ? "checkbox" : "radio"; + + var $li = $(this.templates.li); + $('label', $li).addClass(inputType); + $('input', $li).attr('type', inputType); + + var selected = $(element).prop('selected') || false; + var $checkbox = $('input', $li); + $checkbox.val(value); + + if (value == this.options.selectAllValue) { + $checkbox.parent().parent().addClass('multiselect-all'); + } + + $('label', $li).append(" " + label); + + this.$ul.append($li); + + if ($(element).is(':disabled')) { + $checkbox.attr('disabled', 'disabled').prop('disabled', true).parents('li').addClass('disabled'); + } + + $checkbox.prop('checked', selected); + + if (selected && this.options.selectedClass) { + $checkbox.parents('li').addClass(this.options.selectedClass); + } + }, + + // Create optgroup. + createOptgroup: function(group) { + var groupName = $(group).prop('label'); + + // Add a header for the group. + var $li = $(this.templates.liGroup); + $('label', $li).text(groupName); + + this.$ul.append($li); + + // Add the options of the group. + $('option', group).each($.proxy(function(index, element) { + this.createOptionValue(element); + }, this)); + }, + + // Add the select all option to the select. + buildSelectAll: function() { + var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == this.options.selectAllValue : false; + console.log(this.options); + // If options.includeSelectAllOption === true, add the include all checkbox. + if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) { + this.$select.prepend(''); + } + }, + + // Build and bind filter. + buildFilter: function() { + + // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength. + if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) { + var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering); + if (this.$select.find('option').length >= enableFilterLength) { + + this.$filter = $(this.templates.filter).attr('placeholder', this.options.filterPlaceholder); + this.$ul.prepend(this.$filter); + + this.$filter.val(this.query).on('click', function(event) { + event.stopPropagation(); + }).on('keydown', $.proxy(function(event) { + // This is useful to catch "keydown" events after the browser has updated the control. + clearTimeout(this.searchTimeout); + + this.searchTimeout = this.asyncFunction($.proxy(function() { + + if (this.query != event.target.value) { + this.query = event.target.value; + + $.each($('li', this.$ul), $.proxy(function(index, element) { + var value = $('input', element).val(); + if (value != this.options.selectAllValue) { + var text = $('label', element).text(); + var value = $('input', element).val(); + if (value && text && value != this.options.selectAllValue) { + // by default lets assume that element is not + // interesting for this search + var showElement = false; + + var filterCandidate = ''; + if ((this.options.filterBehavior == 'text' || this.options.filterBehavior == 'both')) { + filterCandidate = text; + } + if ((this.options.filterBehavior == 'value' || this.options.filterBehavior == 'both')) { + filterCandidate = value; + } + + if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) { + showElement = true; + } + else if (filterCandidate.indexOf(this.query) > -1) { + showElement = true; + } + + if (showElement) { + $(element).show(); + } + else { + $(element).hide(); + } + } + } + }, this)); + } + }, this), 300, this); + }, this)); + } + } + }, + + // Destroy - unbind - the plugin. + destroy: function() { + this.$container.remove(); + this.$select.show(); + }, + + // Refreshs the checked options based on the current state of the select. + refresh: function() { + $('option', this.$select).each($.proxy(function(index, element) { + var $input = $('li input', this.$ul).filter(function() { + return $(this).val() == $(element).val(); + }); + + if ($(element).is(':selected')) { + $input.prop('checked', true); + + if (this.options.selectedClass) { + $input.parents('li').addClass(this.options.selectedClass); + } + } + else { + $input.prop('checked', false); + + if (this.options.selectedClass) { + $input.parents('li').removeClass(this.options.selectedClass); + } + } + + if ($(element).is(":disabled")) { + $input.attr('disabled', 'disabled').prop('disabled', true).parents('li').addClass('disabled'); + } + else { + $input.removeAttr('disabled').prop('disabled', false).parents('li').removeClass('disabled'); + } + }, this)); + + this.updateButtonText(); + }, + + // Select an option by its value or multiple options using an array of values. + select: function(selectValues) { + if(selectValues && !$.isArray(selectValues)) { + selectValues = [selectValues]; + } + + for (var i = 0; i < selectValues.length; i++) { + + var value = selectValues[i]; + + var $option = this.getOptionByValue(value); + var $checkbox = this.getInputByValue(value); + + if (this.options.selectedClass) { + $checkbox.parents('li').addClass(this.options.selectedClass); + } + + $checkbox.prop('checked', true); + + $option.attr('selected', 'selected').prop('selected', true); + this.options.onChange($option, true); + } + + this.updateButtonText(); + }, + + // Deselect an option by its value or using an array of values. + deselect: function(deselectValues) { + if(deselectValues && !$.isArray(deselectValues)) { + deselectValues = [deselectValues]; + } + + for (var i = 0; i < deselectValues.length; i++) { + + var value = deselectValues[i]; + + var $option = this.getOptionByValue(value); + var $checkbox = this.getInputByValue(value); + + if (this.options.selectedClass) { + $checkbox.parents('li').removeClass(this.options.selectedClass); + } + + $checkbox.prop('checked', false); + + $option.removeAttr('selected').prop('selected', false); + this.options.onChange($option, false); + } + + this.updateButtonText(); + }, + + // Rebuild the whole dropdown menu. + rebuild: function() { + this.$ul.html(''); + + // Remove select all option in select. + $('option[value="' + this.options.selectAllValue + '"]', this.$select).remove(); + + // Important to distinguish between radios and checkboxes. + this.options.multiple = this.$select.attr('multiple') == "multiple"; + + this.buildSelectAll(); + this.buildDropdownOptions(); + this.updateButtonText(); + this.buildFilter(); + }, + + // Build select using the given data as options. + dataprovider: function(dataprovider) { + var optionDOM = ""; + dataprovider.forEach(function (option) { + optionDOM += ''; + }); + + this.$select.html(optionDOM); + this.rebuild(); + }, + + // Set options. + setOptions: function(options) { + this.options = this.mergeOptions(options); + }, + + // Get options by merging defaults and given options. + mergeOptions: function(options) { + return $.extend({}, this.defaults, options); + }, + + // Update button text and button title. + updateButtonText: function() { + var options = this.getSelected(); + + // First update the displayed button text. + $('button', this.$container).html(this.options.buttonText(options, this.$select)); + + // Now update the title attribute of the button. + $('button', this.$container).attr('title', this.options.buttonTitle(options, this.$select)); + + }, + + // Get all selected options. + getSelected: function() { + return $('option:selected[value!="' + this.options.selectAllValue + '"]', this.$select); + }, + + // Get the corresponding option by ts value. + getOptionByValue: function(value) { + return $('option', this.$select).filter(function() { + return $(this).val() == value; + }); + }, + + // Get an input in the dropdown by its value. + getInputByValue: function(value) { + return $('li input', this.$ul).filter(function() { + return $(this).val() == value; + }); + }, + + updateOriginalOptions: function() { + this.originalOptions = this.$select.clone()[0].options; + }, + + asyncFunction: function(callback, timeout, self) { + var args = Array.prototype.slice.call(arguments, 3); + return setTimeout(function() { + callback.apply(self || window, args); + }, timeout); + } + }; + + $.fn.multiselect = function(option, parameter) { + return this.each(function() { + var data = $(this).data('multiselect'), options = typeof option == 'object' && option; + + // Initialize the multiselect. + if (!data) { + $(this).data('multiselect', ( data = new Multiselect(this, options))); + } + + // Call multiselect method. + if ( typeof option == 'string') { + data[option](parameter); + } + }); + }; + + $.fn.multiselect.Constructor = Multiselect; + + // Automatically init selects by their data-role. + $(function() { + $("select[data-role=multiselect]").multiselect(); + }); + +}(window.jQuery); diff --git a/templates/base.html b/templates/base.html index cae2bb8..68321e4 100644 --- a/templates/base.html +++ b/templates/base.html @@ -21,8 +21,8 @@ - - + + {% block style %}{% endblock %} diff --git a/templates/create_flav_block.html b/templates/create_flav_block.html new file mode 100644 index 0000000..979599f --- /dev/null +++ b/templates/create_flav_block.html @@ -0,0 +1,65 @@ +{% load i18n %} +{% if request.user.is_superuser %} + + + + + + +{% endif %} \ No newline at end of file diff --git a/templates/create_instance.html b/templates/create_instance.html index f4b91db..93bde00 100644 --- a/templates/create_instance.html +++ b/templates/create_instance.html @@ -1,19 +1,229 @@ {% extends "base.html" %} {% load i18n %} -{% block title %}{% trans "Compute" %}{% endblock %} +{% load static %} +{% block title %}{% trans "Create new instance" %}{% endblock %} +{% block style %} + +{% endblock %} {% block content %} -
    -
    - - {% include 'sidebar.html' %} - -
    - -

    {{ compute.name }}

    + +
    +
    + {% include 'create_flav_block.html' %} +

    {% trans "New instance on" %} {{ compute.name }}

    +
    +
    + {% include 'errors_block.html' %} -
    -
    -
    +
    + + {% if not flavors %} +
    +
    + + {% trans "Warning:" %} {% trans "Hypervisor doesn't have any Flavors" %} +
    +
    + {% else %} +
    +
    + + + + + + + + + + + + + {% for flavor in flavors %} + + + + + + + + + + {% endfor %} + +
    #{% trans "Name" %}{% trans "VCPU's" %}{% trans "RAM" %}{% trans "HDD" %}{% trans "Action" %}
    {{ forloop.counter }}{{ flavor.label }}{{ flavor.vcpu }}{{ flavor.memory }} {% trans "MB" %}{{ flavor.disk }} {% trans "GB" %} + + + + + +
    {% csrf_token %} + + +
    +
    +
    +
    + {% endif %} + +
    +{% endblock %} +{% block script %} + + {% endblock %} \ No newline at end of file diff --git a/templates/sidebar.html b/templates/sidebar.html index 60e3a52..b1115e8 100644 --- a/templates/sidebar.html +++ b/templates/sidebar.html @@ -3,11 +3,11 @@