frontend: 表示を改善した

4 files changed, 57 insertions, 32 deletions

diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts
index fba4739..4119eec 100644
--- a/frontend/app/app.component.ts
+++ b/frontend/app/app.component.ts
@@ -75,7 +75,7 @@ export class AppComponent {
   generateHeader() {
     const summary = this.editing.summarize();
     if (summary === "")
-      return "poe: eval in 30+ Ruby interpreters";
+      return "poe: run code in 10+ Ruby interpreters";
     else
       return summary;
   }
diff --git a/frontend/app/snippet-detail.component.ts b/frontend/app/snippet-detail.component.ts
index a80107a..d2f73ad 100644
--- a/frontend/app/snippet-detail.component.ts
+++ b/frontend/app/snippet-detail.component.ts
@@ -9,8 +9,11 @@ import {EditingData, EditingDataService} from "./editing-data.service";
       <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)">{{r.compiler.id}} ({{r.compiler.version}}) {{r.elapsed / 1000}}ms</div>
-        <div class="panel-body container">
+        <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>
+        </div>
+        <div class="panel-body">
           <pre><code [innerHTML]="formatted_output(r)"></code></pre>
         </div>
       </div>
@@ -44,39 +47,44 @@ export class SnippetDetailComponent implements OnInit {
   formatted_output(r: Result): string {
     if (this.isRunning(r)) return "Running...";
     if (r._) return r._; // うーーーーーーーーーーん💩
-    let str = r.output.reduce((str, pair) => {
+
+    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 どうしよ
+    str += "<span class=\"result-info\">% " + this.escapeHTML(r.compiler.commandline.join(" ").replace("{}", "/tmp/prog")) + "</span>\n";
+
+    str += r.output.reduce((str, pair) => {
       let fd = pair[0];
       let escaped = this.escapeHTML(pair[1]);
       return str + "<span class=\"result-fd-" + fd + "\">" + escaped + "</span>";
     }, "");
 
-    if (r.truncated) {
+    if (r.truncated)
       str += "<span class=\"result-info\">[truncated]</span>";
-    } else if (r.output.length === 0 || !r.output[r.output.length - 1][1].endsWith("\n")) {
+    else if (r.output.length === 0 || !r.output[r.output.length - 1][1].endsWith("\n"))
       str += "<span class=\"result-missing-newline\">%\n</span>";
-    }
 
-    if (r.result === 0) { // Success
-      if (r.exit !== 0) {
-        str += "<span class=\"result-exit\">Process exited with status " + r.exit + "</span>";
-      }
-    } else if (r.result === 1) { // Signaled
-      if (r.message.length > 0) {
-        str += "<span class=\"result-exit\">" + this.escapeHTML(r.message) + "</span>";
-      }
-    } else if (r.result === 2) {
-      str += "<span class=\"result-exit\">" + this.escapeHTML("Time limit exceeded") + "</span>";
+    switch (r.result) {
+      case 0: // Success
+        if (r.exit !== 0)
+          str += "<span class=\"result-exit\">Process exited with status " + r.exit + "</span>";
+        break;
+      case 1: // Signaled
+        if (r.message.length > 0)
+          str += "<span class=\"result-exit\">" + this.escapeHTML(r.message) + "</span>";
+        break;
+      case 2: // Timed out
+        // 5s どうしよ
+        str += "<span class=\"result-exit\">Time limit exceeded (5s)</span>";
+        break;
     }
 
     r._ = str;
     return str;
   }
 
-  // これも
-  result_text(r: Result): string {
-    return ["Success", "Signaled", "Timed out"][r.result];
-  }
-
   isSuccess(r: Result) {
     return r.result === 0 && r.exit === 0;
   }
@@ -108,7 +116,6 @@ export class SnippetDetailComponent implements OnInit {
     this.hidden_list[i] = !this.hidden_list[i];
   }
 
-
   runRemaining() {
     this.snippet.results.forEach((r, i, a) => {
       if (r.result === null) {
diff --git a/frontend/app/snippet.service.ts b/frontend/app/snippet.service.ts
index ad687f9..92fbeb3 100644
--- a/frontend/app/snippet.service.ts
+++ b/frontend/app/snippet.service.ts
@@ -4,8 +4,12 @@ import {Observable}     from "rxjs/Observable";
 import {EditingData} from "./editing-data.service";
 
 export class Compiler {
-  constructor(
-    public id: string) { }
+  public id: string;
+  public version: string;
+  public version_command: string;
+  public commandline: string[];
+
+  constructor() { }
 }
 
 export class Result {
diff --git a/frontend/poe.scss b/frontend/poe.scss
index dbb6698..72aef9f 100644
--- a/frontend/poe.scss
+++ b/frontend/poe.scss
@@ -12,7 +12,7 @@ pre {
   margin: 0;
   font-size: 13px;
   line-height: 1.4;
-  border: 1px solid #cccccc;
+  /* border: 1px solid #cccccc; */
   background-color: #f5f5f5;
   overflow-x: auto;
 
@@ -63,11 +63,20 @@ pre {
 
   .panel-heading {
     padding: 10px 15px;
-    border-bottom: 1px solid;
-    border-color: inherit;
+    display: flex;
+
+    .inline-left {
+      display: inline-block;
+      flex: 1;
+    }
+
+    .inline-right {
+      display: inline-block;
+    }
   }
 
   .panel-body {
+    border-top: 1px solid inherit;
     /*padding: 15px;*/
   }
 }
@@ -153,10 +162,15 @@ pre {
         content: "▾";
       }
     }
+
+    p {
+      margin: 0.5em 0;
+    }
   }
 }
 
-.result-fd-1 { color: black; }
-.result-fd-2 { color: red; }
-.result-exit { color: orange; }
-.result-missing-newline { color: white; background-color: black; }
+.result-fd-1 { color: #000000; }
+.result-fd-2 { color: #ff0000; }
+.result-exit { color: #ffa500; }
+.result-info { color: #666666; }
+.result-missing-newline { color: #ffffff; background-color: #000000; }