Commit bf5e2383 by Őry Máté

dashboard: merge from dashboard

parent 0997c609
...@@ -229,6 +229,7 @@ LOCAL_APPS = ( ...@@ -229,6 +229,7 @@ LOCAL_APPS = (
'storage', 'storage',
'firewall', 'firewall',
'network', 'network',
'dashboard',
) )
# See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps # See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps
......
...@@ -15,4 +15,5 @@ urlpatterns = patterns('', ...@@ -15,4 +15,5 @@ urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)), url(r'^admin/', include(admin.site.urls)),
url(r'^network/', include('network.urls')), url(r'^network/', include('network.urls')),
url(r'^dashboard/', include('dashboard.urls')),
) )
from django.db import models
# Create your models here.
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set widths on the navbar form inputs since otherwise they're 100% wide */
.navbar-form input[type="text"],
.navbar-form input[type="password"] {
width: 180px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Let the jumbotron breathe */
.container > :first-child {
margin-top: 20px;
}
/* Remove padding from wrapping element since we kick in the grid classes here */
.body-content {
padding: 0;
}
}
.no-margin {
margin: 0!important;
}
.list-group .list-group-footer {
padding-top: 5px;
padding-bottom: 5px;
}
.big {
font-size: 2em;
}
.bigbig {
font-size: 3em;
}
.timeline {
border-left: 4px #428bca solid;
margin-left: 20px;
padding-left: 20px;
}
.timeline > div {
margin: 0;
padding: 0;
margin-left: -34px;
margin-bottom: .5em;
line-height: 24px;
}
.timeline > div:last-child {
margin-bottom: 0;
}
.timeline .timeline-icon {
margin: 0;
padding: 0;
width: 24px;
height: 24px;
text-align: center;
display: inline-block;
border-radius: 50%;
background-color: #428bca;
color: #fff;
}
.timeline-icon.timeline-warning {
border-color: #c09853;
border-style: solid;
border-width: 2px;
background-color: white;
color: #c09853;
line-height: 20px;
}
.timeline .timeline-icon.timeline-nobg {
background-color: transparent;
}
.table-with-form-fields tbody tr td {
line-height: 34px;
}
#vm-detail-panel .panel-body {
min-height: 20em;
}
:link i:before:hover {
text-decoration: none !important;
}
.slider {
display: inline-block;
}
.slider .track {
height: 20px;
top: 50%;
}
.slider > .dragger, .slider > .dragger:hover {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width: 8px;
height: 24px;
margin-top: -12px!important;
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
}
.slider > .dragger:hover {
background-color: #3071a9;
background-image: none;
border-color: #2d6ca2;
}
.slider > .highlight-track {
height: 20px;
top: 50%;
}
.slider + .output {
}
.rule-table tr >:nth-child(1) {
text-align: right;
}
.rule-table tr >:nth-child(2) {
text-align: center;
}
.dashboard-index .panel {
height: 300px;
}
$(function () {
$('[href=#vm-graph-view]').click(function (e) {
$('#vm-list-view').hide();
$('#vm-graph-view').show();
$('[href=#vm-list-view]').removeClass('disabled');
$('[href=#vm-graph-view]').addClass('disabled');
e.stopImmediatePropagation();
return false;
});
$('[href=#vm-list-view]').click(function (e) {
$('#vm-graph-view').hide();
$('#vm-list-view').show();
$('[href=#vm-list-view]').addClass('disabled');
$('[href=#vm-graph-view]').removeClass('disabled');
e.stopImmediatePropagation();
return false;
}).addClass('disabled');
$('[title]').tooltip();
$(':input[title]').tooltip({trigger: 'focus', placement: 'auto right'});
$(".knob").knob();
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.html($(this).val())
.insertAfter(input);
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
$("[data-mark]")
.each(function () {
var value=$(this).attr('data-mark').parseFloat();
});
});
/*!jQuery Knob*/
/**
* Downward compatible, touchable dial
*
* Version: 1.2.0 (15/07/2012)
* Requires: jQuery v1.7+
*
* Copyright (c) 2012 Anthony Terrien
* Under MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
*/
(function($) {
/**
* Kontrol library
*/
"use strict";
/**
* Definition of globals and core
*/
var k = {}, // kontrol
max = Math.max,
min = Math.min;
k.c = {};
k.c.d = $(document);
k.c.t = function (e) {
return e.originalEvent.touches.length - 1;
};
/**
* Kontrol Object
*
* Definition of an abstract UI control
*
* Each concrete component must call this one.
* <code>
* k.o.call(this);
* </code>
*/
k.o = function () {
var s = this;
this.o = null; // array of options
this.$ = null; // jQuery wrapped element
this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
this.g = null; // 2D graphics context for 'pre-rendering'
this.v = null; // value ; mixed array or integer
this.cv = null; // change value ; not commited value
this.x = 0; // canvas x position
this.y = 0; // canvas y position
this.$c = null; // jQuery canvas element
this.c = null; // rendered canvas context
this.t = 0; // touches index
this.isInit = false;
this.fgColor = null; // main color
this.pColor = null; // previous color
this.dH = null; // draw hook
this.cH = null; // change hook
this.eH = null; // cancel hook
this.rH = null; // release hook
this.scale = 1; // scale factor
this.run = function () {
var cf = function (e, conf) {
var k;
for (k in conf) {
s.o[k] = conf[k];
}
s.init();
s._configure()
._draw();
};
if(this.$.data('kontroled')) return;
this.$.data('kontroled', true);
this.extend();
this.o = $.extend(
{
// Config
min : this.$.data('min') || 0,
max : this.$.data('max') || 100,
stopper : true,
readOnly : this.$.data('readonly'),
// UI
cursor : (this.$.data('cursor') === true && 30)
|| this.$.data('cursor')
|| 0,
thickness : this.$.data('thickness') || 0.35,
lineCap : this.$.data('linecap') || 'butt',
width : this.$.data('width') || 200,
height : this.$.data('height') || 200,
displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
displayPrevious : this.$.data('displayprevious'),
fgColor : this.$.data('fgcolor') || '#87CEEB',
inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB',
inline : false,
step : this.$.data('step') || 1,
// Hooks
draw : null, // function () {}
change : null, // function (value) {}
cancel : null, // function () {}
release : null, // function (value) {}
error : null // function () {}
}, this.o
);
// routing value
if(this.$.is('fieldset')) {
// fieldset = array of integer
this.v = {};
this.i = this.$.find('input')
this.i.each(function(k) {
var $this = $(this);
s.i[k] = $this;
s.v[k] = $this.val();
$this.bind(
'change'
, function () {
var val = {};
val[k] = $this.val();
s.val(val);
}
);
});
this.$.find('legend').remove();
} else {
// input = integer
this.i = this.$;
this.v = this.$.val();
(this.v == '') && (this.v = this.o.min);
this.$.bind(
'change'
, function () {
s.val(s._validate(s.$.val()));
}
);
}
(!this.o.displayInput) && this.$.hide();
this.$c = $('<canvas width="' +
this.o.width + 'px" height="' +
this.o.height + 'px"></canvas>');
this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null;
if (!this.c) {
this.o.error && this.o.error();
return;
}
this.$
.wrap($('<div style="' + (this.o.inline ? 'display:inline;' : '') +
'width:' + this.o.width + 'px;height:' +
this.o.height + 'px;"></div>'))
.before(this.$c);
this.scale = (window.devicePixelRatio || 1) /
(
this.c.webkitBackingStorePixelRatio ||
this.c.mozBackingStorePixelRatio ||
this.c.msBackingStorePixelRatio ||
this.c.oBackingStorePixelRatio ||
this.c.backingStorePixelRatio || 1
);
if (this.scale !== 1) {
this.$c[0].width = this.$c[0].width * this.scale;
this.$c[0].height = this.$c[0].height * this.scale;
this.$c.width(this.o.width);
this.$c.height(this.o.height);
}
if (this.v instanceof Object) {
this.cv = {};
this.copy(this.v, this.cv);
} else {
this.cv = this.v;
}
this.$
.bind("configure", cf)
.parent()
.bind("configure", cf);
this._listen()
._configure()
._xy()
.init();
this.isInit = true;
this._draw();
return this;
};
this._draw = function () {
// canvas pre-rendering
var d = true,
c = document.createElement('canvas');
c.width = s.o.width * s.scale;
c.height = s.o.height * s.scale;
s.g = c.getContext('2d');
s.clear();
s.dH
&& (d = s.dH());
(d !== false) && s.draw();
s.c.drawImage(c, 0, 0);
c = null;
};
this._touch = function (e) {
var touchMove = function (e) {
var v = s.xy2val(
e.originalEvent.touches[s.t].pageX,
e.originalEvent.touches[s.t].pageY
);
if (v == s.cv) return;
if (
s.cH
&& (s.cH(v) === false)
) return;
s.change(s._validate(v));
s._draw();
};
// get touches index
this.t = k.c.t(e);
// First touch
touchMove(e);
// Touch events listeners
k.c.d
.bind("touchmove.k", touchMove)
.bind(
"touchend.k"
, function () {
k.c.d.unbind('touchmove.k touchend.k');
if (
s.rH
&& (s.rH(s.cv) === false)
) return;
s.val(s.cv);
}
);
return this;
};
this._mouse = function (e) {
var mouseMove = function (e) {
var v = s.xy2val(e.pageX, e.pageY);
if (v == s.cv) return;
if (
s.cH
&& (s.cH(v) === false)
) return;
s.change(s._validate(v));
s._draw();
};
// First click
mouseMove(e);
// Mouse events listeners
k.c.d
.bind("mousemove.k", mouseMove)
.bind(
// Escape key cancel current change
"keyup.k"
, function (e) {
if (e.keyCode === 27) {
k.c.d.unbind("mouseup.k mousemove.k keyup.k");
if (
s.eH
&& (s.eH() === false)
) return;
s.cancel();
}
}
)
.bind(
"mouseup.k"
, function (e) {
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
if (
s.rH
&& (s.rH(s.cv) === false)
) return;
s.val(s.cv);
}
);
return this;
};
this._xy = function () {
var o = this.$c.offset();
this.x = o.left;
this.y = o.top;
return this;
};
this._listen = function () {
if (!this.o.readOnly) {
this.$c
.bind(
"mousedown"
, function (e) {
e.preventDefault();
s._xy()._mouse(e);
}
)
.bind(
"touchstart"
, function (e) {
e.preventDefault();
s._xy()._touch(e);
}
);
this.listen();
} else {
this.$.attr('readonly', 'readonly');
}
return this;
};
this._configure = function () {
// Hooks
if (this.o.draw) this.dH = this.o.draw;
if (this.o.change) this.cH = this.o.change;
if (this.o.cancel) this.eH = this.o.cancel;
if (this.o.release) this.rH = this.o.release;
if (this.o.displayPrevious) {
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
} else {
this.fgColor = this.o.fgColor;
}
return this;
};
this._clear = function () {
this.$c[0].width = this.$c[0].width;
};
this._validate = function(v) {
return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
};
// Abstract methods
this.listen = function () {}; // on start, one time
this.extend = function () {}; // each time configure triggered
this.init = function () {}; // each time configure triggered
this.change = function (v) {}; // on change
this.val = function (v) {}; // on release
this.xy2val = function (x, y) {}; //
this.draw = function () {}; // on change / on release
this.clear = function () { this._clear(); };
// Utils
this.h2rgba = function (h, a) {
var rgb;
h = h.substring(1,7)
rgb = [parseInt(h.substring(0,2),16)
,parseInt(h.substring(2,4),16)
,parseInt(h.substring(4,6),16)];
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
};
this.copy = function (f, t) {
for (var i in f) { t[i] = f[i]; }
};
};
/**
* k.Dial
*/
k.Dial = function () {
k.o.call(this);
this.startAngle = null;
this.xy = null;
this.radius = null;
this.lineWidth = null;
this.cursorExt = null;
this.w2 = null;
this.PI2 = 2*Math.PI;
this.extend = function () {
this.o = $.extend(
{
bgColor : this.$.data('bgcolor') || '#EEEEEE',
angleOffset : this.$.data('angleoffset') || 0,
angleArc : this.$.data('anglearc') || 360,
inline : true
}, this.o
);
};
this.val = function (v) {
if (null != v) {
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
this.v = this.cv;
this.$.val(this.v);
this._draw();
} else {
return this.v;
}
};
this.xy2val = function (x, y) {
var a, ret;
a = Math.atan2(
x - (this.x + this.w2)
, - (y - this.y - this.w2)
) - this.angleOffset;
if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
// if isset angleArc option, set to min if .5 under min
a = 0;
} else if (a < 0) {
a += this.PI2;
}
ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
+ this.o.min;
this.o.stopper
&& (ret = max(min(ret, this.o.max), this.o.min));
return ret;
};
this.listen = function () {
// bind MouseWheel
var s = this,
mw = function (e) {
e.preventDefault();
var ori = e.originalEvent
,deltaX = ori.detail || ori.wheelDeltaX
,deltaY = ori.detail || ori.wheelDeltaY
,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
if (
s.cH
&& (s.cH(v) === false)
) return;
s.val(v);
}
, kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
this.$
.bind(
"keydown"
,function (e) {
var kc = e.keyCode;
// numpad support
if(kc >= 96 && kc <= 105) {
kc = e.keyCode = kc - 48;
}
kval = parseInt(String.fromCharCode(kc));
if (isNaN(kval)) {
(kc !== 13) // enter
&& (kc !== 8) // bs
&& (kc !== 9) // tab
&& (kc !== 189) // -
&& e.preventDefault();
// arrows
if ($.inArray(kc,[37,38,39,40]) > -1) {
e.preventDefault();
var v = parseInt(s.$.val()) + kv[kc] * m;
s.o.stopper
&& (v = max(min(v, s.o.max), s.o.min));
s.change(v);
s._draw();
// long time keydown speed-up
to = window.setTimeout(
function () { m*=2; }
,30
);
}
}
}
)
.bind(
"keyup"
,function (e) {
if (isNaN(kval)) {
if (to) {
window.clearTimeout(to);
to = null;
m = 1;
s.val(s.$.val());
}
} else {
// kval postcond
(s.$.val() > s.o.max && s.$.val(s.o.max))
|| (s.$.val() < s.o.min && s.$.val(s.o.min));
}
}
);
this.$c.bind("mousewheel DOMMouseScroll", mw);
this.$.bind("mousewheel DOMMouseScroll", mw)
};
this.init = function () {
if (
this.v < this.o.min
|| this.v > this.o.max
) this.v = this.o.min;
this.$.val(this.v);
this.w2 = this.o.width / 2;
this.cursorExt = this.o.cursor / 100;
this.xy = this.w2 * this.scale;
this.lineWidth = this.xy * this.o.thickness;
this.lineCap = this.o.lineCap;
this.radius = this.xy - this.lineWidth / 2;
this.o.angleOffset
&& (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
this.o.angleArc
&& (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
// deg to rad
this.angleOffset = this.o.angleOffset * Math.PI / 180;
this.angleArc = this.o.angleArc * Math.PI / 180;
// compute start and end angles
this.startAngle = 1.5 * Math.PI + this.angleOffset;
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
var s = max(
String(Math.abs(this.o.max)).length
, String(Math.abs(this.o.min)).length
, 2
) + 2;
this.o.displayInput
&& this.i.css({
'width' : ((this.o.width / 2 + 4) >> 0) + 'px'
,'height' : ((this.o.width / 3) >> 0) + 'px'
,'position' : 'absolute'
,'vertical-align' : 'middle'
,'margin-top' : ((this.o.width / 3) >> 0) + 'px'
,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px'
,'border' : 0
,'background' : 'none'
,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial'
,'text-align' : 'center'
,'color' : this.o.inputColor || this.o.fgColor
,'padding' : '0px'
,'-webkit-appearance': 'none'
})
|| this.i.css({
'width' : '0px'
,'visibility' : 'hidden'
});
};
this.change = function (v) {
this.cv = v;
this.$.val(v);
};
this.angle = function (v) {
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
};
this.draw = function () {
var c = this.g, // context
a = this.angle(this.cv) // Angle
, sat = this.startAngle // Start angle
, eat = sat + a // End angle
, sa, ea // Previous angles
, r = 1;
c.lineWidth = this.lineWidth;
c.lineCap = this.lineCap;
this.o.cursor
&& (sat = eat - this.cursorExt)
&& (eat = eat + this.cursorExt);
c.beginPath();
c.strokeStyle = this.o.bgColor;
c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true);
c.stroke();
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
sa = this.startAngle;
this.o.cursor
&& (sa = ea - this.cursorExt)
&& (ea = ea + this.cursorExt);
c.beginPath();
c.strokeStyle = this.pColor;
c.arc(this.xy, this.xy, this.radius, sa, ea, false);
c.stroke();
r = (this.cv == this.v);
}
c.beginPath();
c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
c.arc(this.xy, this.xy, this.radius, sat, eat, false);
c.stroke();
};
this.cancel = function () {
this.val(this.v);
};
};
$.fn.dial = $.fn.knob = function (o) {
return this.each(
function () {
var d = new k.Dial();
d.o = o;
d.$ = $(this);
d.run();
}
).parent();
};
})(jQuery);
\ No newline at end of file
node_modules/
*.zip
gh-pages
\ No newline at end of file
jQuery Simple Slider: Unobtrusive Numerical Slider
==================================================
SimpleSlider is a jQuery plugin for turning your text inputs into draggable
numerical sliders.
It has no external dependencies other than jQuery, and you don't need to write
a single line of JavaScript to get it to work.
How to Use
-----------
Include the javascript file in your page:
<script src="simple-slider.js"></script>
Turn your text input into a slider:
<input type="text" data-slider="true">
Documentation, Features and Demos
---------------------------------
Full details and documentation can be found on the project page here:
<http://loopj.com/jquery-simple-slider/>
\ No newline at end of file
.slider {
width: 300px;
}
.slider > .dragger {
background: #8DCA09;
background: -webkit-linear-gradient(top, #8DCA09, #72A307);
background: -moz-linear-gradient(top, #8DCA09, #72A307);
background: linear-gradient(top, #8DCA09, #72A307);
-webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #496805;
width: 16px;
height: 16px;
}
.slider > .dragger:hover {
background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
}
.slider > .track, .slider > .highlight-track {
background: #ccc;
background: -webkit-linear-gradient(top, #bbb, #ddd);
background: -moz-linear-gradient(top, #bbb, #ddd);
background: linear-gradient(top, #bbb, #ddd);
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #aaa;
height: 4px;
}
.slider > .highlight-track {
background-color: #8DCA09;
background: -webkit-linear-gradient(top, #8DCA09, #72A307);
background: -moz-linear-gradient(top, #8DCA09, #72A307);
background: linear-gradient(top, #8DCA09, #72A307);
border-color: #496805;
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/simple-slider.js"></script>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<!-- These styles are only used for this page, not required for the slider -->
<style>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
[class^=slider] { display: inline-block; margin-bottom: 30px; }
.output { color: #888; font-size: 14px; padding-top: 1px; margin-left: 5px; vertical-align: top;}
h1 { font-size: 20px; }
h2 { clear: both; margin: 0; margin-bottom: 5px; font-size: 16px; }
p { font-size: 15px; margin-bottom: 30px; }
h2:first-of-type { margin-top: 0; }
</style>
</head>
<body>
<h1>jQuery Simple Slider Examples</h1>
<p>
Here are a few examples of the functionality available in Simple Slider.
</p>
<h2>Basic Example</h2>
<input type="text" data-slider="true">
<h2>Basic Example (Themed)</h2>
<input type="text" data-slider="true" data-slider-theme="volume">
<h2>Predefined Value</h2>
<input type="text" value="0.2" data-slider="true">
<h2>Steps</h2>
<input type="text" data-slider="true" data-slider-step="0.1">
<h2>Range</h2>
<input type="text" data-slider="true" data-slider-range="10,1000">
<h2>Range &amp; Steps</h2>
<input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100">
<h2>Range, Steps &amp; Snap</h2>
<input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100" data-slider-snap="true">
<h2>Predefined List of Values</h2>
<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000">
<h2>Predefined List &amp; Snap</h2>
<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-snap="true">
<h2>Predefined List, Equal Steps &amp; Snap</h2>
<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-equal-steps="true" data-slider-snap="true">
<h2>Highlighted</h2>
<input type="text" data-slider="true" value="0.8" data-slider-highlight="true">
<h2>Highlighted (Themed)</h2>
<input type="text" data-slider="true" value="0.4" data-slider-highlight="true" data-slider-theme="volume">
<script>
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
</script>
</body>
</html>
module.exports = function(grunt) {
grunt.initConfig({
pkg: '<json:package.json>',
meta: {
banner:
'/*\n' +
' * <%= pkg.title || pkg.name %>: <%= pkg.description %>\n' +
' * Version <%= pkg.version %>\n' +
' *\n' +
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> (<%= pkg.author.url %>)\n' +
' *\n' +
' * Licensed under the <%= pkg.licenses[0].type %> license (<%= pkg.licenses[0].url %>)\n' +
' *\n' +
' */\n'
},
coffee: {
compile: {
files: {
'js/<%= pkg.name %>.js': 'js/*.coffee'
},
options: {
bare: true
}
}
},
watch: {
coffee: {
files: ['js/*.coffee'],
tasks: 'coffee growl:coffee'
}
},
growl: {
coffee: {
title: 'CoffeeScript',
message: 'Compiled successfully'
}
},
min: {
dist: {
src: ['<banner:meta.banner>', 'js/<%= pkg.name %>.js'],
dest: 'js/<%= pkg.name %>.min.js'
}
},
compress: {
zip: {
files: {
"<%= pkg.name %>-<%= pkg.version %>.zip": ["js/**", "demo.html", "README.md"]
}
}
}
});
// Lib tasks.
grunt.loadNpmTasks('grunt-contrib');
grunt.loadNpmTasks('grunt-growl');
// Default task.
grunt.registerTask('build', 'coffee min');
grunt.registerTask('serve', 'server watch:coffee');
grunt.registerTask('default', 'build');
};
\ No newline at end of file
###
jQuery Simple Slider
Copyright (c) 2012 James Smith (http://loopj.com)
Licensed under the MIT license (http://mit-license.org/)
###
(($, window) ->
#
# Main slider class
#
class SimpleSlider
# Build a slider object.
# Exposed via el.numericalSlider(options)
constructor: (@input, options) ->
# Load in the settings
@defaultOptions =
animate: true
snapMid: false
classPrefix: null
classSuffix: null
theme: null
highlight: false
@settings = $.extend({}, @defaultOptions, options)
@settings.classSuffix = "-#{@settings.theme}" if @settings.theme
# Hide the original input
@input.hide()
# Create the slider canvas
@slider = $("<div>")
.addClass("slider"+(@settings.classSuffix || ""))
.css
position: "relative"
userSelect: "none"
boxSizing: "border-box"
.insertBefore @input
@slider.attr("id", @input.attr("id") + "-slider") if @input.attr("id")
@track = @createDivElement("track")
.css
width: "100%"
if @settings.highlight
# Create the highlighting track on top of the track
@highlightTrack = @createDivElement("highlight-track")
.css
width: "0"
# Create the slider drag target
@dragger = @createDivElement("dragger")
# Adjust dimensions now elements are in the DOM
@slider.css
minHeight: @dragger.outerHeight()
marginLeft: @dragger.outerWidth()/2
marginRight: @dragger.outerWidth()/2
@track.css
marginTop: @track.outerHeight()/-2
if @settings.highlight
@highlightTrack.css
marginTop: @track.outerHeight()/-2
@dragger.css
marginTop: @dragger.outerWidth()/-2
marginLeft: @dragger.outerWidth()/-2
# Hook up drag/drop mouse events
@track
.mousedown (e) =>
@trackEvent(e)
if @settings.highlight
@highlightTrack
.mousedown (e) =>
@trackEvent(e)
@dragger
.mousedown (e) =>
return unless e.which == 1
# We've started moving
@dragging = true
@dragger.addClass "dragging"
# Update the slider position
@domDrag(e.pageX, e.pageY)
false
$("body")
.mousemove (e) =>
if @dragging
# Update the slider position
@domDrag(e.pageX, e.pageY)
# Always show a pointer when dragging
$("body").css cursor: "pointer"
.mouseup (e) =>
if @dragging
# Finished dragging
@dragging = false
@dragger.removeClass "dragging"
# Revert the cursor
$("body").css cursor: "auto"
# Set slider initial position
@pagePos = 0
# Fill in initial slider value
if @input.val() == ""
@value = @getRange().min
@input.val(@value)
else
@value = @nearestValidValue(@input.val())
@setSliderPositionFromValue(@value)
# We are ready to go
ratio = @valueToRatio(@value)
@input.trigger "slider:ready",
value: @value
ratio: ratio
position: ratio * @slider.outerWidth()
el: @slider
# Create the basis of the track-div(s)
createDivElement: (classname) ->
item = $("<div>")
.addClass(classname)
.css
position: "absolute"
top: "50%"
userSelect: "none"
cursor: "pointer"
.appendTo @slider
return item
# Set the ratio (value between 0 and 1) of the slider.
# Exposed via el.slider("setRatio", ratio)
setRatio: (ratio) ->
# Range-check the ratio
ratio = Math.min(1, ratio)
ratio = Math.max(0, ratio)
# Work out the value
value = @ratioToValue(ratio)
# Update the position of the slider on the screen
@setSliderPositionFromValue(value)
# Trigger value changed events
@valueChanged(value, ratio, "setRatio")
# Set the value of the slider
# Exposed via el.slider("setValue", value)
setValue: (value) ->
# Snap value to nearest step or allowedValue
value = @nearestValidValue(value)
# Work out the ratio
ratio = @valueToRatio(value)
# Update the position of the slider on the screen
@setSliderPositionFromValue(value)
# Trigger value changed events
@valueChanged(value, ratio, "setValue")
# Respond to an event on a track
trackEvent: (e) ->
return unless e.which == 1
@domDrag(e.pageX, e.pageY, true)
@dragging = true
false
# Respond to a dom drag event
domDrag: (pageX, pageY, animate=false) ->
# Normalize position within allowed range
pagePos = pageX - @slider.offset().left
pagePos = Math.min(@slider.outerWidth(), pagePos)
pagePos = Math.max(0, pagePos)
# If the element position has changed, do stuff
if @pagePos != pagePos
@pagePos = pagePos
# Set the percentage value of the slider
ratio = pagePos / @slider.outerWidth()
# Trigger value changed events
value = @ratioToValue(ratio)
@valueChanged(value, ratio, "domDrag")
# Update the position of the slider on the screen
if @settings.snap
@setSliderPositionFromValue(value, animate)
else
@setSliderPosition(pagePos, animate)
# Set the slider position given a slider canvas position
setSliderPosition: (position, animate=false) ->
if animate and @settings.animate
@dragger.animate left: position, 200
@highlightTrack.animate width: position, 200 if @settings.highlight
else
@dragger.css left: position
@highlightTrack.css width: position if @settings.highlight
# Set the slider position given a value
setSliderPositionFromValue: (value, animate=false) ->
# Get the slide ratio from the value
ratio = @valueToRatio(value)
# Set the slider position
@setSliderPosition(ratio * @slider.outerWidth(), animate)
# Get the valid range of values
getRange: ->
if @settings.allowedValues
min: Math.min(@settings.allowedValues...)
max: Math.max(@settings.allowedValues...)
else if @settings.range
min: parseFloat(@settings.range[0])
max: parseFloat(@settings.range[1])
else
min: 0
max: 1
# Find the nearest valid value, checking allowedValues and step settings
nearestValidValue: (rawValue) ->
range = @getRange()
# Range-check the value
rawValue = Math.min(range.max, rawValue)
rawValue = Math.max(range.min, rawValue)
# Apply allowedValues or step settings
if @settings.allowedValues
closest = null
$.each @settings.allowedValues, ->
if closest == null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)
closest = this
return closest
else if @settings.step
maxSteps = (range.max - range.min) / @settings.step
steps = Math.floor((rawValue - range.min) / @settings.step)
steps += 1 if (rawValue - range.min) % @settings.step > @settings.step / 2 and steps < maxSteps
return steps * @settings.step + range.min
else
return rawValue
# Convert a value to a ratio
valueToRatio: (value) ->
if @settings.equalSteps
# Get slider ratio for equal-step
for allowedVal, idx in @settings.allowedValues
if !closest? || Math.abs(allowedVal - value) < Math.abs(closest - value)
closest = allowedVal
closestIdx = idx
if @settings.snapMid
(closestIdx+0.5)/@settings.allowedValues.length
else
(closestIdx)/(@settings.allowedValues.length - 1)
else
# Get slider ratio for continuous values
range = @getRange()
(value - range.min) / (range.max - range.min)
# Convert a ratio to a valid value
ratioToValue: (ratio) ->
if @settings.equalSteps
steps = @settings.allowedValues.length
step = Math.round(ratio * steps - 0.5)
idx = Math.min(step, @settings.allowedValues.length - 1)
@settings.allowedValues[idx]
else
range = @getRange()
rawValue = ratio * (range.max - range.min) + range.min
@nearestValidValue(rawValue)
# Trigger value changed events
valueChanged: (value, ratio, trigger) ->
return if value.toString() == @value.toString()
# Save the new value
@value = value
# Construct event data and fire event
eventData =
value: value
ratio: ratio
position: ratio * @slider.outerWidth()
trigger: trigger
el: @slider
@input
.val(value)
.trigger($.Event("change", eventData))
.trigger("slider:changed", eventData)
#
# Expose as jQuery Plugin
#
$.extend $.fn, simpleSlider: (settingsOrMethod, params...) ->
publicMethods = ["setRatio", "setValue"]
$(this).each ->
if settingsOrMethod and settingsOrMethod in publicMethods
obj = $(this).data("slider-object")
obj[settingsOrMethod].apply(obj, params)
else
settings = settingsOrMethod
$(this).data "slider-object", new SimpleSlider($(this), settings)
#
# Attach unobtrusive JS hooks
#
$ ->
$("[data-slider]").each ->
$el = $(this)
# Build options object from data attributes
settings = {}
allowedValues = $el.data "slider-values"
settings.allowedValues = (parseFloat(x) for x in allowedValues.split(",")) if allowedValues
settings.range = $el.data("slider-range").split(",") if $el.data("slider-range")
settings.step = $el.data("slider-step") if $el.data("slider-step")
settings.snap = $el.data("slider-snap")
settings.equalSteps = $el.data("slider-equal-steps")
settings.theme = $el.data("slider-theme") if $el.data("slider-theme")
settings.highlight = $el.data("slider-highlight") if $el.attr("data-slider-highlight")
settings.animate = $el.data("slider-animate") if $el.data("slider-animate")?
# Activate the plugin
$el.simpleSlider settings
) @jQuery or @Zepto, this
/*
jQuery Simple Slider
Copyright (c) 2012 James Smith (http://loopj.com)
Licensed under the MIT license (http://mit-license.org/)
*/
var __slice = [].slice,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
(function($, window) {
var SimpleSlider;
SimpleSlider = (function() {
function SimpleSlider(input, options) {
var ratio,
_this = this;
this.input = input;
this.defaultOptions = {
animate: true,
snapMid: false,
classPrefix: null,
classSuffix: null,
theme: null,
highlight: false
};
this.settings = $.extend({}, this.defaultOptions, options);
if (this.settings.theme) {
this.settings.classSuffix = "-" + this.settings.theme;
}
this.input.hide();
this.slider = $("<div>").addClass("slider" + (this.settings.classSuffix || "")).css({
position: "relative",
userSelect: "none",
boxSizing: "border-box"
}).insertBefore(this.input);
if (this.input.attr("id")) {
this.slider.attr("id", this.input.attr("id") + "-slider");
}
this.track = this.createDivElement("track").css({
width: "100%"
});
if (this.settings.highlight) {
this.highlightTrack = this.createDivElement("highlight-track").css({
width: "0"
});
}
this.dragger = this.createDivElement("dragger");
this.slider.css({
minHeight: this.dragger.outerHeight(),
marginLeft: this.dragger.outerWidth() / 2,
marginRight: this.dragger.outerWidth() / 2
});
this.track.css({
marginTop: this.track.outerHeight() / -2
});
if (this.settings.highlight) {
this.highlightTrack.css({
marginTop: this.track.outerHeight() / -2
});
}
this.dragger.css({
marginTop: this.dragger.outerWidth() / -2,
marginLeft: this.dragger.outerWidth() / -2
});
this.track.mousedown(function(e) {
return _this.trackEvent(e);
});
if (this.settings.highlight) {
this.highlightTrack.mousedown(function(e) {
return _this.trackEvent(e);
});
}
this.dragger.mousedown(function(e) {
if (e.which !== 1) {
return;
}
_this.dragging = true;
_this.dragger.addClass("dragging");
_this.domDrag(e.pageX, e.pageY);
return false;
});
$("body").mousemove(function(e) {
if (_this.dragging) {
_this.domDrag(e.pageX, e.pageY);
return $("body").css({
cursor: "pointer"
});
}
}).mouseup(function(e) {
if (_this.dragging) {
_this.dragging = false;
_this.dragger.removeClass("dragging");
return $("body").css({
cursor: "auto"
});
}
});
this.pagePos = 0;
if (this.input.val() === "") {
this.value = this.getRange().min;
this.input.val(this.value);
} else {
this.value = this.nearestValidValue(this.input.val());
}
this.setSliderPositionFromValue(this.value);
ratio = this.valueToRatio(this.value);
this.input.trigger("slider:ready", {
value: this.value,
ratio: ratio,
position: ratio * this.slider.outerWidth(),
el: this.slider
});
}
SimpleSlider.prototype.createDivElement = function(classname) {
var item;
item = $("<div>").addClass(classname).css({
position: "absolute",
top: "50%",
userSelect: "none",
cursor: "pointer"
}).appendTo(this.slider);
return item;
};
SimpleSlider.prototype.setRatio = function(ratio) {
var value;
ratio = Math.min(1, ratio);
ratio = Math.max(0, ratio);
value = this.ratioToValue(ratio);
this.setSliderPositionFromValue(value);
return this.valueChanged(value, ratio, "setRatio");
};
SimpleSlider.prototype.setValue = function(value) {
var ratio;
value = this.nearestValidValue(value);
ratio = this.valueToRatio(value);
this.setSliderPositionFromValue(value);
return this.valueChanged(value, ratio, "setValue");
};
SimpleSlider.prototype.trackEvent = function(e) {
if (e.which !== 1) {
return;
}
this.domDrag(e.pageX, e.pageY, true);
this.dragging = true;
return false;
};
SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
var pagePos, ratio, value;
if (animate == null) {
animate = false;
}
pagePos = pageX - this.slider.offset().left;
pagePos = Math.min(this.slider.outerWidth(), pagePos);
pagePos = Math.max(0, pagePos);
if (this.pagePos !== pagePos) {
this.pagePos = pagePos;
ratio = pagePos / this.slider.outerWidth();
value = this.ratioToValue(ratio);
this.valueChanged(value, ratio, "domDrag");
if (this.settings.snap) {
return this.setSliderPositionFromValue(value, animate);
} else {
return this.setSliderPosition(pagePos, animate);
}
}
};
SimpleSlider.prototype.setSliderPosition = function(position, animate) {
if (animate == null) {
animate = false;
}
if (animate && this.settings.animate) {
this.dragger.animate({
left: position
}, 200);
if (this.settings.highlight) {
return this.highlightTrack.animate({
width: position
}, 200);
}
} else {
this.dragger.css({
left: position
});
if (this.settings.highlight) {
return this.highlightTrack.css({
width: position
});
}
}
};
SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) {
var ratio;
if (animate == null) {
animate = false;
}
ratio = this.valueToRatio(value);
return this.setSliderPosition(ratio * this.slider.outerWidth(), animate);
};
SimpleSlider.prototype.getRange = function() {
if (this.settings.allowedValues) {
return {
min: Math.min.apply(Math, this.settings.allowedValues),
max: Math.max.apply(Math, this.settings.allowedValues)
};
} else if (this.settings.range) {
return {
min: parseFloat(this.settings.range[0]),
max: parseFloat(this.settings.range[1])
};
} else {
return {
min: 0,
max: 1
};
}
};
SimpleSlider.prototype.nearestValidValue = function(rawValue) {
var closest, maxSteps, range, steps;
range = this.getRange();
rawValue = Math.min(range.max, rawValue);
rawValue = Math.max(range.min, rawValue);
if (this.settings.allowedValues) {
closest = null;
$.each(this.settings.allowedValues, function() {
if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) {
return closest = this;
}
});
return closest;
} else if (this.settings.step) {
maxSteps = (range.max - range.min) / this.settings.step;
steps = Math.floor((rawValue - range.min) / this.settings.step);
if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) {
steps += 1;
}
return steps * this.settings.step + range.min;
} else {
return rawValue;
}
};
SimpleSlider.prototype.valueToRatio = function(value) {
var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref;
if (this.settings.equalSteps) {
_ref = this.settings.allowedValues;
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
allowedVal = _ref[idx];
if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) {
closest = allowedVal;
closestIdx = idx;
}
}
if (this.settings.snapMid) {
return (closestIdx + 0.5) / this.settings.allowedValues.length;
} else {
return closestIdx / (this.settings.allowedValues.length - 1);
}
} else {
range = this.getRange();
return (value - range.min) / (range.max - range.min);
}
};
SimpleSlider.prototype.ratioToValue = function(ratio) {
var idx, range, rawValue, step, steps;
if (this.settings.equalSteps) {
steps = this.settings.allowedValues.length;
step = Math.round(ratio * steps - 0.5);
idx = Math.min(step, this.settings.allowedValues.length - 1);
return this.settings.allowedValues[idx];
} else {
range = this.getRange();
rawValue = ratio * (range.max - range.min) + range.min;
return this.nearestValidValue(rawValue);
}
};
SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) {
var eventData;
if (value.toString() === this.value.toString()) {
return;
}
this.value = value;
eventData = {
value: value,
ratio: ratio,
position: ratio * this.slider.outerWidth(),
trigger: trigger,
el: this.slider
};
return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
};
return SimpleSlider;
})();
$.extend($.fn, {
simpleSlider: function() {
var params, publicMethods, settingsOrMethod;
settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
publicMethods = ["setRatio", "setValue"];
return $(this).each(function() {
var obj, settings;
if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) {
obj = $(this).data("slider-object");
return obj[settingsOrMethod].apply(obj, params);
} else {
settings = settingsOrMethod;
return $(this).data("slider-object", new SimpleSlider($(this), settings));
}
});
}
});
return $(function() {
return $("[data-slider]").each(function() {
var $el, allowedValues, settings, x;
$el = $(this);
settings = {};
allowedValues = $el.data("slider-values");
if (allowedValues) {
settings.allowedValues = (function() {
var _i, _len, _ref, _results;
_ref = allowedValues.split(",");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
x = _ref[_i];
_results.push(parseFloat(x));
}
return _results;
})();
}
if ($el.data("slider-range")) {
settings.range = $el.data("slider-range").split(",");
}
if ($el.data("slider-step")) {
settings.step = $el.data("slider-step");
}
settings.snap = $el.data("slider-snap");
settings.equalSteps = $el.data("slider-equal-steps");
if ($el.data("slider-theme")) {
settings.theme = $el.data("slider-theme");
}
if ($el.attr("data-slider-highlight")) {
settings.highlight = $el.data("slider-highlight");
}
if ($el.data("slider-animate") != null) {
settings.animate = $el.data("slider-animate");
}
return $el.simpleSlider(settings);
});
});
})(this.jQuery || this.Zepto, this);
/*
* jQuery Simple Slider: Unobtrusive Numerical Slider
* Version 1.0.0
*
* Copyright (c) 2013 James Smith (http://loopj.com)
*
* Licensed under the MIT license (http://mit-license.org/)
*
*/
var __slice=[].slice,__indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++)if(t in this&&this[t]===e)return t;return-1};(function(e,t){var n;return n=function(){function t(t,n){var r,i=this;this.input=t,this.defaultOptions={animate:!0,snapMid:!1,classPrefix:null,classSuffix:null,theme:null,highlight:!1},this.settings=e.extend({},this.defaultOptions,n),this.settings.theme&&(this.settings.classSuffix="-"+this.settings.theme),this.input.hide(),this.slider=e("<div>").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input),this.input.attr("id")&&this.slider.attr("id",this.input.attr("id")+"-slider"),this.track=this.createDivElement("track").css({width:"100%"}),this.settings.highlight&&(this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})),this.dragger=this.createDivElement("dragger"),this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2}),this.track.css({marginTop:this.track.outerHeight()/-2}),this.settings.highlight&&this.highlightTrack.css({marginTop:this.track.outerHeight()/-2}),this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2}),this.track.mousedown(function(e){return i.trackEvent(e)}),this.settings.highlight&&this.highlightTrack.mousedown(function(e){return i.trackEvent(e)}),this.dragger.mousedown(function(e){if(e.which!==1)return;return i.dragging=!0,i.dragger.addClass("dragging"),i.domDrag(e.pageX,e.pageY),!1}),e("body").mousemove(function(t){if(i.dragging)return i.domDrag(t.pageX,t.pageY),e("body").css({cursor:"pointer"})}).mouseup(function(t){if(i.dragging)return i.dragging=!1,i.dragger.removeClass("dragging"),e("body").css({cursor:"auto"})}),this.pagePos=0,this.input.val()===""?(this.value=this.getRange().min,this.input.val(this.value)):this.value=this.nearestValidValue(this.input.val()),this.setSliderPositionFromValue(this.value),r=this.valueToRatio(this.value),this.input.trigger("slider:ready",{value:this.value,ratio:r,position:r*this.slider.outerWidth(),el:this.slider})}return t.prototype.createDivElement=function(t){var n;return n=e("<div>").addClass(t).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),n},t.prototype.setRatio=function(e){var t;return e=Math.min(1,e),e=Math.max(0,e),t=this.ratioToValue(e),this.setSliderPositionFromValue(t),this.valueChanged(t,e,"setRatio")},t.prototype.setValue=function(e){var t;return e=this.nearestValidValue(e),t=this.valueToRatio(e),this.setSliderPositionFromValue(e),this.valueChanged(e,t,"setValue")},t.prototype.trackEvent=function(e){if(e.which!==1)return;return this.domDrag(e.pageX,e.pageY,!0),this.dragging=!0,!1},t.prototype.domDrag=function(e,t,n){var r,i,s;n==null&&(n=!1),r=e-this.slider.offset().left,r=Math.min(this.slider.outerWidth(),r),r=Math.max(0,r);if(this.pagePos!==r)return this.pagePos=r,i=r/this.slider.outerWidth(),s=this.ratioToValue(i),this.valueChanged(s,i,"domDrag"),this.settings.snap?this.setSliderPositionFromValue(s,n):this.setSliderPosition(r,n)},t.prototype.setSliderPosition=function(e,t){t==null&&(t=!1);if(t&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight)return this.highlightTrack.animate({width:e},200)}else{this.dragger.css({left:e});if(this.settings.highlight)return this.highlightTrack.css({width:e})}},t.prototype.setSliderPositionFromValue=function(e,t){var n;return t==null&&(t=!1),n=this.valueToRatio(e),this.setSliderPosition(n*this.slider.outerWidth(),t)},t.prototype.getRange=function(){return this.settings.allowedValues?{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}:this.settings.range?{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}:{min:0,max:1}},t.prototype.nearestValidValue=function(t){var n,r,i,s;return i=this.getRange(),t=Math.min(i.max,t),t=Math.max(i.min,t),this.settings.allowedValues?(n=null,e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)<Math.abs(n-t))return n=this}),n):this.settings.step?(r=(i.max-i.min)/this.settings.step,s=Math.floor((t-i.min)/this.settings.step),(t-i.min)%this.settings.step>this.settings.step/2&&s<r&&(s+=1),s*this.settings.step+i.min):t},t.prototype.valueToRatio=function(e){var t,n,r,i,s,o,u,a;if(this.settings.equalSteps){a=this.settings.allowedValues;for(i=o=0,u=a.length;o<u;i=++o){t=a[i];if(typeof n=="undefined"||n===null||Math.abs(t-e)<Math.abs(n-e))n=t,r=i}return this.settings.snapMid?(r+.5)/this.settings.allowedValues.length:r/(this.settings.allowedValues.length-1)}return s=this.getRange(),(e-s.min)/(s.max-s.min)},t.prototype.ratioToValue=function(e){var t,n,r,i,s;return this.settings.equalSteps?(s=this.settings.allowedValues.length,i=Math.round(e*s-.5),t=Math.min(i,this.settings.allowedValues.length-1),this.settings.allowedValues[t]):(n=this.getRange(),r=e*(n.max-n.min)+n.min,this.nearestValidValue(r))},t.prototype.valueChanged=function(t,n,r){var i;if(t.toString()===this.value.toString())return;return this.value=t,i={value:t,ratio:n,position:n*this.slider.outerWidth(),trigger:r,el:this.slider},this.input.val(t).trigger(e.Event("change",i)).trigger("slider:changed",i)},t}(),e.extend(e.fn,{simpleSlider:function(){var t,r,i;return i=arguments[0],t=2<=arguments.length?__slice.call(arguments,1):[],r=["setRatio","setValue"],e(this).each(function(){var s,o;return i&&__indexOf.call(r,i)>=0?(s=e(this).data("slider-object"),s[i].apply(s,t)):(o=i,e(this).data("slider-object",new n(e(this),o)))})}}),e(function(){return e("[data-slider]").each(function(){var t,n,r,i;return t=e(this),r={},n=t.data("slider-values"),n&&(r.allowedValues=function(){var e,t,r,s;r=n.split(","),s=[];for(e=0,t=r.length;e<t;e++)i=r[e],s.push(parseFloat(i));return s}()),t.data("slider-range")&&(r.range=t.data("slider-range").split(",")),t.data("slider-step")&&(r.step=t.data("slider-step")),r.snap=t.data("slider-snap"),r.equalSteps=t.data("slider-equal-steps"),t.data("slider-theme")&&(r.theme=t.data("slider-theme")),t.attr("data-slider-highlight")&&(r.highlight=t.data("slider-highlight")),t.data("slider-animate")!=null&&(r.animate=t.data("slider-animate")),t.simpleSlider(r)})})})(this.jQuery||this.Zepto,this);
\ No newline at end of file
{
"name" : "simple-slider",
"title" : "jQuery Simple Slider",
"description" : "Unobtrusive Numerical Slider",
"version" : "1.0.0",
"homepage" : "http://loopj.com/jquery-simple-slider",
"keywords" : [],
"author" : {
"name" : "James Smith",
"email" : "james@loopj.com",
"url" : "http://loopj.com"
},
"repository" : {
"type" : "git",
"url" : "https://github.com/loopj/jquery-simple-slider.git"
},
"bugs" : {
"url" : "https://github.com/loopj/jquery-simple-slider/issues"
},
"licenses": [{
"type": "MIT",
"url" : "http://mit-license.org/"
}],
"devDependencies" : {
"grunt" : "0.3.x",
"grunt-contrib": "0.2.x",
"grunt-growl": "git://github.com/loopj/grunt-growl.git#master"
},
"scripts": {
"test": "grunt"
}
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="{{lang}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Jumbotron Template for Bootstrap</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
<link href="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/css/simple-slider.css" rel="stylesheet">
<script src="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/js/simple-slider.min.js"></script>
<link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
<script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="/dashboard/">Project name</a>
</div>
</div>
<div class="container">
{% block content %}
<h1 class="alert alert-error">Please override "content" block.</h1>
{% endblock %}
<hr />
<footer>
<p>&copy; Company 2013</p>
</footer>
</div> <!-- /container -->
</body>
</html>
<div class="panel panel-default">
<div class="panel-heading">
<ul class="list-inline pull-right">
<li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
<li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
</ul>
<h3 class="no-margin"><i class="icon-briefcase"></i> Files
</h3>
</div>
<div class="list-group" id="vm-list-view">
<a href="#" class="list-group-item">
<i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<div href="#" class="list-group-item list-group-footer text-right">
<p>
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more </a>
<a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload </a>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<ul class="list-inline pull-right">
<li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
<li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
</ul>
<h3 class="no-margin"><i class="icon-group"></i> Groups
</h3>
</div>
<div class="list-group" id="vm-list-view">
<a href="#" class="list-group-item">
<i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
</a>
<div href="#" class="list-group-item list-group-footer text-right">
<p>
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more </a>
<a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload </a>
</p>
</div>
</div>
</div>
{% load i18n %}
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right toolbar">
<div class="btn-group">
<a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
<a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
</div>
<span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. "><i class="icon-info-sign"></i></span>
</div>
<h3 class="no-margin">
<i class="icon-sitemap"></i> {% trans "Compute nodes" %}
</h3>
</div>
<div class="panel-body" id="vm-graph-view" style="">
<p class="pull-right"> <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="60" data-height="60" data-readOnly="true" value="68"></p>
<p><span class="big"><big>13</big> running </span>
+ <big>3</big> off + <big>3</big> missing</p>
<ul class="list-inline">
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-success"><i class="icon-play-sign"></i> korte</li>
<li class="label label-success"><i class="icon-play-sign"></i> korte</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
<li class="label label-success"><i class="icon-play-sign"></i> korte</li>
<li class="label label-success"><i class="icon-play-sign"></i> korte</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-warning"><i class="icon-off"></i> szilva</li>
<li class="label label-warning"><i class="icon-off"></i> korte</li>
<li class="label label-warning"><i class="icon-off"></i> korte</li>
<li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
<li class="label label-danger"><i class="icon-question"></i> cseresznye</li>
<li class="label label-danger"><i class="icon-question"></i> szilva</li>
</ul>
<div class="clearfix"></div>
<div class="text-right">
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong> more </a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<ul class="list-inline pull-right">
<li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
<li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
</ul>
<h3 class="no-margin"><i class="icon-puzzle-piece"></i> Templates
</h3>
</div>
<div class="list-group" id="vm-list-view">
<a href="#" class="list-group-item">
<i class="icon-linux"></i> ALMA <small class="text-muted">CentOS 6</small><div class="pull-right"><i class="icon-play "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-windows"></i> ALMA <small class="text-muted">Windows 7</small><div class="pull-right"><i class="icon-play "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-linux"></i> ALMA <small class="text-muted">Gentoo</small><div class="pull-right"><i class="icon-play "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-linux"></i> ALMA <small class="text-muted">Ubuntu 12.04 LTS</small><div class="pull-right"><i class="icon-play "></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-windows"></i> ALMA <small class="text-muted">Windows 7</small><div class="pull-right"><i class="icon-play "></i></div>
</a>
<div href="#" class="list-group-item list-group-footer text-right">
<p>
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more </a>
<a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload </a>
</p>
</div>
</div>
</div>
{% load i18n %}
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right toolbar">
<div class="btn-group">
<a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
<a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a>
</div>
<span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. "><i class="icon-info-sign"></i></span>
</div>
<h3 class="no-margin">
<i class="icon-desktop"></i> Virtual machines
</h3>
</div>
<div class="list-group" id="vm-list-view">
<a href="vm/442" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="vm/443" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-off"></i> ALMA <div class="pull-right"><i class="icon-star-empty text-muted"></i></div>
</a>
<div href="#" class="list-group-item list-group-footer">
<div class="row">
<div class="col-sm-6 input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search..." />
<div class="input-group-btn">
<button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
</div>
</div>
<div class="col-sm-6 text-right">
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong> more </a>
<a class="btn btn-success btn-xs"><i class="icon-plus-sign"></i> new </a>
</div>
</div>
</div>
</div>
<div class="panel-body" id="vm-graph-view" style="display: none">
<p class="pull-right"> <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="100" data-height="100" data-readOnly="true" value="22"></p>
<p><span class="bigbig"><big>13</big> running </span>
<ul class="list-inline">
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li>
<li class="label label-success"><i class="icon-play-sign"></i> korte</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li>
</ul>
</p>
<p class="big text-warning"><big>10</big> stopped</p>
<p>Total: $3000 </p>
<div class="clearfix"></div>
<div class="text-right">
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong> more </a>
</div>
</div>
</div>
{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="body-content dashboard-index">
<div class="row">
<div class="col-lg-4 col-md-6">
{% include "dashboard/index-vm.html" %}
</div>
<div class="col-lg-4 col-md-6">
{% include "dashboard/index-groups.html" %}
</div>
<div class="col-lg-4 col-md-6">
{% include "dashboard/index-files.html" %}
</div>
<div class="col-lg-4 col-md-6">
{% include "dashboard/index-templates.html" %}
</div>
<div class="col-lg-4 col-md-6">
{% include "dashboard/index-nodes.html" %}
</div>
</div>
</div>
{% endblock %}
{% load i18n %}
<h3>{% trans "Owner" %}</h3>
<p>
{% blocktrans %}You are the current owner of this instance.{% endblocktrans %}
<a href="#" class="btn btn-link">{% trans "Transfer ownership..." %}</a>
</p>
<h3>{% trans "Permissions"|capfirst %}</h3>
<table class="table table-striped table-with-form-fields">
<thead><tr><th></th><th>{% trans "Who" %}</th><th>{% trans "What" %}</th><th></th></tr></thead>
<tbody>
<tr><td><i class="icon-user"></i></td><td>NEP123 (Gipsz Jakab)</td><td><select class="form-control"><option>owner</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td><i class="icon-user"></i></td><td>NEP123 (Gipsz Jakab)</td><td><select class="form-control"><option>control</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td><i class="icon-group"></i></td><td>Cloud-fejlesztők</td><td><select class="form-control"><option>view</option></select></td><td><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td><i class="icon-plus"></i></td><td><input type="text" class="form-control"></td>
<td><select class="form-control"><option>owner</option></select></td><td></td></tr>
</tbody>
</table>
<div class="form-actions">
<button type="submit" class="btn btn-success">{% trans "Save" %}</button>
</div>
{% load i18n %}
<h3>{% trans "Activity" %}</h3>
<div class="timeline">
<div><span class="timeline-icon timeline-warning"><i class="icon-remove"></i></span> <strong>Removing</strong> 2013-11-21 15:32</div>
<div><span class="timeline-icon timeline-warning"><i class="icon-pause"></i></span> <strong>Suspending</strong> 2013-09-21 15:32</div>
<div><span class="timeline-icon"><i class="icon-ellipsis-vertical"></i></span> <strong>(now)</strong></div>
<div><span class="timeline-icon"><i class="icon-truck"></i></span> <strong>Migrated to mega5</strong> 2013-04-21 15:32, ABC123</div>
<div><span class="timeline-icon"><i class="icon-refresh"></i></span> <strong>Forced reboot</strong> 2013-04-21 15:32, ABC123</div>
<div><span class="timeline-icon"><i class="icon-plus"></i></span> <strong>Created</strong> 2013-04-21 15:32, ABC123</div>
</div>
<div class="row">
<div class="col-md-4">
<dl>
<dt>System:</dt>
<dd><i class="icon-linux"></i> Uhu Binux Optikai Rendszer</dd>
<dt>Description:</dt>
<dd><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est libero, hendrerit at posuere sed, molestie congue quam. </small></dd>
</dl>
</div>
<div class="col-md-8">
<img src="/static/grafikon.png" style="width:45%"/>
<img src="/static/grafikon.png" style="width:45%"/>
<img src="/static/grafikon.png" style="width:45%"/>
<img src="/static/grafikon.png" style="width:45%"/>
</div>
</div>
{% load i18n %}
<h2><a href="#" class="btn btn-success pull-right"><i class="icon-plus"></i> add interface</a>
Interfaces</h2>
<h3 class="list-group-item-heading"><i class="icon-globe"></i> vmnet </h3>
<div class="row">
<div class="col-md-5">
<dl>
<dt>IPv4 address:</dt> <dd>10.9.8.7</dd>
<dt>IPv6 address:</dt> <dd> 2001:2001:2001:2001:2001:2001::</dd>
<dt>DNS name:</dt> <dd>550.vm.ik.bme.hu</dd>
</dl>
</div>
<div class="col-md-7">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#ipv4" data-toggle="pill" class="text-center">IPv4</a></li>
<li><a href="#ipv6" data-toggle="pill" class="text-center">IPv6</a></li>
</ul>
<h4>Port access</h4>
<div class="tab-content">
<div class="tab-pane active" id="ipv4">
<table class="table table-striped rule-table">
<thead>
<tr><th>
<i class="icon-globe icon-2x"></i>
<i class="icon-long-arrow-right icon-2x"></i>
</th><th>
<i class="icon-shield icon-2x"></i>
</th><th colspan="2">
<i class="icon-long-arrow-right icon-2x"></i>
<i class="icon-desktop icon-2x"></i>
</th></tr>
</thead>
<tbody>
<tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="ssh">22</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td>12344/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td>vm.ik.bme.hu:22620</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="http-alt">8080</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
</tbody>
<tfoot>
<tr><td><i class="icon-plus"></i> <i class="icon-long-arrow-right"></i></td><td colspan="2">
<div class="input-group input-group-sm">
<input type="text" class="form-control" size="5" />
<span class="input-group-addon">/</span>
<select class="form-control"><option>tcp</option><option>udp</option></select>
</div>
</td><td><button type="submit" class="btn btn-success btn-sm">Add</button></td></tr>
</tfoot>
</table>
</div> <!-- /ipv4 -->
<div class="tab-pane" id="ipv6">
<table class="table table-striped rule-table">
<thead>
<tr><th>
<i class="icon-globe icon-2x"></i>
</th><th>
<i class="icon-long-arrow-right icon-2x"></i>
</th><th colspan="2">
<i class="icon-desktop icon-2x"></i>
</th></tr>
</thead>
<tbody>
<tr><td>550.vm.ik.bme.hu:22</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="ssh">22</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td>550.vm.ik.bme.hu:12344</td><td><i class="icon-long-arrow-right"></i></td><td>12344/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
<tr><td>550.vm.ik.bme.hu:8080</td><td><i class="icon-long-arrow-right"></i></td><td><abbr title="http-alt">8080</abbr>/tcp</td><td><a href="#" class="btn btn-link btn-xs" title="remove"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
</tbody>
<tfoot>
<tr><td><i class="icon-plus"></i> <i class="icon-long-arrow-right"></i></td><td colspan="2">
<div class="input-group input-group-sm">
<input type="text" class="form-control" size="5" />
<span class="input-group-addon">/</span>
<select class="form-control"><option>tcp</option><option>udp</option></select>
</div>
</td><td><button type="submit" class="btn btn-success btn-sm">Add</button></td></tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<h3 class="list-group-item-heading"><i class="icon-link"></i> grid (unmanaged) <a href="#" class="btn btn-danger btn-xs">remove</a></h3>
<h3 class="list-group-item-heading"><i class="icon-link"></i> asdasd (unmanaged) <a href="#" class="btn btn-danger btn-xs">remove</a></h3>
<p class="row">
<div class="col-sm-3">
<label for="cpu-priority-slider"><i class="icon-trophy"></i> CPU priority</label>
</div>
<div class="col-sm-9">
<input type="text" data-slider="true" data-slider-highlight="true" data-slider-snap="true" id="cpu-priority-slider" value="0.25">
</div>
</p>
<p class="row">
<div class="col-sm-3">
<label for="cpu-count-slider"><i class="icon-cogs"></i> CPU count</label>
</div>
<div class="col-sm-9">
<input type="text" value="1" data-slider="true" data-slider-highlight="true" data-slider-range="0,8" data-slider-snap="true" data-slider-step="1" id="cpu-count-slider">
</div>
</p>
<p class="row">
<div class="col-sm-3">
<label for="ram-slider"><i class="icon-ticket"></i> RAM amount</label>
</div>
<div class="col-sm-9">
<input type="text" data-slider="true" data-slider-highlight="true" id="ram-slider" data-slider-range="128,4096" data-slider-snap="true" data-slider-step="128"> MiB
</div>
</p>
{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}
<div class="body-content">
<div class="page-header">
<h1>devenv <small>550.vm.ik.bme.hu</small></h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="big">
<span class="label label-success ">RUNNING</span>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
<li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
<li><a href="#"><i class="icon-remove"></i> Discard</a></li>
</ul>
</div>
</div>
<h3>{% trans "Connection" %}</h3>
<input type="text" value="ssh cloud@vm.ik.bme.hu -p22312" class="form-control" readonly />
<dl class="dl-horizontal">
<dt>Etiam at felis:</dt>
<dd>condimentum lig igulaulal ulaligula vel</dd>
<dt>Vivamus nec:</dt>
<dd>ac metus interdum, tincidunt</dd>
</dl>
</div>
<div class="col-md-8">
<div class="panel panel-default" id="vm-detail-panel">
<ul class="nav nav-pills panel-heading">
<li class="active">
<a href="#home" data-toggle="pill" class="text-center">
<i class="icon-compass icon-2x"></i><br>
{% trans "Home" %}</a></li>
<li>
<a href="#resources" data-toggle="pill" class="text-center">
<i class="icon-tasks icon-2x"></i><br>
{% trans "Resources" %}</a></li>
<li>
<a href="#console" data-toggle="pill" class="text-center">
<i class="icon-desktop icon-2x"></i><br>
{% trans "Console" %}</a></li>
<li>
<a href="#access" data-toggle="pill" class="text-center">
<i class="icon-group icon-2x"></i><br>
{% trans "Access" %}</a></li>
<li>
<a href="#network" data-toggle="pill" class="text-center">
<i class="icon-globe icon-2x"></i><br>
{% trans "Network" %}</a></li>
<li>
<a href="#activity" data-toggle="pill" class="text-center">
<i class="icon-time icon-2x"></i><br>
{% trans "Activity" %}</a></li>
</ul>
<div class="tab-content panel-body">
<div class="tab-pane active" id="home">{% include "dashboard/vm-detail-home.html" %}</div>
<div class="tab-pane" id="resources">{% include "dashboard/vm-detail-resources.html" %}</div>
<div class="tab-pane" id="console">{% include "dashboard/vm-detail-console.html" %}</div>
<div class="tab-pane" id="access">{% include "dashboard/vm-detail-access.html" %} </div>
<div class="tab-pane" id="network">{% include "dashboard/vm-detail-network.html" %}</div>
<div class="tab-pane" id="activity">{% include "dashboard/vm-detail-activity.html" %}</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
"""
This file demonstrates writing tests using the unittest module. These will pass
when you run "manage.py test".
Replace this with more appropriate tests for your application.
"""
from django.test import TestCase
class SimpleTest(TestCase):
def test_basic_addition(self):
"""
Tests that 1 + 1 always equals 2.
"""
self.assertEqual(1 + 1, 2)
from django.conf.urls import patterns, include, url
from .views import IndexView, VmDetailView
urlpatterns = patterns('',
url(r'^$', IndexView.as_view()),
url(r'^vm/\d+/$', VmDetailView.as_view()),
)
from django.views.generic import TemplateView
class IndexView(TemplateView):
template_name="dashboard/index.html"
class VmDetailView(TemplateView):
template_name="dashboard/vm-detail.html"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment