133 lines
4.3 KiB
TypeScript
133 lines
4.3 KiB
TypeScript
import { Component } from '@angular/core';
|
||
import { CommonModule } from '@angular/common';
|
||
import { RouterModule } from '@angular/router';
|
||
import { CardModule } from 'primeng/card';
|
||
import { ButtonModule } from 'primeng/button';
|
||
import { DialogModule } from 'primeng/dialog';
|
||
import { KnockPageComponent } from '../knock/knock-page.component';
|
||
|
||
@Component({
|
||
selector: 'app-fsa-knock-page',
|
||
standalone: true,
|
||
imports: [
|
||
CommonModule, RouterModule, CardModule, ButtonModule, DialogModule, KnockPageComponent
|
||
],
|
||
template: `
|
||
<div class="container">
|
||
<div *ngIf="!isFSASupported" class="text-center">
|
||
<h3>File System Access API не поддерживается</h3>
|
||
<p>Эта функциональность требует браузер с поддержкой File System Access API:</p>
|
||
<ul class="text-left mt-3">
|
||
<li>Google Chrome 86+</li>
|
||
<li>Microsoft Edge 86+</li>
|
||
<li>Opera 72+</li>
|
||
</ul>
|
||
<p class="mt-3">Ваш браузер: <strong>{{ browserInfo }}</strong></p>
|
||
<button pButton
|
||
type="button"
|
||
label="Перейти к основной версии"
|
||
class="p-button-outlined mt-3"
|
||
routerLink="/">
|
||
</button>
|
||
</div>
|
||
|
||
<div *ngIf="isFSASupported">
|
||
<!-- Встраиваем основной компонент с поддержкой FSA -->
|
||
<app-knock-page [enableFSA]="true" [canUseFSA]="true"></app-knock-page>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Информационное модальное окно -->
|
||
<p-dialog header="🚀 Расширенная версия с File System Access"
|
||
[(visible)]="showInfoDialog"
|
||
[modal]="true"
|
||
[closable]="true"
|
||
[draggable]="false"
|
||
[resizable]="false"
|
||
styleClass="info-dialog">
|
||
<div class="dialog-content">
|
||
<p class="mb-3">
|
||
Эта версия поддерживает прямое редактирование файлов на диске.
|
||
Файлы будут автоматически перезаписываться после шифрования/дешифрования.
|
||
</p>
|
||
<div class="p-3 bg-green-50 border-round">
|
||
<p class="text-sm mb-2">
|
||
✅ <strong>Доступные возможности:</strong>
|
||
</p>
|
||
<ul class="text-sm mb-0">
|
||
<li>Прямое открытие файлов с диска</li>
|
||
<li>Автоматическое сохранение изменений</li>
|
||
<li>Перезапись зашифрованных файлов "на месте"</li>
|
||
<li>Быстрая работа без диалогов загрузки/скачивания</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</p-dialog>
|
||
`,
|
||
styles: [`
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 1rem;
|
||
}
|
||
|
||
ul {
|
||
display: inline-block;
|
||
text-align: left;
|
||
}
|
||
|
||
.info-link {
|
||
color: #3b82f6;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.info-link:hover {
|
||
color: #1d4ed8;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.bg-green-50 {
|
||
background-color: #f0fdf4;
|
||
}
|
||
|
||
.dialog-content {
|
||
min-width: 450px;
|
||
}
|
||
`]
|
||
})
|
||
export class FsaKnockPageComponent {
|
||
isFSASupported = false;
|
||
browserInfo = '';
|
||
showInfoDialog = false;
|
||
|
||
constructor() {
|
||
this.checkFSASupport();
|
||
this.getBrowserInfo();
|
||
}
|
||
|
||
private checkFSASupport() {
|
||
const w = window as any;
|
||
this.isFSASupported = typeof w.showOpenFilePicker === 'function';
|
||
}
|
||
|
||
private getBrowserInfo() {
|
||
const ua = navigator.userAgent;
|
||
if (ua.includes('Chrome') && !ua.includes('Edg/')) {
|
||
this.browserInfo = 'Google Chrome';
|
||
} else if (ua.includes('Edg/')) {
|
||
this.browserInfo = 'Microsoft Edge';
|
||
} else if (ua.includes('Opera') || ua.includes('OPR/')) {
|
||
this.browserInfo = 'Opera';
|
||
} else if (ua.includes('Firefox')) {
|
||
this.browserInfo = 'Mozilla Firefox';
|
||
} else if (ua.includes('Safari') && !ua.includes('Chrome')) {
|
||
this.browserInfo = 'Safari';
|
||
} else {
|
||
this.browserInfo = 'Неизвестный браузер';
|
||
}
|
||
}
|
||
}
|