Commit e2a7b04e authored by Keith Downie's avatar Keith Downie Committed by Gary Wong

Changes to AptUI interface

parent 4b8aac0f
...@@ -36,8 +36,142 @@ body { ...@@ -36,8 +36,142 @@ body {
margin-top: 15px; !important; margin-top: 15px; !important;
} }
.modal-dialog {
width: 800px; #quickvm_topomodal #profile_name {
height: 402px;
margin-bottom: 0;
overflow-y: scroll;
}
#quickvm_topomodal #profile_name li {
cursor: pointer;
border-right: 0;
border-left: 0;
padding-right: 15px;
padding-left: 15px;
}
#quickvm_topomodal #profile_name > li:first-child {
border-top: 0;
}
#quickvm_topomodal #profile_name .selected {
background-color: #3276B1;
color: #FFF;
}
#showtopo_container .form-group {
margin: 0;
height: 402px;
}
#profile_well {
height: 32px;
padding: 0 0 0 9px;
}
#profile_well #selected_profile_text {
margin-top: 5px;
}
#profile_well #profile {
padding: 5px;
}
@media (min-width: 970px) {
.modal-dialog {
width: 950px;
}
#showtopo_div {
width: 643px;
}
}
@media (max-width: 969px) {
.modal-dialog {
width: auto;
}
}
@media (min-width: 910px) and (max-width: 969px) {
#showtopo_div {
width: 610px;
}
}
@media (min-width: 850px) and (max-width: 909px) {
#showtopo_div {
width: 560px;
}
}
@media (min-width: 790px) and (max-width: 849px) {
#showtopo_div {
width: 510px;
}
}
@media (min-width: 768px) and (max-width: 789px) {
#showtopo_div {
width: 500px;
}
}
@media (min-width: 740px) and (max-width: 767px) {
#showtopo_div {
width: 470px;
}
}
@media (min-width: 690px) and (max-width: 739px) {
#showtopo_div {
width: 430px;
}
}
@media (max-width: 689px) {
#showtopo_container > div {
width: 100%;
}
#showtopo_container .form-group {
height: 180px;
border-bottom: 1px solid #DDD;
}
#quickvm_topomodal #profile_name {
height: 180px;
overflow-y: scroll;
}
}
.modal-dialog .form-group {
width: 24%;
float: left;
}
.modal-dialog .modal-content {
overflow: hidden;
}
#showtopo_title h3 {
margin-left: 15px;
margin-top: 15px;
}
#quickvm_topomodal #showtopo_container {
overflow: hidden;
margin-bottom: 10px;
}
#quickvm_topomodal .modal-header h3 {
margin-top: 0;
margin-bottom: 0;
}
#showtopo_buttons {
margin-bottom: 10px;
} }
.panel-body { .panel-body {
...@@ -98,4 +232,3 @@ body { ...@@ -98,4 +232,3 @@ body {
stroke-opacity: 1.0; stroke-opacity: 1.0;
stroke-width: 2; stroke-width: 2;
} }
...@@ -168,32 +168,29 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors) ...@@ -168,32 +168,29 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
style='color: red' style='color: red'
for='sshkey'>$sshkey_error</label> for='sshkey'>$sshkey_error</label>
</div> </div>
<div class='form-group'> <div id='profile_well' class='form-group well well-md'>
<select class='pull-left' id='profile_name'
name='profile' <span id='selected_profile_text' class='pull-left'>
onChange='ShowProfile(0);'>
<option value=''>Select Profile</option>\n"; </span>
while (list ($id, $title) = each ($profile_array)) {
$selected = ""; <button id='profile' class='btn btn-primary btn-xs pull-right'
type='button' name='profile' onClick='ShowModal(\"#quickvm_topomodal\")'>
if ($profile_value == $id) Select a Profile
$selected = "selected"; </button>\n";
echo " <label
echo "<option $selected value='$id'>$title </option>\n";
}
echo " </select>
<label
style='color: red' style='color: red'
for='profile'>$profile_error</label> for='profile'>$profile_error</label>
</div> </div>
<button class='btn btn-primary pull-right' <button class='btn btn-primary btn-sm pull-left'
type='submit' name='create'>Create! type='button' name='reset'
</button> onclick='formReset(); return false;'>
Reset Form</button>
<button class='btn btn-success pull-right'
type='submit' name='create'>Create!
</button>
<br> <br>
<button class='btn btn-primary btn-xs pull-left'
type='button' name='reset'
onclick='formReset(); return false;'>
Reset Form</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -242,45 +239,67 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors) ...@@ -242,45 +239,67 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
echo "<!-- This is the topology view modal --> echo "<!-- This is the topology view modal -->
<div id='quickvm_topomodal' class='modal fade'> <div id='quickvm_topomodal' class='modal fade'>
<div class='modal-dialog' id='showtopo_dialog'> <div class='modal-dialog' id='showtopo_dialog'>
<div class='modal-content'> <div class='modal-content'>
<div class='modal-header'> <div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' <button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button> aria-hidden='true'>
<span id='showtopo_title'></span> &times;</button>
<h3>Select a Profile</h3>
</div> </div>
<div class='modal-body'> <div class='modal-body'>
<!-- This topo diagram goes inside this div --> <!-- This topo diagram goes inside this div -->
<div class='panel panel-default' <div class='panel panel-default'
id='showtopo_container'> id='showtopo_container'>
<div class='panel-body'> <div class='form-group pull-left'>
<div id='showtopo_div'></div> <ul class='list-group' id='profile_name'
</div> name='profile'
</div> >\n";
<div id='scrollright' while (list ($id, $title) = each ($profile_array)) {
class='pull-right' style='cursor: pointer; ". $selected = "";
"margin-bottom: 0px; margin-right: 5px;'>
<span class='glyphicon glyphicon-arrow-right'></span> if ($profile_value == $id)
</div> $selected = "selected";
<div id='scrollleft'
class='pull-left' style='cursor: pointer; ". echo "<li class='list-group-item' $selected value='$id'
"margin-bottom: 0px; margin-right: 5px;'> onClick='ShowProfileList(this);'>$title </li>\n";
<span class='glyphicon glyphicon-arrow-left'></span> }
</div>
</div> echo "</ul>
<div class='modal-footer'> <label
<span class='pull-left' id='showtopo_description'></span> style='color: red'
<div class='pull-right'> for='profile'>$profile_error</label>
<button id='showtopo_select' </div>
class='btn btn-primary btn-xs' <div class='pull-right'>
type='submit' name='select'> <span id='showtopo_title'></span>
Select</button> <div class='panel-body'>
<div id='showtopo_div'></div>
<span class='pull-left' id='showtopo_description'></span>
</div>
</div>
</div> </div>
<div id='showtopo_buttons' class='pull-right'>
<button id='showtopo_select'
class='btn btn-primary btn-sm'
type='submit' name='select'
onClick='UpdateProfileSelection($(\".selected\"))'>
Select Profile</button>
<button type='button' class='btn btn-default btn-sm'
data-dismiss='modal' aria-hidden='true'>
Cancel</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>\n"; </div>\n";
echo "<script type='text/javascript'>
$(UpdateProfileSelection($('#profile_name li:eq(0)')));
$('#quickvm_topomodal').on('hidden.bs.modal', function() {
ShowProfileList($('.current'))
});
</script>";
echo "<SCRIPT LANGUAGE=JavaScript> echo "<SCRIPT LANGUAGE=JavaScript>
window.onload = InitProfileSelector; window.onload = InitProfileSelector;
</SCRIPT>\n"; </SCRIPT>\n";
......
...@@ -127,8 +127,9 @@ function ShowTopo(uuid) ...@@ -127,8 +127,9 @@ function ShowTopo(uuid)
console.log(topo); console.log(topo);
$("#showtopo_container").removeClass("invisible"); $("#showtopo_container").removeClass("invisible");
maketopmap("#showtopo_div", maketopmap("#topo-container",
$("#showtopo_div").width(), 300, topo); $("#showtopo_div").width() - 30,
300, topo);
} }
console.log(uuid); console.log(uuid);
...@@ -136,6 +137,54 @@ function ShowTopo(uuid) ...@@ -136,6 +137,54 @@ function ShowTopo(uuid)
$xmlthing.done(callback); $xmlthing.done(callback);
} }
function UpdateProfileSelection(selectedElement)
{
var profile = $(selectedElement).attr('value');
$('#selected_profile_text').html("" + profile);
if (!$(selectedElement).hasClass('current'))
{
$('#profile_name li').each(function() {
$(this).removeClass('current');
});
$(selectedElement).addClass('current');
}
ShowProfileList(selectedElement);
}
function ShowProfileList(selectedElement)
{
var profile = $(selectedElement).attr('value');
if (!$(selectedElement).hasClass('selected'))
{
$('#profile_name li').each(function() {
$(this).removeClass('selected');
});
$(selectedElement).addClass('selected');
}
var callback = function(json) {
console.log(json.value);
var xmlDoc = $.parseXML(json.value.rspec);
var xml = $(xmlDoc);
var topo = ConvertManifestToJSON(profile, xml);
console.log(topo);
$('#showtopo_title').html("<h3>" + profile + "</h3>");
$('#showtopo_description').html(json.value.description);
maketopmap("#showtopo_div",
($("#showtopo_div").outerWidth()),
300, topo);
}
var $xmlthing = CallMethod("getprofile", null, 0, profile);
$xmlthing.done(callback);
}
function ShowProfile(direction) function ShowProfile(direction)
{ {
var profile; var profile;
......
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 to comment