stackforge-attic/tuskar-ui-extras
Code Issues Proposed changes

Merge "Move js and css out of the template file"

Browse Source
This commit is contained in:
Jenkins 2014-11-24 13:44:19 +00:00 committed by Gerrit Code Review
commit 0da08b8cec
4 changed files with 213 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js Normal file
View File

@ -0,0 +1,100 @@
tuskar.boxes = (function () {
'use strict';
var module = {};
module.init = function () {
if ($('div.boxes-available-roles').length === 0) {
// Only activate on a page that has the right classes.
return;
}
function get_role_counts($flavor) {
var roles = {};
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var name = $this.data('name');
var count = +$this.find('input.number-picker').val();
roles[name] = count;
});
return roles;
}
function update_boxes() {
$('div.boxes-flavor').each(function () {
var $flavor = $(this);
var roles = get_role_counts($flavor);
var role_names = Object.getOwnPropertyNames(roles);
var count = 0;
var role = 0;
$flavor.find('div.boxes-nodes div.boxes-node').each(function () {
var $this = $(this);
$this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage');
while (count >= roles[role_names[role]]) {
role += 1;
count = 0;
}
if (!role_names[role]) {
$(this).html('free');
} else {
$this.addClass('boxes-role-' + role_names[role]).html(' ');
}
count += 1;
});
});
}
$('div.boxes-role').draggable({
revert: 'invalid',
helper: 'clone',
zIndex: 1000,
opacity: 0.5
});
$('div.boxes-drop').droppable({
accept: 'div.boxes-role',
activeClass: 'boxes-drop-active',
hoverClass: 'boxes-drop-hover',
tolerance: 'touch',
drop: function (ev, ui) {
ui.draggable.appendTo($(this).parent().prev('.boxes-drop-roles'));
var $count = ui.draggable.find('input.number-picker');
if (+$count.val() < 1) { $count.val(1); }
ui.draggable.find('input.boxes-flavor'
).val($(this).closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
}
});
$('div.boxes-available-roles').droppable({
accept: 'div.boxes-role',
activeClass: 'boxes-drop-active',
hoverClass: 'boxes-drop-hover',
tolerance: 'touch',
drop: function (ev, ui) {
ui.draggable.appendTo(this);
ui.draggable.find('input.boxes-flavor').val('');
ui.draggable.find('input.number-picker').trigger('change').val(0);
window.setTimeout(update_boxes, 0);
}
});
update_boxes();
$('input.number-picker').change(update_boxes);
$('.boxes-roles-menu li a').click(function () {
var name = $(this).data('role');
var $drop = $(this).closest('.boxes-drop-group').prev('.boxes-drop-roles');
var $role = $('.boxes-role[data-name="' + name + '"]');
var $count = $role.find('input.number-picker');
var $flavor = $role.find('input.boxes-flavor');
$role.appendTo($drop);
if (+$count.val() < 1) { $count.val(1); }
$flavor.val($drop.closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
});
};
horizon.addInitFunction(module.init);
return module;
} ());

98
tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss Normal file
View File

@ -0,0 +1,98 @@
.boxes-roles-menu {
position: absolute;
z-index: 1000;
width: 100%;
left: 0;
top: 48px;
}
.boxes-node {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 2px;
border: 1px solid #999;
background: #eee;
margin: 0 4px 4px 0;
text-align: center;
color: #666;
padding: 20px 4px 0 4px;
}
.boxes-available-roles {
border-radius: 4px;
border: 1px dashed #666;
min-height: 42px;
min-width: 120px;
display: inline-block;
padding: 4px 0 0 4px;
}
.boxes-role {
opacity: 0.75;
padding: 6px;
border: 1px solid;
cursor: move;
border-radius: 2px;
background-color: #fce94f;
border-color: #edd400;
color: #c4a000;
margin: 0 0 4px 0;
}
.boxes-available-roles .boxes-role {
display: inline-block;
text-align: center;
width: 120px;
margin: 0 4px 4px 0;
border: 1px solid #999;
background: #eee;
color: #666;
}
.boxes-available-roles .boxes-role .form-control {
display: none;
}
.boxes-role-controller {
background-color: #fcaf3e;
border-color: #f57900;
color: #ce5c00;
}
.boxes-role-compute {
background-color: #8ae234;
border-color: #73d216;
color: #4e9a06;
}
.boxes-role-swift-storage {
background-color: #729fcf;
border-color: #3465a4;
color: #204a87;
}
.boxes-role-cinder-storage {
background-color: #ad7fa8;
border-color: #75507b;
color: #5c3566;
}
.boxes-role .number_picker {
border-color: inherit;
}
.boxes-role .number_picker,
.boxes-role .number_picker a {
color: inherit;
}
.boxes-drop-group {
width: 100%;
}
.boxes-drop {
position: relative;
padding: 6px;
border: 1px dashed;
text-align: center;
border-radius: 4px;
border-color: #666;
color: #444;
cursor: pointer;
}
.boxes-drop-active {
background-color: #eee;
border-style: solid;
}
.boxes-drop-hover {
background-color: #999;
border-style: solid;
}

15
tuskar_boxes/templates/tuskar_boxes/overview/index.html
View File

@ -2,6 +2,21 @@
{% load i18n %}
{% load url from future %}
{% block css %}
{{block.super}}
{% load compress %}
{% compress css %}
<link href='{{ STATIC_URL }}tuskar_boxes/scss/tuskar_boxes.scss' type='text/scss' media='screen' rel='stylesheet' />
{% endcompress %}
{% endblock %}
{% block js %}
{{ block.super }}
<script src='{{ STATIC_URL }}tuskar_boxes/js/tuskar.boxes.js' type='text/javascript' charset='utf-8'></script>
{% endblock %}
{% block title %}{% trans 'My OpenStack Deployment' %}{% endblock %}
{% block page_header %}

190
tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
View File

@ -69,193 +69,3 @@
{% trans "Save changes" %}
</button>
</form>
<script type="text/javascript">
(window.$ || window.addHorizonLoadEvent)(function () {
function get_role_counts($flavor) {
var roles = {};
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var name = $this.data('name');
var count = +$this.find('input.number-picker').val();
roles[name] = count;
});
return roles;
}
function update_boxes() {
$('div.boxes-flavor').each(function () {
var $flavor = $(this);
var roles = get_role_counts($flavor);
var role_names = Object.getOwnPropertyNames(roles);
var count = 0;
var role = 0;
$flavor.find('div.boxes-nodes div.boxes-node').each(function () {
var $this = $(this);
$this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage');
while (count >= roles[role_names[role]]) {
role += 1;
count = 0;
}
if (!role_names[role]) {
$(this).html('free');
} else {
$this.addClass('boxes-role-' + role_names[role]).html('&nbsp;');
}
count += 1;
});
});
}
$('div.boxes-role').draggable({
revert: 'invalid',
helper: 'clone',
zIndex: 1000,
opacity: 0.5
});
$('div.boxes-drop').droppable({
accept: 'div.boxes-role',
activeClass: 'boxes-drop-active',
hoverClass: 'boxes-drop-hover',
tolerance: 'touch',
drop: function (ev, ui) {
ui.draggable.appendTo($(this).parent().prev('.boxes-drop-roles'));
var $count = ui.draggable.find('input.number-picker');
if (+$count.val() < 1) { $count.val(1); }
ui.draggable.find('input.boxes-flavor'
).val($(this).closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
}
});
$('div.boxes-available-roles').droppable({
accept: 'div.boxes-role',
activeClass: 'boxes-drop-active',
hoverClass: 'boxes-drop-hover',
tolerance: 'touch',
drop: function (ev, ui) {
ui.draggable.appendTo(this);
ui.draggable.find('input.boxes-flavor').val('');
ui.draggable.find('input.number-picker').trigger('change').val(0);
window.setTimeout(update_boxes, 0);
}
});
update_boxes();
$('input.number-picker').change(update_boxes);
$('.boxes-roles-menu li a').click(function () {
var name = $(this).data('role');
var $drop = $(this).closest('.boxes-drop-group').prev('.boxes-drop-roles');
var $role = $('.boxes-role[data-name="' + name + '"]');
var $count = $role.find('input.number-picker');
var $flavor = $role.find('input.boxes-flavor');
$role.appendTo($drop);
if (+$count.val() < 1) { $count.val(1); }
$flavor.val($drop.closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
});
});
</script>
<style type="text/css">
.boxes-roles-menu {
position: absolute;
z-index: 1000;
width: 100%;
left: 0;
top: 48px;
}
.boxes-node {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 2px;
border: 1px solid #999;
background: #eee;
margin: 0 4px 4px 0;
text-align: center;
color: #666;
padding: 20px 4px 0 4px;
}
.boxes-available-roles {
border-radius: 4px;
border: 1px dashed #666;
min-height: 42px;
min-width: 120px;
display: inline-block;
padding: 4px 0 0 4px;
}
.boxes-role {
opacity: 0.75;
padding: 6px;
border: 1px solid;
cursor: move;
border-radius: 2px;
background-color: #fce94f;
border-color: #edd400;
color: #c4a000;
margin: 0 0 4px 0;
}
.boxes-available-roles .boxes-role {
display: inline-block;
text-align: center;
width: 120px;
margin: 0 4px 4px 0;
border: 1px solid #999;
background: #eee;
color: #666;
}
.boxes-available-roles .boxes-role .form-control {
display: none;
}
.boxes-role-controller {
background-color: #fcaf3e;
border-color: #f57900;
color: #ce5c00;
}
.boxes-role-compute {
background-color: #8ae234;
border-color: #73d216;
color: #4e9a06;
}
.boxes-role-swift-storage {
background-color: #729fcf;
border-color: #3465a4;
color: #204a87;
}
.boxes-role-cinder-storage {
background-color: #ad7fa8;
border-color: #75507b;
color: #5c3566;
}
.boxes-role .number_picker {
border-color: inherit;
}
.boxes-role .number_picker,
.boxes-role .number_picker a {
color: inherit;
}
.boxes-drop-group {
width: 100%;
}
.boxes-drop {
position: relative;
padding: 6px;
border: 1px dashed;
text-align: center;
border-radius: 4px;
border-color: #666;
color: #444;
cursor: pointer;
}
.boxes-drop-active {
background-color: #eee;
border-style: solid;
}
.boxes-drop-hover {
background-color: #999;
border-style: solid;
}
</style>