Update Rooms views: capacity, infrastructure, show, overview(+filtered)

Gemfile

@@ -6,11 +6,11 @@ ruby file: ".ruby-version"
 gem "rails", "~> 7.1.0"
 
 gem "bootstrap", "~> 5.3.2"
+gem "dartsass-sprockets"
 gem "jbuilder"
 gem "jquery-ui-rails"
 gem "nokogiri", "~> 1.16"
 gem "rails-i18n", "~> 7.0.x"
-gem "dartsass-sprockets"
 gem "sprockets-rails", require: "sprockets/railtie"
 gem "terser"
 

app/assets/stylesheets/application.css.scss

@@ -574,12 +574,14 @@ body {
   }
 
   &-sidebar {
-    @include media-breakpoint-up(lg) {
-      position: sticky;
-      top: 0;
-      display: block !important;
-      overflow-y: auto;
-      height: 100%
+    &:not(.offcanvas) {
+      @include media-breakpoint-up(lg) {
+        position: sticky;
+        top: 0;
+        display: block !important;
+        overflow-y: auto;
+        height: 100%
+      }
     }
 
     &-links {

app/assets/stylesheets/rooms.css.scss

@@ -154,16 +154,7 @@
   }
 
   .menu-rooms {
-    border-right: solid 1px #EAEAEA;
-    background-color: #F4F4F4;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    margin-bottom: 0;
     min-width: 243px;
-
-    li.active {
-      list-style-type: disc;
-    }
   }
 
   .room-actions {
@@ -311,15 +302,19 @@
     min-width: 226px;
     text-align: left;
 
+    a {
+      color: #555555;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
     .title {
       padding: 3px 0;
       font-size: small;
       background-color: #B3C3C3;
-
-      a {
-        color: #555555;
-        font-weight: normal;
-      }
     }
 
     ul {
@@ -347,11 +342,6 @@
         max-width: 160px;
         margin-top: 5px;
       }
-
-      a {
-        color: #555555;
-        font-size: small;
-      }
     }
 
     .minimal_card_layout {
@@ -362,6 +352,10 @@
         width: 8px;
         height: 8px;
       }
+
+      td, th {
+        padding: 0;
+      }
     }
 
     .server {

app/helpers/inventories_sidebar_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# rubocop:disable Rails/HelperInstanceVariable
+module InventoriesSidebarHelper
+  def hide_inventories_sidebar?
+    @_hide_inventories_sidebar || false
+  end
+
+  def hide_inventories_sidebar!
+    @_hide_inventories_sidebar = true
+  end
+end
+# rubocop:enable Rails/HelperInstanceVariable

app/helpers/servers_helper.rb

@@ -27,7 +27,7 @@ def ports_by_card_minimal(card:)
     card_type.rows.to_i.times do |row_index|
       html += "<tr>"
       card_type.columns.to_i.times do |column_index|
-        html += "<td><div style='display: flex;'>"
+        html += "<td><div class='d-flex'>"
 
         ports_per_cell.times do |cell_index|
 
@@ -37,10 +37,10 @@ def ports_by_card_minimal(card:)
 
           html += content_tag(:span,
                               link_to_port_without_label(position, port_data, card_type.port_type, card.id, port_id),
-                              class: "port_container")
+                              class: "port_container d-flex")
 
           if (cell_index + 1) % number_of_columns_in_cell(card.orientation, ports_per_cell, card_type.max_aligned_ports) == 0 # Every XX ports do
-            html += '</div><div style="clear:both;" /><div style="display: flex;">'
+            html += '</div><div class="d-flex">'
           end
 
         end
@@ -62,7 +62,7 @@ def ports_by_card_with_presentation(card:, selected_port: nil, moved_connections
     card_type.rows.to_i.times do |row_index|
       html += "<tr>"
       card_type.columns.to_i.times do |column_index|
-        html += "<td><div style='display: flex;'>"
+        html += "<td><div class='d-flex'>"
 
         ports_per_cell.times do |cell_index|
 
@@ -73,13 +73,13 @@ def ports_by_card_with_presentation(card:, selected_port: nil, moved_connections
 
           html += content_tag(:span,
                               link_to_port(position, port_data, card_type.port_type, card.id, port_id, (position - 1 + card.first_port_position).to_s.rjust(2, "0")),
-                              class: "port_container
+                              class: "port_container d-flex
                                       #{twin_card_used_ports && port_data && port_data.cable_name && twin_card_used_ports.exclude?(port_data.position) ? "no_client" : ""}
                                       #{twin_card_used_ports && (port_data.blank? || port_data.cable_name.blank?) && twin_card_used_ports.include?(position) ? "unreferenced_client" : ""}
                                       #{selected_port.present? && port_id == selected_port.try(:id) ? "selected" : ""}")
 
           if (cell_index + 1) % number_of_columns_in_cell(card.orientation, ports_per_cell, card_type.max_aligned_ports) == 0 # Every XX ports do
-            html += '</div><div style="clear:both;" /><div style="display: flex;">'
+            html += '</div><div class="d-flex">'
           end
 
         end
@@ -149,7 +149,7 @@ def link_to_port_by_type(label, type, port_data, position, card_id, port_id)
     end
     link_to label.to_s,
             edit_port_url,
-            { class: "port pull-left port#{port_class} #{port_data.try(:cable_color) ? port_data.try(:cable_color) : "empty"}",
+            { class: "port port#{port_class} #{port_data.try(:cable_color) ? port_data.try(:cable_color) : "empty"}",
               id: port_id,
               data: { url: edit_port_url,
                       position: position,

app/views/layouts/_header.html.erb

@@ -1,6 +1,6 @@
 <header class="mydcim-header navbar navbar-expand-lg sticky-top bg-body-tertiary">
   <nav class="container-fluid flex-wrap flex-lg-nowrap" role="menu" aria-label="Main navigation">
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mydcim-inventories-sidebar"
+    <button class="<%= class_names("navbar-toggler", "d-block": hide_inventories_sidebar?) %>" type="button" data-bs-toggle="offcanvas" data-bs-target="#mydcim-inventories-sidebar"
                                                                             aria-controls="mydcim-inventories-sidebar"
                                                                             aria-label="Toggle <%= t("inventories") %> navigation">
       <i class="bi bi-list"></i>
@@ -30,3 +30,12 @@
     </div>
   </nav>
 </header>
+
+<!---
+<%- if hide_inventories_sidebar? %>
+  <li class="nav-item" role="menuitem">
+    <%= link_to t("inventories"), sites_path, class: "nav-link" %>
+  </li>
+<% end %>
+
+-->

app/views/layouts/_sidebar.html.erb

@@ -1,7 +1,7 @@
 <aside id="mydcim-inventories-sidebar"
-       class="<%= class_names("mydcim-sidebar offcanvas-lg offcanvas-start border border-right col-lg-2 p-0 bg-body-tertiary", offcanvas: false) %>"
+       class="<%= class_names("mydcim-sidebar offcanvas-lg offcanvas-start border border-right col-lg-2 p-0 bg-body-tertiary", offcanvas: hide_inventories_sidebar?) %>"
        tabindex="-1" aria-labelledby="sidebarMenuLabel">
-  <div class="offcanvas-header">
+  <div class="<%= class_names("offcanvas-header", "d-flex": hide_inventories_sidebar?) %>">
     <button type="button" class="btn-close ms-auto" data-bs-dismiss="offcanvas" data-bs-target="#mydcim-inventories-sidebar" aria-label="<%= t("action.close") %>"></button>
   </div>
   <nav class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto" aria-label="<%= t("inventories") %> navigation">

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= content_for?(:title) ? yield(:title) : "Gestion de salle #{Rails.env.development? ? "(dev)" : "DCIM"}" %></title>
     <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "My DCIM" %>">
 
@@ -15,8 +15,8 @@
     <%= render "layouts/messages" %>
     <div class="mydcim-wrapper container-fluid">
       <div class="row">
-        <%= render "layouts/sidebar" unless hide_inventories_sidebar? %>
-        <main class="mydcim-main ms-sm-auto col-lg-10 px-md-4" role="main">
+        <%= render "layouts/sidebar" %>
+        <main class="<%= class_names("mydcim-main ms-sm-auto px-md-4", "col-lg-10": !hide_inventories_sidebar?) %> role="main">
           <%= yield %>
         </main>
       </div>

app/views/rooms/_capacity_component.html.erb

@@ -1,4 +1,4 @@
-<div class="card"
+<div class="bay-card"
      data-server-name="<%= server.name %>"
      data-server-id="<%= server.id %>"
      data-composant-id="<%= card.id %>"

app/views/rooms/capacity.html.erb

@@ -1,26 +1,25 @@
 <% provide :title, t("rooms.capacity_view.title") %>
+<% hide_inventories_sidebar! %>
 
 <%= render 'layouts/breadcrumb',
            breadcrumb_variables: {
              t("visualization") => overview_rooms_path,
              t("rooms.capacity_view.title") => nil } %>
 
 <div class="container-fluid room_overview show_room rooms-network-capacity" id="network-capacity">
-  <div class="panel panel-default">
-    <div class="panel-body" style="display: flex;">
-      <ul class="list-unstyled col-xs-2 hidden-sm menu-rooms">
-        <div class="btn-group btn-toggle">
+  <div class="card mb-3">
+    <div class="card-body d-flex">
+      <ul class="list-unstyled menu-rooms rounded bg-body-tertiary p-3 m-0 border">
+        <div class="btn-group btn-toggle d-flex border-bottom mb-3 pb-3 rounded-0">
           <% Modele::Network::TYPES.each do |type| %>
             <button class="<%= class_names("btn", "btn-primary active": (type == "gbe"), "btn-outline-secondary": (type != "gbe")) %>" data-toggle="tab" role="tab" data-network="<%= type %>">
               <%= Modele.human_attribute_name("network_types.short_#{type}") %>
             </button>
           <% end %>
         </div>
-        <li class="divider" style="border-bottom: 1px lightgray solid;margin:10px -10px 8px -10px;"></li>
-
         <% @sites.each do |site| %>
           <li><%= site %></li>
-          <ul>
+          <ul class="mb-2">
             <% rooms = site.rooms.sorted.distinct %>
             <% rooms.each do |room| %>
               <% islets = room.islets.sorted.not_empty.has_name.distinct %>
@@ -59,7 +58,7 @@
         <% end %>
       </ul>
 
-      <div class="tab-content col-xs-10 capacity">
+      <div class="tab-content capacity">
         <% @sites.each do |site| %>
           <% site.rooms.each do |room| %>
             <% room.islets.sorted.each do |islet| %>
@@ -108,7 +107,7 @@
                                               <table>
                                                 <tr>
                                                   <% components_per_enclosure.each do |component| %>
-                                                    <td class="slot_column" style="border: none;">
+                                                    <td class="slot_column border-0">
                                                       <% cards.select { |card| card.composant_id == component.id }.each do |card| %>
                                                         <%= render partial: 'rooms/capacity_component', locals: { server: server, component: component, card: card } %>
                                                       <% end %>
@@ -132,9 +131,10 @@
                                               <% end %>
                                             <% end %>
                                           <% end %>
-                                          <%= link_to h(server.name),
-                                                      server_path(server, :view => params[:view]),
-                                                      { class: 'pull-right server_name', :data => { 'toggle': "tooltip", 'placement': "top" }, title: server.numero } %>
+                                          <%= link_to server_path(server, :view => params[:view]),
+                                                      { class: 'float-end server_name', :data => { 'toggle': "tooltip", 'placement': "top" }, title: server.numero } do %>
+                                              <small><%= h(server.name) %></small>
+                                          <% end %>
                                         <% end %>
                                       <% end %>
                                     <% end %>

app/views/rooms/filtered_overview.html.erb

@@ -1,4 +1,5 @@
 <%= render 'layouts/breadcrumb', breadcrumb_variables: {'Aperçu des salles' => overview_rooms_path, @current_filters.join => nil} %>
+<% hide_inventories_sidebar! %>
 
 <div class="container-fluid rooms-overview">
 

app/views/rooms/infrastructure.html.erb

@@ -1,26 +1,22 @@
 <% provide :title, "Vue infrastructure" %>
+<% hide_inventories_sidebar! %>
 
 <%= render 'layouts/breadcrumb', breadcrumb_variables: {t("visualization") => overview_rooms_path, 'Infrastructure' => nil} %>
 
-<div class="container-fluid room_overview show_room" id="full-overview">
-  <div class="panel panel-default">
-    <div class="panel-body" style="display: flex;">
-
-      <ul class="list-unstyled col-xs-2 hidden-sm menu-rooms">
-
-        <div class="btn-group btn-toggle">
+<div class="container-fluid room_overview show_room rooms-network-capacity" id="network-capacity">
+  <div class="card mb-3">
+    <div class="card-body d-flex">
+      <ul class="list-unstyled menu-rooms rounded bg-body-tertiary p-3 m-0 border">
+        <div class="btn-group btn-toggle d-flex border-bottom mb-3 pb-3 rounded-0">
           <% @network_types.each do |network_type| %>
             <button class="<%= class_names("btn", "btn-primary active": (network_type == "gbe"), "btn-outline-secondary": (network_type != "gbe")) %>" data-toggle="tab" role="tab" data-network="<%= network_type %>">
               <%= Modele.human_attribute_name("network_types.short_#{network_type}") %>
             </button>
           <% end %>
         </div>
-
-        <li class="divider" style="border-bottom: 1px lightgray solid;margin:10px -10px 8px -10px;"></li>
-
         <% @sites.each do |site| %>
           <li><%= site %></li>
-          <ul>
+          <ul class="mb-2">
             <% rooms = site.rooms.sorted.distinct %>
             <% rooms.each do |room| %>
               <% islets = room.islets.sorted.not_empty.has_name.distinct %>
@@ -57,19 +53,15 @@
             <% end %>
           </ul>
         <% end %>
-
-        <li class="divider" style="border-bottom: 1px lightgray solid;margin:10px -10px 8px -10px;"></li>
-
-        <div id="stack-selector">
-          Stacks :
+        <div id="stack-selector" class="border-top mt-3 pt-3">
+          <%= Stack.model_name.human.pluralize %> :
           <% @stacks.each do |stack| %>
             <%= check_box_tag "stack", stack.id, 1, value: "##{stack.color}" %>
             <span style="margin-right: 5px;<%= "color: ##{stack.try(:color)}" %>" class="bi bi-square-fill" aria-hidden="true"></span>
           <% end %>
         </div>
       </ul>
-
-      <div class="tab-content col-xs-10 infrastructure">
+      <div class="tab-content infrastructure">
         <% @sites.each do |site| %>
           <% site.rooms.each do |room| %>
             <% room.islets.sorted.each do |islet| %>

app/views/rooms/overview.html.erb

@@ -1,22 +1,19 @@
 <% provide :title, "Toutes les salles" %>
+<% hide_inventories_sidebar! %>
 
-<%= render 'layouts/breadcrumb', breadcrumb_variables: { 'Aperçu des salles' => nil } %>
-
+<%= render "layouts/breadcrumb", breadcrumb_variables: { "Aperçu des salles": nil } %>
 <div class="container-fluid rooms-overview">
-
   <div class="row">
-
     <% @sites.each do |site| %>
       <div class="col-sm-12" style="text-align: center;">
         <h3><%= site %></h3>
       </div>
       <% rooms = site.rooms.order(:position).joins(:frames).distinct %>
       <% rooms.each do |room| %>
         <div class="col-lg-6 col-md-12">
-          <%= render 'rooms/room_overview', room: room %>
+          <%= render "rooms/room_overview", room: room %>
         </div>
       <% end %>
     <% end %>
-
   </div>
 </div>