diff mbox series

[5/5] web-app: migrate to bootstrap version 5

Message ID 20240224140031.9888-6-daniel@braunwarth.dev
State Accepted
Delegated to: Stefano Babic
Headers show
Series web-app: update web application | expand

Commit Message

Daniel Braunwarth Feb. 24, 2024, 2 p.m. UTC 
Signed-off-by: Daniel Braunwarth <daniel@braunwarth.dev>
---
 web-app/css/swupdate.css    |  4 ++--
 web-app/index.html          | 44 +++++++++++++++++++------------------
 web-app/js/swupdate.js      | 11 ++++++----
 web-app/scss/bootstrap.scss | 10 ---------
 4 files changed, 32 insertions(+), 37 deletions(-)

--
2.43.0
diff mbox series

Patch

diff --git a/web-app/css/swupdate.css b/web-app/css/swupdate.css
index a37d3d1..df7441b 100644
--- a/web-app/css/swupdate.css
+++ b/web-app/css/swupdate.css
@@ -23,10 +23,10 @@  body {
   width: 220px;
 }

-[data-toggle="collapse"] i:before {
+[data-bs-toggle="collapse"] i:before {
   content: "\f139";
 }

-[data-toggle="collapse"].collapsed i:before {
+[data-bs-toggle="collapse"].collapsed i:before {
   content: "\f13a";
 }
diff --git a/web-app/index.html b/web-app/index.html
index 641cb8c..2e0e9a2 100755
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -32,11 +32,11 @@ 
       <a class="navbar-brand" href="#">
         <img class="d-inline-block align-top" src="images/logo.png" alt="">
       </a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarText">
-        <ul class="navbar-nav ml-auto">
+        <ul class="navbar-nav ms-auto">
           <li class="nav-item">
             <a id="swu-restart" class="nav-link" href="#"><i class="fas fa-sync"></i> Restart System</a>
           </li>
@@ -48,15 +48,21 @@ 
   <!-- Use Bootstrap Grid Container -->
   <div class="container">
     <!-- Header -->
-    <div class="jumbotron my-3">
-      <h1 class="display-4"><span class="text-primary">SW</span>Update</h1>
-      <p class="lead">Software update for embedded systems</p>
-      <p>Upload a software image below, or restart the system at the top right corner.</p>
+    <div class="row my-3">
+      <div class="col">
+        <div class="card opacity-75">
+          <div class="card-header pb-0">
+            <h1 class="display-4"><span class="text-primary">SW</span>Update</h1>
+            <p class="lead">Software update for embedded systems</p>
+            <p>Upload a software image below, or restart the system at the top right corner.</p>
+          </div>
+        </div>
+      </div>
     </div>

     <div class="row my-3">
       <div class="col">
-        <div class="card">
+        <div class="card opacity-75">
           <div class="card-header pb-0">
             <h5><i class="fas fa-wrench"></i> Software Update</h5>
           </div>
@@ -87,12 +93,12 @@ 
             </div>

             <!-- Progress -->
-            <i id="swu-progress-spinner" class="fas"></i>
+            <i id="swu-progress-spinner" class="spinner-border invisible" role="status"></i>
             <strong id="swu-progress-run" style="display: none;">Updating:</strong>
             <span id="swu-progress-name"></span>
             <span id="swu-progress-value" class="float-right"></span>
-            <div class="progress">
-              <div id="swu-progress-bar" class="progress-bar progress-bar-striped" role="progressbar"></div>
+            <div class="progress" role="progressbar">
+              <div id="swu-progress-bar" class="progress-bar progress-bar-striped" style="height: 1.5rem"></div>
             </div>
           </div>
         </div>
@@ -102,9 +108,9 @@ 
     <!-- Messages -->
     <div class="row my-3">
       <div class="col">
-        <div class="card">
+        <div class="card opacity-75">
           <div class="card-header" id="headingMessages">
-            <a class="h5 collapsed" data-toggle="collapse" href="#collapseMessages" aria-expanded="false" aria-controls="collapseMessages">
+            <a class="h5 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseMessages" aria-expanded="false" aria-controls="collapseMessages">
               <i class="fas"></i> Messages
             </a>
           </div>
@@ -116,16 +122,12 @@ 
     </div>

     <!-- Restart -->
-    <div id="swu-restart-modal" class="modal fade" tabindex="-1" role="dialog">
-      <div class="modal-dialog modal-dialog-centered" role="document">
+    <div id="swu-restart-modal" class="modal fade" tabindex="-1">
+      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-          <div class="modal-body p-3 mb-2">
-            <div class="media">
-              <i class="fas fa-spinner fa-spin fa-3x align-self-center mr-3"></i>
-              <div class="media-body align-self-center">
-                <h5 class="mt-0 mb-0">The system will restart. Please be patient, as restarting takes about one minute.</h5>
-              </div>
-            </div>
+          <div class="modal-body">
+            <i class="spinner-border" role="status"></i>
+            <h5>The system will restart. Please be patient, as restarting takes about one minute.</h5>
           </div>
         </div>
       </div>
diff --git a/web-app/js/swupdate.js b/web-app/js/swupdate.js
index ae65a1e..faeca3d 100755
--- a/web-app/js/swupdate.js
+++ b/web-app/js/swupdate.js
@@ -5,7 +5,7 @@ 
  * SPDX-License-Identifier: MIT
  */

-/* global $, Dropzone, WebSocket */
+/* global $, Dropzone, WebSocket, bootstrap */

 const StatusEnum = {
   IDLE: 'IDLE',
@@ -27,7 +27,8 @@  function restart () {
 }

 function showRestart () {
-  $('#swu-restart-modal').modal({ backdrop: 'static', keyboard: false })
+  const restartModal = new bootstrap.Modal('#swu-restart-modal', { backdrop: 'static', keyboard: false })
+  restartModal.show()
   window.setTimeout(tryReload, 3000)
 }

@@ -82,7 +83,8 @@  const updateProgressBarStatus = (function (status) {
     $('#swu-progress-bar')
       .removeClass('bg-danger bg-success progress-bar-animated')
     $('#swu-progress-spinner')
-      .removeClass('fa-spinner fa-spin')
+      .addClass('invisible')
+      .removeClass('visible')
     $('#swu-progress-run').hide()

     switch (status) {
@@ -92,7 +94,8 @@  const updateProgressBarStatus = (function (status) {
       case StatusEnum.RUN:
         $('#swu-progress-bar').addClass('progress-bar-animated')
         $('#swu-progress-spinner')
-          .addClass('fa-spinner fa-spin')
+          .removeClass('invisible')
+          .addClass('visible')
         $('#swu-progress-run').show()
         break
       case StatusEnum.SUCCESS:
diff --git a/web-app/scss/bootstrap.scss b/web-app/scss/bootstrap.scss
index c4a4dad..30aadc2 100644
--- a/web-app/scss/bootstrap.scss
+++ b/web-app/scss/bootstrap.scss
@@ -5,14 +5,4 @@ 
  * SPDX-License-Identifier: MIT
  */

-$theme-colors: (
-);
-
-$transparent: rgba(255, 255, 255, .75);
-
-$jumbotron-bg: $transparent;
-$card-bg: $transparent;
-
-$progress-height: 1.5rem !default;
-
 @import 'node_modules/bootstrap/scss/bootstrap';