Rename to app-market

.github/workflows/docker-build-action.yaml

@@ -24,4 +24,4 @@ jobs:
         with:
           context: .
           push: true
-          tags: thingpulse/esp-iot-flasher:latest
+          tags: thingpulse/esp-app-market:latest

Dockerfile

@@ -6,5 +6,5 @@ RUN npm install
 RUN npm run build --prod
 #stage 2
 FROM nginx:alpine
-COPY --from=node /app/dist/esp-iot-flasher /usr/share/nginx/html
+COPY --from=node /app/dist/esp-app-market /usr/share/nginx/html
 COPY /nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -1,12 +1,7 @@
-# ESP-IoT-Flasher
+# ESP-Firmware-Store
 
-The ESP-IoT-Flasher is web-based tool which is made for simplicity of use.
-A device tester just needs to install the UART driver. After opening the application
-in his browser he selects the device and clicks `Flash & Test`. The web application
-then flashes a firmware to the device and the device responds with tests results from tests
-running on the device.
+The ESP-Firmware-Store is web-based tool which is made for simplicity of use.
 
-[![Running the test](https://img.youtube.com/vi/a3fYCeyGAyI/maxresdefault.jpg)](https://www.youtube.com/shorts/a3fYCeyGAyI)
 
 ## Development server
 
@@ -24,11 +19,11 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 ### Building docker for local machine architecture
 
-`docker build -t thingpulse/esp-iot-flasher:1.0.2 . `
+`docker build -t thingpulse/esp-app-market:1.0.2 . `
 
 ### building docker on ARM for x86
 
-`docker buildx build --platform linux/amd64 -t thingpulse/esp-iot-flasher:1.0.2 .`
+`docker buildx build --platform linux/amd64 -t thingpulse/esp-app-market:1.0.2 .`
 
 ### Running with docker-compose
 
@@ -40,9 +35,7 @@ will start the service at http://localhost:8081
 ## Changing device configuration
 
 Default configurations loads the browser from the server. The angular application looks for a configuration
-file at `/assets/defaultDeviceConfiguration.json`: 
-
-https://github.com/ThingPulse/esp-iot-flasher/blob/1c669c1fe53238a759b6027cf89888fffa4055e9/src/assets/defaultDeviceConfiguration.json#L1-L24
+file at `/assets/defaultDeviceConfiguration.json`
 
 ### Explanation
 
@@ -66,7 +59,7 @@ Adapt and uncomment the following lines to use your own configuration files in `
 ## Creating firmware to run the test
 
 The following repository shows how to build a firmware which can be used together with the
-esp-iot-flasher: https://github.com/ThingPulse/esp32-epulse-feather-testbed
+esp-app-market: https://github.com/ThingPulse/esp32-epulse-feather-testbed
 
 ## FAQ
 

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "esp-iot-flasher": {
+    "esp-app-market": {
       "projectType": "application",
       "schematics": {},
       "root": "",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/esp-iot-flasher",
+            "outputPath": "dist/esp-app-market",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -61,18 +61,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "esp-iot-flasher:build:production"
+              "browserTarget": "esp-app-market:build:production"
             },
             "development": {
-              "browserTarget": "esp-iot-flasher:build:development"
+              "browserTarget": "esp-app-market:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "esp-iot-flasher:build"
+            "browserTarget": "esp-app-market:build"
           }
         },
         "test": {

docker-compose.yaml

@@ -1,8 +1,8 @@
 version: '2'
 services:
     message-server:
-        container_name: esp-iot-flasher
-        image: thingpulse/esp-iot-flasher:1.0.8
+        container_name: esp-app-market
+        image: thingpulse/esp-app-market:1.0.8
         restart: always
         ports:
             - 8081:80

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "esp-iot-flasher",
+  "name": "esp-app-market",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

src/app/app.component.html

@@ -2,8 +2,8 @@
 
     <button mat-raised-button color="primary" [routerLink]="['/']">
     <mat-icon>home</mat-icon> Home</button>
-    <span>Firmware Store</span>
-    <a href="https://github.com/ThingPulse/esp-iot-flasher" target="_blank"><span><mat-icon>share</mat-icon> Github</span></a>
+    <span>ESP App Market</span>
+    <a href="https://github.com/ThingPulse/" target="_blank"><span><mat-icon>share</mat-icon> Github</span></a>
 
 
 </mat-toolbar>

src/app/app.component.spec.ts

@@ -16,16 +16,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'esp-iot-flasher'`, () => {
+  it(`should have as title 'esp-app-market'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('esp-iot-flasher');
+    expect(app.title).toEqual('esp-app-market');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('esp-iot-flasher app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('esp-app-market app is running!');
   });
 });

src/app/app.module.ts

@@ -6,14 +6,26 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 import { MaterialModule } from './material/material.module';
 import { RouterModule, Routes } from '@angular/router';
+import { DevicesComponent } from './devices/devices.component';
+import { AppsComponent } from './apps/apps.component';
+import { CacheInterceptor } from './services/cache.interceptor';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FlasherComponent } from './flasher/flasher.component';
 
 const routes: Routes = [
-  { path: '**', redirectTo: '/', pathMatch: 'full' }
+  { path: '', component: DevicesComponent },
+  { path: 'device/:deviceId', component: AppsComponent },
+  { path: 'device/:deviceId/app/:appId', component: FlasherComponent },
+  { path: '**', redirectTo: '/', pathMatch: 'full' },
+
 ];
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    DevicesComponent,
+    AppsComponent,
+    FlasherComponent
   ],
   imports: [
     BrowserModule,
@@ -23,7 +35,9 @@ const routes: Routes = [
     FormsModule,
     RouterModule.forRoot(routes)
   ],
-  providers: [],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/apps/apps.component.css

@@ -0,0 +1,3 @@
+.mdc-card {
+    margin-bottom: 10px;
+}

src/app/apps/apps.component.html

@@ -0,0 +1,25 @@
+<h1>{{device?.name}}</h1>
+<mat-card>
+    <mat-card-header>
+      <img mat-card-avatar [src]="device?.imageThumbnail"  alt="Device"/>
+      <mat-card-title>{{device?.name}}</mat-card-title>
+      <mat-card-subtitle>{{device?.manufacturer}}</mat-card-subtitle>
+
+    </mat-card-header>
+
+    <mat-card-content>{{device?.description}}</mat-card-content>
+</mat-card>
+
+
+<mat-card *ngFor="let app of apps">
+  <mat-card-header>
+    <img mat-card-avatar [src]="app.appIcon" alt="Device"/>
+    <mat-card-title>{{app.name}}</mat-card-title>
+    <mat-card-subtitle>{{app?.version}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>{{app?.description}}</mat-card-content>
+  <mat-card-actions align="end">
+    <button mat-raised-button color="primary" [routerLink]="['/device', device?.id, 'app', app.id]">Flash App</button>
+
+  </mat-card-actions>
+</mat-card>

src/app/apps/apps.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppsComponent } from './apps.component';
+
+describe('AppsComponent', () => {
+  let component: AppsComponent;
+  let fixture: ComponentFixture<AppsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AppsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/apps/apps.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DevicesService } from '../services/devices.service';
+import { Device } from '../models/device';
+import { AppsService } from '../services/apps.service';
+import { App } from '../models/app';
+
+@Component({
+  selector: 'app-apps',
+  templateUrl: './apps.component.html',
+  styleUrls: ['./apps.component.css']
+})
+export class AppsComponent implements OnInit{
+
+  deviceId: string;
+  device: Device | undefined;
+  apps: App[];
+
+  constructor(private route: ActivatedRoute, 
+              public deviceService: DevicesService,
+              public appService: AppsService ) { }
+
+
+  ngOnInit(): void {
+    this.deviceId = this.route.snapshot.paramMap.get("deviceId")!;
+    console.log(this.deviceId);
+    this.deviceService.findById(this.deviceId).subscribe((device) => {  this.device = device; })
+    console.log(this.device);
+    this.appService.findByDeviceId(this.deviceId).subscribe((apps) => {
+      this.apps = apps;
+    });
+  }
+
+}

src/app/devices/devices.component.html

@@ -0,0 +1,13 @@
+<mat-card *ngFor="let device of devices">
+    <mat-card-header>
+      <img mat-card-avatar [src]="device.imageThumbnail"  alt="Device"/>
+      <mat-card-title>{{device.name}}</mat-card-title>
+      <mat-card-subtitle>{{device.manufacturer}}</mat-card-subtitle>
+
+    </mat-card-header>
+
+    <mat-card-content>{{device.description}}</mat-card-content>
+    <mat-card-actions>
+        <button mat-raised-button [routerLink]="['/device', device.id]">Apps</button>
+      </mat-card-actions>
+</mat-card>

src/app/devices/devices.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DevicesComponent } from './devices.component';
+
+describe('DevicesComponent', () => {
+  let component: DevicesComponent;
+  let fixture: ComponentFixture<DevicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DevicesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DevicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/devices/devices.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { DevicesService } from '../services/devices.service';
+import { Device } from '../models/device';
+
+@Component({
+  selector: 'app-devices',
+  templateUrl: './devices.component.html',
+  styleUrls: ['./devices.component.css']
+})
+export class DevicesComponent implements OnInit {
+
+  devices: Device[] = [];
+
+  constructor(public deviceService: DevicesService) { }
+
+  ngOnInit(): void {
+    this.deviceService.getDevices().subscribe((devices) => {
+      this.devices = devices;
+    });
+  }
+
+}

src/app/flasher/flasher.component.css

@@ -0,0 +1,19 @@
+.flex-container {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    padding: 16px;
+  }
+
+.flex-row {
+    display: flex; /* or inline-flex */
+    padding-right: 10px;
+    gap: 20px;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .mdc-card {
+    margin-bottom: 10px;
+}
+