aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/account/booking_list.html16
-rw-r--r--src/templates/account/configuration_list.html7
-rw-r--r--src/templates/account/details.html8
-rw-r--r--src/templates/account/image_list.html4
-rw-r--r--src/templates/account/resource_list.html6
-rw-r--r--src/templates/base.html1
-rw-r--r--src/templates/booking/steps/booking_meta.html1
-rw-r--r--src/templates/dashboard/searchable_select_multiple.html6
-rw-r--r--src/templates/resource/steps/pod_definition.html105
-rw-r--r--src/templates/workflow/confirm.html4
-rw-r--r--src/templates/workflow/exit_redirect.html6
-rw-r--r--src/templates/workflow/no_workflow.html10
-rw-r--r--src/templates/workflow/viewport-base.html119
13 files changed, 186 insertions, 107 deletions
diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html
index ef4df3a..21f6ff7 100644
--- a/src/templates/account/booking_list.html
+++ b/src/templates/account/booking_list.html
@@ -17,7 +17,7 @@ function edit_booking(pk){
</script>
<h2>Bookings I Own</h2>
{% for booking in bookings %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{booking.id}}</li>
<li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
@@ -26,15 +26,15 @@ function edit_booking(pk){
<li>end: {{booking.end}}</li>
<li>purpose: {{booking.purpose}}</li>
</ul>
- <div style="display:inline;margin:3px;padding:3px">
- <button onclick="edit_booking({{booking.id}});">Edit</button>
- <button onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+ <div class="detail_btn_group">
+ <button style="display: none" class="btn" onclick="edit_booking({{booking.id}});">Edit</button>
+ <button class="btn" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
</div>
</div>
{% endfor %}
<h2>Bookings I Collaborate On</h2>
{% for booking in collab_bookings %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{booking.id}}</li>
<li>lab: {{booking.lab}}</li>
@@ -43,9 +43,9 @@ function edit_booking(pk){
<li>end: {{booking.end}}</li>
<li>purpose: {{booking.purpose}}</li>
</ul>
- <div style="display:inline;margin:3px;padding:3px">
- <button disabled=true onclick="edit_booking({{booking.id}});">Edit</button>
- <button onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+ <div class="detail_btn_group">
+ <button style="display: none" class="btn" disabled=true onclick="edit_booking({{booking.id}});">Edit</button>
+ <button class="btn" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
</div>
</div>
{% endfor %}
diff --git a/src/templates/account/configuration_list.html b/src/templates/account/configuration_list.html
index ee61e97..b04535b 100644
--- a/src/templates/account/configuration_list.html
+++ b/src/templates/account/configuration_list.html
@@ -16,13 +16,16 @@ function edit_configuration(pk){
}
</script>
{% for config in configurations %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{config.id}}</li>
<li>name: {{config.name}}</li>
<li>description: {{config.description}}</li>
+ <li>resource: {{config.bundle}}</li>
</ul>
- <button onclick="edit_configuration({{config.id}});">Edit</button>
+ <div class="detail_btn_group">
+ <button style="display: none" class="btn" onclick="edit_configuration({{config.id}});">Edit</button>
+ </div>
</div>
{% endfor %}
{% endblock %}
diff --git a/src/templates/account/details.html b/src/templates/account/details.html
index 5641064..740dce6 100644
--- a/src/templates/account/details.html
+++ b/src/templates/account/details.html
@@ -2,8 +2,8 @@
{% load staticfiles %}
{% block content %}
<h1>Account Details</h1>
-<button onclick="location.href = '{% url 'account:my-resources' %}'">My Resources</button>
-<button onclick="location.href = '{% url 'account:my-bookings' %}'">My Bookings</button>
-<button onclick="location.href = '{% url 'account:my-configurations' %}'">My Configurations</button>
-<button onclick="location.href = '{% url 'account:my-images' %}'">My Snapshots</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-resources' %}'">My Resources</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-bookings' %}'">My Bookings</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-configurations' %}'">My Configurations</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-images' %}'">My Snapshots</button>
{% endblock content %}
diff --git a/src/templates/account/image_list.html b/src/templates/account/image_list.html
index fb436df..72ea1f5 100644
--- a/src/templates/account/image_list.html
+++ b/src/templates/account/image_list.html
@@ -2,7 +2,7 @@
{% block content %}
<h2>Images I Own</h2>
{% for image in images %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{image.id}}</li>
<li>lab: {{image.from_lab.name}}</li>
@@ -14,7 +14,7 @@
{% endfor %}
<h2>Public Images</h2>
{% for image in public_images %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{image.id}}</li>
<li>lab: {{image.from_lab.name}}</li>
diff --git a/src/templates/account/resource_list.html b/src/templates/account/resource_list.html
index 482a000..2ef293b 100644
--- a/src/templates/account/resource_list.html
+++ b/src/templates/account/resource_list.html
@@ -16,13 +16,15 @@ function edit_resource(pk){
}
</script>
{% for resource in resources %}
- <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+ <div class="detail_card">
<ul>
<li>id: {{resource.id}}</li>
<li>name: {{resource.name}}</li>
<li>description: {{resource.description}}</li>
</ul>
- <button onclick="edit_resource({{resource.id}});">Edit</button>
+ <div class="detail_btn_group">
+ <button style="display: none" class="btn" onclick="edit_resource({{resource.id}});">Edit</button>
+ </div>
</div>
{% endfor %}
{% endblock %}
diff --git a/src/templates/base.html b/src/templates/base.html
index c63db8c..067c3e6 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -8,6 +8,7 @@
<link href="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/css/sb-admin-2.min.css" %}"
rel="stylesheet">
<link href="{% static "css/theme.css" %}" rel="stylesheet">
+ <link href="{% static "css/detail_view.css" %}" rel="stylesheet">
<script type="text/javascript">
function cwf(type)
diff --git a/src/templates/booking/steps/booking_meta.html b/src/templates/booking/steps/booking_meta.html
index a42e158..e4881ae 100644
--- a/src/templates/booking/steps/booking_meta.html
+++ b/src/templates/booking/steps/booking_meta.html
@@ -58,7 +58,6 @@
{% block onleave %}
var ajaxForm = $("#booking_meta_form");
var formData = ajaxForm.serialize();
-console.log(formData);
req = new XMLHttpRequest();
req.open("POST", "/wf/workflow/", false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index e7128b0..ee460dd 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -1,6 +1,12 @@
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="autocomplete" style="width:400px;">
+ <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
+ {% if incompatible == "true" %}
+ <h3>Warning: Incompatible Configuration</h3>
+ <p>Please make a different selection, as the current config conflicts with the selected pod</p>
+ {% endif %}
+ </div>
<input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="{{initial.name}}" oninput="search(this.value)"
{% if disabled %} disabled {% endif %}
>
diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html
index b2b4998..8599bb0 100644
--- a/src/templates/resource/steps/pod_definition.html
+++ b/src/templates/resource/steps/pod_definition.html
@@ -85,7 +85,11 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
addToolbarButton(editor, toolbarContainer, 'zoomIn', '', "/static/img/mxgraph/zoom_in.png", true);
addToolbarButton(editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
+
+ {% if debug %}
addToolbarButton(editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true);
+ {% endif %}
+
var outline = new mxOutline(graph, overviewContainer);
@@ -141,6 +145,14 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
}
});
+ createDeleteDialog = function(id)
+ {
+ var content = document.createElement('div');
+ var innerHTML = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>"
+ innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>"
+ content.innerHTML = innerHTML;
+ showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62);
+ }
graph.dblClick = function(evt, cell) {
if( cell != null ){
@@ -148,11 +160,7 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
cell = cell.getParent();
}
if( cell.isEdge() || cell.getId().indexOf("network") > -1 ) {
- var content = document.createElement('div');
- var innerHTML = "<button onclick=deleteCell('" + cell.getId() + "');>Remove</button>"
- innerHTML += "<button onclick='currentWindow.destroy();'>Cancel</button>"
- content.innerHTML = innerHTML;
- showWindow(this, 'Delete?', content, 200, 200);
+ createDeleteDialog(cell.getId());
}
else {
showDetailWindow(cell);
@@ -226,8 +234,8 @@ function deleteCell(cellId) {
function newNetworkWindow() {
var innerHtml = 'Name: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>';
innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>';
- innerHtml += '<button type="button" onclick="parseNetworkWindow()">Okay</button>';
- innerHtml += '<button type="button" onclick="currentWindow.destroy();">Cancel</button><br>';
+ innerHtml += '<button style="width: 46%;" onclick="parseNetworkWindow()">Okay</button>';
+ innerHtml += '<button style="width: 46%;" onclick="currentWindow.destroy();">Cancel</button><br>';
innerHtml += '<div id="current_window_vlans"/>';
innerHtml += '<div id="current_window_errors"/>';
var content = document.createElement("div");
@@ -503,6 +511,7 @@ function makeMxNetwork(vlan_id, net_name) {
function addPublicNetwork() {
var net = makeMxNetwork(-1, "public");
+ network_names.add("public");
makeSidebarNetwork("public", "", net['color'], net['element_id']);
}
@@ -542,14 +551,32 @@ function updateHosts(removed) {
function makeSidebarNetwork(net_name, vlan_id, color, net_id){
var newNet = document.createElement("li");
+ var colorBlob = document.createElement("div");
+ colorBlob.className = "colorblob";
+ var textContainer = document.createElement("p");
+ textContainer.className = "network_innertext";
newNet.id = net_id;
+ var deletebutton = document.createElement("button");
+ deletebutton.className = "btn btn-danger";
+ deletebutton.style = "float: right; height: 20px; line-height: 8px; vertical-align: middle; width: 20px; padding-left: 5px;";
+ deleteButtonText = document.createTextNode("X");
+ deletebutton.appendChild(deleteButtonText);
+ deletebutton.addEventListener("click", function() {
+ createDeleteDialog(net_id);
+ }, false);
var text = net_name;
if(vlan_id){
text += " : " + vlan_id;
}
var newNetValue = document.createTextNode(text);
- newNet.appendChild(newNetValue);
- newNet.style['background'] = color;
+ textContainer.appendChild(newNetValue);
+ colorBlob.style['background'] = color;
+ newNet.appendChild(colorBlob);
+ newNet.appendChild(textContainer);
+ if( net_name != "public" )
+ {
+ newNet.appendChild(deletebutton);
+ }
document.getElementById("network_list").appendChild(newNet);
}
@@ -609,7 +636,7 @@ function submitForm() {
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
{% block content %}
<div id="graphParent"
- style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:65%;left:0px;">
+ style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
<div id="graphContainer"
style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
</div>
@@ -617,7 +644,7 @@ function submitForm() {
<!-- Creates a container for the sidebar -->
<div id="toolbarContainer"
- style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('/static/img/mxgraph/toolbar_bg.gif');">
+ style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
</div>
<!-- Creates a container for the outline -->
@@ -626,8 +653,60 @@ function submitForm() {
</div>
</div>
- <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:35%;right:0px;left:auto;background:grey">
- <button type="button" onclick="newNetworkWindow();">Add Network</button>
+ <style>
+ #network_select {
+ background: inherit;
+ padding: 0px;
+ padding-top: 0px;
+ }
+ #toolbarContainer {
+ background: #DDDDDD;
+ height: 36px;
+ }
+ #toolbar_extension {
+ height: 36px;
+ background: #DDDDDD;
+ }
+ #btn_add_network {
+ width: 100%;
+ }
+ #vlan_notice {
+ margin: 20px;
+ }
+ #network_list li {
+ border-radius: 2px;
+ margin: 5px;
+ padding: 5px;
+ vertical-align: middle;
+ background: #DDDDDD;
+ }
+ #network_list {
+ list-style-type: none;
+ padding: 0;
+ }
+ .colorblob {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .network_innertext {
+ display: inline-block;
+ padding-left: 10px;
+ vertical-align: middle;
+ padding-bottom: 0px;
+ margin-bottom: 2px;
+ }
+ .mxWindow {
+ background: #FFFFFF;
+ }
+ </style>
+
+ <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;">
+ <div id="toolbar_extension">
+ <button id="btn_add_network" type="button" class="btn btn-primary" onclick="newNetworkWindow();">Add Network</button>
+ </div>
<ul id="network_list">
</ul>
<p id="vlan_notice"></p>
diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
index 29b90c8..2510204 100644
--- a/src/templates/workflow/confirm.html
+++ b/src/templates/workflow/confirm.html
@@ -66,7 +66,9 @@
req.open("POST", "/wf/workflow/finish/", false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem with cleaning up session"); }
- req.onreadystatechange = function() { if(req.readyState === 4 ) { parent.redirect_root(); } }
+ req.onreadystatechange = function() { if(req.readyState === 4 ) {
+ window.top.refresh_iframe();
+ }}
req.send(formData);
}
diff --git a/src/templates/workflow/exit_redirect.html b/src/templates/workflow/exit_redirect.html
new file mode 100644
index 0000000..b08df78
--- /dev/null
+++ b/src/templates/workflow/exit_redirect.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <script>
+ top.window.location.href='/';
+ </script>
+</html>
diff --git a/src/templates/workflow/no_workflow.html b/src/templates/workflow/no_workflow.html
index ff8aab3..0ac6549 100644
--- a/src/templates/workflow/no_workflow.html
+++ b/src/templates/workflow/no_workflow.html
@@ -1,7 +1,3 @@
-{% extends "base.html" %}
-{% load staticfiles %}
-
-{% block content %}
-<h3>If you would like to create a booking or a resource, please use the links on the sidebar or from the homepage</h3>
-<a href="/">Go Home</a>
-{% endblock content %}
+<script>
+ top.window.location.href='/';
+</script>
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index 37eff27..82c1324 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -71,7 +71,7 @@
.step_untouched
{
- background: #98B0AF;
+ background: #DDDDDD;
}
.step_invalid
@@ -96,10 +96,12 @@
<button id="gob" onclick="go(step-1)" class="btn btn go_btn go_back">Go Back</button>
<div class="options">
- <button class="btn" onclick="cancel_wf()">Cancel</button>
+ <button id="cancel_btn" class="btn" onclick="cancel_wf()">Cancel</button>
</div>
<div class="btn_wrapper">
-<div id="breadcrumbs">
+<div id="breadcrumbs" class="btn-group">
+ <div class="btn-group" id="breadcrumb-wrapper">
+ </div>
</div>
</div>
{% csrf_token %}
@@ -206,6 +208,14 @@
{
context_data = data;
update_breadcrumbs(data);
+ if(data["workflow_count"] == 1)
+ {
+ document.getElementById("cancel_btn").innerText = "Exit Workflow";
+ }
+ else
+ {
+ document.getElementById("cancel_btn").innerText = "Return to Parent";
+ }
}
function update_breadcrumbs(meta_json) {
@@ -240,60 +250,16 @@
while(container.firstChild){
container.removeChild(container.firstChild);
}
- //draw enough rows for all steps
- var depth = meta_json['max_depth'];
- for(var i=0; i<=depth; i++){
- var div = document.createElement("DIV");
- div.id = "row"+i;
- if(i<depth){
- div.style['margin-bottom'] = "7px";
- }
- if(i>0){
- div.style['margin-top'] = "7px";
- }
- container.appendChild(div);
- }
+
draw_steps(meta_json);
}
function draw_steps(meta_json){
- var all_relations = meta_json['relations'];
- var relations = [];
- var active_steps = [];
- var active_step = step;
- while(active_step < meta_json['steps'].length){
- active_steps.push(active_step);
- var index = meta_json['parents'][active_step];
- var relation = all_relations[index];
- relations.push(relation);
- active_step = relation['parent'];
- }
- var child_index = meta_json['children'][step];
- var my_children = all_relations[child_index];
- if(my_children){
- relations.push(my_children);
- }
- draw_relations(relations, meta_json, active_steps);
- }
-
- function draw_relations(relations, meta_json, active_steps){
- for(var i=0; i<relations.length; i++){
- var relation = relations[i];
- var children_container = document.createElement("DIV");
- children_container.style['display'] = "inline";
- children_container.style['margin'] = "3px";
- children_container.style['padding'] = "3px";
- console.log("meta_json: ");
- console.log(meta_json);
- for(var j=0; j<relation['children'].length; j++){
- var step_json = meta_json['steps'][relation['children'][j]];
- step_json['index'] = relation['children'][j];
- var active = active_steps.indexOf(step_json['index']) > -1;
- var step_button = create_step(meta_json['steps'][relation['children'][j]], active);
- children_container.appendChild(step_button);
- }
- var parent_div = document.getElementById("row" + relation['depth']);
- parent_div.appendChild(children_container);
+ for( var i = 0; i < meta_json["steps"].length; i++ )
+ {
+ meta_json["steps"][i]["index"] = i;
+ var step_btn = create_step(meta_json["steps"][i], i == meta_json["active"]);
+ document.getElementById("breadcrumbs").appendChild(step_btn);
}
}
@@ -301,7 +267,6 @@
var step_dom = document.createElement("DIV");
if(active){
step_dom.className = "step_active";
- console.log(step_json['message']);
} else{
step_dom.className = "step";
@@ -333,30 +298,45 @@
{
update_message(msg, stat);
}
+ step_dom.classList.add("btn");
var step_number = step_json['index'];
step_dom.onclick = function(){ go(step_number); }
- //TODO: background color and other style
return step_dom;
}
function cancel_wf(){
- $.ajax({
- type: "POST",
- url: "/wf/manager/",
- data: {"cancel":"",},
- beforeSend: function(request) {
- request.setRequestHeader("X-CSRFToken",
- $('input[name="csrfmiddlewaretoken"]').val()
- );
- },
- success: redirect_root()
- });
+ var form = $("#workflow_pop_form");
+ var formData = form.serialize();
+ var req = new XMLHttpRequest();
+ req.open("POST", "/wf/workflow/finish/", false);
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+ req.onerror = function() { alert("problem occurred while trying to cancel current workflow"); }
+ req.onreadystatechange = function() { if(req.readyState === 4){
+ refresh_iframe();
+ }};
+ req.send(formData);
+ }
+
+ function refresh_iframe() {
+ req = new XMLHttpRequest();
+ url = "/wf/workflow/";
+ req.open("GET", url, true);
+ req.onload = function(e) {
+ var doc = document.getElementById("viewport-iframe").contentWindow.document;
+ doc.open(); doc.write(this.responseText); doc.close();
+ }
+ req.send();
+ }
+
+ function write_iframe(contents)
+ {
+ document.getElementById("viewport-iframe").contentWindow.document.innerHTML= contents;
}
function redirect_root()
{
- window.location.replace('/');
+ window.location.replace('/wf/');
}
function add_wf(type){
@@ -448,6 +428,11 @@
</script>
<!-- /.col-lg-12 -->
</div>
+<div style="display: none;" id="workflow_pop_form_div">
+<form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
+ {% csrf_token %}
+</form>
+</div>
<iframe src="/wf/workflow" style="position: absolute; left: 351px; right: 105px; width: calc(100% - 450px); border-style: none; border-width: 1px; border-color: #888888;" scrolling="yes" id="viewport-iframe" onload="resize_iframe();"></iframe>
{% endblock content %}