From 62820d9181e023e3fb32f2d0ae994fb399a3fedc Mon Sep 17 00:00:00 2001 From: Quentin Millardet Date: Sun, 28 Jan 2024 01:31:10 +0100 Subject: [PATCH] Ajout de la fenetre permettant de selectionner les lightshow voulus --- .env | 1 + client/.gitignore | 1 + client/app.js | 6 ++ client/package-lock.json | 12 ++++ client/package.json | 1 + client/preload.js | 12 ++-- client/service/LightshowService.js | 23 ++++--- .../app/device-list/device-list.component.ts | 38 +++++++--- .../dialog-content-add-dialog.html | 69 +++---------------- 9 files changed, 79 insertions(+), 84 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..aecfb59 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +LIGHTSHOW_DIR="" \ No newline at end of file diff --git a/client/.gitignore b/client/.gitignore index 0711527..dfe4da9 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -40,3 +40,4 @@ testem.log # System files .DS_Store Thumbs.db +.env diff --git a/client/app.js b/client/app.js index 1669d7b..70f33c4 100644 --- a/client/app.js +++ b/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) diff --git a/client/package-lock.json b/client/package-lock.json index dcad041..e7f1f07 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index cd2d8c7..c2f9495 100644 --- a/client/package.json +++ b/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", diff --git a/client/preload.js b/client/preload.js index 993efe5..342e75a 100644 --- a/client/preload.js +++ b/client/preload.js @@ -11,11 +11,11 @@ window.addEventListener('DOMContentLoaded', () => { } }) -contextBridge.exposeInMainWorld('versions', { - node: () => process.versions.node, - chrome: () => process.versions.chrome, - electron: () => process.versions.electron, - ping: () => ipcRenderer.invoke('ping'), - deviceInfo: () => ipcRenderer.invoke('device-info') +contextBridge.exposeInMainWorld('device', { + info: () => ipcRenderer.invoke('device-info') + //Nous pouvons exposer des variables en plus des fonctions +}) +contextBridge.exposeInMainWorld('lightshow', { + list: () => ipcRenderer.invoke('lightshow-list') //Nous pouvons exposer des variables en plus des fonctions }) diff --git a/client/service/LightshowService.js b/client/service/LightshowService.js index 08156b7..a05818c 100644 --- a/client/service/LightshowService.js +++ b/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 \ No newline at end of file +module.exports = LigthshowService diff --git a/client/src/app/device-list/device-list.component.ts b/client/src/app/device-list/device-list.component.ts index 1442991..fd07d13 100644 --- a/client/src/app/device-list/device-list.component.ts +++ b/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 { - (window).versions.deviceInfo().then((e: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 => { - console.log(`Dialog result: ${result}`); + dialogRef.afterClosed().subscribe((result : any) => { + console.log(result.value) }); } - openDialog() { - - } } @Component({ - selector: 'dialog-content-example-dialog', - templateUrl: 'dialog-content-example-dialog.html', + selector: 'dialog-content-add-dialog', + 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 { + (window).lightshow.list().then((e:any ) => { + this.toppingList = e; + }) + } +} diff --git a/client/src/app/device-list/dialog-content-add-dialog.html b/client/src/app/device-list/dialog-content-add-dialog.html index d12e371..c0a01f9 100644 --- a/client/src/app/device-list/dialog-content-add-dialog.html +++ b/client/src/app/device-list/dialog-content-add-dialog.html @@ -1,64 +1,15 @@ -

Install Angular

+

Ligthshow on device {{ deviceName}}

-

Develop across all platforms

-

Learn one way to build applications with Angular and reuse your code and abilities to build - apps for any deployment target. For web, mobile web, native mobile and native desktop.

- -

Speed & Performance

-

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 - data requirements by building data models on RxJS, Immutable.js or another push-model.

- -

Incredible tooling

-

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.

- -

Loved by millions

-

From prototype through global deployment, Angular delivers the productivity and scalable - infrastructure that supports Google's largest applications.

- -

What is Angular?

- -

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

- -

Architecture overview

- -

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.

- -

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.

- -

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.

- -

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.

- -

Both components and services are simply classes, with decorators that mark their type and - provide metadata that tells Angular how to use them.

- -

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.

- -

The metadata for a service class provides the information Angular needs to make it available - to components through Dependency Injection (DI).

- -

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.

+ + Lightshow + + @for (topping of toppingList; track topping) { + {{topping}} + } + + - +