From 81fb0df56e425a6a01ab01cdf252c87b6a9c80e8 Mon Sep 17 00:00:00 2001
From: Damien Menanteau <damien.menanteau@gmail.com>
Date: Tue, 10 Sep 2024 09:28:16 +0200
Subject: [PATCH] [#674] Include variant state diagram image in webapp session
 info page

---
 .../tcr-session-info.component.css            | 22 ++++-
 .../tcr-session-info.component.html           | 97 ++++++++++---------
 .../tcr-session-info.component.ts             |  5 +-
 webapp/src/assets/.gitkeep                    |  0
 4 files changed, 73 insertions(+), 51 deletions(-)
 delete mode 100644 webapp/src/assets/.gitkeep

diff --git a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.css b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.css
index 9d525209..86bf7a70 100644
--- a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.css
+++ b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.css
@@ -26,6 +26,12 @@ section {
   background-color: #f1f4fa;
 }
 
+.statechart {
+  vertical-align: center;
+  width: auto;
+  height: auto;
+}
+
 .wrap {
   display: flex;
   background: white;
@@ -36,7 +42,7 @@ section {
 }
 
 .ico-wrap {
-  margin: auto;
+  margin: 10px;
 }
 
 .mbr-iconfont {
@@ -47,7 +53,7 @@ section {
 }
 
 .vcenter {
-  margin: auto;
+  margin: 10px;
 }
 
 .mbr-section-title3 {
@@ -78,3 +84,15 @@ p {
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 1rem;
 }
+
+.table-header {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: lighter;
+  font-size: 1rem;
+}
+
+.table-value {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
diff --git a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.html b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.html
index 3735d13c..59313173 100644
--- a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.html
+++ b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.html
@@ -1,85 +1,88 @@
 <section>
+
   <div class="container" *ngIf="sessionInfo">
     <div class="row mb-3 mbr-justify-content-center">
       <h1 class="mbr-fonts-style mbr-bold mbr-section-title1 display-4">{{ title }}</h1>
     </div>
 
     <div class="row mbr-justify-content-center">
-
-      <div class="col-lg-6 mbr-col-md-10">
+      <div class="col-lg-12 mbr-col-md-10">
         <div class="wrap">
           <div class="ico-wrap">
-            <span class="mbr-iconfont fa-folder-open fa"></span>
+            <span class="mbr-iconfont fa-gear fa"></span>
           </div>
           <div class="text-wrap vcenter">
-            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Directories</h2>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Base Directory</h3>
-            <ul>
-              <li>{{ sessionInfo.baseDir }}</li>
-            </ul>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Work Directory</h3>
-            <ul>
-              <li>{{ sessionInfo.workDir }}</li>
-            </ul>
+            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Workflow Variant: {{ sessionInfo.variant | showEmpty }}</h2>
+            <img class="statechart" ngSrc="assets/images/variant-{{ sessionInfo.variant | showEmpty }}.png" alt="{{ sessionInfo.variant | showEmpty }}" width="1" height="1" />
           </div>
         </div>
       </div>
+    </div>
 
-      <div class="col-lg-6 mbr-col-md-10">
+    <div class="row mbr-justify-content-center">
+      <div class="col-lg-12 mbr-col-md-10">
         <div class="wrap">
           <div class="ico-wrap">
-            <span class="mbr-iconfont fa-file-code-o fa"></span>
+            <span class="mbr-iconfont fa-folder-open fa"></span>
           </div>
           <div class="text-wrap vcenter">
-            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Language and Toolchain</h2>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Language</h3>
-            <ul>
-              <li>{{ sessionInfo.language }}</li>
-            </ul>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Toolchain</h3>
-            <ul>
-              <li>{{ sessionInfo.toolchain }}</li>
-            </ul>
+            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Directories</h2>
+            <table class="mbr-fonts-style text1 mbr-text display-6">
+              <tr>
+                <td class="table-header">Base Directory:</td>
+                <td class="table-value">{{ sessionInfo.baseDir }}</td>
+              </tr>
+              <tr>
+                <td class="table-header">Work Directory:</td>
+                <td class="table-value">{{ sessionInfo.workDir }}</td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
 
-      <div class="col-lg-6 mbr-col-md-10">
+      <div class="col-lg-12 mbr-col-md-10">
         <div class="wrap">
           <div class="ico-wrap">
-            <span class="mbr-iconfont fa-code-fork fa"></span>
+            <span class="mbr-iconfont fa-file-code-o fa"></span>
           </div>
           <div class="text-wrap vcenter">
-            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Version Control System</h2>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Used VCS</h3>
-            <ul>
-              <li>{{ sessionInfo.vcsName }}</li>
-            </ul>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Session Summary</h3>
-            <ul>
-              <li>{{ sessionInfo.vcsSession }}</li>
-            </ul>
+            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Language and Toolchain</h2>
+            <table class="mbr-fonts-style text1 mbr-text display-6">
+              <tr>
+                <td class="table-header">Language:</td>
+                <td class="table-value">{{ sessionInfo.language }}</td>
+              </tr>
+              <tr>
+                <td class="table-header">Toolchain:</td>
+                <td class="table-value">{{ sessionInfo.toolchain }}</td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
 
-      <div class="col-lg-6 mbr-col-md-10">
+      <div class="col-lg-12 mbr-col-md-10">
         <div class="wrap">
           <div class="ico-wrap">
-            <span class="mbr-iconfont fa-check-square-o fa"></span>
+            <span class="mbr-iconfont fa-code-fork fa"></span>
           </div>
           <div class="text-wrap vcenter">
-            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Options and Flags</h2>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">VCS Commit Message Suffix</h3>
-            <ul>
-              <li>{{ sessionInfo.messageSuffix | showEmpty }}</li>
-            </ul>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">VCS
-              Commit-On-Fail {{ sessionInfo.commitOnFail | onOff }}</h3>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">
-              Variant "{{ sessionInfo.variant | showEmpty }}"</h3>
-            <h3 class="mbr-fonts-style mbr-bold mbr-section-title4 display-6">Git
-              Auto-Push {{ sessionInfo.gitAutoPush | onOff }}</h3>
+            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Version Control System</h2>
+            <table class="mbr-fonts-style text1 mbr-text display-6">
+              <tr>
+                <td class="table-header">Used VCS:</td>
+                <td class="table-value">{{ sessionInfo.vcsName }}</td>
+              </tr>
+              <tr>
+                <td class="table-header">Session Summary:</td>
+                <td class="table-value">{{ sessionInfo.vcsSession }}</td>
+              </tr>
+              <tr>
+                <td class="table-header">Git Auto-Push:</td>
+                <td class="table-value">{{ sessionInfo.gitAutoPush | onOff }}</td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
diff --git a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts
index 3ddd3f55..9bcb8ccf 100644
--- a/webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts
+++ b/webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts
@@ -23,7 +23,7 @@ SOFTWARE.
 import {Component, Input, OnInit} from '@angular/core';
 import {TcrSessionInfo} from "../../interfaces/tcr-session-info";
 import {TcrSessionInfoService} from "../../services/tcr-session-info.service";
-import {DatePipe, NgIf} from "@angular/common";
+import {DatePipe, NgIf, NgOptimizedImage} from "@angular/common";
 import {OnOffPipe} from "../../pipes/on-off.pipe";
 import {ShowEmptyPipe} from "../../pipes/show-empty.pipe";
 
@@ -34,7 +34,8 @@ import {ShowEmptyPipe} from "../../pipes/show-empty.pipe";
     DatePipe,
     NgIf,
     OnOffPipe,
-    ShowEmptyPipe
+    ShowEmptyPipe,
+    NgOptimizedImage
   ],
   templateUrl: './tcr-session-info.component.html',
   styleUrl: './tcr-session-info.component.css'
diff --git a/webapp/src/assets/.gitkeep b/webapp/src/assets/.gitkeep
deleted file mode 100644
index e69de29b..00000000