qmillardet/electron-ligthshowmanager
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Ajout de la fenetre permettant de selectionner les lightshow voulus

Browse Source
This commit is contained in:
Quentin Millardet
2024-01-28 01:31:10 +01:00
parent 854cb672df
commit 62820d9181
9 changed files with 79 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

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

1
client/.gitignore vendored
View File

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

6
client/app.js
View File

@@ -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)

12
client/package-lock.json generated
View File

@@ -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",

1
client/package.json
View File

@@ -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",

12
client/preload.js
View File

@@ -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
})

21
client/service/LightshowService.js
View File

@@ -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,6 +54,19 @@ 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;
}
}

38
client/src/app/device-list/device-list.component.ts
View File

@@ -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 => {
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 {
(<any>window).lightshow.list().then((e:any ) => {
this.toppingList = e;
})
}
}

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

@@ -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>
<p>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.</p>
<h3>Speed &amp; Performance</h3>
<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
data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
<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-form-field>
<mat-label>Lightshow</mat-label>
<mat-select [formControl]="toppings" multiple>
@for (topping of toppingList; track topping) {
<mat-option [value]="topping">{{topping}}</mat-option>
}
</mat-select>
</mat-form-field>
</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>