{% extends "layout.html" %}
{% load bootstrap4 %}
{% load staticfiles %}
{% block extrahead %}
<!-- Custom CSS -->
<link href="{% static "css/detail_view.css" %}" rel="stylesheet">
<link href="{% static "css/base.css" %}" rel="stylesheet">
<script type="text/javascript">
function cwf(type) {
$.ajax({
type: "POST",
url: "/",
data: {
"create": type
},
beforeSend: function (request) {
request.setRequestHeader("X-CSRFToken",
$('input[name="csrfmiddlewaretoken"]').val()
);
}
}).done(function (data) {
window.location.replace("/wf/");
}).fail(function (jqxHR, textstatus) {
alert("Something went wrong...");
});
}
function continue_wf() {
window.location.replace("/wf/");
}
function toggle_create_drop() {
drop_div = document.getElementById("create_drop");
if (drop_div.style.display === "none") {
drop_div.style.display = "inherit";
} else {
drop_div.style.display = "none";
}
}
</script>
<style>
.navbar {
min-width: 200px;
}
.create_drop {
display: none;
width: 100%;
}
.create_drop button {
width: 100%;
}
.drop_btn {
border-radius: 0px;
background-color: CCCCCC
}
.drop_btn:hover {
color: #555;
border-top: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
}
#wrapper {
height: 100vh;
}
</style>
{% endblock %}
{% block basecontent %}
<div id="wrapper" class="d-flex flex-column">
<!-- Navigation -->
<nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0" role="navigation" style="margin-bottom: 0">
<div class="container-fluid">
<div class="col order-2 order-lg-1 text-center text-lg-left">
<a href="https://www.opnfv.org/" class="navbar-brand">
<img src="{% static "img/opnfv-logo.png" %}">
</a>
<a class="navbar-brand" href={% url 'dashboard:index' %}>
Pharos Dashboard
</a>
</div>
<!-- /.navbar-header -->
<div class="col-2 order-1 order-lg-3 d-lg-none">
<button class="btn border" type="button" data-toggle="collapse" data-target="#sidebar"
aria-expanded="false" aria-controls="sidebar">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="col-2 order-3">
<ul class="nav ml-auto">
<li class="dropdown ml-auto">
<a class="nav-link p-0 text-dark p-2" data-toggle="dropdown" href="#">
{% if request.user.username %}
{{request.user.username}}
{% else %}
<i class="fas fa-user"></i>
{% endif %}
<i class="fas fa-caret-down rotate"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
{% if user.is_authenticated %}
<a href="{% url 'account:settings' %}" class="text-dark dropdown-item">
<i class="fas fa-cog"></i>
Settings
</a>
<a href="{% url 'account:logout' %}?next={{ request.path }}" class="text-dark dropdown-item">
<i class="fas fa-sign-out-alt"></i>
Logout
</a>
{% else %}
<a href="{% url 'account:login' %}" class="text-dark dropdown-item">
<i class="fas fa-sign-in-alt"></i>
Login with Jira
</a>
{% endif %}
</div> <!-- End dropdown-menu -->
</li> <!-- End dropdown -->
</ul>
</div> <!-- End top right account menu -->
</div>
</nav>
<!-- /.navbar-top-links -->
<!-- Page Content -->
<div class="container-fluid d-lg-flex flex-lg-grow-1 px-0">
<div class="row h-100 w-100 mx-0">
<div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
<nav class="navbar navbar-expand-lg border-bottom p-0 w-100">
<div class="collapse navbar-collapse" id="sidebar">
<div class="list-group list-group-flush w-100 bg-light">
<a href="/" class="list-group-item list-group-item-action bg-light">
Home
</a>
{% csrf_token %}
<a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
href="#createList" role="button">
Create <i class="fas fa-angle-down rotate"></i>
</a>
<div class="collapse" id="createList">
<a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary">
Express Booking
</a>
<a href="#" onclick="cwf(0)" class="list-group-item list-group-item-action list-group-item-secondary">
Book a Pod
</a>
<a href="#" onclick="cwf(1)" class="list-group-item list-group-item-action list-group-item-secondary">
Design a Pod
</a>
<a href="#" onclick="cwf(2)" class="list-group-item list-group-item-action list-group-item-secondary">
Configure a Pod
</a>
<a href="#" onclick="cwf(3)" class="list-group-item list-group-item-action list-group-item-secondary">
Create a Snapshot
</a>
<a href="#" onclick="cwf(4)" class="list-group-item list-group-item-action list-group-item-secondary">
Configure OPNFV
</a>
</div>
<a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action bg-light">
Hosts
</a>
{% if user.is_authenticated %}
<a href="{% url 'account:users' %}" class="list-group-item list-group-item-action bg-light">
User List
</a>
{% endif %}
<a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action bg-light">
Booking List
</a>
<a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action bg-light">
Booking Statistics
</a>
<!-- <a href="{% url 'account:my-account' %}" class="list-group-item list-group-item-action bg-light">
Account
</a> -->
<a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
href="#accountList" role="button">
Account <i class="fas fa-angle-down rotate"></i>
</a>
<div class="collapse" id="accountList">
<a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary">
My Resources
</a>
<a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary">
My Bookings
</a>
<a href="{% url 'account:my-configurations' %}" class="list-group-item list-group-item-action list-group-item-secondary">
My Configurations
</a>
<a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary">
My Snapshots
</a>
</div>
<a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action bg-light">
Lab Info
</a>
<a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action bg-light">
Inbox
</a>
</div>
</div>
</nav>
<!--/.well -->
</div>
<!--/span-->
<div class="col flex-grow-1 d-flex flex-column">
{% if title %}
<div class="row flex-shrink-1">
<div class="col-lg-12">
<h1 class="page-header">{{ title }}</h1>
</div>
<!-- /.col-lg-12 -->
</div>
{% endif %}
<div id="bsm">{% bootstrap_messages %}</div>
<!-- Content block placed here -->
{% block content %}
{% endblock content %}
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
{% endblock basecontent %}