frontend: 結果表示をちょっとよく

2 files changed, 45 insertions, 69 deletions

diff --git a/frontend/app/snippet-detail.component.ts b/frontend/app/snippet-detail.component.ts
index ae883fe..b7a358b 100644
--- a/frontend/app/snippet-detail.component.ts
+++ b/frontend/app/snippet-detail.component.ts
@@ -7,22 +7,26 @@ import {EditingData, EditingDataService} from "./editing-data.service";
   template: `
     <div class="result-items-container" *ngIf="snippet">
       <div class="result-item panel"
-          *ngFor="#r of snippet.results.slice().reverse(); #i = index"
-          [ngClass]="{'panel-success': isSuccess(r), 'panel-failure': isFailure(r), 'panel-running': isRunning(r), 'result-item-collapsed': isHiddenIdx(i)}">
-        <div class="panel-heading" (click)="toggleHiddenIdx(i)" [id]="'result-'+r.compiler.id">
-          <span class="inline-left">{{r.compiler.id}}</span>
-          <span class="inline-right" *ngIf="!isRunning(r)">{{r.elapsed}}ms</span>
+          *ngFor="#group of result_classes; #i = index"
+          [ngClass]="{'panel-success': isSuccess(group.results[0]), 'panel-failure': isFailure(group.results[0]), 'panel-running': isRunning(group.results[0])}">
+        <div class="panel-heading" [id]="'result-type-'+i">
+          <div *ngFor="#r of group.results" class="result-compiler-tab-item" (click)="group.current = r" [ngClass]="{'active': group.current === r}">
+            {{r.compiler.id}} ({{r.elapsed}}ms)
+          </div>
         </div>
-        <div class="panel-body">
-          <pre><code [innerHTML]="formatted_output(r)"></code></pre>
+        <div class="panel-body" *ngIf="group.current">
+          <pre><code [innerHTML]="formatted_output(group.current)"></code></pre>
         </div>
       </div>
     </div>
   `,
 })
 export class SnippetDetailComponent implements OnInit {
+  /*
+          <span class="inline-right" *ngIf="!isRunning(r)">{{r.elapsed}}ms</span>
+  */
   private snippet: Snippet = null;
-  private hidden_list: boolean[] = [];
+  private result_classes: any[] = [];
 
   constructor(
     private _router: Router,
@@ -35,7 +39,7 @@ export class SnippetDetailComponent implements OnInit {
     this._service.getSnippet(sid).subscribe(
       snip => {
         this.snippet = snip;
-        this.updateHiddenList();
+        this.classifyResults();
         this._edit_service.fromSnippet(snip);
         this.runRemaining();
       },
@@ -49,7 +53,6 @@ export class SnippetDetailComponent implements OnInit {
     if (r._) return r._; // うーーーーーーーーーーん💩
 
     let str = "";
-
     str += "<span class=\"result-info\">% " + this.escapeHTML(r.compiler.version_command) + "</span>\n";
     str += "<span class=\"result-info\">" + this.escapeHTML(r.compiler.version) + "</span>\n";
     // TODO: /tmp/prog どうしよ
@@ -97,23 +100,16 @@ export class SnippetDetailComponent implements OnInit {
     return r.result === null;
   }
 
-  updateHiddenList() {
-    this.hidden_list = [];
-    let prev = null;
-    this.snippet.results.slice().reverse().forEach((curr, i) => {
-      if (prev)
-        this.hidden_list.push(Result.compareOutput(prev, curr));
-      prev = curr;
+  classifyResults() {
+    var classes = [];
+    this.snippet.results.slice().reverse().forEach(curr => {
+      const found = classes.some(group =>
+        Result.compareOutput(curr, group.results[0]) &&
+          group.results.push(curr));
+      if (!found)
+        classes.push({ current: curr, results: [curr] });
     });
-    this.hidden_list.push(false);
-  }
-
-  isHiddenIdx(i: number) {
-    return this.hidden_list[i];
-  }
-
-  toggleHiddenIdx(i: number) {
-    this.hidden_list[i] = !this.hidden_list[i];
+    this.result_classes = classes;
   }
 
   runRemaining() {
@@ -122,7 +118,7 @@ export class SnippetDetailComponent implements OnInit {
         this._service.runSnippet(this.snippet, r.compiler).subscribe(
           res => {
             a[i] = res;
-            this.updateHiddenList();
+            this.classifyResults();
           },
           err => console.log(err)
         );
diff --git a/frontend/poe.scss b/frontend/poe.scss
index 72aef9f..31677a5 100644
--- a/frontend/poe.scss
+++ b/frontend/poe.scss
@@ -57,27 +57,14 @@ pre {
 }
 
 .panel {
-  margin: 0 0 20px;
   border: 1px solid #dddddd;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 
   .panel-heading {
-    padding: 10px 15px;
-    display: flex;
-
-    .inline-left {
-      display: inline-block;
-      flex: 1;
-    }
-
-    .inline-right {
-      display: inline-block;
-    }
+    /* padding: 10px 15px; */
   }
 
   .panel-body {
-    border-top: 1px solid inherit;
-    /*padding: 15px;*/
   }
 }
 
@@ -108,7 +95,6 @@ pre {
       display: inline-block;
       font-size: 14px;
       border-radius: 0;
-      cursor: pointer;
       outline: 0 !important;
       color: #333333;
       border: 1px solid #cccccc;
@@ -135,36 +121,30 @@ pre {
 
 /* RESULT *************************************************/
 .result-items-container {
+  margin-top: 20px;
+
   .result-item {
     margin-top: 0;
-
-    &:not(:last-child) {
-      border-bottom: none;
-      margin-bottom: 0;
-    }
-
-    &.result-item-collapsed {
-      .panel-heading:before {
-        display: inline-block;
-        width: 1em;
-        content: "▸";
+    margin-bottom: 15px;
+
+    .panel-heading {
+      display: flex;
+      padding: 0;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+
+      .result-compiler-tab-item {
+        padding: 10px 15px;
+        border-color: inherit;
+        border-style: solid;
+        border-width: 0 1px 1px 0;
+        cursor: pointer;
+
+        &.active {
+          border-bottom: 0;
+          background-color: #f5f5f5;
+        }
       }
-
-      .panel-body {
-        display: none;
-      }
-    }
-
-    &:not(.result-item-collapsed) {
-      .panel-heading:before {
-        display: inline-block;
-        width: 1em;
-        content: "▾";
-      }
-    }
-
-    p {
-      margin: 0.5em 0;
     }
   }
 }