Ajout de la fenetre permettant de selectionner les lightshow voulus

.env

@@ -0,0 +1 @@
+LIGHTSHOW_DIR=""

client/.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+.env

client/app.js

@@ -2,6 +2,7 @@ const {app, BrowserWindow, ipcMain} = require('electron')
 const url = require("url");
 const path = require("path");
 const deviceInformation = require('./service/deviceinformation')
+const LightshowService = require('./service/LightshowService')
 
 let mainWindow
 
@@ -34,6 +35,11 @@ function createWindow () {
     return test.deviceList()
   })
 
+  ipcMain.handle('lightshow-list', () =>  {
+    let ligthshowService = new LightshowService();
+    return ligthshowService.getAllLigthshow()
+  })
+
 }
 
 app.on('ready', createWindow)

client/package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^17.0.0",
         "@angular/platform-browser-dynamic": "^17.0.0",
         "@angular/router": "^17.0.0",
+        "dotenv": "^16.4.1",
         "drivelist": "^11.1.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -6516,6 +6517,17 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz",
+      "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/drivelist": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/drivelist/-/drivelist-11.1.0.tgz",

client/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "dotenv": "^16.4.1",
     "drivelist": "^11.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

client/preload.js

@@ -11,11 +11,11 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 })
 
-contextBridge.exposeInMainWorld('versions', {
+contextBridge.exposeInMainWorld('device', {
-    node: () => process.versions.node,
+    info: () => ipcRenderer.invoke('device-info')
-    chrome: () => process.versions.chrome,
+    //Nous pouvons exposer des variables en plus des fonctions
-    electron: () => process.versions.electron,
+})
-    ping: () => ipcRenderer.invoke('ping'),
+contextBridge.exposeInMainWorld('lightshow', {
-    deviceInfo: () => ipcRenderer.invoke('device-info')
+    list: () => ipcRenderer.invoke('lightshow-list')
     //Nous pouvons exposer des variables en plus des fonctions
 })

client/service/LightshowService.js

@@ -1,17 +1,11 @@
-const { PrismaClient } = require('@prisma/client')
 const fs = require('fs')
+require('dotenv').config();
 
-const prisma = new PrismaClient()
 const usbLightshow = process.env.LIGHTSHOW_DIR || '';
 class LigthshowService{
 
 
-    async getAllLigthshow() {
-        const posts = await prisma.Lightshow.findMany({
-        })
 
-        return posts;
-    }
 
     //
     // createLigthshow(ligthshow) {
@@ -60,7 +54,20 @@ class LigthshowService{
         }
         return filename;
     }
+
+    getAllLigthshow() {
+      let lightshows = [];
+      let files = fs.readdirSync(usbLightshow);
+      files.forEach(function (file) {
+        // Do whatever you want to do with the file
+        let lightshowName = file.split('.')[0];
+        if (!lightshows.includes(lightshowName) && lightshowName){
+          lightshows.push(lightshowName)
+        }
+      });
+      return lightshows;
+    }
 }
 
 
-module.exports = LigthshowService
+module.exports = LigthshowService

client/src/app/device-list/device-list.component.ts

@@ -4,6 +4,10 @@ import {CommonModule} from "@angular/common";
 import {MatIconModule} from "@angular/material/icon";
 import {MatButtonModule} from "@angular/material/button";
 import {MatDialogModule} from "@angular/material/dialog";
+import {MatDialog} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatSelectModule} from "@angular/material/select";
+import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms";
 
 export interface DeviceList {
   device: string;
@@ -20,7 +24,7 @@ const ELEMENT_DATA: DeviceList[] = [];
 @Component({
   selector: 'app-device-list',
   standalone: true,
-  imports: [MatTableModule, CommonModule, MatIconModule, MatButtonModule],
+  imports: [MatTableModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule],
   templateUrl: `./device-list.component.html`,
   styleUrl: './device-list.component.css'
 })
@@ -29,8 +33,10 @@ export class DeviceListComponent implements OnInit {
   displayedColumns: string[] = ['device', 'mountpoint', 'actions'];
   dataSource : DeviceList[] = [];
 
+  constructor(public dialog: MatDialog) {}
+
    ngOnInit(): void {
-     (<any>window).versions.deviceInfo().then((e:any ) => {
+     (<any>window).device.info().then((e:any ) => {
        this.dataSource = e;
      })
   }
@@ -38,19 +44,29 @@ export class DeviceListComponent implements OnInit {
   openElement(deviceList : DeviceList) : void {
     const dialogRef = this.dialog.open(DialogContentExampleDialog);
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.afterClosed().subscribe((result : any) => {
-      console.log(`Dialog result: ${result}`);
+      console.log(result.value)
     });
   }
-  openDialog() {
-
-  }
 }
 
 @Component({
-  selector: 'dialog-content-example-dialog',
+  selector: 'dialog-content-add-dialog',
-  templateUrl: 'dialog-content-example-dialog.html',
+  templateUrl: 'dialog-content-add-dialog.html',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule],
+  imports: [MatDialogModule, MatButtonModule, CommonModule, MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
-export class DialogContentExampleDialog {}
+export class DialogContentExampleDialog implements OnInit {
+  lightshows : String[] = [];
+
+  deviceName : String = "";
+
+  toppings = new FormControl('');
+  toppingList: string[] = [];
+
+  ngOnInit(): void {
+    (<any>window).lightshow.list().then((e:any ) => {
+      this.toppingList = e;
+    })
+  }
+}

client/src/app/device-list/dialog-content-add-dialog.html

@@ -1,64 +1,15 @@
-<h2 mat-dialog-title>Install Angular</h2>
+<h2 mat-dialog-title>Ligthshow on device {{ deviceName}}</h2>
 <mat-dialog-content class="mat-typography">
-  <h3>Develop across all platforms</h3>
+  <mat-form-field>
-  <p>Learn one way to build applications with Angular and reuse your code and abilities to build
+    <mat-label>Lightshow</mat-label>
-    apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+    <mat-select [formControl]="toppings" multiple>
-
+      @for (topping of toppingList; track topping) {
-  <h3>Speed &amp; Performance</h3>
+      <mat-option [value]="topping">{{topping}}</mat-option>
-  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
+      }
-    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
+    </mat-select>
-    data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
+  </mat-form-field>
-
-  <h3>Incredible tooling</h3>
-  <p>Build features quickly with simple, declarative templates. Extend the template language with
-    your own components and use a wide array of existing components. Get immediate Angular-specific
-    help and feedback with nearly every IDE and editor. All this comes together so you can focus
-    on building amazing apps rather than trying to make the code work.</p>
-
-  <h3>Loved by millions</h3>
-  <p>From prototype through global deployment, Angular delivers the productivity and scalable
-    infrastructure that supports Google's largest applications.</p>
-
-  <h3>What is Angular?</h3>
-
-  <p>Angular is a platform that makes it easy to build applications with the web. Angular
-    combines declarative templates, dependency injection, end to end tooling, and integrated
-    best practices to solve development challenges. Angular empowers developers to build
-    applications that live on the web, mobile, or the desktop</p>
-
-  <h3>Architecture overview</h3>
-
-  <p>Angular is a platform and framework for building client applications in HTML and TypeScript.
-    Angular is itself written in TypeScript. It implements core and optional functionality as a
-    set of TypeScript libraries that you import into your apps.</p>
-
-  <p>The basic building blocks of an Angular application are NgModules, which provide a compilation
-    context for components. NgModules collect related code into functional sets; an Angular app is
-    defined by a set of NgModules. An app always has at least a root module that enables
-    bootstrapping, and typically has many more feature modules.</p>
-
-  <p>Components define views, which are sets of screen elements that Angular can choose among and
-    modify according to your program logic and data. Every app has at least a root component.</p>
-
-  <p>Components use services, which provide specific functionality not directly related to views.
-    Service providers can be injected into components as dependencies, making your code modular,
-    reusable, and efficient.</p>
-
-  <p>Both components and services are simply classes, with decorators that mark their type and
-    provide metadata that tells Angular how to use them.</p>
-
-  <p>The metadata for a component class associates it with a template that defines a view. A
-    template combines ordinary HTML with Angular directives and binding markup that allow Angular
-    to modify the HTML before rendering it for display.</p>
-
-  <p>The metadata for a service class provides the information Angular needs to make it available
-    to components through Dependency Injection (DI).</p>
-
-  <p>An app's components typically define many views, arranged hierarchically. Angular provides
-    the Router service to help you define navigation paths among views. The router provides
-    sophisticated in-browser navigational capabilities.</p>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
+  <button mat-button [mat-dialog-close]="toppings" cdkFocusInitial>Install</button>
 </mat-dialog-actions>