From 4bf897e85babc82bf63c073160330553318d9f40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Mon, 5 Feb 2024 17:59:20 +0100
Subject: [PATCH] Visualize Save/Unsaved Status in Tabs (Editor)

---
 src/app/editor/editor.component.html                |  6 +++---
 src/app/editor/editor.component.scss                | 11 +++++++++++
 .../model-component-editor.component.ts             |  2 ++
 .../script-account-editor.component.ts              |  2 ++
 src/app/game-model/ModelComponent.ts                |  4 +++-
 src/app/game-model/SaveComponent.ts                 | 13 +++++++++++++
 src/app/game-model/scriptAccounts/ScriptAccount.ts  |  4 ++++
 7 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/app/game-model/SaveComponent.ts

diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index 1c9a6a5..ef4276b 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -1,9 +1,9 @@
 <mat-tab-group>
   <mat-tab *ngFor="let modelComponent of gameModelComponents">
     <ng-template mat-tab-label>
-      <mat-icon class="example-tab-icon">inventory_2</mat-icon>
-      <span>{{modelComponent.componentName}}</span>
-      <button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
+      <mat-icon class="example-tab-icon unsaved" [ngClass]="modelComponent.unsaved? 'unsaved':'saved'">inventory_2</mat-icon>
+      <span [ngClass]="modelComponent.unsaved? 'unsaved':'saved'">{{modelComponent.componentName}}</span>
+      <button class="content-label close-btn" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
     </ng-template>
     <app-model-component-editor [modelComponent]="modelComponent"></app-model-component-editor>
     <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss
index e69de29..26818c0 100644
--- a/src/app/editor/editor.component.scss
+++ b/src/app/editor/editor.component.scss
@@ -0,0 +1,11 @@
+.unsaved {
+  color: red;
+}
+
+.saved {
+  color: #3c95f8;
+}
+
+.close-btn {
+  color: white
+}
diff --git a/src/app/editor/model-component-editor/model-component-editor.component.ts b/src/app/editor/model-component-editor/model-component-editor.component.ts
index 89ab57f..c3a4e67 100644
--- a/src/app/editor/model-component-editor/model-component-editor.component.ts
+++ b/src/app/editor/model-component-editor/model-component-editor.component.ts
@@ -20,10 +20,12 @@ export class ModelComponentEditorComponent implements OnInit{
 
   onUpdateName() {
     this.modelComponent!.componentName = this.nameCtrl.value;
+    this.modelComponent!.onModifyContent();
   }
 
   onUpdateDescription() {
     this.modelComponent!.componentDescription = this.descriptionCtrl.value;
+    this.modelComponent!.onModifyContent();
   }
 
   protected readonly name = name;
diff --git a/src/app/editor/script-account-editor/script-account-editor.component.ts b/src/app/editor/script-account-editor/script-account-editor.component.ts
index 5e0bf15..bdf6bc2 100644
--- a/src/app/editor/script-account-editor/script-account-editor.component.ts
+++ b/src/app/editor/script-account-editor/script-account-editor.component.ts
@@ -39,9 +39,11 @@ export class ScriptAccountEditorComponent implements OnInit{
 
   onUpdateMinValue() {
     this.scriptAccount!.minValue = Number(this.minCtrl.value);
+    this.scriptAccount!.onModifyContent();
   }
 
   onUpdateMaxValue() {
     this.scriptAccount!.maxValue = Number(this.maxCtrl.value);
+    this.scriptAccount!.onModifyContent();
   }
 }
diff --git a/src/app/game-model/ModelComponent.ts b/src/app/game-model/ModelComponent.ts
index f1eec26..0020292 100644
--- a/src/app/game-model/ModelComponent.ts
+++ b/src/app/game-model/ModelComponent.ts
@@ -1,10 +1,12 @@
 import {ModelComponentType} from "./ModelComponentType";
+import {SaveComponent} from "./SaveComponent";
 
-export abstract class ModelComponent {
+export abstract class ModelComponent extends SaveComponent{
   componentName: string
   componentDescription: string
   type: ModelComponentType
   constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
+    super();
     this.componentName = componentName;
     this.componentDescription = componentDescription;
     this.type = type;
diff --git a/src/app/game-model/SaveComponent.ts b/src/app/game-model/SaveComponent.ts
new file mode 100644
index 0000000..473f0c5
--- /dev/null
+++ b/src/app/game-model/SaveComponent.ts
@@ -0,0 +1,13 @@
+export abstract class SaveComponent {
+  unsaved: boolean = false;
+
+  onModifyContent() {
+    this.unsaved = true;
+  }
+
+  onSaveContent() {
+    this.unsaved = false;
+  }
+
+  abstract save(): void;
+}
diff --git a/src/app/game-model/scriptAccounts/ScriptAccount.ts b/src/app/game-model/scriptAccounts/ScriptAccount.ts
index 6de4790..f47f3c7 100644
--- a/src/app/game-model/scriptAccounts/ScriptAccount.ts
+++ b/src/app/game-model/scriptAccounts/ScriptAccount.ts
@@ -7,4 +7,8 @@ export class ScriptAccount extends ModelComponent{
   constructor(componentName: string, componentDescription: string) {
     super(componentName, componentDescription, ModelComponentType.SCRIPTACCOUNT);
   }
+
+  save(): void {
+  }
+
 }