Skip to content

Commit

Permalink
[#674] Include variant state diagram image in webapp session info page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mengdaming
mengdaming committed Oct 1, 2024
1 parent 317c654 commit 81fb0df
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 51 deletions.
22 changes: 20 additions & 2 deletions webapp/src/app/components/tcr-session-info/tcr-session-info.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ section {
background-color: #f1f4fa;
}

.statechart {
vertical-align: center;
width: auto;
height: auto;
}

.wrap {
display: flex;
background: white;
Expand All @@ -36,7 +42,7 @@ section {
}

.ico-wrap {
margin: auto;
margin: 10px;
}

.mbr-iconfont {
Expand All @@ -47,7 +53,7 @@ section {
}

.vcenter {
margin: auto;
margin: 10px;
}

.mbr-section-title3 {
Expand Down Expand Up @@ -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;
}
97 changes: 50 additions & 47 deletions webapp/src/app/components/tcr-session-info/tcr-session-info.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
5 changes: 3 additions & 2 deletions webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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'
Expand Down
Empty file removed webapp/src/assets/.gitkeep
View file
Empty file.

0 comments on commit 81fb0df

Please sign in to comment.