Merge pull request #9 from robsonos/dev

Merge dev into main 🔀

.prettierignore

@@ -3,3 +3,4 @@ dist
 example/www
 example/ios
 example/android
+example/.angular

.vscode/settings.json

@@ -7,6 +7,7 @@
   "files.eol": "\n",
   "files.insertFinalNewline": true,
   "terminal.integrated.scrollback": 10000,
+  "terminal.integrated.defaultProfile.osx": "zsh",
 
   // Todo tree settings
   "todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "INFO"],

CONTRIBUTING.md

@@ -8,7 +8,7 @@ This guide provides instructions for contributing to this Capacitor plugin.
 
 #### Android studio
 
-Download and install [Android studio](https://developer.android.com/studio). The code has been developed using `Android Studio Giraffe | 2022.3.1 Patch 3`
+Download and install [Android studio](https://developer.android.com/studio). The code has been developed using `Android Studio Hedgehog | 2023.1.1 Patch 1`
 
 #### Xcode
 

android/src/main/AndroidManifest.xml

@@ -1,9 +1,14 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     package="com.example.plugin.nordicdfu">
+
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE" />
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+
     <application>
-        <service android:name=".DfuService"/>        
-        <activity android:name=".NotificationActivity"/>
+        <service
+            android:name=".DfuService"
+            android:foregroundServiceType="connectedDevice" />
+            <activity android:name=".NotificationActivity" />
     </application>
-
-    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
 </manifest>

android/src/main/java/com/example/plugin/nordicdfu/NordicDfu.java

@@ -1,9 +1,7 @@
 package com.example.plugin.nordicdfu;
 
-import android.app.NotificationManager;
 import android.content.Context;
 import android.os.Build;
-import android.os.Handler;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.getcapacitor.JSObject;

android/src/main/java/com/example/plugin/nordicdfu/NordicDfuPlugin.java

@@ -129,7 +129,7 @@ public void startDFU(PluginCall call) {
             }
 
             if (dfuOptions.has("packetsReceiptNotificationsValue")) {
-                starter.setPacketsReceiptNotificationsValue(dfuOptions.optInt("packetReceiptNotificationsEnabled"));
+                starter.setPacketsReceiptNotificationsValue(dfuOptions.optInt("packetsReceiptNotificationsValue"));
             }
 
             if (dfuOptions.has("forceDfu")) {

example/angular.json

@@ -16,28 +16,23 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "www",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
               }
             ],
             "styles": ["src/theme/variables.scss", "src/global.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -62,9 +57,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -109,11 +102,6 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
               }
             ],
             "styles": ["src/theme/variables.scss", "src/global.scss"],

example/capacitor.config.ts

@@ -0,0 +1,12 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.example.plugin.nordicdfu',
+  appName: 'example',
+  webDir: 'www/browser',
+  server: {
+    androidScheme: 'https',
+  },
+};
+
+export default config;

example/package.json

@@ -15,6 +15,9 @@
     "build": "ng build",
     "test": "ng test"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@angular/animations": "^17.0.2",
     "@angular/common": "^17.0.2",
@@ -50,10 +53,10 @@
     "@capacitor/cli": "5.6.0",
     "@ionic/angular-toolkit": "^9.0.0",
     "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "eslint": "^7.26.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "jasmine-core": "~5.1.0",
@@ -65,5 +68,13 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "ts-node": "^8.3.0",
     "typescript": "~5.2.2"
-  }
+  },
+  "browserslist": [
+    "Chrome >=79",
+    "ChromeAndroid >=79",
+    "Firefox >=70",
+    "Edge >=79",
+    "Safari >=14",
+    "iOS >=14"
+  ]
 }

example/src/app/app.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
   standalone: true,
-  imports: [IonicModule],
+  imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {}

example/src/app/app.routes.ts

@@ -3,11 +3,11 @@ import type { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: 'scan',
-    loadComponent: () => import('./scan/scan.page').then((m) => m.ScanPageComponent),
+    loadComponent: () => import('./scan/scan.page').then((m) => m.ScanPage),
   },
   {
     path: 'dfu',
-    loadComponent: () => import('./scan/dfu/dfu.page').then((m) => m.DfuComponent),
+    loadComponent: () => import('./scan/dfu/dfu.page').then((m) => m.DfuPage),
   },
   {
     path: '',

example/src/app/scan/dfu/dfu.page.html

@@ -10,7 +10,7 @@
 <ion-content>
   <ion-list>
     <ion-list-header>
-      <ion-card-title>DFU state</ion-card-title>
+      <ion-label>DFU state</ion-label>
     </ion-list-header>
     <ion-item>
       State: {{ update?.state ?? 'unknown' }} <br />
@@ -22,16 +22,15 @@
       Duration: {{ (update?.data?.duration ?? 0) | number }} <br />
       Remaining time: {{ (update?.data?.remainingTime ?? 0) | number }} <br />
     </ion-item>
-    <ion-progress-bar
-      *ngIf="update && update.data && update.data.percent"
-      [value]="update.data.percent / 100"
-    ></ion-progress-bar>
+    @if(update && update.data && update.data.percent){
+    <ion-progress-bar [value]="update.data.percent / 100"></ion-progress-bar>
+    }
   </ion-list>
 
   <ion-button expand="block" (click)="pickFile()">Pick Files</ion-button>
   <ion-button expand="block" (click)="updateFirmware()" [disabled]="!file">Update Firmware</ion-button>
-
-  <ion-list inset *ngIf="file; else noFile">
+  @if(file){
+  <ion-list inset>
     <ion-item>
       <ion-label>
         <ion-text>{{ file.name }}</ion-text><br />
@@ -42,8 +41,7 @@
       </div>
     </ion-item>
   </ion-list>
-
-  <ng-template #noFile>
-    <ion-note color="medium" class="ion-margin-horizontal">No file selected.</ion-note>
-  </ng-template>
+  } @else {
+  <ion-note color="medium" class="ion-margin-horizontal">No file selected.</ion-note>
+  }
 </ion-content>

example/src/app/scan/dfu/dfu.page.ts

@@ -1,12 +1,29 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, DecimalPipe } from '@angular/common';
 import { Component, Inject, NgZone } from '@angular/core';
 import { Router } from '@angular/router';
 import { type PluginResultError } from '@capacitor/core';
 import { Directory, Filesystem } from '@capacitor/filesystem';
 import { type BleDevice, type ScanResult } from '@capacitor-community/bluetooth-le';
 import { FilePicker, type PickedFile } from '@capawesome/capacitor-file-picker';
-import { IonicModule, Platform } from '@ionic/angular';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonListHeader,
+  IonItem,
+  IonButton,
+  IonButtons,
+  IonBackButton,
+  IonLabel,
+  IonText,
+  IonNote,
+  IonProgressBar,
+  IonSegment,
+  IonSegmentButton,
+} from '@ionic/angular/standalone';
 import { NordicDfu, type DfuUpdateOptions, DfuOptions, DfuUpdate } from 'capacitor-community-nordic-dfu';
 
 import { ToastService } from '../../services/toast.service';
@@ -16,19 +33,33 @@ import { ToastService } from '../../services/toast.service';
   templateUrl: 'dfu.page.html',
   styleUrls: ['dfu.page.scss'],
   standalone: true,
-  imports: [IonicModule, CommonModule],
+  imports: [
+    AsyncPipe,
+    DecimalPipe,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonListHeader,
+    IonItem,
+    IonButton,
+    IonButtons,
+    IonBackButton,
+    IonLabel,
+    IonText,
+    IonNote,
+    IonProgressBar,
+    IonSegment,
+    IonSegmentButton,
+  ],
 })
-export class DfuComponent {
+export class DfuPage {
   public device!: BleDevice;
   public file!: PickedFile | undefined;
   public update: DfuUpdate | undefined;
 
-  constructor(
-    @Inject(NgZone) private ngZone: NgZone,
-    public platform: Platform,
-    private router: Router,
-    private toastService: ToastService
-  ) {
+  constructor(@Inject(NgZone) private ngZone: NgZone, private router: Router, private toastService: ToastService) {
     const navigation = this.router.getCurrentNavigation();
 
     if (!navigation) {

example/src/app/scan/scan.page.html

@@ -1,31 +1,42 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
     <ion-title>Scan</ion-title>
-    <ion-progress-bar *ngIf="scanProgress > 0" [value]="scanProgress"></ion-progress-bar>
+    @if(scanProgress > 0){
+    <ion-progress-bar [value]="scanProgress"></ion-progress-bar>
+    }
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-button expand="block" [disabled]="bluetoothIsScanning" (click)="scanForBluetoothDevices()">
-    {{ bluetoothIsScanning ? "Scanning" : "Scan" }}
-  </ion-button>
+  <ion-refresher slot="fixed" #scanRefresher (ionRefresh)="scanForBluetoothDevices($event)">
+    <ion-refresher-content pullingText="Pull to scan" refreshingText="Scanning..."></ion-refresher-content>
+  </ion-refresher>
 
   <ion-grid>
-    <ion-list *ngIf="(scanResults$ | async) as scanResults; else noDevices">
+    @if(scanResults$ | async; as scanResults){
+    <ion-list>
+      @for (scanResult of scanResults; track $index) {
       <ion-item
-        *ngFor="let scanResult  of scanResults"
         (click)="stopScanForBluetoothDevices()"
         [routerLink]="['/dfu']"
         [state]="{ device: scanResult}"
+        lines="full"
         button
       >
         <ion-icon color="primary" slot="start" [src]="getRssiIcon(scanResult.rssi || -90)" size="large"></ion-icon>
         <ion-label> {{ scanResult.device.name || 'Unknown' }} </ion-label>
         <ion-note slot="end">{{ scanResult.rssi }} db</ion-note>
       </ion-item>
-    </ion-list>
-    <ng-template #noDevices>
+      } @empty {
       <ion-note color="medium" class="ion-margin-horizontal">No devices found.</ion-note>
-    </ng-template>
+      }
+    </ion-list>
+
+    } @else {
+    <ion-note color="medium" class="ion-margin-horizontal">Swipe down to scan for nearby Bluetooth devices.</ion-note>
+    }
   </ion-grid>
 </ion-content>