diff --git a/projects/editor/src/app/app.component.ts b/projects/editor/src/app/app.component.ts
index 3f33e5ef47cea07d2144fe9571bb739c86428250..ab2c3121cd85b1ad4ff136b82625311514f31fbf 100644
--- a/projects/editor/src/app/app.component.ts
+++ b/projects/editor/src/app/app.component.ts
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
-import { VeronaAPIService } from './verona-api.service';
-import { UnitService } from './unit.service';
+import { VeronaAPIService } from './services/verona-api.service';
+import { UnitService } from './services/unit.service';
@Component({
selector: 'editor-aspect',
diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 4674d2dd42103e27363f3b4993e6be533da511e7..52b3aa13c31fda3492b0c32c4d90caa1e4b69e70 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -12,31 +12,29 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatSliderModule } from '@angular/material/slider';
import { AppComponent } from './app.component';
-import { ToolbarComponent } from './toolbar/toolbar.component';
-import { UiElementToolboxComponent } from './unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component';
-import { UnitViewComponent } from './unit-view/unit-view.component';
-import { PageViewComponent } from './unit-view/page-view/page-view.component';
-import { CanvasComponent } from './unit-view/page-view/canvas/canvas.component';
-import { StaticCanvasOverlayComponent } from './unit-view/page-view/canvas/static-canvas-overlay.component';
-import { DynamicCanvasOverlayComponent } from './unit-view/page-view/canvas/dynamic-canvas-overlay.component';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { UiElementToolboxComponent } from './components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component';
+import { UnitViewComponent } from './components/unit-view/unit-view.component';
+import { PageViewComponent } from './components/unit-view/page-view/page-view.component';
+import { CanvasComponent } from './components/unit-view/page-view/canvas/canvas.component';
+import { StaticCanvasOverlayComponent } from './components/unit-view/page-view/canvas/static-canvas-overlay.component';
+import { DynamicCanvasOverlayComponent } from './components/unit-view/page-view/canvas/dynamic-canvas-overlay.component';
import { SharedModule } from '../../../common/shared.module';
-import {
- ConfirmationDialog,
- TextEditDialog,
- MultilineTextEditDialog,
- RichTextEditDialog,
- LikertColumnEditDialog,
- LikertRowEditDialog,
- PlayerEditDialog
-} from './dialog.service';
import { EditorTranslateLoader } from './editor-translate-loader';
-import { ElementPropertiesComponent } from './unit-view/page-view/properties-panel/element-properties.component';
-import { SectionMenuComponent } from './unit-view/page-view/canvas/section-menu.component';
-import { SectionStaticComponent } from './unit-view/page-view/canvas/section-static.component';
-import { SectionDynamicComponent } from './unit-view/page-view/canvas/section-dynamic.component';
+import { ElementPropertiesComponent } from './components/unit-view/page-view/properties-panel/element-properties.component';
+import { SectionMenuComponent } from './components/unit-view/page-view/canvas/section-menu.component';
+import { SectionStaticComponent } from './components/unit-view/page-view/canvas/section-static.component';
+import { SectionDynamicComponent } from './components/unit-view/page-view/canvas/section-dynamic.component';
import { RichTextEditorComponent } from './text-editor/rich-text-editor.component';
-import { ElementStylePropertiesComponent } from './unit-view/page-view/properties-panel/element-style-properties.component';
-import { ElementSizingPropertiesComponent } from './unit-view/page-view/properties-panel/element-sizing-properties.component';
+import { ElementStylePropertiesComponent } from './components/unit-view/page-view/properties-panel/element-style-properties.component';
+import { ElementSizingPropertiesComponent } from './components/unit-view/page-view/properties-panel/element-sizing-properties.component';
+import { ConfirmationDialogComponent } from './components/dialogs/confirmation-dialog.component';
+import { TextEditDialogComponent } from './components/dialogs/text-edit-dialog.component';
+import { TextEditMultilineDialogComponent } from './components/dialogs/text-edit-multiline-dialog.component';
+import { PlayerEditDialogComponent } from './components/dialogs/player-edit-dialog.component';
+import { LikertColumnEditDialogComponent } from './components/dialogs/likert-column-edit-dialog.component';
+import { LikertRowEditDialogComponent } from './components/dialogs/likert-row-edit-dialog.component';
+import { RichTextEditDialogComponent } from './components/dialogs/rich-text-edit-dialog.component';
@NgModule({
declarations: [
@@ -48,20 +46,20 @@ import { ElementSizingPropertiesComponent } from './unit-view/page-view/properti
CanvasComponent,
StaticCanvasOverlayComponent,
DynamicCanvasOverlayComponent,
- ConfirmationDialog,
- TextEditDialog,
- MultilineTextEditDialog,
- RichTextEditDialog,
- LikertColumnEditDialog,
- LikertRowEditDialog,
- PlayerEditDialog,
ElementPropertiesComponent,
SectionMenuComponent,
SectionStaticComponent,
SectionDynamicComponent,
RichTextEditorComponent,
ElementStylePropertiesComponent,
- ElementSizingPropertiesComponent
+ ElementSizingPropertiesComponent,
+ ConfirmationDialogComponent,
+ TextEditDialogComponent,
+ TextEditMultilineDialogComponent,
+ PlayerEditDialogComponent,
+ LikertColumnEditDialogComponent,
+ LikertRowEditDialogComponent,
+ RichTextEditDialogComponent
],
imports: [
BrowserModule,
diff --git a/projects/editor/src/app/components/dialogs/confirmation-dialog.component.ts b/projects/editor/src/app/components/dialogs/confirmation-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b0216b1df32d81c0ee612bac093a5f462e5bce0
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/confirmation-dialog.component.ts
@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+ selector: 'app-confirmation-dialog',
+ template: `
+ <mat-dialog-content>
+ {{data.text}}
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="true">{{'save' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class ConfirmationDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
+}
diff --git a/projects/editor/src/app/components/dialogs/likert-column-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-column-edit-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b16ec0405c32df0bdb071ec81c3a628d5428e2d
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/likert-column-edit-dialog.component.ts
@@ -0,0 +1,48 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { LikertColumn } from '../../../../../common/interfaces/UIElementInterfaces';
+import { FileService } from '../../../../../common/file.service';
+
+@Component({
+ selector: 'app-likert-column-edit-dialog',
+ template: `
+ <mat-dialog-content fxLayout="column">
+ <mat-form-field>
+ <mat-label>{{'text' | translate }}</mat-label>
+ <input #textInput matInput type="text" [value]="data.column.text">
+ </mat-form-field>
+ <input #imageUpload type="file" hidden (click)="loadImage()">
+ <button mat-raised-button (click)="imageUpload.click()">{{ 'loadImage' | translate }}</button>
+ <button mat-raised-button (click)="data.column.imgSrc = null">{{ 'removeImage' | translate }}</button>
+ <img [src]="data.column.imgSrc"
+ [style.object-fit]="'scale-down'"
+ [width]="200">
+ <mat-form-field appearance="fill">
+ <mat-label>{{'position' | translate }}</mat-label>
+ <mat-select [value]="data.column.position"
+ (selectionChange)="this.data.column.position = $event.value">
+ <mat-option *ngFor="let option of ['above', 'below']"
+ [value]="option">
+ {{ option | translate }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="{
+ text: textInput.value,
+ imgSrc: data.column.imgSrc,
+ position: data.column.position }">
+ {{'save' | translate }}
+ </button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class LikertColumnEditDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { column: LikertColumn }) { }
+
+ async loadImage(): Promise<void> {
+ this.data.column.imgSrc = await FileService.loadImage();
+ }
+}
diff --git a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ce581e24a45b76ac04dff2dec986fe3fed0bca9
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
@@ -0,0 +1,37 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { LikertElementRow } from '../../../../../common/models/compound-elements/likert-element-row';
+import { LikertColumn } from '../../../../../common/interfaces/UIElementInterfaces';
+
+@Component({
+ selector: 'app-likert-row-edit-dialog',
+ template: `
+ <mat-dialog-content fxLayout="column">
+ <mat-form-field>
+ <mat-label>{{'text' | translate }}</mat-label>
+ <input #textField matInput type="text" [value]="data.row.text">
+ </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'id' | translate }}</mat-label>
+ <input #idField matInput type="text" [value]="data.row.id">
+ </mat-form-field>
+ {{'preset' | translate }}
+ <mat-select #valueField [value]="data.row.value">
+ <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
+ <mat-option *ngFor="let column of data.columns; let i = index" [value]="i">
+ {{column.text}}
+ </mat-option>
+ </mat-select>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button
+ [mat-dialog-close]="{ text: textField.value, id: idField.value, value: valueField.value }">
+ {{'save' | translate }}
+ </button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class LikertRowEditDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertElementRow, columns: LikertColumn[] }) { }
+}
diff --git a/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a79fc68593d226cd0acf75f69c0cc4946d48780e
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
@@ -0,0 +1,109 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { PlayerElement } from '../../../../../common/interfaces/UIElementInterfaces';
+
+@Component({
+ selector: 'app-player-edit-dialog',
+ template: `
+ <mat-dialog-content fxLayout="row">
+ <mat-tab-group>
+ <mat-tab label="{{ 'player.appearance' | translate }}">
+ <div fxLayout="column">
+ <mat-checkbox [checked]="newPlayerConfig.startControl || data.player.startControl"
+ (change)="newPlayerConfig.startControl = $event.checked">
+ {{ 'player.startControl' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.pauseControl || data.player.pauseControl"
+ (change)="newPlayerConfig.pauseControl = $event.checked">
+ {{ 'player.pauseControl' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.progressBar || data.player.progressBar"
+ (change)="newPlayerConfig.progressBar = $event.checked">
+ {{ 'player.progressBar' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.interactiveProgressbar || data.player.interactiveProgressbar"
+ (change)="newPlayerConfig.interactiveProgressbar = $event.checked">
+ {{ 'player.interactiveProgressbar' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.volumeControl || data.player.volumeControl"
+ (change)="newPlayerConfig.volumeControl = $event.checked">
+ {{ 'player.volumeControl' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.showRestTime || data.player.showRestTime"
+ (change)="newPlayerConfig.showRestTime = $event.checked">
+ {{ 'player.showRestTime' | translate }}
+ </mat-checkbox>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.hintLabel' | translate }}</mat-label>
+ <input matInput type="text" [value]="newPlayerConfig.hintLabel || data.player.hintLabel"
+ (input)="newPlayerConfig.hintLabel = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field *ngIf="newPlayerConfig.hintLabel || data.player.hintLabel"
+ appearance="fill">
+ <mat-label>{{ 'player.hintLabelDelay' | translate }}</mat-label>
+ <input matInput type="number" step="1000" min="0"
+ [ngModel]="newPlayerConfig.hintLabelDelay || data.player.hintLabelDelay"
+ (ngModelChange)="newPlayerConfig.hintLabelDelay = $event">
+ </mat-form-field>
+ </div>
+ </mat-tab>
+ <mat-tab label="{{ 'player.behaviour' | translate }}">
+ <div fxLayout="column">
+ <mat-checkbox [checked]="newPlayerConfig.autostart || data.player.autostart"
+ (change)="newPlayerConfig.autostart = $event.checked">
+ {{ 'player.autoStart' | translate }}
+ </mat-checkbox>
+ <mat-form-field *ngIf="newPlayerConfig.autostart || data.player.autostart" appearance="fill">
+ <mat-label>{{ 'player.autoStartDelay' | translate }}</mat-label>
+ <input matInput type="number" step="1000"
+ [value]="newPlayerConfig.autostartDelay || data.player.autostartDelay"
+ (input)="newPlayerConfig.autostartDelay = $any($event.target).value">
+ </mat-form-field>
+ <mat-checkbox [checked]="newPlayerConfig.loop || data.player.loop"
+ (change)="newPlayerConfig.loop = $event.checked">
+ {{ 'player.loop' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.uninterruptible || data.player.uninterruptible"
+ (change)="newPlayerConfig.uninterruptible = $event.checked">
+ {{ 'player.uninterruptible' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [checked]="newPlayerConfig.hideOtherPages || data.player.hideOtherPages"
+ (change)="newPlayerConfig.hideOtherPages = $event.checked">
+ {{ 'player.hideOtherPages' | translate }}
+ </mat-checkbox>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.activeAfterID' | translate }}</mat-label>
+ <input matInput type="text" [value]="newPlayerConfig.activeAfterID || data.player.activeAfterID"
+ (input)="newPlayerConfig.activeAfterID = $any($event.target).value">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.minRuns' | translate }}</mat-label>
+ <input matInput type="number" min="0"
+ [ngModel]="newPlayerConfig.minRuns || data.player.minRuns"
+ (ngModelChange)="newPlayerConfig.minRuns = $event">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.maxRuns' | translate }}</mat-label>
+ <input matInput type="number" min="0"
+ [ngModel]="newPlayerConfig.maxRuns || data.player.maxRuns"
+ (ngModelChange)="newPlayerConfig.maxRuns = $event">
+ </mat-form-field>
+ <mat-checkbox [checked]="newPlayerConfig.showRestRuns || data.player.showRestRuns"
+ (change)="newPlayerConfig.showRestRuns = $event.checked">
+ {{ 'player.showRestRuns' | translate }}
+ </mat-checkbox>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="newPlayerConfig">{{'save' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class PlayerEditDialogComponent {
+ newPlayerConfig: PlayerElement = {} as PlayerElement;
+ constructor(@Inject(MAT_DIALOG_DATA)public data: { player: PlayerElement }) {
+ }
+}
diff --git a/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4abdf7a3e7d8c108471a669d26cdcdd36ab6de4b
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts
@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+ selector: 'app-rich-text-edit-dialog-tinymce',
+ template: `
+ <mat-dialog-content>
+ <app-rich-text-editor [(text)]="data.text"></app-rich-text-editor>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="data.text">{{'save' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class RichTextEditDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
+}
diff --git a/projects/editor/src/app/components/dialogs/text-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/text-edit-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33ff28e15c0752188dc9a44238d1ebf8bfe7d4b3
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/text-edit-dialog.component.ts
@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+ selector: 'app-text-edit-dialog',
+ template: `
+ <mat-dialog-content>
+ <mat-form-field>
+ <mat-label>{{'text' | translate }}</mat-label>
+ <input #inputElement matInput type="text" [value]="data.text">
+ </mat-form-field>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="inputElement.value">{{'save' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class TextEditDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
+}
diff --git a/projects/editor/src/app/components/dialogs/text-edit-multiline-dialog.component.ts b/projects/editor/src/app/components/dialogs/text-edit-multiline-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e25d41cbdb8ee422feb9d14b4192a77d7e371651
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/text-edit-multiline-dialog.component.ts
@@ -0,0 +1,22 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+ selector: 'app-multiline-text-edit-dialog',
+ template: `
+ <mat-dialog-content>
+ <mat-form-field>
+ <mat-label>{{'text' | translate }}</mat-label>
+ <textarea #inputElement matInput type="text" [value]="data.text">
+ </textarea>
+ </mat-form-field>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="inputElement.value">{{'save' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </mat-dialog-actions>
+ `
+})
+export class TextEditMultilineDialogComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
+}
diff --git a/projects/editor/src/app/toolbar/toolbar.component.html b/projects/editor/src/app/components/toolbar/toolbar.component.html
similarity index 100%
rename from projects/editor/src/app/toolbar/toolbar.component.html
rename to projects/editor/src/app/components/toolbar/toolbar.component.html
diff --git a/projects/editor/src/app/toolbar/toolbar.component.ts b/projects/editor/src/app/components/toolbar/toolbar.component.ts
similarity index 88%
rename from projects/editor/src/app/toolbar/toolbar.component.ts
rename to projects/editor/src/app/components/toolbar/toolbar.component.ts
index 2200af4a0272dbb9b7335aa9ecbb9466b6a38d42..e9e91c3d413762336bc1c20cc4b0bd39e707f039 100644
--- a/projects/editor/src/app/toolbar/toolbar.component.ts
+++ b/projects/editor/src/app/components/toolbar/toolbar.component.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { UnitService } from '../unit.service';
+import { UnitService } from '../../services/unit.service';
@Component({
selector: 'app-toolbar',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
similarity index 88%
rename from projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
index 043c98e14a38c64c5a7801f873ebca62117cd9de..f3ec24219592efe81e5472380081ce7d39d01d6e 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
@@ -4,11 +4,11 @@ import {
ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef
} from '@angular/core';
import { Subject } from 'rxjs';
-import { UnitService } from '../../../unit.service';
-import * as ElementFactory from '../../../../../../common/util/element.factory';
-import { ElementComponent } from '../../../../../../common/element-component.directive';
-import { SelectionService } from '../../../selection.service';
-import { UIElement } from '../../../../../../common/models/uI-element';
+import { UnitService } from '../../../../services/unit.service';
+import * as ElementFactory from '../../../../../../../common/util/element.factory';
+import { ElementComponent } from '../../../../../../../common/element-component.directive';
+import { SelectionService } from '../../../../services/selection.service';
+import { UIElement } from '../../../../../../../common/models/uI-element';
@Directive()
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/canvas.component.html b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
similarity index 100%
rename from projects/editor/src/app/unit-view/page-view/canvas/canvas.component.html
rename to projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/canvas.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
similarity index 93%
rename from projects/editor/src/app/unit-view/page-view/canvas/canvas.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
index 35671158a8207da6530751600177821894026b0c..1dd5084dc24b4be89daad0db89f296c07c4f6210 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/canvas.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
@@ -4,11 +4,11 @@ import {
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
-import { UnitService } from '../../../unit.service';
-import { SelectionService } from '../../../selection.service';
-import { Page } from '../../../../../../common/models/page';
-import { UIElement } from '../../../../../../common/models/uI-element';
-import { Section } from '../../../../../../common/models/section';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
+import { Page } from '../../../../../../../common/models/page';
+import { UIElement } from '../../../../../../../common/models/uI-element';
+import { Section } from '../../../../../../../common/models/section';
@Component({
selector: 'app-page-canvas',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
similarity index 97%
rename from projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
index 9c43de68df9eeb7a3c9effb3da2a4759d59ca906..6b2db21d007b00ba6cef7fd2fa5c66c1cd0d9d9f 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
@@ -3,7 +3,7 @@ import {
} from '@angular/core';
import { CdkDragMove } from '@angular/cdk/drag-drop';
import { CanvasElementOverlay } from './canvas-element-overlay';
-import { UIElement } from '../../../../../../common/models/uI-element';
+import { UIElement } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-dynamic-canvas-overlay',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
similarity index 96%
rename from projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
index f0f54c04eedb76295ac5a0a01bf123fd09c1351b..b643936d8b40191f87f126e603136b27da075938 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
@@ -3,9 +3,9 @@ import {
} from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
import { DragItemData, DropListData } from './canvas.component';
-import { UnitService } from '../../../unit.service';
-import { Section } from '../../../../../../common/models/section';
-import { UIElementType } from '../../../../../../common/models/uI-element';
+import { UnitService } from '../../../../services/unit.service';
+import { Section } from '../../../../../../../common/models/section';
+import { UIElementType } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-section-dynamic',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/section-menu.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
similarity index 97%
rename from projects/editor/src/app/unit-view/page-view/canvas/section-menu.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
index 14acd9628d85d094425b1c22a1dd37d1fb0528d5..e173e81db3567090920ae3d1c7fa050747f5cd8f 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
@@ -4,10 +4,10 @@ import {
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
-import { UnitService } from '../../../unit.service';
-import { DialogService } from '../../../dialog.service';
-import { SelectionService } from '../../../selection.service';
-import { Section } from '../../../../../../common/models/section';
+import { UnitService } from '../../../../services/unit.service';
+import { DialogService } from '../../../../services/dialog.service';
+import { SelectionService } from '../../../../services/selection.service';
+import { Section } from '../../../../../../../common/models/section';
@Component({
selector: 'app-section-menu',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/section-static.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
similarity index 86%
rename from projects/editor/src/app/unit-view/page-view/canvas/section-static.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
index 6fd07c3ee3c396f28e6f8bc7e6bb6af5dca2d8ef..56ba5d797862a1bd63a22b8688060883cea5ae3d 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/section-static.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
@@ -1,9 +1,9 @@
import {
Component, ElementRef, Input, ViewChild
} from '@angular/core';
-import { UnitService } from '../../../unit.service';
-import { Section } from '../../../../../../common/models/section';
-import { UIElementType } from '../../../../../../common/models/uI-element';
+import { UnitService } from '../../../../services/unit.service';
+import { Section } from '../../../../../../../common/models/section';
+import { UIElementType } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-section-static',
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/static-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts
similarity index 97%
rename from projects/editor/src/app/unit-view/page-view/canvas/static-canvas-overlay.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts
index 19b988b475426f7c72f5bf459ff08c93f5f88b18..ac98fea9118898cbdb931c990667db052aff5a31 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/static-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { take } from 'rxjs/operators';
import { CdkDragEnd, CdkDragMove } from '@angular/cdk/drag-drop';
import { CanvasElementOverlay } from './canvas-element-overlay';
-import { UIElement } from '../../../../../../common/models/uI-element';
+import { UIElement } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-static-canvas-overlay',
diff --git a/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html
similarity index 100%
rename from projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html
rename to projects/editor/src/app/components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html
diff --git a/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts b/projects/editor/src/app/components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts
similarity index 79%
rename from projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts
index ce6cf970514c2e5adeb788d98999139cd80e26d0..c2ed4f84303b2873694584e9aec98e78b7e44b8d 100644
--- a/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
-import { UnitService } from '../../../unit.service';
-import { SelectionService } from '../../../selection.service';
-import { UIElementType } from '../../../../../../common/models/uI-element';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
+import { UIElementType } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-ui-element-toolbox',
diff --git a/projects/editor/src/app/unit-view/page-view/page-view.component.ts b/projects/editor/src/app/components/unit-view/page-view/page-view.component.ts
similarity index 83%
rename from projects/editor/src/app/unit-view/page-view/page-view.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/page-view.component.ts
index 74b8a394ef9e77ecf68d4215e01241f87a89d4c4..7b0b9ce9c2ac2ebc87a644ef4ba11714d725ba2e 100644
--- a/projects/editor/src/app/unit-view/page-view/page-view.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/page-view.component.ts
@@ -1,7 +1,7 @@
import {
Component, Input
} from '@angular/core';
-import { Page } from '../../../../../common/models/page';
+import { Page } from '../../../../../../common/models/page';
@Component({
selector: 'app-page-view',
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.css
similarity index 100%
rename from projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
rename to projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.css
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.html
similarity index 100%
rename from projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
rename to projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.html
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.ts
similarity index 89%
rename from projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.ts
index c7ed4680d658f253ee006a09744e07426e63f1eb..f26bda4548ab37420e3a3364f4d8b03cf23b4216 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-properties.component.ts
@@ -7,14 +7,14 @@ import { takeUntil } from 'rxjs/operators';
import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { TranslateService } from '@ngx-translate/core';
-import { UnitService } from '../../../unit.service';
-import { SelectionService } from '../../../selection.service';
-import { MessageService } from '../../../../../../common/message.service';
-import { FileService } from '../../../../../../common/file.service';
-import { UIElement } from '../../../../../../common/models/uI-element';
-import { LikertElementRow } from '../../../../../../common/models/compound-elements/likert-element-row';
-import { LikertElement } from '../../../../../../common/models/compound-elements/likert-element';
-import { LikertColumn, LikertRow } from '../../../../../../common/interfaces/UIElementInterfaces';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
+import { MessageService } from '../../../../../../../common/message.service';
+import { FileService } from '../../../../../../../common/file.service';
+import { UIElement } from '../../../../../../../common/models/uI-element';
+import { LikertElementRow } from '../../../../../../../common/models/compound-elements/likert-element-row';
+import { LikertElement } from '../../../../../../../common/models/compound-elements/likert-element';
+import { LikertColumn, LikertRow } from '../../../../../../../common/interfaces/UIElementInterfaces';
@Component({
selector: 'app-element-properties',
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
similarity index 97%
rename from projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
index 2e80f919d4c608c81435115141f9b118dd59fbed..a07f507917b3760c87801028cff30fe5ad981822 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
@@ -1,9 +1,9 @@
import {
Component, Input, Output, EventEmitter
} from '@angular/core';
-import { UnitService } from '../../../unit.service';
-import { SelectionService } from '../../../selection.service';
-import { UIElement } from '../../../../../../common/models/uI-element';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
+import { UIElement } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-element-sizing-properties',
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
similarity index 98%
rename from projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts
rename to projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
index aaff4480ca52b121ca97eaf7fb46432f30677e99..8448154ac085e88df3b3dea81f849d5c93fd96fb 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
@@ -1,7 +1,7 @@
import {
Component, EventEmitter, Input, Output
} from '@angular/core';
-import { UIElement } from '../../../../../../common/models/uI-element';
+import { UIElement } from '../../../../../../../common/models/uI-element';
@Component({
selector: 'app-element-style-properties',
diff --git a/projects/editor/src/app/unit-view/unit-view.component.html b/projects/editor/src/app/components/unit-view/unit-view.component.html
similarity index 100%
rename from projects/editor/src/app/unit-view/unit-view.component.html
rename to projects/editor/src/app/components/unit-view/unit-view.component.html
diff --git a/projects/editor/src/app/unit-view/unit-view.component.ts b/projects/editor/src/app/components/unit-view/unit-view.component.ts
similarity index 90%
rename from projects/editor/src/app/unit-view/unit-view.component.ts
rename to projects/editor/src/app/components/unit-view/unit-view.component.ts
index 680a1d3644333c8399e50b47cf17c2f87b9013b7..a65d7afcbb00f4df28515fa6301fbe0398236dbf 100644
--- a/projects/editor/src/app/unit-view/unit-view.component.ts
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.ts
@@ -1,12 +1,12 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
-import { UnitService } from '../unit.service';
-import { DialogService } from '../dialog.service';
-import { SelectionService } from '../selection.service';
-import { MessageService } from '../../../../common/message.service';
-import { Page } from '../../../../common/models/page';
-import { Unit } from '../../../../common/models/unit';
+import { UnitService } from '../../services/unit.service';
+import { DialogService } from '../../services/dialog.service';
+import { SelectionService } from '../../services/selection.service';
+import { MessageService } from '../../../../../common/message.service';
+import { Page } from '../../../../../common/models/page';
+import { Unit } from '../../../../../common/models/unit';
@Component({
selector: 'app-unit-view',
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
deleted file mode 100644
index c92fa5fb62883de9e5863b0a1bcb510574fc8eed..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/dialog.service.ts
+++ /dev/null
@@ -1,336 +0,0 @@
-// eslint-disable-next-line max-classes-per-file
-import { Component, Inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { PlayerElement, LikertColumn } from '../../../common/interfaces/UIElementInterfaces';
-import { FileService } from '../../../common/file.service';
-import { LikertElementRow } from '../../../common/models/compound-elements/likert-element-row';
-
-@Injectable({
- providedIn: 'root'
-})
-export class DialogService {
- constructor(private dialog: MatDialog) { }
-
- showConfirmDialog(text: string): Observable<boolean> {
- const dialogRef = this.dialog.open(ConfirmationDialog, {
- data: {
- text: text
- }
- });
- return dialogRef.afterClosed();
- }
-
- showTextEditDialog(text: string): Observable<string> {
- const dialogRef = this.dialog.open(TextEditDialog, {
- data: {
- text: text
- }
- });
- return dialogRef.afterClosed();
- }
-
- showMultilineTextEditDialog(text: string): Observable<string> {
- const dialogRef = this.dialog.open(MultilineTextEditDialog, {
- data: {
- text: text
- }
- });
- return dialogRef.afterClosed();
- }
-
- showRichTextEditDialog(text: string): Observable<string> {
- const dialogRef = this.dialog.open(RichTextEditDialog, {
- data: {
- text: text
- },
- autoFocus: false
- });
- return dialogRef.afterClosed();
- }
-
- showPlayerEditDialog(player: PlayerElement): Observable<PlayerElement> {
- const dialogRef = this.dialog.open(PlayerEditDialog, {
- data: {
- player: player
- },
- autoFocus: false
- });
- return dialogRef.afterClosed();
- }
-
- showLikertColumnEditDialog(column: LikertColumn): Observable<LikertColumn> {
- const dialogRef = this.dialog.open(LikertColumnEditDialog, {
- data: {
- column: column
- },
- autoFocus: false
- });
- return dialogRef.afterClosed();
- }
-
- showLikertRowEditDialog(row: LikertElementRow, columns: LikertColumn[]): Observable<LikertElementRow> {
- const dialogRef = this.dialog.open(LikertRowEditDialog, {
- data: {
- row: row,
- columns: columns
- },
- autoFocus: false
- });
- return dialogRef.afterClosed();
- }
-}
-
-@Component({
- selector: 'app-confirmation-dialog',
- template: `
- <mat-dialog-content>
- {{data.text}}
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="true">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class ConfirmationDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
-}
-
-@Component({
- selector: 'app-text-edit-dialog',
- template: `
- <mat-dialog-content>
- <mat-form-field>
- <mat-label>{{'text' | translate }}</mat-label>
- <input #inputElement matInput type="text" [value]="data.text">
- </mat-form-field>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="inputElement.value">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class TextEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
-}
-
-@Component({
- selector: 'app-multiline-text-edit-dialog',
- template: `
- <mat-dialog-content>
- <mat-form-field>
- <mat-label>{{'text' | translate }}</mat-label>
- <textarea #inputElement matInput type="text" [value]="data.text">
- </textarea>
- </mat-form-field>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="inputElement.value">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class MultilineTextEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
-}
-
-@Component({
- selector: 'app-rich-text-edit-dialog-tinymce',
- template: `
- <mat-dialog-content>
- <app-rich-text-editor [(text)]="data.text"></app-rich-text-editor>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="data.text">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class RichTextEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
-}
-
-@Component({
- selector: 'app-player-edit-dialog',
- template: `
- <mat-dialog-content fxLayout="row">
- <mat-tab-group>
- <mat-tab label="{{ 'player.appearance' | translate }}">
- <div fxLayout="column">
- <mat-checkbox [checked]="newPlayerConfig.startControl || data.player.startControl"
- (change)="newPlayerConfig.startControl = $event.checked">
- {{ 'player.startControl' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.pauseControl || data.player.pauseControl"
- (change)="newPlayerConfig.pauseControl = $event.checked">
- {{ 'player.pauseControl' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.progressBar || data.player.progressBar"
- (change)="newPlayerConfig.progressBar = $event.checked">
- {{ 'player.progressBar' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.interactiveProgressbar || data.player.interactiveProgressbar"
- (change)="newPlayerConfig.interactiveProgressbar = $event.checked">
- {{ 'player.interactiveProgressbar' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.volumeControl || data.player.volumeControl"
- (change)="newPlayerConfig.volumeControl = $event.checked">
- {{ 'player.volumeControl' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.showRestTime || data.player.showRestTime"
- (change)="newPlayerConfig.showRestTime = $event.checked">
- {{ 'player.showRestTime' | translate }}
- </mat-checkbox>
- <mat-form-field appearance="fill">
- <mat-label>{{ 'player.hintLabel' | translate }}</mat-label>
- <input matInput type="text" [value]="newPlayerConfig.hintLabel || data.player.hintLabel"
- (input)="newPlayerConfig.hintLabel = $any($event.target).value">
- </mat-form-field>
- <mat-form-field *ngIf="newPlayerConfig.hintLabel || data.player.hintLabel"
- appearance="fill">
- <mat-label>{{ 'player.hintLabelDelay' | translate }}</mat-label>
- <input matInput type="number" step="1000" min="0"
- [ngModel]="newPlayerConfig.hintLabelDelay || data.player.hintLabelDelay"
- (ngModelChange)="newPlayerConfig.hintLabelDelay = $event">
- </mat-form-field>
- </div>
- </mat-tab>
- <mat-tab label="{{ 'player.behaviour' | translate }}">
- <div fxLayout="column">
- <mat-checkbox [checked]="newPlayerConfig.autostart || data.player.autostart"
- (change)="newPlayerConfig.autostart = $event.checked">
- {{ 'player.autoStart' | translate }}
- </mat-checkbox>
- <mat-form-field *ngIf="newPlayerConfig.autostart || data.player.autostart" appearance="fill">
- <mat-label>{{ 'player.autoStartDelay' | translate }}</mat-label>
- <input matInput type="number" step="1000"
- [value]="newPlayerConfig.autostartDelay || data.player.autostartDelay"
- (input)="newPlayerConfig.autostartDelay = $any($event.target).value">
- </mat-form-field>
- <mat-checkbox [checked]="newPlayerConfig.loop || data.player.loop"
- (change)="newPlayerConfig.loop = $event.checked">
- {{ 'player.loop' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.uninterruptible || data.player.uninterruptible"
- (change)="newPlayerConfig.uninterruptible = $event.checked">
- {{ 'player.uninterruptible' | translate }}
- </mat-checkbox>
- <mat-checkbox [checked]="newPlayerConfig.hideOtherPages || data.player.hideOtherPages"
- (change)="newPlayerConfig.hideOtherPages = $event.checked">
- {{ 'player.hideOtherPages' | translate }}
- </mat-checkbox>
- <mat-form-field appearance="fill">
- <mat-label>{{ 'player.activeAfterID' | translate }}</mat-label>
- <input matInput type="text" [value]="newPlayerConfig.activeAfterID || data.player.activeAfterID"
- (input)="newPlayerConfig.activeAfterID = $any($event.target).value">
- </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>{{ 'player.minRuns' | translate }}</mat-label>
- <input matInput type="number" min="0"
- [ngModel]="newPlayerConfig.minRuns || data.player.minRuns"
- (ngModelChange)="newPlayerConfig.minRuns = $event">
- </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>{{ 'player.maxRuns' | translate }}</mat-label>
- <input matInput type="number" min="0"
- [ngModel]="newPlayerConfig.maxRuns || data.player.maxRuns"
- (ngModelChange)="newPlayerConfig.maxRuns = $event">
- </mat-form-field>
- <mat-checkbox [checked]="newPlayerConfig.showRestRuns || data.player.showRestRuns"
- (change)="newPlayerConfig.showRestRuns = $event.checked">
- {{ 'player.showRestRuns' | translate }}
- </mat-checkbox>
- </div>
- </mat-tab>
- </mat-tab-group>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="newPlayerConfig">{{'save' | translate }}</button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class PlayerEditDialog {
- newPlayerConfig: PlayerElement = {} as PlayerElement;
- constructor(@Inject(MAT_DIALOG_DATA)public data: { player: PlayerElement }) {
- }
-}
-
-@Component({
- selector: 'app-likert-column-edit-dialog',
- template: `
- <mat-dialog-content fxLayout="column">
- <mat-form-field>
- <mat-label>{{'text' | translate }}</mat-label>
- <input #textInput matInput type="text" [value]="data.column.text">
- </mat-form-field>
- <input #imageUpload type="file" hidden (click)="loadImage()">
- <button mat-raised-button (click)="imageUpload.click()">{{ 'loadImage' | translate }}</button>
- <button mat-raised-button (click)="data.column.imgSrc = null">{{ 'removeImage' | translate }}</button>
- <img [src]="data.column.imgSrc"
- [style.object-fit]="'scale-down'"
- [width]="200">
- <mat-form-field appearance="fill">
- <mat-label>{{'position' | translate }}</mat-label>
- <mat-select [value]="data.column.position"
- (selectionChange)="this.data.column.position = $event.value">
- <mat-option *ngFor="let option of ['above', 'below']"
- [value]="option">
- {{ option | translate }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="{
- text: textInput.value,
- imgSrc: data.column.imgSrc,
- position: data.column.position }">
- {{'save' | translate }}
- </button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class LikertColumnEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { column: LikertColumn }) { }
-
- async loadImage(): Promise<void> {
- this.data.column.imgSrc = await FileService.loadImage();
- }
-}
-
-@Component({
- selector: 'app-likert-row-edit-dialog',
- template: `
- <mat-dialog-content fxLayout="column">
- <mat-form-field>
- <mat-label>{{'text' | translate }}</mat-label>
- <input #textField matInput type="text" [value]="data.row.text">
- </mat-form-field>
- <mat-form-field>
- <mat-label>{{'id' | translate }}</mat-label>
- <input #idField matInput type="text" [value]="data.row.id">
- </mat-form-field>
- {{'preset' | translate }}
- <mat-select #valueField [value]="data.row.value">
- <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
- <mat-option *ngFor="let column of data.columns; let i = index" [value]="i">
- {{column.text}}
- </mat-option>
- </mat-select>
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button
- [mat-dialog-close]="{ text: textField.value, id: idField.value, value: valueField.value }">
- {{'save' | translate }}
- </button>
- <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
- </mat-dialog-actions>
- `
-})
-export class LikertRowEditDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertElementRow, columns: LikertColumn[] }) { }
-}
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b633a8b9f4e4a80b7b7eab0f6f0278c86b6ea4e
--- /dev/null
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { PlayerElement, LikertColumn } from '../../../../common/interfaces/UIElementInterfaces';
+import { LikertElementRow } from '../../../../common/models/compound-elements/likert-element-row';
+import { ConfirmationDialogComponent } from '../components/dialogs/confirmation-dialog.component';
+import { TextEditDialogComponent } from '../components/dialogs/text-edit-dialog.component';
+import { TextEditMultilineDialogComponent } from '../components/dialogs/text-edit-multiline-dialog.component';
+import { RichTextEditDialogComponent } from '../components/dialogs/rich-text-edit-dialog.component';
+import { PlayerEditDialogComponent } from '../components/dialogs/player-edit-dialog.component';
+import { LikertColumnEditDialogComponent } from '../components/dialogs/likert-column-edit-dialog.component';
+import { LikertRowEditDialogComponent } from '../components/dialogs/likert-row-edit-dialog.component';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DialogService {
+ constructor(private dialog: MatDialog) { }
+
+ showConfirmDialog(text: string): Observable<boolean> {
+ const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+ data: {
+ text: text
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showTextEditDialog(text: string): Observable<string> {
+ const dialogRef = this.dialog.open(TextEditDialogComponent, {
+ data: {
+ text: text
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showMultilineTextEditDialog(text: string): Observable<string> {
+ const dialogRef = this.dialog.open(TextEditMultilineDialogComponent, {
+ data: {
+ text: text
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showRichTextEditDialog(text: string): Observable<string> {
+ const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
+ data: {
+ text: text
+ },
+ autoFocus: false
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showPlayerEditDialog(player: PlayerElement): Observable<PlayerElement> {
+ const dialogRef = this.dialog.open(PlayerEditDialogComponent, {
+ data: {
+ player: player
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showLikertColumnEditDialog(column: LikertColumn): Observable<LikertColumn> {
+ const dialogRef = this.dialog.open(LikertColumnEditDialogComponent, {
+ data: {
+ column: column
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+
+ showLikertRowEditDialog(row: LikertElementRow, columns: LikertColumn[]): Observable<LikertElementRow> {
+ const dialogRef = this.dialog.open(LikertRowEditDialogComponent, {
+ data: {
+ row: row,
+ columns: columns
+ }
+ });
+ return dialogRef.afterClosed();
+ }
+}
diff --git a/projects/editor/src/app/selection.service.ts b/projects/editor/src/app/services/selection.service.ts
similarity index 94%
rename from projects/editor/src/app/selection.service.ts
rename to projects/editor/src/app/services/selection.service.ts
index 1f6ae279b02c1c15c6794000c9b23c4089d88fd7..2b0d6954575e4494c94e1f31f4a5689c7aa7565b 100644
--- a/projects/editor/src/app/selection.service.ts
+++ b/projects/editor/src/app/services/selection.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
-import { UIElement } from '../../../common/models/uI-element';
+import { UIElement } from '../../../../common/models/uI-element';
@Injectable({
providedIn: 'root'
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
similarity index 94%
rename from projects/editor/src/app/unit.service.ts
rename to projects/editor/src/app/services/unit.service.ts
index 3c846c7839da8691448bc9783c3ed9f52cb3b0a0..8c5bbccef52b47049b0933362bee3b84b01dc888 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -2,21 +2,21 @@ import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
-import { FileService } from '../../../common/file.service';
-import { MessageService } from '../../../common/message.service';
-import { IdService } from '../../../common/id.service';
+import { FileService } from '../../../../common/file.service';
+import { MessageService } from '../../../../common/message.service';
+import { IdService } from '../../../../common/id.service';
import { DialogService } from './dialog.service';
import { VeronaAPIService } from './verona-api.service';
-import { Unit } from '../../../common/models/unit';
-import { Page } from '../../../common/models/page';
-import { Section } from '../../../common/models/section';
-import { InputElement, UIElement, UIElementType } from '../../../common/models/uI-element';
-import { TextElement } from '../../../common/models/text-element';
-import { LikertElement } from '../../../common/models/compound-elements/likert-element';
-import { LikertElementRow } from '../../../common/models/compound-elements/likert-element-row';
-import { LikertColumn, LikertRow, PlayerElement } from '../../../common/interfaces/UIElementInterfaces';
+import { Unit } from '../../../../common/models/unit';
+import { Page } from '../../../../common/models/page';
+import { Section } from '../../../../common/models/section';
+import { InputElement, UIElement, UIElementType } from '../../../../common/models/uI-element';
+import { TextElement } from '../../../../common/models/text-element';
+import { LikertElement } from '../../../../common/models/compound-elements/likert-element';
+import { LikertElementRow } from '../../../../common/models/compound-elements/likert-element-row';
+import { LikertColumn, LikertRow, PlayerElement } from '../../../../common/interfaces/UIElementInterfaces';
import { SelectionService } from './selection.service';
-import * as ElementFactory from '../../../common/util/element.factory';
+import * as ElementFactory from '../../../../common/util/element.factory';
@Injectable({
providedIn: 'root'
diff --git a/projects/editor/src/app/verona-api.service.ts b/projects/editor/src/app/services/verona-api.service.ts
similarity index 100%
rename from projects/editor/src/app/verona-api.service.ts
rename to projects/editor/src/app/services/verona-api.service.ts