upgrade bootstrap from v4 to v5

homebridge · Oct 1, 2024 · d9aa5ef · d9aa5ef
1 parent 58520c5
commit d9aa5ef
Show file tree

Hide file tree

Showing 118 changed files with 585 additions and 662 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 
 - update `@homebridge/hap-client` to `v2`
 - retire use of `pnpm` and code references
+- upgrade `bootstrap` from `v4` to `v5`
 
 ### Homebridge Dependencies
 

diff --git a/ui/angular.json b/ui/angular.json
@@ -28,12 +28,6 @@
             "styles": [
               "src/scss/styles.scss"
             ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js",
-              "node_modules/mdbootstrap/js/bootstrap.min.js",
-              "node_modules/mdbootstrap/js/mdb.js"
-            ],
             "allowedCommonJsDependencies": [
               "@/app/modules/status/status.component",
               "ajv",

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -23,21 +23,20 @@
     "@auth0/angular-jwt": "5.2.0",
     "@homebridge/hap-client": "2.0.2",
     "@homebridge/plugin-ui-utils": "1.0.3",
-    "@ng-bootstrap/ng-bootstrap": "11.0.1",
+    "@ng-bootstrap/ng-bootstrap": "14.0.1",
     "@ngx-translate/core": "15.0.0",
     "@popperjs/core": "2.11.8",
-    "@zajsf/bootstrap4": "17.2.4",
+    "@zajsf/bootstrap5": "17.2.4",
     "@zajsf/core": "17.2.4",
     "angular-gridster2": "18.0.1",
-    "bootstrap": "4.6.2",
+    "bootstrap": "5.3.3",
     "chart.js": "4.4.4",
     "dayjs": "1.11.13",
     "emoji-js": "3.8.0",
     "file-saver": "2.0.5",
     "jquery": "3.7.1",
     "json5": "2.2.3",
     "lodash-es": "4.17.21",
-    "mdbootstrap": "4.20.0",
     "mobile-detect": "1.4.5",
     "ng-inline-svg-2": "15.0.1",
     "ng2-charts": "4.1.1",
@@ -46,7 +45,6 @@
     "ngx-md": "14.0.9",
     "ngx-monaco-editor": "12.0.0",
     "ngx-toastr": "19.0.0",
-    "popper.js": "1.16.1",
     "qrcode": "1.5.4",
     "rxjs": "7.8.1",
     "semver": "7.6.3",

diff --git a/ui/src/app/core/accessories/accessory-info/accessory-info.component.html b/ui/src/app/core/accessories/accessory-info/accessory-info.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content hb-accessories-info-modal">
   <div class="modal-header">
     <h5 class="modal-title">{{ service.customName || service.serviceName }}</h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body">
     <div class="md-form">
@@ -15,30 +13,30 @@ <h5 class="modal-title">{{ service.customName || service.serviceName }}</h5>
     <div class="container px-1">
       <div class="form-group row align-items-center">
         <label class="col-6 col-form-label">{{ 'accessories.hide_this_accessory' | translate }}</label>
-        <div class="col-6 text-right">
+        <div class="col-6 text-end">
           <input type="checkbox" class="rendux-input" [(ngModel)]="service.hidden" id="hide-accessory"
             [attr.aria-label]="'accessories.hide_this_accessory' | translate">
-          <label for="hide-accessory" class="rendux-label ml-3" style="min-width: 50px;"></label>
+          <label for="hide-accessory" class="rendux-label ms-3" style="min-width: 50px;"></label>
         </div>
       </div>
       <div class="form-group row align-items-center">
         <label class="col-6 col-form-label">{{ 'accessories.show_on_dashboard' | translate }}</label>
-        <div class="col-6 text-right">
+        <div class="col-6 text-end">
           <input type="checkbox" class="rendux-input" [(ngModel)]="service.onDashboard" id="show-on-dashboard"
             [attr.aria-label]="'accessories.show_on_dashboard' | translate">
-          <label for="show-on-dashboard" class="rendux-label ml-3" style="min-width: 50px;"></label>
+          <label for="show-on-dashboard" class="rendux-label ms-3" style="min-width: 50px;"></label>
         </div>
       </div>
     </div>
     <table class="table table-borderless table-hover table-striped table-sm" style="table-layout: fixed; width:100%; word-wrap: break-word;">
       <tbody>
         <tr>
           <th>{{ service.humanType }}</th>
-          <td class="text-right"></td>
+          <td class="text-end"></td>
         </tr>
         <tr *ngFor="let characteristic of service.serviceCharacteristics">
           <td>{{ characteristic.description }}</td>
-          <td class="text-right">
+          <td class="text-end">
             <span [ngSwitch]="characteristic.unit">
               <span *ngSwitchCase="'percentage'">{{ characteristic.value }}%</span>
               <span *ngSwitchCase="'celsius'">{{ characteristic.value | convertTemp }}&deg;</span>
@@ -48,39 +46,39 @@ <h5 class="modal-title">{{ service.customName || service.serviceName }}</h5>
         </tr>
         <tr *ngFor="let information of accessoryInformation">
           <td>{{ information.key }}</td>
-          <td class="text-right text-break">{{ information.value }}</td>
+          <td class="text-end text-break">{{ information.value }}</td>
         </tr>
         <tr>
           <td>Homebridge Instance IP</td>
-          <td class="text-right">{{ service.instance.ipAddress }}</td>
+          <td class="text-end">{{ service.instance.ipAddress }}</td>
         </tr>
         <tr>
           <td>Homebridge Instance Port</td>
-          <td class="text-right">{{ service.instance.port }}</td>
+          <td class="text-end">{{ service.instance.port }}</td>
         </tr>
         <tr>
           <td>Homebridge Instance Username</td>
-          <td class="text-right">{{ service.instance.username }}</td>
+          <td class="text-end">{{ service.instance.username }}</td>
         </tr>
         <tr>
           <td>aid</td>
-          <td class="text-right">{{ service.aid }}</td>
+          <td class="text-end">{{ service.aid }}</td>
         </tr>
         <tr>
           <td>iid</td>
-          <td class="text-right">{{ service.iid }}</td>
+          <td class="text-end">{{ service.iid }}</td>
         </tr>
       </tbody>
     </table>
   </div>
   <div class="modal-footer justify-content-between">
-    <div class="text-left"></div>
+    <div class="text-start"></div>
     <div class="text-center">
-      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="$activeModal.dismiss('Dismiss')"
+      <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="$activeModal.dismiss('Dismiss')"
         [attr.aria-label]="'form.button_close' | translate">
         {{ 'form.button_close' | translate }}
       </button>
     </div>
-    <div class="text-right"></div>
+    <div class="text-end"></div>
   </div>
 </div>
diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center">
 

diff --git a/ui/src/app/core/accessories/types/door/door.manage.component.html b/ui/src/app/core/accessories/types/door/door.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center px-5">
 

diff --git a/ui/src/app/core/accessories/types/fan/fan.manage.component.html b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center px-5">
 

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center px-5">
 

diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center">
 

diff --git a/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center">
 

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center p-5">
 

diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center">
 

diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -1,10 +1,8 @@
 <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
-    <button type="button" class="close" data-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
-      (click)="$activeModal.dismiss('Dismiss')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.dismiss('Dismiss')"></button>
   </div>
   <div class="modal-body text-center">