Make web working without assets (#93)

* Make web working without assets * Proper indentation * Update changelog
widefix · Aug 7, 2024 · 520a1fb · 520a1fb
1 parent 5ec4c0d
commit 520a1fb
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 163 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## [0.7.8] - 2024-08-07
+- Make UI working without assets pipeline
+
 ## [0.7.7] - 2024-07-22
 - Unlock compatibility with Rails versions earlier than 6.0
 

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
diff --git a/app/assets/stylesheets/styles.css b/app/assets/stylesheets/styles.css
diff --git a/app/views/actual_db_schema/migrations/index.html.erb b/app/views/actual_db_schema/migrations/index.html.erb
@@ -2,8 +2,8 @@
 <html>
  <head>
  <title>Migrations</title>
- <%= stylesheet_link_tag 'styles', media: 'all' %>
- <%= javascript_include_tag 'application' %>
+ <%= render partial: 'actual_db_schema/shared/js' %>
+ <%= render partial: 'actual_db_schema/shared/style' %>
  </head>
  <body>
  <div>

diff --git a/app/views/actual_db_schema/migrations/show.html.erb b/app/views/actual_db_schema/migrations/show.html.erb
@@ -2,8 +2,8 @@
 <html>
  <head>
  <title>Migration Details</title>
- <%= stylesheet_link_tag 'styles', media: 'all' %>
- <%= javascript_include_tag 'application' %>
+ <%= render partial: 'actual_db_schema/shared/js' %>
+ <%= render partial: 'actual_db_schema/shared/style' %>
  </head>
  <body>
  <div>

diff --git a/app/views/actual_db_schema/phantom_migrations/index.html.erb b/app/views/actual_db_schema/phantom_migrations/index.html.erb
@@ -2,8 +2,8 @@
 <html>
  <head>
  <title>Phantom Migrations</title>
- <%= stylesheet_link_tag 'styles', media: 'all' %>
- <%= javascript_include_tag 'application' %>
+ <%= render partial: 'actual_db_schema/shared/js' %>
+ <%= render partial: 'actual_db_schema/shared/style' %>
  </head>
  <body>
  <div>

diff --git a/app/views/actual_db_schema/phantom_migrations/show.html.erb b/app/views/actual_db_schema/phantom_migrations/show.html.erb
@@ -2,8 +2,8 @@
 <html>
  <head>
  <title>Phantom Migration Details</title>
- <%= stylesheet_link_tag 'styles', media: 'all' %>
- <%= javascript_include_tag 'application' %>
+ <%= render partial: 'actual_db_schema/shared/js' %>
+ <%= render partial: 'actual_db_schema/shared/style' %>
  </head>
  <body>
  <div>

diff --git a/app/views/actual_db_schema/shared/_js.html b/app/views/actual_db_schema/shared/_js.html
@@ -0,0 +1,43 @@
+<script>
+ document.addEventListener('DOMContentLoaded', function() {
+ const migrationActions = document.querySelectorAll('.migration-action');
+
+ migrationActions.forEach(button => {
+ button.addEventListener('click', function(event) {
+ const originalText = button.value;
+ button.value = 'Loading...';
+ disableButtons();
+
+ fetch(event.target.form.action, {
+ method: 'POST'
+ })
+ .then(response => {
+ if (response.ok) {
+ window.location.reload();
+ } else {
+ throw new Error('Network response was not ok.');
+ }
+ })
+ .catch(error => {
+ console.error('There has been a problem with your fetch operation:', error);
+ enableButtons();
+ button.value = originalText;
+ });
+
+ event.preventDefault();
+ });
+ });
+
+ function disableButtons() {
+ migrationActions.forEach(button => {
+ button.disabled = true;
+ });
+ }
+
+ function enableButtons() {
+ migrationActions.forEach(button => {
+ button.disabled = false;
+ });
+ }
+ });
+</script>
diff --git a/app/views/actual_db_schema/shared/_style.html b/app/views/actual_db_schema/shared/_style.html
@@ -0,0 +1,116 @@
+<style>
+ body {
+ margin: 8px;
+ background-color: #fff;
+ color: #333;
+ }
+
+ body, p, td {
+ font-family: helvetica, verdana, arial, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+ }
+
+ h2 {
+ padding-left: 10px;
+ }
+
+ table {
+ margin: 0;
+ border-collapse: collapse;
+
+ thead tr {
+ border-bottom: 2px solid #ddd;
+ }
+
+ tbody {
+ .migration-row.phantom {
+ background-color: #fff3f3;
+ }
+
+ .migration-row.normal {
+ background-color: #ffffff;
+ }
+
+ .migration-row:nth-child(odd).phantom {
+ background-color: #ffe6e6;
+ }
+
+ .migration-row:nth-child(odd).normal {
+ background-color: #f9f9f9;
+ }
+ }
+
+ td {
+ padding: 14px 30px;
+ }
+ }
+
+ .top-buttons {
+ margin: 8px;
+ display: flex;
+ align-items: center;
+
+ .top-button {
+ background-color: #ddd;
+ }
+ }
+
+ .button, .top-button {
+ font-weight: bold;
+ color: #000;
+ border: none;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ margin: 0 2px;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: background-color 0.3s;
+ background: none;
+ }
+
+ .button:hover, .top-button:hover {
+ color: #fff;
+ background-color: #000;
+ }
+
+ .button:disabled, .button:hover:disabled {
+ background-color: transparent;
+ color: #666;
+ cursor: not-allowed;
+ }
+
+ .button-container {
+ display: flex;
+ }
+
+ pre {
+ background-color: #f7f7f7;
+ padding: 10px;
+ border: 1px solid #ddd;
+ }
+
+ .truncate-text {
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .flash {
+ padding: 10px;
+ margin-bottom: 10px;
+ border-radius: 5px;
+ }
+
+ .flash.notice {
+ background-color: #d4edda;
+ color: #155724;
+ }
+
+ .flash.alert {
+ background-color: #f8d7da;
+ color: #721c24;
+ }
+</style>
diff --git a/lib/actual_db_schema/engine.rb b/lib/actual_db_schema/engine.rb
@@ -10,8 +10,6 @@ class Engine < ::Rails::Engine
  app.routes.append do
  mount ActualDbSchema::Engine => "/rails"
  end
-
- app.config.assets.precompile += %w[styles.css application.js]
  end
  end
  end