MessageService + MessageComponent

src/main/angular/src/app/editor/breadboard/breadboard.component.less

@@ -78,4 +78,3 @@
   }
 
 }
-

src/main/angular/src/app/editor/breadboard/breadboard.component.ts

@@ -6,6 +6,7 @@ import {Light} from '../parts/light/Light';
 import {Junction} from '../junction/Junction';
 import {Wire} from '../wire/Wire';
 import {Point} from '../Point';
+import {MessageService} from '../message/message.service';
 
 @Component({
   selector: 'app-board',
@@ -42,6 +43,12 @@ export class BreadboardComponent {
 
   protected wireEndDuplicate: boolean = false;
 
+  constructor(
+    protected readonly messageService: MessageService,
+  ) {
+    //
+  }
+
   asBattery(part: Part): Battery {
     return part as Battery;
   }
@@ -109,7 +116,7 @@ export class BreadboardComponent {
       return;
     }
     if (this.wireEndDuplicate) {
-      console.log("Not connecting duplicate wire.");
+      this.messageService.warn("Diese Verbindung existiert bereits.");
       return;
     }
     const wire = new Wire(start, end);

src/main/angular/src/app/editor/editor.component.html

@@ -1 +1,3 @@
 <app-board></app-board>
+
+<app-messages></app-messages>

src/main/angular/src/app/editor/editor.component.ts

@@ -1,10 +1,12 @@
 import {Component} from '@angular/core';
 import {BreadboardComponent} from './breadboard/breadboard.component';
+import {MessagesComponent} from './message/messages/messages.component';
 
 @Component({
   selector: 'app-editor',
   imports: [
-    BreadboardComponent
+    BreadboardComponent,
+    MessagesComponent
   ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.less'

src/main/angular/src/app/editor/message/Message.ts

@@ -0,0 +1,12 @@
+import {MessageType} from './MessageType';
+
+export class Message {
+
+  constructor(
+    readonly type: MessageType,
+    readonly text: string,
+  ) {
+    //
+  }
+
+}

src/main/angular/src/app/editor/message/MessageType.ts

@@ -0,0 +1,5 @@
+export enum MessageType {
+  Error = "Error",
+  Warn = "Warn",
+  Info = "Info",
+}

src/main/angular/src/app/editor/message/message.service.ts

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+import {Message} from './Message';
+import {MessageType} from './MessageType';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+
+  messages: Message[] = [];
+
+  info(text: string, seconds: number = 10) {
+    this.add(MessageType.Info, text, seconds);
+  }
+
+  warn(text: string, seconds: number = 10) {
+    this.add(MessageType.Warn, text, seconds);
+  }
+
+  error(text: string, seconds: number = 10) {
+    this.add(MessageType.Error, text, seconds);
+  }
+
+  add(type: MessageType, text: string, seconds: number = 10) {
+    const message = new Message(type, text);
+    this.messages.push(message);
+    setTimeout(() => this.messages.splice(this.messages.indexOf(message), 1), seconds * 1000);
+  }
+
+}

src/main/angular/src/app/editor/message/messages/messages.component.html

@@ -0,0 +1,5 @@
+<div class="messages">
+  <div *ngFor="let message of messageService.messages" class="message message{{message.type}}">
+    {{ message.text }}
+  </div>
+</div>

src/main/angular/src/app/editor/message/messages/messages.component.less

@@ -0,0 +1,25 @@
+.messages {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  .message {
+    border-top: 1px solid gray;
+    background-color: lightgray;
+    padding: 0.5em;
+  }
+
+  .messageError {
+    background-color: #ffcfcf;
+  }
+
+  .messageWarn {
+    background-color: lightyellow;
+  }
+
+  .messageInfo {
+    background-color: #d2ffd2;
+  }
+
+}

src/main/angular/src/app/editor/message/messages/messages.component.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {NgForOf} from '@angular/common';
+import {MessageService} from '../message.service';
+
+@Component({
+  selector: 'app-messages',
+  imports: [
+    NgForOf
+  ],
+  templateUrl: './messages.component.html',
+  styleUrl: './messages.component.less'
+})
+export class MessagesComponent {
+
+  constructor(
+    readonly messageService: MessageService,
+  ) {
+    //
+  }
+
+}