diff --git a/src/app/_services/assets.service.ts b/src/app/_services/assets.service.ts new file mode 100644 index 0000000..c65b2e8 --- /dev/null +++ b/src/app/_services/assets.service.ts @@ -0,0 +1,24 @@ +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {environment} from '../../environments/environment'; +import {Observable} from "rxjs"; + +@Injectable({providedIn: 'root'}) +export class AssetsService { + constructor(private http: HttpClient) { + } + + upload(file: any, params?: any): Observable { + let formData = new FormData(); + formData.append('file', file); + for (let param in params) { + if (params.hasOwnProperty(param)) formData.append(param, params[param]); + } + return this.http.post(`${environment.apiUrl}/api/assets`, formData, {reportProgress: true, observe: 'events'}); + } + + bookmark(id: string, registry: string, params?: any): Observable { + return this.http.patch(`${environment.apiUrl}/api/assets/bookmark/${id}`, {registry: registry}, {params: params}); + } + +} diff --git a/src/app/app.component.html b/src/app/app.component.html index c6e139a..0bc79f7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,6 +12,7 @@ Разработка Проекты Контакты + Создай свой Qr-code @@ -65,7 +66,8 @@ Сайты Разработка Проекты - Контакты + Контакты + Создай свой Qr-code

Контакты

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 07ef722..3ab6c5a 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -12,6 +12,7 @@ import { Tk023Component } from './projects/tk023/tk023.component'; import { Tk465Component } from './projects/tk465/tk465.component'; import { ScvgComponent } from './projects/scvg/scvg.component'; import { pipe_prodComponent } from './projects/pipe_prod/pipe_prod.component'; +import { QrCodeComponent } from './qr-code/qr-code.component'; import { NotFoundComponentComponent } from './not-found-component/not-found-component.component'; @@ -29,5 +30,6 @@ export const routes: Routes = [ {path:'projects/tk465', component: Tk465Component}, {path:'projects/gazprom', component: ScvgComponent}, {path:'projects/pipe_prod', component: pipe_prodComponent}, + {path: 'qr-code', component: QrCodeComponent}, {path: '404', component: NotFoundComponentComponent}, ]; diff --git a/src/app/qr-code/qr-code.component.html b/src/app/qr-code/qr-code.component.html new file mode 100644 index 0000000..a5d3b6a --- /dev/null +++ b/src/app/qr-code/qr-code.component.html @@ -0,0 +1,200 @@ +
+
+
+
+
+
+
+
+

Введите текст или загрузите изображение

+
+ +
+
+ +
+
+
+
+
+
+ + + Line breaks are allowed +
+ +
+ +

Перетащите сюда или выберите файл в формате JPEG или PNG общим объемом не более 10 Мбайт.

+
+
Загружается файл {{upload.file?.name}}
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+

Выберите цвет

+
+ +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+ + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ + + + + + +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+

Добавить изображение

+
+ +
+
+ +
+
+
+ +
+ +

Перетащите сюда или выберите файл в формате JPEG или PNG общим объемом не более 10 Мбайт.

+
+
Загружается файл {{upload.file?.name}}
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+

Ручной дизайн

+
+ +
+
+ +
+
+
+ Обычный + Скругленные края +
+
+ +
+
+
+
+

Созданный QR-CODE

+
+ +
+
+
+
diff --git a/src/app/qr-code/qr-code.component.scss b/src/app/qr-code/qr-code.component.scss new file mode 100644 index 0000000..05846b4 --- /dev/null +++ b/src/app/qr-code/qr-code.component.scss @@ -0,0 +1,194 @@ +*,::after,::before { + box-sizing: border-box +} + +textarea { + overflow: auto; + resize: vertical +} + +.block { + box-shadow: 0 0 20px rgba(0,0,0,.25); + position: relative; + margin: 0 auto; + border-radius: 32px; +} + +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto +} + +.row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px +} + +.block .block-options { + padding: 32px +} + +.block .accordion .pane { + margin-bottom: 4px +} + +.block .accordion .pane .pane-header { + cursor: pointer; + -webkit-transition: all .3s; + transition: all .3s; + background: #fff; + font-size: 1.1rem; + position: relative; + font-weight: 500; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 48px; + box-shadow: 0 0 6px rgba(0,0,0,.05) +} + +.block .accordion .pane .pane-header .title { + padding: 0 16px; + text-transform: uppercase; + font-size: 1rem; + margin: 0; + -webkit-flex-shrink: 1; + -webkit-flex-grow: 1; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + white-space: nowrap; + line-height: 48px; + text-align: initial +} + +.block .accordion .pane .pane-header .icon { + width: 48px; + text-align: center; + -webkit-flex-shrink: 0; + -webkit-flex-grow: 0; + flex-grow: 0; + flex-shrink: 0; + background: #f2f8fc; + line-height: 48px +} + +.block .accordion .pane .pane-header .minus, .block .accordion .pane .pane-header .plus { + padding: 0 16px; + -webkit-flex-shrink: 0; + -webkit-flex-grow: 0; + flex-grow: 0; + flex-shrink: 0; + line-height: 48px; + color: rgba(111,120,127,.5); + font-size: .9rem +} + +.block .accordion .pane .pane-header .minus { + display: none +} + +.block .accordion .pane .pane-header:hover { + background-color: #f2f8fc; + box-shadow: none +} + +.block.accordion .pane.active .pane-content { + padding: 1rem 0; + display: block; + opacity: 1; + visibility: visible; + max-height: 1400px; + overflow: visible; + -webkit-transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s; + transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s +} + +.form-control { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out +} + +.block .accordion .pane.active .pane-content { + padding: 1rem 0; + display: block; + opacity: 1; + visibility: visible; + max-height: 1400px; + overflow: visible; + -webkit-transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s; + transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s +} + +.body .accordion .pane .pane-content .color-group label { + font-weight: 400 +} + +.block .accordion .pane .pane-content .color-group-body { + padding-bottom: 0 +} + +.form-check { + position: relative; + display: block; + padding-left: 1.25rem; +} + +.form-check-inline { + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 0; + margin-right: .75rem; +} + +.form-check-label { + cursor: pointer; + font-weight: 400; +} + +.form-check-input { + vertical-align: middle; +} + +.block .block-download { + background: #fff; + padding: 16px; + border-left: 1px solid rgba(0, 0, 0, .1); + border-radius: 0 5px 5px 0; +} + +@media (min-width: 768px) { + .block .inner { + display:flex; + align-items: stretch + } +} + +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} diff --git a/src/app/qr-code/qr-code.component.spec.ts b/src/app/qr-code/qr-code.component.spec.ts new file mode 100644 index 0000000..a87973f --- /dev/null +++ b/src/app/qr-code/qr-code.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { QrCodeComponent } from './qr-code.component'; + +describe('QrCodeComponent', () => { + let component: QrCodeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [QrCodeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(QrCodeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/qr-code/qr-code.component.ts b/src/app/qr-code/qr-code.component.ts new file mode 100644 index 0000000..74ceede --- /dev/null +++ b/src/app/qr-code/qr-code.component.ts @@ -0,0 +1,109 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Router} from "@angular/router"; +import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {NgIf} from "@angular/common"; +import {FormsService} from "../_services/forms.service"; +import {HttpEventType, HttpResponse} from "@angular/common/http"; +import {AssetsService} from "../_services/assets.service"; + +@Component({ + selector: 'qr-code', + standalone: true, + imports: [ + FormsModule, + NgIf, + ReactiveFormsModule + ], + templateUrl: './qr-code.component.html', + styleUrl: './qr-code.component.scss' +}) +export class QrCodeComponent implements OnInit{ + @Input() field!: any; + public asset: any; + public QrCodeForm: FormGroup; + public dragOver = false; + + public upload: any = {file: null, progress: 0}; + constructor(private formBuilder:FormBuilder, private formsService: FormsService, private assetsService: AssetsService){} + + ngOnInit() { + this.QrCodeForm = this.formBuilder.group({ + 'text' : [''], + 'format' : ['svg'], + 'size' : [350], + 'foreground-color' : ['#000000'], + 'background-color' : ['#ffffff'], + 'gradient-start' : ['#ffffff'], + 'gradient-end' : ['#00A0FF'], + 'gradient-type' : ['vertical'], + 'color-type' : ['solid'], + 'custom-eye-color' : [false], + 'outside-eye-color' : ['#000000'], + 'inner-eye-color' : ['#000000'], + 'image' : [] + }); + } + + + onSubmit(){ + this.QrCodeForm.markAllAsTouched(); + if (this.QrCodeForm.valid) + this.formsService.save('model', 'QrCode', null, this.QrCodeForm.value).subscribe(res => { + }, error => { + console.log(error); + }); + } + + get initialValue() { + return this.field.value?.data[0]; + } + get control() { + return this.QrCodeForm.controls[this.field.name]; + } + get value() { + return this.control?.value || []; + } + set value(asset: any) { + this.asset = asset; + this.control?.setValue(asset?.id); + } + + + setValue(value: any) { + this.control.setValue(value); + this.control.markAsTouched(); + } + + clear() { + this.control.markAsTouched(); + this.value = null; + } + + + + onFileInput(event: any) { + this.uploadFiles(event.target.files); + event.target.value = null; + } + + uploadFiles(files: any) { + for (let file of files) { + this.uploadFile(file); + } + } + uploadFile(file: File) { + this.upload.file = file; + this.assetsService.upload(file).subscribe((result) => { + if (result.type === HttpEventType.UploadProgress) { + this.upload.progress = Math.round(100 * result.loaded / result.total); + } else if (result instanceof HttpResponse) { + this.upload = {file: null, progress: 0}; + this.value = result.body.data; + this.control.markAsTouched(); + } + }, error => { + this.upload = {file: null, progress: 0}; + alert(error.error.message); + }); + } +}