src/templates/base/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/base.css" %}" rel="stylesheet">
   9 <script src="/static/js/dashboard.js"></script>
  10
  11 {% endblock %}
  12 {% block basecontent %}
  13 <div id="wrapper" class="d-flex flex-column">
  14     <!-- Navigation -->
  15     {% block bgColor %}
  16     <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0 mb-0" role="navigation">
  17     {% endblock bgColor %}
  18         <div class="container-fluid pb-2 pb-sm-0">
  19             <!-- Logo -->
  20             {% block logo %}
  21             <div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
  22             <h2>Logo Here</h2>
  23                 <a class="navbar-brand d-none d-lg-inline" href={% url 'dashboard:index' %}>
  24                     Laas Dashboard
  25                 </a>
  26             </div>
  27             {% endblock logo %}
  28             <!-- Sidebar button -->
  29             <div class="col-6 col-sm-2 d-flex order-1 order-lg-3 d-lg-none">
  30                 <button class="btn border mx-auto" type="button" data-toggle="collapse" data-target="#sidebar"
  31                     aria-expanded="false" aria-controls="sidebar">
  32                     <i class="fas fa-bars d-inline"></i>
  33                 </button>
  34             </div>
  35             <!-- Login dropdown -->
  36             <div class="col-6 col-sm-2 order-3 d-flex">
  37                 <ul class="nav mx-auto mr-sm-0">
  38                     <li class="dropdown ml-auto">
  39                         {% block userDropDownText %}
  40                         <a class="nav-link p-0 text-dark p-2" data-toggle="dropdown" href="#">
  41                             {% if request.user.username %}
  42                                 {{request.user.username}}
  43                             {% else %}
  44                                 <i class="fas fa-user"></i>
  45                             {% endif %}
  46                             <i class="fas fa-caret-down rotate"></i>
  47                         </a>
  48                         {% endblock userDropDownText %}
  49                         <div class="dropdown-menu dropdown-menu-right">
  50                             {% if LFID %}
  51                                 {% if user.is_authenticated %}
  52                                 <a href="{% url 'account:settings' %}" class="text-dark dropdown-item">
  53                                     <i class="fas fa-cog"></i>
  54                                         Settings
  55                                 </a>
  56                                 <a id="logout_btn" href="#" method="post" class="text-dark dropdown-item">
  57                                     <i class="fas fa-sign-out-alt"></i>
  58                                         Logout
  59                                 </a>
  60                                 <form id="logout_form" action="{% url 'oidc_logout' %}" method="post" style="visibility: hidden;">
  61                                     {% csrf_token %}
  62                                     <input type="submit" value="logout">
  63                                 </form>
  64                                 <script>
  65                                     const logout_btn = document.getElementById("logout_btn");
  66
  67                                     const logout_form = document.getElementById("logout_form");
  68
  69                                     logout_btn.onclick = function() { logout_form.submit(); };
  70                                 </script>
  71                                 {% else %}
  72                                 <a href="{% url 'oidc_authentication_init' %}" class="text-dark dropdown-item">
  73                                     <i class="fas fa-sign-in-alt"></i>
  74                                         Login with LFID
  75                                 </a>
  76                                 {% endif %}
  77                             {% else %}
  78                                 {% if user.is_authenticated %}
  79                                     <a href="{% url 'account:settings' %}" class="text-dark dropdown-item">
  80                                         <i class="fas fa-cog"></i>
  81                                         Settings
  82                                     </a>
  83                                     <a href="{% url 'account:logout' %}?next={{ request.path }}" class="text-dark dropdown-item">
  84                                         <i class="fas fa-sign-out-alt"></i>
  85                                         Logout
  86                                     </a>
  87                                 {% else %}
  88                                     <a href="{% url 'account:login' %}" class="text-dark dropdown-item">
  89                                         <i class="fas fa-sign-in-alt"></i>
  90                                         Login with Jira
  91                                     </a>
  92                                 {% endif %}
  93                             {% endif %}
  94                         </div>
  95                     </li>
  96                 </ul>
  97             </div>
  98         </div>
  99     </nav>
 100
 101     <!-- Page Content -->
 102     <div class="container-fluid d-flex flex-grow-1 px-0 align-items-start flex-column">
 103         <div class="row flex-grow-1 w-100 mx-0 align-content-start flex-lg-grow-1">
 104             <div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
 105                 <nav class="navbar navbar-expand-lg border-bottom p-0 w-100 sidebar">
 106                     <div class="collapse navbar-collapse" id="sidebar">
 107                         <div class="list-group list-group-flush w-100 bg-light">
 108                             <a href="/" class="list-group-item list-group-item-action">
 109                                 Home
 110                             </a>
 111                             {% block dropDown %}
 112                             <a class="list-group-item list-group-item-action" data-toggle="collapse"
 113                                 href="#createList" role="button">
 114                                 Create <i class="fas fa-angle-down rotate"></i>
 115                             </a>
 116                             <div class="collapse" id="createList">
 117                                 <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary">
 118                                     Express Booking
 119                                 </a>
 120                                 <a href="#" onclick="create_workflow(0)" class="list-group-item list-group-item-action list-group-item-secondary">
 121                                     Book a Pod
 122                                 </a>
 123                                 <a href="#" onclick="create_workflow(1)" class="list-group-item list-group-item-action list-group-item-secondary">
 124                                     Design a Pod
 125                                 </a>
 126                                 <a href="#" onclick="create_workflow(2)" class="list-group-item list-group-item-action list-group-item-secondary">
 127                                     Create a Snapshot
 128                                 </a>
 129                                 <a href="#" onclick="create_workflow(3)" class="list-group-item list-group-item-action list-group-item-secondary">
 130                                     Configure OPNFV
 131                                 </a>
 132                             </div>
 133                             {% endblock dropDown %}
 134                             <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action">
 135                                 Hosts
 136                             </a>
 137                             {% if user.is_authenticated %}
 138                                 <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action">
 139                                     User List
 140                                 </a>
 141                             {% endif %}
 142                             <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action">
 143                                 Booking List
 144                             </a>
 145                             <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action">
 146                                 Booking Statistics
 147                             </a>
 148                             <a class="list-group-item list-group-item-action" data-toggle="collapse"
 149                                 href="#accountList" role="button">
 150                                 Account <i class="fas fa-angle-down rotate"></i>
 151                             </a>
 152                             <div class="collapse" id="accountList">
 153                                 <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 154                                     My Resources
 155                                 </a>
 156                                 <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 157                                     My Bookings
 158                                 </a>
 159                                 <a href="{% url 'account:my-configurations' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 160                                     My Configurations
 161                                 </a>
 162                                 <a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary">
 163                                     My Snapshots
 164                                 </a>
 165                             </div>
 166                             <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action">
 167                                 Lab Info
 168                             </a>
 169                             <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action">
 170                                 Inbox
 171                             </a>
 172                         </div>
 173                     </div>
 174                 </nav>
 175             </div>
 176             <div class="col overflow-auto flex-grow-1 d-flex flex-column h-100">
 177                 {% if title %}
 178                 <div class="row flex-shrink-1">
 179                     <div class="col-lg-12">
 180                         <h1 class="page-header">{{ title }}</h1>
 181                     </div>
 182                 </div>
 183                 {% endif %}
 184                 {% if messages %}
 185                     <div id="bsm" class="mt-4">{% bootstrap_messages %}</div>
 186                 {% endif %}
 187                 <!-- Content block placed here -->
 188                 {% block content %}
 189                 {% endblock content %}
 190             </div>
 191         </div>
 192     </div>
 193 </div>
 194 {% endblock basecontent %}