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 {
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 {
......@@ -98,4 +232,3 @@ body {
stroke-opacity: 1.0;
stroke-width: 2;
}
......@@ -168,32 +168,29 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
style='color: red'
for='sshkey'>$sshkey_error</label>
</div>
<div class='form-group'>
<select class='pull-left' id='profile_name'
name='profile'
onChange='ShowProfile(0);'>
<option value=''>Select Profile</option>\n";
while (list ($id, $title) = each ($profile_array)) {
$selected = "";
if ($profile_value == $id)
$selected = "selected";
echo "<option $selected value='$id'>$title </option>\n";
}
echo " </select>
<label
<div id='profile_well' class='form-group well well-md'>
<span id='selected_profile_text' class='pull-left'>
</span>
<button id='profile' class='btn btn-primary btn-xs pull-right'
type='button' name='profile' onClick='ShowModal(\"#quickvm_topomodal\")'>
Select a Profile
</button>\n";
echo " <label
style='color: red'
for='profile'>$profile_error</label>
</div>
<button class='btn btn-primary pull-right'
type='submit' name='create'>Create!
</button>
<button class='btn btn-primary btn-sm pull-left'
type='button' name='reset'
onclick='formReset(); return false;'>
Reset Form</button>
<button class='btn btn-success pull-right'
type='submit' name='create'>Create!
</button>
<br>
<button class='btn btn-primary btn-xs pull-left'
type='button' name='reset'
onclick='formReset(); return false;'>
Reset Form</button>
</div>
</div>
</div>
......@@ -242,45 +239,67 @@ function SPITFORM($username, $email, $sshkey, $profile, $newuser, $errors)
echo "<!-- This is the topology view modal -->
<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-header'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<span id='showtopo_title'></span>
aria-hidden='true'>
&times;</button>
<h3>Select a Profile</h3>
</div>
<div class='modal-body'>
<!-- This topo diagram goes inside this div -->
<div class='panel panel-default'
id='showtopo_container'>
<div class='panel-body'>
<div id='showtopo_div'></div>
</div>
</div>
<div id='scrollright'
class='pull-right' style='cursor: pointer; ".
"margin-bottom: 0px; margin-right: 5px;'>
<span class='glyphicon glyphicon-arrow-right'></span>
</div>
<div id='scrollleft'
class='pull-left' style='cursor: pointer; ".
"margin-bottom: 0px; margin-right: 5px;'>
<span class='glyphicon glyphicon-arrow-left'></span>
</div>
</div>
<div class='modal-footer'>
<span class='pull-left' id='showtopo_description'></span>
<div class='pull-right'>
<button id='showtopo_select'
class='btn btn-primary btn-xs'
type='submit' name='select'>
Select</button>
<div class='form-group pull-left'>
<ul class='list-group' id='profile_name'
name='profile'
>\n";
while (list ($id, $title) = each ($profile_array)) {
$selected = "";
if ($profile_value == $id)
$selected = "selected";
echo "<li class='list-group-item' $selected value='$id'
onClick='ShowProfileList(this);'>$title </li>\n";
}
echo "</ul>
<label
style='color: red'
for='profile'>$profile_error</label>
</div>
<div class='pull-right'>
<span id='showtopo_title'></span>
<div class='panel-body'>
<div id='showtopo_div'></div>
<span class='pull-left' id='showtopo_description'></span>
</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>\n";
</div>
</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>
window.onload = InitProfileSelector;
</SCRIPT>\n";
......
......@@ -127,8 +127,9 @@ function ShowTopo(uuid)
console.log(topo);
$("#showtopo_container").removeClass("invisible");
maketopmap("#showtopo_div",
$("#showtopo_div").width(), 300, topo);
maketopmap("#topo-container",
$("#showtopo_div").width() - 30,
300, topo);
}
console.log(uuid);
......@@ -136,6 +137,54 @@ function ShowTopo(uuid)
$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)
{
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