update

intersystems-dach · Oct 5, 2023 · 0c69696 · 0c69696
1 parent a3e523a
commit 0c69696
Show file tree

Hide file tree

Showing 26 changed files with 452 additions and 71 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-notification></app-notification>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -56,6 +56,7 @@ import { TranslateSpecComponent } from './user-input/translate-spec/translate-sp
 import { ConnectViaUrlComponent } from './connect-via-url/connect-via-url.component';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { AddFileComponent } from './user-input/add-file/add-file.component';
+import { NotificationComponent } from './notification/notification.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -106,6 +107,7 @@ import { AddFileComponent } from './user-input/add-file/add-file.component';
     TranslateSpecComponent,
     ConnectViaUrlComponent,
     AddFileComponent,
+    NotificationComponent,
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/chapter-selection/chapter-selection.component.scss b/src/app/chapter-selection/chapter-selection.component.scss
@@ -95,6 +95,7 @@
         flex-direction: column;
         .chapterButton {
           width: 400px;
+          border-radius: 0px;
         }
         &:hover {
           .chapterButton {
@@ -128,4 +129,4 @@
   .edit {
     padding-right: 0px;
   }
-};
+}
diff --git a/src/app/chapter-selection/chapter-selection.component.ts b/src/app/chapter-selection/chapter-selection.component.ts
@@ -8,6 +8,7 @@ import {
 import { Chapter, UserManger } from 'src/utils/classes';
 import { ColorSchemeService } from '../services/color-scheme.service';
 import { IrisinterfaceService } from '../services/irisinterface.service';
+import { NotificationComponent } from '../notification/notification.component';
 @Component({
   selector: 'app-chapter-selection',
   templateUrl: './chapter-selection.component.html',
@@ -52,13 +53,26 @@ export class ChapterSelectionComponent {
       next: (data) => {
         if (data.status) {
           this.chapters.splice(this.chapters.indexOf(chapter), 1);
-          alert('Chapter deleted');
+          NotificationComponent.showNotification(
+            'Chapter deleted',
+            'The chapter was deleted successfully!'
+          );
         } else {
-          alert('Chapter could not be deleted!');
+          NotificationComponent.showNotification(
+            'Chapter could not be deleted',
+            'The chapter could not be deleted!',
+            5000,
+            true
+          );
         }
       },
       error: (error) => {
-        alert('Chapter could not be deleted: ' + error.message + '!');
+        NotificationComponent.showNotification(
+          'ERROR',
+          'Chapter could not be deleted: ' + error.message + '!',
+          -1,
+          true
+        );
       },
     });
   }

diff --git a/src/app/edit/edit-chapter/edit-chapter.component.ts b/src/app/edit/edit-chapter/edit-chapter.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ChaptermanagerService } from 'src/app/services/chaptermanager.service';
 import { IrisinterfaceService } from 'src/app/services/irisinterface.service';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { NotificationComponent } from 'src/app/notification/notification.component';
 
 @Component({
   selector: 'app-edit-chapter',
@@ -56,16 +57,16 @@ export class EditChapterComponent {
       }
       let pageLocalStorage = this.localStorageService.getPageForChapter(
         this.chapterName
-        );
-        if (pageLocalStorage < 0) {
-          pageLocalStorage = 0;
-        }
-        if (pageLocalStorage > this.chapter.Pages.length - 1) {
-          pageLocalStorage = this.chapter.Pages.length - 1;
-        }
-        this.currentPage = pageLocalStorage;
-        this.pageInput = this.currentPage + 1;
-      });
+      );
+      if (pageLocalStorage < 0) {
+        pageLocalStorage = 0;
+      }
+      if (pageLocalStorage > this.chapter.Pages.length - 1) {
+        pageLocalStorage = this.chapter.Pages.length - 1;
+      }
+      this.currentPage = pageLocalStorage;
+      this.pageInput = this.currentPage + 1;
+    });
   }
 
   onPageInput() {
@@ -144,15 +145,29 @@ export class EditChapterComponent {
       next: (data) => {
         if (data.status) {
           if (alertSaved) {
-            alert('Chapter saved!');
+            NotificationComponent.showNotification(
+              'Chapter saved',
+              'The chapter was saved successfully!',
+              2000
+            );
           }
           this.changes = false;
         } else {
-          alert('Error saving chapter!');
+          NotificationComponent.showNotification(
+            'Chapter could not be saved',
+            'The chapter could not be saved!',
+            5000,
+            true
+          );
         }
       },
       error: (err: any) => {
-        alert('Error saving chapter: ' + err.message);
+        NotificationComponent.showNotification(
+          'ERROR',
+          'Chapter could not be saved: ' + err.message + '!',
+          -1,
+          true
+        );
       },
     });
   }
@@ -187,7 +202,12 @@ export class EditChapterComponent {
             this.chapterPassword = data.password;
           },
           error: (err: any) => {
-            alert('Error getting chapter password: ' + err.message);
+            NotificationComponent.showNotification(
+              'ERROR',
+              'Error getting chapter password: ' + err.message + '!',
+              -1,
+              true
+            );
             this.chapterPassword = this.chapter.Password;
           },
         });

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { Chapter, UserManger } from 'src/utils/classes';
 import { ColorSchemeService } from '../services/color-scheme.service';
 import { LocalStorageService } from '../services/local-storage.service';
+import { NotificationComponent } from '../notification/notification.component';
 
 @Component({
   selector: 'app-header',

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,7 +1,6 @@
 <app-header class="sticky"></app-header>
 
 <div class="container" *ngIf="isServerOnline">
-
   <app-chapter-selection
     [chapters]="getChapters()"
     (chapterSelected)="selectChapter($event)"
@@ -11,7 +10,7 @@
 </div>
 
 <div class="serverStatus">
-  <p (click)="goToServerSettings()">{{getInstancename()}}</p>
+  <p (click)="goToServerSettings()">{{ getInstancename() }}</p>
   <div
     class="statusIcon"
     [style.background]="isServerOnline ? 'green' : 'red'"
@@ -21,7 +20,6 @@
 
 <div class="version">
   <p (click)="goToWhatsNew()">
-    <i>{{ (getLatestVersion() == 'unknown' ? '':"v" + getLatestVersion()) }}</i>
+    <i>{{ getLatestVersion() == "unknown" ? "" : "v" + getLatestVersion() }}</i>
   </p>
 </div>
-
diff --git a/src/app/markdown-content/markdown-content.component.scss b/src/app/markdown-content/markdown-content.component.scss
@@ -3,7 +3,7 @@
   margin: 20px auto;
   border: 1px solid #ccc;
   border-radius: 10px;
-  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
   padding: 20px;
   font-size: 20px;
   color: var(--text-color);
@@ -21,6 +21,7 @@
   transition: 0.3s;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
   margin-bottom: 10px;
+  margin-left: 20px;
   &:hover {
     background: var(--secondary-color);
     transform: scale(1.1);
@@ -33,4 +34,4 @@
       transform: scale(1);
     }
   }
-};
+}
diff --git a/src/app/markdown-content/markdown-content.component.ts b/src/app/markdown-content/markdown-content.component.ts
@@ -3,6 +3,7 @@ import { MarkdownService } from 'ngx-markdown';
 import { HttpClient } from '@angular/common/http';
 import { LocalStorageService } from '../services/local-storage.service';
 import { IrisinterfaceService } from '../services/irisinterface.service';
+import { NotificationComponent } from '../notification/notification.component';
 
 @Component({
   selector: 'app-markdown-content',
@@ -195,12 +196,9 @@ z++
     componentRef.instance.data = adItem.data;
   } */
 
-  replaceHostAndPort(s: string): string{
+  replaceHostAndPort(s: string): string {
     s = s.replace(/\$\$HOST\$\$/g, IrisinterfaceService.host);
-    s = s.replace(
-      /\$\$PORT\$\$/g,
-      '' + IrisinterfaceService.port
-    );
+    s = s.replace(/\$\$PORT\$\$/g, '' + IrisinterfaceService.port);
     return s;
   }
 
@@ -218,7 +216,12 @@ z++
         link.click();
       },
       error: (err) => {
-        alert('Error getting file:' + err.message);
+        NotificationComponent.showNotification(
+          'ERROR',
+          'Error getting file: ' + err.message + '!',
+          -1,
+          true
+        );
       },
     });
   }

diff --git a/src/app/notification/notification.component.html b/src/app/notification/notification.component.html
@@ -0,0 +1,7 @@
+<div [class]="'box' + (getClosing() ? ' slideOut' : '')" *ngIf="getVisible()">
+  <h2 class="heading" [style.color]="getIsError() ? 'red' : ''">
+    {{ getHeading() }}
+  </h2>
+  <p>{{ getMessage() }}</p>
+  <button class="closeButton" (click)="close()">X</button>
+</div>
diff --git a/src/app/notification/notification.component.scss b/src/app/notification/notification.component.scss
@@ -0,0 +1,81 @@
+.box {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 30px;
+  z-index: 9999;
+  border: 1px solid var(--primary-color);
+  background-color: var(--header-color);
+  border-radius: 10px;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
+  width: 300px;
+  padding: 10px;
+  animation: slideInFromRight 0.7s ease-in-out;
+  color: var(--text-color);
+  .heading {
+    margin-top: 0px;
+    width: 250px;
+  }
+  .closeButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: var(--inverted-text-color);
+    border: 1px solid var(--primary-color);
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+      scale: 1.1;
+    }
+  }
+}
+
+.slideOut {
+  animation: slideOutToButton 0.51s ease-in-out;
+}
+
+@media screen and (max-width: 600px) {
+  .box {
+    width: 100%;
+    left: 0px;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    animation: none;
+    border-top: 1px solid var(--primary-color);
+    .closeButton {
+      right: 30px;
+    }
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(150%);
+  }
+  80% {
+    transform: translateX(-10%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideOutToButton {
+  0% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateY(150%);
+  }
+}
diff --git a/src/app/notification/notification.component.spec.ts b/src/app/notification/notification.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotificationComponent]
+    });
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});