123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <div class="entries-list">
- <div class="title t-0">{{ "notes.sessions" | translate }}</div>
- <divider appearance="gold-2" style="padding: 0 1rem"></divider>
- <!-- Add Button or temporary unsaved new entry -->
- @if (isNewEntry) {
- <div class="entry active">
- <div class="entry-title">
- @if (currentEntry.title !== "") {
- {{ currentEntry.title }}
- } @else {
- {{ "notes.noTitle" | translate }}
- }
- </div>
- <div class="entry-date">
- {{ currentEntry.created | date: "shortDate" : "" : "de" }}
- </div>
- <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
- </div>
- } @else {
- <div class="entry add-button" (click)="addEntry()">
- <img src="assets/icons/UIIcons/add.svg" />
- </div>
- }
- <!-- List of entries -->
- @for (entry of entries; let index = $index; track entry) {
- <div
- class="entry-wrapper"
- [ngClass]="{
- active: currentIndex === index,
- 'edit-mode': isInEditMode
- }"
- >
- <div (click)="selectEntry(index)" class="entry">
- <div class="entry-title">
- @if (entries[index].title !== "") {
- <!-- {{ entries[index].title }} -->
- @if (isInEditMode && index === currentIndex) {
- {{ currentEntry.title }}
- } @else {
- {{ entries[index].title }}
- }
- } @else {
- {{ "notes.noTitle" | translate }}
- }
- </div>
- <div class="entry-date">
- {{ entries[index].created | date: "shortDate" : "" : "de" }}
- </div>
- @if (isInEditMode && currentIndex === index) {
- <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
- }
- </div>
- <div class="control-button-wrapper">
- <icon-button [icon]="'edit-large'" (click)="editEntry()"></icon-button>
- <icon-button [icon]="'delete'" (click)="deleteEntry()"></icon-button>
- </div>
- </div>
- }
- </div>
- <!-- Entry container, shows the currentEntry -->
- @if (currentIndex !== -1 || isNewEntry) {
- <div class="entry-container">
- @if (isInEditMode) {
- <!-- Title -->
- <mat-form-field class="title-write" appearance="outline">
- <input
- matInput
- name="name"
- placeholder="Titel des Eintrags"
- [(ngModel)]="currentEntry.title"
- />
- </mat-form-field>
- <!-- Datepicker -->
- <mat-form-field class="date-write" appearance="outline">
- <input
- matInput
- [matDatepicker]="picker"
- placeholder="TT.MM.JJJJ"
- [(ngModel)]="currentEntry.created"
- />
- <mat-datepicker-toggle
- matIconSuffix
- [for]="picker"
- ></mat-datepicker-toggle>
- <mat-datepicker #picker></mat-datepicker>
- </mat-form-field>
- <div class="NgxEditor__Wrapper">
- <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
- </ngx-editor-menu>
- <ngx-editor
- [editor]="editor"
- [placeholder]="'notes.placeholder' | translate"
- [(ngModel)]="currentEntry.content"
- ></ngx-editor>
- </div>
- } @else {
- <div class="read-container">
- <div class="title-row">
- <div class="title-read">{{ currentEntry.title }}</div>
- <div class="date-read">
- {{ currentEntry.created | date: "longDate" : "" : "de" }}
- </div>
- </div>
- <divider appearance="gold-2"></divider>
- <div class="content-read" [innerHTML]="tooltipifiedEntry.content"></div>
- </div>
- }
- <div class="button-row">
- @if (isInEditMode) {
- <ui-button width="w16" (click)="saveEntry()">{{
- "notes.save" | translate
- }}</ui-button>
- <ui-button width="w16" (click)="discardEntry()">{{
- "notes.discard" | translate
- }}</ui-button>
- }
- </div>
- </div>
- } @else {
- <div
- style="
- margin: 28rem auto;
- text-align: center;
- font-size: 1.5rem;
- font-weight: 600;
- padding-left: 15rem;
- "
- >
- {{ "notes.empty" | translate }}
- </div>
- }
- <ng-template #tooltip
- ><div class="tooltip-content" [innerHTML]="tooltipText"></div
- ></ng-template>
- <div #creationAnchor></div>
|