From fbf0afffadbd6a4b78f3f64aa269f901e3894ca6 Mon Sep 17 00:00:00 2001
From: Tony Murray <murraytony@gmail.com>
Date: Thu, 18 Jun 2020 16:19:30 -0500
Subject: [PATCH] finish db

---
 resources/views/install/database.blade.php | 97 ++++++++++++----------
 resources/views/layouts/install.blade.php  |  7 +-
 2 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/resources/views/install/database.blade.php b/resources/views/install/database.blade.php
index af69713bd2..7d6723e556 100644
--- a/resources/views/install/database.blade.php
+++ b/resources/views/install/database.blade.php
@@ -12,14 +12,14 @@
                      href="#db-form-container"
                      aria-expanded="@if($valid_credentials) false @else true @endif"
                 >
-                    <span id="database-status">
+                    <span id="credential-status">
                        @if($valid_credentials === null)
-                          <i class="fa fa-lg fa-question-circle text-muted"></i>
-                       @elseif($valid_credentials)
-                          <i class="fa fa-lg fa-check-circle text-success"></i>
-                       @else
-                          <i class="fa fa-lg fa-times-circle text-danger"></i>
-                       @endif
+                            <i class="fa fa-lg fa-question-circle text-muted"></i>
+                        @elseif($valid_credentials)
+                            <i class="fa fa-lg fa-check-circle text-success"></i>
+                        @else
+                            <i class="fa fa-lg fa-times-circle text-danger"></i>
+                        @endif
                     </span>
                     @lang('install.database.credentials')
                     <i class="fa fa-lg fa-chevron-down rotate-if-collapsed fa-pull-right"></i>
@@ -79,45 +79,40 @@
                 <div id="db-form-header"
                      class="card-header h6"
                      data-toggle="collapse"
-                     href="#db-migration-container"
+                     href="#migrate-container"
                      aria-expanded="@if($migrated) false @else true @endif"
                 >
-                  @if($migrated === null)
-                      <i class="fa fa-lg fa-question-circle text-muted"></i>
-                  @elseif($migrated)
-                      <i class="fa fa-lg fa-check-circle text-success"></i>
-                  @else
-                      <i class="fa fa-lg fa-times-circle text-danger"></i>
-                  @endif
-                  @lang('install.migrate.migrate')
-                  <i class="fa fa-lg fa-chevron-down rotate-if-collapsed fa-pull-right"></i>
+                    <span id="migrate-status">
+                        @if($migrated === null)
+                            <i class="fa fa-lg fa-question-circle text-muted"></i>
+                        @elseif($migrated)
+                            <i class="fa fa-lg fa-check-circle text-success"></i>
+                        @else
+                            <i class="fa fa-lg fa-times-circle text-danger"></i>
+                        @endif
+                    </span>
+                    @lang('install.migrate.migrate')
+                    <i class="fa fa-lg fa-chevron-down rotate-if-collapsed fa-pull-right"></i>
+                </div>
+                <div id="migrate-container" class="card-body collapse @if(!$migrated) show @endif">
+                    <div class="mb-2 text-right">
+                        <button id="migrate-btn" type="button" class="btn btn-primary">
+                            @lang('install.migrate.migrate')
+                        </button>
+                    </div>
+                    <div id="migrate-warning" class="alert alert-warning">@lang('install.migrate.building_interrupt')</div>
+                    <textarea readonly id="db-update" class="form-control" rows="20" placeholder="@lang('install.migrate.wait')"></textarea>
                 </div>
-              <div id="db-migration-container" class="card-body collapse @if(!$migrated) show @endif">
-                  <div class="mb-2 text-right">
-                      <button type="button" id="retry-btn" onClick="alert('do something')" class="btn btn-primary">
-                          @lang('install.migrate.retry')
-                      </button>
-                      <button type="button" class="btn btn-primary">
-                          @lang('install.migrate.migrate')
-                      </button>
-                  </div>
-                  <div class="alert alert-warning">@lang('install.migrate.building_interrupt')</div>
-                  <textarea readonly id="db-update" class="form-control" rows="20" placeholder="@lang('install.migrate.wait')"></textarea>
-              </div>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-12">
-        </div>
-    </div>
 @endsection
 
 @section('scripts')
     <script>
         $('#database-form').submit(function (event) {
             event.preventDefault();
-            $('#database-status>i').attr('class', 'fa fa-lg fa-spinner fa-spin');
+            $('#credential-status>i').attr('class', 'fa fa-lg fa-spinner fa-spin');
             $('#error-box').empty();
 
             $.ajax({
@@ -127,11 +122,11 @@
                 data: $('#database-form').serialize(),
                 success: function (response) {
                     if (response.result === 'ok') {
-                        $('#database-status>i').attr('class', 'fa fa-lg fa-check-circle text-success');
+                        $('#credential-status>i').attr('class', 'fa fa-lg fa-check-circle text-success');
                         $('#migration-output').show();
                         $('#db-form-container').collapse('hide')
                     } else {
-                        $('#database-status>i').attr('class', 'fa fa-lg fa-times-circle text-danger')
+                        $('#credential-status>i').attr('class', 'fa fa-lg fa-times-circle text-danger')
                         if (response.message) {
                             $('#error-box').append($('<div class="alert alert-danger">' + response.message + '</div>'))
                         }
@@ -141,7 +136,12 @@
             });
         });
 
-        function run_migrations() {
+        $('#migrate-btn').click(function () {
+            $('#migrate-warning').show()
+            $('#migrate-status>i').attr('class', 'fa fa-lg fa-spinner fa-spin');
+            $('#error-box').empty();
+            $('#migrate-btn').addClass('disabled')
+
             var output = document.getElementById("db-update");
             var xhr = new XMLHttpRequest();
             xhr.open("GET", "{{ route('install.action.migrate') }}", true);
@@ -152,22 +152,32 @@
                 output.scrollTop = output.scrollHeight - output.clientHeight; // scrolls the output area
                 if (output.innerHTML.indexOf('Error!') !== -1) {
                     // if error word in output, show the retry button
-                    $("#retry-btn").css("display", "");
-                    $('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.error')</div>'))
+                    $('#migrate-warning').hide();
+                    $('#migrate-status>i').attr('class', 'fa fa-lg fa-times-circle text-danger')
+                    $('#migrate-btn').removeClass('disabled').text('@lang('install.migrate.retry')')
+                    $('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.error')</div>'));
                 }
             };
             xhr.timeout = 240000; // if no response for 4m, allow the user to retry
             xhr.ontimeout = function (e) {
                 $("#retry-btn").css("display", "");
-                $('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.timeout')</div>'))
+                $('#migrate-warning').hide();
+                $('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.timeout')</div>'));
             };
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
-                    checkStepStatus();
+                    $('#migrate-warning').hide();
+                    checkStepStatus(function (status) {
+                        console.log(status);
+                        if (status.database) {
+                            $('#migrate-status>i').attr('class', 'fa fa-lg fa-check-circle text-success');
+                            $('#migrate-container').collapse('hide');
+                        }
+                    });
                 }
             };
             xhr.send();
-        }
+        });
     </script>
 @endsection
 
@@ -180,5 +190,8 @@
         #retry-btn {
             display: none;
         }
+        #migrate-warning {
+            display: none;
+        }
     </style>
 @endsection
diff --git a/resources/views/layouts/install.blade.php b/resources/views/layouts/install.blade.php
index 63cf5c542b..dd88a11c80 100644
--- a/resources/views/layouts/install.blade.php
+++ b/resources/views/layouts/install.blade.php
@@ -121,10 +121,9 @@
     </div>
 </div>
 <script>
-    function checkStepStatus() {
+    function checkStepStatus(callback) {
         $.ajax('{{ route('install.action.steps') }}')
         .success(function (data) {
-            console.log(data);
             Object.keys(data).forEach(function (key) {
                 if (data[key]) {
                     $('.install-enable-' + key).removeClass('disabled');
@@ -132,6 +131,10 @@
                     $('.install-enable-' + key).addClass('disabled');
                 }
             });
+
+            if (callback && typeof callback === "function") {
+                callback(data);
+            }
         })
     }
 </script>