diff --git a/Gemfile b/Gemfile index 2a607980..f41c8896 100644 --- a/Gemfile +++ b/Gemfile @@ -49,6 +49,9 @@ gem 'bootstrap', '~> 4.3.1' gem 'devise-bootstrap-views', '~> 1.0' gem 'devise-i18n' gem 'jquery-rails' +# Jquery datatables ruby gems for assets pipeline, https://datatables.net/ +# https://github.com/mkhairi/jquery-datatables +gem 'jquery-datatables' # Ruby interface to the VMware vSphere API # https://github.com/vmware/rbvmomi diff --git a/Gemfile.lock b/Gemfile.lock index 1703f752..50b667cf 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -172,6 +172,7 @@ GEM jbuilder (2.8.0) activesupport (>= 4.2.0) multi_json (>= 1.2) + jquery-datatables (1.10.19.1) jquery-rails (4.3.3) rails-dom-testing (>= 1, < 3) railties (>= 4.2.0) @@ -435,6 +436,7 @@ DEPENDENCIES git guard jbuilder (~> 2.5) + jquery-datatables jquery-rails listen (>= 3.0.5, < 3.2) mina diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 274b05dc..50073a3d 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -17,12 +17,13 @@ //= require popper //= require bootstrap //= require doughnut_chart -//= require filter_table -//= require sort_table //= require prevent_anchor_reload -//= require_tree . //= require select2 //= require clipboard +// Contains code for initializing and configuring datatables +// app/assets/javascripts/datatables.js +//= require datatables +//= require_tree . // With Turbolinks, jQuery $(document).ready events fire only in response // to the initial page load, not after any subsequent page changes diff --git a/app/assets/javascripts/datatables.js b/app/assets/javascripts/datatables.js new file mode 100644 index 00000000..6889b74f --- /dev/null +++ b/app/assets/javascripts/datatables.js @@ -0,0 +1,29 @@ +//= require datatables/jquery.dataTables +//= require datatables/dataTables.bootstrap4 + +// Global settings and initializer for all datatables +$.extend( $.fn.dataTable.defaults, { + // https://datatables.net/reference/option/responsive + responsive: true, + // https://datatables.net/reference/option/pagingType + pagingType: 'simple_numbers' + // https://datatables.net/reference/option/dom + //dom: + // "<'row'<'col-sm-4 text-left'f><'right-action col-sm-8 text-right'<'buttons'B> <'select-info'> >>" + + // "<'row'<'dttb col-12 px-0'tr>>" + + // "<'row'<'col-sm-12 table-footer'lip>>" +}); + +// Initialization on turbolinks load +$(document).on('turbolinks:load', function() { + if (!$.fn.DataTable.isDataTable('table[data-toggle="datatable"]')) { + $('table[data-toggle="datatable"]').DataTable(); + } +}); + +// Turbolinks cache fix +// https://stackoverflow.com/questions/41070556 +$(document).on('turbolinks:before-cache', function() { + $($.fn.dataTable.tables(true)).DataTable().destroy(); +}); + diff --git a/app/assets/javascripts/filter_table.js b/app/assets/javascripts/filter_table.js deleted file mode 100644 index da3a4fe5..00000000 --- a/app/assets/javascripts/filter_table.js +++ /dev/null @@ -1,54 +0,0 @@ -function hide(htmlElm) { - htmlElm.style.display = 'none'; -} - -function unhide(htmlElm) { - htmlElm.style.display = ''; -} - -function someCellInRowContains(row, searchTexts) { - let remainingFilters = searchTexts.filter(searchText => - !Array.prototype.some.call(row, cell => { - let txtValue = (cell.dataset && cell.dataset.filterValue) || cell.textContent || cell.innerText; - return txtValue.toUpperCase().includes(searchText); - }) - ); - return remainingFilters.length === 0; -} - - -function filterTable(inputId, tableId) { - const input = document.getElementById(inputId); - const table = document.getElementById(tableId); - if (!table || !input) { - return; - } - - const filters = input.value.toUpperCase().split(/[ ,]+/); - const rows = table.getElementsByTagName('tr'); - let invisible = 0; - - // Loop through all table rows, and hide those who don't match the search query ignoring the headline - for (let i = 1; i < rows.length; i++) { - const cells = rows[i].getElementsByTagName('td'); - - if (someCellInRowContains(cells, filters)) { - unhide(rows[i]); - } else { - hide(rows[i]); - invisible++; - } - } - - if (invisible === rows.length - 1) { - hide(table); - } else { - unhide(table); - } -} - -function filterTables(inputId, tableIds) { - for (const tableID of tableIds) { - filterTable(inputId, tableID) - } -} \ No newline at end of file diff --git a/app/assets/javascripts/sort_table.js b/app/assets/javascripts/sort_table.js deleted file mode 100644 index d615733c..00000000 --- a/app/assets/javascripts/sort_table.js +++ /dev/null @@ -1,8 +0,0 @@ -function sortWithoutHTML(a, b) { - function stripHTML(html) { - let tmp = document.createElement("DIV"); - tmp.innerHTML = html; - return tmp.textContent || tmp.innerText || ""; - } - return stripHTML(a).localeCompare(stripHTML(b)) -} \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 72123cee..88eac47b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -20,7 +20,24 @@ $danger: #a80833; $primary-active: #1f6993; $primary-hover: #1a5b82; +// https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails +// Custom bootstrap variables must be set or imported *before* bootstrap. @import "bootstrap"; +// Bootstrap styling for datatables +// https://github.com/mkhairi/jquery-datatables#stylesheets +@import 'datatables/dataTables.bootstrap4'; +// optional datatables styles for extensions, include when used +//@import 'datatables/extensions/AutoFill/autoFill.bootstrap4'; +//@import 'datatables/extensions/Buttons/buttons.bootstrap4'; +//@import 'datatables/extensions/ColReorder/colReorder.bootstrap4'; +//@import 'datatables/extensions/FixedColumns/fixedColumns.bootstrap4'; +//@import 'datatables/extensions/FixedHeader/fixedHeader.bootstrap4'; +//@import 'datatables/extensions/KeyTable/keyTable.bootstrap4'; +//@import 'datatables/extensions/Responsive/responsive.bootstrap4'; +//@import 'datatables/extensions/RowGroup/rowGroup.bootstrap4'; +//@import 'datatables/extensions/RowReorder/rowReorder.bootstrap4'; +//@import 'datatables/extensions/Scroller/scroller.bootstrap4'; +//@import 'datatables/extensions/Select/select.bootstrap4'; th { @extend .text-white; @@ -34,13 +51,12 @@ html, body { } .page-container { - margin: 50px 0 0 50px; + margin: 25px 0 0 50px; width: calc(100% - 100px); } h1 { color: $primary; - margin-bottom: .5em; } .dashboard-header-link { @@ -83,33 +99,10 @@ body { width: auto; } -.empty-table-label { - text-align: center; - padding-top: 1.2em; -} - -.table-bar { - width: auto; - border: 0; - margin: 1.5em 0 1em; - - td { - padding-right: 20px; - } -} - -.table-flex-width { - width: auto; -} - .unread { background-color: #e6f3ff; } -.bulletless { - list-style-type: none; -} - #menu-profile-dropdown { padding-top: 3px; } diff --git a/app/assets/stylesheets/requests.scss b/app/assets/stylesheets/requests.scss index bd36f34a..252bdaf6 100644 --- a/app/assets/stylesheets/requests.scss +++ b/app/assets/stylesheets/requests.scss @@ -30,10 +30,6 @@ label { margin-right: 5px; } -h1{ - margin-bottom: 1em; -} - /* Selected items on top */ .select2-selection__choice { background-color: #0C415F !important; diff --git a/app/assets/stylesheets/vms.scss b/app/assets/stylesheets/vms.scss index dec2f161..493ccb7c 100644 --- a/app/assets/stylesheets/vms.scss +++ b/app/assets/stylesheets/vms.scss @@ -7,25 +7,6 @@ flex: 1; } -.table-bar { - width: auto; - border: 0; - margin: 1.5em 0 1em; - - td { - padding-right: 20px; - } -} - -.create-form { - width: auto; - padding-bottom: 1.5em; -} - -.login-form-group { - padding-bottom: 1.5em; -} - .round { height: 1rem; width: 1rem; @@ -34,7 +15,3 @@ margin-right: 0.5rem; display: inline-block; } - -.script-doc::before { - content: "\1F4CE"; -} \ No newline at end of file diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb index 7d49a634..71df46c9 100644 --- a/app/views/application/_footer.html.erb +++ b/app/views/application/_footer.html.erb @@ -15,13 +15,3 @@ - - - - - - \ No newline at end of file diff --git a/app/views/dashboard/_widget.erb b/app/views/dashboard/_widget.erb index 21655314..b3e4d250 100644 --- a/app/views/dashboard/_widget.erb +++ b/app/views/dashboard/_widget.erb @@ -8,7 +8,8 @@ <% end %>
- <%= render 'vms/table', {vms: vms, id: id, buttons: buttons} %> + <%= render 'vms/table', {vms: vms, id: id, buttons: buttons, + datatable_options: {searching: false, paging: false, info:false}} %>
<% end %> \ No newline at end of file diff --git a/app/views/hosts/index.html.erb b/app/views/hosts/index.html.erb index 72a5a738..ec47168e 100644 --- a/app/views/hosts/index.html.erb +++ b/app/views/hosts/index.html.erb @@ -1,31 +1,27 @@ -

Hosts

+

Hosts

- - - +
- - - - - - + + + + + + <% @hosts.each do |host| %> - - - - + + + - <% end %> + <% end %> <%# @hosts.each %>
NameVendorModelStatus
NameVendorModelStatus
- <%= link_to host.name, {controller: :hosts, action: 'show', id: host.name}, method: :get %> - <%= host.vendor %><%= host.model %> -
-
+ 		<%= link_to host.name, host_path(host.name) %><%= host.vendor %><%= host.model %> + <%= content_tag :div, nil, + title: host.connection_state, + :data => { toggle: 'tooltip', placement: 'right' }, + class: "round #{host.connection_state == 'connected' ? 'bg-success' : 'bg-warning'}" %>
\ No newline at end of file diff --git a/app/views/operating_systems/index.html.erb b/app/views/operating_systems/index.html.erb index 52c64e2e..16bd474f 100644 --- a/app/views/operating_systems/index.html.erb +++ b/app/views/operating_systems/index.html.erb @@ -1,29 +1,32 @@

Operating Systems

- - - - -
- <%=link_to(fa_icon('plus'), - {controller: :operating_systems, action: 'new'}, - method: :get, class: 'btn btn-primary', id: 'createNewProjectButton') %> -
+<%= link_to fa_icon('plus'), new_operating_system_path, + title: 'Add new OS', + :data => { toggle: 'tooltip', placement: 'left' }, + class: 'btn btn-primary float-right' %> - + +
- + <%# https://datatables.net/reference/option/columns.orderable %> + - - <% @operating_systems.each do |operating_system| %> + <% @operating_systems.each do |os| %> - - - + + <% end %> diff --git a/app/views/projects/_list.html.erb b/app/views/projects/_list.html.erb deleted file mode 100644 index acfe18f2..00000000 --- a/app/views/projects/_list.html.erb +++ /dev/null @@ -1,22 +0,0 @@ -
NameActions
<%= operating_system.name %><%= link_to 'Edit', edit_operating_system_path(operating_system), class: "btn btn-primary" %><%= link_to 'Delete', operating_system, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %><%= os.name %> + <%= link_to fa_icon('pencil'), edit_operating_system_path(os), + title: 'Edit', + class: "btn btn-sm btn-primary" %> + <%= link_to fa_icon('trash'), os, method: :delete, + title: 'Delete', + data: { confirm: "Are you sure you want to delete '#{os.name}'?" }, + class: "btn btn-sm btn-danger" %> +
- - - - - - - <% projects.each do |project| %> - - - - - - <% end %> - -
<%= User.human_attribute_name('name') %><%= User.human_attribute_name('description') %><%= User.human_attribute_name('responsible_users') %>
<%= link_to project.name, project_path(project) %><%= project.description %> -
    - <% project.responsible_users.each do |user| %> -
  • <%= user.name %>
    • - <% end %> -
-
diff --git a/app/views/projects/_table.html.erb b/app/views/projects/_table.html.erb new file mode 100644 index 00000000..d886e3fd --- /dev/null +++ b/app/views/projects/_table.html.erb @@ -0,0 +1,25 @@ + + + + + + + + + + <% projects.each do |project| %> + + + + + + <% end %> <%# projects.each %> + +
<%= User.human_attribute_name('name') %><%= User.human_attribute_name('description') %><%= User.human_attribute_name('responsible_users') %>
<%= link_to project.name, project_path(project) %><%= truncate(project.description, length: 100) %> + <%# https://getbootstrap.com/docs/4.0/content/typography/#inline %> +
    + <% project.responsible_users.each do |user| %> +
  • <%= user.name %>
    • + <% end %> +
+
\ No newline at end of file diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 375bc5e1..33213660 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -1,16 +1,11 @@ -

Projects

+

Projects

-
- <% if current_user.employee_or_admin? %> - <%= link_to(fa_icon('plus'), new_project_path, - title: 'Create new project', - :data => { toggle: 'tooltip', placement: 'left' }, - class: 'btn btn-primary float-right', id: 'createNewProjectButton') %> - <% end %> -
+<% if current_user.employee_or_admin? %> + <%= link_to fa_icon('plus'), new_project_path, + title: 'Create new project', + :data => { toggle: 'tooltip', placement: 'left' }, + class: 'btn btn-primary float-right', id: 'createNewProjectButton' %> +<% end %> -<%= render 'list', projects: @projects %> +<%= render 'table', projects: @projects %> -<% if @projects.length == 0 %> -

No projects created yet

-<% end %> diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index caf0a3c7..b57eee30 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -13,9 +13,10 @@ <%= Project.human_attribute_name('responsible_users') %> -