adde desktop-angular
This commit is contained in:
230
desktop-angular/CUSTOM_FILE_DIALOG.md
Normal file
230
desktop-angular/CUSTOM_FILE_DIALOG.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# Custom File Dialogs Implementation
|
||||
|
||||
This document describes the custom file dialog implementations for the desktop-angular project. Both dialogs are native Electron BrowserWindows that provide file browsing and saving capabilities with customizable styling and filtering.
|
||||
|
||||
## Overview
|
||||
|
||||
The custom file dialog replaces the system file dialog with a custom implementation that:
|
||||
|
||||
- Opens in a specific directory (configs folder)
|
||||
- Supports file filtering by extension
|
||||
- Has customizable colors and styling
|
||||
- Provides a file browser interface
|
||||
- Returns the same data structure as the system dialog
|
||||
|
||||
## Files Added
|
||||
|
||||
### `src/main/open-dialog.html`
|
||||
|
||||
**Purpose**: HTML/CSS/JS interface for the file open dialog
|
||||
**Features**:
|
||||
|
||||
- File browser with directory navigation
|
||||
- File filtering by extension
|
||||
- Customizable colors via CSS variables
|
||||
- Double-click to open files
|
||||
- Path input with browse functionality
|
||||
- File icons based on extension
|
||||
- File size display
|
||||
- **File preview** - Shows first 500 characters of selected files
|
||||
|
||||
### `src/main/save-dialog.html`
|
||||
|
||||
**Purpose**: HTML/CSS/JS interface for the file save dialog
|
||||
**Features**:
|
||||
|
||||
- File name input with validation
|
||||
- Directory path selection
|
||||
- **Files list** - Shows all files in current directory (no filtering)
|
||||
- File type filtering
|
||||
- Customizable colors via CSS variables
|
||||
- Filename validation (invalid characters, reserved names)
|
||||
- **Browse button** - Opens system directory picker
|
||||
|
||||
### `src/main/main.js` (Updated)
|
||||
|
||||
**New Function**: `openCustomFileDialog(config)`
|
||||
|
||||
- Creates a modal BrowserWindow (800x600)
|
||||
- Loads the open-dialog.html interface
|
||||
- Handles IPC communication with the dialog
|
||||
- Returns file selection results
|
||||
|
||||
**New IPC Handler**: `dialog:customFile`
|
||||
|
||||
- Accepts configuration for the dialog
|
||||
- Returns file selection result
|
||||
|
||||
## API Usage
|
||||
|
||||
### From Angular Component
|
||||
|
||||
```typescript
|
||||
const result = await this.ipc.showCustomFileDialog({
|
||||
title: "Open Configuration File",
|
||||
defaultPath: "/path/to/configs",
|
||||
filters: [
|
||||
{
|
||||
name: "YAML Files",
|
||||
extensions: ["yaml", "yml", "txt"]
|
||||
},
|
||||
{
|
||||
name: "All Files",
|
||||
extensions: ["*"]
|
||||
}
|
||||
],
|
||||
colors: {
|
||||
background: "#aa1c3a",
|
||||
text: "#ffffff",
|
||||
buttonBg: "#ffffff",
|
||||
buttonText: "#aa1c3a",
|
||||
border: "rgba(255,255,255,0.2)"
|
||||
}
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
console.log("Selected file:", result.filePath);
|
||||
console.log("File content:", result.content);
|
||||
}
|
||||
```
|
||||
|
||||
### Configuration Schema
|
||||
|
||||
```typescript
|
||||
interface FileDialogConfig {
|
||||
title?: string; // Dialog title
|
||||
defaultPath?: string; // Initial directory path
|
||||
filters?: Array<{ // File type filters
|
||||
name: string; // Filter name (e.g., "YAML Files")
|
||||
extensions: string[]; // File extensions (e.g., ["yaml", "yml"])
|
||||
}>;
|
||||
colors?: { // Custom colors
|
||||
background?: string; // Dialog background
|
||||
text?: string; // Text color
|
||||
buttonBg?: string; // Button background
|
||||
buttonText?: string; // Button text color
|
||||
border?: string; // Border color
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### Result Schema
|
||||
|
||||
```typescript
|
||||
interface FileDialogResult {
|
||||
canceled: boolean; // True if dialog was canceled
|
||||
filePath?: string; // Selected file path (if not canceled)
|
||||
content?: string; // File content (if not canceled)
|
||||
}
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
### File Browser
|
||||
|
||||
- **Directory Navigation**: Click folders to navigate
|
||||
- **File Selection**: Click files to select, double-click to open
|
||||
- **Path Input**: Type path manually and press Enter
|
||||
- **Browse Button**: Alternative way to navigate directories
|
||||
|
||||
### File Filtering
|
||||
|
||||
- **Extension-based**: Filters files by extension
|
||||
- **Multiple Filters**: Support for multiple filter groups
|
||||
- **Wildcard Support**: Use "*" for all files
|
||||
|
||||
### Styling
|
||||
|
||||
- **CSS Variables**: Customizable via CSS custom properties
|
||||
- **Theme Matching**: Default colors match app footer theme
|
||||
- **Responsive**: Adapts to window resizing
|
||||
|
||||
### File Icons
|
||||
|
||||
- **Extension-based**: Different icons for different file types
|
||||
- **Fallback**: Default document icon for unknown types
|
||||
|
||||
## Integration
|
||||
|
||||
### Current Usage
|
||||
|
||||
The custom file dialog is automatically used by the `file:open` IPC handler:
|
||||
|
||||
- Opens in the configs directory
|
||||
- Filters for YAML/encrypted/text files
|
||||
- Uses app theme colors
|
||||
|
||||
### Manual Usage
|
||||
|
||||
You can also use it directly:
|
||||
```typescript
|
||||
// From any Angular component
|
||||
const result = await this.ipc.showCustomFileDialog({
|
||||
title: "Select Image",
|
||||
defaultPath: os.homedir(),
|
||||
filters: [
|
||||
{ name: "Images", extensions: ["png", "jpg", "gif"] }
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## Advantages Over System Dialog
|
||||
|
||||
1. **Guaranteed Path**: Always opens in the correct directory
|
||||
2. **Custom Styling**: Matches application theme
|
||||
3. **File Content**: Returns file content automatically
|
||||
4. **Cross-platform**: Consistent behavior across platforms
|
||||
5. **Customizable**: Easy to modify appearance and behavior
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
src/main/
|
||||
├── open-dialog.html # Custom file dialog interface
|
||||
├── main.js # Updated with dialog functions
|
||||
└── preload.js # Updated with API exposure
|
||||
|
||||
src/frontend/src/app/
|
||||
└── ipc.service.ts # Updated with dialog wrapper
|
||||
```
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Window Configuration
|
||||
|
||||
- **Size**: 800x600 pixels (resizable)
|
||||
- **Modal**: Always on top of parent window
|
||||
- **Frameless**: Custom window chrome
|
||||
- **Node Integration**: Enabled for file system access
|
||||
|
||||
### File System Access
|
||||
|
||||
- **Read Directory**: Lists files and folders
|
||||
- **Read Files**: Loads file content as UTF-8
|
||||
- **Path Validation**: Checks if paths exist and are accessible
|
||||
- **Error Handling**: Graceful handling of permission errors
|
||||
|
||||
### IPC Communication
|
||||
|
||||
- **Config Channel**: `file-dialog:config` - sends dialog configuration
|
||||
- **Result Channel**: `file-dialog:result` - returns selection result
|
||||
- **Directory Picker**: `dialog:showDirectoryPicker` - system directory selection
|
||||
- **Async/Await**: Promise-based API for easy integration
|
||||
|
||||
## Recent Updates
|
||||
|
||||
### File Open Dialog
|
||||
|
||||
- **File Preview**: Added preview section showing first 500 characters of selected files
|
||||
- **Smart Preview**: Only shows preview for text files under 1MB
|
||||
- **Preview Styling**: Monospace font with scrollable content area
|
||||
|
||||
### File Save Dialog
|
||||
|
||||
- **Files List**: Replaced content preview with list of files in current directory
|
||||
- **All Files Shown**: Shows all files without filtering by extension
|
||||
- **Browse Button**: Now opens system directory picker dialog
|
||||
- **Directory Navigation**: Click directories in file list to navigate
|
||||
- **File Information**: Shows file size and type icons
|
||||
|
||||
This implementation provides a reliable, customizable file dialog that integrates seamlessly with the application's design and functionality.
|
||||
154
desktop-angular/ELECTRON_NATIVE_MODALS.md
Normal file
154
desktop-angular/ELECTRON_NATIVE_MODALS.md
Normal file
@@ -0,0 +1,154 @@
|
||||
# Electron-native Modals Guide
|
||||
|
||||
This guide documents the Electron-native modal dialogs implemented in this app. These modals are opened from the Electron main process (via a small HTML dialog window) and are configurable at runtime (text, buttons, and colors).
|
||||
|
||||
## Why Electron-native modals?
|
||||
|
||||
- Work even if the Angular UI is busy/frozen
|
||||
- True application-level modal (owned by main process)
|
||||
- One-shot dialogs you can call from anywhere in renderer through IPC
|
||||
- Per-dialog runtime theming (background/text/button colors)
|
||||
|
||||
## File Map
|
||||
|
||||
- `src/main/main.js`
|
||||
- IPC handler `dialog:custom`
|
||||
- Helper `openCustomModalWindow(config)` that creates a modal `BrowserWindow`
|
||||
- `src/main/modal.html`
|
||||
- Self-contained dialog UI (HTML/CSS/JS)
|
||||
- Listens for `custom-modal:config` and renders content/buttons
|
||||
- Sends result back via `custom-modal:result`
|
||||
- `src/preload/preload.js`
|
||||
- Exposes `showNativeModal(config)` to `window.api`
|
||||
- `src/frontend/src/app/ipc.service.ts`
|
||||
- Adds `showNativeModal(config)` convenience wrapper for Angular code
|
||||
|
||||
## Runtime API
|
||||
|
||||
Call from Angular (renderer):
|
||||
|
||||
```ts
|
||||
const result = await this.ipc.showNativeModal({
|
||||
title: 'Confirm Deletion',
|
||||
message: 'Are you sure you want to delete the item?',
|
||||
buttons: [
|
||||
{ id: 'cancel', label: 'Cancel', style: 'secondary' },
|
||||
{ id: 'delete', label: 'Delete', style: 'danger' }
|
||||
],
|
||||
colors: {
|
||||
background: '#aa1c3a',
|
||||
text: '#ffffff',
|
||||
buttonBg: '#ffffff',
|
||||
buttonText: '#aa1c3a',
|
||||
secondaryBg: 'rgba(255,255,255,0.1)',
|
||||
secondaryText: '#ffffff'
|
||||
},
|
||||
buttonStyles: {
|
||||
delete: { bg: '#e53935', text: '#fff' },
|
||||
cancel: { bg: 'rgba(255,255,255,0.1)', text: '#ffffff' }
|
||||
}
|
||||
});
|
||||
// result => { buttonId: string, buttonIndex: number, buttonLabel?: string }
|
||||
```
|
||||
|
||||
### Config Schema
|
||||
|
||||
```ts
|
||||
interface NativeModalButton {
|
||||
id: string; // identifier returned as buttonId
|
||||
label: string; // text on the button
|
||||
style?: 'primary' | 'secondary' | 'danger'; // default visual style
|
||||
}
|
||||
|
||||
interface NativeModalConfig {
|
||||
title?: string; // dialog title
|
||||
message?: string; // main message (plain text)
|
||||
buttons?: NativeModalButton[]; // 1..3 buttons (extra are ignored)
|
||||
colors?: { // global color overrides
|
||||
background?: string; // dialog background
|
||||
text?: string; // title/message text color
|
||||
buttonBg?: string; // primary button bg
|
||||
buttonText?: string; // primary button text color
|
||||
secondaryBg?: string; // secondary button bg
|
||||
secondaryText?: string; // secondary button text color
|
||||
};
|
||||
buttonStyles?: { // per-button overrides by button id
|
||||
[buttonId: string]: {
|
||||
bg?: string; // background + border color
|
||||
text?: string; // text color
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Color Model
|
||||
|
||||
The dialog uses CSS variables in `modal.html` with sensible defaults matching the app footer theme:
|
||||
|
||||
- `--bg` (default `#aa1c3a`)
|
||||
- `--text` (default `#ffffff`)
|
||||
- `--btn-bg` / `--btn-text` (primary buttons)
|
||||
- `--btn-sec-bg` / `--btn-sec-text` (secondary buttons)
|
||||
|
||||
You can override them per-dialog via `colors` and refine specific buttons through `buttonStyles`.
|
||||
|
||||
## Button Styles
|
||||
|
||||
- `primary`: white background with red text (matches app footer theme)
|
||||
- `secondary`: translucent white background with white text
|
||||
- `danger`: red background (`#e53935`) with white text
|
||||
|
||||
You can still override any of these via `buttonStyles` per button.
|
||||
|
||||
## Result Contract
|
||||
|
||||
The renderer receives:
|
||||
|
||||
```ts
|
||||
{ buttonId: string, buttonIndex: number, buttonLabel?: string }
|
||||
```
|
||||
|
||||
If the dialog window is closed without a click, you’ll get `{ buttonId: 'closed', buttonIndex: -1 }`.
|
||||
|
||||
## How it Works (Flow)
|
||||
|
||||
1. Renderer calls `window.api.showNativeModal(config)` (exposed by preload)
|
||||
2. Main process handles `dialog:custom`, opens a modal `BrowserWindow` and loads `modal.html`
|
||||
3. After the page loads, main sends `custom-modal:config` with the payload
|
||||
4. The page renders content and buttons; on click it emits `custom-modal:result`
|
||||
5. Main resolves the original IPC with `{ buttonId, buttonIndex, buttonLabel }`
|
||||
|
||||
## Example: Yes/No/Cancel With Custom Colors
|
||||
|
||||
```ts
|
||||
await this.ipc.showNativeModal({
|
||||
title: 'Save Changes',
|
||||
message: 'Save before closing?',
|
||||
buttons: [
|
||||
{ id: 'yes', label: 'Yes', style: 'primary' },
|
||||
{ id: 'no', label: 'No', style: 'secondary' },
|
||||
{ id: 'cancel', label: 'Cancel', style: 'danger' }
|
||||
],
|
||||
colors: {
|
||||
background: '#1e293b',
|
||||
text: '#e2e8f0',
|
||||
buttonBg: '#e2e8f0',
|
||||
buttonText: '#1e293b',
|
||||
secondaryBg: 'rgba(226,232,240,0.12)',
|
||||
secondaryText: '#e2e8f0'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Notes & Considerations
|
||||
|
||||
- Maximum 3 buttons are rendered (extra are ignored)
|
||||
- Message is plain text (no HTML injection)
|
||||
- The dialog is frameless and always-on-top, sized 560x340 by default
|
||||
- Parent is the currently focused window, when available
|
||||
- Closing the dialog without a click returns `{ buttonId: 'closed' }`
|
||||
|
||||
## Rationale
|
||||
|
||||
- Keep Angular modal for in-app UX consistency and speed
|
||||
- Add Electron-native modal for cases where UI thread may be busy, or when deep theming and app-level modality are desired
|
||||
297
desktop-angular/HOW_TO.md
Normal file
297
desktop-angular/HOW_TO.md
Normal file
@@ -0,0 +1,297 @@
|
||||
# Пошаговый гайд: как “поднять” существующий Angular-проект из `ui/` внутри нового Electron-проекта `desktop-angular/` (без копирования собранного кода)
|
||||
|
||||
Ниже — практичный сценарий: вы создаёте папку `desktop-angular/` с каркасом Electron, подключаете туда исходники Angular (те, что уже лежат в `ui/`), настраиваете общий запуск в dev-режиме и сборку prod-пакета. Никаких переносов уже собранных файлов, всё работает от исходников Angular.
|
||||
|
||||
## Что получится в итоге
|
||||
|
||||
- Dev-режим: одновременно запускается `ng serve` из `ui/` и Electron, который открывает `http://localhost:4200`.
|
||||
- Prod-режим: сначала билдится Angular в `ui/dist/...`, затем Electron упаковывает приложение и грузит `index.html` из собранного Angular.
|
||||
|
||||
---
|
||||
|
||||
## 1) Создаём новый проект `desktop-angular/` для Electron
|
||||
|
||||
- В корне репозитория создайте папку `desktop-angular/`:
|
||||
|
||||
```bash
|
||||
mkdir /home/su/projects/articles/embed-gui-article/desktop-angular
|
||||
cd /home/su/projects/articles/embed-gui-article/desktop-angular
|
||||
npm init -y
|
||||
```
|
||||
|
||||
- Устанавливаем зависимости Electron и утилиты для дев-сценария:
|
||||
|
||||
```bash
|
||||
npm i -D electron electron-builder concurrently wait-on cross-env
|
||||
```
|
||||
|
||||
Рекомендуемая структура (минимум):
|
||||
|
||||
- `desktop-angular/package.json` — скрипты для dev/prod.
|
||||
- `desktop-angular/src/main/main.js` — основной процесс Electron.
|
||||
- `desktop-angular/src/preload/preload.js` — безопасный мост.
|
||||
- (Без `renderer/` — рендерером будет ваш Angular из `ui/`.)
|
||||
|
||||
Создайте папки и файлы:
|
||||
|
||||
```bash
|
||||
mkdir -p src/main src/preload
|
||||
touch src/main/main.js src/preload/preload.js
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2) Подключаемся к уже существующему Angular-проекту в `ui/`
|
||||
|
||||
Предполагаем, что Angular уже установлен и запускается из `/home/su/projects/articles/embed-gui-article/ui/` стандартными командами:
|
||||
|
||||
- Dev: `npm start` (или `ng serve`)
|
||||
- Build: `npm run build`
|
||||
|
||||
Если нет `npm start`, добавьте его в `ui/package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"start": "ng serve --port 4200 --disable-host-check",
|
||||
"build": "ng build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3) Код `main.js` для Electron (dev: URL, prod: файл из dist)
|
||||
|
||||
Создайте простой `BrowserWindow`, который:
|
||||
|
||||
- в dev грузит `http://localhost:4200`
|
||||
- в prod грузит файл `../ui/dist/project-front/browser/index.html`
|
||||
|
||||
Обратите внимание на относительные пути: мы опираемся на реальную структуру вашего репо и текущие выходные пути Angular (`ui/dist/project-front/browser` у вас уже есть).
|
||||
|
||||
```javascript
|
||||
// desktop-angular/src/main/main.js
|
||||
const { app, BrowserWindow } = require('electron');
|
||||
const path = require('path');
|
||||
|
||||
const isDev = process.env.NODE_ENV !== 'production';
|
||||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
show: false,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, '../preload/preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: true
|
||||
}
|
||||
});
|
||||
|
||||
win.on('ready-to-show', () => win.show());
|
||||
|
||||
if (isDev) {
|
||||
win.loadURL('http://localhost:4200');
|
||||
// win.webContents.openDevTools(); // включите по желанию
|
||||
} else {
|
||||
// В PROD грузим из собранного Angular
|
||||
const indexPath = path.resolve(
|
||||
__dirname,
|
||||
'../../../ui/dist/project-front/browser/index.html'
|
||||
);
|
||||
win.loadFile(indexPath);
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4) Код `preload.js` (минимальная безопасная заготовка)
|
||||
|
||||
```javascript
|
||||
// desktop-angular/src/preload/preload.js
|
||||
const { contextBridge } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('env', {
|
||||
isElectron: true
|
||||
});
|
||||
```
|
||||
|
||||
В Angular вы сможете проверять наличие `window.env?.isElectron`.
|
||||
|
||||
---
|
||||
|
||||
## 5) Скрипты в `desktop-angular/package.json`
|
||||
|
||||
Добавим удобные команды:
|
||||
|
||||
- `dev`: параллельно запускает Angular dev-сервер в `ui/` и Electron (ждём порт 4200).
|
||||
- `build:ui`: сборка Angular.
|
||||
- `start`: старт Electron в prod-режиме (если нужно локально проверить загрузку собранного Angular без упаковки).
|
||||
- `dist`: упаковка Electron (electron-builder).
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "desktop-angular",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "src/main/main.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently -k -n UI,ELECTRON -c green,cyan \"cd ../ui && npm start\" \"wait-on http://localhost:4200 && cross-env NODE_ENV=development electron .\"",
|
||||
"build:ui": "cd ../ui && npm run build",
|
||||
"start": "cross-env NODE_ENV=production electron .",
|
||||
"dist": "npm run build:ui && cross-env NODE_ENV=production electron-builder"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^9.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"electron": "^31.0.0",
|
||||
"electron-builder": "^24.13.3",
|
||||
"wait-on": "^7.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6) Конфигурация упаковки Electron (electron-builder)
|
||||
|
||||
Добавьте секцию `build` в `desktop-angular/package.json`. Мы не копируем Angular внутрь `desktop-angular` — Electron будет брать собранный Angular прямо из `ui/dist/...` при упаковке (через `extraResources`). Это удобно и прозрачно.
|
||||
|
||||
```json
|
||||
{
|
||||
"build": {
|
||||
"appId": "com.yourcompany.knocker",
|
||||
"productName": "Knocker Desktop Angular",
|
||||
"files": [
|
||||
"src/main/**/*",
|
||||
"src/preload/**/*",
|
||||
"package.json"
|
||||
],
|
||||
"extraResources": [
|
||||
{
|
||||
"from": "../ui/dist/project-front/browser",
|
||||
"to": "ui-dist",
|
||||
"filter": ["**/*"]
|
||||
}
|
||||
],
|
||||
"linux": {
|
||||
"target": ["AppImage"],
|
||||
"category": "Utility",
|
||||
"artifactName": "Knocker-Desktop-Angular-${version}.${ext}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
И соответствующее изменение в `main.js` на prod, если хотите грузить из `resources/ui-dist` у упакованного приложения:
|
||||
|
||||
- В упакованном `.AppImage` ваши ресурсы оказываются в `process.resourcesPath`.
|
||||
- Тогда путь до `index.html` будет: `path.join(process.resourcesPath, 'ui-dist', 'index.html')`.
|
||||
|
||||
Адаптированный prod-фрагмент:
|
||||
|
||||
```javascript
|
||||
// ... в main.js, в ветке !isDev:
|
||||
const indexPath = app.isPackaged
|
||||
? path.join(process.resourcesPath, 'ui-dist', 'index.html')
|
||||
: path.resolve(__dirname, '../../../ui/dist/project-front/browser/index.html');
|
||||
|
||||
win.loadFile(indexPath);
|
||||
```
|
||||
|
||||
Так вы покроете оба случая: локальный prod-запуск и реальный упакованный билд.
|
||||
|
||||
---
|
||||
|
||||
## 7) CORS, безопасность и доступ к файлам
|
||||
|
||||
- В dev Angular грузится по `http://localhost:4200` — обычно проблем нет.
|
||||
- В prod Angular грузится с `file://` — убедитесь, что никакие запросы не завязаны на абсолютные HTTP-URL без необходимости.
|
||||
- По умолчанию оставляем `contextIsolation: true`, `nodeIntegration: false`, `sandbox: true`. Для доступа к нативному коду используйте IPC и `preload.js`.
|
||||
|
||||
---
|
||||
|
||||
## 8) Локальный запуск dev
|
||||
|
||||
```bash
|
||||
cd /home/su/projects/articles/embed-gui-article/desktop-angular
|
||||
npm run dev
|
||||
```
|
||||
|
||||
- Скрипт поднимет `ng serve` из `ui/` и откроет Electron, который загрузит `http://localhost:4200`.
|
||||
|
||||
---
|
||||
|
||||
## 9) Локальная проверка prod без упаковки
|
||||
|
||||
```bash
|
||||
# Собираем Angular
|
||||
cd /home/su/projects/articles/embed-gui-article/ui
|
||||
npm run build
|
||||
|
||||
# Запускаем Electron в prod-режиме
|
||||
cd /home/su/projects/articles/embed-gui-article/desktop-angular
|
||||
npm run start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10) Упаковка приложения
|
||||
|
||||
```bash
|
||||
cd /home/su/projects/articles/embed-gui-article/desktop-angular
|
||||
npm run dist
|
||||
```
|
||||
|
||||
- Angular соберётся.
|
||||
- Electron-упаковщик положит содержимое `ui/dist/project-front/browser` в `resources/ui-dist`.
|
||||
- Приложение загрузит `index.html` из `resources/ui-dist`.
|
||||
|
||||
---
|
||||
|
||||
## 11) Советы по интеграции Angular и Electron
|
||||
|
||||
- Детект среды в Angular:
|
||||
|
||||
```typescript
|
||||
// пример: app.component.ts
|
||||
isElectron = typeof (window as any).env?.isElectron === 'boolean';
|
||||
```
|
||||
|
||||
- Статические пути: В Angular используйте относительные пути к ассетам, чтобы они работали и в `http://localhost:4200`, и в `file://` в prod.
|
||||
- IPC: если потребуется обмен с main-процессом, расширяйте `preload.js` и опишите чёткий API через `contextBridge`.
|
||||
|
||||
---
|
||||
|
||||
## 12) Итоговая структура (ключевые узлы)
|
||||
|
||||
- `ui/` — как есть, исходники Angular.
|
||||
- `desktop-angular/`
|
||||
- `package.json` — скрипты `dev`, `build:ui`, `start`, `dist`, секция `build` (electron-builder).
|
||||
- `src/main/main.js` — создаёт окно, грузит URL в dev и файл в prod.
|
||||
- `src/preload/preload.js` — мост в рендерер.
|
||||
- Ничего из `ui/` внутрь `desktop-angular/` мы не копируем; работаем поверх исходников.
|
||||
|
||||
---
|
||||
|
||||
## Что делать, если вы хотите переиспользовать текущую папку `desktop/`?
|
||||
|
||||
Можно; у вас уже есть `desktop/` с Electron. Тогда:
|
||||
|
||||
- Либо перенести логику оттуда в `desktop-angular/` (описано выше).
|
||||
- Либо в существующем `desktop/` заменить рендерер на Angular из `ui/` по тем же принципам: dev — `loadURL('http://localhost:4200')`, prod — `loadFile(...)` на `ui/dist/...`.
|
||||
284
desktop-angular/MODAL_DIALOG_IMPLEMENTATION.md
Normal file
284
desktop-angular/MODAL_DIALOG_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,284 @@
|
||||
# Modal Dialog Implementation Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
This document describes the implementation of two configurable modal dialog systems for the desktop-angular project:
|
||||
|
||||
1) Angular in-app modal component (already integrated into the UI)
|
||||
2) Electron-native modal window (opens a frameless BrowserWindow as a dialog)
|
||||
|
||||
Both allow variable questions, 1-3 buttons with custom labels, and return metadata for the clicked button. The Electron-native dialog additionally supports color customization for background, text, button colors per dialog.
|
||||
|
||||
## Files Added/Modified
|
||||
|
||||
### 1. New Files Created
|
||||
|
||||
#### `src/frontend/src/app/modal.service.ts`
|
||||
|
||||
**Purpose**: Core service for managing modal dialogs
|
||||
**What it does**:
|
||||
|
||||
- Defines interfaces for modal configuration (`ModalConfig`, `ModalButton`, `ModalResult`)
|
||||
- Provides `ModalService` with methods to show/hide modals
|
||||
- Returns promises that resolve with button click results
|
||||
- Includes convenience methods for common dialog types
|
||||
|
||||
**Key Features**:
|
||||
|
||||
- `show(config: ModalConfig): Promise<ModalResult>` - Main method to show custom modals
|
||||
- `showConfirm(title, message): Promise<boolean>` - Yes/No confirmation dialog
|
||||
- `showYesNoCancel(title, message): Promise<'yes'|'no'|'cancel'>` - Three-option dialog
|
||||
- `showInfo(title, message): Promise<void>` - Information dialog with OK button
|
||||
|
||||
#### `src/frontend/src/app/modal.component.ts`
|
||||
|
||||
**Purpose**: Angular component that renders the modal dialog
|
||||
**What it does**:
|
||||
|
||||
- Displays modal overlay and dialog box
|
||||
- Renders configurable buttons with different styles
|
||||
- Handles button clicks and communicates with service
|
||||
- Manages modal visibility through service subscription
|
||||
|
||||
**Key Features**:
|
||||
|
||||
- Standalone Angular component
|
||||
- Reactive to service state changes
|
||||
- Supports button styling (primary, secondary, danger)
|
||||
- Overlay click handling (currently disabled)
|
||||
|
||||
#### `src/frontend/src/app/modal.component.scss`
|
||||
|
||||
**Purpose**: Styling for the modal dialog
|
||||
**What it does**:
|
||||
|
||||
- Creates modal overlay with semi-transparent background
|
||||
- Styles dialog box with footer-matching colors (#aa1c3a)
|
||||
- Implements button styles matching the app's footer buttons
|
||||
- Provides responsive design for mobile devices
|
||||
|
||||
**Key Features**:
|
||||
|
||||
- Modal overlay with backdrop
|
||||
- Dialog box with header, body, and footer sections
|
||||
- Button styles matching app footer (white background, red text)
|
||||
- Three button style variants: primary, secondary, danger
|
||||
- Mobile-responsive design
|
||||
|
||||
### 2. Modified Files
|
||||
|
||||
#### `src/frontend/src/app/root.component.ts`
|
||||
|
||||
**Changes Made**:
|
||||
|
||||
- Added imports for `ModalService` and `ModalComponent`
|
||||
- Added `ModalComponent` to component imports
|
||||
- Injected `ModalService` in constructor
|
||||
- Added example methods demonstrating modal usage:
|
||||
- `showCustomModal()` - Shows 3-button custom dialog
|
||||
- `showConfirmDialog()` - Shows Yes/No confirmation
|
||||
- `showYesNoCancelDialog()` - Shows Yes/No/Cancel dialog
|
||||
- `showInfoDialog()` - Shows information dialog
|
||||
|
||||
#### `src/frontend/src/app/root.component.html`
|
||||
|
||||
**Changes Made**:
|
||||
|
||||
- Added `<app-modal></app-modal>` component to template
|
||||
- Added test buttons in form section to demonstrate modal functionality
|
||||
- Test buttons include: Custom Modal, Confirm Dialog, Yes/No/Cancel, Info Dialog
|
||||
|
||||
### 3. Electron-Native Modal (Alternative)
|
||||
|
||||
To support invoking modals from the Electron main process with fully customizable styling, we added an alternative modal implementation which opens a dedicated `BrowserWindow` as a modal dialog.
|
||||
|
||||
#### New Files
|
||||
|
||||
- `src/main/modal.html`
|
||||
- HTML/CSS/JS for a self-contained modal page
|
||||
- Receives configuration over IPC (`custom-modal:config`)
|
||||
- Renders title, message and up to 3 buttons
|
||||
- Colors can be customized via CSS variables populated from config:
|
||||
- background, text, buttonBg, buttonText, secondaryBg, secondaryText
|
||||
- Each button can define its own inline style overrides via `buttonStyles` map
|
||||
|
||||
#### Changes in `src/main/main.js`
|
||||
|
||||
- Added `openCustomModalWindow(config)` helper to create a modal `BrowserWindow`
|
||||
- Loads `modal.html` and sends the configuration after load
|
||||
- Listens for `custom-modal:result` IPC to resolve the clicked button
|
||||
- Exposed IPC handler `dialog:custom` to open the modal from renderer/preload
|
||||
|
||||
#### Changes in `src/preload/preload.js`
|
||||
|
||||
- Exposed `showNativeModal(config)` in `window.api` via `ipcRenderer.invoke('dialog:custom')`
|
||||
|
||||
#### Changes in `src/frontend/src/app/ipc.service.ts`
|
||||
|
||||
- Added wrapper method `showNativeModal(config)` to call the Electron-native modal from Angular code
|
||||
|
||||
#### Usage Example (from Angular renderer)
|
||||
|
||||
```ts
|
||||
const result = await this.ipc.showNativeModal({
|
||||
title: 'System Dialog',
|
||||
message: 'Proceed with operation?',
|
||||
buttons: [
|
||||
{ id: 'yes', label: 'Yes', style: 'primary' },
|
||||
{ id: 'no', label: 'No', style: 'secondary' },
|
||||
{ id: 'cancel', label: 'Cancel', style: 'danger' }
|
||||
],
|
||||
colors: {
|
||||
background: '#aa1c3a',
|
||||
text: '#ffffff',
|
||||
buttonBg: '#ffffff',
|
||||
buttonText: '#aa1c3a',
|
||||
secondaryBg: 'rgba(255,255,255,0.1)',
|
||||
secondaryText: '#ffffff'
|
||||
},
|
||||
buttonStyles: {
|
||||
yes: { bg: '#ffffff', text: '#aa1c3a' },
|
||||
no: { bg: 'rgba(255,255,255,0.1)', text: '#ffffff' },
|
||||
cancel: { bg: '#e53935', text: '#fff' }
|
||||
}
|
||||
});
|
||||
// result => { buttonId: 'yes' | 'no' | 'cancel', buttonIndex: number, buttonLabel?: string }
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Custom Modal
|
||||
|
||||
```typescript
|
||||
const result = await this.modal.show({
|
||||
title: 'Custom Dialog',
|
||||
message: 'Choose an option:',
|
||||
buttons: [
|
||||
{ id: 'option1', label: 'Option 1', style: 'primary' },
|
||||
{ id: 'option2', label: 'Option 2', style: 'secondary' },
|
||||
{ id: 'cancel', label: 'Cancel', style: 'danger' }
|
||||
]
|
||||
});
|
||||
console.log(`Clicked: ${result.buttonLabel} (ID: ${result.buttonId})`);
|
||||
```
|
||||
|
||||
### Confirmation Dialog
|
||||
|
||||
```typescript
|
||||
const confirmed = await this.modal.showConfirm(
|
||||
'Delete Item',
|
||||
'Are you sure you want to delete this item?'
|
||||
);
|
||||
if (confirmed) {
|
||||
// Proceed with deletion
|
||||
}
|
||||
```
|
||||
|
||||
### Yes/No/Cancel Dialog
|
||||
|
||||
```typescript
|
||||
const result = await this.modal.showYesNoCancel(
|
||||
'Save Changes',
|
||||
'Do you want to save your changes?'
|
||||
);
|
||||
switch (result) {
|
||||
case 'yes': /* Save and continue */ break;
|
||||
case 'no': /* Continue without saving */ break;
|
||||
case 'cancel': /* Cancel operation */ break;
|
||||
}
|
||||
```
|
||||
|
||||
### Information Dialog
|
||||
|
||||
```typescript
|
||||
await this.modal.showInfo(
|
||||
'Success',
|
||||
'Your changes have been saved successfully.'
|
||||
);
|
||||
```
|
||||
|
||||
## Button Styles
|
||||
|
||||
The modal supports three button styles:
|
||||
|
||||
1. **Primary** (`style: 'primary'`): White background, red text - matches footer buttons
|
||||
2. **Secondary** (`style: 'secondary'`): Transparent background, white text
|
||||
3. **Danger** (`style: 'danger'`): Red background, white text
|
||||
|
||||
## Styling Details
|
||||
|
||||
### Color Scheme
|
||||
|
||||
- **Background**: #aa1c3a (matches footer)
|
||||
- **Text**: White (#ffffff)
|
||||
- **Primary Buttons**: White background, red text
|
||||
- **Secondary Buttons**: Transparent with white text
|
||||
- **Danger Buttons**: Red background (#e53935)
|
||||
|
||||
### Layout
|
||||
|
||||
- Modal overlay covers entire screen
|
||||
- Dialog is centered and responsive
|
||||
- Maximum width: 500px
|
||||
- Mobile-friendly with stacked buttons on small screens
|
||||
|
||||
## Integration Points
|
||||
|
||||
### Service Integration
|
||||
|
||||
The `ModalService` is provided at root level, making it available throughout the application:
|
||||
|
||||
```typescript
|
||||
constructor(private modal: ModalService) {}
|
||||
```
|
||||
|
||||
### Component Integration
|
||||
|
||||
The `ModalComponent` is imported in the main component and added to the template:
|
||||
|
||||
```html
|
||||
<app-modal></app-modal>
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
The implementation includes test buttons in the form section that demonstrate all modal types:
|
||||
|
||||
- Custom Modal: Shows 3-button dialog with different styles
|
||||
- Confirm Dialog: Shows Yes/No confirmation
|
||||
- Yes/No/Cancel: Shows 3-option dialog
|
||||
- Info Dialog: Shows information with OK button
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Potential improvements could include:
|
||||
|
||||
1. Modal animations (fade in/out)
|
||||
2. Keyboard navigation support
|
||||
3. Escape key to close
|
||||
4. Custom modal sizes
|
||||
5. Modal stacking support
|
||||
6. Form inputs within modals
|
||||
7. Optional keyboard shortcuts (Enter/Esc)
|
||||
8. Focus management and initial focus button
|
||||
|
||||
## Dependencies
|
||||
|
||||
The modal system requires:
|
||||
|
||||
- Angular CommonModule
|
||||
- RxJS for reactive programming
|
||||
- No external dependencies
|
||||
|
||||
## File Structure
|
||||
|
||||
``` еуче
|
||||
src/frontend/src/app/
|
||||
├── modal.service.ts # Service for modal management
|
||||
├── modal.component.ts # Modal component
|
||||
├── modal.component.scss # Modal styles
|
||||
├── root.component.ts # Updated with modal integration
|
||||
└── root.component.html # Updated with modal component
|
||||
```
|
||||
|
||||
This implementation provides a complete, reusable modal dialog system that matches the application's design language and provides flexible configuration options for various dialog types.
|
||||
4210
desktop-angular/package-lock.json
generated
Normal file
4210
desktop-angular/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
63
desktop-angular/package.json
Normal file
63
desktop-angular/package.json
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "desktop-angular",
|
||||
"version": "1.0.1",
|
||||
"private": true,
|
||||
"main": "src/main/main.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently -k -n UI,ELECTRON -c green,cyan \"cd src/frontend && npm start\" \"wait-on http://localhost:4200 && cross-env NODE_ENV=development electron .\"",
|
||||
"devElectron": "concurrently -k -n ELECTRON -c cyan \"cross-env NODE_ENV=development electron .\"",
|
||||
"build:ui": "cd src/frontend && npm run build",
|
||||
"install:ui": "cd src/frontend && npm ci",
|
||||
"start": "cross-env NODE_ENV=production electron .",
|
||||
"go:build": "bash -lc 'mkdir -p bin && cd ../back && go build -o ../desktop-angular/bin/full-go-knocker .'",
|
||||
"dist": "npm run build:ui && npm run go:build && cross-env NODE_ENV=production electron-builder"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "commonjs",
|
||||
"devDependencies": {
|
||||
"concurrently": "^9.2.1",
|
||||
"cross-env": "^10.0.0",
|
||||
"electron": "^38.1.2",
|
||||
"electron-builder": "^26.0.12",
|
||||
"wait-on": "^9.0.1"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.yourcompany.knocker",
|
||||
"productName": "Knocker Desktop By Angular",
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"files": [
|
||||
"src/main/**/*",
|
||||
"src/preload/**/*",
|
||||
"package.json",
|
||||
"bin/**/*",
|
||||
"node_modules/**/*"
|
||||
],
|
||||
"extraResources": [
|
||||
{
|
||||
"from": "src/frontend/dist/project-front/browser",
|
||||
"to": "ui-dist",
|
||||
"filter": [
|
||||
"**/*"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "bin",
|
||||
"to": "bin",
|
||||
"filter": [
|
||||
"**/*"
|
||||
]
|
||||
}
|
||||
],
|
||||
"linux": {
|
||||
"target": [
|
||||
"AppImage"
|
||||
],
|
||||
"category": "Utility",
|
||||
"artifactName": "Knocker-Desktop-Angular-${version}.${ext}"
|
||||
}
|
||||
}
|
||||
}
|
||||
16
desktop-angular/src/frontend/.editorconfig
Normal file
16
desktop-angular/src/frontend/.editorconfig
Normal file
@@ -0,0 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = 100
|
||||
trim_trailing_whitespace = false
|
||||
42
desktop-angular/src/frontend/.gitignore
vendored
Normal file
42
desktop-angular/src/frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
4
desktop-angular/src/frontend/.vscode/extensions.json
vendored
Normal file
4
desktop-angular/src/frontend/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
123
desktop-angular/src/frontend/.vscode/launch.json
vendored
Normal file
123
desktop-angular/src/frontend/.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,123 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug Angular (Cursor)",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:4200",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"preLaunchTask": "npm: start",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
],
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///./src/*": "${webRoot}/src/*",
|
||||
"webpack:///src/*": "${webRoot}/src/*",
|
||||
"webpack:///*": "*",
|
||||
"webpack:///./~/*": "${webRoot}/node_modules/*",
|
||||
"meteor://💻app/*": "${webRoot}/*"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Attach to Chrome (Cursor)",
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"port": 9222,
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
],
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///./src/*": "${webRoot}/src/*",
|
||||
"webpack:///src/*": "${webRoot}/src/*",
|
||||
"webpack:///*": "*",
|
||||
"webpack:///./~/*": "${webRoot}/node_modules/*",
|
||||
"meteor://💻app/*": "${webRoot}/*"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Debug Angular Application",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:4200",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:/*": "${webRoot}/*",
|
||||
"/./*": "${webRoot}/*",
|
||||
"/src/*": "${webRoot}/src/*",
|
||||
"/*": "*",
|
||||
"/./~/*": "${webRoot}/node_modules/*"
|
||||
},
|
||||
"preLaunchTask": "npm: start",
|
||||
"userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile",
|
||||
"runtimeArgs": [
|
||||
"--disable-web-security",
|
||||
"--disable-features=VizDisplayCompositor",
|
||||
"--remote-debugging-port=9222"
|
||||
],
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
],
|
||||
"trace": true
|
||||
},
|
||||
{
|
||||
"name": "Debug Angular (Simple)",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:4200",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"preLaunchTask": "npm: start",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Attach to Chrome",
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"port": 9222,
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:/*": "${webRoot}/*",
|
||||
"/./*": "${webRoot}/*",
|
||||
"/src/*": "${webRoot}/src/*",
|
||||
"/*": "*",
|
||||
"/./~/*": "${webRoot}/node_modules/**"
|
||||
},
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Debug with Edge",
|
||||
"type": "msedge",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:4200",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"sourceMaps": true,
|
||||
"preLaunchTask": "npm: start",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
49
desktop-angular/src/frontend/.vscode/settings.json
vendored
Normal file
49
desktop-angular/src/frontend/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"djlint.showInstallError": false,
|
||||
"typescript.preferences.includePackageJsonAutoImports": "on",
|
||||
"typescript.suggest.autoImports": true,
|
||||
"typescript.updateImportsOnFileMove.enabled": "always",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "explicit"
|
||||
},
|
||||
"debug.javascript.autoAttachFilter": "disabled",
|
||||
"debug.javascript.terminalOptions": {
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"${workspaceFolder}/node_modules/**"
|
||||
]
|
||||
},
|
||||
"files.associations": {
|
||||
"*.ts": "typescript",
|
||||
"*.html": "html"
|
||||
},
|
||||
"emmet.includeLanguages": {
|
||||
"typescript": "html"
|
||||
},
|
||||
"debug.allowBreakpointsEverywhere": true,
|
||||
"debug.javascript.breakOnConditionalError": false,
|
||||
"debug.javascript.codelens.npmScripts": "never",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"workbench.colorCustomizations": {
|
||||
"activityBar.activeBackground": "#fa1b49",
|
||||
"activityBar.background": "#fa1b49",
|
||||
"activityBar.foreground": "#e7e7e7",
|
||||
"activityBar.inactiveForeground": "#e7e7e799",
|
||||
"activityBarBadge.background": "#155e02",
|
||||
"activityBarBadge.foreground": "#e7e7e7",
|
||||
"commandCenter.border": "#e7e7e799",
|
||||
"sash.hoverBorder": "#fa1b49",
|
||||
"statusBar.background": "#dd0531",
|
||||
"statusBar.foreground": "#e7e7e7",
|
||||
"statusBarItem.hoverBackground": "#fa1b49",
|
||||
"statusBarItem.remoteBackground": "#dd0531",
|
||||
"statusBarItem.remoteForeground": "#e7e7e7",
|
||||
"titleBar.activeBackground": "#dd0531",
|
||||
"titleBar.activeForeground": "#e7e7e7",
|
||||
"titleBar.inactiveBackground": "#dd053199",
|
||||
"titleBar.inactiveForeground": "#e7e7e799"
|
||||
},
|
||||
"peacock.color": "#dd0531",
|
||||
}
|
||||
86
desktop-angular/src/frontend/.vscode/tasks.json
vendored
Normal file
86
desktop-angular/src/frontend/.vscode/tasks.json
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "npm: start",
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
},
|
||||
"presentation": {
|
||||
"echo": true,
|
||||
"reveal": "always",
|
||||
"focus": false,
|
||||
"panel": "shared",
|
||||
"showReuseMessage": true,
|
||||
"clear": false
|
||||
},
|
||||
"group": {
|
||||
"kind": "build",
|
||||
"isDefault": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "npm: build",
|
||||
"type": "npm",
|
||||
"script": "build",
|
||||
"group": "build",
|
||||
"presentation": {
|
||||
"echo": true,
|
||||
"reveal": "silent",
|
||||
"focus": false,
|
||||
"panel": "shared"
|
||||
},
|
||||
"problemMatcher": ["$tsc"]
|
||||
},
|
||||
{
|
||||
"label": "npm: test",
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "Start Chrome for Debugging",
|
||||
"type": "shell",
|
||||
"command": "google-chrome",
|
||||
"args": [
|
||||
"--remote-debugging-port=9222",
|
||||
"--user-data-dir=${workspaceFolder}/.vscode/chrome-debug-profile",
|
||||
"--disable-web-security",
|
||||
"--disable-features=VizDisplayCompositor"
|
||||
],
|
||||
"presentation": {
|
||||
"echo": true,
|
||||
"reveal": "always",
|
||||
"focus": false,
|
||||
"panel": "shared"
|
||||
},
|
||||
"group": "build"
|
||||
}
|
||||
]
|
||||
}
|
||||
69
desktop-angular/src/frontend/README.md
Normal file
69
desktop-angular/src/frontend/README.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# ProjectApp
|
||||
|
||||
Современное веб-приложение для обеспечения GUI в браузере,
|
||||
построенное на Angular 17 с использованием PrimeNG.
|
||||
|
||||
## 🚀 Быстрый старт
|
||||
|
||||
### Установка зависимостей
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Запуск в режиме разработки
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Приложение будет доступно по адресу `http://localhost:4200/`
|
||||
|
||||
### Сборка для продакшена
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Артефакты сборки будут сохранены в папке `dist/`
|
||||
|
||||
## 🏗️ Архитектура
|
||||
|
||||
- **Frontend**: Angular 17 с PrimeNG 17
|
||||
- **Backend**: Go с Gin (отдельный проект)
|
||||
- **API**: REST API для получения данных о погоде
|
||||
- **Стили**: SCSS с Glassmorphism эффектами
|
||||
|
||||
## 🔧 Разработка
|
||||
|
||||
### Генерация компонентов
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
### Тестирование
|
||||
|
||||
```bash
|
||||
# Unit тесты
|
||||
ng test
|
||||
|
||||
# E2E тесты
|
||||
ng e2e
|
||||
```
|
||||
|
||||
### Линтинг
|
||||
|
||||
```bash
|
||||
# Проверка стиля кода
|
||||
ng lint
|
||||
|
||||
## 📦 Сборка для встраивания
|
||||
|
||||
Для встраивания в Go приложение:
|
||||
|
||||
```bash
|
||||
npm run build:embed [/path/to/front] # /home/user/projects/golang/go-project/project-front
|
||||
```
|
||||
|
||||
Файлы будут собраны в папку `/path/to/front`
|
||||
101
desktop-angular/src/frontend/angular.json
Normal file
101
desktop-angular/src/frontend/angular.json
Normal file
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"project-front": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/project-front",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/manifest.webmanifest"
|
||||
],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "1.5mb",
|
||||
"maximumError": "2mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "128kb",
|
||||
"maximumError": "256kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all",
|
||||
"serviceWorker": "ngsw-config.json",
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "project-front:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "project-front:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "project-front:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": ["zone.js", "zone.js/testing"],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/manifest.webmanifest"
|
||||
],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
desktop-angular/src/frontend/build-for-embeding.sh
Executable file
20
desktop-angular/src/frontend/build-for-embeding.sh
Executable file
@@ -0,0 +1,20 @@
|
||||
#!/bin/bash
|
||||
|
||||
if [ -z "$1" ]; then
|
||||
echo "Ошибка: Пожалуйста, укажите директорию назначения."
|
||||
exit 1
|
||||
fi
|
||||
DESTINATION_DIR=$1
|
||||
|
||||
echo "Building Angular app for embedding..."
|
||||
# ng build --configuration production --output-path ../../golang/gin-restapi/weather-front
|
||||
rm -rf "$DESTINATION_DIR"
|
||||
npx ng build --configuration production
|
||||
|
||||
mkdir -p "$DESTINATION_DIR"
|
||||
|
||||
cp -r /home/su/projects/angular/project-front/dist/project-front/browser/* \
|
||||
"$DESTINATION_DIR"
|
||||
|
||||
echo "Build completed successfully!"
|
||||
echo "Frontend files are ready for embedding in Go binary"
|
||||
30
desktop-angular/src/frontend/ngsw-config.json
Normal file
30
desktop-angular/src/frontend/ngsw-config.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
|
||||
"index": "/index.html",
|
||||
"assetGroups": [
|
||||
{
|
||||
"name": "app",
|
||||
"installMode": "prefetch",
|
||||
"resources": {
|
||||
"files": [
|
||||
"/favicon.ico",
|
||||
"/index.html",
|
||||
"/manifest.webmanifest",
|
||||
"/*.css",
|
||||
"/*.js"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "assets",
|
||||
"installMode": "lazy",
|
||||
"updateMode": "prefetch",
|
||||
"resources": {
|
||||
"files": [
|
||||
"/assets/**",
|
||||
"/media/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
13460
desktop-angular/src/frontend/package-lock.json
generated
Normal file
13460
desktop-angular/src/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
48
desktop-angular/src/frontend/package.json
Normal file
48
desktop-angular/src/frontend/package.json
Normal file
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "front-project",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"build:embed": "ng build --configuration production --output-path ",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test",
|
||||
"server": "http-server -p 8880 -c-1 dist/front-project/browser"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.3.0",
|
||||
"@angular/common": "^17.3.0",
|
||||
"@angular/compiler": "^17.3.0",
|
||||
"@angular/core": "^17.3.0",
|
||||
"@angular/forms": "^17.3.0",
|
||||
"@angular/platform-browser": "^17.3.0",
|
||||
"@angular/platform-browser-dynamic": "^17.3.0",
|
||||
"@angular/router": "^17.3.0",
|
||||
"@angular/service-worker": "^17.3.0",
|
||||
"js-yaml": "^4.1.0",
|
||||
"primeflex": "^3.3.1",
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "^17.18.15",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.3.8",
|
||||
"@angular/cli": "^17.3.8",
|
||||
"@angular/compiler-cli": "^17.3.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"http-server": "^14.1.1",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.4.2"
|
||||
}
|
||||
}
|
||||
18
desktop-angular/src/frontend/src/app/app.config.ts
Normal file
18
desktop-angular/src/frontend/src/app/app.config.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { ApplicationConfig, isDevMode } from '@angular/core';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import { provideServiceWorker } from '@angular/service-worker';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideAnimationsAsync(),
|
||||
provideHttpClient(),
|
||||
provideRouter(routes),
|
||||
provideServiceWorker('ngsw-worker.js', {
|
||||
enabled: !isDevMode(),
|
||||
registrationStrategy: 'registerWhenStable:30000'
|
||||
})
|
||||
],
|
||||
};
|
||||
7
desktop-angular/src/frontend/src/app/app.routes.ts
Normal file
7
desktop-angular/src/frontend/src/app/app.routes.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { RootComponent } from './root.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: RootComponent },
|
||||
{ path: '**', redirectTo: '' },
|
||||
];
|
||||
100
desktop-angular/src/frontend/src/app/ipc.service.ts
Normal file
100
desktop-angular/src/frontend/src/app/ipc.service.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
api?: any;
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class IpcService {
|
||||
private get api() {
|
||||
return (typeof window !== 'undefined' && window.api) ? window.api : null;
|
||||
}
|
||||
|
||||
async getConfig(key: string): Promise<any> {
|
||||
return this.api?.getConfig ? this.api.getConfig(key) : null;
|
||||
}
|
||||
|
||||
async setConfig(key: string, value: any): Promise<any> {
|
||||
return this.api?.setConfig ? this.api.setConfig(key, value) : null;
|
||||
}
|
||||
|
||||
async getAllConfig(): Promise<any> {
|
||||
return this.api?.getAllConfig ? this.api.getAllConfig() : {};
|
||||
}
|
||||
|
||||
async setAllConfig(cfg: any): Promise<any> {
|
||||
return this.api?.setAllConfig ? this.api.setAllConfig(cfg) : { ok: false };
|
||||
}
|
||||
|
||||
async openFile(): Promise<any> {
|
||||
return this.api?.openFile ? this.api.openFile() : { canceled: true };
|
||||
}
|
||||
|
||||
async saveAs(payload: any): Promise<any> {
|
||||
return this.api?.saveAs ? this.api.saveAs(payload) : { canceled: true };
|
||||
}
|
||||
|
||||
async saveSilent(payload: any): Promise<any> {
|
||||
return this.api?.saveSilent ? this.api.saveSilent(payload) : { canceled: true };
|
||||
}
|
||||
|
||||
async revealInFolder(p: string): Promise<any> {
|
||||
return this.api?.revealInFolder ? this.api.revealInFolder(p) : { ok: false };
|
||||
}
|
||||
|
||||
async localKnock(payload: any): Promise<any> {
|
||||
return this.api?.localKnock ? this.api.localKnock(payload) : { success: false };
|
||||
}
|
||||
|
||||
async getNetworkInterfaces(): Promise<any> {
|
||||
return this.api?.getNetworkInterfaces ? this.api.getNetworkInterfaces() : { success: false };
|
||||
}
|
||||
|
||||
async testConnection(payload: any): Promise<any> {
|
||||
return this.api?.testConnection ? this.api.testConnection(payload) : { success: false };
|
||||
}
|
||||
|
||||
async closeSettings(): Promise<any> {
|
||||
return this.api?.closeSettings ? this.api.closeSettings() : { ok: false };
|
||||
}
|
||||
|
||||
// Electron-native custom modal
|
||||
async showNativeModal(config: any): Promise<{ buttonId: string; buttonIndex: number; buttonLabel?: string }> {
|
||||
return this.api?.showNativeModal ? this.api.showNativeModal(config) : { buttonId: 'unavailable', buttonIndex: -1 } as any;
|
||||
}
|
||||
|
||||
// Custom file dialog
|
||||
async showCustomFileDialog(config: any): Promise<{ canceled: boolean; filePath?: string; content?: string }> {
|
||||
return this.api?.showCustomFileDialog ? this.api.showCustomFileDialog(config) : { canceled: true };
|
||||
}
|
||||
|
||||
// Custom save dialog
|
||||
async showCustomSaveDialog(config: any): Promise<{ canceled: boolean; filePath?: string }> {
|
||||
return this.api?.showCustomSaveDialog ? this.api.showCustomSaveDialog(config) : { canceled: true };
|
||||
}
|
||||
|
||||
// Config files management
|
||||
async listConfigFiles(): Promise<{files: string[]}> {
|
||||
return this.api?.listConfigFiles ? this.api.listConfigFiles() : {files: []};
|
||||
}
|
||||
|
||||
async loadConfigFile(fileName: string): Promise<{success: boolean, content?: string}> {
|
||||
return this.api?.loadConfigFile ? this.api.loadConfigFile(fileName) : {success: false};
|
||||
}
|
||||
|
||||
// App lifecycle
|
||||
async checkUnsavedChanges(): Promise<boolean> {
|
||||
return this.api?.checkUnsavedChanges ? this.api.checkUnsavedChanges() : false;
|
||||
}
|
||||
|
||||
// YAML dirty state sync
|
||||
async setYamlDirty(isDirty: boolean): Promise<void> {
|
||||
if (this.api?.setYamlDirty) {
|
||||
await this.api.setYamlDirty(isDirty);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
113
desktop-angular/src/frontend/src/app/knock.service.ts
Normal file
113
desktop-angular/src/frontend/src/app/knock.service.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import * as yaml from 'js-yaml';
|
||||
import { IpcService } from './ipc.service';
|
||||
|
||||
export interface KnockExecuteBody {
|
||||
targets?: string;
|
||||
delay?: string;
|
||||
verbose?: boolean;
|
||||
waitConnection?: boolean;
|
||||
gateway?: string;
|
||||
config_yaml?: string;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class KnockService {
|
||||
constructor(private http: HttpClient, private ipc: IpcService) {}
|
||||
|
||||
basicAuthHeader(password: string): Record<string, string> {
|
||||
const token = btoa(`knocker:${password || ''}`);
|
||||
return { Authorization: `Basic ${token}` };
|
||||
}
|
||||
|
||||
convertInlineToYaml(targetsStr: string, delay: string, waitConnection: boolean): string {
|
||||
const entries = (targetsStr || '').split(';').filter(Boolean);
|
||||
const config: any = {
|
||||
targets: entries.map(e => {
|
||||
const parts = e.split(':');
|
||||
const protocol = parts[0] || 'tcp';
|
||||
const host = parts[1] || '127.0.0.1';
|
||||
const port = parseInt(parts[2] || '22', 10);
|
||||
return { protocol, host, ports: [port], wait_connection: !!waitConnection };
|
||||
}),
|
||||
delay: delay || '1s'
|
||||
};
|
||||
return yaml.dump(config as any, { lineWidth: 120 });
|
||||
}
|
||||
|
||||
convertYamlToInline(yamlText: string): { targets: string; delay: string; waitConnection: boolean } {
|
||||
if (!yamlText.trim()) return { targets: 'tcp:127.0.0.1:22', delay: '1s', waitConnection: false };
|
||||
const config: any = yaml.load(yamlText) || {};
|
||||
const list: string[] = [];
|
||||
(config.targets || []).forEach((t: any) => {
|
||||
const protocol = t.protocol || 'tcp';
|
||||
const host = t.host || '127.0.0.1';
|
||||
const ports = t.ports || [t.port] || [22];
|
||||
(Array.isArray(ports) ? ports : [ports]).forEach((p: any) => list.push(`${protocol}:${host}:${p}`));
|
||||
});
|
||||
return {
|
||||
targets: list.join(';'),
|
||||
delay: config.delay || '1s',
|
||||
waitConnection: !!config.targets?.[0]?.wait_connection
|
||||
};
|
||||
}
|
||||
|
||||
extractPathFromYaml(text: string): string {
|
||||
try {
|
||||
const doc: any = yaml.load(text);
|
||||
if (doc && typeof doc === 'object' && typeof doc.path === 'string') return doc.path;
|
||||
} catch {}
|
||||
return '';
|
||||
}
|
||||
|
||||
patchYamlPath(text: string, newPath: string): string {
|
||||
try {
|
||||
const doc: any = text.trim() ? yaml.load(text) : {};
|
||||
if (doc && typeof doc === 'object') {
|
||||
doc.path = newPath || '';
|
||||
return yaml.dump(doc, { lineWidth: 120 });
|
||||
}
|
||||
} catch {}
|
||||
return text;
|
||||
}
|
||||
|
||||
isEncryptedYaml(text: string): boolean {
|
||||
return (text || '').trim().startsWith('ENCRYPTED:');
|
||||
}
|
||||
|
||||
async knockViaHttp(apiBase: string, password: string, body: KnockExecuteBody): Promise<Response> {
|
||||
const headers = { ...this.basicAuthHeader(password), 'Content-Type': 'application/json' };
|
||||
return fetch(`${apiBase}/knock-actions/execute`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
}
|
||||
|
||||
async encryptYaml(apiBase: string, password: string, content: string) {
|
||||
const headers = { ...this.basicAuthHeader(password), 'Content-Type': 'application/json' };
|
||||
const r = await fetch(`${apiBase}/knock-actions/encrypt`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify({ yaml: content })
|
||||
});
|
||||
return r.json();
|
||||
}
|
||||
|
||||
async decryptYaml(apiBase: string, password: string, encrypted: string) {
|
||||
const headers = { ...this.basicAuthHeader(password), 'Content-Type': 'application/json' };
|
||||
const r = await fetch(`${apiBase}/knock-actions/decrypt`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify({ encrypted })
|
||||
});
|
||||
return r.json();
|
||||
}
|
||||
|
||||
async localKnock(payload: any) {
|
||||
return this.ipc.localKnock(payload);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
133
desktop-angular/src/frontend/src/app/modal.component.scss
Normal file
133
desktop-angular/src/frontend/src/app/modal.component.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
/* Modal overlay - covers entire screen */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Modal dialog container */
|
||||
.modal-dialog {
|
||||
background: #aa1c3a; /* Same as footer background */
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Modal header */
|
||||
.modal-header {
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Modal body */
|
||||
.modal-body {
|
||||
padding: 20px 24px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Modal footer - styled like the main app footer */
|
||||
.modal-footer {
|
||||
padding: 16px 24px 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Modal buttons - styled like footer buttons */
|
||||
.modal-btn {
|
||||
background: #ffffff;
|
||||
color: #aa1c3a;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 6px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-btn:hover {
|
||||
background: #f8e8ec;
|
||||
border-color: #f8e8ec;
|
||||
}
|
||||
|
||||
/* Button style variants */
|
||||
.modal-btn-primary {
|
||||
background: #ffffff;
|
||||
color: #aa1c3a;
|
||||
}
|
||||
|
||||
.modal-btn-primary:hover {
|
||||
background: #f8e8ec;
|
||||
border-color: #f8e8ec;
|
||||
}
|
||||
|
||||
.modal-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.modal-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.modal-btn-danger {
|
||||
background: #e53935;
|
||||
color: #fff;
|
||||
border: 1px solid #e53935;
|
||||
}
|
||||
|
||||
.modal-btn-danger:hover {
|
||||
background: #c62828;
|
||||
border-color: #c62828;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 600px) {
|
||||
.modal-dialog {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
73
desktop-angular/src/frontend/src/app/modal.component.ts
Normal file
73
desktop-angular/src/frontend/src/app/modal.component.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ModalService, ModalConfig, ModalButton } from './modal.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="modal-overlay" *ngIf="config" (click)="onOverlayClick($event)">
|
||||
<div class="modal-dialog" (click)="$event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">{{ config.title }}</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="modal-message">{{ config.message }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
*ngFor="let button of config.buttons"
|
||||
class="modal-btn"
|
||||
[class]="getButtonClass(button)"
|
||||
(click)="onButtonClick(button)"
|
||||
>
|
||||
{{ button.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./modal.component.scss']
|
||||
})
|
||||
export class ModalComponent implements OnInit, OnDestroy {
|
||||
config: ModalConfig | null = null;
|
||||
private subscription: Subscription = new Subscription();
|
||||
|
||||
constructor(private modalService: ModalService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscription.add(
|
||||
this.modalService.modal$.subscribe(config => {
|
||||
this.config = config;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
onButtonClick(button: ModalButton): void {
|
||||
this.modalService.onButtonClick(button.id, button.label);
|
||||
}
|
||||
|
||||
onOverlayClick(event: Event): void {
|
||||
// Close modal when clicking overlay (optional behavior)
|
||||
// this.modalService.hide();
|
||||
}
|
||||
|
||||
getButtonClass(button: ModalButton): string {
|
||||
const baseClass = 'modal-btn';
|
||||
switch (button.style) {
|
||||
case 'primary':
|
||||
return `${baseClass} modal-btn-primary`;
|
||||
case 'danger':
|
||||
return `${baseClass} modal-btn-danger`;
|
||||
case 'secondary':
|
||||
default:
|
||||
return `${baseClass} modal-btn-secondary`;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
desktop-angular/src/frontend/src/app/modal.service.ts
Normal file
88
desktop-angular/src/frontend/src/app/modal.service.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
export interface ModalButton {
|
||||
id: string;
|
||||
label: string;
|
||||
style?: 'primary' | 'secondary' | 'danger';
|
||||
}
|
||||
|
||||
export interface ModalConfig {
|
||||
title: string;
|
||||
message: string;
|
||||
buttons: ModalButton[];
|
||||
}
|
||||
|
||||
export interface ModalResult {
|
||||
buttonId: string;
|
||||
buttonLabel: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ModalService {
|
||||
private modalSubject = new BehaviorSubject<ModalConfig | null>(null);
|
||||
private resultSubject = new BehaviorSubject<ModalResult | null>(null);
|
||||
|
||||
public modal$: Observable<ModalConfig | null> = this.modalSubject.asObservable();
|
||||
public result$: Observable<ModalResult | null> = this.resultSubject.asObservable();
|
||||
|
||||
show(config: ModalConfig): Promise<ModalResult> {
|
||||
return new Promise((resolve) => {
|
||||
this.modalSubject.next(config);
|
||||
|
||||
const subscription = this.result$.subscribe(result => {
|
||||
if (result) {
|
||||
subscription.unsubscribe();
|
||||
this.hide();
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hide(): void {
|
||||
this.modalSubject.next(null);
|
||||
}
|
||||
|
||||
onButtonClick(buttonId: string, buttonLabel: string): void {
|
||||
this.resultSubject.next({ buttonId, buttonLabel });
|
||||
}
|
||||
|
||||
// Convenience methods for common dialog types
|
||||
async showConfirm(title: string, message: string): Promise<boolean> {
|
||||
const result = await this.show({
|
||||
title,
|
||||
message,
|
||||
buttons: [
|
||||
{ id: 'cancel', label: 'Cancel', style: 'secondary' },
|
||||
{ id: 'confirm', label: 'Confirm', style: 'primary' }
|
||||
]
|
||||
});
|
||||
return result.buttonId === 'confirm';
|
||||
}
|
||||
|
||||
async showYesNoCancel(title: string, message: string): Promise<'yes' | 'no' | 'cancel'> {
|
||||
const result = await this.show({
|
||||
title,
|
||||
message,
|
||||
buttons: [
|
||||
{ id: 'yes', label: 'Yes', style: 'primary' },
|
||||
{ id: 'no', label: 'No', style: 'secondary' },
|
||||
{ id: 'cancel', label: 'Cancel', style: 'secondary' }
|
||||
]
|
||||
});
|
||||
return result.buttonId as 'yes' | 'no' | 'cancel';
|
||||
}
|
||||
|
||||
async showInfo(title: string, message: string): Promise<void> {
|
||||
await this.show({
|
||||
title,
|
||||
message,
|
||||
buttons: [
|
||||
{ id: 'ok', label: 'OK', style: 'primary' }
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
233
desktop-angular/src/frontend/src/app/root.component.html
Normal file
233
desktop-angular/src/frontend/src/app/root.component.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!-- Synced with desktop/src/renderer/index.html structure -->
|
||||
<div class="app">
|
||||
<header style="background-color: #aa1c3a; color: #fff;">
|
||||
<h1 style="font-size: 2.5rem; margin-bottom: 1rem; ">
|
||||
Port Knocker - Desktop (powered by Angular)
|
||||
</h1>
|
||||
<div class="modes">
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="mode"
|
||||
value="inline"
|
||||
[checked]="mode === 'inline'"
|
||||
(change)="setMode('inline')"
|
||||
/>
|
||||
Inline</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="mode"
|
||||
value="yaml"
|
||||
[checked]="mode === 'yaml'"
|
||||
(change)="setMode('yaml')"
|
||||
/>
|
||||
YAML</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="mode"
|
||||
value="form"
|
||||
[checked]="mode === 'form'"
|
||||
(change)="setMode('form')"
|
||||
/>
|
||||
Form</label
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="constant-section" class="constant-mode-section">
|
||||
<div class="row">
|
||||
<label style="min-width: 100px">Api URL</label>
|
||||
<input
|
||||
id="apiUrl"
|
||||
type="text"
|
||||
placeholder="Введите api url"
|
||||
[(ngModel)]="apiBase"
|
||||
(change)="onApiUrlChange()"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label style="min-width: 100px">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
[(ngModel)]="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label style="min-width: 100px">Delay</label>
|
||||
<input
|
||||
id="delay"
|
||||
type="text"
|
||||
[(ngModel)]="delay"
|
||||
(change)="onDelayChange()"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="inline-section"
|
||||
class="mode-section"
|
||||
[class.hidden]="mode !== 'inline'"
|
||||
>
|
||||
<div class="row">
|
||||
<label style="min-width: 100px">Targets</label>
|
||||
<input
|
||||
id="targets"
|
||||
type="text"
|
||||
[(ngModel)]="targets"
|
||||
(change)="onTargetsChange()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label style="min-width: 100px">Gateway: </label>
|
||||
<input
|
||||
id="gateway"
|
||||
type="text"
|
||||
placeholder="optional"
|
||||
[(ngModel)]="gateway"
|
||||
(change)="onGatewayChange()"
|
||||
/>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 1rem">
|
||||
<label
|
||||
><input id="verbose" type="checkbox" [(ngModel)]="verbose" /> Verbose</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
id="waitConnection"
|
||||
type="checkbox"
|
||||
[(ngModel)]="waitConnection"
|
||||
/>
|
||||
Wait connection</label
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="yaml-section"
|
||||
class="mode-section"
|
||||
[class.hidden]="mode !== 'yaml'"
|
||||
>
|
||||
<div class="toolbar">
|
||||
<button class="btn-primary" (click)="onNewConfiguration()">New Configuration</button>
|
||||
<button class="btn-warning" (click)="onOpenFile()">Open file</button>
|
||||
<button
|
||||
class="btn"
|
||||
[ngClass]="yamlDirty ? 'btn-primary' : 'btn-secondary'"
|
||||
(click)="onSaveCurrent()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button class="btn-success" (click)="onSaveFile()">Save file as</button>
|
||||
<select class="config-select"
|
||||
[(ngModel)]="selectedConfigFile"
|
||||
(ngModelChange)="onConfigFileSelect($event)"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<option value="">Select config file...</option>
|
||||
<option *ngFor="let file of configFiles" [value]="file">{{ file }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="yaml-editor-container">
|
||||
<textarea
|
||||
id="configYAML"
|
||||
placeholder="Paste YAML or open file"
|
||||
[(ngModel)]="configYAML"
|
||||
(ngModelChange)="onConfigYamlChange($event)"
|
||||
[class.has-unsaved-changes]="yamlDirty"
|
||||
></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="form-section"
|
||||
class="mode-section"
|
||||
[class.hidden]="mode !== 'form'"
|
||||
>
|
||||
<div
|
||||
id="targetsList"
|
||||
style="display: flex; flex-direction: column; gap: 0.5rem"
|
||||
>
|
||||
<div
|
||||
*ngFor="let t of formTargets; let i = index"
|
||||
class="row form-target-row"
|
||||
>
|
||||
<select [(ngModel)]="t.proto" class="target-proto">
|
||||
<option value="tcp">tcp</option>
|
||||
<option value="udp">udp</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="host"
|
||||
[(ngModel)]="t.host"
|
||||
class="target-host"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="port"
|
||||
[(ngModel)]="t.port"
|
||||
class="target-port"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="gateway (optional)"
|
||||
[(ngModel)]="t.gateway"
|
||||
class="target-gateway"
|
||||
/>
|
||||
<button class="btn-danger" (click)="removeFormTarget(i)">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 0.5rem">
|
||||
<button id="addTarget" class="btn-primary" (click)="addFormTarget()">
|
||||
Add target
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Test Buttons -->
|
||||
<div class="row" *ngIf="false" style="margin-top: 1rem; gap: 8px; flex-wrap: wrap;">
|
||||
<button class="btn-primary" (click)="showCustomModal()">Custom Modal</button>
|
||||
<button class="btn-primary" (click)="showConfirmDialog()">Confirm Dialog</button>
|
||||
<button class="btn-primary" (click)="showYesNoCancelDialog()">Yes/No/Cancel</button>
|
||||
<button class="btn-primary" (click)="showInfoDialog()">Info Dialog</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="background-color: #aa1c3a; color: #fff;">
|
||||
<div class="row" style="width: 100%; margin-top: 1rem">
|
||||
<button class="footer-btn" style="font-size: 1.5rem; width: 100%" (click)="onExecute()">Execute</button>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
[class.hidden]="mode !== 'yaml'"
|
||||
id="encrypt-decrypt-row"
|
||||
style="width: 100%; margin-top: 1rem"
|
||||
>
|
||||
<button class="footer-btn" style="width: 50%" (click)="onEncrypt()">Encrypt</button>
|
||||
<button class="footer-btn" style="width: 50%" (click)="onDecrypt()">Decrypt</button>
|
||||
</div>
|
||||
<div class="row" style="width: 100%; margin-top: 1rem">
|
||||
<span
|
||||
[class.errorStatus]="
|
||||
status.toLowerCase().includes('error') ||
|
||||
status.toLowerCase().includes('ошибка')
|
||||
"
|
||||
[class.successStatus]="
|
||||
status.toLowerCase().includes('success') ||
|
||||
status.toLowerCase().includes('успех')
|
||||
"
|
||||
id="status"
|
||||
>{{ status }}</span
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Modal Dialog Component -->
|
||||
<app-modal></app-modal>
|
||||
</div>
|
||||
293
desktop-angular/src/frontend/src/app/root.component.scss
Normal file
293
desktop-angular/src/frontend/src/app/root.component.scss
Normal file
@@ -0,0 +1,293 @@
|
||||
ul {
|
||||
list-style-type: none; /* Remove default list styling */
|
||||
padding: 0; /* Remove default padding */
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer; /* Change cursor to pointer on hover */
|
||||
padding: 10px; /* Add some padding for better click area */
|
||||
transition: background-color 0.3s; /* Smooth transition for background color */
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: #9a5d5d; /* Change background color on hover */
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
margin-top: 30px;
|
||||
display: flex; /* Use Flexbox */
|
||||
flex-direction: column; /* Stack children vertically */
|
||||
align-items: center; /* Center horizontally */
|
||||
// justify-content: center; /* Center vertically */
|
||||
// height: 100vh; /* Full viewport height */
|
||||
text-align: center; /* Center text */
|
||||
}
|
||||
|
||||
/* Unified control look for form fields (IP, protocol, port, etc.) */
|
||||
.row input[type="text"],
|
||||
.row input[type="number"],
|
||||
.row input[type="password"],
|
||||
.row select {
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.row input[type="text"]:focus,
|
||||
.row input[type="number"]:focus,
|
||||
.row input[type="password"]:focus,
|
||||
.row select:focus {
|
||||
border-color: #1976d2;
|
||||
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
|
||||
}
|
||||
|
||||
/* Align items nicely inside rows */
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Make each form target row occupy full width and distribute fields */
|
||||
.form-target-row {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-target-row .target-proto {
|
||||
flex: 0 0 92px; /* select width */
|
||||
}
|
||||
|
||||
.form-target-row .target-host {
|
||||
flex: 1 1 240px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.form-target-row .target-port {
|
||||
flex: 0 0 110px;
|
||||
}
|
||||
|
||||
.form-target-row .target-gateway {
|
||||
flex: 0 1 260px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.form-target-row .btn-danger {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #e53935;
|
||||
color: #fff;
|
||||
border: 1px solid #e53935;
|
||||
border-radius: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #c62828;
|
||||
border-color: #c62828;
|
||||
}
|
||||
|
||||
/* Primary (blue) button */
|
||||
.btn-primary {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: 1px solid #1976d2;
|
||||
border-radius: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1565c0;
|
||||
border-color: #1565c0;
|
||||
}
|
||||
|
||||
/* Secondary button style */
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: #fff;
|
||||
border: 1px solid #6c757d;
|
||||
border-radius: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
border-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Success button style */
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
color: #0a0a0a;
|
||||
border: 1px solid #28a745;
|
||||
border-radius: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #218838;
|
||||
border-color: #218838;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #ffc107;
|
||||
color: #0a0a0a;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #ff9800;
|
||||
border-color: #218838;
|
||||
}
|
||||
|
||||
/* Config file select dropdown */
|
||||
.config-select {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #aa1c3a;
|
||||
box-shadow: 0 0 0 2px rgba(170, 28, 58, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer buttons matching footer background */
|
||||
.footer-btn {
|
||||
background: #ffffff;
|
||||
color: #aa1c3a;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 6px;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-btn:hover {
|
||||
background: #f8e8ec;
|
||||
border-color: #f8e8ec;
|
||||
}
|
||||
|
||||
.errorStatus {
|
||||
color: #e53935 !important;
|
||||
background-color: #ffe6e6 !important;
|
||||
border: 1px solid #e53935 !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 8px 12px !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 14px !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
display: inline-block !important;
|
||||
margin-top: 10px !important;
|
||||
animation: shake 0.3s ease-in-out 0s 1 !important;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
50% { transform: translateX(5px); }
|
||||
75% { transform: translateX(-5px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.successStatus {
|
||||
color: #2e7d32!important;
|
||||
background-color: #e6ffe6!important;
|
||||
border: 1px solid #2e7d32!important;
|
||||
border-radius: 4px!important;
|
||||
padding: 8px 12px!important;
|
||||
font-weight: bold!important;
|
||||
font-size: 14px!important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
|
||||
display: inline-block!important;
|
||||
margin-top: 10px!important;
|
||||
animation: shake 0.3s ease-in-out 0s 1!important;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
50% { transform: translateX(5px); }
|
||||
75% { transform: translateX(-5px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* YAML Editor Status Indicator */
|
||||
.yaml-editor-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.yaml-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
.yaml-status.unsaved {
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
font-size: 16px;
|
||||
color: #dc3545;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
textarea.has-unsaved-changes {
|
||||
border-color: #dc3545;
|
||||
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
|
||||
background-color: #fff5f5 !important;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
767
desktop-angular/src/frontend/src/app/root.component.ts
Normal file
767
desktop-angular/src/frontend/src/app/root.component.ts
Normal file
@@ -0,0 +1,767 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { IpcService } from './ipc.service';
|
||||
import { KnockService } from './knock.service';
|
||||
import { ModalService } from './modal.service';
|
||||
import { ModalComponent } from './modal.component';
|
||||
import * as yaml from 'js-yaml';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, ModalComponent],
|
||||
templateUrl: './root.component.html',
|
||||
styleUrls: ['./root.component.scss'],
|
||||
})
|
||||
export class RootComponent implements OnInit {
|
||||
mode: 'inline' | 'yaml' | 'form' = 'inline';
|
||||
apiBase = 'http://localhost:8080/api/v1';
|
||||
password = '';
|
||||
delay = '1s';
|
||||
targets = 'tcp:127.0.0.1:22';
|
||||
gateway = '';
|
||||
verbose = true;
|
||||
waitConnection = false;
|
||||
configYAML = '';
|
||||
status = '';
|
||||
formTargets: {
|
||||
proto: 'tcp' | 'udp';
|
||||
host: string;
|
||||
port: number;
|
||||
gateway?: string;
|
||||
}[] = [];
|
||||
|
||||
// Config files management
|
||||
configFiles: string[] = [];
|
||||
selectedConfigFile: string = '';
|
||||
previousSelectedConfigFile: string = '';
|
||||
yamlDirty: boolean = false;
|
||||
private suppressYamlDirty: boolean = false;
|
||||
|
||||
constructor(
|
||||
private ipc: IpcService,
|
||||
private knock: KnockService,
|
||||
private modal: ModalService,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private ngZone: NgZone
|
||||
) {
|
||||
this.loadConfigFiles('', '');
|
||||
|
||||
// Add beforeunload event listener to prevent closing with unsaved changes
|
||||
// if (typeof window !== 'undefined') {
|
||||
// window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
|
||||
// console.log('beforeunload event triggered, yamlDirty:', this.yamlDirty);
|
||||
|
||||
// if (this.yamlDirty) {
|
||||
// console.log('Preventing close due to unsaved changes');
|
||||
// this.showCloseConfirmationDialog().then((result: any) => {
|
||||
// if (result === 'save') {
|
||||
// console.log('Saving changes');
|
||||
// this.onSaveCurrent().then((result: any) => {
|
||||
// if (result) {
|
||||
// console.log('Changes saved');
|
||||
// } else {
|
||||
// console.log('Changes not saved');
|
||||
// }
|
||||
// });
|
||||
// } else if (result === 'discard') {
|
||||
// return undefined;
|
||||
// } else {
|
||||
// return undefined;
|
||||
// }
|
||||
// }).catch((error: any) => {
|
||||
// console.error('Error showing close confirmation dialog:', error);
|
||||
// return undefined;
|
||||
// });
|
||||
|
||||
// e.preventDefault();
|
||||
// e.returnValue = 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?'; // Chrome requires returnValue to be set
|
||||
// return 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?'; // For older browsers
|
||||
// }
|
||||
// return undefined;
|
||||
// });
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
async loadConfigFiles(fileName?: string, configsPath?: string) {
|
||||
try {
|
||||
const result = await this.ipc.listConfigFiles();
|
||||
this.configFiles = result.files || [];
|
||||
// console.log('Config files loaded:', this.configFiles);
|
||||
|
||||
if (fileName) {
|
||||
// Принудительно обновляем DOM и устанавливаем selectedConfigFile
|
||||
this.cdr.detectChanges();
|
||||
this.selectedConfigFile = fileName;
|
||||
// console.log('Setting selectedConfigFile to:', fileName);
|
||||
this.cdr.detectChanges();
|
||||
this.previousSelectedConfigFile = fileName;
|
||||
await this.setYamlDirty(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading config files:', error);
|
||||
this.configFiles = [];
|
||||
}
|
||||
}
|
||||
|
||||
async onConfigYamlChange(_: string) {
|
||||
if (this.suppressYamlDirty) return;
|
||||
console.log('YAML content changed, setting yamlDirty = true');
|
||||
await this.setYamlDirty(true);
|
||||
}
|
||||
|
||||
// Method to check unsaved changes (called via IPC)
|
||||
checkUnsavedChanges(): boolean {
|
||||
console.log('checkUnsavedChanges called via IPC, yamlDirty:', this.yamlDirty);
|
||||
return this.yamlDirty;
|
||||
}
|
||||
|
||||
// Helper method to update yamlDirty state
|
||||
private async setYamlDirty(value: boolean) {
|
||||
this.yamlDirty = value;
|
||||
(window as any).yamlDirty = value;
|
||||
|
||||
// Sync with main process
|
||||
try {
|
||||
await this.ipc.setYamlDirty(value);
|
||||
console.log('YAML dirty state synced with main process:', value);
|
||||
} catch (error) {
|
||||
console.error('Error syncing yamlDirty state:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Validate YAML content
|
||||
private validateYaml(yamlContent: string): { isValid: boolean; error?: string } {
|
||||
if (!yamlContent || yamlContent.trim() === '') {
|
||||
return { isValid: false, error: 'YAML контент не может быть пустым' };
|
||||
}
|
||||
|
||||
try {
|
||||
yaml.load(yamlContent);
|
||||
return { isValid: true };
|
||||
} catch (error: any) {
|
||||
return {
|
||||
isValid: false,
|
||||
error: `Ошибка в YAML: ${error.message || 'Неизвестная ошибка'}`
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Show confirmation dialog for closing with unsaved changes
|
||||
async showCloseConfirmationDialog(): Promise<'save' | 'discard' | 'cancel'> {
|
||||
const result = await this.modal.showYesNoCancel(
|
||||
'Несохранённые изменения',
|
||||
'У вас есть несохранённые изменения в конфигурации. Хотите сохранить?'
|
||||
);
|
||||
|
||||
if (result === 'yes') {
|
||||
return 'save';
|
||||
} else if (result === 'no') {
|
||||
return 'discard';
|
||||
} else {
|
||||
return 'cancel';
|
||||
}
|
||||
}
|
||||
|
||||
async onConfigFileSelect(fileName: string) {
|
||||
if (!fileName) {
|
||||
this.selectedConfigFile = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const revertSelection = () => {
|
||||
// вернуть обратно визуально
|
||||
const prev = this.previousSelectedConfigFile || '';
|
||||
if (this.selectedConfigFile !== prev) {
|
||||
this.selectedConfigFile = prev;
|
||||
}
|
||||
// Для надёжности: небольшой таймер в зоне Angular
|
||||
this.ngZone.run(() =>
|
||||
setTimeout(() => {
|
||||
if (this.selectedConfigFile !== prev) this.selectedConfigFile = prev;
|
||||
this.cdr.detectChanges();
|
||||
}, 50)
|
||||
);
|
||||
};
|
||||
|
||||
if (this.yamlDirty) {
|
||||
const choice = await this.modal.showYesNoCancel(
|
||||
'Unsaved changes',
|
||||
'You have unsaved changes. Save them before switching configuration?'
|
||||
);
|
||||
|
||||
if (choice === 'yes') {
|
||||
const beforeSave =
|
||||
this.previousSelectedConfigFile || this.selectedConfigFile;
|
||||
// Silent save to current file (if known) without dialogs
|
||||
const currentName =
|
||||
this.previousSelectedConfigFile || this.selectedConfigFile || '';
|
||||
let savedOk = false;
|
||||
if (currentName) {
|
||||
const r = await this.ipc.saveSilent({
|
||||
fileName: currentName,
|
||||
content: this.configYAML,
|
||||
});
|
||||
savedOk = !!(r && r.canceled === false && r.filePath);
|
||||
} else {
|
||||
// Fallback: use regular Save As
|
||||
savedOk = await this.onSaveFile();
|
||||
}
|
||||
// onSaveFile may early return; proceed only if not canceled
|
||||
if (!savedOk) {
|
||||
revertSelection();
|
||||
return;
|
||||
}
|
||||
// После сохранения переключаемся
|
||||
try {
|
||||
const result = await this.ipc.loadConfigFile(fileName);
|
||||
if (result.success && result.content) {
|
||||
this.configYAML = result.content;
|
||||
this.selectedConfigFile = fileName;
|
||||
this.previousSelectedConfigFile = fileName;
|
||||
await this.setYamlDirty(false);
|
||||
await this.loadConfigFiles(fileName);
|
||||
} else {
|
||||
await this.modal.showInfo(
|
||||
'Error',
|
||||
`Failed to load file: ${fileName}`
|
||||
);
|
||||
// вернуть предыдущее значение
|
||||
this.selectedConfigFile = beforeSave;
|
||||
this.previousSelectedConfigFile = beforeSave;
|
||||
console.log(
|
||||
'Revert selection - selectedConfigFile:',
|
||||
this.selectedConfigFile
|
||||
);
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading config file:', error);
|
||||
await this.modal.showInfo('Error', `Error loading file: ${fileName}`);
|
||||
revertSelection();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// no или cancel -> вернёмся к прежнему значению и выйдем
|
||||
revertSelection();
|
||||
return;
|
||||
}
|
||||
|
||||
// Не было изменений — просто загружаем
|
||||
try {
|
||||
const result = await this.ipc.loadConfigFile(fileName);
|
||||
if (result.success && result.content) {
|
||||
this.suppressYamlDirty = true;
|
||||
this.configYAML = result.content;
|
||||
this.suppressYamlDirty = false;
|
||||
this.selectedConfigFile = fileName;
|
||||
this.previousSelectedConfigFile = fileName;
|
||||
await this.setYamlDirty(false);
|
||||
await this.loadConfigFiles(fileName);
|
||||
} else {
|
||||
await this.modal.showInfo('Error', `Failed to load file: ${fileName}`);
|
||||
revertSelection();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading config file:', error);
|
||||
await this.modal.showInfo('Error', `Error loading file: ${fileName}`);
|
||||
revertSelection();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ipc
|
||||
.getConfig('apiBase')
|
||||
.then((v) => {
|
||||
if (typeof v === 'string' && v.trim()) this.apiBase = v;
|
||||
})
|
||||
.catch(() => {});
|
||||
this.ipc
|
||||
.getConfig('gateway')
|
||||
.then((v) => {
|
||||
if (typeof v === 'string') this.gateway = v;
|
||||
})
|
||||
.catch(() => {});
|
||||
this.ipc
|
||||
.getConfig('inlineTargets')
|
||||
.then((v) => {
|
||||
if (typeof v === 'string') this.targets = v;
|
||||
})
|
||||
.catch(() => {});
|
||||
this.ipc
|
||||
.getConfig('delay')
|
||||
.then((v) => {
|
||||
if (typeof v === 'string') this.delay = v;
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
setMode(m: 'inline' | 'yaml' | 'form') {
|
||||
this.mode = m;
|
||||
}
|
||||
|
||||
addFormTarget() {
|
||||
this.formTargets.push({
|
||||
proto: 'tcp',
|
||||
host: '127.0.0.1',
|
||||
port: 22,
|
||||
gateway: '',
|
||||
});
|
||||
}
|
||||
|
||||
async removeFormTarget(idx: number) {
|
||||
if (idx < 0 || idx >= this.formTargets.length) return;
|
||||
|
||||
const confirmDeletion = await this.modal.showConfirm(
|
||||
'Confirm Deletion',
|
||||
'Are you sure you want to delete this target?'
|
||||
);
|
||||
|
||||
if (!confirmDeletion) return;
|
||||
|
||||
this.formTargets.splice(idx, 1);
|
||||
}
|
||||
|
||||
buildInlineFromForm(): string {
|
||||
return this.formTargets
|
||||
.map((t) => `${t.proto}:${(t.host || '').trim()}:${Number(t.port) || 0}`)
|
||||
.filter((s) => /^(tcp|udp):[^:]+:\d+$/.test(s))
|
||||
.join(';');
|
||||
}
|
||||
|
||||
async onApiUrlChange() {
|
||||
if (!this.apiBase?.trim()) return;
|
||||
try {
|
||||
await this.ipc.setConfig('apiBase', this.apiBase.trim());
|
||||
this.show('API URL сохранён');
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async onGatewayChange() {
|
||||
try {
|
||||
await this.ipc.setConfig('gateway', this.gateway || '');
|
||||
this.show('Gateway сохранён');
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async onTargetsChange() {
|
||||
try {
|
||||
await this.ipc.setConfig('inlineTargets', this.targets || '');
|
||||
this.show('inlineTargets сохранёны');
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async onDelayChange() {
|
||||
try {
|
||||
await this.ipc.setConfig('delay', this.delay || '');
|
||||
this.show('Задержка сохранёна');
|
||||
} catch {}
|
||||
}
|
||||
|
||||
toYamlFromInline() {
|
||||
this.configYAML = this.knock.convertInlineToYaml(
|
||||
this.targets,
|
||||
this.delay,
|
||||
this.waitConnection
|
||||
);
|
||||
}
|
||||
|
||||
fromYamlToInline() {
|
||||
const r = this.knock.convertYamlToInline(this.configYAML);
|
||||
this.targets = r.targets;
|
||||
this.delay = r.delay;
|
||||
this.waitConnection = r.waitConnection;
|
||||
}
|
||||
|
||||
onServerFilePathInput(newPath: string) {
|
||||
this.configYAML = this.knock.patchYamlPath(this.configYAML, newPath);
|
||||
}
|
||||
|
||||
async onOpenFile() {
|
||||
if (this.configYAML.trim() !== '') {
|
||||
const confirmNew = await this.modal.showConfirm(
|
||||
'Open saved configuration',
|
||||
'This will replace the current YAML configuration with saved configuration. Continue?'
|
||||
);
|
||||
if (!confirmNew) return;
|
||||
}
|
||||
const res = await this.ipc.openFile();
|
||||
if (res?.canceled || res.content === undefined) return;
|
||||
this.suppressYamlDirty = true;
|
||||
this.configYAML = res.content;
|
||||
this.suppressYamlDirty = false;
|
||||
this.yamlDirty = false;
|
||||
|
||||
// Update selected file and refresh file list
|
||||
if (res.filePath) {
|
||||
const fileName =
|
||||
res.filePath.split('/').pop() || res.filePath.split('\\').pop() || '';
|
||||
console.log('Open file - setting selectedConfigFile to:', fileName);
|
||||
await this.loadConfigFiles(fileName, res.filePath);
|
||||
}
|
||||
}
|
||||
|
||||
async onNewConfiguration() {
|
||||
if (this.configYAML.trim() !== '') {
|
||||
const confirmNew = await this.modal.showConfirm(
|
||||
'Create New Default Configuration',
|
||||
'This will replace the current YAML configuration with a new default configuration. Continue?'
|
||||
);
|
||||
if (!confirmNew) return;
|
||||
}
|
||||
|
||||
// Default configuration with 3 targets
|
||||
this.suppressYamlDirty = true;
|
||||
this.configYAML = `description: "Default configuration"
|
||||
targets:
|
||||
- protocol: tcp
|
||||
host: 192.168.1.100
|
||||
ports: [22]
|
||||
wait_connection: true
|
||||
gateway: ""
|
||||
|
||||
- protocol: udp
|
||||
host: 192.168.1.101
|
||||
ports: [53, 123]
|
||||
wait_connection: false
|
||||
gateway: ""
|
||||
|
||||
- protocol: tcp
|
||||
host: 192.168.1.102
|
||||
ports: [80, 443]
|
||||
wait_connection: true
|
||||
gateway: ""
|
||||
|
||||
delay: 2s
|
||||
`;
|
||||
this.suppressYamlDirty = false;
|
||||
this.yamlDirty = false;
|
||||
this.show('Success: New configuration loaded');
|
||||
}
|
||||
|
||||
async onSaveFile(): Promise<boolean> {
|
||||
// Validate YAML content
|
||||
const validation = this.validateYaml(this.configYAML);
|
||||
if (!validation.isValid) {
|
||||
this.show(`Error: ${validation.error}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const confirmSave = await this.modal.showConfirm(
|
||||
'Confirm action to save Configuration',
|
||||
'Are you sure you want to save this configuration?'
|
||||
);
|
||||
if (!confirmSave) return false;
|
||||
|
||||
// const confirmSave = await this.ipc.showNativeModal({
|
||||
// title: 'Confirm Configuration Save',
|
||||
// message: 'Are you sure you want to save this configuration?',
|
||||
// buttons: [
|
||||
// { id: 'cancel', label: 'Cancel', style: 'secondary' },
|
||||
// { id: 'save', label: 'Save', style: 'primary' }
|
||||
// ],
|
||||
// colors: {
|
||||
// background: '#aa1c3a',
|
||||
// text: '#ffffff',
|
||||
// buttonBg: '#ffffff',
|
||||
// buttonText: '#aa1c3a',
|
||||
// secondaryBg: 'rgba(255,255,255,0.1)',
|
||||
// secondaryText: '#ffffff'
|
||||
// },
|
||||
// buttonStyles: {
|
||||
// save: { bg: '#e53935', text: '#fff' },
|
||||
// cancel: { bg: 'rgba(255,255,255,0.1)', text: '#ffffff' }
|
||||
// }
|
||||
// });
|
||||
|
||||
// if (confirmSave.buttonId !== 'save') return;
|
||||
|
||||
// Use current file name if available, otherwise suggest new name
|
||||
let suggested = '';
|
||||
if (this.selectedConfigFile === 'Select config file...') {
|
||||
suggested = this.knock.isEncryptedYaml(this.configYAML)
|
||||
? 'new_config.encrypted'
|
||||
: 'new_config.yaml';
|
||||
} else {
|
||||
suggested =
|
||||
this.selectedConfigFile ||
|
||||
(this.knock.isEncryptedYaml(this.configYAML)
|
||||
? 'new_config.encrypted'
|
||||
: 'new_config.yaml');
|
||||
}
|
||||
|
||||
console.log('Save file - selectedConfigFile:', this.selectedConfigFile);
|
||||
console.log('Save file - suggested name:', suggested);
|
||||
|
||||
const res = await this.ipc.saveAs({
|
||||
suggestedName: suggested,
|
||||
content: this.configYAML,
|
||||
});
|
||||
if (!res?.canceled && res.filePath) {
|
||||
this.show(`Success: Configuration saved\n${JSON.stringify(res)}`);
|
||||
// Update selected file and refresh file list
|
||||
const filePath = res.filePath;
|
||||
const fileName =
|
||||
filePath.split('/').pop() || filePath.split('\\').pop() || '';
|
||||
const folderPath = filePath.substring(0, filePath.lastIndexOf(fileName));
|
||||
console.log('Save file - folderPath:', folderPath);
|
||||
console.log('Save file - fileName:', fileName);
|
||||
|
||||
await this.loadConfigFiles(fileName, folderPath);
|
||||
this.yamlDirty = false;
|
||||
return true;
|
||||
}
|
||||
this.show('Error: Failed to save configuration');
|
||||
|
||||
// if (!res?.canceled && res.filePath) {
|
||||
// await this.ipc.revealInFolder(res.filePath);
|
||||
// }
|
||||
return false;
|
||||
}
|
||||
|
||||
async onSaveCurrent(): Promise<boolean> {
|
||||
const currentName =
|
||||
this.previousSelectedConfigFile || this.selectedConfigFile || '';
|
||||
|
||||
// Validate YAML content
|
||||
const validation = this.validateYaml(this.configYAML);
|
||||
if (!validation.isValid) {
|
||||
this.show(`Error: ${validation.error}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.yamlDirty) {
|
||||
const proceed = await this.modal.showConfirm(
|
||||
'No changes detected',
|
||||
'YAML has no unsaved changes. Save anyway?'
|
||||
);
|
||||
if (!proceed) return false;
|
||||
}
|
||||
if (!currentName) {
|
||||
// fallback to Save As
|
||||
const ok = await this.onSaveFile();
|
||||
if (ok) this.show('Success: Configuration saved');
|
||||
else this.show('Error: Failed to save configuration');
|
||||
return ok;
|
||||
}
|
||||
const r = await this.ipc.saveSilent({
|
||||
fileName: currentName,
|
||||
content: this.configYAML,
|
||||
});
|
||||
if (r && r.canceled === false && r.filePath) {
|
||||
const filePath = r.filePath;
|
||||
const fileName =
|
||||
filePath.split('/').pop() || filePath.split('\\').pop() || '';
|
||||
const folderPath = filePath.substring(0, filePath.lastIndexOf(fileName));
|
||||
this.yamlDirty = false;
|
||||
await this.loadConfigFiles(fileName, folderPath);
|
||||
this.show('Success: Configuration saved');
|
||||
return true;
|
||||
}
|
||||
this.show('Error: Failed to save configuration');
|
||||
return false;
|
||||
}
|
||||
|
||||
async onEncrypt() {
|
||||
const r = await this.knock.encryptYaml(
|
||||
this.apiBase,
|
||||
this.password,
|
||||
this.configYAML
|
||||
);
|
||||
const encrypted = r?.encrypted || '';
|
||||
this.configYAML = encrypted;
|
||||
await this.setYamlDirty(true);
|
||||
}
|
||||
|
||||
async onDecrypt() {
|
||||
if (!this.knock.isEncryptedYaml(this.configYAML)) return;
|
||||
const r = await this.knock.decryptYaml(
|
||||
this.apiBase,
|
||||
this.password,
|
||||
this.configYAML
|
||||
);
|
||||
const plain = r?.yaml || '';
|
||||
this.configYAML = plain;
|
||||
await this.setYamlDirty(true);
|
||||
}
|
||||
|
||||
async onExecute() {
|
||||
this.show('Выполнение…');
|
||||
const useLocalKnock =
|
||||
!this.apiBase ||
|
||||
this.apiBase.trim() === '' ||
|
||||
this.apiBase === 'internal' ||
|
||||
this.apiBase === '-' ||
|
||||
this.apiBase === 'embedded' ||
|
||||
this.apiBase === 'local';
|
||||
try {
|
||||
if (useLocalKnock) {
|
||||
let targetsList: string[] = [];
|
||||
if (this.mode === 'inline')
|
||||
targetsList = this.targets.split(';').filter((t) => t.trim());
|
||||
else if (this.mode === 'form')
|
||||
targetsList = this.buildInlineFromForm()
|
||||
.split(';')
|
||||
.filter((t) => t.trim());
|
||||
else if (this.mode === 'yaml') {
|
||||
const parsed = this.knock.convertYamlToInline(this.configYAML);
|
||||
targetsList = parsed.targets.split(';').filter(Boolean);
|
||||
this.delay = parsed.delay;
|
||||
}
|
||||
if (targetsList.length === 0) {
|
||||
this.show('Нет целей для простукивания');
|
||||
return;
|
||||
}
|
||||
let result;
|
||||
if (this.mode === 'form') {
|
||||
// perform per-target gateway if provided
|
||||
const results: any[] = [];
|
||||
for (let i = 0; i < this.formTargets.length; i++) {
|
||||
const t = this.formTargets[i];
|
||||
const targetStr = `${t.proto}:${(t.host || '').trim()}:${
|
||||
Number(t.port) || 0
|
||||
}`;
|
||||
if (!/^(tcp|udp):[^:]+:\d+$/.test(targetStr)) continue;
|
||||
// call one-by-one to allow different gateway per target
|
||||
// delay between calls will be respected by the main process per target list,
|
||||
// so we call with single-element targets to mimic sequence
|
||||
const singleResult = await this.ipc.localKnock({
|
||||
targets: [targetStr],
|
||||
delay: this.delay,
|
||||
verbose: this.verbose,
|
||||
gateway: (t.gateway || '').trim() || this.gateway?.trim() || '',
|
||||
});
|
||||
results.push(singleResult);
|
||||
}
|
||||
// emulate summary
|
||||
const okCount = results.filter((r) => r?.success).length;
|
||||
result = {
|
||||
success: okCount === results.length,
|
||||
summary: { total: results.length, successful: okCount },
|
||||
};
|
||||
} else {
|
||||
result = await this.ipc.localKnock({
|
||||
targets: targetsList,
|
||||
delay: this.delay,
|
||||
verbose: this.verbose,
|
||||
gateway: this.gateway?.trim() || '',
|
||||
});
|
||||
}
|
||||
if (result?.success) {
|
||||
const s = result.summary;
|
||||
this.show(
|
||||
`Успех: Локальное простукивание завершено: ${s.successful}/${s.total} успешно`
|
||||
);
|
||||
} else {
|
||||
this.show(
|
||||
`Ошибка локального простукивания: ${result?.error || 'unknown'}`
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const body: any = {};
|
||||
if (this.mode === 'yaml') {
|
||||
// Prepare YAML: decrypt on-the-fly if needed, without mutating editor content
|
||||
let yamlToSend = this.configYAML;
|
||||
if (this.knock.isEncryptedYaml(yamlToSend)) {
|
||||
try {
|
||||
const dec = await this.knock.decryptYaml(
|
||||
this.apiBase,
|
||||
this.password,
|
||||
yamlToSend
|
||||
);
|
||||
yamlToSend = dec?.yaml || '';
|
||||
if (!yamlToSend) {
|
||||
this.show('Error: failed to decrypt configuration');
|
||||
return;
|
||||
}
|
||||
} catch (e: any) {
|
||||
this.show(`Error: decryption failed - ${e?.message || e}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
body.config_yaml = yamlToSend;
|
||||
console.log('Execute - config_yaml:', yamlToSend);
|
||||
} else if (this.mode === 'inline') {
|
||||
body.targets = this.targets;
|
||||
body.delay = this.delay;
|
||||
body.verbose = this.verbose;
|
||||
body.waitConnection = this.waitConnection;
|
||||
body.gateway = this.gateway;
|
||||
console.log('Execute - targets:', this.targets);
|
||||
console.log('Execute - delay:', this.delay);
|
||||
console.log('Execute - verbose:', this.verbose);
|
||||
console.log('Execute - waitConnection:', this.waitConnection);
|
||||
console.log('Execute - gateway:', this.gateway);
|
||||
} else {
|
||||
body.targets = this.targets;
|
||||
body.delay = this.delay;
|
||||
body.verbose = this.verbose;
|
||||
body.waitConnection = this.waitConnection;
|
||||
}
|
||||
const res = await this.knock.knockViaHttp(
|
||||
this.apiBase,
|
||||
this.password,
|
||||
body
|
||||
);
|
||||
if ((res as any)?.ok) this.show('Успех: успешно простучали через API...');
|
||||
else this.show(`Ошибка API: ${(res as any).statusText}`);
|
||||
} catch (e: any) {
|
||||
this.show(`Ошибка: ${e?.message || e}`);
|
||||
}
|
||||
}
|
||||
|
||||
show(msg: string) {
|
||||
this.status = msg;
|
||||
setTimeout(() => {
|
||||
this.status = '';
|
||||
}, 5_000);
|
||||
}
|
||||
|
||||
// Example modal usage methods
|
||||
async showCustomModal() {
|
||||
const result = await this.modal.show({
|
||||
title: 'Custom Dialog',
|
||||
message:
|
||||
'This is a custom modal with 3 buttons. Which one will you choose?',
|
||||
buttons: [
|
||||
{ id: 'option1', label: 'Option 1', style: 'primary' },
|
||||
{ id: 'option2', label: 'Option 2', style: 'secondary' },
|
||||
{ id: 'cancel', label: 'Cancel', style: 'danger' },
|
||||
],
|
||||
});
|
||||
|
||||
this.show(`You clicked: ${result.buttonLabel} (ID: ${result.buttonId})`);
|
||||
}
|
||||
|
||||
async showConfirmDialog() {
|
||||
const confirmed = await this.modal.showConfirm(
|
||||
'Confirm Action',
|
||||
'Are you sure you want to proceed with this action?'
|
||||
);
|
||||
|
||||
this.show(confirmed ? 'Action confirmed!' : 'Action cancelled');
|
||||
}
|
||||
|
||||
async showYesNoCancelDialog() {
|
||||
const result = await this.modal.showYesNoCancel(
|
||||
'Save Changes',
|
||||
'Do you want to save your changes before closing?'
|
||||
);
|
||||
|
||||
this.show(`You chose: ${result}`);
|
||||
}
|
||||
|
||||
async showInfoDialog() {
|
||||
await this.modal.showInfo(
|
||||
'Information',
|
||||
'This is an informational dialog with just an OK button.'
|
||||
);
|
||||
|
||||
this.show('Info dialog closed');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { IpcService } from '../ipc.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header">⚙️ Настройки приложения</div>
|
||||
<div class="content">
|
||||
<div class="field-group">
|
||||
<label for="configJson">Конфигурация (JSON формат):</label>
|
||||
<textarea id="configJson" [(ngModel)]="jsonText" placeholder="Загрузка конфигурации..."></textarea>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="btn-secondary" (click)="onCancel()">Вернуться</button>
|
||||
<button class="btn-primary" (click)="onSave()">Сохранить</button>
|
||||
</div>
|
||||
<div id="status" class="status" [class.success]="statusType==='success'" [class.error]="statusType==='error'">{{status}}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container { max-width: 100%; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
|
||||
.header { background: #2c3e50; color: white; padding: 15px 20px; font-size: 18px; font-weight: 600; }
|
||||
.content { padding: 20px; }
|
||||
.field-group { margin-bottom: 20px; }
|
||||
label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; }
|
||||
textarea { width: 100%; height: 300px; padding: 12px; border: 2px solid #ddd; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4; resize: vertical; box-sizing: border-box; }
|
||||
.buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
|
||||
.btn-primary { background: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 6px; }
|
||||
.btn-secondary { background: #95a5a6; color: white; padding: 10px 20px; border: none; border-radius: 6px; }
|
||||
.status { margin-top: 10px; padding: 8px 12px; border-radius: 4px; font-size: 13px; display: none; }
|
||||
.status.success { display: block; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
||||
.status.error { display: block; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
||||
`]
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
jsonText = '';
|
||||
status = '';
|
||||
statusType: 'success' | 'error' | '' = '';
|
||||
|
||||
constructor(private ipc: IpcService) {}
|
||||
|
||||
async ngOnInit() {
|
||||
try {
|
||||
const cfg = await this.ipc.getAllConfig();
|
||||
this.jsonText = JSON.stringify(cfg || {}, null, 2);
|
||||
} catch {
|
||||
this.jsonText = '{}';
|
||||
this.show('Ошибка загрузки конфигурации', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async onSave() {
|
||||
try {
|
||||
const parsed = JSON.parse(this.jsonText);
|
||||
const res = await this.ipc.setAllConfig(parsed);
|
||||
if (res?.ok) this.show('Конфигурация успешно сохранена', 'success');
|
||||
else this.show(`Ошибка сохранения: ${res?.error || 'unknown'}`, 'error');
|
||||
} catch (e: any) {
|
||||
this.show(`Неверный JSON: ${e?.message || e}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async onCancel() {
|
||||
await this.ipc.closeSettings();
|
||||
}
|
||||
|
||||
private show(msg: string, type: 'success'|'error') {
|
||||
this.status = msg;
|
||||
this.statusType = type;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
0
desktop-angular/src/frontend/src/assets/.gitkeep
Normal file
0
desktop-angular/src/frontend/src/assets/.gitkeep
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-128x128.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-144x144.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-152x152.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-192x192.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-384x384.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-512x512.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-72x72.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
desktop-angular/src/frontend/src/assets/icons/icon-96x96.png
Normal file
BIN
desktop-angular/src/frontend/src/assets/icons/icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
1
desktop-angular/src/frontend/src/assets/logo.txt
Normal file
1
desktop-angular/src/frontend/src/assets/logo.txt
Normal file
@@ -0,0 +1 @@
|
||||
Port kicker
|
||||
@@ -0,0 +1,16 @@
|
||||
const logFunction = (...messages: any[]) => {};
|
||||
const errorLogFunction = (...messages: any[]) => {};
|
||||
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiBaseUrl: '/api/v1',
|
||||
adminApiUrl: '/api/v1/project',
|
||||
log: logFunction,
|
||||
errLog: errorLogFunction,
|
||||
debugAny: (
|
||||
something: any,
|
||||
transformer: (...args: any[]) => any = (...args: any[]): any => {
|
||||
return args[0];
|
||||
}
|
||||
) => transformer(something),
|
||||
};
|
||||
26
desktop-angular/src/frontend/src/environments/environment.ts
Normal file
26
desktop-angular/src/frontend/src/environments/environment.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
const logFunction = (...messages: any[]) => {
|
||||
messages.forEach((msg) => console.log(msg));
|
||||
};
|
||||
|
||||
const errorLogFunction = (...messages: any[]) => {
|
||||
messages.forEach((msg) => console.error(msg));
|
||||
};
|
||||
|
||||
const debugAny = (
|
||||
something: any,
|
||||
transformer: (...args: any[]) => any = (...args: any[]): any => {
|
||||
return args[0];
|
||||
}
|
||||
) => transformer(something);
|
||||
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiBaseUrl: 'http://localhost:8080/api/v1',
|
||||
adminApiUrl: 'http://localhost:8080/api/v1/project',
|
||||
log: logFunction,
|
||||
errLog: errorLogFunction,
|
||||
debugAny
|
||||
};
|
||||
BIN
desktop-angular/src/frontend/src/favicon.ico
Normal file
BIN
desktop-angular/src/frontend/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
16
desktop-angular/src/frontend/src/index.html
Normal file
16
desktop-angular/src/frontend/src/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Port-Knocker UI</title>
|
||||
<base href="./">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="manifest" href="manifest.webmanifest">
|
||||
<meta name="theme-color" content="#1976d2">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
<noscript>Please enable JavaScript to continue using this application.</noscript>
|
||||
</body>
|
||||
</html>
|
||||
6
desktop-angular/src/frontend/src/main.ts
Normal file
6
desktop-angular/src/frontend/src/main.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { RootComponent } from './app/root.component';
|
||||
|
||||
bootstrapApplication(RootComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
59
desktop-angular/src/frontend/src/manifest.webmanifest
Normal file
59
desktop-angular/src/frontend/src/manifest.webmanifest
Normal file
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"name": "weather-app",
|
||||
"short_name": "weather-app",
|
||||
"theme_color": "#1976d2",
|
||||
"background_color": "#fafafa",
|
||||
"display": "standalone",
|
||||
"scope": "./",
|
||||
"start_url": "./",
|
||||
"icons": [
|
||||
{
|
||||
"src": "assets/icons/icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-128x128.png",
|
||||
"sizes": "128x128",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-152x152.png",
|
||||
"sizes": "152x152",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "assets/icons/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable any"
|
||||
}
|
||||
]
|
||||
}
|
||||
96
desktop-angular/src/frontend/src/styles.scss
Normal file
96
desktop-angular/src/frontend/src/styles.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
padding: 12px 16px;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modes label {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mode-section {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.constant-mode-section {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 280px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #334155;
|
||||
background: #1f2937;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
#status {
|
||||
margin-left: 12px;
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
#targetsList .target-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 120px 1fr auto;
|
||||
gap: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
#targetsList .remove {
|
||||
background: #7f1d1d;
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
14
desktop-angular/src/frontend/tsconfig.app.json
Normal file
14
desktop-angular/src/frontend/tsconfig.app.json
Normal file
@@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
32
desktop-angular/src/frontend/tsconfig.json
Normal file
32
desktop-angular/src/frontend/tsconfig.json
Normal file
@@ -0,0 +1,32 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
14
desktop-angular/src/frontend/tsconfig.spec.json
Normal file
14
desktop-angular/src/frontend/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
933
desktop-angular/src/main/main.js
Normal file
933
desktop-angular/src/main/main.js
Normal file
@@ -0,0 +1,933 @@
|
||||
// desktop-angular/src/main/main.js
|
||||
const { app, BrowserWindow, ipcMain, dialog, shell } = require("electron");
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
const net = require("net");
|
||||
const dgram = require("dgram");
|
||||
const os = require("os");
|
||||
// const { log } = require("console");
|
||||
|
||||
const isDev = process.env.NODE_ENV !== "production" && !app.isPackaged;
|
||||
|
||||
const log = (...messages) => {
|
||||
if (isDev) {
|
||||
console.log(...messages);
|
||||
}
|
||||
};
|
||||
|
||||
// Global variable to store current file name
|
||||
let currentFileName = null;
|
||||
|
||||
let configsYamlIsDirty = false;
|
||||
|
||||
// Global variable to store main window reference
|
||||
let mainWindow = null;
|
||||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 900,
|
||||
show: false,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "../preload/preload.js"),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Show DevTools in development mode
|
||||
if (isDev) {
|
||||
win.webContents.openDevTools();
|
||||
}
|
||||
|
||||
// Let the beforeunload event in renderer handle unsaved changes
|
||||
// This is simpler and more reliable
|
||||
|
||||
win.on("ready-to-show", () => win.show());
|
||||
|
||||
win.on("close", (e) => {
|
||||
if (!configsYamlIsDirty) {
|
||||
return;
|
||||
}
|
||||
|
||||
const messageBoxOptions = {
|
||||
type: "question",
|
||||
buttons: ["Cancel", "Quit without saving"],
|
||||
title: "Несохранённые изменения",
|
||||
message: "У вас есть несохранённые изменения в конфигурации. Вы уверены, что хотите выйти без сохранения?",
|
||||
};
|
||||
|
||||
const response = dialog.showMessageBoxSync(null, messageBoxOptions);
|
||||
if (response === 0) { // Cancel
|
||||
e.preventDefault();
|
||||
log("Close cancelled by user");
|
||||
} else { // Quit without saving
|
||||
configsYamlIsDirty = false;
|
||||
log("User chose to quit without saving");
|
||||
// Allow the window to close
|
||||
}
|
||||
});
|
||||
|
||||
if (isDev) {
|
||||
log("Development mode: loading from localhost:4200");
|
||||
win.loadURL("http://localhost:4200");
|
||||
win.webContents.openDevTools(); // Открываем DevTools в режиме разработки
|
||||
// Store main window reference
|
||||
mainWindow = win;
|
||||
|
||||
return;
|
||||
}
|
||||
// В PROD грузим из собранного Angular
|
||||
const indexPath = app.isPackaged
|
||||
? path.join(process.resourcesPath, "ui-dist", "index.html")
|
||||
: path.resolve(
|
||||
__dirname,
|
||||
"../frontend/dist/project-front/browser/index.html"
|
||||
);
|
||||
|
||||
log("Production mode: loading from", indexPath);
|
||||
log("app.isPackaged:", app.isPackaged);
|
||||
log("process.env.NODE_ENV:", process.env.NODE_ENV);
|
||||
|
||||
win.loadFile(indexPath);
|
||||
|
||||
// Store main window reference
|
||||
mainWindow = win;
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
const devGoBin = path.resolve(__dirname, "../../bin/full-go-knocker");
|
||||
const prodGoBin = path.resolve(
|
||||
process.resourcesPath || path.resolve(__dirname, "../../"),
|
||||
"bin/full-go-knocker"
|
||||
);
|
||||
let serverExec;
|
||||
if (fs.existsSync(devGoBin)) {
|
||||
serverExec = devGoBin;
|
||||
log("Using Go-knocker server (dev)");
|
||||
} else if (fs.existsSync(prodGoBin)) {
|
||||
serverExec = prodGoBin;
|
||||
log("Using Go-knocker server (prod)");
|
||||
}
|
||||
|
||||
const { spawn } = require("child_process");
|
||||
|
||||
if (serverExec) {
|
||||
const env = {
|
||||
...process.env,
|
||||
GO_KNOCKER_SERVE_PASS: process.env.KNOCKER_DESKTOP_PASS || "superpass",
|
||||
GO_KNOCKER_SERVE_PORT: process.env.KNOCKER_DESKTOP_PORT || "8888",
|
||||
};
|
||||
|
||||
const serveKnockerEnvValue = process.env.KNOCKER_DESKTOP_SERVE || "true";
|
||||
const serveKnocker =
|
||||
serveKnockerEnvValue.toLowerCase() === "true" ||
|
||||
serveKnockerEnvValue.toLowerCase() === "1";
|
||||
|
||||
// если serveKnocker, то запускаем сервер
|
||||
if (serveKnocker) {
|
||||
const serverProcess = spawn(serverExec, ["serve"], { env });
|
||||
|
||||
app.on("before-quit", (event) => {
|
||||
log("Before quit event triggered, configsYamlIsDirty:", configsYamlIsDirty);
|
||||
|
||||
// Check for unsaved changes
|
||||
if (configsYamlIsDirty) {
|
||||
event.preventDefault(); // Prevent quit
|
||||
|
||||
const messageBoxOptions = {
|
||||
type: "question",
|
||||
buttons: ["Cancel", "Quit without saving"],
|
||||
title: "Несохранённые изменения",
|
||||
message: "У вас есть несохранённые изменения в конфигурации. Вы уверены, что хотите выйти без сохранения?",
|
||||
};
|
||||
|
||||
const response = dialog.showMessageBoxSync(null, messageBoxOptions);
|
||||
if (response === 0) { // Cancel
|
||||
log("App quit cancelled by user");
|
||||
return; // Stay in app
|
||||
} else { // Quit without saving
|
||||
log("User chose to quit without saving");
|
||||
// Allow quit to proceed
|
||||
if (serverProcess && serveKnocker) {
|
||||
serverProcess.kill("SIGTERM");
|
||||
}
|
||||
app.exit(0);
|
||||
}
|
||||
} else {
|
||||
// No unsaved changes, proceed with normal quit
|
||||
if (serverProcess && serveKnocker) {
|
||||
serverProcess.kill("SIGTERM");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
serverProcess.stdout.on("data", (data) => {
|
||||
log(`Server stdout: ${data}`);
|
||||
});
|
||||
|
||||
serverProcess.stderr.on("data", (data) => {
|
||||
log(`Server stderr: ${data}`);
|
||||
});
|
||||
|
||||
serverProcess.on("close", (code) => {
|
||||
log(`Server process exited with code ${code}`);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
log("No server executable found.");
|
||||
}
|
||||
|
||||
createWindow();
|
||||
|
||||
app.on("activate", () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
app.on("window-all-closed", (e) => {
|
||||
if (process.platform !== "darwin") app.quit();
|
||||
});
|
||||
|
||||
// -------------------- Persistent config helpers --------------------
|
||||
let configCache = null;
|
||||
function getConfigPath() {
|
||||
return path.join(app.getPath("userData"), "config.json");
|
||||
}
|
||||
|
||||
function loadConfig() {
|
||||
if (configCache) return configCache;
|
||||
const cfgPath = getConfigPath();
|
||||
|
||||
try {
|
||||
if (fs.existsSync(cfgPath)) {
|
||||
const parsed = JSON.parse(fs.readFileSync(cfgPath, "utf-8"));
|
||||
configCache = parsed || {};
|
||||
return configCache;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Failed to read config file:", e);
|
||||
}
|
||||
configCache = {};
|
||||
return configCache;
|
||||
}
|
||||
|
||||
function saveConfig(partial) {
|
||||
const current = loadConfig();
|
||||
const next = { ...current, ...partial };
|
||||
configCache = next;
|
||||
try {
|
||||
fs.mkdirSync(path.dirname(getConfigPath()), { recursive: true });
|
||||
fs.writeFileSync(getConfigPath(), JSON.stringify(next, null, 2), "utf-8");
|
||||
return { ok: true };
|
||||
} catch (e) {
|
||||
console.error("Failed to save config file:", e);
|
||||
return { ok: false, error: e?.message || String(e) };
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------- IPC handlers --------------------
|
||||
ipcMain.handle("config:get", async (_e, key) => {
|
||||
const cfg = loadConfig();
|
||||
if (key) return cfg[key];
|
||||
return cfg;
|
||||
});
|
||||
|
||||
ipcMain.handle("config:set", async (_e, key, value) => {
|
||||
return saveConfig({ [key]: value });
|
||||
});
|
||||
|
||||
ipcMain.handle("config:getAll", async () => {
|
||||
return loadConfig();
|
||||
});
|
||||
|
||||
// Config files management
|
||||
ipcMain.handle("config:listFiles", async () => {
|
||||
try {
|
||||
const configsDir = path.join(app.getPath("userData"), "configs");
|
||||
if (!fs.existsSync(configsDir)) {
|
||||
return { files: [] };
|
||||
}
|
||||
|
||||
const files = fs.readdirSync(configsDir);
|
||||
const configFiles = files.filter((file) => {
|
||||
const ext = path.extname(file).toLowerCase();
|
||||
return [".yaml", ".yml", ".encrypted", ".txt"].includes(ext);
|
||||
});
|
||||
|
||||
return { files: configFiles };
|
||||
} catch (error) {
|
||||
console.error("Error listing config files:", error);
|
||||
return { files: [] };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("config:loadFile", async (_e, fileName) => {
|
||||
try {
|
||||
const configsDir = path.join(app.getPath("userData"), "configs");
|
||||
const filePath = path.join(configsDir, fileName);
|
||||
|
||||
if (!fs.existsSync(filePath)) {
|
||||
return { success: false, error: "File not found" };
|
||||
}
|
||||
|
||||
const content = fs.readFileSync(filePath, "utf-8");
|
||||
return { success: true, content };
|
||||
} catch (error) {
|
||||
console.error("Error loading config file:", error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("config:setAll", async (_e, newConfig) => {
|
||||
try {
|
||||
fs.mkdirSync(path.dirname(getConfigPath()), { recursive: true });
|
||||
fs.writeFileSync(
|
||||
getConfigPath(),
|
||||
JSON.stringify(newConfig || {}, null, 2),
|
||||
"utf-8"
|
||||
);
|
||||
configCache = newConfig || {};
|
||||
return { ok: true };
|
||||
} catch (e) {
|
||||
return { ok: false, error: e?.message || String(e) };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("settings:close", () => {
|
||||
const focused = BrowserWindow.getFocusedWindow();
|
||||
if (focused) {
|
||||
focused.close();
|
||||
return { ok: true };
|
||||
}
|
||||
return { ok: false, error: "No focused window" };
|
||||
});
|
||||
|
||||
ipcMain.handle("file:open", async () => {
|
||||
// Create configs directory if it doesn't exist
|
||||
const userDataDir = app.getPath("userData");
|
||||
const configsDir = path.join(userDataDir, "configs");
|
||||
|
||||
if (!fs.existsSync(configsDir)) {
|
||||
fs.mkdirSync(configsDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Use custom file dialog
|
||||
const result = await openCustomFileDialog({
|
||||
title: "Open Configuration File",
|
||||
defaultPath: configsDir,
|
||||
filters: [
|
||||
{
|
||||
name: "YAML/Encrypted Files",
|
||||
extensions: ["yaml", "yml", "encrypted", "txt"],
|
||||
},
|
||||
{
|
||||
name: "All Files",
|
||||
extensions: ["*"],
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
background: "#2d3748",
|
||||
text: "#ffffff",
|
||||
buttonBg: "#aa1c3a",
|
||||
buttonText: "#ffffff",
|
||||
border: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
});
|
||||
|
||||
// Save the filename if file was opened successfully
|
||||
if (!result.canceled && result.filePath) {
|
||||
currentFileName = path.basename(result.filePath);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
ipcMain.handle("file:saveAs", async (_e, payload) => {
|
||||
// Create configs directory if it doesn't exist
|
||||
const configsDir = path.join(app.getPath("userData"), "configs");
|
||||
if (!fs.existsSync(configsDir)) {
|
||||
fs.mkdirSync(configsDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Use custom save dialog
|
||||
const result = await openCustomSaveDialog({
|
||||
title: "Save Configuration File",
|
||||
defaultPath: configsDir,
|
||||
suggestedName:
|
||||
payload?.suggestedName || currentFileName || "new_config.yaml",
|
||||
content: payload.content || "",
|
||||
filters: [
|
||||
{
|
||||
name: "YAML/Encrypted Files",
|
||||
extensions: ["yaml", "yml", "encrypted", "txt"],
|
||||
},
|
||||
{
|
||||
name: "All Files",
|
||||
extensions: ["*"],
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
background: "#2d3748",
|
||||
text: "#ffffff",
|
||||
buttonBg: "#aa1c3a",
|
||||
buttonText: "#ffffff",
|
||||
border: "rgba(255,255,255,0.2)",
|
||||
inputBg: "rgba(255,255,255,0.1)",
|
||||
inputBorder: "rgba(255,255,255,0.3)",
|
||||
},
|
||||
});
|
||||
|
||||
// Update current file name if file was saved successfully
|
||||
if (!result.canceled && result.filePath) {
|
||||
currentFileName = path.basename(result.filePath);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
// Silent save to current file in configs dir without dialogs
|
||||
ipcMain.handle("file:saveSilent", async (_e, payload) => {
|
||||
try {
|
||||
const configsDir = path.join(app.getPath("userData"), "configs");
|
||||
if (!fs.existsSync(configsDir)) {
|
||||
fs.mkdirSync(configsDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Determine target file name
|
||||
let fileName =
|
||||
(payload && payload.fileName) || currentFileName || "new_config.yaml";
|
||||
// Basic sanitization
|
||||
fileName = path.basename(fileName);
|
||||
const filePath = path.join(configsDir, fileName);
|
||||
|
||||
const content = (payload && payload.content) || "";
|
||||
fs.writeFileSync(filePath, content, "utf-8");
|
||||
|
||||
currentFileName = path.basename(filePath);
|
||||
return { canceled: false, filePath };
|
||||
} catch (error) {
|
||||
console.error("Silent save failed:", error);
|
||||
return { canceled: true, error: error && error.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("os:revealInFolder", async (_e, filePath) => {
|
||||
try {
|
||||
shell.showItemInFolder(filePath);
|
||||
return { ok: true };
|
||||
} catch (e) {
|
||||
return { ok: false, error: (e && e.message) || String(e) };
|
||||
}
|
||||
});
|
||||
|
||||
// -------------------- Custom Electron Modal --------------------
|
||||
function openCustomModalWindow(config) {
|
||||
return new Promise((resolve) => {
|
||||
const modal = new BrowserWindow({
|
||||
width: 560,
|
||||
height: 340,
|
||||
resizable: false,
|
||||
modal: true,
|
||||
parent: BrowserWindow.getFocusedWindow() || undefined,
|
||||
show: false,
|
||||
frame: false,
|
||||
alwaysOnTop: true,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
},
|
||||
});
|
||||
|
||||
modal.once("ready-to-show", () => {
|
||||
modal.show();
|
||||
// Show DevTools in development mode
|
||||
if (isDev) {
|
||||
modal.webContents.openDevTools();
|
||||
}
|
||||
});
|
||||
modal.on("closed", () => resolve({ buttonId: "closed", buttonIndex: -1 }));
|
||||
|
||||
modal.loadFile(path.join(__dirname, "modal.html"));
|
||||
|
||||
// Send config after load
|
||||
modal.webContents.on("did-finish-load", () => {
|
||||
modal.webContents.send("custom-modal:config", config || {});
|
||||
});
|
||||
|
||||
ipcMain.once("custom-modal:result", (_evt, result) => {
|
||||
try {
|
||||
modal.close();
|
||||
} catch {}
|
||||
resolve(result || { buttonId: "unknown", buttonIndex: -1 });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -------------------- Custom File Dialog --------------------
|
||||
function openCustomFileDialog(config) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 600,
|
||||
minHeight: 400,
|
||||
resizable: true,
|
||||
modal: true,
|
||||
parent: BrowserWindow.getFocusedWindow() || undefined,
|
||||
show: false,
|
||||
frame: false,
|
||||
alwaysOnTop: true,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
},
|
||||
});
|
||||
|
||||
dialog.once("ready-to-show", () => {
|
||||
dialog.show();
|
||||
// Show DevTools in development mode
|
||||
if (isDev) {
|
||||
dialog.webContents.openDevTools();
|
||||
}
|
||||
});
|
||||
dialog.on("closed", () => resolve({ canceled: true }));
|
||||
|
||||
dialog.loadFile(path.join(__dirname, "open-dialog.html"));
|
||||
|
||||
// Send config after load
|
||||
dialog.webContents.on("did-finish-load", () => {
|
||||
dialog.webContents.send("file-dialog:config", config || {});
|
||||
});
|
||||
|
||||
ipcMain.once("file-dialog:result", (_evt, result) => {
|
||||
try {
|
||||
dialog.close();
|
||||
} catch {}
|
||||
resolve(result || { canceled: true });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -------------------- Custom Save Dialog --------------------
|
||||
function openCustomSaveDialog(config) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 650,
|
||||
minWidth: 500,
|
||||
minHeight: 350,
|
||||
resizable: true,
|
||||
modal: true,
|
||||
parent: BrowserWindow.getFocusedWindow() || undefined,
|
||||
show: false,
|
||||
frame: false,
|
||||
alwaysOnTop: true,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
},
|
||||
});
|
||||
|
||||
dialog.once("ready-to-show", () => {
|
||||
dialog.show();
|
||||
// Show DevTools in development mode
|
||||
if (isDev) {
|
||||
dialog.webContents.openDevTools();
|
||||
}
|
||||
});
|
||||
dialog.on("closed", () => resolve({ canceled: true }));
|
||||
|
||||
dialog.loadFile(path.join(__dirname, "save-dialog.html"));
|
||||
|
||||
// Send config after load
|
||||
dialog.webContents.on("did-finish-load", () => {
|
||||
dialog.webContents.send("save-dialog:config", config || {});
|
||||
});
|
||||
|
||||
ipcMain.once("save-dialog:result", (_evt, result) => {
|
||||
try {
|
||||
dialog.close();
|
||||
} catch {}
|
||||
resolve(result || { canceled: true });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ipcMain.handle("dialog:custom", async (_e, payload) => {
|
||||
const cfg = payload || {};
|
||||
return await openCustomModalWindow(cfg);
|
||||
});
|
||||
|
||||
ipcMain.handle("dialog:customFile", async (_e, payload) => {
|
||||
const cfg = payload || {};
|
||||
return await openCustomFileDialog(cfg);
|
||||
});
|
||||
|
||||
ipcMain.handle("dialog:customSave", async (_e, payload) => {
|
||||
const cfg = payload || {};
|
||||
return await openCustomSaveDialog(cfg);
|
||||
});
|
||||
|
||||
// Directory picker handler
|
||||
ipcMain.handle("dialog:showDirectoryPicker", async (_e, options) => {
|
||||
try {
|
||||
const focusedWindow = BrowserWindow.getFocusedWindow();
|
||||
return await dialog.showOpenDialog(focusedWindow, {
|
||||
title: options.title || "Select Directory",
|
||||
defaultPath: options.defaultPath,
|
||||
properties: ["openDirectory"],
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error opening directory picker:", error);
|
||||
return { canceled: true, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("network:interfaces", async () => {
|
||||
try {
|
||||
const interfaces = os.networkInterfaces();
|
||||
const result = {};
|
||||
for (const [name, addrs] of Object.entries(interfaces)) {
|
||||
result[name] = addrs.map((addr) => ({
|
||||
address: addr.address,
|
||||
family: addr.family,
|
||||
internal: addr.internal,
|
||||
mac: addr.mac,
|
||||
}));
|
||||
}
|
||||
return { success: true, interfaces: result };
|
||||
} catch (error) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("network:test-connection", async (_e, payload) => {
|
||||
try {
|
||||
const { host, port, localAddress } = payload || {};
|
||||
return new Promise((resolve) => {
|
||||
const socket = new net.Socket();
|
||||
let resolved = false;
|
||||
function safeResolve(result) {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
socket.destroy();
|
||||
resolve(result);
|
||||
}
|
||||
}
|
||||
socket.setTimeout(5000);
|
||||
socket.on("connect", () => {
|
||||
const localAddr = socket.localAddress;
|
||||
const localPort = socket.localPort;
|
||||
safeResolve({
|
||||
success: true,
|
||||
message: `Connection successful from ${localAddr}:${localPort}`,
|
||||
localAddress: localAddr,
|
||||
localPort,
|
||||
});
|
||||
});
|
||||
socket.on("error", (err) =>
|
||||
safeResolve({ success: false, error: err.message })
|
||||
);
|
||||
socket.on("timeout", () =>
|
||||
safeResolve({ success: false, error: "Connection timeout" })
|
||||
);
|
||||
try {
|
||||
if (localAddress) {
|
||||
socket.connect({ port, host, localAddress });
|
||||
} else {
|
||||
socket.connect(port, host);
|
||||
}
|
||||
} catch (error) {
|
||||
safeResolve({ success: false, error: error.message });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
function knockTcp(host, port, timeout = 5000, gateway = null) {
|
||||
return new Promise((resolve) => {
|
||||
const socket = new net.Socket();
|
||||
let resolved = false;
|
||||
function safeResolve(result) {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
try {
|
||||
socket.destroy();
|
||||
} catch {}
|
||||
resolve(result);
|
||||
}
|
||||
socket.setTimeout(timeout);
|
||||
socket.on("connect", () => {
|
||||
const localAddr = socket.localAddress;
|
||||
const localPort = socket.localPort;
|
||||
safeResolve({
|
||||
success: true,
|
||||
message: `TCP connection to ${host}:${port} successful (from ${localAddr}:${localPort})`,
|
||||
});
|
||||
});
|
||||
socket.on("timeout", () =>
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `TCP connection to ${host}:${port} timeout`,
|
||||
})
|
||||
);
|
||||
socket.on("error", (err) =>
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `TCP connection to ${host}:${port} failed: ${err.message}`,
|
||||
})
|
||||
);
|
||||
try {
|
||||
if (gateway?.trim()) {
|
||||
socket.connect({ port, host, localAddress: gateway.trim() });
|
||||
} else {
|
||||
socket.connect(port, host);
|
||||
}
|
||||
} catch (error) {
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `TCP connection error: ${error.message}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function knockUdp(host, port, timeout = 5000, gateway = null) {
|
||||
return new Promise((resolve) => {
|
||||
const socket = dgram.createSocket("udp4");
|
||||
const message = Buffer.from("knock");
|
||||
let resolved = false;
|
||||
function safeResolve(result) {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
socket.close();
|
||||
resolve(result);
|
||||
}
|
||||
}
|
||||
socket.on("error", (err) =>
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `UDP packet to ${host}:${port} failed: ${err.message}`,
|
||||
})
|
||||
);
|
||||
if (gateway && gateway.trim()) {
|
||||
try {
|
||||
socket.bind(0, gateway.trim());
|
||||
} catch (bindError) {
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `UDP bind failed: ${bindError.message}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
socket.send(message, 0, message.length, port, host, (err) => {
|
||||
if (err) {
|
||||
safeResolve({
|
||||
success: false,
|
||||
message: `UDP packet failed: ${err.message}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const localAddr = socket.address()?.address;
|
||||
const localPort = socket.address()?.port;
|
||||
safeResolve({
|
||||
success: true,
|
||||
message: `UDP packet sent to ${host}:${port} (from ${localAddr}:${localPort})`,
|
||||
});
|
||||
});
|
||||
const timeoutId = setTimeout(
|
||||
() =>
|
||||
safeResolve({
|
||||
success: true,
|
||||
message: `UDP packet sent to ${host}:${port} (timeout reached)`,
|
||||
}),
|
||||
timeout
|
||||
);
|
||||
socket.on("close", () => {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function knockExternal(target, timeout = 5000) {
|
||||
return new Promise(async (resolve) => {
|
||||
const devGoBin = path.resolve(__dirname, "../../bin/full-go-knocker");
|
||||
const prodGoBin = path.resolve(
|
||||
process.resourcesPath || path.resolve(__dirname, "../../"),
|
||||
"bin/full-go-knocker"
|
||||
);
|
||||
let knockerExec;
|
||||
if (fs.existsSync(devGoBin)) {
|
||||
knockerExec = devGoBin;
|
||||
log("Using Go-knocker (dev)");
|
||||
} else if (fs.existsSync(prodGoBin)) {
|
||||
knockerExec = prodGoBin;
|
||||
log("Using Go-knocker (prod)");
|
||||
}
|
||||
|
||||
const { spawn } = require("child_process");
|
||||
|
||||
if (knockerExec) {
|
||||
const knockProcess = spawn(knockerExec, ["-t", target, "-v"]);
|
||||
let stderr = "";
|
||||
let stdout = "";
|
||||
|
||||
knockProcess.stdout.on("data", (data) => {
|
||||
stdout += data;
|
||||
log(`Knocker stdout: ${data}`);
|
||||
});
|
||||
|
||||
knockProcess.stderr.on("data", (data) => {
|
||||
stderr += data;
|
||||
log(`Knocker stderr: ${data}`);
|
||||
});
|
||||
|
||||
// Таймаут на 15 секунд - вдруг что-то пойдёт не так
|
||||
const timeoutId = setTimeout(() => {
|
||||
knockProcess.kill("SIGTERM");
|
||||
}, timeout);
|
||||
const code = await new Promise((resolve) =>
|
||||
knockProcess.on("close", resolve)
|
||||
);
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (code !== 0) {
|
||||
resolve({
|
||||
success: false,
|
||||
message: `go knocker exited with code ${code}: ${stderr || stdout}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
resolve({
|
||||
success: true,
|
||||
message: `External knock to ${target} successful`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
log("No knocker executable found.");
|
||||
resolve({
|
||||
success: false,
|
||||
message: `External knock to ${target} unsuccessful`,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ipcMain.handle("app:checkUnsavedChanges", async () => {
|
||||
// This will be called by the renderer to check if there are unsaved changes
|
||||
// We need to get the value from the renderer process
|
||||
try {
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
const result = await mainWindow.webContents.executeJavaScript(`
|
||||
if (window.rootComponent && typeof window.rootComponent.checkUnsavedChanges === 'function') {
|
||||
return window.rootComponent.checkUnsavedChanges();
|
||||
}
|
||||
return false;
|
||||
`);
|
||||
return result;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
log("Error in app:checkUnsavedChanges:", error);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("app:setYamlDirty", async (_e, isDirty) => {
|
||||
// Sync yamlDirty state from renderer to main process
|
||||
try {
|
||||
configsYamlIsDirty = isDirty;
|
||||
console.log("YAML dirty state synced:", configsYamlIsDirty);
|
||||
return true;
|
||||
} catch (error) {
|
||||
log("Error in app:setYamlDirty:", error);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle("knock:local", async (_e, payload) => {
|
||||
try {
|
||||
if (!payload || typeof payload !== "object")
|
||||
return { success: false, error: "Invalid payload" };
|
||||
|
||||
const { targets, delay, verbose, gateway } = payload;
|
||||
|
||||
if (!targets || !Array.isArray(targets) || targets.length === 0)
|
||||
return { success: false, error: "No targets provided" };
|
||||
|
||||
const validTargets = targets.filter(
|
||||
(t) => typeof t === "string" && t.trim().length > 0
|
||||
);
|
||||
|
||||
if (validTargets.length === 0)
|
||||
return { success: false, error: "No valid targets provided" };
|
||||
|
||||
const results = [];
|
||||
|
||||
const delayMs = (function parseDelay() {
|
||||
const delayStr = delay || "1s";
|
||||
const match = delayStr?.match(/^(\d+)([smh]?)$/);
|
||||
if (!match) return 1000;
|
||||
const value = parseInt(match[1]);
|
||||
const unit = match[2] || "s";
|
||||
switch (unit) {
|
||||
case "s":
|
||||
return value * 1000;
|
||||
case "m":
|
||||
return value * 60 * 1000;
|
||||
case "h":
|
||||
return value * 60 * 60 * 1000;
|
||||
default:
|
||||
return value * 1000;
|
||||
}
|
||||
})();
|
||||
|
||||
for (let i = 0; i < validTargets.length; i++) {
|
||||
const targetStr = validTargets[i];
|
||||
const parts = targetStr.split(":");
|
||||
|
||||
const proto = (parts[0] || "udp").toLowerCase();
|
||||
const host = parts[1] || "127.0.0.1";
|
||||
const port = parseInt(parts[2] || "22", 10);
|
||||
const targetGateway = parts[3] || gateway;
|
||||
|
||||
let result;
|
||||
if (targetGateway) {
|
||||
result = await knockExternal(
|
||||
`${proto}:${host}:${port}:${targetGateway}`,
|
||||
5000
|
||||
);
|
||||
} else {
|
||||
if (proto === "tcp")
|
||||
result = await knockTcp(host, port, 5000, targetGateway);
|
||||
else if (proto === "udp")
|
||||
result = await knockUdp(host, port, 5000, targetGateway);
|
||||
else
|
||||
result = {
|
||||
success: false,
|
||||
message: `Unsupported protocol: ${proto}`,
|
||||
};
|
||||
}
|
||||
|
||||
results.push({ target: targetStr, ...result });
|
||||
if (i < validTargets.length - 1 && delayMs > 0)
|
||||
await new Promise((r) => setTimeout(r, delayMs));
|
||||
}
|
||||
return {
|
||||
success: true,
|
||||
results,
|
||||
summary: {
|
||||
total: results.length,
|
||||
successful: results.filter((r) => r.success).length,
|
||||
failed: results.filter((r) => !r.success).length,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
return { success: false, error: error.message || "Unknown error" };
|
||||
}
|
||||
});
|
||||
173
desktop-angular/src/main/modal.html
Normal file
173
desktop-angular/src/main/modal.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;"
|
||||
/>
|
||||
<title>Dialog</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #aa1c3a;
|
||||
--text: #ffffff;
|
||||
--btn-bg: #ffffff;
|
||||
--btn-text: #aa1c3a;
|
||||
--btn-sec-bg: rgba(255, 255, 255, 0.1);
|
||||
--btn-sec-text: #ffffff;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.body {
|
||||
padding: 16px 20px;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
.message {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--btn-bg);
|
||||
background: var(--btn-bg);
|
||||
color: var(--btn-text);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn.secondary {
|
||||
background: var(--btn-sec-bg);
|
||||
border-color: var(--btn-sec-bg);
|
||||
color: var(--btn-sec-text);
|
||||
}
|
||||
.btn.danger {
|
||||
background: #e53935;
|
||||
border-color: #e53935;
|
||||
color: #fff;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="header">
|
||||
<button class="close" title="Close" id="closeBtn">×</button>
|
||||
<h3 class="title" id="dlgTitle">Dialog</h3>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p class="message" id="dlgMessage">Message</p>
|
||||
</div>
|
||||
<div class="footer" id="dlgButtons"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { ipcRenderer } = require("electron");
|
||||
const qs = (s) => document.querySelector(s);
|
||||
const titleEl = qs("#dlgTitle");
|
||||
const msgEl = qs("#dlgMessage");
|
||||
const btnsEl = qs("#dlgButtons");
|
||||
const closeBtn = qs("#closeBtn");
|
||||
|
||||
closeBtn.addEventListener("click", () => {
|
||||
ipcRenderer.send("custom-modal:result", {
|
||||
buttonId: "closed",
|
||||
buttonIndex: -1,
|
||||
});
|
||||
});
|
||||
|
||||
ipcRenderer.on("custom-modal:config", (_evt, cfg) => {
|
||||
// Apply colors if provided
|
||||
if (cfg?.colors) {
|
||||
const root = document.documentElement;
|
||||
if (cfg.colors.background)
|
||||
root.style.setProperty("--bg", cfg.colors.background);
|
||||
if (cfg.colors.text)
|
||||
root.style.setProperty("--text", cfg.colors.text);
|
||||
if (cfg.colors.buttonBg)
|
||||
root.style.setProperty("--btn-bg", cfg.colors.buttonBg);
|
||||
if (cfg.colors.buttonText)
|
||||
root.style.setProperty("--btn-text", cfg.colors.buttonText);
|
||||
if (cfg.colors.secondaryBg)
|
||||
root.style.setProperty("--btn-sec-bg", cfg.colors.secondaryBg);
|
||||
if (cfg.colors.secondaryText)
|
||||
root.style.setProperty("--btn-sec-text", cfg.colors.secondaryText);
|
||||
}
|
||||
|
||||
titleEl.textContent = cfg?.title || "Dialog";
|
||||
msgEl.textContent = cfg?.message || "";
|
||||
|
||||
// Render buttons
|
||||
btnsEl.innerHTML = "";
|
||||
const buttons = Array.isArray(cfg?.buttons)
|
||||
? cfg.buttons.slice(0, 3)
|
||||
: [{ id: "ok", label: "OK", style: "primary" }];
|
||||
buttons.forEach((b, idx) => {
|
||||
const el = document.createElement("button");
|
||||
el.className =
|
||||
"btn" +
|
||||
(b.style === "danger"
|
||||
? " danger"
|
||||
: b.style === "secondary"
|
||||
? " secondary"
|
||||
: "");
|
||||
if (cfg?.buttonStyles && cfg.buttonStyles[b.id]) {
|
||||
const st = cfg.buttonStyles[b.id];
|
||||
if (st.bg)
|
||||
(el.style.background = st.bg), (el.style.borderColor = st.bg);
|
||||
if (st.text) el.style.color = st.text;
|
||||
}
|
||||
el.textContent = b.label || b.id || "OK";
|
||||
el.addEventListener("click", () => {
|
||||
ipcRenderer.send("custom-modal:result", {
|
||||
buttonId: b.id || `btn${idx}`,
|
||||
buttonIndex: idx,
|
||||
buttonLabel: b.label || "",
|
||||
});
|
||||
});
|
||||
btnsEl.appendChild(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
599
desktop-angular/src/main/open-dialog.html
Normal file
599
desktop-angular/src/main/open-dialog.html
Normal file
@@ -0,0 +1,599 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;" />
|
||||
<title>Open File</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2d3748;
|
||||
--text: #ffffff;
|
||||
--border: rgba(255,255,255,0.2);
|
||||
--hover-bg: rgba(255,255,255,0.1);
|
||||
--selected-bg: rgba(255,255,255,0.2);
|
||||
--button-bg: #aa1c3a;
|
||||
--button-text: #ffffff;
|
||||
--button-hover: #8b1531;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.path-bar {
|
||||
padding: 12px 20px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.path-input {
|
||||
flex: 1;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.path-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--button-bg);
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.browse-btn {
|
||||
background: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-bg);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.browse-btn:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.file-item.selected {
|
||||
background: var(--selected-bg);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: rgba(0,0,0,0.1);
|
||||
max-height: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
max-height: 80px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.file-type {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border-color: var(--button-bg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: 1px solid #dc3545;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
border-color: #bd2130;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog-container">
|
||||
<div class="header">
|
||||
<h3 class="title" id="dialogTitle">Open File</h3>
|
||||
<button class="close-btn" id="closeBtn" title="Close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="path-bar">
|
||||
<input type="text" class="path-input" id="pathInput" placeholder="Enter path or browse..." />
|
||||
<button class="browse-btn" id="browseBtn">Browse</button>
|
||||
</div>
|
||||
|
||||
<div class="file-list" id="fileList">
|
||||
<!-- Files will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-section" id="previewSection" style="display: none;">
|
||||
<div class="preview-label">File Preview (first 500 characters)</div>
|
||||
<div class="preview-content" id="previewContent"></div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="file-type" id="fileType">All Files (*.*)</div>
|
||||
<div class="buttons">
|
||||
<button class="btn btn-danger" id="deleteBtn" disabled>Delete</button>
|
||||
<button class="btn btn-secondary" id="cancelBtn">Cancel</button>
|
||||
<button class="btn btn-primary" id="openBtn" disabled>Open</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
let currentPath = '';
|
||||
let selectedFile = null;
|
||||
let config = {};
|
||||
|
||||
const elements = {
|
||||
dialogTitle: document.getElementById('dialogTitle'),
|
||||
closeBtn: document.getElementById('closeBtn'),
|
||||
pathInput: document.getElementById('pathInput'),
|
||||
browseBtn: document.getElementById('browseBtn'),
|
||||
fileList: document.getElementById('fileList'),
|
||||
fileType: document.getElementById('fileType'),
|
||||
cancelBtn: document.getElementById('cancelBtn'),
|
||||
openBtn: document.getElementById('openBtn'),
|
||||
deleteBtn: document.getElementById('deleteBtn'),
|
||||
previewSection: document.getElementById('previewSection'),
|
||||
previewContent: document.getElementById('previewContent')
|
||||
};
|
||||
|
||||
// Apply custom colors if provided
|
||||
function applyColors(colors) {
|
||||
if (!colors) return;
|
||||
const root = document.documentElement;
|
||||
if (colors.background) root.style.setProperty('--bg', colors.background);
|
||||
if (colors.text) root.style.setProperty('--text', colors.text);
|
||||
if (colors.buttonBg) root.style.setProperty('--button-bg', colors.buttonBg);
|
||||
if (colors.buttonText) root.style.setProperty('--button-text', colors.buttonText);
|
||||
if (colors.border) root.style.setProperty('--border', colors.border);
|
||||
}
|
||||
|
||||
// Load directory contents
|
||||
function loadDirectory(dirPath) {
|
||||
try {
|
||||
if (!fs.existsSync(dirPath) || !fs.statSync(dirPath).isDirectory()) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentPath = dirPath;
|
||||
elements.pathInput.value = dirPath;
|
||||
|
||||
const items = fs.readdirSync(dirPath, { withFileTypes: true });
|
||||
const files = [];
|
||||
const directories = [];
|
||||
|
||||
items.forEach(item => {
|
||||
const fullPath = path.join(dirPath, item.name);
|
||||
const stat = fs.statSync(fullPath);
|
||||
|
||||
if (item.isDirectory()) {
|
||||
directories.push({
|
||||
name: item.name,
|
||||
path: fullPath,
|
||||
isDirectory: true,
|
||||
size: '-',
|
||||
icon: '📁'
|
||||
});
|
||||
} else if (item.isFile()) {
|
||||
// Check file extension filter
|
||||
const ext = path.extname(item.name).toLowerCase();
|
||||
const shouldShow = config.filters ?
|
||||
config.filters.some(filter =>
|
||||
filter.extensions.some(extension =>
|
||||
extension.toLowerCase() === ext.toLowerCase() ||
|
||||
extension === '*' ||
|
||||
extension === '.*'
|
||||
)
|
||||
) : true;
|
||||
|
||||
if (shouldShow) {
|
||||
files.push({
|
||||
name: item.name,
|
||||
path: fullPath,
|
||||
isDirectory: false,
|
||||
size: formatFileSize(stat.size),
|
||||
icon: getFileIcon(ext)
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Sort: directories first, then files
|
||||
directories.sort((a, b) => a.name.localeCompare(b.name));
|
||||
files.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
const allItems = [...directories, ...files];
|
||||
renderFileList(allItems);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading directory:', error);
|
||||
elements.fileList.innerHTML = '<div style="padding: 20px; text-align: center; opacity: 0.7;">Error loading directory</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Render file list
|
||||
function renderFileList(items) {
|
||||
elements.fileList.innerHTML = '';
|
||||
|
||||
if (items.length === 0) {
|
||||
elements.fileList.innerHTML = '<div style="padding: 20px; text-align: center; opacity: 0.7;">No files found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'file-item';
|
||||
div.innerHTML = `
|
||||
<div class="file-icon">${item.icon}</div>
|
||||
<div class="file-info">
|
||||
<span class="file-name">${item.name}</span>
|
||||
<span class="file-size">${item.size}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
div.addEventListener('click', () => {
|
||||
// Remove previous selection
|
||||
document.querySelectorAll('.file-item.selected').forEach(el => {
|
||||
el.classList.remove('selected');
|
||||
});
|
||||
|
||||
div.classList.add('selected');
|
||||
selectedFile = item;
|
||||
|
||||
// Enable/disable buttons
|
||||
elements.openBtn.disabled = item.isDirectory;
|
||||
elements.deleteBtn.disabled = item.isDirectory;
|
||||
|
||||
// Show preview for files
|
||||
if (!item.isDirectory) {
|
||||
showFilePreview(item.path);
|
||||
} else {
|
||||
elements.previewSection.style.display = 'none';
|
||||
}
|
||||
|
||||
// If it's a directory, navigate into it
|
||||
if (item.isDirectory) {
|
||||
loadDirectory(item.path);
|
||||
}
|
||||
});
|
||||
|
||||
elements.fileList.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Format file size
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === '-') return '-';
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
if (bytes === 0) return '0 B';
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// Get file icon based on extension
|
||||
function getFileIcon(ext) {
|
||||
const iconMap = {
|
||||
'.yaml': '📄',
|
||||
'.yml': '📄',
|
||||
'.txt': '📄',
|
||||
'.json': '📄',
|
||||
'.js': '📄',
|
||||
'.ts': '📄',
|
||||
'.html': '📄',
|
||||
'.css': '📄',
|
||||
'.md': '📄',
|
||||
'.xml': '📄',
|
||||
'.log': '📄'
|
||||
};
|
||||
return iconMap[ext.toLowerCase()] || '📄';
|
||||
}
|
||||
|
||||
// Show file preview
|
||||
function showFilePreview(filePath) {
|
||||
if (!filePath || !fs.existsSync(filePath)) {
|
||||
elements.previewSection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = fs.statSync(filePath);
|
||||
if (stats.isDirectory()) {
|
||||
elements.previewSection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show preview for text files (under 1MB)
|
||||
if (stats.size > 1024 * 1024) {
|
||||
elements.previewSection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
const preview = content.length > 500 ? content.substring(0, 500) + '...' : content;
|
||||
|
||||
elements.previewContent.textContent = preview;
|
||||
elements.previewSection.style.display = 'block';
|
||||
} catch (error) {
|
||||
elements.previewSection.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
elements.closeBtn.addEventListener('click', () => {
|
||||
ipcRenderer.send('file-dialog:result', { canceled: true });
|
||||
});
|
||||
|
||||
elements.cancelBtn.addEventListener('click', () => {
|
||||
ipcRenderer.send('file-dialog:result', { canceled: true });
|
||||
});
|
||||
|
||||
elements.openBtn.addEventListener('click', () => {
|
||||
if (selectedFile && !selectedFile.isDirectory) {
|
||||
ipcRenderer.send('file-dialog:result', {
|
||||
canceled: false,
|
||||
filePath: selectedFile.path,
|
||||
content: fs.readFileSync(selectedFile.path, 'utf-8')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
elements.deleteBtn.addEventListener('click', async () => {
|
||||
if (!selectedFile || selectedFile.isDirectory) return;
|
||||
|
||||
const confirmDelete = confirm(`Are you sure you want to delete "${selectedFile.name}"?`);
|
||||
if (!confirmDelete) return;
|
||||
|
||||
try {
|
||||
fs.unlinkSync(selectedFile.path);
|
||||
// Reload directory to refresh file list
|
||||
loadDirectory(currentPath);
|
||||
// Clear selection
|
||||
selectedFile = null;
|
||||
elements.openBtn.disabled = true;
|
||||
elements.deleteBtn.disabled = true;
|
||||
elements.previewSection.style.display = 'none';
|
||||
} catch (error) {
|
||||
alert(`Error deleting file: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
elements.pathInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const newPath = elements.pathInput.value.trim();
|
||||
if (newPath && fs.existsSync(newPath)) {
|
||||
loadDirectory(newPath);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
elements.browseBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
// Request main process to show directory picker
|
||||
const result = await ipcRenderer.invoke('dialog:showDirectoryPicker', {
|
||||
title: 'Select Directory',
|
||||
defaultPath: currentPath
|
||||
});
|
||||
|
||||
if (!result.canceled && result.filePaths && result.filePaths.length > 0) {
|
||||
currentPath = result.filePaths[0];
|
||||
elements.pathInput.value = currentPath;
|
||||
loadDirectory(currentPath);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error opening directory picker:', error);
|
||||
// Fallback to prompt
|
||||
const newPath = prompt('Enter directory path:', currentPath);
|
||||
if (newPath && fs.existsSync(newPath) && fs.statSync(newPath).isDirectory()) {
|
||||
currentPath = newPath;
|
||||
elements.pathInput.value = currentPath;
|
||||
loadDirectory(currentPath);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
ipcRenderer.on('file-dialog:config', (event, dialogConfig) => {
|
||||
config = dialogConfig || {};
|
||||
|
||||
// Apply custom colors
|
||||
applyColors(config.colors);
|
||||
|
||||
// Set title and message
|
||||
elements.dialogTitle.textContent = config.title || 'Open File';
|
||||
|
||||
// Set file type filter text
|
||||
if (config.filters && config.filters.length > 0) {
|
||||
const filterText = config.filters.map(f => `${f.name} (${f.extensions.join(', ')})`).join('; ');
|
||||
elements.fileType.textContent = filterText;
|
||||
}
|
||||
|
||||
// Load initial directory
|
||||
const initialPath = config.defaultPath || os.homedir();
|
||||
loadDirectory(initialPath);
|
||||
});
|
||||
|
||||
// Handle double-click to open
|
||||
elements.fileList.addEventListener('dblclick', (e) => {
|
||||
const fileItem = e.target.closest('.file-item');
|
||||
if (fileItem && selectedFile && !selectedFile.isDirectory) {
|
||||
elements.openBtn.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
605
desktop-angular/src/main/save-dialog.html
Normal file
605
desktop-angular/src/main/save-dialog.html
Normal file
@@ -0,0 +1,605 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;" />
|
||||
<title>Save File</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2d3748;
|
||||
--text: #ffffff;
|
||||
--border: rgba(255,255,255,0.2);
|
||||
--hover-bg: rgba(255,255,255,0.1);
|
||||
--selected-bg: rgba(255,255,255,0.2);
|
||||
--button-bg: #aa1c3a;
|
||||
--button-text: #ffffff;
|
||||
--button-hover: #8b1531;
|
||||
--input-bg: rgba(255,255,255,0.1);
|
||||
--input-border: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text);
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--button-bg);
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.path-section {
|
||||
background: rgba(0,0,0,0.1);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.path-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.path-input {
|
||||
flex: 1;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.path-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--button-bg);
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.browse-btn {
|
||||
background: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--button-bg);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.browse-btn:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.file-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.file-type-info {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border-color: var(--button-bg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.files-section {
|
||||
background: rgba(0,0,0,0.1);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
margin-top: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.files-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.files-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog-container">
|
||||
<div class="header">
|
||||
<h3 class="title" id="dialogTitle">Save File</h3>
|
||||
<button class="close-btn" id="closeBtn" title="Close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fileName">File Name</label>
|
||||
<input type="text" class="form-input" id="fileName" placeholder="Enter file name..." />
|
||||
</div>
|
||||
|
||||
<div class="path-section">
|
||||
<div class="path-row">
|
||||
<input type="text" class="path-input" id="pathInput" placeholder="Enter directory path..." readonly />
|
||||
<button class="browse-btn" id="browseBtn">Browse</button>
|
||||
</div>
|
||||
<div class="file-type" id="fileType">All Files (*.*)</div>
|
||||
</div>
|
||||
|
||||
<div class="files-section">
|
||||
<div class="files-label">Files in current directory</div>
|
||||
<div class="files-list" id="filesList">
|
||||
<!-- Files will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="file-type-info" id="fileTypeInfo">All Files (*.*)</div>
|
||||
<div class="buttons">
|
||||
<button class="btn btn-secondary" id="cancelBtn">Cancel</button>
|
||||
<button class="btn btn-primary" id="saveBtn" disabled>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
|
||||
let currentPath = '';
|
||||
let config = {};
|
||||
let content = '';
|
||||
|
||||
const elements = {
|
||||
dialogTitle: document.getElementById('dialogTitle'),
|
||||
closeBtn: document.getElementById('closeBtn'),
|
||||
fileName: document.getElementById('fileName'),
|
||||
pathInput: document.getElementById('pathInput'),
|
||||
browseBtn: document.getElementById('browseBtn'),
|
||||
fileType: document.getElementById('fileType'),
|
||||
fileTypeInfo: document.getElementById('fileTypeInfo'),
|
||||
cancelBtn: document.getElementById('cancelBtn'),
|
||||
saveBtn: document.getElementById('saveBtn'),
|
||||
filesList: document.getElementById('filesList')
|
||||
};
|
||||
|
||||
// Apply custom colors if provided
|
||||
function applyColors(colors) {
|
||||
if (!colors) return;
|
||||
const root = document.documentElement;
|
||||
if (colors.background) root.style.setProperty('--bg', colors.background);
|
||||
if (colors.text) root.style.setProperty('--text', colors.text);
|
||||
if (colors.buttonBg) root.style.setProperty('--button-bg', colors.buttonBg);
|
||||
if (colors.buttonText) root.style.setProperty('--button-text', colors.buttonText);
|
||||
if (colors.border) root.style.setProperty('--border', colors.border);
|
||||
if (colors.inputBg) root.style.setProperty('--input-bg', colors.inputBg);
|
||||
if (colors.inputBorder) root.style.setProperty('--input-border', colors.inputBorder);
|
||||
}
|
||||
|
||||
// Update save button state
|
||||
function updateSaveButton() {
|
||||
const fileName = elements.fileName.value.trim();
|
||||
const hasPath = currentPath && fs.existsSync(currentPath);
|
||||
elements.saveBtn.disabled = !fileName || !hasPath;
|
||||
}
|
||||
|
||||
// Update file path display
|
||||
function updatePathDisplay() {
|
||||
elements.pathInput.value = currentPath;
|
||||
updateSaveButton();
|
||||
}
|
||||
|
||||
|
||||
// Get file extension from filename
|
||||
function getFileExtension(filename) {
|
||||
const ext = path.extname(filename).toLowerCase();
|
||||
return ext || '';
|
||||
}
|
||||
|
||||
// Format file size
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// Validate filename
|
||||
function isValidFilename(filename) {
|
||||
if (!filename || filename.trim() === '') return false;
|
||||
|
||||
// Check for invalid characters
|
||||
const invalidChars = /[<>:"/\\|?*]/;
|
||||
if (invalidChars.test(filename)) return false;
|
||||
|
||||
// Check for reserved names (Windows)
|
||||
const reservedNames = ['CON', 'PRN', 'AUX', 'NUL', 'COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM7', 'COM8', 'COM9', 'LPT1', 'LPT2', 'LPT3', 'LPT4', 'LPT5', 'LPT6', 'LPT7', 'LPT8', 'LPT9'];
|
||||
const nameWithoutExt = path.parse(filename).name.toUpperCase();
|
||||
if (reservedNames.includes(nameWithoutExt)) return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Show files in current directory
|
||||
function showFilesInDirectory() {
|
||||
console.log('showFilesInDirectory called with currentPath:', currentPath);
|
||||
|
||||
if (!currentPath) {
|
||||
elements.filesList.innerHTML = '<div class="file-item">No directory selected</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(currentPath)) {
|
||||
console.error('Directory does not exist:', currentPath);
|
||||
elements.filesList.innerHTML = '<div class="file-item">Directory does not exist: ' + currentPath + '</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = fs.statSync(currentPath);
|
||||
if (!stats.isDirectory()) {
|
||||
console.error('Path is not a directory:', currentPath);
|
||||
elements.filesList.innerHTML = '<div class="file-item">Path is not a directory: ' + currentPath + '</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const files = fs.readdirSync(currentPath);
|
||||
console.log('Files found:', files);
|
||||
|
||||
const fileStats = files.map(file => {
|
||||
try {
|
||||
const filePath = path.join(currentPath, file);
|
||||
const stats = fs.statSync(filePath);
|
||||
return {
|
||||
name: file,
|
||||
path: filePath,
|
||||
isDirectory: stats.isDirectory(),
|
||||
size: stats.size
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error getting stats for file:', file, error);
|
||||
return {
|
||||
name: file,
|
||||
path: path.join(currentPath, file),
|
||||
isDirectory: false,
|
||||
size: 0,
|
||||
error: error.message
|
||||
};
|
||||
}
|
||||
}).filter(file => file); // Remove any null/undefined entries
|
||||
|
||||
// Show all files without filtering
|
||||
const filteredFiles = fileStats;
|
||||
|
||||
// Sort: directories first, then files
|
||||
filteredFiles.sort((a, b) => {
|
||||
if (a.isDirectory && !b.isDirectory) return -1;
|
||||
if (!a.isDirectory && b.isDirectory) return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
elements.filesList.innerHTML = '';
|
||||
console.log ('filteredFiles', filteredFiles);
|
||||
|
||||
if (filteredFiles.length === 0) {
|
||||
elements.filesList.innerHTML = '<div class="file-item">No files found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
filteredFiles.forEach(file => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'file-item';
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="file-icon">${file.isDirectory ? '📁' : '📄'}</div>
|
||||
<div class="file-info">
|
||||
<span class="file-name">${file.name}</span>
|
||||
<span class="file-size">${file.isDirectory ? 'DIR' : formatFileSize(file.size)}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
div.addEventListener('click', () => {
|
||||
if (file.isDirectory) {
|
||||
currentPath = file.path;
|
||||
elements.pathInput.value = currentPath;
|
||||
showFilesInDirectory();
|
||||
} else {
|
||||
// Select file and update filename input
|
||||
elements.fileName.value = file.name;
|
||||
updateSaveButton();
|
||||
}
|
||||
});
|
||||
|
||||
elements.filesList.appendChild(div);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error reading directory:', error);
|
||||
elements.filesList.innerHTML = '<div class="file-item">Error reading directory: ' + error.message + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
elements.closeBtn.addEventListener('click', () => {
|
||||
ipcRenderer.send('save-dialog:result', { canceled: true });
|
||||
});
|
||||
|
||||
elements.cancelBtn.addEventListener('click', () => {
|
||||
ipcRenderer.send('save-dialog:result', { canceled: true });
|
||||
});
|
||||
|
||||
elements.saveBtn.addEventListener('click', () => {
|
||||
const fileName = elements.fileName.value.trim();
|
||||
|
||||
if (!isValidFilename(fileName)) {
|
||||
alert('Invalid filename. Please use valid characters and avoid reserved names.');
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = path.join(currentPath, fileName);
|
||||
|
||||
try {
|
||||
fs.writeFileSync(filePath, content, 'utf-8');
|
||||
ipcRenderer.send('save-dialog:result', {
|
||||
canceled: false,
|
||||
filePath: filePath
|
||||
});
|
||||
} catch (error) {
|
||||
alert(`Error saving file: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
elements.fileName.addEventListener('input', updateSaveButton);
|
||||
elements.fileName.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !elements.saveBtn.disabled) {
|
||||
elements.saveBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
elements.browseBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
// Request main process to show directory picker
|
||||
const result = await ipcRenderer.invoke('dialog:showDirectoryPicker', {
|
||||
title: 'Select Directory',
|
||||
defaultPath: currentPath
|
||||
});
|
||||
|
||||
if (!result.canceled && result.filePaths && result.filePaths.length > 0) {
|
||||
currentPath = result.filePaths[0];
|
||||
updatePathDisplay();
|
||||
showFilesInDirectory();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error opening directory picker:', error);
|
||||
// Fallback to prompt
|
||||
const newPath = prompt('Enter directory path:', currentPath);
|
||||
if (newPath && fs.existsSync(newPath) && fs.statSync(newPath).isDirectory()) {
|
||||
currentPath = newPath;
|
||||
updatePathDisplay();
|
||||
showFilesInDirectory();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
ipcRenderer.on('save-dialog:config', (event, dialogConfig) => {
|
||||
config = dialogConfig || {};
|
||||
content = config.content || '';
|
||||
|
||||
// Apply custom colors
|
||||
applyColors(config.colors);
|
||||
|
||||
// Set title
|
||||
elements.dialogTitle.textContent = config.title || 'Save File';
|
||||
|
||||
// Set default path
|
||||
currentPath = config.defaultPath || os.homedir();
|
||||
updatePathDisplay();
|
||||
|
||||
// Set default filename
|
||||
if (config.suggestedName) {
|
||||
elements.fileName.value = config.suggestedName;
|
||||
updateSaveButton();
|
||||
}
|
||||
|
||||
// Set file type filter text
|
||||
if (config.filters && config.filters.length > 0) {
|
||||
const filterText = config.filters.map(f => `${f.name} (${f.extensions.join(', ')})`).join('; ');
|
||||
elements.fileType.textContent = filterText;
|
||||
elements.fileTypeInfo.textContent = filterText;
|
||||
}
|
||||
|
||||
// Show files in directory
|
||||
showFilesInDirectory();
|
||||
|
||||
// Focus filename input
|
||||
elements.fileName.focus();
|
||||
elements.fileName.select();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
desktop-angular/src/preload/preload.js
Normal file
40
desktop-angular/src/preload/preload.js
Normal file
@@ -0,0 +1,40 @@
|
||||
// desktop-angular/src/preload/preload.js
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('env', { isElectron: true });
|
||||
|
||||
contextBridge.exposeInMainWorld('api', {
|
||||
getConfig: (key) => ipcRenderer.invoke('config:get', key),
|
||||
setConfig: (key, value) => ipcRenderer.invoke('config:set', key, value),
|
||||
getAllConfig: () => ipcRenderer.invoke('config:getAll'),
|
||||
setAllConfig: (cfg) => ipcRenderer.invoke('config:setAll', cfg),
|
||||
closeSettings: () => ipcRenderer.invoke('settings:close'),
|
||||
|
||||
openFile: () => ipcRenderer.invoke('file:open'),
|
||||
saveAs: (payload) => ipcRenderer.invoke('file:saveAs', payload),
|
||||
saveSilent: (payload) => ipcRenderer.invoke('file:saveSilent', payload),
|
||||
revealInFolder: (p) => ipcRenderer.invoke('os:revealInFolder', p),
|
||||
|
||||
localKnock: (payload) => ipcRenderer.invoke('knock:local', payload),
|
||||
getNetworkInterfaces: () => ipcRenderer.invoke('network:interfaces'),
|
||||
testConnection: (payload) => ipcRenderer.invoke('network:test-connection', payload),
|
||||
|
||||
// Custom electron-powered modal
|
||||
showNativeModal: (config) => ipcRenderer.invoke('dialog:custom', config),
|
||||
|
||||
// Custom file dialog
|
||||
showCustomFileDialog: (config) => ipcRenderer.invoke('dialog:customFile', config),
|
||||
|
||||
// Custom save dialog
|
||||
showCustomSaveDialog: (config) => ipcRenderer.invoke('dialog:customSave', config),
|
||||
|
||||
// Config files management
|
||||
listConfigFiles: () => ipcRenderer.invoke('config:listFiles'),
|
||||
loadConfigFile: (fileName) => ipcRenderer.invoke('config:loadFile', fileName),
|
||||
|
||||
// App lifecycle
|
||||
checkUnsavedChanges: () => ipcRenderer.invoke('app:checkUnsavedChanges'),
|
||||
|
||||
// YAML dirty state sync
|
||||
setYamlDirty: (isDirty) => ipcRenderer.invoke('app:setYamlDirty', isDirty)
|
||||
});
|
||||
Reference in New Issue
Block a user