Replacing jw-bootstrap-switch-ng2 with bootstrap built in switch. fixes #582

2024-12-25 02:04:15 +02:00 · 2023-01-10 20:01:02 +01:00 · 2023-01-10 20:01:02 +01:00 · 3a426d23cc
commit 3a426d23cc
parent d25d3c4aaf
14 changed files with 160 additions and 418 deletions
--- a/angular.json
+++ b/angular.json
@ -101,7 +101,6 @@
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
-              "src/frontend/bootstrap-switch.css",
              "src/frontend/styles.css"
            ],
            "scripts": [
@ -188,7 +187,6 @@
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
-              "src/frontend/bootstrap-switch.css",
              "src/frontend/styles.css"
            ],
            "assets": [
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "pigallery2",
-  "version": "1.9.4-nightly",
+  "version": "1.9.5-nightly",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "pigallery2",
-      "version": "1.9.4-nightly",
+      "version": "1.9.5-nightly",
      "license": "MIT",
      "dependencies": {
        "archiver": "5.3.1",
@ -96,7 +96,6 @@
        "hammerjs": "2.0.8",
        "intl": "1.2.5",
        "jasmine-core": "4.0.1",
-        "jw-bootstrap-switch-ng2": "2.0.5",
        "karma": "6.3.17",
        "karma-chrome-launcher": "3.1.1",
        "karma-coverage": "2.2.0",
@ -13326,26 +13325,6 @@
      "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
      "dev": true
    },
-    "node_modules/jw-bootstrap-switch-ng2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/jw-bootstrap-switch-ng2/-/jw-bootstrap-switch-ng2-2.0.5.tgz",
-      "integrity": "sha512-uxwME6OCIWzVNmCZ8YFE/4WUnaOQDuZChmvTrNTQdnYa2DQ8plKCBb9pUQlmdu8ujylT3E8z+zbBFpGQLP8ZWQ==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.9.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || >=7.0.0",
-        "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || >=7.0.0",
-        "@angular/forms": "^6.0.0-rc.0 || ^6.0.0  || >=7.0.0"
-      }
-    },
-    "node_modules/jw-bootstrap-switch-ng2/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
    "node_modules/karma": {
      "version": "6.3.17",
      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz",
@ -32369,23 +32348,6 @@
      "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
      "dev": true
    },
-    "jw-bootstrap-switch-ng2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/jw-bootstrap-switch-ng2/-/jw-bootstrap-switch-ng2-2.0.5.tgz",
-      "integrity": "sha512-uxwME6OCIWzVNmCZ8YFE/4WUnaOQDuZChmvTrNTQdnYa2DQ8plKCBb9pUQlmdu8ujylT3E8z+zbBFpGQLP8ZWQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
-    },
    "karma": {
      "version": "6.3.17",
      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz",
--- a/package.json
+++ b/package.json
@ -115,7 +115,6 @@
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "jasmine-core": "4.0.1",
-    "jw-bootstrap-switch-ng2": "2.0.5",
    "karma": "6.3.17",
    "karma-chrome-launcher": "3.1.1",
    "karma-coverage": "2.2.0",
--- a/src/common/config/private/PrivateConfig.ts
+++ b/src/common/config/private/PrivateConfig.ts
@ -623,11 +623,20 @@ export class ServerJobConfig {
    description: $localize`Jobs load this many photos or videos form the DB for processing at once.`
  })
  mediaProcessingBatchSize: number = 1000;
+  @ConfigProperty({
+    tags:
+      {
+        name: $localize`test`,
+        priority: ConfigPriority.basic
+      },
+    description: $localize`Jobs load this many photos or videos form the DB for processing at once.`
+  })
+  test: boolean = false;
  @ConfigProperty({
    arrayType: JobScheduleConfig,
    tags: {
      name: $localize`Scheduled jobs`,
-      priority: ConfigPriority.advanced
+      priority: ConfigPriority.basic
    }
  })
  scheduled: JobScheduleConfig[] = [
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@ -36,7 +36,6 @@ import {BsDatepickerModule} from 'ngx-bootstrap/datepicker';
 import {ToastrModule} from 'ngx-toastr';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NotificationService} from './model/notification.service';
-import {JwBootstrapSwitchNg2Module} from 'jw-bootstrap-switch-ng2';
 import {ClipboardModule} from 'ngx-clipboard';
 import {NavigationService} from './model/navigation.service';
 import {InfoPanelLightboxComponent} from './ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component';
@ -161,7 +160,6 @@ Marker.prototype.options.icon = iconDefault;
    BrowserAnimationsModule,
    AppRoutingModule,
    ClipboardModule,
-    JwBootstrapSwitchNg2Module,
    TooltipModule.forRoot(),
    ToastrModule.forRoot(),
    ModalModule.forRoot(),
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
@ -61,55 +61,44 @@
          </li>
          <li role="menuitem">
            <div class="dropdown-item d-flex justify-content-between">
-              <span title="key: c" i18n-title i18n>Show caption</span>
-              <bSwitch
-                class="switch ps-2"
-                name="caption-switch"
-                switch-on-color="success"
-                [switch-inverse]="true"
-                switch-off-text="on hover"
-                switch-on-text="always"
-                i18n-switch-off-text
-                i18n-switch-on-text
-                [switch-label-width]="30"
-                [(ngModel)]="lightboxService.captionAlwaysOn">
-              </bSwitch>
+              <span title="key: c" i18n-title i18n>Always show caption</span>
+              <div class="form-check form-switch">
+                <input class="form-check-input"
+                       type="checkbox"
+                       role="switch"
+                       name="caption-switch"
+                       id="caption-switch"
+                       [(ngModel)]="lightboxService.captionAlwaysOn">
+              </div>
            </div>
          </li>
          <li role="menuitem">
            <div class="dropdown-item d-flex justify-content-between">
-              <span title="key: a" i18n-title i18n>Show faces</span>
-              <bSwitch
-                class="switch ps-2"
-                name="faces-switch"
-                switch-on-color="success"
-                [switch-inverse]="true"
-                switch-off-text="on hover"
-                switch-on-text="always"
-                i18n-switch-off-text
-                i18n-switch-on-text
-                [switch-label-width]="30"
-                [(ngModel)]="lightboxService.facesAlwaysOn">
-              </bSwitch>
+              <span title="key: a" i18n-title i18n>Always show faces</span>
+              <div class="form-check form-switch">
+                <input class="form-check-input"
+                       type="checkbox"
+                       role="switch"
+                       name="faces-switch"
+                       id="faces-switch"
+                       [(ngModel)]="lightboxService.facesAlwaysOn">
+              </div>
            </div>
          </li>
          <li
            *ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
            role="menuitem">
            <div class="dropdown-item d-flex justify-content-between">
-              <span title="key: l" i18n-title i18n>Play videos</span>
-              <bSwitch
-                class="switch ps-2"
-                name="faces-switch"
-                switch-on-color="success"
-                [switch-inverse]="true"
-                switch-off-text="once"
-                switch-on-text="loop"
-                i18n-switch-off-text
-                i18n-switch-on-text
-                [switch-label-width]="30"
-                [(ngModel)]="lightboxService.loopVideos">
-              </bSwitch>
+              <span title="key: l" i18n-title i18n>Loop videos</span>
+
+              <div class="form-check form-switch">
+                <input class="form-check-input"
+                       type="checkbox"
+                       role="switch"
+                       name="loop-videos-switch"
+                       id="loop-videos-switch"
+                       [(ngModel)]="lightboxService.loopVideos">
+              </div>
            </div>
          </li>
        </ul>
--- a/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
+++ b/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
@ -200,22 +200,16 @@
      </div>
      <div *ngSwitchCase="SearchQueryTypes.orientation" class="col-md-8 d-flex">
        <div class="input-group col-md-6">
-          <bSwitch
-            class="switch"
-            id="orientation"
-            name="orientation"
-            title="Orientation"
-            switch-on-color="primary"
-            switch-off-color="primary"
-            [switch-inverse]="true"
-            switch-off-text="Portrait"
-            switch-on-text="Landscape"
-            i18n-switch-off-text
-            i18n-switch-on-text
-            [switch-label-width]="30"
-            (ngModelChange)="onChange()"
-            [(ngModel)]="AsOrientationQuery.landscape">
-          </bSwitch>
+          <select class="form-select"
+                  [(ngModel)]="AsOrientationQuery.landscape"
+                  (ngModelChange)="onChange()"
+                  id="orientation-select"
+                  name="orientation-select"
+                  title="Orientation"
+                  required>
+            <option [ngValue]="true" i18n>Landscape</option>
+            <option [ngValue]="false" i18n>Portrait</option>
+          </select>
        </div>
      </div>
    </ng-container>
--- a/src/frontend/app/ui/gallery/share/share.gallery.component.html
+++ b/src/frontend/app/ui/gallery/share/share.gallery.component.html
@ -54,26 +54,24 @@
          <label class="control-label" for="includeSubfolders" i18n>Include subfolders:</label>
        </div>
        <div class="col-8">
-          <bSwitch
-            class="switch"
-            name="includeSubfolders"
-            id="includeSubfolders"
-            [switch-on-color]="'success'"
-            [switch-inverse]="true"
-            [switch-off-text]="text.No"
-            [switch-on-text]="text.Yes"
-            [switch-label-width]="30"
-            (change)="update()"
-            [(ngModel)]="input.includeSubfolders">
-          </bSwitch>
+          <div class="form-check form-switch">
+            <input class="form-check-input"
+                   type="checkbox"
+                   role="switch"
+                   id="includeSubfolders"
+                   name="includeSubfolders"
+                   title="Orientation"
+                   (change)="update()"
+                   [(ngModel)]="input.includeSubfolders">
+          </div>
        </div>
      </div>

      <div class="row" *ngIf="passwordProtection">
        <div class="col-4">
          <label class="control-label" for="share-password">
-            <ng-container i18n>Password</ng-container>
-            *:
+            <ng-container i18n>Password</ng-container><!--
+            -->*:
          </label>
        </div>
        <div class="col-8">
--- a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
+++ b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
@ -53,31 +53,25 @@
        </select>


-        <bSwitch
-          *ngSwitchCase="'Boolean'"
-          class="switch"
-          [id]="idName"
-          [name]="idName"
-          [title]="title"
-          [disabled]="state.readonly || Disabled"
-          switch-on-color="primary"
-          [switch-inverse]="true"
-          switch-off-text="Disabled"
-          switch-on-text="Enabled"
-          i18n-switch-off-text
-          i18n-switch-on-text
-          [switch-label-width]="30"
-          (ngModelChange)="onChange($event)"
-          [(ngModel)]="state.value">
-        </bSwitch>
-        
+        <div class="form-check form-switch fs-5">
+          <input class="form-check-input"
+                 *ngSwitchCase="'Boolean'"
+                 [id]="idName"
+                 [name]="idName"
+                 [title]="title"
+                 [disabled]="state.readonly || Disabled"
+                 type="checkbox"
+                 role="switch"
+                 (ngModelChange)="onChange($event)"
+                 [(ngModel)]="state.value">
+        </div>
+
        <app-settings-workflow
          class="w-100"
          *ngSwitchCase="'JobScheduleConfig'"
          [(ngModel)]="state.value"
          [id]="idName"
          [name]="idName"
-          [title]="title"
          (ngModelChange)="onChange($event)">
        </app-settings-workflow>

--- a/src/frontend/app/ui/settings/template/template.component.css
+++ b/src/frontend/app/ui/settings/template/template.component.css
@ -7,16 +7,24 @@
 }


-.switch-wrapper {
-  display: inline-block;
-  text-align: right;
-  padding: 0;
-  float: right;
-  margin-top: -4px;
-  margin-bottom: -4px;
+.form-check-input:focus {
+  border-color: var(--bs-success);
+  box-shadow: var(--bs-success);

 }

+.form-switch .form-check-input:checked {
+  background-color: var(--bs-success);
+}
+
+.form-switch .form-check-input:focus {
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23a3cfbb'/></svg>");
+}
+
+.form-switch .form-check-input:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+
 .changed-settings input {
  border-color: var(--bs-primary);
  border-width: 1.5px;
--- a/src/frontend/app/ui/settings/template/template.component.html
+++ b/src/frontend/app/ui/settings/template/template.component.html
@ -2,21 +2,20 @@
  <div class="card mb-4">
    <h5 class="card-header">
      <span class="oi oi-{{icon}}"></span> {{Name}}
-      <div *ngIf="states.value.enabled !== undefined"
-           class="switch-wrapper">
-        <bSwitch
-          class="switch"
-          name="enabled"
-          switch-on-color="success"
-          [switch-inverse]="true"
-          switch-off-text="Disabled"
-          switch-on-text="Enabled"
-          i18n-switch-off-text
-          i18n-switch-on-text
-          [switch-disabled]="inProgress"
-          [switch-label-width]="30"
-          [(ngModel)]="states.value.enabled">
-        </bSwitch>
+      <div *ngIf="states.value.enabled !== undefined" class="float-end p-0">
+
+        <div
+          class="form-check form-switch">
+          <label class="form-check-label" [for]="ConfigPath+'.enabled'" i18n>Enabled</label>
+
+          <input class="form-check-input"
+                 type="checkbox"
+                 role="switch"
+                 name="enabled"
+                 [id]="ConfigPath+'.enabled'"
+                 [disabled]="inProgress"
+                 [(ngModel)]="states.value.enabled">
+        </div>
      </div>
    </h5>
    <div class="card-body">
@ -81,7 +80,9 @@
        <ng-container *ngIf="rStates.value.__state[ck].isConfigType">
          <div class="card mt-2 mb-2" *ngIf="topLevel && enableNesting" [id]="ConfigPath+'.'+ck">
            <div class="card-body">
-              <h5 class="card-title"><span class="oi oi-{{rStates?.value.__state[ck].tags?.uiIcon}}"></span> {{rStates?.value.__state[ck].tags?.name || ck}}</h5>
+              <h5 class="card-title"><span
+                class="oi oi-{{rStates?.value.__state[ck].tags?.uiIcon}}"></span> {{rStates?.value.__state[ck].tags?.name || ck}}
+              </h5>
              <ng-container
                *ngTemplateOutlet="Recursion; context:{ rStates: rStates.value.__state[ck], confPath:confPath+'.'+ck }"
              ></ng-container>
--- a/src/frontend/app/ui/settings/workflow/workflow.component.html
+++ b/src/frontend/app/ui/settings/workflow/workflow.component.html
@ -119,23 +119,24 @@
                [(timestamp)]="schedule.trigger.atTime"></app-timestamp-timepicker>
            </div>
          </div>
+
          <div class="mb-3 row">
            <label class="col-md-2 control-label" [for]="'allowParallelRun'+'_'+i" i18n>Allow parallel run</label>
            <div class="col-md-10">
-              <bSwitch
-                class="switch"
-                [name]="'allowParallelRun'+'_'+i"
-                [id]="'allowParallelRun'+'_'+i"
-                switch-on-color="primary"
-                [switch-inverse]="true"
-                switch-off-text="Disabled"
-                switch-on-text="Enabled"
-                i18n-switch-off-text i18n-switch-on-text
-                [switch-label-width]="30"
-                (ngModelChange)="onChange($event)"
-                [(ngModel)]="schedule.allowParallelRun">
-              </bSwitch>
-              <small class="form-text text-muted ms-2"
+              <div class="input-group">
+
+                <div
+                  class="form-check form-switch  fs-5">
+                  <input class="form-check-input"
+                         type="checkbox"
+                         role="switch"
+                         [name]="'allowParallelRun'+'_'+i"
+                         [id]="'allowParallelRun'+'_'+i"
+                         (ngModelChange)="onChange($event)"
+                         [(ngModel)]="schedule.allowParallelRun">
+                </div>
+              </div>
+              <small class="form-text text-muted"
                     i18n>Enables the job to start even if another job is already running.
              </small>
            </div>
@ -145,7 +146,7 @@

      </div>

-      <ng-container *ngIf="jobsService.getConfigTemplate(schedule.jobName) ">
+      <ng-container *ngIf="jobsService.getConfigTemplate(schedule.jobName)">
        <hr/>
        <div *ngFor="let configEntry of  jobsService.getConfigTemplate(schedule.jobName)">

@ -153,48 +154,47 @@
            <label class="col-md-2 control-label"
                   [for]="configEntry.id+'_'+i">{{backendTextService.get(configEntry.name)}}</label>
            <div class="col-md-10">
-              <ng-container [ngSwitch]="configEntry.type">
-                <ng-container *ngSwitchCase="'boolean'">
-                  <bSwitch
-                    class="switch"
-                    [name]="configEntry.id+'_'+i"
-                    [id]="configEntry.id+'_'+i"
-                    switch-on-color="primary"
-                    [switch-inverse]="true"
-                    switch-off-text="Disabled"
-                    switch-on-text="Enabled"
-                    i18n-switch-off-text i18n-switch-on-text
-                    [switch-label-width]="30"
-                    (ngModelChange)="onChange($event)"
-                    [(ngModel)]="schedule.config[configEntry.id]">
-                  </bSwitch>
-                </ng-container>
+              <div class="input-group">
+                <ng-container [ngSwitch]="configEntry.type">
+                  <div
+                    *ngSwitchCase="'boolean'"
+                    class="form-check form-switch  fs-5">
+                    <input class="form-check-input"
+                           type="checkbox"
+                           role="switch"
+                           [name]="configEntry.id+'_'+i"
+                           [id]="configEntry.id+'_'+i"
+                           (ngModelChange)="onChange($event)"
+                           [(ngModel)]="schedule.config[configEntry.id]">
+                  </div>

-                <ng-container *ngSwitchCase="'string'">
-                  <input type="text" class="form-control" [name]="configEntry.id+'_'+i"
-                         [id]="configEntry.id+'_'+i"
-                         (ngModelChange)="onChange($event)"
-                         [(ngModel)]="schedule.config[configEntry.id]" required>
-                </ng-container>
+                  <ng-container *ngSwitchCase="'string'">
+                    <input type="text" class="form-control" [name]="configEntry.id+'_'+i"
+                           [id]="configEntry.id+'_'+i"
+                           (ngModelChange)="onChange($event)"
+                           [(ngModel)]="schedule.config[configEntry.id]" required>
+                  </ng-container>

-                <ng-container *ngSwitchCase="'number'">
-                  <input type="number" class="form-control" [name]="configEntry.id+'_'+i"
-                         [id]="configEntry.id+'_'+i"
-                         (ngModelChange)="onChange($event)"
-                         [(ngModel)]="schedule.config[configEntry.id]" required>
-                </ng-container>
+                  <ng-container *ngSwitchCase="'number'">
+                    <input type="number" class="form-control" [name]="configEntry.id+'_'+i"
+                           [id]="configEntry.id+'_'+i"
+                           (ngModelChange)="onChange($event)"
+                           [(ngModel)]="schedule.config[configEntry.id]" required>
+                  </ng-container>

-                <ng-container *ngSwitchCase="'number-array'">
-                  <input type="text" class="form-control"
-                         [name]="configEntry.id+'_'+i"
-                         [id]="configEntry.id+'_'+i"
-                         (ngModelChange)="setNumberArray(schedule.config,configEntry.id,$event); onChange($event);"
-                         [ngModel]="getNumberArray($any(schedule.config),configEntry.id)" required>
+                  <ng-container *ngSwitchCase="'number-array'">
+                    <input type="text" class="form-control"
+                           [name]="configEntry.id+'_'+i"
+                           [id]="configEntry.id+'_'+i"
+                           (ngModelChange)="setNumberArray(schedule.config,configEntry.id,$event); onChange($event);"
+                           [ngModel]="getNumberArray($any(schedule.config),configEntry.id)" required>
+                  </ng-container>
                </ng-container>
-              </ng-container>
-              <small class="form-text text-muted ms-2">
+              </div>
+              <small class="form-text text-muted">
                <ng-container *ngIf="configEntry.type == 'number-array'" i18n>';' separated integers.
-                </ng-container>{{backendTextService.get(configEntry.description)}}
+                </ng-container>
+                {{backendTextService.get(configEntry.description)}}
              </small>
            </div>
          </div>
@ -224,7 +224,7 @@
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="jobModalLabel" i18n>Add new job</h5>
-        <button type="button"  class="btn-close"  (click)="jobModal.hide()" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="btn-close" (click)="jobModal.hide()" data-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <form #jobModalForm="ngForm">
--- a/src/frontend/bootstrap-switch.css
+++ b/src/frontend/bootstrap-switch.css
@ -1,180 +0,0 @@
-/**
-  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
-  *
-  * @version v3.3.4
-  * @homepage https://bttstrp.github.io/bootstrap-switch
-  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
-  * @license Apache-2.0
-  */
-
-.bootstrap-switch {
-  display: inline-block;
-  direction: ltr;
-  cursor: pointer;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  position: relative;
-  text-align: left;
-  overflow: hidden;
-  line-height: 8px;
-  z-index: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-.bootstrap-switch .bootstrap-switch-container {
-  display: inline-block;
-  top: 0;
-  border-radius: 4px;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-.bootstrap-switch .bootstrap-switch-handle-on,
-.bootstrap-switch .bootstrap-switch-handle-off,
-.bootstrap-switch .bootstrap-switch-label {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: table-cell;
-  vertical-align: middle;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 20px;
-}
-.bootstrap-switch .bootstrap-switch-handle-on,
-.bootstrap-switch .bootstrap-switch-handle-off {
-  text-align: center;
-  z-index: 1;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
-  color: #fff;
-  background: #337ab7;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
-  color: #fff;
-  background: #5bc0de;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
-  color: #fff;
-  background: #5cb85c;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
-  background: #f0ad4e;
-  color: #fff;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
-  color: #fff;
-  background: #d9534f;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
-  color: #000;
-  background: #eeeeee;
-}
-.bootstrap-switch .bootstrap-switch-label {
-  text-align: center;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  z-index: 100;
-  color: #333;
-  background: #fff;
-}
-.bootstrap-switch span::before {
-  content: "\200b";
-}
-.bootstrap-switch .bootstrap-switch-handle-on {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch .bootstrap-switch-handle-off {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch input[type='radio'],
-.bootstrap-switch input[type='checkbox'] {
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  margin: 0;
-  z-index: -1;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  visibility: hidden;
-}
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
-  padding: 6px 16px;
-  font-size: 18px;
-  line-height: 1.3333333;
-}
-.bootstrap-switch.bootstrap-switch-disabled,
-.bootstrap-switch.bootstrap-switch-readonly,
-.bootstrap-switch.bootstrap-switch-indeterminate {
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-  -webkit-transition: margin-left 0.5s;
-  -o-transition: margin-left 0.5s;
-  transition: margin-left 0.5s;
-}
-.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
-  border-radius: 0 3px 3px 0;
-}
-.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
-  border-radius: 3px 0 0 3px;
-}
-.bootstrap-switch.bootstrap-switch-focused {
-  border-color: #66afe9;
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@ -8,20 +8,6 @@ a {
  margin-right: 0;
 }

-.bootstrap-switch-label {
-  margin-right: -4px;
-  margin-left: -4px;
-}
-
-
-.changed-settings.bootstrap-switch {
-  border-color: var(--bs-primary);
-  border-width: 1px;
-}
-
-.changed-settings .no-changed-settings .bootstrap-switch {
-  border-color: var(--bs-gray-400) !important;
-}

 #toast-container > div {
  opacity: 1;
@ -31,26 +17,12 @@ bs-dropdown-container {
  z-index: 1;
 }

-
 .slim-loading-bar-progress {
  transition: opacity 1s ease-in;
  transition-delay: 1s;
  transition-property: opacity;
 }

-
 element.style {
  width: 100px;
 }
-.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success{
-  background: var(--bs-success);
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary{
-  background: var(--bs-primary);
-}