dashboard/src/templates/base.html

   1 {% extends "layout.html" %}
   2 {% load bootstrap4 %}
   3 {% load staticfiles %}
   4 {% block extrahead %}
   5
   6
   7 <!-- Custom CSS -->
   8 <link href="{% static "css/detail_view.css" %}" rel="stylesheet">
   9 <link href="{% static "css/base.css" %}" rel="stylesheet">
  10 <script type="text/javascript">
  11     function cwf(type) {
  12         $.ajax({
  13             type: "POST",
  14             url: "/",
  15             data: {
  16                 "create": type
  17             },
  18             beforeSend: function (request) {
  19                 request.setRequestHeader("X-CSRFToken",
  20                     $('input[name="csrfmiddlewaretoken"]').val()
  21                 );
  22             }
  23         }).done(function (data) {
  24             window.location.replace("/wf/");
  25         }).fail(function (jqxHR, textstatus) {
  26             alert("Something went wrong...");
  27         });
  28     }
  29
  30     function continue_wf() {
  31         window.location.replace("/wf/");
  32     }
  33
  34     function toggle_create_drop() {
  35         drop_div = document.getElementById("create_drop");
  36
  37         if (drop_div.style.display === "none") {
  38             drop_div.style.display = "inherit";
  39         } else {
  40             drop_div.style.display = "none";
  41         }
  42     }
  43 </script>
  44 <style>
  45     .navbar {
  46         min-width: 200px;
  47     }
  48
  49     .create_drop {
  50         display: none;
  51         width: 100%;
  52     }
  53
  54     .create_drop button {
  55         width: 100%;
  56     }
  57
  58     .drop_btn {
  59         border-radius: 0px;
  60         background-color: CCCCCC
  61     }
  62
  63     .drop_btn:hover {
  64         color: #555;
  65         border-top: 1px solid #E7E7E7;
  66         border-bottom: 1px solid #E7E7E7;
  67     }
  68
  69     #wrapper {
  70         height: 100vh;
  71     }
  72 </style>
  73
  74 {% endblock %}
  75 {% block basecontent %}
  76 <div id="wrapper" class="d-flex flex-column">
  77     <!-- Navigation -->
  78     <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0" role="navigation" style="margin-bottom: 0">
  79         <div class="container-fluid">
  80             <div class="col order-2 order-lg-1 text-center text-lg-left">
  81                 <a href="https://www.opnfv.org/" class="navbar-brand">
  82                     <img src="{% static "img/opnfv-logo.png" %}">
  83                 </a>
  84                 <a class="navbar-brand" href={% url 'dashboard:index' %}>
  85                     Pharos Dashboard
  86                 </a>
  87             </div>
  88             <!-- /.navbar-header -->
  89             <div class="col-2 order-1 order-lg-3 d-lg-none">
  90                 <button class="btn border" type="button" data-toggle="collapse" data-target="#sidebar"
  91                     aria-expanded="false" aria-controls="sidebar">
  92                     <i class="fas fa-bars"></i>
  93                 </button>
  94             </div>
  95             <div class="col-2 order-3">
  96                 <ul class="nav ml-auto">
  97                     <li class="dropdown ml-auto">
  98                         <a class="nav-link p-0 text-dark p-2" data-toggle="dropdown" href="#">
  99                             {% if request.user.username %}
 100                                 {{request.user.username}}
 101                             {% else %}
 102                                 <i class="fas fa-user"></i>
 103                             {% endif %}
 104                             <i class="fas fa-caret-down rotate"></i>
 105                         </a>
 106                         <div class="dropdown-menu dropdown-menu-right">
 107                             {% if user.is_authenticated %}
 108                                 <a href="{% url 'account:settings' %}" class="text-dark dropdown-item">
 109                                     <i class="fas fa-cog"></i>
 110                                     Settings
 111                                 </a>
 112                                 <a href="{% url 'account:logout' %}?next={{ request.path }}" class="text-dark dropdown-item">
 113                                     <i class="fas fa-sign-out-alt"></i>
 114                                     Logout
 115                                 </a>
 116                             {% else %}
 117                                 <a href="{% url 'account:login' %}" class="text-dark dropdown-item">
 118                                     <i class="fas fa-sign-in-alt"></i>
 119                                     Login with Jira
 120                                 </a>
 121                             {% endif %}
 122                         </div> <!-- End dropdown-menu -->
 123                     </li> <!-- End dropdown -->
 124                 </ul>
 125             </div> <!-- End top right account menu -->
 126         </div>
 127     </nav>
 128     <!-- /.navbar-top-links -->
 129
 130     <!-- Page Content -->
 131     <div class="container-fluid d-lg-flex flex-lg-grow-1 px-0">
 132         <div class="row h-100 w-100 mx-0">
 133             <div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
 134                 <nav class="navbar navbar-expand-lg border-bottom p-0 w-100">
 135                     <div class="collapse navbar-collapse" id="sidebar">
 136                         <div class="list-group list-group-flush w-100 bg-light">
 137                             <a href="/" class="list-group-item list-group-item-action bg-light">
 138                                 Home
 139                             </a>
 140                             {% csrf_token %}
 141                             <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
 142                                 href="#createList" role="button">
 143                                 Create <i class="fas fa-angle-down rotate"></i>
 144                             </a>
 145                             <div class="collapse" id="createList">
 146                                 <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary">
 147                                     Express Booking
 148                                 </a>
 149                                 <a href="#" onclick="cwf(0)" class="list-group-item list-group-item-action list-group-item-secondary">
 150                                     Book a Pod
 151                                 </a>
 152                                 <a href="#" onclick="cwf(1)" class="list-group-item list-group-item-action list-group-item-secondary">
 153                                     Design a Pod
 154                                 </a>
 155                                 <a href="#" onclick="cwf(2)" class="list-group-item list-group-item-action list-group-item-secondary">
 156                                     Configure a Pod
 157                                 </a>
 158                                 <a href="#" onclick="cwf(3)" class="list-group-item list-group-item-action list-group-item-secondary">
 159                                     Create a Snapshot
 160                                 </a>
 161                                 <a href="#" onclick="cwf(4)" class="list-group-item list-group-item-action list-group-item-secondary">
 162                                     Configure OPNFV
 163                                 </a>
 164                             </div>
 165                             <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action bg-light">
 166                                 Hosts
 167                             </a>
 168                             {% if user.is_authenticated %}
 169                                 <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action bg-light">
 170                                     User List
 171                                 </a>
 172                             {% endif %}
 173                             <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action bg-light">
 174                                 Booking List
 175                             </a>
 176                             <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action bg-light">
 177                                 Booking Statistics
 178                             </a>
 179                             <!-- <a href="{% url 'account:my-account' %}" class="list-group-item list-group-item-action bg-light">
 180                                 Account
 181                             </a> -->
 182                             <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
 183                                 href="#accountList" role="button">
 184                                 Account <i class="fas fa-angle-down rotate"></i>
 185                             </a>
 186                             <div class="collapse" id="accountList">
 187                                 <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 188                                     My Resources
 189                                 </a>
 190                                 <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 191                                     My Bookings
 192                                 </a>
 193                                 <a href="{% url 'account:my-configurations' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 194                                     My Configurations
 195                                 </a>
 196                                 <a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 197                                     My Snapshots
 198                                 </a>
 199                             </div>
 200                             <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action bg-light">
 201                                 Lab Info
 202                             </a>
 203                             <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action bg-light">
 204                                 Inbox
 205                             </a>
 206                         </div>
 207                     </div>
 208                 </nav>
 209                 <!--/.well -->
 210             </div>
 211             <!--/span-->
 212
 213             <div class="col flex-grow-1 d-flex flex-column">
 214                 {% if title %}
 215                 <div class="row flex-shrink-1">
 216                     <div class="col-lg-12">
 217                         <h1 class="page-header">{{ title }}</h1>
 218                     </div>
 219                     <!-- /.col-lg-12 -->
 220                 </div>
 221                 {% endif %}
 222                 <div id="bsm">{% bootstrap_messages %}</div>
 223                 <!-- Content block placed here -->
 224                 {% block content %}
 225                 {% endblock content %}
 226             </div>
 227             <!--/span-->
 228
 229
 230         </div>
 231         <!--/row-->
 232     </div>
 233     <!-- /#page-wrapper -->
 234 </div>
 235 <!-- /#wrapper -->
 236 {% endblock basecontent %}